/* 20 Sospetti — pagine pubbliche: archivio e gioco. */
:root{--fondo:#f4eedf;--carta:#faf3df;--bordo:#d5c8ae;--testo:#382b22;--tenue:#7a6a55;--accento:#846038;
--inn:#d9e9d6;--inn-bordo:#728867;--inn-testo:#28462a;--crim:#f3d6c8;--crim-bordo:#b8785b;--crim-testo:#713721;--fuoco:#22627c}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo);color:var(--testo);font-family:system-ui,sans-serif}
button,.pulsante{font:inherit;color:inherit;cursor:pointer}
a{color:var(--accento)}
button:focus-visible,a:focus-visible{outline:3px solid var(--fuoco);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- Archivio ---------- */
.archivio{max-width:640px;margin:0 auto;padding:24px 16px 32px}
.testata h1{font:700 40px/1 Georgia,serif;margin:0 0 10px;letter-spacing:.02em}
.titolo-home{display:flex;align-items:flex-end;gap:10px}
.titolo-home h1{margin:0 0 6px;white-space:nowrap;font-size:clamp(28px,9vw,40px)}
@media (max-width:360px){.gruppo-sospetti img{width:40px;height:40px;margin-left:-11px}}
.gruppo-sospetti{display:flex;margin-left:auto;flex:none}
.gruppo-sospetti img{width:50px;height:50px;margin-left:-14px}
.gruppo-sospetti img:first-child{margin-left:0}
.testata p{margin:0 0 8px;line-height:1.5;color:#5c4d3c}
.ultimo-rilasciato{margin-top:24px;padding:17px 18px 18px;border:2px solid var(--accento);border-radius:14px;background:var(--carta)}
.ultimo-rilasciato h2{font:700 24px/1.1 Georgia,serif;margin:0 0 9px}
.meta-ultimo{display:flex;align-items:center;gap:10px;margin:0 0 13px;color:var(--tenue);font-weight:700}
.ultimo-rilasciato .subito{margin:0}
.livello{margin-top:12px;border:2px solid var(--bordo);border-radius:12px;background:rgba(250,243,223,.55);overflow:hidden}
.livello summary{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 14px;cursor:pointer;list-style:none;font:700 20px Georgia,serif}
.livello summary::-webkit-details-marker{display:none}
.livello summary::after{content:"+";margin-left:auto;color:var(--accento);font:700 27px/1 system-ui,sans-serif}
.livello[open] summary::after{content:"−"}
.livello[open] summary{border-bottom:1px solid var(--bordo)}
.nome-livello{font-size:16px;color:var(--testo)}
.contenuto-livello{padding:12px 14px 14px}
.stelle{color:#b8860b;letter-spacing:.06em}
.nascosto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.conta{font:600 13px system-ui,sans-serif;background:#e9e1ce;border-radius:20px;padding:3px 10px;color:var(--tenue)}
.vuoto{color:var(--tenue);margin:4px 0}
.subito{display:inline-block;background:var(--accento);color:#fff;text-decoration:none;font-weight:700;border-radius:10px;padding:12px 18px;min-height:48px;margin-bottom:12px}
.tessere{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
.voce{display:flex;flex-direction:column;gap:4px;min-width:0}
.voce>.tessera{flex:1}
.condividi-tessera{align-self:center;display:inline-flex;align-items:center;justify-content:center;width:36px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--accento);cursor:pointer}
.condividi-tessera[hidden]{display:none}
.condividi-tessera svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.condividi-tessera:hover{background:rgba(132,96,56,.14)}
.condividi-esito{align-self:center;font-size:12px;font-weight:700;color:var(--accento);min-height:0}
.tessera{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:104px;padding:9px 4px 8px;border:2px solid var(--bordo);border-radius:10px;background:var(--carta);text-decoration:none;color:var(--testo);font:700 13px Georgia,serif;text-align:center}
.tessera.in_corso{border-color:var(--accento)}
.tessera.risolto{background:var(--inn);border-color:var(--inn-bordo);color:var(--inn-testo)}
.piede{margin-top:32px;font-size:13px;color:var(--tenue);line-height:1.5}
.riga-account{min-height:32px;display:flex;justify-content:flex-end;gap:14px;align-items:center;font-weight:700;font-size:14px}
.esci-riga{margin:0}
.link-esci{background:none;border:0;padding:0;margin:0;font:inherit;font-weight:700;color:var(--accento);text-decoration:underline;cursor:pointer}
.link-esci:hover{text-decoration:none}

/* ---------- Registrazione, accesso e profilo ---------- */
.account{max-width:460px;margin:0 auto;padding:28px 18px 40px}
.account h1{font:700 34px/1.1 Georgia,serif;margin:12px 0}
.account p{line-height:1.5}
.nome-sito{margin:0;font:700 17px Georgia,serif}.nome-sito a{text-decoration:none;color:var(--testo)}
.modulo-account{display:grid;gap:8px;margin-top:22px}
.modulo-account label{font-weight:700;margin-top:7px}
.modulo-account input[type="email"],.modulo-account input[type="text"],.modulo-account input[type="password"]{width:100%;min-height:46px;border:2px solid var(--bordo);border-radius:9px;background:#fffaf0;color:var(--testo);font:inherit;padding:8px 10px}
.modulo-account input:focus{outline:3px solid var(--fuoco);outline-offset:1px;border-color:var(--fuoco)}
.modulo-account small{color:var(--tenue);line-height:1.35}
.modulo-account .spunta{display:flex;align-items:flex-start;gap:9px;font-weight:500;margin:12px 0}.spunta input{width:20px;height:20px;flex:none}
.modulo-account button,.account form>button{min-height:48px;border:2px solid var(--accento);border-radius:10px;background:var(--accento);color:#fff;font:700 16px system-ui,sans-serif;padding:0 18px}
.alternativa{margin-top:22px}.messaggio-errore,.messaggio-ok{border-radius:9px;padding:10px 12px;font-weight:700}.messaggio-errore{background:var(--crim);color:var(--crim-testo)}.messaggio-ok{background:var(--inn);color:var(--inn-testo)}
.campo-esca{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.dati-account{display:grid;grid-template-columns:max-content 1fr;gap:7px 14px;background:var(--carta);border:2px solid var(--bordo);border-radius:10px;padding:14px}.dati-account dt{font-weight:700}.dati-account dd{margin:0;overflow-wrap:anywhere}
.account .secondario-account{background:transparent;color:var(--accento);margin-top:12px}
.partite-salvate{margin:14px 0;color:var(--tenue)}
.importazione progress{display:block;width:100%;height:18px;margin:24px 0 10px;accent-color:var(--accento)}
.importazione #stato-importazione{font-weight:700;color:var(--tenue)}
.privacy{max-width:760px;margin:0 auto;padding:28px 18px 48px;line-height:1.55}.privacy h1{font:700 34px/1.1 Georgia,serif;margin:12px 0}.privacy h2{font:700 23px/1.2 Georgia,serif;margin:28px 0 8px}.privacy p,.privacy li{max-width:72ch}.privacy li{margin:6px 0}.versione-privacy{color:var(--tenue);font-weight:700}

/* ---------- Gioco: tutta l'altezza, nessuno scorrimento ---------- */
body.gioco{height:100vh;height:100dvh;height:var(--altezza-schermo,100dvh);display:flex;flex-direction:column;overflow:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.barra{flex:none;display:flex;align-items:center;gap:6px;padding:6px 6px 2px}
.indietro{display:flex;align-items:center;justify-content:center;width:34px;height:34px;font-size:28px;line-height:1;text-decoration:none;color:var(--testo)}
.titolo{flex:1;min-width:0}
.riga-titolo{display:flex;align-items:center;gap:6px;min-width:0}
.titolo h1{margin:0;font:700 16px/1.15 Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.riga-titolo h1{flex:0 1 auto}
/* Telefoni: l'anno della data si toglie, e «Contesto: attivo» va su due righe, così stelle e giorno restano interi (il titolo completo resta nell'aria-label). */
@media (max-width:480px){.titolo h1 .anno{display:none}.titolo h1{font-size:15px}.riga-titolo .toggle-contesto{white-space:normal;max-width:48px;text-align:left;padding:2px 1px;font-size:9px}.riga-titolo{gap:3px}}
.toggle-contesto{flex:none;border:0;background:transparent;color:var(--accento);font-size:10px;line-height:1.1;padding:2px 3px;text-decoration:underline;white-space:nowrap}
.toggle-contesto[aria-pressed="true"]{color:var(--tenue);text-decoration:none}
.toggle-contesto:disabled{opacity:.55;cursor:progress}
.annuncio{margin:1px 0 0;font-size:12px;line-height:1.2;min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tenue)}
.annuncio.errore{color:var(--crim-testo);font-weight:700}
.annuncio.corretta{color:var(--inn-testo);font-weight:700}
.errori{flex:none;font:700 13px system-ui,sans-serif;color:var(--crim-testo);padding:0 4px}
.tempo{flex:none;display:flex;flex-direction:column;align-items:flex-end;font:700 11px/1.05 system-ui,sans-serif;color:var(--testo);white-space:nowrap}
#tempo-penalita{color:var(--crim-testo);font-size:10px}
.tondo{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid #b9a888;background:var(--carta);font-size:15px;padding:0}
@media (max-width:370px){.barra{gap:2px;padding-left:2px;padding-right:2px}.indietro,.tondo{width:31px;height:31px}.errori{padding:0 2px}.tempo{font-size:10px}.toggle-contesto{font-size:9px}}

.area-gioco{position:relative;flex:1;min-height:0}
.area-gioco .griglia{height:100%;padding:15px 6px 6px 18px}
/* Lettere delle colonne e numeri delle righe ai margini (07/10/2026): sottili, nello spazio lasciato dal padding della griglia. */
.etichette-colonne,.etichette-righe{position:absolute;display:grid;gap:4px;pointer-events:none;font:700 10px/1 system-ui,sans-serif;color:var(--tenue);opacity:.75}
.etichette-colonne{top:2px;left:18px;right:6px;height:12px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;text-align:center}
.etichette-righe{top:15px;bottom:6px;left:2px;width:14px;grid-template-rows:repeat(5,minmax(0,1fr));align-items:center;text-align:center}
.etichette-colonne span.accesa,.etichette-righe span.accesa{color:var(--accento);opacity:1;font-size:12px}
.non-avviata .etichette-colonne,.non-avviata .etichette-righe{visibility:hidden}
.griglia{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:4px;padding:4px 6px 6px}
.senza-js{padding:16px}
/* Caso d'ingresso piccolo degli annunci (24/10/2026): griglia 3×4, carte più grandi. */
.griglia-3x4 .griglia{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
.griglia-3x4 .etichette-colonne{grid-template-columns:repeat(3,minmax(0,1fr))}
.griglia-3x4 .etichette-righe{grid-template-rows:repeat(4,minmax(0,1fr))}

/* Prima dell'avvio la griglia resta coperta. Il server parte solo dopo 3, 2, 1. */
.non-avviata .griglia{visibility:hidden}
.avvio{position:absolute;inset:4px 6px 6px;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px solid var(--bordo);border-radius:12px;background:var(--carta);padding:20px}
.avvio p{max-width:32ch;margin:0 0 18px;color:var(--tenue);font-size:14px;line-height:1.4}
.avvio>button{min-width:150px;min-height:50px;border:2px solid var(--accento);border-radius:11px;background:var(--accento);color:#fff;font-weight:800;font-size:18px}
.avvio.conto-attivo{border:0;background:transparent;padding:0}
.avvio.conto-attivo>p{display:none}
.striscia-ingresso{flex:none;display:flex;align-items:flex-start;gap:6px;margin:2px 6px 0;padding:7px 4px 7px 10px;border:2px solid var(--bordo);border-radius:10px;background:var(--carta);font-size:14px;line-height:1.35}
.striscia-ingresso p{flex:1;margin:0}
.striscia-ingresso strong{font-family:Georgia,serif}
.striscia-ingresso button{flex:none;min-width:32px;min-height:32px;border:0;background:transparent;color:var(--tenue);font-size:22px;line-height:1;cursor:pointer}
.mischia{position:absolute;inset:0;isolation:isolate}
.mischia[hidden]{display:none}
.mazzo-mischia{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--colonne,4),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:4px}
.carta-mischia{z-index:1;box-shadow:0 2px 6px rgba(56,43,34,.25);will-change:transform;pointer-events:none}
.carta-mischia .scelta button:disabled{opacity:1;cursor:default}
/* La mescolata usa sempre la carta stretta della griglia 4×5. Queste regole
   prevalgono sull'eventuale modo largo calcolato per la plancia vera. */
.modo-largo .carta.carta-mischia{flex-direction:column;text-align:center}
.modo-largo .carta-mischia .foto{display:flex;order:1;flex:1;min-height:0;width:auto;height:auto;max-width:none;aspect-ratio:auto;padding:2px 0 0;align-items:flex-start}
.modo-largo .carta-mischia .foto img{object-position:center top}
.modo-largo .carta-mischia .corpo{display:contents;padding:0}
.modo-largo .carta-mischia .intestazione{order:0;padding:3px 2px 0;text-align:center}
.modo-largo .carta-mischia .nome{font-size:14px;line-height:1.1}
.modo-largo .carta-mischia .mestiere{font-size:10px}
.modo-largo .carta-mischia .scelta{display:none}
.modo-largo .carta-mischia .scelta button{min-height:22px;font-size:min(11px,3.3vw)}
.conto-rovescia{position:absolute;z-index:30;left:50%;top:50%;min-width:1.35em;transform:translate(-50%,-50%);border:4px solid #fffaf0;border-radius:50%;background:var(--accento);box-shadow:0 3px 14px rgba(56,43,34,.55);color:#fffaf0;font:800 clamp(54px,16vh,104px)/1.18 Georgia,serif;text-align:center}

.carta{container-type:size;position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;border:2px solid var(--bordo);border-radius:8px;background:var(--carta);overflow:hidden;text-align:center}
.intestazione{flex:none;padding:3px 2px 0}
.nome{display:block;font:700 14px/1.1 Georgia,serif;white-space:nowrap}
.mestiere{display:block;font-size:10px;line-height:1.2;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stato{display:none;font-size:min(10px,2.8vw);line-height:1.2;font-weight:700;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Ritratto: conta soprattutto dove guarda il personaggio. */
.foto{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;padding:2px 0 0}
.foto img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top}

/* Pulsanti sotto il ritratto; sulle carte basse sovrapposti alla parte bassa del ritratto. */
.scelta{flex:none;display:grid;gap:3px;margin:2px 3px 3px}
.scelta button{min-height:22px;border:1.5px solid #866d4f;border-radius:6px;background:rgba(255,250,240,.94);font-weight:700;font-size:min(11px,3.3vw);padding:0 2px;white-space:nowrap;overflow:hidden}
.scelta .b-inn{border-color:var(--inn-bordo);color:var(--inn-testo)}
.scelta .b-crim{border-color:var(--crim-bordo);color:var(--crim-testo)}
.scelta button:disabled{opacity:.6;cursor:progress}
@container (min-height:150px){.scelta button{min-height:28px;font-size:min(12px,3.4vw)}}
/* Carte basse (telefoni corti): i pulsanti coprirebbero il ritratto, quindi compaiono solo sulla carta toccata. */
.modo-tocco .scelta{display:none;position:absolute;left:3px;right:3px;bottom:3px;margin:0}
.modo-tocco .carta.selezionata .scelta{display:grid}
.modo-tocco .scelta button{min-height:32px;font-size:min(12px,3.4vw)}
.carta.selezionata{border-color:var(--accento);box-shadow:0 0 0 2px var(--accento)}
/* Carte medio-basse (molti telefoni, 85–124 px di altezza): pulsanti sempre visibili, interi, uno sotto l'altro e più bassi; il ritratto si rimpicciolisce.
   Testo centrato anche in verticale; 3 px tra i due pulsanti per ridurre i tocchi sbagliati. Sotto 85 px resta il modo «tocco». */
.modo-compatto .intestazione{padding:2px 2px 0}
.modo-compatto .scelta{gap:3px;margin:1px 2px 2px}
.modo-compatto .scelta button{display:flex;align-items:center;justify-content:center;min-height:19px;line-height:1;font-size:10.5px;padding:1px 2px 0}
/* padding-top di 1 px: «Innocente» e «Criminale» non hanno discendenti, senza questo il testo appare un po' alto. */
@container (max-height:105px){
  .modo-compatto .intestazione{padding:1px 2px 0}
  .modo-compatto .nome{font-size:12.5px}
  .modo-compatto .mestiere{font-size:9px;line-height:1.1}
  .modo-compatto .scelta{margin:0 2px 2px}
  .modo-compatto .scelta button{min-height:15px;font-size:9px;border-width:1px;border-radius:4px}
}

/* Carta scoperta: l'indizio prende il posto del ritratto; ↻ la gira. */
.indizio{display:none;flex:1;min-height:0;margin:0;padding:2px 4px 4px;font-size:13px;line-height:1.2;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;text-align:left;hyphens:auto}
.gira{display:none;position:absolute;top:2px;right:2px;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(56,43,34,.45);background:rgba(255,250,240,.9);font-size:14px;line-height:1;padding:0}
.scoperta .scelta{display:none}
.scoperta .gira,.scoperta .stato{display:block}
.scoperta .indizio{display:block}
.scoperta .foto{display:none}
.scoperta .intestazione{text-align:left;padding:3px 4px 0}
.scoperta .nome{padding-right:26px;min-height:24px;line-height:24px;margin-top:-2px}
/* Carte strettissime (telefoni da 320 px): tasto ↻ e nome un po' più piccoli, così il nome non finisce sotto il tasto. */
@container (max-width:75px){.gira{width:22px;height:22px;font-size:12px;top:1px;right:1px}.scoperta .nome{padding-right:20px;font-size:12.5px;letter-spacing:-.02em}}
/* Carte scoperte basse (telefoni con barre del browser, es. il browser di Facebook: carte sotto ~125 px): intestazione più compatta,
   così all'indizio resta più spazio e non viene tagliato (09/10/2026). */
@container (max-height:125px){
  .scoperta .gira{width:20px;height:20px;font-size:11px}
  .scoperta .nome{min-height:16px;line-height:16px;margin-top:0;padding-right:21px}
  .scoperta .intestazione{padding:2px 3px 0}
  .scoperta .mestiere,.scoperta .stato{line-height:1.05}
  .scoperta .indizio{padding:1px 3px 2px}
}
/* Ultima risorsa, solo se l'indizio non entra nemmeno a 8 px: si toglie la scritta Innocente/Criminale (resta il colore) e,
   se ancora non basta, l'indizio si fa scorrere con il dito. */
.scoperta.compressa .stato{display:none}
.indizio.scorre{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
/* La professione resta visibile anche sulla carta scoperta: serve per gli indizi sulle professioni. */
.scoperta .mestiere{display:block}
/* Segno ♀/♂ solo sulla carta scoperta, dove il ritratto non si vede; su schermo largo il ritratto resta, quindi niente segno. */
.scoperta[data-genere="f"] .mestiere::before{content:"♀\2009";font-weight:700;color:#b0125a;font-size:1.15em;line-height:1}
.scoperta[data-genere="m"] .mestiere::before{content:"♂\2009";font-weight:700;color:#0d5ab5;font-size:1.15em;line-height:1}
.modo-largo .scoperta .mestiere::before{content:none}
@container (max-width:75px){.scoperta .mestiere{letter-spacing:-.04em}.scoperta .mestiere::before{font-size:.9em}}
.scoperta.girata .indizio{display:none}
.scoperta.girata .foto{display:flex}
.scoperta.innocente{background:var(--inn);border-color:var(--inn-bordo)}
.scoperta.criminale{background:var(--crim);border-color:var(--crim-bordo)}
.innocente .stato{color:var(--inn-testo)}.criminale .stato{color:var(--crim-testo)}

/* Ordine nella carta stretta: nome, ritratto, indizio, pulsanti. Il contenitore .corpo serve solo alla carta larga. */
.corpo{display:contents}
.intestazione{order:0}.foto{order:1}.indizio{order:2}.scelta{order:3}

/* Carta larga (schermi larghi): ritratto a sinistra; a destra nome, professione e pulsanti,
   poi l'indizio al posto dei pulsanti. Nessuna rotazione e nessun tasto ↻. */
.modo-largo .carta{flex-direction:row;text-align:left}
.modo-largo .foto,.modo-largo .scoperta .foto{display:flex;order:0;flex:none;height:100%;aspect-ratio:1/1;max-width:45%;padding:4px;align-items:center}
.modo-largo .foto img{object-position:center}
.modo-largo .corpo{display:flex;flex-direction:column;flex:1;min-width:0;padding:5px 8px 6px 2px}
.modo-largo .intestazione,.modo-largo .scoperta .intestazione{padding:0;text-align:left}
.modo-largo .nome,.modo-largo .scoperta .nome{font-size:16px;padding:0;min-height:0;line-height:1.15;margin:0}
.modo-largo .mestiere,.modo-largo .scoperta .mestiere{display:block;font-size:12px}
.modo-largo .scelta{order:3;margin:auto 0 0;grid-template-columns:1fr 1fr;gap:6px}
.modo-largo .scelta button{min-height:32px;font-size:13px}
.modo-largo .indizio,.modo-largo .scoperta.girata .indizio{padding:4px 0 0}
.modo-largo .scoperta .indizio{display:block}
.modo-largo .gira{display:none!important}
/* Carte larghe ma strette (tablet, finestre medie): pulsanti uno sopra l'altro, testo intero. */
@container (max-width:330px){.modo-largo .scelta{grid-template-columns:1fr;gap:4px}.modo-largo .scelta button{min-height:28px}}
.rivelata{animation:rivela .35s ease-out}
@keyframes rivela{from{box-shadow:0 0 0 4px rgba(132,96,56,.5)}to{box-shadow:0 0 0 0 rgba(132,96,56,0)}}
@media (prefers-reduced-motion:reduce){.rivelata{animation:none}}

/* Errore: la carta trema e si arrossa un istante. */
.sbagliata{animation:trema .4s ease-in-out;border-color:var(--crim-bordo)}
@keyframes trema{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.sbagliata{animation:none}}

/* Finestre: aiuto, ricomincia, fine partita. */
dialog{border:2px solid var(--bordo);border-radius:14px;background:#fffaf0;color:var(--testo);max-width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:18px 18px 16px;overflow:auto}
dialog::backdrop{background:rgba(56,43,34,.45)}
dialog h2{font:700 22px Georgia,serif;margin:0 0 10px}
dialog p{line-height:1.45;margin:0 0 10px;font-size:15px}
dialog button,.pulsante{min-height:44px;border-radius:10px;border:2px solid var(--accento);background:var(--accento);color:#fff;font-weight:700;padding:0 16px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
dialog .secondario{background:transparent;color:var(--accento)}
.azioni-dialogo{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.icona-condividi{width:44px;padding:0!important;justify-content:center}
.icona-condividi svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.condividi-esito{align-self:center;font-size:14px;font-weight:700;color:var(--accento)}

/* Telefono in orizzontale: le carte sarebbero troppo basse per gli indizi, si chiede di ruotarlo.
   Non riguarda tablet e computer (altezza oltre 500 px). */
.ruota{display:none}
@media (orientation:landscape) and (max-height:500px){
  body.gioco .barra,body.gioco .area-gioco{display:none}
  body.gioco .ruota{display:flex;flex:1;align-items:center;justify-content:center;text-align:center;padding:16px}
  .ruota p{font:700 20px/1.4 Georgia,serif;margin:0}
  .ruota span{font-size:40px}
  body.gioco dialog[open]{display:none}
}

/* «Perché?» accanto al messaggio di una mossa respinta. */
.riga-annuncio{display:flex;align-items:center;gap:6px;min-width:0}
.riga-annuncio .annuncio{flex:1 1 auto;min-width:0}
.perche{flex:none;border:1.5px solid var(--crim-bordo);background:var(--carta);color:var(--crim-testo);border-radius:12px;font-size:12px;font-weight:700;padding:1px 8px;min-height:22px}
.voci-perche{margin:0 0 10px;padding-left:18px}
.voci-perche li{margin-bottom:8px;line-height:1.4;font-size:15px}
.voci-perche .coperti{display:block;font-size:13px;color:var(--tenue)}
.nota-perche{font-size:13px;color:var(--tenue)}

/* Suggerimento: indizi chiave in blu; una freccia ben visibile su ogni carta già dichiarabile. */
.annuncio.suggerimento{color:#22627c;font-weight:700}
.carta.evidenziata{z-index:3;box-shadow:0 0 0 4px #22627c;border-color:#22627c}
.carta.bersaglio{z-index:4;overflow:visible;box-shadow:0 0 0 5px #d49b16,0 0 18px 5px rgba(212,155,22,.7);border-color:#9b6800;animation:pulsa-bersaglio .8s ease-in-out infinite alternate}
@keyframes pulsa-bersaglio{to{box-shadow:0 0 0 5px #d49b16,0 0 24px 8px rgba(212,155,22,.9)}}
/* Il segno ▼ sopra la carta da rivelare è stato tolto (03/10/2026): bastano il bordo dorato e il fumetto che esce dalla bocca. */
@media (prefers-reduced-motion:reduce){.carta.bersaglio{animation:none}}

/* Messaggi su due righe al massimo: suggerimenti ed errori non vengono più troncati sui telefoni stretti. */
.annuncio{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;min-height:2.4em}
/* Indizio esaurito (segnato dal giocatore): carta in grigio, ritratto in bianco e nero, testo nero; resta colorato solo il ruolo. */
.carta.scoperta{cursor:pointer}
.scoperta.esaurito{background:#ececea;border-color:#b9b9b6}
.scoperta.esaurito.innocente{border-color:var(--inn-bordo)}
.scoperta.esaurito.criminale{border-color:var(--crim-bordo)}
.esaurito .foto img{filter:grayscale(1) contrast(.9);opacity:.8}
.esaurito .nome,.esaurito .indizio{color:#1c1c1c}
.esaurito .mestiere{color:#5f5f5f}
.scoperta.esaurito .stato{display:inline-block;max-width:100%;color:#fff;border-radius:4px;padding:1px 5px;margin-top:1px}
.scoperta.esaurito.compressa .stato{display:none}
@container (max-width:90px){.scoperta.esaurito .stato{padding:0 2px;letter-spacing:-.03em;border-radius:3px}}
.innocente.esaurito .stato{background:#2e7d32}
.criminale.esaurito .stato{background:#c62828}
/* Consiglio una tantum: fumetto agganciato a una carta, che pulsa piano. */
.fumetto{position:fixed;z-index:20;background:#fffaf0;color:var(--testo);border:2px solid var(--fuoco);border-radius:10px;padding:10px 12px;box-shadow:0 6px 20px rgba(0,0,0,.22);font-size:14px;line-height:1.35}
.fumetto p{margin:0 0 8px}
.fumetto p:last-child{margin:0}
.fumetto button{display:block;margin-left:auto;border:1.5px solid var(--fuoco);background:var(--fuoco);color:#fff;border-radius:6px;font-weight:700;font-size:13px;padding:5px 12px}
.fumetto::before{content:"";position:absolute;left:var(--freccia,50%);top:-9px;width:14px;height:14px;margin-left:-7px;background:#fffaf0;border-left:2px solid var(--fuoco);border-top:2px solid var(--fuoco);transform:rotate(45deg)}
.fumetto.sopra::before{top:auto;bottom:-9px;transform:rotate(225deg)}
/* Fumetto di lato: la freccia esce dal lato verso la bocca di chi parla (altezza in --freccia-y). */
.fumetto.lato-destra::before{left:-9px;top:var(--freccia-y,50%);margin:-7px 0 0;transform:rotate(-45deg)}
.fumetto.lato-sinistra::before{left:auto;right:-9px;top:var(--freccia-y,50%);margin:-7px 0 0;transform:rotate(135deg)}
.carta.consigliata{box-shadow:0 0 0 3px var(--fuoco);animation:pulsa 1.4s ease-in-out infinite}
@keyframes pulsa{50%{box-shadow:0 0 0 3px var(--fuoco),0 0 14px 4px rgba(34,98,124,.45)}}
@media (prefers-reduced-motion:reduce){.carta.consigliata{animation:none}}
/* Parole chiave degli indizi: sottolineate a puntini; toccandole si illuminano le carte citate. */
.termine{text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:2px;cursor:help;padding:3px 0;margin:-3px 0;border-radius:3px}
.termine.acceso{background:rgba(212,155,22,.22)}
.termine:focus-visible{outline:2px solid var(--fuoco);outline-offset:1px}
.contesto-disattivato .termine{text-decoration:none;cursor:inherit;padding:0;margin:0}
/* 25/10/2026: bordo più scuro e più spesso, con alone: il dorato chiaro si confondeva con lo sfondo crema. */
.carta.richiamata{box-shadow:0 0 0 4px #b86a00,0 0 0 8px rgba(184,106,0,.3);border-color:#b86a00}
.carta.richiamata-b{box-shadow:0 0 0 4px #5b3aa8,0 0 0 8px rgba(91,58,168,.3);border-color:#5b3aa8}

/* ---------- Quiz per data: tessere con plancia, stato, filtri ---------- */
.plancia rect{fill:currentColor;opacity:.28}
.plancia rect.on{opacity:.85}
.t-data{font:700 13px Georgia,serif;line-height:1.15}
.t-stelle{color:#b8860b;font:12px system-ui,sans-serif;letter-spacing:.04em}
.tessera.bloccata{background:#e6e1d4;border-color:#d0c9b8;color:#8a7f6c}
.tessera.bloccata .t-stelle{color:#a39a86}
.tessera.bloccata:not(a){cursor:default}
.t-lucchetto{position:absolute;top:3px;right:5px;font-size:13px}
.sigillo{display:inline-block;border:2px solid currentColor;border-radius:4px;padding:0 5px;font:800 10px/1.5 system-ui,sans-serif;letter-spacing:.12em;color:var(--inn-testo);opacity:.85;transform:rotate(-12deg);pointer-events:none}
.tessera .sigillo{position:absolute;top:34px;left:50%;margin-left:-28px;background:rgba(250,243,223,.6)}
.tessera.bloccata .sigillo{color:#6d6454}
.t-tempo{font:700 12px system-ui,sans-serif;font-variant-numeric:tabular-nums}
.corpo-ultimo{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.corpo-ultimo .plancia{flex:none;width:42px;height:52px;color:var(--accento)}
.corpo-ultimo.risolto .plancia{color:var(--inn-bordo)}
.dati-ultimo .meta-ultimo{margin:0 0 6px}
.esito-ultimo{margin:0;display:flex;align-items:center;gap:10px}
.esito-ultimo .sigillo{transform:rotate(-6deg)}
.elenco-quiz h2{font:700 22px/1.1 Georgia,serif;margin:30px 0 12px}
.filtri{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.filtri button{min-height:40px;padding:0 14px;border:2px solid var(--bordo);border-radius:999px;background:var(--carta);color:var(--testo);font:700 14px system-ui,sans-serif}
.filtri button[aria-pressed="true"]{background:var(--accento);border-color:var(--accento);color:#fff}
.nessun-quiz{color:var(--tenue);margin:4px 0 14px}
.vai-archivio{margin:16px 0 0}
.mese h2{font:700 20px/1.1 Georgia,serif;margin:26px 0 10px}
.titolo-pagina{font:700 32px/1.1 Georgia,serif;margin:10px 0 10px}
.nota-archivio{margin:0 0 16px;line-height:1.5;color:#5c4d3c}
.simulazione{margin:16px 0 0;padding:9px 12px;border-radius:9px;background:var(--crim);color:var(--crim-testo);font-weight:700}

.posizione-fine{font-weight:700;color:var(--accento)}

/* Altezza esplicita: WebKit non assegna lo spazio del corpo flex con il solo aspect-ratio sul dialog. */
.promo{--promo-viewport:100vh;--promo-lato:min(92vw,calc(100vw - 32px),calc((var(--promo-viewport) - 24px) * 9 / 16),420px);padding:0;border-radius:14px;overflow:hidden;background:#fffaf0;width:var(--promo-lato);height:calc(var(--promo-lato) * 16 / 9);max-height:calc(var(--promo-viewport) - 24px);flex-direction:column}
@supports(height:100dvh){.promo{--promo-viewport:100dvh}}
.promo[open]{display:flex}
@media (min-width:700px){.promo{--promo-lato:min(86vw,calc(var(--promo-viewport) * .86),440px,calc(100vw - 32px));height:var(--promo-lato)}}
.promo-etichetta{margin:0;padding:8px 12px;font:700 11px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
.promo-corpo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:12px 18px;text-align:center}
.promo-segnaposto{margin:0;font:700 20px/1.3 Georgia,serif;color:var(--tenue);border:2px dashed var(--bordo);border-radius:12px;padding:40px 18px;width:100%}
.promo-piede{padding:10px 14px 14px;display:flex;flex-direction:column;gap:10px}
.promo-piede button{align-self:center}
.promo progress{width:100%;height:10px;accent-color:var(--accento)}
.nota-attesa{color:var(--tenue)}

.promo-nota{margin:0;text-align:center;font-size:13px;color:var(--tenue)}
.promo-nota strong{font-size:16px;color:var(--testo);font-variant-numeric:tabular-nums}

.promo-immagine{max-height:38%;max-width:60%;object-fit:contain;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.promo-titolo{margin:0;font:700 22px/1.25 Georgia,serif}
.promo-testo{margin:0;font-size:16px;line-height:1.45}
.promo-caffe{background:#f3ebdd}
.promo-caffe .promo-titolo{font-size:24px}

.tempo-riga{display:inline-flex;align-items:center;gap:3px}
.icona-cronometro{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.promo-corpo{min-height:0;overflow-y:auto;justify-content:safe center;overscroll-behavior:contain}
.promo-immagine{flex:0 0 auto;min-height:0}
@media (min-width:700px){
.promo-corpo:has(.promo-immagine:not([hidden])){display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:auto auto auto;align-content:start;align-content:safe center;align-items:start;justify-items:start;column-gap:20px;row-gap:12px;text-align:left}
.promo-corpo:has(.promo-immagine:not([hidden])) .promo-immagine{grid-column:1;grid-row:1 / 4;align-self:center;width:100%;height:auto;max-width:100%;max-height:100%}
.promo-corpo:has(.promo-immagine:not([hidden])) .promo-titolo,.promo-corpo:has(.promo-immagine:not([hidden])) .promo-testo,.promo-corpo:has(.promo-immagine:not([hidden])) .pulsante{grid-column:2}
}
.promo-registrazione{background:#eef3e6}
.promo-caffe .promo-immagine,.promo-registrazione .promo-immagine,.promo-crediti .promo-immagine{box-shadow:none;border-radius:0}
.promo-crediti{background:#f6eed8}
.promo-notifiche{background:#eef3e6}
.promo-notifiche .promo-immagine{box-shadow:none;border-radius:0}

/* Conto alla rovescia per l'apertura della Lega (25/10/2026). */
.conto-lega{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:18px 0 0;padding:12px 16px;background:var(--carta);border:2px solid var(--accento);border-radius:14px}
.conto-lega p{flex:1;margin:0;font-size:15px;line-height:1.4}
.conto-lega-tempo{display:block;margin-top:4px;font:800 26px/1.2 system-ui,sans-serif;color:var(--accento);font-variant-numeric:tabular-nums}
.banner-caffe{display:flex;align-items:center;gap:14px;margin:18px 0;padding:12px 16px;background:#f3ebdd;border:2px solid var(--bordo);border-radius:14px}
.banner-caffe img{flex:none;width:56px;height:56px}
.banner-caffe p{flex:1;margin:0;font-size:15px;line-height:1.4}
.banner-caffe .pulsante{flex:none}
@media (max-width:560px){.banner-caffe{flex-wrap:wrap}.banner-caffe p{flex-basis:calc(100% - 72px)}.banner-caffe .pulsante{width:100%;justify-content:center}}
.t-tempo,.tempo-ultimo{display:inline-flex;align-items:center;gap:4px}
.tempo-ultimo .icona-cronometro{width:1.15em;height:1.15em}

.classifica-fine{margin:12px 0 8px}
.classifica-fine h3{margin:0 0 6px;font:700 16px Georgia,serif}
.classifica-fine ol{margin:0;padding:0 0 0 2.2em;font-size:15px;line-height:1.5}
.classifica-fine li{padding:1px 6px}
.classifica-fine li::marker{font-weight:700;color:var(--tenue)}
.classifica-fine li.tu{background:rgba(132,96,56,.18);border-radius:6px;font-weight:700}
.classifica-fine li .cl-nome{display:inline-block;max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.classifica-fine li .cl-tempo{float:right;font-variant-numeric:tabular-nums}
.nota-classifica{margin:6px 0 0;font-size:13px;color:var(--tenue)}
.nota-classifica:empty{display:none}
.posto-classifica{margin:6px 0 4px;font:700 15px system-ui,sans-serif;color:var(--accento)}

/* Notifiche: campanella accanto al titolo «I quiz» e invito a fine puzzle */
.titolo-con-campanella{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:30px 0 18px}
.titolo-con-campanella h2{margin:0}
.campanella{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--bordo);border-radius:50%;background:transparent;color:var(--accento)}
.campanella svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.campanella.attiva{background:var(--accento);border-color:var(--accento);color:var(--carta)}
.campanella.attiva svg{fill:currentColor}
.campanella:disabled{opacity:.6;cursor:default}
.campanella-esito{flex:1 1 220px;font-size:.9rem;color:var(--tenue)}
.invito-avvisi{margin-top:12px;padding-top:10px;border-top:1px solid var(--bordo)}
.invito-avvisi p{margin:0 0 6px}
.campanella-info{flex:1 1 220px;font-size:.85rem;color:var(--tenue)}
.campanella-info:not([hidden])+.campanella-esito:empty{display:none}

/* Promozione su schermi bassi (telefono in orizzontale, iPhone con barre del browser): niente proporzione fissa,
   l'altezza segue il contenuto e, se non basta, il testo scorre dentro il riquadro senza sovrapporsi a barra e pulsanti. */
@media (max-height:620px),(orientation:landscape) and (max-width:950px){
  .promo{aspect-ratio:auto;width:min(94vw,560px);height:auto}
  .promo-corpo{flex:1 1 auto;justify-content:flex-start;gap:8px;padding:6px 16px}
  .promo-titolo,.promo-caffe .promo-titolo{font-size:19px}
  .promo-testo{font-size:15px;line-height:1.35}
  .promo-immagine{max-height:26vh}
  .promo-piede{padding:8px 14px 12px;gap:8px}
}

/* Modalità attiva: rete assente da oltre 15 secondi */
.avviso-rete{margin:4px 8px;padding:6px 10px;font-size:13px;line-height:1.3;border:1px solid var(--crim-testo);border-radius:8px;color:var(--crim-testo);background:transparent;text-align:center}
.avviso-rete[hidden]{display:none}
.avviso-rete .ricarica{margin-left:6px;padding:2px 10px;font:inherit;font-weight:700;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;cursor:pointer}

.avviso-informativa{margin-top:22px}.preferenza-email{margin-top:22px}.preferenza-email p{margin:0;line-height:1.5}
.come-link{background:none;border:0;padding:0;min-height:0;width:auto;font:inherit;color:var(--accento);text-decoration:underline;cursor:pointer;box-shadow:none}.come-link:focus-visible{outline:3px solid var(--fuoco);outline-offset:2px}
.perche-classifica{margin:4px 0 0;font-size:14px}
.spiega-classifica{margin:12px 0 8px;font-size:15px;line-height:1.45}.spiega-classifica h3{margin:0 0 6px;font:700 16px Georgia,serif}.spiega-classifica p{margin:0 0 8px}
dialog .come-link{min-height:0;border:0;border-radius:0;background:none;color:var(--accento);font-weight:400;padding:0;display:inline;text-decoration:underline}
/* Crediti e puzzle extra (05/10/2026) */
.monetina{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:var(--testo);font-weight:700;font-size:14px;margin-right:2px}
.monetina svg{width:20px;height:20px;fill:#e8c766;stroke:#9a7413;stroke-width:1.6}
.monetina svg path{fill:none}
.nome-sito .monetina{float:right;margin-top:2px}
.tessera.piu{border-style:dashed;border-color:#b8860b;text-decoration:none}
.tessera.piu .plancia{display:none}
.tessera.piu .t-piu{font:700 40px/38px Georgia,serif;color:#b8860b;height:38px}
.tessera.piu.vuota{opacity:.55;border-color:var(--bordo)}
.tessera.piu.vuota .t-piu{color:var(--tenue)}
.tessera.extra{border-color:#c9a227;box-shadow:inset 0 0 0 1px #e8c766;background:#fbf4dc}
.tessera.extra.risolto{background:var(--inn);border-color:#c9a227}
.tessera.extra.nuovo{animation:nuovo-extra 1.2s ease-in-out 3}
@keyframes nuovo-extra{50%{box-shadow:0 0 0 4px rgba(201,162,39,.5)}}
.dialogo-extra{max-width:380px}
.dialogo-extra h2{margin-top:0}
.livelli-extra{display:grid;gap:8px;margin:12px 0}
.livelli-extra button{min-height:48px;border:2px solid var(--accento);border-radius:10px;background:var(--carta);color:var(--testo);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 10px}
.livelli-extra button:not([disabled]):hover{background:#f1e4c4}
.livelli-extra .stelle-extra{color:#b8860b;font-size:20px;letter-spacing:.08em}
.livelli-extra button[disabled]{opacity:.6;cursor:default;border-color:var(--bordo)}
.livelli-extra .esaurito-extra{font-size:12px;color:var(--tenue);line-height:1.3}
.azioni-dialogo-extra{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.saldo-dopo{font-weight:700}
.saldo-grande{font-size:20px;display:flex;align-items:center;gap:8px}
.saldo-grande .monetina span{display:none}
.saldo-grande .monetina svg{width:30px;height:30px}
.titolo-sezione{font:700 18px Georgia,serif;margin:24px 0 8px}
.pacchetti{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pacchetti .pulsante{width:100%;justify-content:center}
.nota-acquisto{font-size:14px;color:var(--tenue);line-height:1.45}
.movimenti{list-style:none;padding:0;margin:0;font-size:14px}
.movimenti li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--bordo)}
/* Reparto antifrode (07/10/2026, in prova) */
.antifrode-fine{margin:14px 0 4px;padding:8px 10px;border-radius:9px;background:#eef3e6;font-size:13px;line-height:1.4;color:var(--testo)}
.antifrode-fine[data-verdetto="media"]{background:#f6eed8}
.antifrode-fine[data-verdetto="alta"]{background:var(--crim);color:var(--crim-testo)}
/* «Vedi la classifica» prima di giocare (09/10/2026) */
.avvio p.vedi-classifica{margin:14px 0 0;font-size:15px}
.avvio p.vedi-classifica[hidden]{display:none}
.classifica-anteprima h2{margin:0 0 8px;font:700 19px Georgia,serif}
.elenco-anteprima{margin:0;padding:0 0 0 2.2em;font-size:15px;line-height:1.5;min-width:min(17em,70vw)}
.elenco-anteprima li{padding:1px 6px}
.elenco-anteprima li::marker{font-weight:700;color:var(--tenue)}
.elenco-anteprima li.tu{background:rgba(132,96,56,.18);border-radius:6px;font-weight:700}
.elenco-anteprima li .cl-nome{display:inline-block;max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.elenco-anteprima li .cl-tempo{float:right;font-variant-numeric:tabular-nums;margin-left:12px}

/* Pausa manuale (15/10/2026): plancia illeggibile e inattiva, velo con «Riprendi». */
body.in-pausa .griglia,body.in-pausa .etichette-colonne,body.in-pausa .etichette-righe{filter:blur(18px);pointer-events:none;user-select:none}
.velo-pausa{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;background:rgba(244,238,223,.55)}
.velo-pausa[hidden]{display:none}
.velo-pausa h2{margin:0;font-size:24px}
.velo-pausa p{margin:0;max-width:30em;font-size:15px;line-height:1.4}
.velo-pausa button{font-size:18px;padding:10px 28px}
.velo-pausa .avviso-interruzioni{background:#fff3d6;border:1.5px solid #d49b16;border-radius:8px;padding:8px 12px}
.velo-pausa .avviso-interruzioni[hidden]{display:none}
/* «Sfida un amico» a fine partita (16/10/2026): pulsante pieno subito sotto il risultato */
.sfida-fine{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 12px}
.sfida-fine[hidden]{display:none}
.pulsante-sfida{gap:8px;font-size:16px}
.pulsante-sfida svg{width:20px;height:20px;fill:#fff;stroke:#fff;stroke-width:1.6}
#pausa[aria-pressed="true"]{background:#e8dcc0}
#pausa.consigliata{box-shadow:0 0 0 3px var(--fuoco);animation:pulsa 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#pausa.consigliata{animation:none}}
/* Con il tasto ⏸ i pulsanti tondi stanno un po' più stretti anche sui telefoni grandi: la data nel titolo resta leggibile. */
@media (max-width:430px){.barra{gap:2px}.tondo,.indietro{width:31px;height:31px}}
/* Riquadro delle novità in home (16/10/2026) */
.elenco-novita{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:12px}
.elenco-novita li{font-size:15px;line-height:1.4}
.elenco-novita li>div{display:flex;flex-direction:column;gap:3px}
.elenco-novita li.con-immagine{display:flex;gap:12px;align-items:flex-start}
.elenco-novita li.con-immagine img{flex:none;width:84px;height:84px;object-fit:contain}
.elenco-novita strong{font-size:16px}
.link-novita{display:flex;flex-wrap:wrap;gap:12px;margin-top:2px}
.link-novita a{color:var(--accento);font-weight:700}
.dialogo-novita .azioni-dialogo{justify-content:flex-end}
/* Chiusura con la × in alto a destra (25/10/2026). */
dialog.dialogo-novita{position:relative}
dialog.dialogo-novita .chiudi-novita{position:absolute;top:8px;right:8px;min-height:0;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--testo);font:400 28px/1 system-ui,sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer}
dialog.dialogo-novita .chiudi-novita:hover,dialog.dialogo-novita .chiudi-novita:focus-visible{background:rgba(56,43,34,.08)}
.dialogo-novita h2{padding-right:32px}
/* Annuncio del giorno (25/10/2026): riquadro alto, copertina grande al centro incorniciata dal testo. */
.annuncio-corpo{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:4px 6px 2px}
.dialogo-annuncio h2{margin:0;padding:0 34px;font-size:26px;line-height:1.2}
.annuncio-testo{margin:0;font-size:18px;line-height:1.45}
.annuncio-immagine{display:block;width:auto;height:min(40vh,320px);max-width:100%;border-radius:6px;box-shadow:0 6px 18px rgba(56,43,34,.28)}
.annuncio-pulsante{min-width:60%;font-size:18px;margin-top:2px}
@media (min-width:700px){
  dialog.dialogo-novita{max-width:min(640px,calc(100vw - 48px));padding:24px 26px 20px}
  .dialogo-novita h2{font-size:26px;margin-bottom:16px}
  .elenco-novita{gap:18px}
  .elenco-novita li{font-size:16px}
  .elenco-novita strong{font-size:18px}
  .elenco-novita li.con-immagine{gap:18px;align-items:center}
  .elenco-novita li.con-immagine img{width:130px;height:130px}
}

/* Lega: stessi colori, componenti e tipografia delle pagine del gioco. */
.lega-pagina h1{font:700 34px/1.1 Georgia,serif;margin:20px 0 12px}
.lega-pagina h2{font:700 24px/1.2 Georgia,serif}
.lega-home{border-color:var(--inn-bordo);background:var(--inn)}
.lega-date,.lega-regole,.lega-archivio{color:var(--tenue);line-height:1.5}
.lega-regole,.lega-archivio{border-top:1px solid var(--bordo);padding-top:16px;margin-top:24px}
.lega-regole summary,.lega-archivio summary{cursor:pointer;font-weight:700;color:var(--testo);min-height:36px}
.lega-riepilogo{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;border:2px solid var(--bordo);border-radius:12px;background:var(--carta);padding:14px;margin-top:20px}
.lega-avviso{padding:12px 14px;border:1px solid var(--crim-bordo);border-radius:10px;background:var(--crim);line-height:1.5;color:var(--crim-testo)}
.lega-giorni{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;list-style:none;padding:0;margin:12px 0 26px}
.lega-giorni li{min-width:0}
.lega-giorno{display:flex;min-height:100px;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px solid var(--bordo);border-radius:10px;background:var(--carta);text-decoration:none;color:var(--testo)}
.lega-giorno strong{font:700 16px Georgia,serif}
.lega-giorno .stelle{font-size:clamp(9px,2.2vw,14px);letter-spacing:0}
.lega-stato{font-size:clamp(9px,2.2vw,13px);font-weight:700;min-height:1.3em;white-space:nowrap}
.lega-giorno.completato{background:var(--inn);border-color:var(--inn-bordo)}
.lega-giorno.escluso{background:var(--crim);border-color:var(--crim-bordo);color:var(--crim-testo)}
.lega-giorno.in_corso{border-color:var(--accento)}.lega-giorno.futuro{opacity:.55}
.lega-ranking{list-style-position:inside;margin:12px 0;padding:0}
.lega-ranking li{display:list-item;padding:10px 12px;margin:5px 0;border-radius:9px;background:var(--carta);font-weight:700;overflow-wrap:anywhere}
.lega-ranking .cl-tempo{float:right;white-space:nowrap}.lega-ranking .tu{background:var(--inn)}
.coppa-lega{position:relative;display:inline-block;vertical-align:middle;width:24px;height:24px;margin-left:5px}
.coppa-lega svg{width:20px;height:20px;fill:#d9b144;stroke:#846038;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.coppa-lega small{position:absolute;bottom:-2px;right:-5px;font:700 10px system-ui,sans-serif;background:var(--carta);color:var(--testo);border-radius:3px;padding:0 1px}
.classifica-fine li .cl-nome.con-coppa,.elenco-anteprima li .cl-nome.con-coppa{display:inline-flex;align-items:center;overflow:visible}
.cl-nome.con-coppa>.cl-testo{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cl-nome.con-coppa>.coppa-lega{flex:none;margin-right:5px}
@media(max-width:360px){.lega-giorni{gap:3px}.lega-giorno{border-width:1px;border-radius:7px}.lega-pagina{padding-inline:10px}}
.lega-ranking li.lega-separatore{list-style:none;background:transparent;text-align:center;padding:0}.classifica-fine li.lega-separatore{list-style:none;justify-content:center}