/* base.css — stile comune a tutte le pagine di Stars.
   Atmosfera solare: fondo caldo, angoli morbidi, nessuna ombra dura. */

:root{
  --fondo:#FDF1E7; --carta:#fff; --testo:#7A5C4B; --tenue:#A08975;
  --bordo:#EFE2D6; --neutro:#EDE7E1;
  --accento:#E8956A; --accento-scuro:#C97848;
  --rosso:#E8756A; --rosso-scuro:#C4574D;
  --rosso-tenue:#F6D9D5; --rosso-testo:#8C3A2E;
  --verde:#7BC97F; --verde-tenue:#E2F2E3;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--testo);
  font-family:"Segoe UI",system-ui,sans-serif;font-size:15px}

/* --- intestazione --- */
.testata{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 22px;background:var(--carta);
  border-bottom:1px solid var(--bordo);flex-wrap:wrap}
.identita{display:flex;align-items:center;gap:9px;font-size:14px}
.ruolo{border-radius:999px;padding:4px 12px;font-size:12px;
  letter-spacing:.6px;font-weight:600}
.ruolo.admin{background:#F3E0D2;color:#8C5A2E}
.ruolo.player{background:#DDEAF6;color:#35618C}
.comandi{display:flex;align-items:center;gap:9px}

/* Niente zoom col doppio tocco, su tutte le pagine: Safari per iPhone
   ignora user-scalable=no, e nel gioco due tocchi veloci sono frequenti.
   Lo zoom a due dita resta: chi vuole ingrandire può farlo, e soprattutto
   può tornare indietro. */
html{touch-action:manipulation}

/* --- elementi --- */
button,input,select{font:inherit;color:var(--testo);-webkit-tap-highlight-color:transparent}
button{background:var(--carta);border:1px solid var(--bordo);
  border-radius:999px;padding:8px 16px;cursor:pointer}
button:hover{filter:brightness(.97)}
button.primario{background:var(--accento);color:#fff;border:none;
  border-bottom:3px solid var(--accento-scuro)}
button.pericolo{background:var(--rosso);color:#fff;border:none;
  border-bottom:3px solid var(--rosso-scuro)}
button.piccolo{padding:5px 11px;font-size:13px}
button:disabled{opacity:.45;cursor:default}

input{background:var(--carta);border:1px solid var(--bordo);
  border-radius:11px;padding:9px 13px;width:100%}
input:focus{outline:2px solid var(--accento);outline-offset:-1px}

.scheda{background:var(--carta);border-radius:16px;padding:20px 22px;
  margin-bottom:16px}
.contenuto{max-width:980px;margin:26px auto;padding:0 18px}
h1{font-size:21px;margin:0 0 4px}
h2{font-size:16px;margin:0 0 14px;font-weight:600}
.nota{font-size:13px;color:var(--tenue)}

/* --- tabella --- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;color:var(--tenue);font-weight:600;
  padding:0 10px 9px;letter-spacing:.3px}
td{padding:11px 10px;border-top:1px solid var(--bordo);vertical-align:middle}
tr.spento td{opacity:.5}

.stato{border-radius:999px;padding:3px 10px;font-size:12px}
.stato.attivo{background:var(--verde-tenue);color:#2E6B33}
.stato.sospeso{background:var(--neutro);color:#8C7A6B}

/* --- messaggi --- */
.avviso{border-radius:11px;padding:10px 14px;font-size:13.5px;margin-bottom:12px}
.avviso.errore{background:var(--rosso-tenue);color:var(--rosso-testo)}
.avviso.ok{background:var(--verde-tenue);color:#2E6B33}
.avviso:empty{display:none}

/* --- login --- */
.accesso{max-width:340px;margin:14vh auto;text-align:center}
.accesso .scheda{text-align:left}
.marchio{font-size:34px;letter-spacing:3px;margin-bottom:4px;color:#C97848}
.campo{margin-bottom:13px}
.campo label{display:block;font-size:12.5px;color:var(--tenue);margin-bottom:5px}

/* --- griglia di gioco --- */
.tavola{display:grid;gap:5px;background:var(--carta);border-radius:16px;
  padding:8px;width:max-content;margin:0 auto;
  user-select:none;-webkit-user-select:none;
  /* none, non manipulation: durante il trascinamento il browser non
     deve interpretare il gesto come scorrimento o zoom. manipulation
     prima di none: le versioni di Safari che non conoscono none tengono
     almeno quello, e niente zoom col doppio tocco. */
  touch-action:manipulation;touch-action:none;-webkit-touch-callout:none}
.cella{border-radius:11px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .08s;-webkit-tap-highlight-color:transparent}
.cella:active{transform:scale(.94)}
.cella.bloccata{cursor:default}
.segno{width:58%;height:58%;pointer-events:none}
.segno.ics{color:rgba(90,70,60,.40)}
.segno.rossa{color:#D64545}
@keyframes comparsa{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes scossa{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.nasce{animation:comparsa .28s ease-out}
/* Celle svuotate da un razzo: due lampi chiari. */
.cella.colpita{animation:colpita .55s ease-out 2}
@keyframes colpita{0%{box-shadow:inset 0 0 0 30px #FFF6D6}100%{box-shadow:inset 0 0 0 0 #FFF6D6}}
.sbaglia{animation:scossa .22s}

/* --- roulette della stagione 4 (public/js/roulette.js) ---
   Griglia ferma e attenuata mentre la roulette gira: i gesti sono
   ignorati, e deve vedersi. La capsula sta sulla pagina, sopra il
   centro della griglia, e lascia passare i tocchi. */
.tavola{transition:opacity .15s,filter .15s}
.tavola.ferma{opacity:.55;filter:saturate(.7);cursor:not-allowed}
.tavola.ferma .cella:active{transform:none}
.roulette{position:absolute;z-index:60;pointer-events:none;display:flex;gap:10px;
  align-items:center;background:var(--carta);border-radius:18px;padding:10px 12px 12px;
  border-bottom:3px solid var(--accento-scuro);box-shadow:0 0 0 1px var(--bordo);
  transform:translate(-50%,-50%)}
.roulette.entra{animation:roulette-entra .18s ease-out}
.roulette.esce{animation:roulette-esce .16s ease-in forwards}
@keyframes roulette-entra{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes roulette-esce{0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(-50%,-50%) scale(.85);opacity:0}}
.rullo{position:relative;overflow:hidden;background:var(--fondo);border-radius:12px}
/* sfumature sopra e sotto: il rullo sembra un cilindro */
.rullo::before,.rullo::after{content:"";position:absolute;left:0;right:0;height:22%;
  z-index:2;pointer-events:none}
.rullo::before{top:0;background:linear-gradient(var(--fondo),rgba(253,241,231,0))}
.rullo::after{bottom:0;background:linear-gradient(rgba(253,241,231,0),var(--fondo))}
.rullo .nastro{position:absolute;left:0;top:0;width:100%;will-change:transform}
.rullo .voce{display:flex;align-items:center;justify-content:center}
/* solo il simbolo, non gli svg annidati dentro (capsula, ruota) */
.rullo .voce > svg{width:72%;height:72%}
.rullo.fermo{box-shadow:inset 0 0 0 2px var(--accento)}

/* --- ruota della sfortuna, stagione 5 (public/js/ruota.js) ---
   Stesso riquadro della capsula della ST4. Le celle toccate dalla ruota
   lampeggiano: gialle se i cuori mettono X, rosse se i teschi le tolgono. */
.ruota{position:absolute;z-index:60;pointer-events:none;display:flex;flex-direction:column;
  align-items:center;gap:4px;background:var(--carta);border-radius:20px;padding:10px 10px 8px;
  border-bottom:3px solid var(--accento-scuro);box-shadow:0 0 0 1px var(--bordo);
  transform:translate(-50%,-50%)}
.ruota.entra{animation:roulette-entra .18s ease-out}
.ruota.esce{animation:roulette-esce .16s ease-in forwards}
/* solo il disegno esterno: dentro ci sono i simboli, con misure loro */
.ruota-disegno > svg{width:100%;height:100%;display:block}
.ruota-esito{font-size:13px;font-weight:600;min-height:18px;letter-spacing:.3px;opacity:0;transition:opacity .15s}
.ruota-esito.vista{opacity:1}
.ruota-esito.cuori{color:#A8740C}
.ruota-esito.teschi{color:#B83B3B}
.cella.pulita{animation:pulita .6s ease-out}
@keyframes pulita{0%{box-shadow:inset 0 0 0 30px rgba(255,236,170,.9)}100%{box-shadow:inset 0 0 0 0 rgba(255,236,170,0)}}
.cella.cancellata{animation:cancellata .6s ease-out}
@keyframes cancellata{0%{box-shadow:inset 0 0 0 30px rgba(196,87,75,.45)}100%{box-shadow:inset 0 0 0 0 rgba(196,87,75,0)}}

/* --- pillole di partita --- */
.pannello{display:flex;gap:9px;align-items:center;justify-content:center;
  flex-wrap:wrap;margin-bottom:16px}
.pillola{background:var(--carta);border-radius:999px;padding:7px 15px;
  font-size:14px;display:flex;align-items:center;gap:7px;
  font-variant-numeric:tabular-nums}
.pillola.rossa{background:var(--rosso-tenue);color:var(--rosso-testo)}
.cuore{width:17px;height:17px;color:var(--rosso)}
.cuore.spento{color:var(--neutro)}
.cuore.piccolo{width:13px;height:13px}

/* --- esito --- */
.esito{text-align:center;margin-top:20px;font-size:20px;font-weight:600;min-height:28px}
.esito.vinta{color:#2E6B33}
.esito.persa{color:var(--rosso-testo)}
.dettaglio{text-align:center;font-size:13.5px;color:var(--tenue);margin-top:6px}
.dopo{display:flex;gap:10px;justify-content:center;margin-top:18px}

/* --- mappa dei livelli --- */
.livelli{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px}
.livello{background:var(--carta);border-radius:13px;padding:11px 8px;text-align:center;
  cursor:pointer;border-bottom:3px solid var(--bordo);transition:transform .1s}
.livello:hover{transform:translateY(-2px)}
.livello .n{font-size:17px;font-weight:600}
.livello .lato{font-size:11px;color:var(--tenue);margin-top:2px}
.livello .pallini{display:flex;gap:3px;justify-content:center;margin-top:6px}
.livello .p{width:7px;height:7px;border-radius:50%;border:1.5px solid #DCC6B4}
.livello .p.on{background:var(--accento);border-color:var(--accento)}
.livello.bloccato{cursor:default;opacity:.42;border-bottom-color:var(--neutro)}
.livello.bloccato:hover{transform:none}
.livello.prossimo{border-bottom-color:var(--accento);
  box-shadow:0 0 0 2px var(--accento) inset}
.livello.fatto .n{color:#2E6B33}

/* --- riquadro della stagione (pagina dei livelli) ---
   Tre colonne: tasti 1-3 a sinistra, contenuto al centro, tasti 4-6 a
   destra. Le due colonne di tasti hanno la stessa larghezza, così il
   centro resta centrato nella scheda. */
.stagione-riquadro{display:grid;grid-template-columns:118px 1fr 118px;gap:12px;align-items:start;
  grid-template-areas:"sx centro dx"}
#tasti-sx{grid-area:sx}
#tasti-dx{grid-area:dx}
.stagione-centro{grid-area:centro}
.stagione-tasti{display:flex;flex-direction:column;gap:7px}
.stagione-tasti button{text-align:left;padding:8px 12px;font-size:13.5px}
.stagione-tasti button.inibito{opacity:.45}
/* Stagione non ancora realizzata: tratteggio nel colore dei bordi,
   non rosso. Il rosso nel gioco vuol dire errore. */
.stagione-tasti button.in-arrivo{color:#A8937F;
  background-image:repeating-linear-gradient(135deg,#D8C6B5 0 1.5px,transparent 1.5px 8px)}
/* La scritta su un fondino chiaro: sopra le righe si leggeva male. */
.stagione-tasti button.in-arrivo span{background:var(--carta);padding:0 4px;border-radius:4px}
.stagione-tasti .corto{display:none}
.stagione-centro{text-align:center;padding:4px 0 6px;min-height:120px}
.stagione-titolo{font-size:18px;font-weight:600;margin-top:8px}
.stagione-nota{font-size:13.5px;color:var(--tenue);margin-top:4px;line-height:1.5}
/* Le scritte sopra l'alone della coppa ST6, che sta dietro di loro. */
.stagione-titolo,.stagione-nota{position:relative;z-index:1}
.stagione-azione{margin-top:14px}
.stagione-avviso{font-size:12.5px;color:var(--tenue);margin-top:8px;min-height:18px}
/* Su schermo stretto: una riga sola sopra il contenuto, sigle corte
   come quelle incise sulle coppe. Le due colonne di tasti diventano le
   due metà della riga. */
@media (max-width:520px){
  .stagione-riquadro{grid-template-columns:1fr 1fr;gap:6px;grid-template-areas:"sx dx" "centro centro"}
  .stagione-tasti{flex-direction:row;gap:6px}
  .stagione-tasti button{flex:1;text-align:center;padding:7px 0}
  .stagione-tasti .lungo{display:none}
  .stagione-tasti .corto{display:inline}
  .stagione-centro{margin-top:10px}
  /* La riga dei tasti è subito sopra: l'alone della coppa ST6 non deve
     toccarla. */
  .stagione-centro .coppa-vetrina{margin-top:10px}
}

/* --- coppe accanto al nome (pagina iniziale) --- */
.coppe-nome{display:inline-flex;gap:3px;vertical-align:middle;margin-left:8px;align-items:center}
/* La coppa ST6 in vetrina (svgCoppaInVetrina in public/js/coppa.js):
   alone dorato dietro, che non occupa spazio e non sposta nulla.
   Bagliore che pulsa e raggi che girano lenti, larghi --alone (1,7 volte
   la coppa): sfumano a zero sul bordo (closest-side). Nella pagina
   iniziale si fermano prima della linea sotto il nome. */
.coppa-vetrina{position:relative;display:inline-flex;flex:none;vertical-align:middle}
.coppa-vetrina>svg{position:relative;z-index:1}
.vetrina-bagliore,.vetrina-raggi{position:absolute;left:50%;top:50%;width:var(--alone,72px);
  height:var(--alone,72px);margin:calc(var(--alone,72px) / -2) 0 0 calc(var(--alone,72px) / -2);
  border-radius:50%;pointer-events:none}
.vetrina-bagliore{background:radial-gradient(circle closest-side,rgba(255,236,150,.95) 0%,
  rgba(255,210,74,.55) 45%,rgba(255,210,74,0) 100%);animation:vetrina-pulsa 3s ease-in-out infinite}
.vetrina-raggi{background:repeating-conic-gradient(from 0deg,rgba(255,206,70,.6) 0deg 8deg,rgba(255,206,70,0) 8deg 30deg);
  -webkit-mask:radial-gradient(circle closest-side,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%);
  mask:radial-gradient(circle closest-side,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%);
  animation:vetrina-gira 24s linear infinite}
@keyframes vetrina-pulsa{0%,100%{transform:scale(.9);opacity:.8}50%{transform:scale(1.08);opacity:1}}
@keyframes vetrina-gira{to{transform:rotate(360deg)}}
.movimento-ridotto .vetrina-bagliore,.movimento-ridotto .vetrina-raggi{animation:none}

/* --- spiegazione al primo ingresso in una stagione --- */
.spiegazione{position:fixed;inset:0;z-index:80;background:rgba(122,92,75,.35);
  display:flex;align-items:center;justify-content:center;padding:18px}
.spiegazione-scheda{background:var(--carta);border-radius:18px;padding:26px 24px 22px;
  max-width:400px;text-align:center}
.spiegazione-icona{width:52px;height:52px;color:var(--accento)}
/* Stagione 4: la roulette in miniatura, più larga delle altre icone. */
.spiegazione-icona.larga{width:96px;height:60px}
/* Stagione 5: la ruota a metà, cuori e teschi. */
.spiegazione-icona.ruota-icona{width:84px;height:87px}
.spiegazione-titolo{font-size:20px;font-weight:600;margin:10px 0 12px}
.spiegazione-scheda p{font-size:14px;line-height:1.6;margin:0 0 10px;color:var(--testo)}
.spiegazione-scheda button{margin-top:10px}
/* Una frase per riga, senza andare a capo dentro la frase (popup ST6). */
/* Una frase per riga, senza andare a capo dentro la frase (popup ST6).
   La riga più lunga è 19,6 volte il corpo del testo: su schermi sotto i
   380 px il corpo scende quanto serve (90 px = margini di velo e scheda,
   più un poco di respiro), e le righe restano intere. */
.spiegazione-scheda .riga-intera{display:block;white-space:nowrap;
  font-size:min(14px, calc((100vw - 90px) / 19.6))}


/* Istruzioni diverse a seconda del dispositivo: il puntatore fine
   esiste solo con mouse o trackpad. */
.solo-tocco{display:none}
@media (pointer:coarse){
  .solo-mouse{display:none}
  .solo-tocco{display:inline}
}

/* --- schermi stretti --- */
@media (max-width:640px){
  body{font-size:14px}
  .contenuto{margin:16px auto;padding:0 10px}
  .testata{padding:11px 13px}
  .scheda{padding:15px 14px;border-radius:14px}

  /* Celle più fitte: a lato 10 ogni pixel risparmiato conta. */
  .tavola{gap:3px;padding:5px;border-radius:13px}
  .cella{border-radius:8px}

  .pannello{gap:6px;margin-bottom:12px}
  .pillola{padding:6px 11px;font-size:13px}

  .livelli{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px}
  .livello{padding:9px 5px;border-radius:11px}
  .livello .n{font-size:15px}

  /* La tabella utenti non entra in larghezza: scorre da sola. */
  .scheda table{display:block;overflow-x:auto;white-space:nowrap}

  .esito{font-size:18px}
  .dopo{flex-wrap:wrap}
}

@media (max-width:400px){
  .tavola{gap:2px;padding:4px}
  .cella{border-radius:6px}
}

/* --- avviso di invito --- */
.banner-invito{position:fixed;top:0;left:0;right:0;z-index:50;
  display:none;align-items:center;justify-content:space-between;gap:14px;
  background:var(--carta);border-bottom:3px solid var(--accento);
  padding:12px 20px;flex-wrap:wrap}
.banner-invito.visibile{display:flex}
.banner-invito .testo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.banner-invito .dettaglio-invito{font-size:13px;color:var(--tenue)}
.banner-invito .conto{background:var(--neutro);border-radius:999px;
  padding:2px 9px;font-size:12px;font-variant-numeric:tabular-nums}
.banner-invito .azioni{display:flex;gap:8px}

/* --- lobby --- */
.utente{display:flex;align-items:center;gap:11px;padding:11px 4px;
  border-top:1px solid var(--bordo)}
.utente:first-child{border-top:none}
.utente .nome{font-weight:600}
.utente .dove{font-size:12px;color:var(--tenue)}
.utente .medaglietta{width:28px;height:38px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#C9BDB2}
.utente input{width:auto;flex:none}
.utente.io{opacity:.65}
.utente.occupato{opacity:.5}

.scelta-lato{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 16px}

/* Lancia una sfida: righe con etichetta (griglia, malus), tasti tutti
   uguali. Nella riga dei malus i posti riservati ai malus futuri ci
   sono ma non si vedono: quando arriveranno, gli altri tasti non si
   sposteranno. */
.etichetta-sfida{font-size:12.5px;color:var(--tenue);margin:0 0 6px}
.scelta-malus button.spento{opacity:.45;cursor:default}
.scelta-malus button.riservato{visibility:hidden}
.motivo-malus{font-size:12.5px;color:var(--tenue);margin:-8px 0 14px;min-height:16px}
.motivo-malus:empty{display:none}
.lato-scelto{background:var(--accento);color:#fff;border-color:var(--accento)}

.risposta{display:flex;justify-content:space-between;padding:7px 0;
  border-top:1px solid var(--bordo);font-size:14px}
.risposta .esito-invito{font-size:13px}
.risposta .accettato{color:#2E6B33}
.risposta .rifiutato{color:var(--rosso-testo)}
.risposta .attesa{color:var(--tenue)}

.stato-canale{font-size:12px;color:var(--tenue)}
.stato-canale.caduto{color:var(--rosso-testo)}

/* --- pannello avversari --- */
.avversari{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.avversario{background:var(--carta);border-radius:13px;padding:10px 14px;min-width:180px;
  transition:background .2s}
.avversario.penalizzato{background:var(--rosso-tenue)}
.avversario.fuori{opacity:.5}
.intestazione-avv{display:flex;align-items:baseline;gap:9px;font-size:13.5px}
.intestazione-avv .nome{font-weight:600;flex:1}
.intestazione-avv .stelle{font-variant-numeric:tabular-nums}
.intestazione-avv .cuori{display:flex;gap:3px;align-items:center}
.avversario .bar{height:7px;border-radius:999px;background:var(--neutro);
  overflow:hidden;margin-top:7px}
.avversario .bar i{display:block;height:100%;transition:width .25s}
.avversario .dove{font-size:11.5px;color:var(--tenue);margin-top:5px}

/* --- conto alla rovescia --- */
.velo{position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;background:rgba(253,241,231,.92)}
.velo.visibile{display:flex}
.conto-grande{font-size:88px;font-weight:700;color:var(--accento);
  font-variant-numeric:tabular-nums;animation:pulsa .9s ease-out}
@keyframes pulsa{0%{transform:scale(.6);opacity:0}40%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}

/* --- riepilogo finale --- */
.riga-finale{display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-top:1px solid var(--bordo)}
.riga-finale:first-child{border-top:none}
.coppetta{width:16px;height:16px;color:#E0A81E;margin-right:7px;vertical-align:-3px}

@media (max-width:640px){
  .avversari{gap:8px}
  .avversario{min-width:140px;padding:8px 11px}
  .conto-grande{font-size:64px}
}


/* --- avviso di connessione persa --- */
.fascia-rete{position:fixed;top:0;left:0;right:0;z-index:70;
  display:none;align-items:center;justify-content:center;gap:10px;
  background:var(--rosso-tenue);color:var(--rosso-testo);
  padding:9px 16px;font-size:13.5px;text-align:center}
.fascia-rete.visibile{display:flex}
.fascia-rete .puntino{width:9px;height:9px;border-radius:50%;
  background:var(--rosso);animation:battito 1.1s infinite}
@keyframes battito{0%,100%{opacity:1}50%{opacity:.25}}

/* --- pagina iniziale --- */
.profilo .nome{font-size:20px;font-weight:600;display:flex;align-items:center;flex-wrap:wrap}

/* Lo spazio della medaglia resta riservato anche senza grado:
   comparendo non deve spostare il resto della scheda. */
.posto-medaglia{width:46px;height:64px;flex:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px}
/* Vittorie a sinistra, medaglia a destra: la medaglia è del
   multiplayer e sta nella sua colonna. */
.numeri-multi{display:flex;justify-content:space-between;align-items:center;gap:8px}
/* Con la medaglia la seconda colonna è più alta: i due numeri restano
   sulla stessa riga solo se entrambe le colonne stanno al centro. */
.numeri{align-items:center}
.posto-medaglia .metallo{font-size:11px;letter-spacing:.5px}

/* I contatori seguono le colonne dei riquadri sottostanti. Il conto
   torna esatto: la seconda colonna va spostata di quanto vale il
   margine interno dei riquadri, e la scheda del profilo deve avere
   lo stesso margine interno, altrimenti la prima resta fuori di due
   pixel. */
.scheda.profilo{padding:19px 21px}
.numeri{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--bordo)}
.numeri>div:nth-child(2){padding-left:21px}
.numeri span{font-size:21px;font-weight:600;display:block}
.numeri em{font-style:normal;font-size:12.5px;color:var(--tenue)}
/* Le parti dell'etichetta non sono numeri: la regola sopra sugli span
   non deve toccarle. Su mobile vanno a capo (vedi schermi stretti). */
.numeri em span{font:inherit;display:inline}

.scelta{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.modo{display:block;background:var(--carta);border-radius:16px;padding:19px 21px;
  text-decoration:none;color:inherit;border-bottom:4px solid var(--accento);
  cursor:pointer;transition:transform .1s, border-color .1s}
.modo:hover{transform:translateY(-2px);border-bottom-color:var(--accento-scuro)}
.modo .titolo{font-size:18px;font-weight:600;margin-bottom:6px}
.modo .descrizione{font-size:13.5px;color:var(--tenue);line-height:1.5}
.modo .gioca{margin-top:13px;font-size:13.5px;color:var(--accento-scuro);
  display:flex;align-items:center;gap:6px}
@media (max-width:620px){
  .scelta{grid-template-columns:1fr}
  /* Allineare a colonne che non esistono più non avrebbe senso. */
  .numeri{gap:30px}
  .numeri>div:nth-child(2){padding-left:0}
  /* Etichette su due righe entrambe: "livello / campagna ST2" e
     "vittorie / multiplayer". Stessa altezza, numeri allineati, e la
     medaglia ci sta accanto. */
  .numeri em span{display:block}
}

/* --- riquadro regole --- */
.regole-testata{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.regole-titolo{font-size:16px;font-weight:600}
.regola{display:flex;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--bordo)}
.regola:first-child{border-top:none}
.regola-titolo{font-size:14px;font-weight:600}
.regola-testo{font-size:12.5px;color:var(--tenue);line-height:1.45}
.mini-griglia{display:grid;grid-template-columns:repeat(4,19px);gap:2px;flex:none}
.mini-cella{width:19px;height:19px;border-radius:4px;background:#F4EBE1;
  display:flex;align-items:center;justify-content:center}
.mini-stella{width:14px;height:14px}
.mini-ics{width:12px;height:12px;color:rgba(90,70,60,.38)}
.regole-coda{border-top:1px solid var(--bordo);padding-top:13px;margin-top:4px;
  font-size:12.5px;color:var(--tenue);line-height:1.65}
.regole-coda b{color:var(--testo);font-weight:600}


/* --- password leggibile, solo nella gestione utenti --- */
.chiave{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  background:var(--neutro);border-radius:7px;padding:3px 8px;letter-spacing:.4px}


/* --- azioni in coda alla pagina iniziale --- */
.riga-azioni{display:flex;justify-content:flex-end;margin-bottom:10px}


/* --- festa della medaglia --- */
.festa{position:fixed;inset:0;z-index:90;overflow:hidden;
  background:rgba(253,241,231,.93);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:opacity .4s}
.festa.svanisce{opacity:0}
.festa-titolo{font-size:13px;letter-spacing:2px;color:var(--tenue);
  animation:festa-sale .5s ease-out .5s both;z-index:2}
.festa-medaglia{position:relative;z-index:2;
  animation:festa-arriva .7s cubic-bezier(.2,1.5,.4,1) both}
.festa-metallo{font-size:21px;font-weight:600;letter-spacing:1px;
  animation:festa-sale .5s ease-out .65s both;z-index:2}
.festa-sotto{font-size:13px;color:var(--tenue);
  animation:festa-sale .5s ease-out .8s both;z-index:2}
.alone{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;
  border-radius:50%;opacity:0;animation:festa-alone 1.6s ease-out .25s both}

.scintilla{position:absolute;border-radius:50%;background:var(--c);
  width:var(--s);height:var(--s);animation-name:festa-scoppio;
  animation-timing-function:cubic-bezier(.2,.7,.3,1);animation-fill-mode:both}
.coriandolo{position:absolute;top:-18px;width:var(--w);height:var(--h);
  background:var(--c);border-radius:2px;animation-name:festa-cade;
  animation-timing-function:linear;animation-fill-mode:both}

@keyframes festa-arriva{0%{transform:scale(0) rotate(-25deg);opacity:0}
  60%{transform:scale(1.18) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes festa-sale{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes festa-alone{0%{transform:scale(.3);opacity:.45}100%{transform:scale(2.4);opacity:0}}
@keyframes festa-scoppio{0%{transform:translate(0,0) scale(.4);opacity:0}
  12%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(.25);opacity:0}}
@keyframes festa-cade{0%{transform:translate(0,0) rotate(0);opacity:0}
  8%{opacity:1}100%{transform:translate(var(--dx),110vh) rotate(var(--r));opacity:.9}}

/* Animazioni avanzate spente nelle impostazioni (public/js/opzioni.js
   mette la classe movimento-ridotto su html). Prima del 10 ottobre 2026
   queste regole seguivano "riduci animazioni" del sistema. */
.movimento-ridotto .scintilla,.movimento-ridotto .coriandolo,.movimento-ridotto .alone{display:none}
.movimento-ridotto .festa-medaglia,.movimento-ridotto .festa-titolo,
.movimento-ridotto .festa-metallo,.movimento-ridotto .festa-sotto{animation:none}


/* --- festa finale, stagione 6 (public/js/festa.js) ---
   Raggi di luce che girano dietro la coppa, un bagliore che pulsa,
   stelline che brillano, il riflesso che attraversa la coppa. Anteprima
   "Coppa del caos" del 26 settembre 2026. */
.festa.finale .festa-medaglia{animation-duration:1s}
.festa.finale .festa-metallo{font-size:24px;color:#8C5A0B}
.luce{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;
  pointer-events:none;z-index:1;opacity:0;animation:luce-entra 1.2s ease-out .35s forwards}
.raggi{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,90,.55) 0deg 7deg,rgba(255,214,90,0) 7deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 18%,rgba(0,0,0,.6) 40%,transparent 68%);
  mask:radial-gradient(circle,#000 18%,rgba(0,0,0,.6) 40%,transparent 68%);
  animation:luce-gira 18s linear infinite}
.raggi.contro{animation:luce-gira 26s linear infinite reverse;opacity:.55;transform:rotate(11deg)}
.bagliore{position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,170,.95) 0%,rgba(255,213,79,.55) 35%,rgba(255,213,79,0) 70%);
  animation:luce-pulsa 2.4s ease-in-out infinite}
.brillio{position:absolute;z-index:3;width:var(--d);height:var(--d);pointer-events:none;opacity:0;
  animation:luce-brilla var(--t) ease-in-out var(--r) infinite}
.brillio svg{width:100%;height:100%;display:block}
.festa .coppa-finale .riflesso{animation:luce-riflesso 3.2s ease-in-out 1.4s infinite}
@keyframes luce-entra{to{opacity:1}}
@keyframes luce-gira{to{transform:rotate(360deg)}}
@keyframes luce-pulsa{0%,100%{transform:scale(.92);opacity:.85}50%{transform:scale(1.08);opacity:1}}
@keyframes luce-brilla{0%,100%{transform:scale(.2) rotate(0);opacity:0}45%{transform:scale(1) rotate(45deg);opacity:1}70%{opacity:.2}}
@keyframes luce-riflesso{0%{transform:translateX(-70px)}40%,100%{transform:translateX(90px)}}
.movimento-ridotto .brillio{display:none}
.movimento-ridotto .raggi,.movimento-ridotto .bagliore,.movimento-ridotto .festa .coppa-finale .riflesso{animation:none}
.movimento-ridotto .luce{animation:none;opacity:1}


/* --- slot machine della stagione 6 (public/js/slot.js) ---
   Tre rulli (griglia, difficoltà, malus) e la leva: un binario con il
   pallino rosso che scende al tocco o trascinandolo. Anteprima "Slot
   del caos" del 26 settembre 2026. I rulli usano .rullo, .nastro e
   .voce della stagione 4; qui solo la misura, che segue lo spazio. */
.caos{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;justify-items:center;text-align:center}
.caos-contatore{width:100%;max-width:360px;display:grid;gap:6px}
.caos-numeri{display:flex;justify-content:space-between;font-size:13px;color:var(--tenue);
  font-variant-numeric:tabular-nums}
.caos-numeri b{color:var(--testo);font-size:20px;font-weight:700}
.caos-barra{height:8px;border-radius:999px;background:var(--neutro);overflow:hidden}
.caos-barra span{display:block;height:100%;background:var(--accento);border-radius:999px}
.slot-caos{position:relative;max-width:100%}
.slot-cassa{position:relative;background:var(--carta);border-radius:20px;padding:12px 12px 12px 14px;
  border-bottom:4px solid var(--accento-scuro);box-shadow:0 0 0 2px var(--bordo);
  display:grid;grid-template-columns:repeat(3,var(--lato)) 34px;gap:var(--spazio);align-items:start}
.slot-colonna{display:grid;gap:6px;justify-items:center}
.slot-etichetta{font-size:11px;letter-spacing:.8px;color:var(--tenue);text-transform:uppercase}
.slot-caos .rullo{width:var(--lato);height:var(--lato)}
.slot-caos .voce{height:var(--lato)}
.slot-caos .voce > svg{width:70%;height:70%}
.slot-lato{font-size:calc(var(--lato) * .27);font-weight:700;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.slot-pallini{display:flex;gap:calc(var(--lato) * .045)}
.slot-pallini i{width:calc(var(--lato) * .12);height:calc(var(--lato) * .12);border-radius:50%;
  border:2px solid #DCC6B4}
.slot-pallini i.on{background:var(--accento);border-color:var(--accento)}
.slot-esito{font-size:12.5px;font-weight:600;min-height:17px;opacity:0;transition:opacity .2s}
.slot-esito.vista{opacity:1}
.slot-binario{position:relative;width:14px;height:calc(var(--lato) + 23px);margin-top:4px;border-radius:999px;
  background:var(--neutro);box-shadow:inset 0 0 0 2px var(--bordo)}
.leva-pallino{position:absolute;left:50%;top:-8px;width:30px;height:30px;margin-left:-15px;border-radius:50%;
  padding:0;border:3px solid var(--rosso-scuro);background:var(--rosso);cursor:pointer;touch-action:none;
  transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.leva-pallino:disabled{cursor:default}
.leva-pallino:not(:disabled){animation:leva-invita 2.4s ease-in-out infinite}
.leva-pallino.giu{transform:translateY(var(--corsa));transition:transform .28s cubic-bezier(.55,0,.85,.35)}
@keyframes leva-invita{0%,80%,100%{box-shadow:0 0 0 0 rgba(232,117,106,.45)}90%{box-shadow:0 0 0 8px rgba(232,117,106,0)}}
/* conto alla rovescia sotto la cassa: i rulli restano visibili */
.slot-conto{height:64px;display:flex;align-items:center;justify-content:center}
.slot-conto span{font-size:52px;line-height:1;font-weight:700;color:var(--accento-scuro);
  animation:slot-batte .9s ease-out both}
.slot-conto span.via{font-size:30px;letter-spacing:.5px}
.slot-conto span.invito{animation:none;font-size:12.5px;font-weight:400;color:var(--tenue);
  line-height:1.45;max-width:44ch}
@keyframes slot-batte{0%{transform:scale(.4);opacity:0}25%{transform:scale(1.15);opacity:1}
  60%{transform:scale(1)}100%{transform:scale(1);opacity:.9}}
/* icona del popup: la slot in miniatura */
.spiegazione-icona.slot-icona{width:112px;height:60px}
.movimento-ridotto .slot-conto span,.movimento-ridotto .leva-pallino{animation:none}
.movimento-ridotto .leva-pallino,.movimento-ridotto .leva-pallino.giu{transition:none}
.slot-posto{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;justify-items:center}


/* --- impostazioni (public/js/impostazioni.js) ---
   La rotella: tasto tondo nella testata della pagina iniziale, pillola
   nel pannello sopra la griglia. La finestra: anteprima "Impostazioni di
   Stars" approvata il 10 ottobre 2026. */
.rotella{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.rotella svg,.pillola-rotella svg{width:21px;height:21px;transition:transform .35s ease}
.pillola-rotella svg{width:19px;height:19px}
.rotella:hover svg,.pillola-rotella:hover svg{transform:rotate(45deg)}
.pillola-rotella{padding:6px 12px;border:none;cursor:pointer}
@media (max-width:640px){.rotella{width:34px;height:34px}}

.opz-velo{position:fixed;inset:0;z-index:85;background:rgba(122,92,75,.35);display:flex;
  align-items:center;justify-content:center;padding:16px}
.opz-finestra{background:var(--carta);border-radius:18px;padding:20px 22px 18px;width:100%;max-width:360px;
  max-height:100%;overflow-y:auto;display:grid;gap:16px;animation:opz-apre .18s ease-out}
@keyframes opz-apre{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.movimento-ridotto .opz-finestra{animation:none}
.opz-testa{display:flex;align-items:center;justify-content:space-between;gap:10px}
.opz-testa h2{margin:0;font-size:19px;font-weight:600;display:flex;align-items:center;gap:8px}
.opz-testa h2 svg{width:20px;height:20px;color:var(--accento-scuro)}
.opz-chiudi{width:32px;height:32px;padding:0;font-size:18px;line-height:1}
.opz-voce{display:grid;gap:9px;padding-top:14px;border-top:1px solid var(--bordo)}
.opz-voce:first-of-type{border-top:none;padding-top:0}
.opz-riga{display:flex;align-items:center;justify-content:space-between;gap:12px}
.opz-nome{font-weight:600;font-size:15px}
.opz-nota{font-size:12.5px;color:var(--tenue);line-height:1.45;margin:0}

.opz-interruttore{position:relative;width:46px;height:27px;flex:none;border:none;padding:0;border-radius:999px;
  background:var(--neutro);transition:background .2s}
.opz-interruttore::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(122,92,75,.35);transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.opz-interruttore[aria-checked="true"]{background:var(--accento)}
.opz-interruttore[aria-checked="true"]::after{transform:translateX(19px)}
.opz-interruttore:focus-visible{outline:2px solid var(--accento-scuro);outline-offset:2px}

.opz-volume{display:flex;align-items:center;gap:10px}
.opz-volume>svg{width:18px;height:18px;flex:none;color:var(--tenue)}
.opz-volume output{min-width:38px;text-align:right;font-size:13px;color:var(--tenue);font-variant-numeric:tabular-nums}
.opz-volume.spenta{opacity:.4}
/* Il trattino a metà corsa segna il volume di sempre. */
.opz-cursore{position:relative;flex:1;display:flex;min-width:0}
.opz-cursore::before{content:"";position:absolute;left:calc(50% - 1px);top:-3px;width:2px;height:6px;
  border-radius:1px;background:var(--bordo)}
.opz-cursore input{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:28px;margin:0;
  background:transparent;cursor:pointer;touch-action:none;border:none;padding:0}
.opz-cursore input:disabled{cursor:default}
.opz-cursore input::-webkit-slider-runnable-track{height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--accento) 0 var(--v),var(--neutro) var(--v) 100%)}
.opz-cursore input::-moz-range-track{height:8px;border-radius:999px;background:var(--neutro)}
.opz-cursore input::-moz-range-progress{height:8px;border-radius:999px;background:var(--accento)}
.opz-cursore input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;
  border-radius:50%;background:#fff;border:3px solid var(--accento);box-shadow:0 1px 3px rgba(122,92,75,.3)}
.opz-cursore input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--accento)}
.opz-cursore input:focus,.opz-cursore input:focus-visible{outline:none}
.opz-cursore input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--accento-scuro);outline-offset:2px}

.opz-piede{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:14px;
  border-top:1px solid var(--bordo)}
.opz-ripristina{font-size:13.5px;display:inline-flex;align-items:center;gap:6px}
.opz-ripristina svg{width:15px;height:15px}