/* ============================================================ Conquizzone — Stile principale Palette: verde scuro / smeraldo / oro / rosso ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Fase 1b: i token legacy sono ALIAS del kit "Sala di Guerra" (kit.css) → retint globale delle superfici non ancora convertite al kit. La fonte dei valori è kit.css (--k-*); i fallback inline coprono un eventuale kit.css non ancora in cache (client vecchi a metà aggiornamento). */ --bg: var(--k-bg, #16110C); --bg-card: var(--k-surface, #1E1710); --bg-modal: var(--k-surface-2, #241C13); --bordo: var(--k-border, rgba(201,162,39,.30)); --testo: var(--k-ink, #EFE6D2); --testo-2: var(--k-ink-muted, #B3A283); --primario: var(--k-gold, #C9A227); --primario-hv: var(--k-gold-scuro, #A9891D); --oro: var(--k-gold, #C9A227); --verde: var(--k-green, #5F8A54); --rosso: var(--k-wax-bright, #C24437); --raggio: 12px; --ombra: 0 8px 32px rgba(0,0,0,.6); --font: 'Segoe UI', system-ui, -apple-system, sans-serif; } html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--testo); font-family: var(--font); -webkit-tap-highlight-color: transparent; touch-action: none; } /* 🔠 F8 — prototipo caratteri grandi (toggle in Impostazioni → Account, classe messa PRIMA del paint dallo script inline in ): scala i rem del gioco; i font-size in px di kit.css restano fissi (prototipo GO/NO-GO). */ html.font-grandi { font-size: 115%; } /* F8.b: +1 tacca (richiesta proprietario); i testi CANVAS scalano x1.35 via mappa._fontScala */ /* ─── Schermate ─────────────────────────────────────────────── */ .schermata { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 10; } .schermata.attiva { opacity: 1; pointer-events: auto; } #schermata-gioco { flex-direction: column; align-items: stretch; width: 100%; height: 100%; /* Safari: flex: 1 dei figli richiede altezza esplicita */ background: var(--bg); } /* iOS: niente dissolvenza sulla schermata di gioco. Il fade opacity 0→1 intrappola il layer del canvas in WebKit e la mappa resta nera (dati e tap ok, ma non viene dipinta). Vedi MappaMondo.forzaRipitturaIOS(). */ html.ios #schermata-gioco { transition: none; } /* ─── Caricamento ───────────────────────────────────────────── */ #schermata-caricamento { flex-direction: column; gap: 24px; background: var(--bg); z-index: 100; } .logo-caricamento { display: flex; flex-direction: column; align-items: center; gap: 12px; } .logo-caricamento img { max-width: 340px; width: 85vw; height: auto; filter: drop-shadow(0 4px 24px rgba(0,0,0,.6)); animation: logo-breathe 3s ease-in-out infinite; } @keyframes logo-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 24px rgba(0,0,0,.6)); } 50% { transform: scale(1.02); filter: drop-shadow(0 6px 32px rgba(212,169,64,.25)); } } .loading-bar-container { width: min(280px, 70vw); height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; margin-top: 8px; } .loading-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--oro), #e8c547); border-radius: 2px; transition: width .8s ease-out; } .testo-caricamento { color: var(--testo-2); font-size: .88rem; font-style: italic; opacity: 1; transition: opacity .2s ease; min-height: 1.3em; text-align: center; } /* ─── Registrazione ─────────────────────────────────────────── */ .card-registrazione { background: var(--bg-card); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 32px 24px; max-width: 380px; width: 92%; box-shadow: var(--ombra); display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; } .logo-locale-grande { width: 80px; height: 80px; border-radius: 50%; background: var(--bg-modal); border: 3px solid var(--bordo); display: flex; align-items: center; justify-content: center; font-size: 2rem; overflow: hidden; } .logo-locale-grande img { width: 100%; height: 100%; object-fit: cover; } .card-registrazione h2 { font-size: 1.5rem; } .sottotitolo { color: var(--testo-2); font-size: .9rem; } .istruzione { color: var(--testo-2); font-size: .9rem; } .input-username { width: 100%; background: var(--bg-modal); border: 1px solid var(--bordo); border-radius: 8px; color: var(--testo); font-size: 1rem; padding: 12px 16px; outline: none; transition: border-color .2s; } .input-username:focus { border-color: var(--primario); } .errore-reg { color: var(--rosso); font-size: .85rem; min-height: 20px; } /* ─── Bottoni ───────────────────────────────────────────────── */ /* Primario GLOBALE = oro Sala di Guerra (Fase 3): Cinzel, maiuscolo, rilievo 3D */ .btn-primario { width: 100%; background: linear-gradient(#D4AC2E, #BE9720); color: #241A07; border: none; border-radius: 13px; padding: 14px; font-family: var(--k-font-display, Georgia, serif); font-size: .95rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; box-shadow: 0 3px 0 #8F6F14; transition: filter .2s, transform .1s; -webkit-tap-highlight-color: transparent; } /* il primario ospita icona + testo + prezzo in fila, come il suo fratello quieto */ .btn-primario { display: flex; align-items: center; justify-content: center; gap: 9px; } .btn-primario:hover { filter: brightness(1.06); } .btn-primario:active { transform: translateY(2px); box-shadow: 0 1px 0 #8F6F14; } .btn-primario:disabled { background: var(--bg-card); color: var(--testo-2); box-shadow: none; cursor: not-allowed; } /* Il fratello quieto di .btn-primario — STESSA forma, stesso font, stesso respiro, solo scuro invece che dorato. ⚠️ Serve perché nella scheda della cella i due pulsanti stanno uno sopra l'altro: prendendone uno dal kit e uno da qui si leggevano come due giochi diversi (segnalato dall'owner sullo screenshot). Se un domani nasce una terza azione, va qui — non in un terzo sistema. */ .btn-secondario { width: 100%; background: linear-gradient(180deg, rgba(201,162,39,.10), rgba(201,162,39,.04)); color: var(--k-ink, #EFE6D2); border: 1px solid rgba(201,162,39,.45); border-radius: 13px; padding: 13px; font-family: var(--k-font-display, Georgia, serif); font-size: .95rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; transition: filter .2s, transform .1s; -webkit-tap-highlight-color: transparent; } .btn-secondario:hover { filter: brightness(1.12); } .btn-secondario:active { transform: translateY(2px); } .btn-secondario:disabled { opacity: .45; cursor: not-allowed; } /* ⚠️⚠️ IL DISTRUTTIVO — e perché è un MODIFICATORE di .btn-secondario e non altro. Owner, 30 luglio: «quella del porto dovrebbe essere uguale, senza quei pulsantoni colorati, scrivilo come standard nei file». I due candidati alternativi erano peggio: · `.k-btn--pericolo` del kit ci avrebbe portato dentro una TERZA famiglia di pulsanti, che è esattamente ciò che il commento di .btn-secondario qui sopra vieta per iscritto («se un domani nasce una terza azione, va qui — non in un terzo sistema»); · un gradiente rosso pieno scritto inline era ciò che l'owner ha chiesto di togliere, ed è anche il modo in cui un porto è stato demolito «appena cliccato per sbaglio». I due valori NON sono nuovi: sono gli stessi che «rompi alleanza» aveva scritti a mano in ui.js. Portarli qui significa che la scheda ha UN rosso, definito in un posto solo. */ .btn-secondario--pericolo { border-color: rgba(255,90,90,.45); color: #ff9b9b; background: linear-gradient(180deg, rgba(255,90,90,.10), rgba(255,90,90,.03)); } /* il recupero è denaro, non pericolo: la pastiglia del prezzo resta oro */ .btn-secondario--pericolo .btn-costo { background: rgba(201,162,39,.18); color: #F0D98A; } /* ══════════════════════════════════════════════════════════════════════════════ 📐 LO STANDARD DELLA SCHEDA — sei regole, e valgono per ogni scheda-oggetto (la cella, e quel che le somiglia). Scritto qui su richiesta dell'owner, il 30 luglio, dopo che la plancia del porto era diventata un secondo linguaggio. 1. UNA SCHEDA PER OGGETTO. Quel che riguarda una cella sta nella scheda della cella. Un secondo pannello per lo stesso oggetto si allontana da solo: quello del porto ha finito per non avere né lo stemma, né la label di proprietà, né il comando per aumentare le difese — e nessuno se n'era accorto perché era un'altra schermata. 2. UN SOLO .btn-primario per scheda, ed è la risposta a «cosa faccio qui». Nella scheda della cella è sempre l'azione sul territorio — conquista, colpisci, aumenta le difese — su tutte e quattro le strutture, senza eccezioni per tipo. Tutto il resto è .btn-secondario, uno per riga, in colonna. 3. IL DISTRUTTIVO È QUIETO: .btn-secondario--pericolo (bordo e inchiostro rossi, fondo appena acceso) PIÙ un secondo passo — UIKit.conferma, mai un tocco solo. 4. NESSUN PULSANTE CHE RIFIUTA. Meglio nessun comando che un comando che si apre per dire di no (owner, due volte). ⚠️ La regola NON è «mai un bottone spento»: è «mai un bottone che, premuto, direbbe no». Le due eccezioni sono i casi in cui il pulsante spento È l'informazione, e sono entrambe nella scheda della cella: · il conto delle dodici ore («Potrai edificare tra 04:37»); · «Difesa al massimo», che dice perché non si può salire oltre. Il criterio per distinguerle: uno spento informativo dice **come stanno le cose**, uno spento sbagliato nasconde **un'azione che esiste altrove**. Nel dubbio, si toglie il bottone. 5. I VALORI CHE CAMBIANO NEL TEMPO stanno in un blocco .k-dif (testa · barra · hint), uno per soggetto: difesa, piantagione, tiro della torre. Mai una riga piatta etichetta→valore, che è come parlava la plancia. E la barra si mostra solo quando promette qualcosa che arriva davvero. 6. PREZZO E RICOMPENSA sempre in .btn-costo, mai dentro la frase; e le ICONE sono i glifi disegnati della carta (via `_iconaHtml`), non emoji. Se il glifo non c'è si crea: `_iconaHtml` degrada alla sola scritta invece di rompersi, ma due segni per la stessa cosa sono §0bis dell'albo. ══════════════════════════════════════════════════════════════════════════════ */ /* Il prezzo di un'azione, in oro. ⚠️ Sul dorato del primario l'inchiostro è scuro, sul fondo scuro del secondario è oro: con un colore solo, uno dei due sparisce — ed è sparito davvero («20 oro» illeggibile, screenshot dell'owner). */ .btn-costo { display: inline-flex; align-items: center; gap: 5px; font-family: var(--k-font, system-ui); font-size: .8rem; font-weight: 700; letter-spacing: .2px; text-transform: none; padding: 3px 9px; border-radius: 999px; } .btn-primario .btn-costo { background: rgba(36,26,7,.20); color: #241A07; } .btn-secondario .btn-costo { background: rgba(201,162,39,.20); color: #F0D98A; } /* Pulsanti pannello impostazioni — stile premium */ .btn-imp { width: 100%; background: linear-gradient(135deg, rgba(201,162,39,.06) 0%, rgba(255,255,255,.02) 100%); border: 1px solid var(--k-border-tenue, rgba(201,162,39,.2)); border-radius: 12px; padding: 13px 16px; color: var(--k-ink, #EFE6D2); cursor: pointer; font-size: .88rem; font-weight: 600; text-align: left; transition: all .25s ease; display: flex; align-items: center; gap: 10px; letter-spacing: .3px; } .btn-imp:hover { background: linear-gradient(135deg, rgba(201,162,39,.12) 0%, rgba(201,162,39,.03) 100%); border-color: var(--k-border, rgba(201,162,39,.3)); color: var(--k-gold-bright, #E5C96B); } .btn-imp:active { transform: scale(.98); } /* ─── Header gioco ──────────────────────────────────────────── */ .header-gioco { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; /* safe-area (notch/dynamic island): solo padding, il canvas non si tocca */ padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: var(--bg-card); border-bottom: 1px solid var(--bordo); height: calc(56px + env(safe-area-inset-top, 0px)); flex-shrink: 0; position: relative; z-index: 10; touch-action: auto; } /* flex:1 + min-width:0 → il nome del clan si accorcia (ellipsis) e le icone a destra NON vengono mai spinte fuori dallo schermo (nomi lunghi tipo "Serenissima Repubblica di Venezia") */ .header-sx { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; } .mini-logo { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-modal); border: 2px solid var(--bordo); overflow: visible; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .mini-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; } .header-info { display: flex; flex-direction: column; min-width: 0; } .nome-locale-hdr { font-family: var(--k-font-display, Georgia, serif); font-weight: 700; font-size: 1rem; letter-spacing: .5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .username-hdr { font-size: .78rem; color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* niente align-items: i bottoni si stirano tutti alla stessa altezza (box uguali) */ .header-dx { display: flex; gap: 6px; flex-shrink: 0; } /* Modalità spettatore */ .header-gioco.spettatore .header-sx { flex: 0 0 auto; min-width: 0; overflow: visible; position: relative; } .header-gioco.spettatore .header-sx img { height: 90px; width: auto; max-width: none; display: block; position: absolute; top: -24px; left: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); z-index: 5; } /* Spettatore: alza pulsanti zoom e replay sopra l'overlay spettatore */ .spettatore-attivo #overlay-mappa { bottom: 130px; } .spettatore-attivo #replay-bar { bottom: 100px!important; position:fixed!important; z-index:20!important; left:50%!important; } .btn-icona { background: rgba(255,255,255,.03); border: 1px solid var(--bordo); border-radius: 12px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--k-ink-soft, var(--testo)); font-size: 1.1rem; cursor: pointer; transition: background .2s; } .btn-icona:hover { background: var(--bg-modal); } /* ─── Contenitore mappa ─────────────────────────────────────── */ #contenitore-mappa { flex: 1; position: relative; overflow: hidden; touch-action: none; width: 100%; min-height: 0; /* fix flex shrink su Safari */ } #mappa-canvas { position: absolute; top: 0; left: 0; cursor: grab; touch-action: none; } #mappa-canvas:active { cursor: grabbing; } #mappa-canvas.su-cella { cursor: pointer; } #mappa-canvas.su-cella:active { cursor: pointer; } #mappa-canvas.su-terra-neutra { cursor: default; } #mappa-canvas.su-terra-neutra:active { cursor: default; } /* (Fase 2: il logo nel footer è stato ritirato — la barra azione occupa tutto) */ /* Controlli zoom */ #overlay-mappa { position: absolute; right: 12px; bottom: 70px; display: flex; flex-direction: column; gap: 6px; z-index: 5; } .btn-zoom { width: 40px; height: 40px; background: rgba(22,17,12,.82); border: 1px solid var(--bordo); border-radius: 12px; color: var(--k-ink-soft, var(--testo)); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--ombra); transition: background .2s; } .btn-zoom:hover { background: var(--bg-modal); } .btn-replay-evidenziato { background: var(--oro) !important; color: #000 !important; font-weight: 700; animation: pulse-replay 2s ease-in-out infinite; box-shadow: 0 0 12px rgba(212,169,64,.4); } /* 👑 «PRO» sotto il ▶ (owner, 5 agosto: «predisponi il gate, scrivendo sotto in piccolo PRO»). ⚠️ È un PSEUDO-ELEMENTO in posizione assoluta, non un figlio: `#overlay-mappa` è una colonna flex di bottoni 40×40, e una riga di testo dentro il bottone lo allungherebbe spostando in su i tre comandi sopra. Così la scritta si appoggia sotto senza occupare spazio. ⚠️ `pointer-events: none` o mangerebbe il tocco proprio sul bordo del bottone, che su un 40×40 è tanto. */ #btn-replay { position: relative; overflow: visible; } #btn-replay::after { content: 'PRO'; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 1px; font-size: .52rem; font-weight: 800; letter-spacing: .09em; line-height: 1; color: var(--oro); text-shadow: 0 1px 2px rgba(0,0,0,.85); pointer-events: none; } /* a bottone spento (già usato) la scritta segue il tono del bottone */ .btn-replay-evidenziato.usato::after { color: var(--testo-2, #a0a0a0); } .btn-replay-evidenziato.usato { background: var(--bg-card) !important; color: var(--testo) !important; animation: none; box-shadow: var(--ombra); } @keyframes pulse-replay { 0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(212,169,64,.3); } 50% { transform: scale(1.08); box-shadow: 0 0 16px rgba(212,169,64,.5); } } /* Tooltip hover cella */ .tooltip { position: absolute; background: var(--bg-card); border: 1px solid var(--bordo); border-radius: 6px; padding: 6px 10px; font-size: .8rem; pointer-events: none; z-index: 20; white-space: nowrap; box-shadow: var(--ombra); max-width: 200px; white-space: normal; } /* ─── Pannello basso (Fase 2): barra azione ─────────────────── */ /* RISPONDI (oro, grande) + USA ATTACCHI (scuro, filetto oro) + ruota tonda. Flex con gap, niente più figli in absolute. Gli stili dei bottoni sono nel kit (kit.css: .k-abar-*); qui solo il contenitore. */ #pannello-basso { min-height: 50px; background: var(--k-grad-abar, var(--bg-card)); border-top: 1px solid var(--bordo); display: flex; align-items: stretch; gap: 10px; padding: 12px 14px; /* safe-area (barra gesture iOS/Android): solo padding in basso */ padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; position: relative; z-index: 10; flex-wrap: nowrap; overflow: visible; touch-action: auto; } /* Testo di stato legacy: nascosto di default (i messaggi vivono nel sottotitolo di RISPONDI); riappare SOLO per lo stato "clan disattivato" (via JS). */ #stato-conquista { display: none; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; max-width: calc(100vw - 40px); } #stato-conquista-testo { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Contatore quiz dentro RISPONDI: testo puro (nessuna tap-area separata) */ /* ─── Streak chip nell'header (fiamma SVG, pill oro) ────────── */ .hdr-streak { display: inline-flex; align-items: center; gap: 2px; background: rgba(201,162,39,.10); border: 1px solid var(--bordo); border-radius: 999px; padding: 4px 8px; font-size: 1rem; font-weight: 800; color: var(--k-gold-bright, var(--oro)); cursor: pointer; line-height: 1; transition: background .2s; -webkit-tap-highlight-color: rgba(201,162,39,.3); flex-shrink: 0; } .hdr-streak:hover { background: var(--bg-modal); } .hdr-streak .hdr-streak-fuoco { flex: 0 0 auto; display: inline-flex; } .hdr-streak .hdr-streak-fuoco svg { width: 15px; height: 15px; } .hdr-streak.spenta { color: var(--testo-2); background: none; } /* R2 — striscia a rischio: dopo le 18 senza quiz giocati la fiamma si spegne */ .hdr-streak-freeze { display: inline-flex; align-items: center; gap: 1px; margin-left: 6px; color: #7fd3ff; } .hdr-streak-freeze .hdr-streak-ghiaccio { display: inline-flex; } .hdr-streak-freeze .hdr-streak-ghiaccio svg { width: 14px; height: 14px; } /* Ruota (Fase 2): tonda nella barra azione — stile nel kit (.k-abar-ruota) */ #ruota-extra-wrap { display: flex; align-items: stretch; flex: 0 0 auto; } /* ─── Overlay spettatore ────────────────────────────────────── */ #overlay-spettatore { position: fixed; bottom: 0; left: 0; right: 0; z-index: 15; background: linear-gradient(135deg, rgba(15,30,21,.97), rgba(29,53,39,.97)); border-top: 2px solid var(--bordo); padding: 12px 16px; } #overlay-spettatore-contenuto { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 600px; margin: 0 auto; flex-wrap: wrap; } #overlay-spettatore-sx { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; } .overlay-spett-icona { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; } #overlay-spettatore-sx strong { display: block; font-size: .88rem; color: var(--oro); } #overlay-spettatore-sx p { font-size: .78rem; color: var(--testo-2); margin: 2px 0 0; line-height: 1.3; } .btn-spett-reg { flex-shrink: 0; font-size: .82rem; padding: 8px 14px; white-space: nowrap; } /* ─── Form richiesta locale (F8: input passati a .k-input del kit; le regole .rl-input sono state RIMOSSE — nessun consumatore nel markup) ─────────── */ .rl-form { display: flex; flex-direction: column; gap: 8px; margin-top: .5rem; } .rl-privacy { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; color: var(--testo-2); cursor: pointer; line-height: 1.4; } .rl-privacy input[type=checkbox] { margin-top: 2px; flex-shrink: 0; } /* ─── Modal ─────────────────────────────────────────────────── */ /* ══ 🪟 I POPUP — owner, 5 agosto: «anche i popup devono essere allineati allo stile del gioco». ⚠️ Sono la cornice CONDIVISA di tutto il gioco: qui dentro passano l'esito del quiz, la scheda della cella, le conferme, gli avvisi. Bastavano tre righe — il velo, la carta e il titolo — perche' ogni popup del gioco parlasse la stessa lingua delle schermate rifatte; e finche' non le si tocca, ogni schermata nuova nasce vecchia. ══ */ .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--k-scrim, rgba(10,7,4,.6)); display: flex; align-items: flex-end; justify-content: center; z-index: 50; transition: opacity .25s; } .modal.nascosto { opacity: 0; pointer-events: none; } .modal-contenuto { background: var(--k-surface-2, #241C13); border: 1px solid var(--k-border, rgba(201,162,39,.30)); border-bottom: none; border-radius: var(--k-r-lg, 24px) var(--k-r-lg, 24px) 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 500px; max-height: 85vh; overflow-y: auto; position: relative; box-shadow: var(--k-elev-2, 0 -14px 40px rgba(0,0,0,.6)); animation: slideUp .25s ease; display: flex; flex-direction: column; gap: 12px; } .modal-grande { max-height: 90vh; } @keyframes slideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-chiudi { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; z-index: 5; transition: background .15s, transform .1s; -webkit-tap-highlight-color: transparent; } .modal-chiudi:hover { background: rgba(0,0,0,.45); } .modal-chiudi:active { transform: scale(.9); } /* ⚠️ Questo padding riserva lo spazio della ✕, e ha senso SOLO per il titolo in cima al modale — ma è un selettore discendente, quindi lo prende OGNI h3. Ha già prodotto tre sintomi: #compagnia-nome, #modal-cella e #risultato-conquista qui sotto. Se un giorno lo si stringe al primo figlio, vanno riguardati tutti i modali uno per uno. */ /* ⚠️⚠️ IL TITOLO DI OGNI POPUP era in font di SISTEMA — «Vittoria, messere!», «Nuovo titolo», le conferme: tutte in Segoe UI dentro un gioco scritto in Cinzel. E' la riga che, da sola, allinea i popup al resto (owner, 5 agosto). ⚠️ `padding-right:40px` fa spazio alla ✕ e SCENTRA il testo dove il titolo e' centrato: e' la trappola gia' curata su `#compagnia-nome`, `#modal-cella` e `#risultato-conquista`, e va ricordata prima di aggiungere il quarto caso. */ .modal-contenuto h3:not([class]) { font-family: var(--k-font-display, Cinzel, serif); font-weight: 700; font-size: var(--k-t-2xl, 21px); letter-spacing: .5px; color: var(--k-ink-forte, #F2E8D2); padding-right: 40px; margin: 0; } /* ⚠️⚠️ `:not([class])` NON e' un vezzo. `.modal-contenuto h3` pesa (0,1,1) e batte una CLASSE come `.ruota-titolo` (0,1,0): senza questa clausola la cornice condivisa scavalcherebbe ogni titolo che si e' dato una veste propria — e il primo a cadere era il titolo della ruota, rifatto in questo stesso giro. E' la terza volta che il selettore discendente di questo blocco morde (vedi `#compagnia-nome` e `#risultato-conquista` qui sotto): la regola vale per gli h3 SENZA classe, cioe' quelli che non hanno chiesto niente, e chi si nomina comanda a casa propria. */ /* ⚠️⚠️ QUI C'ERA IL COMPENSO `#compagnia-nome { padding-left:40px }`, e il 5 agosto 2026 è diventato LUI il difetto: «il nome in alto è spostato sulla destra» (owner). Era il gemello del `padding-right:40px` qui sopra — 40 a destra per la ✕, 40 a sinistra per rimettere il testo in mezzo. Ma quel titolo si è dato `class="k-titolo"`, e da allora `:not([class])` non lo prende più: è rimasto solo il compenso, cioè 40 px di scarto verso destra. ⚠️ LA LEZIONE, per il quarto caso: un compenso vive attaccato alla regola che compensa. Chi si dà una classe esce dalla cornice condivisa e deve uscire anche dal compenso — sennò paga due volte. Il centraggio ce l'ha già il contenitore della testata. */ /* Esito del quiz: «Vittoria, messere!» stava 20 px a sinistra del cerchio e della stellina. #risultato-conquista è una colonna con align-items:center, che centra il BORDER box; il testo è centrato nel CONTENT box, che il padding lascia tutto a sinistra → scarto di padding-right/2. Lì la ✕ non c'è: sta in cima al modale. */ #risultato-conquista h3 { padding-right: 0; } .comp-geo-citta { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; color: var(--oro); } /* 🗑️ QUI C'ERANO `.comp-pos-chip` e i suoi due pezzi — le due pastiglie della posizione in classifica, sotto le caselle. Via il 6 agosto: la posizione è salita nelle caselle («togliere il pulsante orizzontale con la classifica», owner), e con la barra se n'è andata anche la Perpetua da questa scheda. */ /* 🎬 I COMANDI IN FONDO A UNA SCHEDA: una colonna, un'aria sola. ⚠️ Nasce perché i due pulsanti della scheda Signoria erano fratelli nudi dentro `.modal-contenuto`: fra loro cadevano il margine del blocco precedente PIÙ il proprio, e si leggevano come due comandi che non hanno niente a che fare l'uno con l'altro. Lo spazio fra i comandi lo decide il contenitore, mai il singolo bottone. */ .k-prof-azioni { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } /* 🌍 «Provenienza: Italia» — una riga sola sotto il nome, in tutte e due le schede. ⚠️ `:empty` NON è più il caso «non l'ha dichiarata»: quello adesso si SCRIVE («Provenienza: sconosciuta», owner 6 agosto). Resta a guardia dello slot finché la scheda non l'ha riempito — è nell'HTML vuoto e si riempie all'apertura. */ .k-provenienza { margin: 3px 0 0; font-size: .78rem; display: flex; align-items: baseline; justify-content: center; gap: 6px; } .k-provenienza:empty { display: none; margin: 0; } .k-prov-naz { color: var(--k-ink, #EFE6D2); } /* ⚠️ «sconosciuta» è un'ASSENZA, e va letta come tale: nello stesso inchiostro pieno dei nomi di paese si legge come il nome di un posto che non si conosce. */ .k-prov-ignota { color: var(--testo-2); font-style: italic; } /* 🪜 LA SCALA DELLA GERARCHIA — un gradino per riga (owner, 6 agosto). Le etichette hanno una colonna sua a larghezza fissa: senza, «Signore» e «Vassallo liv. 2» spingono i nomi a partire da due punti diversi e la scala si legge storta. `min-width` e non `width`, perché in inglese sono più corte. */ .ger-riga { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: .8rem; line-height: 1.55; color: var(--k-ink, #EFE6D2); padding: 3px 6px; border-radius: 7px; } /* ⚠️ `flex-start` e non `center`: un elenco di vassalli lungo occupa due righe, e col glifo centrato verticalmente il segno scivolava SOTTO la propria etichetta — sembrava appartenere alla riga dopo. Visto nell'anteprima, non nel codice. */ .ger-riga svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--k-gold, #C9A227); align-self: flex-start; margin-top: 2px; } .ger-eti { min-width: 104px; flex: 0 0 auto; color: var(--k-ink-muted, #B3A283); font-weight: 600; } /* ⚠️ `flex: 1 1 0` e non `1 1 auto`: con base `auto` un elenco lungo di vassalli è più largo dello spazio rimasto, e in un contenitore `flex-wrap: wrap` l'elemento va a capo PRIMA che il restringimento entri in gioco — l'etichetta restava sola sulla sua riga e i nomi sotto, come se il blocco fosse rotto. Con base 0 il nome resta accanto all'etichetta e va a capo dentro la sua colonna. Visto nell'anteprima. */ .ger-chi { flex: 1 1 0; min-width: 0; } .ger-nome { cursor: pointer; text-decoration: underline; } /* La Signoria che stai guardando: un filo d'oro sul fianco e un fondo appena acceso. ⚠️ Niente `font-weight` qui — il grassetto ce l'ha già «questa Signoria» dentro, e raddoppiarlo la faceva sembrare un titolo invece che un gradino fra gli altri. */ .ger-qui { background: rgba(201, 162, 39, .10); box-shadow: inset 2px 0 0 var(--k-gold, #C9A227); } .ger-qui .ger-eti { color: var(--k-gold-bright, #E5C96B); } /* 🤝 Le righe degli accordi, dentro il riquadro comune `.k-prof-riq`. */ .comp-acc-riga { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .8rem; line-height: 1.5; color: var(--k-ink, #EFE6D2); padding: 2px 0; } .comp-acc-riga svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--k-gold, #C9A227); } .comp-acc-n { font-family: var(--k-font-display, Cinzel, serif); color: var(--k-gold-bright, #E5C96B); font-weight: 700; } .comp-acc-nomi { display: inline-flex; flex-wrap: wrap; gap: 5px; min-width: 0; } .comp-acc-nome { cursor: pointer; padding: 1px 7px; border-radius: 7px; background: rgba(201,162,39,.10); border: 1px solid var(--k-border-tenue, rgba(201,162,39,.18)); color: var(--k-ink, #EFE6D2); font-size: .76rem; white-space: nowrap; } .comp-acc-piu { color: var(--k-ink-muted, #B3A283); font-size: .76rem; } /* 🥜 Il bagigio in cima all'avviso «la borsa è piena». ⚠️ Era l'emoji 🥜: la valuta del gioco ha il SUO conio (`_cqzMonetaIcona`, il tondello con l'arachide incisa), ed è quello che il giocatore vede sul bottone Attacca e sotto ogni prezzo. Due segni per la stessa cosa è la lamentela che l'owner ha già fatto tre volte. */ .bp-segno { display: flex; justify-content: center; line-height: 1; margin-bottom: 8px; } .bp-segno img, .bp-segno svg { width: 44px; height: 44px; } /* ─── Modal cella ───────────────────────────────────────────── */ .cella-bandiera { width: 100%; border-radius: 10px; background: var(--bordo); } #modal-cella .modal-contenuto h3 { padding-right: 0; } .proprietario-box { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border-radius: 8px; padding: 10px 14px; font-weight: 600; } /* 🏗️ LA PASTIGLIA DELL'OPERA — cosa c'è su questa cella, in cima alla scheda. Vive dentro #cella-bandiera, che è tinto col colore della casata: quindi fondo scuro proprio, o su una casata chiara il testo sparirebbe. Il glifo è quello VERO della carta (via _iconaHtml), mai un'emoji — regola 6 dello standard qui sotto. */ .k-cella-opera { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 2px; padding: 4px 11px 4px 8px; border-radius: 999px; background: rgba(20,14,6,.55); border: 1px solid rgba(201,162,39,.34); font-family: var(--k-font-display, Georgia, serif); font-size: .8rem; font-weight: 700; letter-spacing: .3px; color: var(--k-gold-bright, #E5C96B); text-shadow: none; /* il banner ne ha uno pesante: qui darebbe sporco */ max-width: 100%; } .k-cella-opera img, .k-cella-opera svg { flex: 0 0 auto; } /* Il nome dell'opera si accorcia, il glifo no: su «Piantagione di Bagigi» in una casata dal nome lungo era il glifo a sparire per primo. */ .k-cella-opera > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════════════════════ 🗺️ LA TESTA DELLA SCHEDA DELLA CELLA — la famiglia `.k-cella-*`. Owner, 5 agosto: «rivedere le schede celle in modo che sia più carina la suddivisione amministrativa e il proprietario, utilizzando font ecc. del gioco». Prima era tutta a stili in linea dentro `index.html`: nessuna classe, nessuno dei quattro caratteri, e sei `text-shadow` ripetuti a mano. ⚠️⚠️ IL PROBLEMA VERO SI VEDE SOLO SU UNA CASATA CHIARA. `#cella-bandiera` è tinto col colore del proprietario: sull'oro dell'owner la testa era inchiostro scuro su fondo giallo, e i `text-shadow` pensati per le casate scure la sporcavano soltanto. La cura non è un altro colore di testo: è lo SCRIM `.k-cella-corpo`, un velo scuro sotto il testo, che rende la testa leggibile su qualunque tinta. È la stessa scelta già presa per `.k-cella-opera` qui sopra, estesa al resto. ⚠️ NON si riusa `.k-stat-tile` (kit.css): quella famiglia porta il proprio fondo `--k-surface-3`, e dentro un banner tinto si legge come un buco rettangolare. Le tile del kit valgono dove il fondo è la superficie scura, cioè nella scheda di un signore, non qui. ══════════════════════════════════════════════════════════════════════════════ */ /* Lo scrim: un velo scuro che porta il testo su qualunque casata. */ .k-cella-corpo { background: rgba(18,12,5,.42); border-radius: 10px; padding: 9px 11px; margin-top: 8px; } /* La catena amministrativa: UNA riga, come un indirizzo. ⚠️ I quattro livelli SONO i quattro gradi (comune→Barone, provincia→Conte, regione→Duca, nazione→Re) e ognuno è la porta della scheda del suo titolo. Provata anche la versione a quattro pastiglie incoronate: le corone non si possono chiedere sotto i 18 px (sennò Duca e Barone sono lo stesso segno), le pastiglie andavano a capo, e la riga prendeva cinque volte lo spazio per dire la stessa cosa. */ .k-cella-geo { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; font-family: var(--k-font-lettura, Georgia, serif); /* sono nomi propri: si leggono */ font-size: .84rem; line-height: 1.45; color: var(--k-ink-muted, #B3A283); text-shadow: none; } .k-cella-geo-liv { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⚠️ Il separatore è un elemento a sé, e in un flex col `gap` il gap gli entrerebbe da tutti e due i lati: qui il gap è ZERO e lo spazio se lo porta dentro il separatore. È la stessa trappola della gerarchia («Ha giurato a : Serenissima»). */ .k-cella-geo-sep { color: var(--k-ink-muted, #B3A283); opacity: .55; padding: 0 .42em; } /* Il comune è l'unità che si conquista, e quella che dà il primo titolo: la riga si legge come un indirizzo, col nome che conta per primo. */ .k-cella-geo-liv--casa { color: var(--k-ink-forte, #F2E8D2); font-size: .92rem; } /* La sottolineatura punteggiata è la promessa che dietro c'è una scheda da aprire: solo dove il tocco porta davvero da qualche parte. */ .k-cella-geo-liv--clic { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: rgba(201,162,39,.5); text-underline-offset: 3px; } /* Il blocco del proprietario si stacca dalla catena con una riga sottile, non con un secondo riquadro dentro il riquadro. */ .k-cella-prop { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(201,162,39,.16); } /* «Zona occupata da» / «La tua zona»: etichetta tracciata, cioè chrome → `--k-font`. */ .k-cella-eti { margin: 0 0 6px; font-family: var(--k-font, system-ui); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--k-ink-muted, #B3A283); text-shadow: none; } /* Il nome della casata è un nome: Cinzel, come tutti i nomi del gioco. */ .k-cella-nome { font-family: var(--k-font-display, Georgia, serif); font-size: 1.06rem; font-weight: 700; line-height: 1.2; color: var(--k-ink-forte, #F2E8D2); text-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La gerarchia è una frase, non un'etichetta. */ .k-cella-ger { margin: 3px 0 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-family: var(--k-font-lettura, Georgia, serif); font-size: .8rem; line-height: 1.3; color: var(--k-ink-soft, #C6B794); text-shadow: none; } /* ⚠️ Agganciata alla CLASSE e non a `#cella-gerarchia`: le anteprime congelano i casi rinominando `id=` in `data-id=`, e una regola sull'id lì dentro non si applica mai (stessa lezione di `.k-prof-blocco:empty` qui sotto). */ .k-cella-ger:empty { display: none; margin: 0; } /* «ZONA LIBERA» è un verdetto: display. */ .k-cella-libera { margin: 8px 0 0; font-family: var(--k-font-display, Georgia, serif); font-size: 1.2rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--k-ink-forte, #F2E8D2); text-shadow: 0 1px 4px rgba(0,0,0,.5); } /* 👑 I riquadri della scheda di un altro signore TACCIONO quando non hanno niente da dire — e tacere vuol dire anche non lasciare il proprio margine. Senza questa riga un principiante senza gerarchia né titoli si portava dietro un buco di quaranta pixel in mezzo alla scheda (visto in `anteprima_scheda_signore`, non nel codice). ⚠️ SI AGGANCIA A UNA CLASSE, NON AGLI `id`. L'anteprima congela ogni caso rinominando `id="…"` in `data-id="…"` (serve per affiancare tre copie della stessa scheda senza duplicare gli id): una regola scritta `#profilo-gerarchia:empty` lì dentro non si applica MAI, quindi la PNG mostrava il buco anche dopo averlo chiuso — e non c'era modo di accorgersi che il rimedio funzionava. Vale per qualunque stile di queste schede. ⚠️⚠️ `display: none`, NON `margin: 0`. Azzerare il margine non bastava più (e a rigore non bastava nemmeno prima): `.modal-contenuto` è una colonna FLEX, e il `gap` cade fra gli elementi anche quando sono alti zero — un blocco vuoto restava dodici pixel di aria che nessuno riusciva ad attribuire a niente. Fuori dalla colonna non c'è gap. */ .k-prof-blocco:empty { display: none; } /* 📏 LO SPAZIO FRA LE SEZIONI DI UNA SCHEDA LO DÀ IL `gap` DELLA COLONNA, e basta. ⚠️ Il riquadro porta un proprio margine di famiglia (`.k-prof-riq`, kit.css) perché deve respirare anche dove sta da solo — nel pannello personale `#stats-corpo`, che ha `gap: 2px` per tenere stretti i comandi lì sotto. Dentro una sezione di scheda quel margine si SOMMA al gap invece di collassarci (colonna flex), ed era il pezzo che faceva leggere lealtà più staccata delle altre. Qui dentro decide il contenitore. */ .k-prof-blocco > .k-prof-riq { margin: 0; } /* 📏 …TRANNE NEL PANNELLO DELLA PROPRIA SIGNORIA, dove il contenitore NON decide. `#stats-corpo` ha `gap: 2px` — stretto apposta, perché i quattro comandi in fondo stiano vicini — e lo spazio fra i riquadri lo dà il margine di famiglia di `.k-prof-riq` (7px). La gerarchia è l'unica che vive dentro un `.k-prof-blocco` (le serve `:empty` per tacere), quindi la riga qui sopra le toglieva quei 7px: sotto di lei restavano i soli 2px del gap, e la lealtà si leggeva incollata al riquadro sopra — l'ha vista l'owner al collaudo del 6 agosto. ⚠️ Il margine si rimette al BLOCCO, non al riquadro dentro: se un giorno la gerarchia non ha niente da dire, `:empty` fa sparire il blocco E il suo margine insieme. Rimesso al riquadro interno, un blocco vuoto resterebbe alto zero ma lascerebbe l'aria. */ #stats-corpo > .k-prof-blocco { margin: 0 0 7px; } .dot-colore { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; } .dot-colore.dot-cliccabile { cursor: pointer; transition: transform .15s; } .dot-colore.dot-cliccabile:hover { transform: scale(1.15); } .porto-info { background: var(--bg-card); border-radius: 8px; padding: 10px 14px; font-size: .9rem; color: var(--testo-2); } .btn-conquista { margin-top: 8px; transition: background .2s, opacity .2s; } /* Fase 3: ATTIVO = oro pieno kit (via il verde e il pulse); bloccato/propria = ghost */ .btn-conquista-attivo { background: linear-gradient(#D4AC2E, #BE9720) !important; color: #241A07 !important; box-shadow: 0 3px 0 #8F6F14; } .btn-conquista-bloccato { background: none !important; border: 1px solid rgba(198,183,148,.30) !important; color: var(--testo-2) !important; box-shadow: none; opacity: .85; } .btn-conquista-propria { background: none !important; border: 1px solid rgba(201,162,39,.35) !important; color: var(--oro) !important; box-shadow: none; opacity: .9; } @keyframes pulse-btn { 0%,100% { box-shadow: 0 0 0 0 rgba(45,122,79,.4); } 50% { box-shadow: 0 0 0 8px rgba(45,122,79,0); } } .testo-secondario { color: var(--testo-2); font-size: .9rem; } /* ─── Modal domande (Fase 3, mockup 03-quiz) ────────────────── */ .domanda-block { display: flex; flex-direction: column; gap: 14px; } .domanda-numero { font-size: .74rem; color: var(--k-gold, var(--oro)); font-weight: 800; text-transform: uppercase; letter-spacing: 2px; } /* Domanda in serif: la voce del banditore */ /* ⚠️ Era Georgia con un commento che diceva «niente font da scaricare» — falso dal giorno in cui EB Garamond è entrato nel preload di index.html. Georgia stava facendo da controfigura al serif che spediamo già: 44 KB che nessuna regola usava. */ .domanda-testo { font-family: var(--k-font-lettura); font-size: 1.28rem; font-weight: 500; line-height: 1.4; color: var(--k-ink-forte, var(--testo)); } .opzioni-domanda { display: flex; flex-direction: column; gap: 8px; } .opzione-btn { background: var(--k-surface-2, var(--bg-card)); border: 1px solid rgba(201,162,39,.22); border-radius: 12px; padding: 13px 16px; color: var(--testo); font-size: .95rem; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; display: flex; gap: 10px; align-items: center; touch-action: manipulation; -webkit-tap-highlight-color: rgba(201,162,39,.15); } .opzione-btn:hover { border-color: var(--oro); background: rgba(201,162,39,.08); } .opzione-btn.selezionata { border-color: var(--oro); background: rgba(201,162,39,.15); } .opzione-lettera { width: 26px; height: 26px; border-radius: 50%; background: rgba(201,162,39,.14); border: 1px solid rgba(201,162,39,.35); color: var(--k-gold-bright, var(--oro)); display: flex; align-items: center; justify-content: center; font-family: var(--k-font-display, Georgia, serif); font-weight: 700; font-size: .8rem; flex-shrink: 0; } .opzione-btn.selezionata .opzione-lettera { background: var(--oro); border-color: var(--oro); color: #241A07; } .opzione-btn.corretta { border-color: var(--verde); background: rgba(95,138,84,.18); pointer-events: none; box-shadow: 0 0 12px rgba(95,138,84,.3); } .opzione-btn.corretta .opzione-lettera { background: var(--verde); border-color: var(--verde); color: #F5E9D9; } .opzione-btn.sbagliata { border-color: var(--rosso); background: rgba(194,68,55,.16); pointer-events: none; box-shadow: 0 0 12px rgba(194,68,55,.3); } .opzione-btn.sbagliata .opzione-lettera { background: var(--rosso); border-color: var(--rosso); color: #F5E9D9; } /* Spiegazione dopo risposta */ /* Timer domanda */ .domanda-timer-wrap { width: 100%; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; margin-top: 2px; } .domanda-timer-bar { height: 100%; background: linear-gradient(90deg, var(--k-gold, #C9A227), var(--k-gold-bright, #E5C96B)); border-radius: 2px; width: 100%; transition: width linear, background-color .3s; } .domanda-timer-bar.urgente { background: linear-gradient(90deg, var(--k-wax, #A93F35), var(--k-wax-bright, #C24437)); } .spiegazione-box { margin-top: 14px; padding: 16px 18px; background: linear-gradient(135deg, rgba(212,169,64,.12), rgba(255,215,0,.06)); border: 1px solid rgba(212,169,64,.35); border-radius: 12px; font-size: 1rem; line-height: 1.6; color: #fff; text-align: center; animation: fadeIn .4s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes pulse-glow { 0%,100% { box-shadow: 0 0 8px rgba(255,215,0,.3); } 50% { box-shadow: 0 0 16px rgba(255,215,0,.7); } } #domande-footer { padding-top: 4px; } /* Risultato conquista */ /* ⚠️ `align-items: stretch` (era `center`). Con `center` OGNI figlio è shrink-to-fit: il riquadro cambiava larghezza da uno stato all'altro — «Borsa piena», che ha il testo più lungo, veniva più largo degli altri due — e il riepilogo, che dentro allinea a sinistra (#risultato-recap), era un blocco stretto col testo a sinistra dentro un padre centrato. La prova che `center` era la scelta sbagliata: il bottone aveva già dovuto sfilarsi a mano con `align-self: stretch`. Il centraggio lo fa `text-align`, che sui figli a piena larghezza funziona da solo. */ #risultato-conquista { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: stretch; } /* Il verdetto è un titolo, e i titoli sono in Cinzel: era un grassetto di sistema — visto guardando l'anteprima, non leggendo il foglio */ #risultato-titolo { font-family: var(--k-font-display); font-weight: 800; letter-spacing: .5px; } #risultato-messaggio { font-family: var(--k-font-lettura); font-size: 1.02rem; line-height: 1.45; } #risultato-icona { font-size: 3rem; } /* ⚠️ QUI STAVA `animazione-citta` col suo `@keyframes citta-conquista`: il rimbalzo dell'emoji 🏙️ quando un assedio si chiudeva. Via il 5 agosto insieme al suo ramo — in world le città sono uscite con `mondo_lite`, e quell'esito non si accende mai. */ } #risultato-stelle { display: flex; gap: 8px; justify-content: center; } /* "Chiudi" del risultato: barra SEMPRE visibile in fondo al popup, anche col recap lungo. Prima finiva sotto la piega e bisognava scrollare a caccia del bottone. */ #btn-chiudi-risultato { /* `align-self` non serve più: il padre ora stira di suo (vedi #risultato-conquista) */ position: sticky; bottom: 0; margin-top: 10px; padding: 16px; font-size: 1.05rem; box-shadow: 0 -16px 22px -10px var(--bg-modal); } /* X di chiusura del quiz: tap target più grande (era minuscola) */ #domande-chiudi { padding: 8px 13px; font-size: 1.15rem; line-height: 1; } /* ─── Classifica ────────────────────────────────────────────── */ /* ⚠️ Da qui sono uscite, il 5 agosto 2026, le regole di undici elenchi annidati: `.csort` (le barre di ordinamento), `.ctab-sett` (la terza fila di schede), `.classifica-panel`, `.albo-select` (un `