/* ============================================================================
   GIRA LE PAROLE — stile del gioco. Vanilla, niente framework CSS.
   Pensato per reggere da smartphone piccolo (375px) a schermo/TV (1280px+),
   tutto sullo stesso schermo (nessuna vista "a specchio" per altri device).
   ============================================================================ */

/* Terzo giro (28/09/2026), punto 18: "colori meno scuri" — sfondo, pannelli
   e bordo schiariti rispetto al blu-nero quasi illeggibile di prima. Restano
   scuri quel poco che serve a far risaltare i colori sopra (e` un gioco da
   guardare come una TV, non una pagina da leggere a lungo).
   Quinto giro, punto 23: ancora "troppo scuro" — lo sfondo era un blu
   notte (#1C2350). Ora e` un gradiente viola-blu decisamente piu` chiaro e
   piu` vivo (luminosita` relativa calcolata circa 4 volte quella di prima),
   ma resta abbastanza scuro perche` il testo bianco (--testo) ci si legga
   sopra senza cambiare colore ovunque (contrasto verificato, oltre 5:1 nel
   punto piu` chiaro del gradiente). I pannelli scuri (tabellone, schede
   giocatore, pulsanti) restano com'erano: su uno sfondo piu` chiaro
   risaltano ancora di piu`, non di meno. */
/* Nono giro, punto 47 (28/09/2026): caratteri gia` installati sul computer
   di Damiano (Linux Mint) — nessun download, il gioco resta offline.
   - "Ubuntu" (Canonical, Ubuntu Font Licence 1.0, variable font — pesi da
     Thin a Bold gia` presenti in un solo file) per titoli, la fascia della
     categoria, la cifra delle feste e le LETTERE DEL TABELLONE: e` un
     carattere geometrico e arrotondato, allegro senza essere infantile, e a
     peso alto (700-800) resta leggibile a un paio di metri, come chiesto.
   - "Lato" (Łukasz Dziedzic, licenza SIL Open Font License, gia` installato)
     per il testo normale (sottotitoli, nomi/soldi dei giocatori, pulsanti,
     pannelli): umanistico, molto leggibile anche a corpo piccolo, non
     compete visivamente con le lettere del tabellone.
   Entrambi hanno un fallback di sistema dopo, cosi` se un giorno il gioco
   girasse su un computer senza questi due font non si romperebbe nulla. */
:root {
  --font-titoli: "Ubuntu", "Liberation Sans", Arial, sans-serif;
  --font-testo: "Lato", "Noto Sans", "DejaVu Sans", Arial, sans-serif;

  --sfondo: #5B3E96;
  --sfondo-2: #2E6F9E;
  --sfondo-pannello: #2A3268;
  --bordo: #454F9C;
  --testo: #f5f6fb;
  --testo-attenuato: #c7cdf0;
  --accento: #F39C12;
  --verde: #2ECC71;
  --rosso: #FF6B5B;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(160deg, var(--sfondo), var(--sfondo-2));
  background-attachment: fixed;
  color: var(--testo);
  font-family: var(--font-testo);
  min-height: 100vh;
}

h1, .categoria, .cella-tabellone, .festa-cifra-wrap,
button.primario {
  font-family: var(--font-titoli);
}

.nascosta {
  display: none !important;
}

button {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  border: 2px solid var(--bordo);
  background: var(--sfondo-pannello);
  color: var(--testo);
  cursor: pointer;
  touch-action: manipulation;
}

button:hover:not(:disabled) {
  border-color: var(--accento);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

button.primario {
  background: var(--accento);
  color: #1a1a1a;
  border-color: var(--accento);
  font-weight: 700;
}

button.secondario {
  background: transparent;
}

/* ---------------------------------------------------------------------------
   Schermata di iscrizione
   --------------------------------------------------------------------------- */

.schermata {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.2rem;
}

h1 {
  text-align: center;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  margin-bottom: 0.2rem;
}

.sottotitolo {
  text-align: center;
  color: var(--testo-attenuato);
  margin-top: 0;
}

/* Settimo giro, secondo compito: crediti dei brani mp3, piccoli e discreti
   — non devono competere con nulla nella schermata di iscrizione. */
.crediti-musica {
  text-align: center;
  color: var(--testo-attenuato);
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 2rem;
}

.lista-giocatori {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 1.5rem 0;
}

.riga-giocatore {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
}

/* Undicesimo giro, punto 58, strada B (28/09/2026, scelta di Damiano: "la
   tessera con l'iniziale, moooolto carina"): non piu` un pallino colorato ne`
   un bottone che apre una scelta — la tessera bianca con la prima lettera
   del nome (aggiornata mentre si scrive, vedi l'ascoltatore su input in
   gioco.js) e l'anello del colore del giocatore la` dove prima c'era il
   pallino. Niente da cliccare: e` un elemento generato dal nome. */
.riga-giocatore .tessera-iniziale-iscrizione {
  width: 2rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #fff;
  color: #111;
  font: 800 1.3rem var(--font-titoli);
  outline: 3px solid var(--bordo);
  outline-offset: 3px;
  flex-shrink: 0;
}

.riga-giocatore input[type="text"] {
  flex: 1;
  font-size: 1.05rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--bordo);
  background: #0d1230;
  color: var(--testo);
}

.riga-giocatore .btn-rimuovi {
  background: transparent;
  border: none;
  color: var(--testo-attenuato);
  font-size: 1.3rem;
  padding: 0.2rem 0.5rem;
}

/* Undicesimo giro (28/09/2026): il pannello di scelta del disegnino e il suo
   bottone rotondo (Sesto giro, punto 27) non esistono piu` — strada B,
   niente da scegliere, vedi .tessera-iniziale-iscrizione qui sopra. */

.azioni-iscrizione {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.messaggio-errore {
  color: var(--rosso);
  text-align: center;
  min-height: 1.4em;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Schermata di gioco
   --------------------------------------------------------------------------- */

#schermata-gioco {
  max-width: 1100px;
}

/* Nono giro, punto 43 (28/09/2026): "un gioco da PC su schermo largo — metti
   su uno schermo un po` grande e fai tutto da li`". Da 1200px in su
   (comodamente sotto sia 1366 sia 1920, i due schermi da verificare) il
   contenitore smette di restare stretto — il blocco decimo giro IN FONDO A
   QUESTO FILE (dopo la media query mobile a 900px) fa il resto: deve stare
   li` e non qui, perche` in CSS a parita` di specificita` vince l'ULTIMA
   regola nell'ordine del file, non quella "logicamente" piu` specifica — se
   stesse qui, le regole base di .area-partita/.colonna-ruota piu` sotto in
   questo file lo sovrascriverebbero silenziosamente (bug trovato in verifica,
   28/09/2026: la griglia a tre colonne non si attivava affatto a 1366px). */

.intestazione-gioco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.pulsanti-audio {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
  position: relative; /* ancora il pannello-volume qui sotto */
}

/* Punto 36 (28/09/2026): pannello dei due cursori, aperto dal pulsante
   altoparlanti — piccolo, semplice, comodo da toccare per un bambino. */
.pannello-volume {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 5;
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 220px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.riga-volume {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
}

.riga-volume span {
  flex: 0 0 4.2rem;
}

.riga-volume input[type="range"] {
  flex: 1;
  height: 1.6rem;
  cursor: pointer;
}


/* Bilancia visivamente i due pulsanti audio a sinistra, cosi` la categoria
   (che deve essere il pezzo forte dell'intestazione, punto 13) resta
   centrata invece di essere spinta a destra. */
.spaziatore-intestazione {
  flex: 0 0 auto;
  width: 5.4rem;
}

/* Terzo giro, punto 13: "sembra un titoletto in alto a sinistra" — ora e`
   un cartello colorato al centro dell'intestazione, come la fascia della
   categoria in un programma TV. */
.categoria {
  flex: 1 1 auto;
  text-align: center;
  font-size: clamp(1.05rem, 3.6vw, 1.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  background: linear-gradient(180deg, #ffd76a, var(--accento));
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  /* 05/10/2026: la targa mostra l'indizio della frase, fino a ~40 caratteri
     (prima una categoria, poche parole). Non si tronca mai: se non sta su una
     riga va su due, bilanciate, dentro la colonna. */
  max-width: 100%;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* 2.4.1 (Damiano 07/10): «Cambia frase», piccolo e discreto, accanto alla targa.
   Sotto i 1200px sta sotto la targa; da 1200px in su sta alla sua destra (vedi il
   blocco dello schermo largo). Si vede solo prima che sia uscita una lettera
   (gioco.js, cambiaFrasePossibile: la classe .nascosta lo toglie). */
.riga-targa { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; }
.cambia-frase {
  align-self: center;
  font-size: 0.85rem; font-weight: 600;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--testo-attenuato);
  white-space: nowrap;
}
.cambia-frase:hover:not(:disabled) { color: var(--testo); border-color: var(--testo); }

/* La conferma della X (06/10/2026) */
.scheda-esci {
  background: var(--sfondo-pannello);
  border: 3px solid var(--accento);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  text-align: center;
  max-width: 340px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.scheda-esci p { margin: 0 0 1rem; font-size: 1.4rem; font-weight: 800; }
.scheda-esci .azioni-iscrizione { display: flex; gap: 0.8rem; justify-content: center; }
.scheda-esci button { font-size: 1.2rem; padding: 0.6rem 1.6rem; }
@media (min-width: 1200px) {
  .scheda-esci { max-width: none; padding: 3vh 4vh; border-radius: 2vh; }
  .scheda-esci p { font-size: 3.4vh; margin-bottom: 2.4vh; }
  .scheda-esci button { font-size: 2.8vh; padding: 1.4vh 4vh; }
}

.btn-muto {
  font-size: 1.2rem;
  padding: 0.4rem 0.6rem;
  border-radius: 50%;
}

/* Terzo giro, punto 12: "tabellone grande e presente, come in televisione,
   bello, colorato" — prima era piccolo, sfondo quasi nero, tono dimesso.
   Ora e` un pannello grande con cornice dorata e sfondo a gradiente.
   Nono giro, punto 45 (28/09/2026): "sempre rettangolare, grande, sempre
   uguale, fatto di una griglia di rettangolini" — il tabellone non e` piu`
   un flex che si allarga o restringe secondo la frase (vecchio
   `.parola-frase`/`.lettera-frase`, rimossi con questo giro): e` una griglia
   FISSA di RIGHE_TABELLONE.length righe, ognuna sempre larga
   LARGHEZZA_FISICA_TABELLONE caselle (config.js + gioco.js), qualunque sia
   la frase. Il max-width e` cresciuto rispetto al quarto giro (640px):
   schermo largo, tabellone piu` grande e presente. */
.tabellone-frase {
  width: 100%;
  max-width: 760px;
  margin: 1rem auto 1.3rem;
  background: linear-gradient(160deg, #10184a, #24306e);
  border: 5px solid var(--accento);
  border-radius: 16px;
  padding: 1rem 0.8rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 0 26px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 1vw, 0.5rem);
}

.riga-tabellone {
  display: flex;
  justify-content: center;
  gap: clamp(0.12rem, 0.4vw, 0.3rem);
}

.cella-tabellone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(0.85rem, 2.6vw, 2.5rem);
  aspect-ratio: 0.8;
  font-size: clamp(0.65rem, 2vw, 1.5rem);
  font-weight: 800;
  border-radius: 5px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* Le caselle "vuota" sono i margini che centrano una riga piu` corta
   dentro la larghezza fissa del tabellone, e lo spazio fra due parole —
   "restano spente" (punto 45): nessuno sfondo, nessun bordo, nessuna
   animazione, mai cliccabili. */
.cella-tabellone.vuota {
  background: transparent;
  box-shadow: none;
}

/* Quinto giro, punto 24: "caselle come in televisione" — coperte bianche
   vuote, accese gialle/arancioni (gia` cosi`, resta invariato: e` var(--accento)
   con la pulsazione, vedi .accesa sotto), scoperte bianche con la lettera
   nera. Prima "rivelata" era arancione col testo scuro: la stessa identica
   coppia di colori dello stato "accesa", che quindi non si distinguevano fra
   loro se non per la pulsazione. Ora coperta e scoperta sono bianche (si
   riconoscono perche` una e` vuota e l'altra ha la lettera), e la sola
   accesa resta colorata: e` esattamente il codice colore della ruota in TV. */
.cella-tabellone.rivelata {
  background: #ffffff;
  color: #1a1a1a;
}

/* "coperta", non "nascosta": quel nome collide con l'utility globale
   `.nascosta { display: none !important; }` qui sopra, usata per intere
   schermate e pannelli — vedi il commento in gioco.js dove si assegna
   questa classe. */
.cella-tabellone.coperta {
  background: #ffffff;
}

.cella-tabellone.non-alfabetica {
  background: transparent;
  box-shadow: none;
  color: var(--testo);
  font-weight: 400;
}

/* Terzo giro, punto 16: la casella "accesa" e` quella di una lettera gia`
   trovata, in attesa che il giocatore ci clicchi sopra per scoprirla —
   pulsa piano per farsi notare, ed e` chiaramente cliccabile. */
.cella-tabellone.accesa {
  background: var(--accento);
  color: #1a1a1a;
  cursor: pointer;
  box-shadow: 0 0 0 3px #fff, 0 0 12px 2px rgba(243, 156, 18, 0.8);
  animation: pulsa-casella-accesa 1s ease-in-out infinite;
}

.cella-tabellone.accesa:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@keyframes pulsa-casella-accesa {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.14);
  }
}

/* Punto 45, seconda parte (28/09/2026): "quando esce la frase si accendono
   le caselle dove andranno le lettere" — l'onda d'ingresso a inizio round
   (animaIngresso=true in disegnaTabellone, gioco.js imposta l'
   animation-delay cella per cella). Le caselle "vuota" non ricevono mai
   questa classe: restano spente e ferme, come chiesto. */
.cella-tabellone.appare {
  animation: cella-si-accende 0.38s ease-out both;
}

@keyframes cella-si-accende {
  0% {
    transform: scale(0.35);
    opacity: 0;
  }
  65% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Undicesimo giro, punto 56 (28/09/2026): la vecchia riga verde
   (.messaggio-gioco) è assorbita dal palco dell'annuncio (#annuncio, vedi il
   blocco @media(min-width:1200px) in fondo a questo file) — l'elemento non
   esiste più nel markup. */

/* Nono giro, punto 43-44 (28/09/2026): tre colonne — ruota, tabellone/comandi
   (colonna-centrale), tessere dei giocatori. Di default (sotto i 900px,
   telefono — "non e` piu` il riferimento, basta che non si rompa") restano
   impilate in colonna, nell'ordine del markup: ruota, poi tutto il centro,
   poi le tessere. Da 900px la ruota e le tessere tornano fianco a fianco
   come prima di questo giro, col centro sopra a tutta larghezza (vedi media
   query qui sotto). Da 1200px (schermo largo, i due target 1366/1920) le
   tre colonne stanno tutte sulla stessa riga, usando la larghezza vera
   dello schermo invece di una fascia centrale con i lati vuoti. */
.area-partita {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0;
}

.colonna-centrale {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0; /* permette alla riga piu` larga del tabellone di restringersi in un flex/grid item */
}

.colonna-ruota {
  position: relative;
  flex: 0 0 auto;
  width: min(420px, 90vw);
  margin: 0 auto;
}

/* Sesto giro, punto 28: "ruota piu` grande, usando lo spazio lasciato dalle
   tessere piu` corte" (vedi .colonna-giocatori qui sotto, ora larghezza
   fissa invece di allargarsi). Lo spazio liberato esiste solo quando la
   ruota e le tessere stanno sulla stessa riga — cioe` da 900px in su, la
   stessa soglia gia` usata per `.area-partita` (in flex, sopra i 900px) qui
   sotto. Sotto i 900px (telefono, tessere e ruota impilate) il vincolo
   restava il 90vw di prima: quello era gia` verificato non uscire dallo
   schermo a 375px, e allargarlo li` non avrebbe comunque spazio in piu` da
   prendere (le tessere impilate non "liberano" nulla in orizzontale). Il
   canvas interno e` stato portato da 420 a 620px di risoluzione vera (vedi
   gioco.html) cosi` anche a questa taglia piu` grande resta nitido:
   il browser puo` solo rimpicciolire un'immagine piu` grande, mai
   ingrandirla senza sgranarla. */
@media (min-width: 900px) {
  .colonna-ruota {
    width: min(560px, 90vw);
  }

  /* Livello intermedio (tablet, 900-1199px): il centro (tabellone e
     comandi) torna sopra a tutta larghezza, ruota e tessere tornano fianco
     a fianco sotto — la stessa disposizione che il gioco aveva prima di
     questo giro (nono, punto 43). L'ordine visivo (`order`) e` indipendente
     dall'ordine nel markup, che serve solo alla lettura del codice e alla
     disposizione impilata sotto i 900px. */
  .area-partita {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
  }

  .colonna-centrale {
    order: -1;
    flex: 1 1 100%;
  }

  .colonna-ruota {
    order: 0;
  }

  .colonna-giocatori {
    order: 1;
  }
}

/* Nono giro, punto 43-44: da 1200px in su la disposizione a tre colonne del
   decimo giro (disegno di Chiara) prende il posto di quella qui — vedi il
   grande blocco `@media (min-width: 1200px)` piu` in alto nel file (subito
   dopo `#schermata-gioco`), che sostituisce per intero questa regola
   (ruota a sinistra a piena altezza, tabellone al centro, giocatori in fila
   sotto — non piu` tre colonne fianco a fianco). Tenerne due sarebbe una
   seconda fonte della stessa cosa: si sarebbe rotta al primo ritocco fatto
   solo su una delle due. */

#canvas-ruota {
  width: 100%;
  height: auto;
  display: block;
  /* Punti 61-62 (29/09/2026): si afferra e si trascina, col mouse o col
     dito. touch-action:none toglie lo scroll/zoom di default del browser
     su schermo touch mentre si trascina la ruota (senza, un dito che
     scorre sulla ruota scrollerebbe la pagina invece di girarla). Il
     cursore cambia da "afferra" a "afferrata" mentre il gesto e` in corso
     (classe aggiunta/tolta da gioco.js). */
  touch-action: none;
  cursor: grab;
}

#canvas-ruota.trascinando {
  cursor: grabbing;
}

/* Quarto giro, punto 20: "una freccia piu` bella" — prima era un triangolo
   piatto in tinta unita (il trucco dei bordi CSS). Ora e` una forma a
   "gagliardetto" (rettangolino + punta) con un metallo dorato sfumato e
   un'ombra sotto, piu` vicina alla freccia rossa un po' scenografica delle
   ruote televisive; il forellino sopra imita il perno che la tiene ferma
   al bordo della ruota. */
.puntatore {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 40px;
  background: linear-gradient(180deg, #fff2c4 0%, #f3c531 30%, #c2860a 70%, #8a5c04 100%);
  clip-path: polygon(50% 100%, 8% 55%, 8% 12%, 92% 12%, 92% 55%);
  border-radius: 4px 4px 0 0;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.5));
}

.puntatore::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, #fff8e2, #b5790a 75%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Sesto giro, punto 26: "tessere piu` corte, larghezza fissa, circa la meta`
   di adesso". Prima la colonna cresceva liberamente (flex: 1 1 260px, fino
   a riempire tutto lo spazio lasciato libero dalla ruota, anche 350-400px
   su schermi larghi): ora e` un valore fisso e non cresce piu`, e lo spazio
   che prima prendeva va alla ruota (vedi .colonna-ruota qui sopra, punto
   28). Quando l'area centrale va a capo (sotto i 900px, tessere sotto la
   ruota) questa colonna non ha piu` un fratello a fianco: restando a
   larghezza fissa invece che a tutta larghezza, si centra da sola grazie al
   `justify-content: center` di .area-partita (nel livello intermedio, 900-1199px). */
.colonna-giocatori {
  flex: 0 0 170px;
  width: 170px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Terzo giro, punto 18: prima lo sfondo di ogni scheda era sempre lo stesso
   pannello scuro, uguale per tutti i giocatori. Ora lo sfondo e il bordo a
   sinistra vengono tinti in JS col colore del giocatore (vedi
   aggiornaSchedeGiocatori in gioco.js): qui restano solo le proprieta` che
   NON cambiano da persona a persona. */
/* Sesto giro, punto 26: tessera piu` stretta (vedi .colonna-giocatori) —
   contenuto impilato in colonna invece che in riga, cosi` il nome e i
   numeri hanno tutta la larghezza disponibile per andare a capo invece di
   schiacciarsi accanto all'immagine. */
.scheda-giocatore {
  border: 3px solid var(--bordo);
  border-left-width: 6px;
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  background: var(--sfondo-pannello);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  transition: background-color 0.2s ease;
}

.scheda-giocatore.turno-attivo {
  box-shadow: 0 0 0 3px #fff, 0 0 14px 2px var(--colore-giocatore, var(--accento));
}

/* Undicesimo giro, punto 58, strada B (28/09/2026, scelta di Damiano: "la
   tessera con l'iniziale, moooolto carina"): non piu` un disegnino ma la
   tessera bianca del tabellone con la prima lettera del nome — il colore
   del giocatore resta visibile nell'anello (outline, tinto in JS, vedi
   aggiornaSchedeGiocatori) e nel bordo-sinistro/sfondo della tessera qui
   sopra. */
.scheda-giocatore .tessera-giocatore {
  width: 2.3rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #fff;
  color: #111;
  font: 800 1.5rem var(--font-titoli);
  outline: 3px solid var(--bordo);
  outline-offset: 3px;
  flex-shrink: 0;
}

.scheda-giocatore .info-giocatore {
  width: 100%;
}

.scheda-giocatore .nome-giocatore {
  font-weight: 700;
}

/* I due conti: quello del round e` il numero "in gioco adesso" (piu grande,
   colore accento), il totale in cassaforte e` il numero "al sicuro" (piu
   piccolo, attenuato) — cosi si legge a colpo d'occhio quale dei due conta
   in questo momento. */
.scheda-giocatore .soldi-round-giocatore {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accento);
}

.scheda-giocatore .soldi-totale-giocatore {
  font-size: 0.95rem;
  color: var(--testo-attenuato);
}

/* Decimo giro (28/09/2026), disegno di Chiara, intervento 4: i jolly del
   giocatore diventano carte (niente piu` l'emoji 🃏, che su Linux usciva
   come un quadratino) — vedi .carta-jolly qui sotto. */
.scheda-giocatore .jolly-giocatore {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.scheda-giocatore .jolly-giocatore:empty {
  display: none;
}

.carta-jolly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.7rem;
  border-radius: 3px;
  background: #fff;
  color: #d3222a;
  border: 1.5px solid #d3222a;
  font: 800 1rem var(--font-titoli);
  transform: rotate(8deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.area-comandi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin: 1rem 0;
}

.pannello-scelta {
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem auto;
  max-width: 640px;
  text-align: center;
}

.griglia-lettere {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin: 0.6rem 0;
}

.griglia-lettere button {
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  font-weight: 700;
  font-size: 1.1rem;
}

#form-soluzione, #form-lampo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.6rem;
}

#input-soluzione, #input-lampo {
  flex: 1;
  min-width: 220px;
  font-size: 1.05rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--bordo);
  background: #0d1230;
  color: var(--testo);
}

#secondi-rimasti {
  font-weight: 700;
  color: var(--accento);
}

/* ---------------------------------------------------------------------------
   Punto 30 (28/09/2026): la festa di fine round.
   --------------------------------------------------------------------------- */

.overlay-festa {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 35, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

.scheda-festa {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 360px;
  background: linear-gradient(160deg, #2A3268, #10184a);
  border: 4px solid var(--accento);
  border-radius: 20px;
  padding: 1.6rem 1.4rem 1.4rem;
  text-align: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  animation: apparizione-festa 0.35s ease-out;
}

@keyframes apparizione-festa {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Undicesimo giro, punto 58, strada B (28/09/2026): la tessera con
   l'iniziale del vincitore, invece del disegnino — anello (outline) del
   colore del giocatore, tinto in JS (mostraFestaVittoria,
   mostraSchermataFinale). */
.festa-immagine {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 7.2rem;
  margin: 0 auto 0.5rem;
  border-radius: 12px;
  background: #fff;
  color: #111;
  font: 800 4rem var(--font-titoli);
  outline: 4px solid var(--accento);
  outline-offset: 4px;
  position: relative;
  z-index: 1;
}

.festa-nome {
  position: relative;
  z-index: 1;
  font-size: 1.4rem;
  font-weight: 800;
}

.festa-testo {
  position: relative;
  z-index: 1;
  color: var(--testo-attenuato);
  margin: 0.2rem 0 0.7rem;
}

.festa-cifra-wrap {
  position: relative;
  z-index: 1;
  font-size: clamp(2.1rem, 9vw, 3rem);
  font-weight: 800;
  color: var(--accento);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.festa-euro {
  font-size: 0.55em;
}

.festa-cassaforte {
  position: relative;
  z-index: 1;
  color: var(--testo-attenuato);
  margin-bottom: 1rem;
}

/* Le monete: un contenitore a tutta scheda, sotto al testo (z-index piu`
   basso, e pointer-events:none cosi` non intercettano il click sul
   bottone), dentro cui gioco.js aggiunge span "volanti" generati al volo. */
.festa-monete {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.moneta-festa {
  position: absolute;
  top: -2rem;
  animation-name: cade-moneta;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes cade-moneta {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(340px) rotate(360deg);
    opacity: 0;
  }
}

/* Punto 46 (28/09/2026, nono giro): scintille che esplodono dal centro —
   riusate sia qui (dentro .festa-monete, insieme alle monete) sia nei
   fuochi della schermata finale (vedi .overlay-fuochi-finale piu` sotto).
   --dx/--dy sono impostate da gioco.js (creaScintille), una direzione e una
   distanza diverse per ogni pallino. */
.particella-scintilla {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  animation: esplodi-scintilla 0.9s ease-out forwards;
}

/* Undicesimo giro, voce 6 (28/09/2026): prima il pallino rimpiccioliva e
   sfumava fin dal primo istante — ora resta pieno e a fuoco per il 70% del
   tragitto, e solo nell'ultimo tratto si spegne: "un botto", non un
   batuffolo che si consuma subito. */
@keyframes esplodi-scintilla {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  70% {
    transform: translate(var(--dx), var(--dy)) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.5);
    opacity: 0;
  }
}

#btn-chiudi-festa {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
   Punto 37 (28/09/2026, seconda dettatura) e punto 42 (nono giro): il
   messaggio grande al centro della zona di gioco è assorbito nel palco
   dell'annuncio, undicesimo giro (punto 56) — #overlay-messaggio-grande e
   .testo-messaggio-grande non esistono più nel markup. Lo stile del palco è
   nel blocco @media(min-width:1200px) in fondo a questo file.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Voce D, tredicesimo giro (29/09/2026, punto 64): con che frasi si gioca —
   stessa famiglia di forma delle opzioni dei round, con in piu` una
   casellina che si spunta: dice "se ne puo` scegliere piu` d'uno" senza
   scriverlo (le opzioni dei round, una sola, non ce l'hanno).
   --------------------------------------------------------------------------- */

.scelta-gruppi {
  text-align: center;
  margin: 0.4rem 0 0.2rem;
}

.scelta-gruppi > p:first-child {
  margin: 0 0 0.5rem;
}

.opzioni-gruppi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.opzione-gruppo {
  min-width: 7.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.opzione-gruppo::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 0.25rem;
  border: 2px solid var(--testo-attenuato);
  box-sizing: border-box;
  flex-shrink: 0;
}

.opzione-gruppo.selezionata {
  background: var(--accento);
  color: #1a1a1a;
  border-color: var(--accento);
  font-weight: 700;
}

.opzione-gruppo.selezionata::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: #1a1a1a;
  background: #1a1a1a;
  color: var(--accento);
  font: 900 0.75rem/1 sans-serif;
}

.opzione-gruppo.no {
  animation: gruppo-no 260ms ease-in-out;
}

@keyframes gruppo-no {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Il riquadro dell'errore, vuoto, occupava 38px: a 1366x768 con quattro
   giocatori spingeva i crediti della musica (CC BY, vanno visti) sotto il
   bordo dello schermo, dove non si scorre. */
#errore-iscrizione:empty {
  display: none;
}

.conta-frasi {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--testo-attenuato);
}

/* ---------------------------------------------------------------------------
   Punto 38 (28/09/2026, seconda dettatura): quanti round giocare, e
   l'indicatore "Round X di N" sempre visibile in partita.
   --------------------------------------------------------------------------- */

.scelta-round {
  text-align: center;
  margin: 0.8rem 0;
}

.opzioni-round {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.opzione-round {
  min-width: 3.4rem;
}

.opzione-round.selezionata {
  background: var(--accento);
  color: #1a1a1a;
  border-color: var(--accento);
  font-weight: 700;
}

.indicatore-round {
  text-align: center;
  font-weight: 700;
  color: var(--testo-attenuato);
  margin-top: 0.3rem;
}

/* Decimo giro (28/09/2026), disegno di Chiara, intervento 1/4: i round vinti
   diventano pallini nell'intestazione, al posto del testo "Round X di N"
   (che resta solo sotto i 1200px, vedi .indicatore-round sopra e la media
   query piu` sotto che nasconde .round-punti li` e lo mostra da 1200px). */
.round-punti {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

.round-punti .punto {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 0.85rem var(--font-titoli);
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
}

.round-punti .punto.vinto {
  border-color: transparent;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.round-punti .punto.corrente {
  border-color: #fff;
  color: #1a1a1a;
  background: var(--accento);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25), 0 0 8px rgba(243, 156, 18, 0.7);
}

/* Ruota pesante (05/10/2026, voce D della scheda di Chiara). La freccia e` la
   lamella: ruota attorno al perno di quanto e` piegata (--lamella, da -1 a 1,
   scritta da ruota.js a ogni fotogramma; positiva = ruota in senso orario).
   Correzione 2.4.1 (07/10/2026, Damiano: «se la ruota va in senso orario la
   freccina deve andare verso destra»): la punta sta SOTTO il perno, e in CSS
   rotate() positivo e` orario, quindi porta la punta a SINISTRA, contro i pioli
   (in cima alla ruota, in senso orario, i pioli vanno a destra). Per questo il
   moltiplicatore e` -14deg: ruota oraria = --lamella positiva = punta a destra;
   antioraria = punta a sinistra. Vale anche in mano (lamellaInMano, stesso segno).
   Sostituisce .puntatore.tic, .puntatore.tic-indietro e i due @keyframes. */
.puntatore {
  transform-origin: 50% 0;
  transform: translateX(-50%) rotate(calc(var(--lamella, 0) * -14deg));
}

/* Rilievo 6 (28/09/2026, disegno di Chiara): coriandoli a tutto schermo
   dietro la scheda della festa (vedi generaCoriandoliFesta in gioco.js) —
   base valida a qualunque larghezza, non solo da 1200px. */
.coriandoli {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.coriandolo {
  position: absolute;
  top: -3rem;
  width: 0.6rem;
  height: 1.1rem;
  border-radius: 2px;
  animation-name: cade-coriandolo;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes cade-coriandolo {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(120vh) rotate(var(--giri, 720deg));
    opacity: 0.9;
  }
}

/* ---------------------------------------------------------------------------
   Punto 39 (28/09/2026, seconda dettatura): classifica — pulsante a destra
   nell'intestazione, pannello a tendina come quello del volume (si apre con
   un tocco, cosi` a 375px non spinge ruota e tabellone fuori dallo schermo).
   --------------------------------------------------------------------------- */

.pulsanti-classifica {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
  position: relative;
}

.pannello-classifica {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 5;
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  min-width: 220px;
  max-width: min(320px, 80vw);
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.titolo-classifica {
  font-weight: 800;
  margin: 0.6rem 0 0.3rem;
  text-align: center;
}

.titolo-classifica:first-child {
  margin-top: 0;
}

.riga-classifica,
.riga-classifica-finale {
  border-left: 4px solid var(--accento);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  margin: 0.25rem 0;
  font-weight: 600;
}

.classifica-vuota {
  color: var(--testo-attenuato);
  text-align: center;
  font-size: 0.9rem;
  margin: 0.3rem 0;
}

/* ---------------------------------------------------------------------------
   Punto 46 (28/09/2026, nono giro): i fuochi d'artificio della vittoria
   finale — un contenitore a tutto schermo (fixed, dietro alla scheda del
   vincitore) dentro cui gioco.js (avviaFuochiFinale) apre qualche "botto" a
   posizioni casuali, sfalsati nel tempo, e li rimuove da solo appena finita
   la loro animazione. La schermata resta sobria a regime: i fuochi durano
   solo pochi secondi dopo l'arrivo qui, poi il contenitore resta vuoto.
   --------------------------------------------------------------------------- */

.overlay-fuochi-finale {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.botto-fuochi {
  position: absolute;
  width: 0;
  height: 0;
}

/* ---------------------------------------------------------------------------
   Schermata finale (punto 39): stessa scheda visiva della festa di fine
   round, ma dentro la pagina (non un overlay) — resta finché non si tocca
   un pulsante, non si chiude da sola.
   --------------------------------------------------------------------------- */

.scheda-finale-vincitore {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 360px;
  margin: 1rem auto;
  background: linear-gradient(160deg, #2A3268, #10184a);
  border: 4px solid var(--accento);
  border-radius: 20px;
  padding: 1.6rem 1.4rem 1.4rem;
  text-align: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}

.finale-classifica {
  max-width: 360px;
  margin: 0 auto 1rem;
}

/* ---------------------------------------------------------------------------
   Responsive: da 375px (telefono) a 1280px+ (TV/monitor)
   --------------------------------------------------------------------------- */


@media (min-width: 1200px) {
  html, body {
    height: 100%;
    overflow: hidden;
  }

  #schermata-gioco {
    max-width: none;
    height: 100vh;
    padding: 1.4vh 1.6vw 1.6vh;
    display: flex;
    flex-direction: column;
    gap: 1.2vh;
  }

  /* --- intestazione: volume | pallini dei round | classifica --- */
  .intestazione-gioco { height: 6vh; flex: 0 0 auto; }
  .btn-muto { font-size: 2.6vh; width: 5.2vh; height: 5.2vh; padding: 0; }
  .pannello-volume, .pannello-classifica { font-size: 2.2vh; min-width: 30vh; }

  .round-punti { gap: 1.2vh; }
  .round-punti .punto {
    width: 4.2vh; height: 4.2vh;
    border-width: 0.35vh;
    font-size: 2.2vh;
  }
  .round-punti .punto.corrente {
    box-shadow: 0 0 0 0.4vh rgba(255, 255, 255, 0.25), 0 0 2vh rgba(243, 156, 18, 0.7);
  }
  .indicatore-round { display: none; } /* sostituito dai pallini nell'intestazione */

  /* --- la griglia: ruota a sinistra su tutta l'altezza; a destra tabellone,
     poi la fila dei giocatori --- */
  .area-partita {
    flex: 1 1 auto; min-height: 0; margin: 0;
    display: grid;
    grid-template-columns: 80vh minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 2vw; row-gap: 1.6vh;
    align-items: start;
  }
  .colonna-ruota { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 80vh; max-width: 80vh; margin: 0; }
  .colonna-centrale { grid-column: 2; grid-row: 1; align-items: center; gap: 1.4vh; min-height: 0; }
  /* Punto 69, quattordicesimo giro (29/09/2026, disegno di Chiara): padding-top
     in piu` per fare posto alla tessera di turno che si alza (voce 1), e
     align-items:end cosi` le tessere restano ancorate in basso quando quella
     di turno cresce verso l'alto invece che dal centro. */
  .colonna-giocatori { grid-column: 2; grid-row: 2; width: 100%; flex-direction: row; justify-content: center; align-items: end; gap: 1.6vh; padding-top: 2.4vh; }

  .puntatore {
    top: -2.2vh; width: 5vh; height: 6.6vh;
    filter: drop-shadow(0 0.5vh 0.6vh rgba(0, 0, 0, 0.5));
  }
  .puntatore::after { top: 0.6vh; width: 1.3vh; height: 1.3vh; }

  /* --- il tabellone: griglia 12-14-14-12 su fondo magenta-viola, cornice
     bianca, riga nera fra le caselle (punto 50). Punto 54: piu` grande del
     prototipo di Chiara (--cella 5,6vh invece di 5vh, +12%) — verificato che
     ci sta senza schiacciare ruota ne` giocatori a 1366×768 (vedi rapporto). */
  /* 05/10/2026: --cella era solo in vh, ma la colonna centrale e` quello che
     resta della larghezza dopo la ruota (80vh) e i margini: a 1280x800 (16:10)
     restano 574px e il tabellone ne chiedeva 658, usciva di 22px a destra e
     finiva 16px sopra la ruota. Ora la cella e` la piu` piccola fra la misura
     in vh di prima e quella che ci sta in larghezza (94vw - ruota - cornice,
     diviso 14): dove prima ci stava (1366x768, 1920x1080) non cambia di un
     pixel. */
  .tabellone-frase {
    --cella: min(5.6vh, calc((94vw - 80vh - 3.9vh) / 14));
    width: auto; max-width: none; margin: 0;
    background: #0b0b1e;
    border: 0.55vh solid #fff;
    border-radius: 1.4vh;
    padding: 1.2vh 1.4vh;
    gap: 0;
    box-shadow: 0 0 0 0.3vh #ff3dcb, 0 0 2.6vh rgba(255, 61, 203, 0.55), 0 1.4vh 3.4vh rgba(0, 0, 0, 0.5);
  }
  .riga-tabellone {
    gap: 0;
    background: linear-gradient(90deg, #e0219f 0%, #b52bb0 45%, #7c2fb8 100%);
    margin: 0 auto;
    width: calc(14 * var(--cella));
  }
  .riga-tabellone.corta { width: calc(12 * var(--cella)); }
  .cella-tabellone {
    width: var(--cella); height: calc(var(--cella) * 1.28); aspect-ratio: auto;
    border: 0.3vh solid #0b0b1e; border-radius: 0.3vh;
    font-size: calc(var(--cella) * 0.78);
    box-shadow: none;
    background: transparent; /* "vuota": lascia vedere il magenta/viola della riga */
  }
  .cella-tabellone.vuota { background: transparent; box-shadow: none; }
  .cella-tabellone.coperta, .cella-tabellone.rivelata, .cella-tabellone.non-alfabetica {
    background: #fff; color: #111; font-weight: 800;
    box-shadow: inset 0 -0.35vh 0 rgba(0, 0, 0, 0.12);
  }
  /* Undicesimo giro, punto 56 (28/09/2026): le caselle si accendono UNA ALLA
     VOLTA dopo l'annuncio (come in TV, dove la valletta le tocca in fila),
     invece che tutte d'oro nello stesso istante — la k-esima a 350+k*90 ms.
     gioco.js numera le caselle accese con --ordine (numeraCaselleAccese()),
     nell'ordine del documento, come gia` fa per l'onda d'ingresso. */
  .cella-tabellone.accesa {
    background: #fff;
    color: #111;
    box-shadow: inset 0 -0.35vh 0 rgba(0, 0, 0, 0.12);
    animation:
      casella-si-accende 260ms ease-out both,
      pulsa-casella-accesa 1s ease-in-out infinite;
    animation-delay: calc(350ms + var(--ordine, 0) * 90ms), calc(650ms + var(--ordine, 0) * 90ms);
  }
  @keyframes casella-si-accende {
    0%   { background: #fff; box-shadow: inset 0 -0.35vh 0 rgba(0, 0, 0, 0.12); transform: scale(1); }
    55%  { transform: scale(1.18); }
    100% { background: #ffc233; box-shadow: 0 0 0 0.25vh #fff, 0 0 1.8vh 0.4vh rgba(255, 194, 51, 0.85); transform: scale(1); }
  }

  /* --- la categoria: sotto il tabellone, bianca, grande, a misura del testo --- */
  .categoria {
    flex: 0 0 auto; width: fit-content;
    font-size: 3.2vh; letter-spacing: 0.08em;
    padding: 0.7vh 3.2vh;
    background: #fff; color: #111;
    box-shadow: 0 0.4vh 0 rgba(0, 0, 0, 0.25);
  }
  /* 2.4.1: la targa resta al centro; «Cambia frase» sta alla sua destra, nella colonna
     che il grid le riserva (sempre, cosi` la targa non cambia quando il pulsante sparisce). */
  .riga-targa {
    display: grid; grid-template-columns: minmax(15vh, 1fr) auto minmax(15vh, 1fr);
    align-items: center; column-gap: 1.6vh; width: 100%; flex: 0 0 auto;
  }
  .riga-targa .categoria { grid-column: 2; max-width: 100%; }
  .cambia-frase {
    grid-column: 3; justify-self: start;
    font-size: max(1.8vh, 0.8rem); padding: 0.4vh 1.5vh; border-width: 0.2vh;
    color: rgba(255, 255, 255, 0.72);
  }

  /* -----------------------------------------------------------------------
     Punto 56, undicesimo giro (28/09/2026, disegno di Chiara): L'ANNUNCIO —
     il "palco", come se fosse Gerry Scotti a dirlo. Il posto e` la fascia
     della colonna centrale fra la categoria e le tessere dei giocatori, dove
     prima stavano la riga verde (.messaggio-gioco, non esiste piu`) e i tre
     comandi: quando c'e` un annuncio, comandi e pannelli spariscono (sono
     comunque disattivati in quel momento) e la colonna non cresce — le
     tessere dei giocatori non si spostano. Assorbe anche il messaggio grande
     di prima (punto 37/42): un solo posto dove guardare.
     ----------------------------------------------------------------------- */
  .annuncio { display: none; }
  .colonna-centrale.con-annuncio .area-comandi,
  .colonna-centrale.con-annuncio .pannello-scelta { display: none; }
  .colonna-centrale.con-annuncio .annuncio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.6vh;
    min-height: 16vh;
    padding: 0 2vh;
    text-align: left;
  }

  /* la tessera con la lettera: la stessa tessera bianca del tabellone, ma
     grande come una carta da gioco */
  .annuncio-tessera {
    flex: 0 0 auto;
    width: 11vh; height: 14vh;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #111;
    border: 0.4vh solid #0b0b1e; border-radius: 1vh;
    font: 800 9.4vh/1 var(--font-titoli);
    box-shadow: inset 0 -0.7vh 0 rgba(0, 0, 0, 0.12), 0 1.2vh 2.6vh rgba(0, 0, 0, 0.45);
  }
  /* "non c'e`": la tessera si tinge di rosa, la lettera di rosso */
  .annuncio.no .annuncio-tessera { background: #ffe1e1; color: #c62828; }

  .annuncio-testo { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .annuncio-titolo {
    font: 800 6.4vh/1.05 var(--font-titoli);
    color: #fff;
    letter-spacing: -0.01em;
    text-shadow: 0 0.4vh 0 rgba(0, 0, 0, 0.35), 0 0 3vh rgba(255, 255, 255, 0.22);
  }
  .annuncio-sotto {
    margin-top: 0.8vh;
    font: 800 4.6vh/1.1 var(--font-titoli);
    color: var(--accento);
    text-shadow: 0 0.3vh 0 rgba(0, 0, 0, 0.35);
  }
  /* la riga sotto quando dice solo a chi tocca: piccola, attenuata */
  .annuncio.no .annuncio-sotto,
  .annuncio.scena .annuncio-sotto { font: 700 2.8vh/1.2 "Lato", sans-serif; color: var(--testo-attenuato); text-shadow: none; }

  /* le "scene" senza tessera: Passa, Bancarotta, tempo scaduto, consonanti finite... */
  .annuncio.scena { text-align: center; }
  .annuncio.scena .annuncio-testo { align-items: center; }
  .annuncio.scena .annuncio-titolo { font-size: 8vh; }
  .annuncio.scena.rosso .annuncio-titolo { color: #ff6b6b; text-shadow: 0 0.4vh 0 rgba(0, 0, 0, 0.4), 0 0 3.5vh rgba(255, 80, 80, 0.5); }
  .annuncio.scena.oro .annuncio-titolo { color: var(--accento); text-shadow: 0 0.4vh 0 rgba(0, 0, 0, 0.4), 0 0 3.5vh rgba(243, 156, 18, 0.55); }
  /* Voce C, tredicesimo giro (29/09/2026): l'annuncio del cambio di round —
     "Round N" in oro. Dalla 2.4 sotto non c'e` piu` «la ruota vale di piu`»:
     ci sono le pillole degli speciali (vedi in fondo a questo file). */

  /* Punto 69, quattordicesimo giro (29/09/2026, disegno di Chiara): il
     secondo tempo dell'annuncio, «Tocca a» — la tessera del giocatore
     (bianca, iniziale nera, anello del suo colore, come nella fila e nella
     festa), grande come la tessera della lettera; a destra «Tocca a»
     piccolo e il nome grande, bianco con l'alone del suo colore. */
  .annuncio.tocca { text-align: left; }
  .annuncio.tocca .annuncio-tessera {
    background: #fff; color: #111; border-color: #0b0b1e;
    outline: 0.6vh solid var(--colore-giocatore, var(--accento)); outline-offset: 0.5vh;
    box-shadow: inset 0 -0.7vh 0 rgba(0, 0, 0, 0.12), 0 0 4vh 0.4vh var(--colore-giocatore, transparent), 0 1.2vh 2.6vh rgba(0, 0, 0, 0.45);
  }
  .annuncio.tocca .annuncio-sopra {
    font: 700 3.4vh/1.1 var(--font-titoli);
    color: var(--testo-attenuato);
    letter-spacing: 0.04em;
    text-shadow: 0 0.2vh 0 rgba(0, 0, 0, 0.3);
  }
  .annuncio.tocca .annuncio-titolo {
    margin-top: 0.4vh;
    font-size: 8vh;
    color: #fff;
    text-shadow: 0 0.4vh 0 rgba(0, 0, 0, 0.35), 0 0 4vh var(--colore-giocatore, transparent);
    overflow-wrap: anywhere;
  }
  /* nome lungo (piu` di 12 lettere): scende cosi` sta su una riga anche a
     1366×768, vedi gioco.js Annuncio.mostra. */
  .annuncio.tocca.lungo .annuncio-titolo { font-size: 5.2vh; line-height: 1.1; }

  /* --- l'entrata: la tessera cade dall'alto e rimbalza (380 ms), il testo la
     segue da sinistra (260 ms, parte a 140 ms); le scene si gonfiano (320 ms) --- */
  .annuncio.entra .annuncio-tessera { animation: annuncio-tessera-cade 380ms cubic-bezier(0.2, 1.5, 0.4, 1) both; }
  @keyframes annuncio-tessera-cade {
    0%   { transform: translateY(-5vh) scale(0.55) rotate(-10deg); opacity: 0; }
    60%  { transform: translateY(0.4vh) scale(1.08) rotate(2deg); opacity: 1; }
    100% { transform: none; opacity: 1; }
  }
  .annuncio.entra .annuncio-testo { animation: annuncio-testo-entra 260ms ease-out 140ms both; }
  @keyframes annuncio-testo-entra {
    from { opacity: 0; transform: translateX(-2vh); }
    to   { opacity: 1; transform: none; }
  }
  .annuncio.scena.entra .annuncio-testo { animation: annuncio-scena-entra 320ms cubic-bezier(0.2, 1.5, 0.4, 1) both; }
  @keyframes annuncio-scena-entra {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: none; }
  }
  /* --- l'uscita: 220 ms, sale e sfuma --- */
  .annuncio.esce { animation: annuncio-esce 220ms ease-in both; }
  @keyframes annuncio-esce { to { opacity: 0; transform: translateY(-1.5vh); } }

  .area-comandi { margin: 0; gap: 1.4vh; }
  /* quando un riquadro e` aperto prende il posto dei comandi (punto 51): non
     si impila sotto, la colonna non cresce e le tessere dei giocatori non
     si spostano. */
  .colonna-centrale:has(.pannello-scelta:not(.nascosta)) .area-comandi { display: none; }
  .area-comandi button, .pannello-scelta button.primario, .pannello-scelta button.secondario, #form-soluzione button, #form-lampo button {
    font-size: 2.6vh; padding: 1.3vh 2.8vh; border-radius: 1.2vh; border-width: 0.3vh;
  }

  /* --- il riquadro delle lettere (punto 51): stesse tessere bianche del
     tabellone, due file (11 vocali+consonanti / 10) --- */
  .pannello-scelta { background: transparent; border: none; padding: 0; margin: 0; max-width: none; }
  .pannello-scelta > p { font-size: 2.6vh; font-weight: 700; margin: 0 0 1vh; }
  /* Punto 56: la cifra dello spicchio (prima nella riga verde) va nel titolo
     del riquadro delle consonanti — "1.000 € a lettera · scegli una
     consonante" (gioco.js, impostaTitoloConsonanti). */
  .pannello-scelta > p b { color: var(--accento); font-weight: 800; }
  .griglia-lettere { gap: 0.8vh; max-width: calc(11 * 5.2vh + 10 * 0.8vh); margin: 0 auto 1vh; }
  .griglia-lettere button {
    width: 5.2vh; height: 6vh; border: none; border-radius: 0.7vh;
    background: #fff; color: #111;
    font: 800 3.4vh var(--font-titoli);
    box-shadow: 0 0.45vh 0 #b9b9c9, 0 0.9vh 1.8vh rgba(0, 0, 0, 0.35);
    transition: transform 90ms ease-out, box-shadow 90ms ease-out;
  }
  .griglia-lettere button:hover:not(:disabled) { transform: translateY(-0.3vh); box-shadow: 0 0.75vh 0 #b9b9c9, 0 1.2vh 2vh rgba(0, 0, 0, 0.4); border-color: transparent; }
  #pannello-jolly p, #pannello-soluzione p, #pannello-fine-round p, #pannello-lampo p { font-size: 2.6vh; }
  #input-soluzione, #input-lampo { font-size: 2.6vh; padding: 1vh 1.6vh; min-width: 44vh; }
  #secondi-rimasti { font-size: 3.4vh; }

  /* --- le tessere dei giocatori: una fila, un numero grande ciascuna,
     niente testo tagliato --- */
  .scheda-giocatore {
    position: relative;
    flex: 1 1 0; max-width: 30vh; min-width: 0;
    padding: 1.1vh 1.3vh 1vh; border-radius: 1.4vh;
    border-width: 0.3vh; border-left-width: 0.8vh;
    display: grid; grid-template-columns: 5.4vh minmax(0, 1fr); column-gap: 1vh; row-gap: 0.2vh;
    align-items: center; text-align: left;
    transition: transform 260ms ease-out, opacity 260ms ease-out, box-shadow 260ms ease-out;
  }
  /* Voce 4 della scheda dell'undicesimo giro: 5,4vh × 6,4vh, lettera 3,6vh. */
  .scheda-giocatore .tessera-giocatore {
    grid-column: 1; grid-row: 1;
    width: 5.4vh; height: 6.4vh;
    font-size: 3.6vh;
    border-radius: 0.8vh;
    outline-width: 0.35vh;
    outline-offset: 0.35vh;
  }
  .scheda-giocatore .info-giocatore { display: contents; }
  .scheda-giocatore .nome-giocatore { grid-column: 2; grid-row: 1; font-size: 2vh; line-height: 1.1; overflow-wrap: anywhere; }
  .scheda-giocatore .soldi-round-giocatore { grid-column: 1 / -1; font: 800 3.9vh/1.05 var(--font-titoli); color: #fff; letter-spacing: -0.01em; white-space: nowrap; }
  .scheda-giocatore .soldi-round-giocatore .euro { font-size: 0.55em; color: var(--accento); margin-left: 0.2em; }
  .scheda-giocatore .soldi-totale-giocatore { grid-column: 1 / -1; font-size: 1.8vh; color: var(--testo-attenuato); white-space: nowrap; }
  .scheda-giocatore .soldi-totale-giocatore b { color: var(--testo); font-weight: 700; }
  .scheda-giocatore .jolly-giocatore { position: absolute; top: -1.2vh; right: 0.8vh; gap: 0.3vh; }
  .carta-jolly {
    width: 2.4vh; height: 3.2vh; border-radius: 0.35vh;
    border-width: 0.15vh;
    font-size: 1.8vh;
    box-shadow: 0 0.2vh 0.4vh rgba(0, 0, 0, 0.35);
  }
  /* Punto 69, quattordicesimo giro (29/09/2026, disegno di Chiara): una
     tessera avanti, tre indietro — chi non e` di turno si sbiadisce
     (OPACITA_GIOCATORE_NON_DI_TURNO in config.js, letta in --opacita-non-turno,
     vedi gioco.js) e rimpicciolisce del 6%, restando leggibile. */
  .scheda-giocatore:not(.turno-attivo) {
    opacity: var(--opacita-non-turno, 0.55);
    transform: scale(0.94);
  }
  .scheda-giocatore.turno-attivo {
    opacity: 1;
    transform: translateY(-1.2vh) scale(1.08);
    box-shadow: 0 0 0 0.5vh #fff, 0 0 3vh 0.3vh var(--colore-giocatore, var(--accento)), 0 1.6vh 3vh rgba(0, 0, 0, 0.45);
    animation: turno-respira 1.8s ease-in-out infinite;
  }
  /* l'alone respira: da 3vh a 5,5vh di sfumato, avanti e indietro in 1,8s */
  @keyframes turno-respira {
    0%, 100% { box-shadow: 0 0 0 0.5vh #fff, 0 0 3vh 0.3vh var(--colore-giocatore, var(--accento)), 0 1.6vh 3vh rgba(0, 0, 0, 0.45); }
    50%      { box-shadow: 0 0 0 0.5vh #fff, 0 0 5.5vh 1.4vh var(--colore-giocatore, var(--accento)), 0 1.6vh 3vh rgba(0, 0, 0, 0.45); }
  }
  .scheda-giocatore.turno-attivo .tessera-giocatore { outline-width: 0.55vh; outline-offset: 0.3vh; }

  /* la tessera che entra in turno: un balzo di 600ms (classe messa dal JS
     SOLO quando l'indice del giocatore e` appena cambiato, vedi gioco.js
     aggiornaSchedeGiocatori), poi il respiro riprende da solo. */
  .scheda-giocatore.turno-attivo.entra-in-turno {
    animation: turno-entra 600ms cubic-bezier(0.2, 1.4, 0.4, 1) both, turno-respira 1.8s ease-in-out 600ms infinite;
  }
  @keyframes turno-entra {
    0%   { transform: translateY(0) scale(0.94); opacity: var(--opacita-non-turno, 0.55); }
    60%  { transform: translateY(-2.2vh) scale(1.18); opacity: 1; }
    100% { transform: translateY(-1.2vh) scale(1.08); opacity: 1; }
  }

  /* --- la festa di fine round: grande quanto lo schermo merita --- */
  .scheda-festa { max-width: 58vh; padding: 3vh 3vh 2.6vh; border-width: 0.5vh; border-radius: 2.4vh; }
  /* Voce 4 della scheda dell'undicesimo giro: 11vh × 13,5vh, lettera 8vh. */
  .festa-immagine { width: 11vh; height: 13.5vh; font-size: 8vh; border-radius: 1.4vh; outline-width: 0.35vh; outline-offset: 0.35vh; margin-bottom: 1vh; }
  .festa-nome { font-size: 4.2vh; }
  .festa-testo { font-size: 2.6vh; }
  .festa-cifra-wrap { font-size: 9.5vh; line-height: 1.05; }
  .festa-cassaforte { font-size: 2.4vh; margin-bottom: 1.6vh; }
  .particella-scintilla { width: 1.5vh; height: 1.5vh; margin: -0.75vh; animation-duration: 1.4s; }
  .moneta-festa { font-size: 3.6vh !important; }
  #btn-chiudi-festa { font-size: 2.4vh; padding: 1.2vh 3vh; }

  .coriandolo { width: 1.4vh; height: 2.6vh; top: -4vh; }

  /* --- schermata finale --- */
  #schermata-finale { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vh; max-width: none; }
  #schermata-finale h1 { font-size: 7vh; line-height: 1; margin: 0; }
  .scheda-finale-vincitore { max-width: 62vh; margin: 0; padding: 3vh; border-width: 0.5vh; border-radius: 2.4vh; flex-shrink: 0; }
  /* 05/10/2026: la scheda ha overflow:hidden, quindi in una colonna flex a
     altezza fissa il suo minimo e` 0 e si faceva schiacciare, tagliando la
     cifra. Non si schiaccia piu`: e` la classifica a cedere, non la cifra. */
  /* ...e il posto che la scheda ora pretende si recupera dai vuoti sotto la
     classifica (margini in rem pensati per la pagina che scorre), non dalla
     scheda: a 1280x800 col premio di casa servono ~80px. */
  .finale-classifica { margin-bottom: 0; }
  #schermata-finale .crediti-musica { margin: 0; }
  #schermata-finale .azioni-iscrizione { margin: 0; }
  .titolo-classifica { font-size: 2.8vh; margin: 0.6vh 0 0; }
  .finale-classifica { max-width: 62vh; width: 62vh; }
  .riga-classifica-finale { font-size: 2.6vh; padding: 0.8vh 1.6vh; border-left-width: 0.7vh; }
  #schermata-finale .azioni-iscrizione button { font-size: 2.6vh; padding: 1.3vh 3vh; }
  #schermata-finale .particella-scintilla { width: 1.9vh; height: 1.9vh; animation-duration: 1.6s; }
}

@media (max-width: 480px) {
  .area-comandi button {
    flex: 1 1 100%;
  }
}

/* ============================================================================
   GIRO A (29/09/2026, disegno di Chiara — `design/2026-09-29-scheda-otto-
   idee.md`): l'iscrizione per lo schermo largo, l'aiutino, le squadre, il
   premio di casa nella finale, la versione/novità, la mini guida. Codice
   copiato dal prototipo `design/prototipi/2026-09-29-otto-idee/proposta.css`
   (sezioni 1 e 3), meno tutto quello che riguarda il round lampo e la frase
   premio (Giro B, non ancora costruito).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. ISCRIZIONE — a ogni larghezza
   --------------------------------------------------------------------------- */
.testata-iscrizione { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.testata-iscrizione h1 { text-align: left; margin: 0; }
.testata-iscrizione .sottotitolo { text-align: left; margin: 0; }
.porte-iscrizione { display: flex; gap: 0.6rem; }
/* «Come si gioca» (05/10/2026, disegno di Chiara — design/2026-10-05-scheda-novita-e-guida.md):
   pillola bianca piena con il «?» in un cerchio scuro. La classe apri-guida (non l'id: la pillola sta anche nella schermata della scelta, 08/10/2026) vince su .porte-iscrizione button. */
.porte-iscrizione .apri-guida {
  display: inline-flex; align-items: center; gap: 0.55em;
  background: #ffffff; color: #1a1a1a;
  border: none; border-radius: 999px;
  font-weight: 700; white-space: nowrap;
  padding: 0.55em 1.1em 0.55em 0.6em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: transform 140ms ease-out, box-shadow 140ms ease-out;
}
.porte-iscrizione .apri-guida::before {
  content: "?";
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--sfondo-pannello); color: #ffffff;
  font: 800 1em var(--font-titoli); line-height: 1;
}
.porte-iscrizione .apri-guida:hover:not(:disabled) { border-color: transparent; transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0, 0, 0, 0.34); }
.porte-iscrizione .apri-guida:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.corpo-iscrizione { display: grid; gap: 1.2rem; margin: 1rem 0; }
.blocco-chi-gioca h2, .blocco-stasera h2 { font: 700 1.1rem var(--font-titoli); margin: 0 0 0.6rem; color: var(--testo-attenuato); letter-spacing: 0.04em; text-transform: uppercase; }
.riga-titolo-blocco { display: flex; align-items: center; justify-content: flex-start; gap: 1.4rem; margin-bottom: 0.6rem; }
.riga-titolo-blocco h2 { margin: 0; }

/* i due segmenti «Ognuno per sé | A squadre»: un solo pezzo, la parte accesa è piena */
.segmenti { display: inline-flex; background: var(--sfondo-pannello); border: 2px solid var(--bordo); border-radius: 999px; padding: 3px; }
.segmento { border: none; background: transparent; border-radius: 999px; padding: 0.4rem 1rem; font-weight: 700; color: var(--testo-attenuato); }
.segmento.selezionata { background: #fff; color: #111; }

/* le tessere dei giocatori: stessa famiglia della scheda in partita */
.tessere-iscrizione { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin: 0; }
.tessera-iscrizione {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.9rem 0.8rem 0.8rem;
  background: var(--sfondo-pannello);
  border: 3px solid var(--bordo); border-top-width: 8px; border-top-color: var(--colore-giocatore, var(--bordo));
  border-radius: 12px;
}
.tessera-iscrizione .tessera-iniziale-iscrizione { width: 3.4rem; height: 4.1rem; font-size: 2.3rem; border-radius: 8px; }
.tessera-iscrizione input[type="text"] {
  width: 100%; text-align: center;
  font: 700 1.1rem var(--font-testo);
  padding: 0.45rem 0.5rem; border-radius: 8px; border: 1px solid var(--bordo);
  background: #0d1230; color: var(--testo);
}
.tessera-iscrizione input[type="text"]::placeholder { color: #6a72a8; font-weight: 400; }
.tessera-iscrizione .btn-rimuovi { position: absolute; top: 0.15rem; right: 0.3rem; background: transparent; border: none; color: var(--testo-attenuato); font-size: 1rem; padding: 0.2rem 0.4rem; opacity: 0.7; }
.tessera-iscrizione .btn-rimuovi:hover { opacity: 1; color: #fff; }

/* il posto vuoto: è il pulsante «aggiungi», un tocco */
.tessera-vuota {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.2rem;
  min-height: 9rem;
  border: 3px dashed var(--bordo); border-radius: 12px; background: transparent;
  color: var(--testo-attenuato); font: 700 1rem var(--font-testo); cursor: pointer;
}
.tessera-vuota b { font: 300 2.6rem/1 var(--font-titoli); }
.tessera-vuota:hover { border-color: var(--accento); color: var(--testo); }

/* l'interruttore dell'aiutino, e quello del lampo: una leva, non una casella */
.interruttore { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; }
.interruttore input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruttore .leva { position: relative; width: 2.3rem; height: 1.3rem; border-radius: 999px; background: #0d1230; border: 2px solid var(--bordo); transition: background-color 140ms ease-out, border-color 140ms ease-out; flex-shrink: 0; }
.interruttore .leva::after { content: ""; position: absolute; top: 0.1rem; left: 0.1rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--testo-attenuato); transition: transform 140ms ease-out, background-color 140ms ease-out; }
.interruttore input:checked + .leva { background: var(--accento); border-color: var(--accento); }
.interruttore input:checked + .leva::after { transform: translateX(1rem); background: #1a1a1a; }
.interruttore input:focus-visible + .leva { outline: 2px solid #fff; outline-offset: 2px; }
.interruttore .testo-interruttore { font-weight: 700; }
.interruttore .testo-interruttore small { display: block; font-weight: 400; color: var(--testo-attenuato); font-size: 0.8em; }
.tessera-iscrizione .interruttore { font-size: 0.9rem; }
.tessera-iscrizione .interruttore .testo-interruttore { font-weight: 600; color: var(--testo-attenuato); }
.tessera-iscrizione .interruttore input:checked ~ .testo-interruttore { color: var(--testo); }

/* a squadre: due tessere larghe, dentro i componenti */
.tessere-iscrizione.squadre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tessera-squadra .componenti { width: 100%; display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.2rem; }
.tessera-squadra .componente { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.tessera-squadra .componente .tessera-iniziale-iscrizione { width: 1.7rem; height: 2rem; font-size: 1.05rem; outline-width: 2px; outline-offset: 2px; border-radius: 4px; }
.tessera-squadra .componente input[type="text"] { text-align: left; font-weight: 600; font-size: 1rem; padding: 0.35rem 0.5rem; }
.tessera-squadra .componente .interruttore { font-size: 0.85rem; }
.tessera-squadra .componente .interruttore .testo-interruttore { display: none; }
.tessera-squadra .componente .interruttore .leva { width: 2rem; height: 1.15rem; }
.tessera-squadra .componente .interruttore input:checked + .leva::after { transform: translateX(0.8rem); }

/* la colonna «Stasera» */
.blocco-stasera .scelta-gruppi, .blocco-stasera .scelta-round { text-align: left; margin: 0 0 0.9rem; }
.blocco-stasera .scelta-gruppi > p:first-child, .blocco-stasera .scelta-round > p { margin: 0 0 0.4rem; font-weight: 700; }
.blocco-stasera .opzioni-gruppi, .blocco-stasera .opzioni-round { justify-content: flex-start; }
.blocco-stasera .conta-frasi { text-align: left; }
.opzione-gruppo.nostre.selezionata { background: #fff; border-color: #fff; }
.opzione-gruppo small { font-weight: 400; opacity: 0.8; }
.scelta-extra { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.4rem; }
.campo-premio { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 700; }
.campo-premio input { font: 1rem var(--font-testo); padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--bordo); background: #0d1230; color: var(--testo); }
.campo-premio input::placeholder { color: #6a72a8; }

button.primario.grande { font-size: 1.25rem; padding: 0.9rem 2.6rem; }

/* il piede: crediti a sinistra, versione + guida + novità a destra */
.pie-iscrizione { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.4rem; }
.pie-iscrizione .crediti-musica { margin: 0; text-align: left; }
.versione-e-novita { margin: 0; font-size: 0.75rem; color: var(--testo-attenuato); opacity: 0.85; display: flex; gap: 0.9rem; align-items: baseline; }
.versione-e-novita .versione { opacity: 0.8; }
button.link { background: none; border: none; padding: 0; color: var(--testo-attenuato); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; position: relative; }
button.link:hover { color: #fff; }
.pallino-nuovo { display: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--accento); margin-right: 0.35em; vertical-align: middle; box-shadow: 0 0 0 2px rgba(243,156,18,0.35); }
.pallino-nuovo.acceso { display: inline-block; }

/* le finestre (novità, guida): stessa scheda scura della festa, sopra a tutto */
.finestra { position: fixed; inset: 0; z-index: 60; background: rgba(10, 12, 40, 0.72); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.scheda-finestra { width: min(100%, 560px); max-height: 90vh; overflow: auto; background: linear-gradient(160deg, #2A3268, #10184a); border: 3px solid var(--bordo); border-radius: 18px; padding: 1.4rem 1.6rem; box-shadow: 0 12px 34px rgba(0,0,0,0.5); }
.scheda-finestra h2 { font: 800 1.6rem var(--font-titoli); margin: 0 0 0.8rem; }
.scheda-finestra .primario { margin-top: 1rem; }
.elenco-novita .versione-novita { margin: 0 0 1rem; }
.elenco-novita h3 { font: 800 1.1rem var(--font-titoli); margin: 0 0 0.3rem; display: flex; gap: 0.6rem; align-items: baseline; }
.elenco-novita h3 small { font: 400 0.8rem var(--font-testo); color: var(--testo-attenuato); }
.elenco-novita ul { margin: 0; padding-left: 1.1rem; }
.elenco-novita li { margin: 0.2rem 0; }
.elenco-novita .novita-in-arrivo { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px dashed var(--bordo); }
.elenco-novita .novita-in-arrivo h3 { color: var(--testo-attenuato); }
.elenco-novita .novita-in-arrivo li { color: var(--testo-attenuato); }

/* Le finestre arrivano (220 ms) invece di apparire: l'animazione riparte da sola
   ogni volta che la finestra passa da nascosta a visibile (apertura da sola o clic). */
.scheda-finestra { animation: arriva-finestra 220ms ease-out both; }
@keyframes arriva-finestra {
  from { opacity: 0; transform: translateY(1.2vh) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .scheda-finestra { animation: none; } }

/* Novità aperte da sole: solo le versioni non ancora viste (classe messa da gioco.js),
   «Tutte le novità» le riporta. Scorre solo l'elenco: titolo e pulsanti stanno fermi,
   «Chiudi» è sempre in vista. */
.elenco-novita .versione-novita.gia-vista { display: none; }
#finestra-novita .scheda-finestra { display: flex; flex-direction: column; overflow: hidden; }
#finestra-novita .elenco-novita { flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 0.6rem; scrollbar-color: var(--bordo) transparent; }
/* il rientro dei pallini segue il carattere della voce (1.1rem fissi li tagliavano a 1080p) */
#finestra-novita .elenco-novita ul { padding-left: 0; }
#finestra-novita .elenco-novita li { margin-left: 1.25em; }
#finestra-novita .azioni-finestra { flex: 0 0 auto; padding-top: 1rem; border-top: 1px solid var(--bordo); }
.azioni-finestra { display: flex; align-items: center; gap: 1.4rem; margin-top: 1rem; }
.azioni-finestra .primario { margin-top: 0; }
#btn-tutte-novita { display: none; margin: 0.6rem 0 0; padding: 0; background: none; border: none; color: var(--testo-attenuato); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
#btn-tutte-novita.visibile { display: inline-block; }
#btn-tutte-novita:hover { color: #fff; border-color: transparent; }
.elenco-guida { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem 1rem; align-items: center; }
.elenco-guida .esempio { justify-self: stretch; display: flex; justify-content: center; }
.elenco-guida .esempio button, .elenco-guida .esempio .tessera-guida { pointer-events: none; font-size: 0.85rem; padding: 0.4rem 0.8rem; }
.elenco-guida .esempio .tessera-guida { width: 2rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; background: #fff; color: #111; font: 800 1.2rem var(--font-titoli); border-radius: 5px; outline: 2px solid var(--accento); outline-offset: 2px; padding: 0; }
.elenco-guida .voce b { display: block; }
.elenco-guida .voce { font-size: 0.95rem; line-height: 1.3; }
/* La guida del Percorso (13/10/2026): sette regole numerate e la riga di chi vince. Il numero e` un cerchio nel colore d'accento. */
.guida-percorso ol { list-style: none; counter-reset: regola; margin: 0; padding: 0; display: grid; gap: 0.7rem 1.4rem; }
.guida-percorso li { counter-increment: regola; position: relative; padding-left: 2.4rem; font-size: 0.95rem; line-height: 1.3; }
.guida-percorso li::before { content: counter(regola); position: absolute; left: 0; top: 0.05em; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accento); color: #111; font: 800 1rem/1.7rem var(--font-titoli); text-align: center; }
.guida-percorso li b { color: #fff; }
.guida-percorso .vittoria-guida { margin: 0.9rem 0 0; font: 700 1rem/1.3 var(--font-titoli); color: var(--accento); text-align: center; }

/* ---------------------------------------------------------------------------
   2. IN PARTITA — aiutino, squadre (a ogni larghezza)
   --------------------------------------------------------------------------- */
button.aiutino { background: var(--sfondo-pannello); color: #fff; border-color: #fff; font-weight: 700; }
button.aiutino:disabled { opacity: 0.35; }
.scheda-giocatore .segno-aiutino { font-size: 0.75rem; color: var(--testo-attenuato); }
.scheda-giocatore .segno-aiutino.usato { opacity: 0.4; text-decoration: line-through; }
/* le caselle da scegliere con l'aiutino: le coperte respirano */
.tabellone-frase.scegli-casella .cella-tabellone.coperta { cursor: pointer; animation: respira-casella 1.1s ease-in-out infinite; }
@keyframes respira-casella { 50% { box-shadow: 0 0 0 3px #fff, 0 0 14px 3px rgba(255, 194, 51, 0.7); } }

/* premio di casa nella finale: un nastro sotto la cassaforte */
.premio-casa { margin: 0.8rem -1.4rem -1.4rem; padding: 0.7rem 1rem 0.9rem; background: var(--accento); color: #1a1a1a; border-radius: 0 0 16px 16px; }
.premio-casa small { display: block; font-weight: 600; opacity: 0.75; font-size: 0.85rem; }
.premio-casa b { display: block; font: 800 1.5rem/1.1 var(--font-titoli); }

/* a squadre in partita: i componenti sotto il nome, chi ha la mano è acceso */
.scheda-giocatore .componenti-squadra { display: flex; gap: 0.25rem; }
.scheda-giocatore .componenti-squadra .mini { width: 1.3rem; height: 1.6rem; border-radius: 3px; background: #fff; color: #111; font: 800 0.9rem/1.6rem var(--font-titoli); text-align: center; opacity: 0.45; }
.scheda-giocatore .componenti-squadra .mini.in-mano { opacity: 1; outline: 2px solid #fff; outline-offset: 1px; }

/* ---------------------------------------------------------------------------
   3. DA 1200px IN SU — l'iscrizione riempie lo schermo 16:9, niente scorrimento
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  #schermata-iscrizione.iscrizione-larga {
    max-width: none; height: 100vh; padding: 3vh 4vw 2vh;
    display: flex; flex-direction: column; gap: 0;
  }
  .testata-iscrizione { flex: 0 0 auto; }
  .testata-iscrizione h1 { font-size: 6.4vh; line-height: 1; }
  .testata-iscrizione .sottotitolo { font-size: 1.9vh; margin-top: 0.6vh; max-width: 60vw; line-height: 1.3; }
  .porte-iscrizione { gap: 1.2vh; }
  .porte-iscrizione button { font-size: 2.2vh; padding: 1.1vh 2.4vh; border-radius: 1.2vh; border-width: 0.25vh; }

  .corpo-iscrizione { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 4vw; margin: 2vh 0 0; align-content: center; align-items: start; }
  .blocco-chi-gioca h2, .blocco-stasera h2 { font-size: 2vh; margin-bottom: 1.4vh; }
  .riga-titolo-blocco { margin-bottom: 1.8vh; gap: 3vh; }
  .segmenti { padding: 0.4vh; border-width: 0.25vh; }
  .segmento { font-size: 2vh; padding: 0.8vh 2.2vh; }

  .tessere-iscrizione { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6vh; }
  .tessera-iscrizione { padding: 3vh 1.6vh 2.4vh; gap: 1.8vh; border-radius: 1.8vh; border-width: 0.3vh; border-top-width: 1.1vh; }
  .tessera-iscrizione .tessera-iniziale-iscrizione { width: 11vh; height: 13.2vh; font-size: 7.4vh; border-radius: 1.3vh; outline-width: 0.45vh; outline-offset: 0.45vh; }
  .tessera-iscrizione input[type="text"] { font-size: 2.6vh; padding: 1.1vh 1vh; border-radius: 1vh; }
  .tessera-iscrizione .btn-rimuovi { top: 0.4vh; right: 0.8vh; font-size: 2vh; }
  .tessera-vuota { min-height: 0; align-self: stretch; border-width: 0.3vh; border-radius: 1.8vh; font-size: 2.2vh; }
  .tessera-vuota b { font-size: 6vh; }
  .interruttore { gap: 1vh; }
  .interruttore .leva { width: 5vh; height: 2.8vh; border-width: 0.25vh; }
  .interruttore .leva::after { top: 0.2vh; left: 0.2vh; width: 1.9vh; height: 1.9vh; }
  .interruttore input:checked + .leva::after { transform: translateX(2.2vh); }
  .tessera-iscrizione .interruttore { font-size: 2vh; }
  .interruttore .testo-interruttore { font-size: 2.2vh; }

  .tessere-iscrizione.squadre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4vh; }
  .tessera-squadra .componenti { gap: 1vh; margin-top: 0.6vh; }
  .tessera-squadra .componente { gap: 1vh; }
  .tessera-squadra .componente .tessera-iniziale-iscrizione { width: 4vh; height: 4.8vh; font-size: 2.6vh; outline-width: 0.25vh; outline-offset: 0.25vh; border-radius: 0.5vh; }
  .tessera-squadra .componente input[type="text"] { font-size: 2.1vh; padding: 0.7vh 1vh; }
  .tessera-squadra .componente .interruttore .leva { width: 4.2vh; height: 2.4vh; }
  .tessera-squadra .componente .interruttore .leva::after { width: 1.6vh; height: 1.6vh; }
  .tessera-squadra .componente .interruttore input:checked + .leva::after { transform: translateX(1.8vh); }

  .blocco-stasera .scelta-gruppi, .blocco-stasera .scelta-round { margin-bottom: 2.4vh; }
  .blocco-stasera .scelta-gruppi > p:first-child, .blocco-stasera .scelta-round > p { font-size: 2.2vh; margin-bottom: 0.9vh; }
  .blocco-stasera .opzioni-gruppi { gap: 1vh; }
  .blocco-stasera .opzione-gruppo { font-size: 2vh; padding: 1vh 1.8vh; min-width: 0; border-radius: 1.1vh; gap: 0.8vh; }
  .blocco-stasera .opzione-gruppo::before { width: 2vh; height: 2vh; font-size: 1.4vh; border-radius: 0.4vh; }
  .blocco-stasera .conta-frasi { font-size: 1.8vh; margin-top: 0.7vh; }
  .blocco-stasera .opzioni-round { gap: 1vh; }
  .blocco-stasera .opzione-round { font-size: 2vh; padding: 1vh 2.2vh; border-radius: 1.1vh; }
  .scelta-extra { gap: 2vh; margin-top: 0.4vh; }
  .campo-premio { gap: 0.7vh; font-size: 2.2vh; }
  .campo-premio input { font-size: 2.1vh; padding: 1vh 1.2vh; border-radius: 1vh; max-width: 46vh; }

  .azioni-iscrizione { flex: 0 0 auto; margin: 2vh 0 0; }
  button.primario.grande { font-size: 3.2vh; padding: 1.8vh 7vh; border-radius: 1.6vh; box-shadow: 0 0.8vh 2.4vh rgba(243, 156, 18, 0.35); }
  #errore-iscrizione:empty { display: none; }
  .pie-iscrizione { margin-top: auto; padding-top: 1.6vh; }
  .pie-iscrizione .crediti-musica, .versione-e-novita { font-size: 1.6vh; }
  .versione-e-novita { gap: 2vh; }

  .scheda-finestra { width: min(100%, 72vh); padding: 3vh 3.4vh; border-radius: 2.2vh; }
  .scheda-finestra h2 { font-size: 4vh; }
  .scheda-finestra .primario { font-size: 2.4vh; padding: 1.2vh 3vh; }
  .elenco-novita h3 { font-size: 2.6vh; }
  .elenco-novita h3 small { font-size: 1.8vh; }
  .elenco-novita li, .elenco-guida .voce { font-size: 2.2vh; }
  .scheda-finestra.guida { width: min(100%, 150vh); }
  .porte-iscrizione .apri-guida { font-size: 2.7vh; padding: 1.15vh 2.6vh 1.15vh 1.3vh; gap: 1.2vh; box-shadow: 0 0.5vh 1.6vh rgba(0, 0, 0, 0.28); }
  .porte-iscrizione .apri-guida::before { width: 3.9vh; height: 3.9vh; font-size: 2.6vh; }
  .porte-iscrizione .apri-guida:hover:not(:disabled) { transform: translateY(-0.25vh); box-shadow: 0 0.8vh 2.2vh rgba(0, 0, 0, 0.34); }
  .azioni-finestra { gap: 3vh; margin-top: 2vh; }
  #btn-tutte-novita { font-size: 2vh; margin: 0; }
  .elenco-guida { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 2vh 2.2vh; }
  .elenco-guida .voce { font-size: 2.1vh; }
  /* controllo di Chiara 08/10 (rilievo 6): se l'ultima voce resta sola in fondo (voci dispari), la sua riga si allarga a tutta la larghezza: meno righe di testo, la guida a 1366 non scorre */
  .elenco-guida .voce:last-child:nth-child(4n + 2) { grid-column: 2 / -1; }
  .elenco-guida .esempio button { font-size: 1.9vh; padding: 0.8vh 1.6vh; }
  .elenco-guida .esempio .tessera-guida { width: 4vh; height: 4.8vh; font-size: 2.6vh; }
  /* guida del Percorso: due colonne di sette voci che si distribuiscono da sole, la riga di chi vince sotto a tutta larghezza; a 1366x768 non scorre */
  .guida-percorso ol { display: block; column-count: 2; column-gap: 4vh; }
  .guida-percorso li { padding-left: 5.2vh; font-size: 2.1vh; break-inside: avoid; margin: 0 0 1.8vh; }
  .guida-percorso li::before { width: 3.8vh; height: 3.8vh; font-size: 2.3vh; line-height: 3.8vh; }
  .guida-percorso .vittoria-guida { margin-top: 2vh; font-size: 2.6vh; }

  /* in partita */
  .scheda-giocatore .segno-aiutino { grid-column: 1 / -1; font-size: 1.6vh; }
  .scheda-giocatore .componenti-squadra { grid-column: 2; grid-row: 2; gap: 0.5vh; }
  .scheda-giocatore .componenti-squadra .mini { width: 2.6vh; height: 3.2vh; font-size: 1.8vh; line-height: 3.2vh; border-radius: 0.4vh; }
  .premio-casa { margin: 2vh -3vh -3vh; padding: 1.4vh 2vh 1.8vh; border-radius: 0 0 2vh 2vh; }
  .premio-casa small { font-size: 2vh; }
  .premio-casa b { font-size: 3.6vh; }
}

/* ---------------------------------------------------------------------------
   4. IL ROUND LAMPO (giro B, voce B1, 05/10/2026) — disegno di Chiara
   (design/2026-09-29-scheda-otto-idee.md), senza il tasto numerato sulla
   tessera: dal 05/10 ci si prenota con un tocco o un tasto qualunque (Damiano).
   --------------------------------------------------------------------------- */
.area-partita.lampo .colonna-ruota { opacity: 0.35; filter: saturate(0.6); transition: opacity 300ms ease-out; pointer-events: none; }
.area-partita.lampo .area-comandi { display: none; }

/* Nessuno e` di turno: le tessere tornano tutte allo stato normale. Piu`
   specifico di .scheda-giocatore:not(.turno-attivo) del blocco da 1200px. */
.area-partita.lampo .scheda-giocatore:not(.turno-attivo) { opacity: 1; transform: none; }
/* ferme le lettere, tocca all'arbitro: le tessere chiamano */
.area-partita.lampo-scelta .scheda-giocatore:not(.fuori) { cursor: pointer; animation: tessera-chiama 1.4s ease-in-out infinite; }
@keyframes tessera-chiama { 50% { transform: translateY(-0.3vh); } }
.area-partita.lampo .scheda-giocatore.prenotato { animation: none; transform: translateY(-0.6vh); box-shadow: 0 0 0 3px #fff, 0 0 22px 4px var(--colore-giocatore), 0 8px 18px rgba(0, 0, 0, 0.4); }
.area-partita.lampo .scheda-giocatore.fuori { animation: none; opacity: 0.4; filter: grayscale(0.7); cursor: default; }
.area-partita.lampo .scheda-giocatore.fuori .nome-giocatore::after { content: " ✕"; color: #ff8a8a; }

/* la lettera che si accende da sola: la casella salta */
.cella-tabellone.lampo-accesa { animation: lampo-lettera 320ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes lampo-lettera { 0% { transform: scale(0.6); background: #ffc233; } 100% { transform: none; } }

/* chi risponde: la casella e la barra del tempo che si consuma (la durata la
   scrive lampo.js da LAMPO_SECONDI) */
.pannello-lampo p { margin: 0 0 0.6rem; }
.barra-tempo-lampo { position: relative; height: 0.8rem; margin: 0.7rem auto 0; max-width: min(44vh, calc(100% - 7rem)); background: #0d1230; border-radius: 999px; overflow: visible; }
.barra-tempo-lampo .riempimento { height: 100%; width: 100%; border-radius: 999px; background: var(--accento); transform-origin: left center; animation: consuma-tempo 15s linear forwards; }
.barra-tempo-lampo .secondi-lampo { position: absolute; right: -2.8rem; top: 50%; transform: translateY(-50%); font: 800 1.4rem var(--font-titoli); color: var(--accento); }
@keyframes consuma-tempo { to { transform: scaleX(0); } }

@media (min-width: 1200px) {
  .area-partita.lampo .scheda-giocatore.prenotato { box-shadow: 0 0 0 0.4vh #fff, 0 0 3vh 0.4vh var(--colore-giocatore), 0 1.2vh 2.4vh rgba(0, 0, 0, 0.4); }
  .barra-tempo-lampo { height: 1.6vh; margin-top: 1.6vh; max-width: 44vh; }
  .barra-tempo-lampo .secondi-lampo { right: -6vh; font-size: 3.4vh; }
}

/* ============================================================================
   GLI SPICCHI SPECIALI (2.4) — disegno di Chiara, 06/10/2026
   (design/2026-10-06-scheda-spicchi-speciali.md, voce D): i cartelli sul
   palco, il pannello dell'Express, le pillole del cambio di round, lo Scudo
   sulla tessera. --speciale e --speciale-scuro li imposta gioco.js all'avvio
   da COLORE_SPECIALE e COLORE_SPECIALE_SCURO (config.js): la fonte e` una.
   ============================================================================ */

/* Il simbolo di uno speciale come <svg> dentro al testo: prende il colore
   dal contenitore (currentColor), si misura in em come una lettera. */
.simbolo-speciale {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.12em;
  fill: currentColor; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.simbolo-speciale text { font: 800 92px var(--font-titoli); fill: currentColor; stroke: none; }

/* La pillola: simbolo + nome. Nel cartello «Round N» e nella guida. */
.pillola-speciale {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.22em 0.8em 0.22em 0.55em;
  border-radius: 999px;
  background: #fff; color: var(--speciale-scuro);
  font: 800 1em/1 var(--font-titoli);
  box-shadow: 0 0.15em 0 rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.pillola-speciale .simbolo-speciale { font-size: 1.2em; }

/* Lo Scudo tenuto: accanto alle carte Jolly sulla tessera del giocatore,
   stessa misura della carta, bianco col simbolo verde-azzurro. */
.carta-scudo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.9rem; border-radius: 4px;
  background: #fff; color: var(--speciale-scuro);
  border: 1px solid #0b0b1e; font-size: 1rem;
}
/* quando scatta: si gonfia e sparisce (600 ms), mentre il palco lo dice */
.carta-scudo.scatta { animation: scudo-scatta 600ms ease-in both; }
@keyframes scudo-scatta {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(0.2); opacity: 0; }
}

/* Nella guida: le quattro pillole piccole una sotto l'altra */
.elenco-guida .esempio .pillole-guida { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
.elenco-guida .esempio .pillole-guida .pillola-speciale { font-size: 0.72rem; }

/* Express: la scelta (come il pannello del Jolly) */
.pannello-express p b { color: var(--accento); font-weight: 800; }
.pannello-express .scelte { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.pannello-express button.primario,
.pannello-consonanti.express .fascia-express { background: var(--speciale); border-color: var(--speciale-scuro); color: #fff; }


/* Express: la fascia e le altre due mosse si vedono solo mentre si gioca l'Express */
.pannello-consonanti:not(.express) .fascia-express,
.pannello-consonanti:not(.express) .altre-mosse { display: none; }

/* Express: mentre si gioca, la fascia in testa al pannello delle consonanti */
.fascia-express {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 0 auto 0.6rem; padding: 0.4rem 1.2rem; width: fit-content;
  border-radius: 999px;
  font: 800 1.1rem/1 var(--font-titoli);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}
.fascia-express .simbolo-speciale { font-size: 1.2em; }
.fascia-express .conto { font: 700 0.9rem/1 var(--font-testo); color: #e0f2f1; }
.fascia-express .conto b { color: #fff; font-weight: 800; }
.pannello-consonanti.express .altre-mosse { display: flex; gap: 0.6rem; justify-content: center; margin-top: 0.6rem; }

/* ---- Quante? (2.5, disegno di Chiara 07/10/2026, design/prototipi/2026-10-07-quante/proposta.css) ---- */
/* Quante?: la fascia in testa al pannello e` la stessa dell'Express (stesso
   elemento, stesso colore di classe); si accende con la classe «quante». Le
   altre mosse (Vocale, Do la soluzione) restano nascoste: non e` l'Express. */
.pannello-consonanti.quante .fascia-express {
  display: flex;
  background: var(--speciale); border-color: var(--speciale-scuro); color: #fff;
}
.pannello-consonanti.quante .altre-mosse { display: none; }

/* La lettera detta e la fila dei numeri: prende il posto della griglia delle
   consonanti, nella stessa riga, senza finestra in piu`. */
.scelta-quante {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin: 0.6rem auto;
}
/* la lettera appena toccata: la stessa tessera bianca delle consonanti, con
   l'anello dell'accento, perche' si veda che e` lei la domanda */
.scelta-quante .lettera-detta {
  display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 6px;
  background: #fff; color: #111; font: 800 1.1rem var(--font-titoli);
  outline: 3px solid var(--accento); outline-offset: 3px;
}
.scelta-quante .separatore { width: 2px; height: 2rem; margin: 0 0.5rem; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
/* i numeri: tondi, bianchi, stessa ombra delle tessere delle lettere: sono
   una scelta dello stesso peso, con un'altra forma perche' non sono lettere */
.scelta-quante button.numero {
  width: 2.6rem; height: 2.6rem; padding: 0; border: none; border-radius: 50%;
  background: #fff; color: #111; font: 800 1.1rem var(--font-titoli);
  min-height: 0;
}
.scelta-quante button.numero small { font: 800 0.7em/1 var(--font-titoli); vertical-align: 0.2em; }
/* la griglia delle lettere va via in 120 ms, i numeri entrano col rimbalzo di sempre */
.griglia-lettere.via { animation: griglia-via 120ms ease-in both; pointer-events: none; }
@keyframes griglia-via { to { opacity: 0; transform: scale(0.92); } }
.scelta-quante.entra button.numero { animation: numero-entra 220ms cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.scelta-quante.entra button.numero:nth-of-type(2) { animation-delay: 30ms; }
.scelta-quante.entra button.numero:nth-of-type(3) { animation-delay: 60ms; }
.scelta-quante.entra button.numero:nth-of-type(4) { animation-delay: 90ms; }
.scelta-quante.entra button.numero:nth-of-type(5) { animation-delay: 120ms; }
.scelta-quante.entra button.numero:nth-of-type(6) { animation-delay: 150ms; }
@keyframes numero-entra { from { opacity: 0; transform: translateY(0.6rem) scale(0.6); } to { opacity: 1; transform: none; } }

/* Il cartello del doppio: la tessera della lettera diventa d'oro (la stessa
   carta d'oro del Mistero «1.000 € a lettera»), con l'anello dell'accento. */
.annuncio.doppio .annuncio-tessera {
  background: linear-gradient(160deg, #fff2c4, #f3c531 55%, #c2860a); color: #3a2a00;
  outline: 3px solid var(--accento); outline-offset: 3px;
}

@media (min-width: 1200px) {
  .carta-scudo {
    width: 2.4vh; height: 3.2vh; border-radius: 0.35vh; border-width: 0.15vh;
    font-size: 2vh; box-shadow: 0 0.2vh 0.4vh rgba(0, 0, 0, 0.35);
  }

  /* --- il cartello di uno speciale: la tessera porta il simbolo, non una lettera --- */
  .annuncio.speciale .annuncio-tessera { color: var(--speciale-scuro); font-size: 8.4vh; }
  .annuncio.speciale .annuncio-sotto {
    font: 700 2.8vh/1.25 var(--font-testo); color: var(--testo-attenuato); text-shadow: none;
  }
  .annuncio.speciale .annuncio-sotto b { color: #fff; }
  .annuncio.speciale .annuncio-sotto .simbolo-speciale { color: #4db6ac; }

  /* --- «Round N»: sotto il titolo, le due pillole di questo round --- */
  .annuncio.round .annuncio-pillole {
    display: flex; align-items: center; gap: 1.4vh; margin-top: 1.2vh; font-size: 3.2vh;
  }
  .annuncio.round .annuncio-pillole .etichetta {
    font: 700 2.6vh/1 var(--font-testo); color: var(--testo-attenuato); margin-right: 0.4vh;
  }
  .annuncio.round.entra .annuncio-pillole .pillola-speciale { animation: pillola-entra 320ms cubic-bezier(0.2, 1.5, 0.4, 1) both; }
  .annuncio.round.entra .annuncio-pillole .pillola-speciale:nth-child(3) { animation-delay: 120ms; }
  @keyframes pillola-entra { from { opacity: 0; transform: translateY(1.2vh) scale(0.8); } to { opacity: 1; transform: none; } }

  /* --- Mistero: la carta col «?» si gira e mostra cosa c'era sotto --- */
  .annuncio.mistero .annuncio-tessera { backface-visibility: hidden; }
  .annuncio.mistero.gira .annuncio-tessera { animation: carta-gira var(--mistero-gira-ms, 800ms) ease-in-out both; } /* valore in config.js (DURATA_MISTERO_GIRA_MS) */
  @keyframes carta-gira {
    0%   { transform: rotateY(0); }
    50%  { transform: rotateY(90deg); }
    100% { transform: rotateY(0); }
  }
  .annuncio.mistero .annuncio-tessera.esito { font: 800 3vh/1.1 var(--font-titoli); text-align: center; padding: 0 0.6vh; }
  .annuncio.mistero .annuncio-tessera.esito.soldi { background: linear-gradient(160deg, #fff2c4, #f3c531 55%, #c2860a); color: #3a2a00; }
  .annuncio.mistero .annuncio-tessera.esito.passa { background: #F7F3E8; color: #20233A; }
  .annuncio.mistero .annuncio-tessera.esito.regalo { background: var(--speciale); color: #fff; }

  /* --- Robin Hood: la tessera di chi e` in testa, la pedina che passa, la tua --- */
  .annuncio.robin { gap: 2vh; }
  .annuncio.robin .tessere-robin { display: flex; align-items: center; gap: 1vh; flex: 0 0 auto; }
  .annuncio.robin .annuncio-tessera {
    width: 9vh; height: 11.5vh; font-size: 7.4vh; color: #111;
    outline: 0.5vh solid var(--colore-giocatore, var(--accento)); outline-offset: 0.4vh;
    box-shadow: inset 0 -0.7vh 0 rgba(0, 0, 0, 0.12), 0 0 3vh 0.2vh var(--colore-giocatore, transparent), 0 1.2vh 2.6vh rgba(0, 0, 0, 0.45);
  }
  .annuncio.robin .tragitto { position: relative; width: 13vh; height: 5vh; margin: 0 0.8vh; }
  .annuncio.robin .tragitto::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.4vh; margin-top: -0.2vh;
    background: rgba(255, 255, 255, 0.35); border-radius: 1vh;
  }
  .annuncio.robin .pedina {
    position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); z-index: 1;
    padding: 0.7vh 1.3vh; border-radius: 999px;
    background: var(--accento); color: #1a1a1a;
    font: 800 2.6vh/1 var(--font-titoli); white-space: nowrap;
    box-shadow: 0 0.3vh 0 rgba(0, 0, 0, 0.3);
  }
  .annuncio.robin.entra .pedina { animation: pedina-passa var(--robin-pedina-ms, 1100ms) cubic-bezier(0.4, 0, 0.2, 1) var(--robin-pedina-ritardo, 300ms) both; } /* valori in config.js (ROBIN_HOOD_PEDINA_*) */
  @keyframes pedina-passa { from { left: 0; } to { left: 100%; } }
  .annuncio.robin.ferma .pedina { left: 50%; } /* se sei tu in testa: niente passa, la pedina resta in mezzo, spenta */
  .annuncio.robin.ferma .pedina { background: rgba(255, 255, 255, 0.25); color: var(--testo-attenuato); }

  /* --- Express --- */
  .pannello-express p { font-size: 2.6vh; }
  .pannello-express .scelte { gap: 1.4vh; }
  .fascia-express { margin-bottom: 1vh; padding: 0.6vh 2vh; font-size: 2.6vh; box-shadow: 0 0.3vh 0 rgba(0, 0, 0, 0.3); gap: 1.6vh; }
  .fascia-express .conto { font-size: 2.2vh; }
  .pannello-consonanti.express .altre-mosse { gap: 1.2vh; margin-top: 1vh; }

  /* ---- Quante? (2.5): la fila dei numeri e il cartello del doppio, misure in vh ---- */
  .scelta-quante { gap: 0.8vh; margin: 0 auto 1vh; }
  .scelta-quante .lettera-detta {
    width: 5.2vh; height: 6vh; border-radius: 0.7vh; font-size: 3.4vh;
    outline-width: 0.5vh; outline-offset: 0.4vh;
    box-shadow: 0 0.45vh 0 #b9b9c9, 0 0.9vh 1.8vh rgba(0, 0, 0, 0.35);
  }
  .scelta-quante .separatore { width: 0.3vh; height: 4.6vh; margin: 0 1vh; }
  .scelta-quante button.numero {
    width: 6vh; height: 6vh; font-size: 3.2vh;
    box-shadow: 0 0.45vh 0 #b9b9c9, 0 0.9vh 1.8vh rgba(0, 0, 0, 0.35);
    transition: transform 90ms ease-out, box-shadow 90ms ease-out;
  }
  .scelta-quante button.numero:hover { transform: translateY(-0.3vh); box-shadow: 0 0.75vh 0 #b9b9c9, 0 1.2vh 2vh rgba(0, 0, 0, 0.4); }
  @keyframes numero-entra { from { opacity: 0; transform: translateY(1.2vh) scale(0.6); } to { opacity: 1; transform: none; } }

  .annuncio.doppio .annuncio-tessera {
    outline-width: 0.5vh; outline-offset: 0.4vh;
    box-shadow: inset 0 -0.7vh 0 rgba(0, 0, 0, 0.12), 0 0 3vh 0.3vh rgba(243, 156, 18, 0.55), 0 1.2vh 2.6vh rgba(0, 0, 0, 0.45);
  }
  /* la riga sotto del doppio: la frase in bianco, la cifra in oro come sempre */
  .annuncio.doppio .annuncio-sotto { color: #fff; }
  .annuncio.doppio .annuncio-sotto b { color: var(--accento); }
  /* la riga sotto quando il numero e` sbagliato: come su uno spicchio normale, con la cifra in oro */
  .annuncio.quante .annuncio-sotto { color: var(--testo-attenuato); font: 800 4.2vh/1.1 var(--font-titoli); text-shadow: 0 0.3vh 0 rgba(0, 0, 0, 0.35); }
  .annuncio.quante .annuncio-sotto b { color: var(--accento); }
}

/* ============================================================================
   LA MODALITA` «PERCORSO», quinta stesura (09/10/2026) — disegno di Chiara
   design/2026-10-09-scheda-percorso-partita.md e il prototipo design/prototipi/2026-10-09-percorso-partita-3/proposta.css.
   Il palco e` 16:9: il paesaggio (svg, viewBox 1920 × 1080) sta dietro, e ogni pezzo in HTML sta nelle stesse unita`:
   --u e` 1/1080 dell'altezza dello stage (a 1920 × 1080 un'unita` e` 1 px, a 1366 × 768 e` 0,711 px) e --vh e` l'«1vh» dello stage
   (10,8 unita`): i caratteri sono in --vh, come il resto del gioco era in vh. In una finestra che NON e` 16:9 (il browser con la barra
   in alto) lo stage e` il piu` grande 16:9 che ci sta, centrato; il paesaggio continua oltre i suoi bordi (cielo e colline si estendono),
   cosi' paesaggio e interfaccia restano scollegati da nessuna parte. Si applica solo col Percorso (body.percorso, o il palco e la
   sua iscrizione): la Classica non cambia in niente.
   Le misure in vh del disegno di Chiara sono scritte qui come calc(var(--vh) * N).
   ============================================================================ */
:root {
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  --vh: calc(var(--u) * 10.8);
  --ox: calc((100vw - 1920 * var(--u)) / 2);
  --oy: calc((100vh - 1080 * var(--u)) / 2);
}
.palco-percorso {
  --legno: #A8713A; --legno-scuro: #7E4F25; --legno-ombra: #4A2E16; --legno-chiaro: #C9955A;
  --sole: #FFD86B; --fuoco: #FF9F1C; --fiamma: #FFD23F; --oro: #F3C531;
  --pietra: #CBBFA6; --pietra-bordo: #7D715E; --pietra-chiara: #DDD3BC; --pietra-ingresso: #4C6FD9; --terra: #8C6B46;
  position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #2E6F9E;
}
.paesaggio-partita { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* le due schermate del Percorso sono lo STAGE: un riquadro 16:9 centrato, in unita` --u, sopra il paesaggio. Lasciano passare il
   mouse dove non c'e` niente (cosi' le caselle libere del lampo, che sono nel paesaggio, si toccano). */
body.percorso #schermata-gioco, #schermata-iscrizione-percorso {
  --legno: #A8713A; --legno-scuro: #7E4F25; --legno-ombra: #4A2E16; --legno-chiaro: #C9955A;
  position: fixed; left: var(--ox); top: var(--oy); width: calc(var(--u) * 1920); height: calc(var(--u) * 1080);
  max-width: none; margin: 0; padding: 0; display: block; z-index: 2; overflow: visible; pointer-events: none;
}
body.percorso #schermata-gioco :is(button, input, select, a, label, canvas, .cella-tabellone.accesa, .cella-tabellone[role="button"], .tessera-viaggio, .pannello-scelta, .pannello-volume, .pannello-classifica, .annuncio, .cambia-frase),
#schermata-iscrizione-percorso :is(button, input, select, label, .pannello-plancia, .legenda-plancia, .tabellone-legno, .targa-legno, .testata-iscrizione-plancia) { pointer-events: auto; }
body.percorso #overlay-festa, body.percorso #overlay-festa * { pointer-events: auto; }

/* ---- 1. il cielo: un gradiente a tre fermate, che cambia col tempo (900 ms) ---------------------------- */
.cielo-grad stop { transition: stop-color 900ms ease-in-out; }
.cielo-grad stop:nth-child(1) { stop-color: #5B3E96; }
.cielo-grad stop:nth-child(2) { stop-color: #3E5FA6; }
.cielo-grad stop:nth-child(3) { stop-color: #2E6F9E; }
[data-tempo="ventoso"]   .cielo-grad stop:nth-child(1) { stop-color: #4A4A9E; }
[data-tempo="ventoso"]   .cielo-grad stop:nth-child(2) { stop-color: #3E6FA8; }
[data-tempo="ventoso"]   .cielo-grad stop:nth-child(3) { stop-color: #4F93B8; }
[data-tempo="temporale"] .cielo-grad stop:nth-child(1) { stop-color: #1C1D3A; }
[data-tempo="temporale"] .cielo-grad stop:nth-child(2) { stop-color: #27304F; }
[data-tempo="temporale"] .cielo-grad stop:nth-child(3) { stop-color: #34415E; }
[data-tempo="afa"]       .cielo-grad stop:nth-child(1) { stop-color: #6B4A8C; }
[data-tempo="afa"]       .cielo-grad stop:nth-child(2) { stop-color: #A86E62; }
[data-tempo="afa"]       .cielo-grad stop:nth-child(3) { stop-color: #E0A050; }
[data-tempo="limpida"]   .cielo-grad stop:nth-child(1) { stop-color: #3E5CC8; }
[data-tempo="limpida"]   .cielo-grad stop:nth-child(2) { stop-color: #4E8EDD; }
[data-tempo="limpida"]   .cielo-grad stop:nth-child(3) { stop-color: #8FD0F0; }
.tramonto .cielo-grad stop:nth-child(2) { stop-color: #8F4A5E; }
.tramonto .cielo-grad stop:nth-child(3) { stop-color: #D9733A; }
[data-tempo="sera"] .cielo-grad stop:nth-child(1) { stop-color: #140F33; }
[data-tempo="sera"] .cielo-grad stop:nth-child(2) { stop-color: #251C52; }
[data-tempo="sera"] .cielo-grad stop:nth-child(3) { stop-color: #3B2A66; }

.paesaggio-partita .arco-sole { fill: none; stroke: none; }
/* il sole: uno scatto a ogni ora (600 ms); fuori dal tramonto non scende mai sotto meta` cielo */
.paesaggio-partita .sole { transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 900ms; will-change: transform; }
.paesaggio-partita .sole.nascosto { opacity: 0; }
.paesaggio-partita .sole .disco { fill: var(--sole); transition: fill 900ms, r 900ms; }
.paesaggio-partita .sole .alone { transition: opacity 900ms, r 900ms; }
.paesaggio-partita .sole .raggi line { stroke: var(--sole); stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity 900ms; }
[data-tempo="limpida"] .sole .raggi line { opacity: 1; }
[data-tempo="limpida"] .sole .raggi { animation: raggi-girano 24s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes raggi-girano { to { transform: rotate(360deg); } }
/* l'Afa: il sole cocente, grande e arancio, con un alone largo; le nuvole se ne vanno (§7). Alone r 120 (con la strada nuova a 170 uscirebbe) */
[data-tempo="afa"] .sole .disco { fill: #FFB341; r: 54; }
[data-tempo="afa"] .sole .alone { r: 120; opacity: 1; animation: sole-batte 2.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes sole-batte { from { transform: scale(0.94); } to { transform: scale(1.06); } }
[data-tempo="temporale"] .sole .disco { fill: #C9C2A6; }
[data-tempo="temporale"] .sole .alone { opacity: 0.25; }
/* la luna: alta, nel suo posto, non dietro la collina (§8) */
.paesaggio-partita .luna-alta { opacity: 0; transition: opacity 1200ms; }
.paesaggio-partita .luna-alta.visibile { opacity: 1; }
.paesaggio-partita .luna-alta .luna { fill: #F2EFE4; }
.paesaggio-partita .luna-alta .alone-luna { opacity: 0.5; }

/* le nuvole delle previsioni */
.paesaggio-partita .nuvole { opacity: 0; transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 500ms; will-change: transform; }
.paesaggio-partita .nuvole.visibili { opacity: 1; }
.paesaggio-partita .nuvole .nuvola ellipse { fill: #fff; opacity: 0.92; transition: fill 900ms; }
.paesaggio-partita .nuvole[data-tipo="scura"] .nuvola ellipse { fill: #5E6584; }
.paesaggio-partita .nuvole[data-tipo="calda"] .nuvola ellipse { fill: #F3D2A6; }
.paesaggio-partita .nuvole .fulmine { fill: var(--fiamma); opacity: 0; }
[data-tempo="temporale"] .nuvole .nuvola:nth-child(2) .fulmine { animation: fulmine 5.2s steps(1) infinite; }
[data-tempo="temporale"] .nuvole .nuvola:nth-child(4) .fulmine { animation: fulmine 7.1s steps(1) infinite 2.3s; }
@keyframes fulmine { 0%, 92% { opacity: 0; } 93%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
/* il Ventoso (§7): le nuvole corrono, dieci righe d'aria, gli alberi si piegano, la bandiera sbatte */
[data-tempo="ventoso"] .nuvole.visibili .nuvola { animation: nuvola-corre 3.2s ease-in-out infinite alternate; transform-box: fill-box; }
[data-tempo="ventoso"] .nuvole.visibili .nuvola:nth-child(2) { animation-duration: 4.3s; animation-delay: -1.7s; }
[data-tempo="ventoso"] .nuvole.visibili .nuvola:nth-child(3) { animation-duration: 2.8s; animation-delay: -0.6s; }
[data-tempo="ventoso"] .nuvole.visibili .nuvola:nth-child(4) { animation-duration: 3.7s; animation-delay: -2.4s; }
@keyframes nuvola-corre { from { translate: 0 0; } to { translate: -160px 8px; } }
/* le righe d'aria: ognuna con la sua lunghezza (--l), velocita' (--du), ritardo (--dl), spessore (--w) e trasparenza (--op), scritte dal JavaScript */
.paesaggio-partita .vento path { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: var(--w, 4px); stroke-linecap: round; stroke-dasharray: calc(var(--l, 110) * 1px) 600px; stroke-opacity: var(--op, 0.6); opacity: 0; }
[data-tempo="ventoso"] .vento path { opacity: 1; animation: vento-soffia var(--du, 1.6s) linear infinite; animation-delay: calc(var(--dl, 0s) * -1); }
@keyframes vento-soffia { from { stroke-dashoffset: 600px; } to { stroke-dashoffset: calc(var(--l, 110) * -1px); } }
/* gli alberi si piegano ognuno col suo periodo, la sua ampiezza e il suo ritardo (la raffica attraversa il paesaggio da sinistra), e in piu' un
   secondo respiro lento, piu' piccolo, con un altro periodo: i due non si sincronizzano mai */
[data-tempo="ventoso"] .albero { animation: albero-piega var(--p, 1.1s) ease-in-out infinite alternate, albero-soffio var(--p2, 2.6s) ease-in-out infinite alternate; animation-delay: calc(var(--dl, 0s) * -1), calc(var(--dl2, 0s) * -1); transform-origin: var(--sx) var(--sy); }
@keyframes albero-piega { from { transform: skewX(var(--a0, -4deg)); } to { transform: skewX(var(--a1, -12deg)); } }
@keyframes albero-soffio { from { rotate: -0.8deg; } to { rotate: 1.6deg; } }
.paesaggio-partita .albero .chioma { filter: brightness(var(--lum, 1)); }
/* la bandiera: lo sbattere veloce piu' una raffica lenta che la tende e la lascia andare */
[data-tempo="ventoso"] .bandiera .tela { animation: tela-sbatte 420ms ease-in-out infinite alternate, tela-raffica 2.9s ease-in-out infinite alternate; animation-delay: calc(var(--wd, 0s) * -1), calc(var(--wd, 0s) * -0.7); transform-box: fill-box; transform-origin: left center; }
@keyframes tela-raffica { from { rotate: 0deg; } 60% { rotate: -3deg; } to { rotate: 5deg; } }
@keyframes tela-sbatte { from { transform: scaleX(1); } to { transform: scaleX(0.82) skewY(-6deg); } }
/* la pioggia davanti a tutto, su tutto lo schermo (§7: bagna anche il prato) e il lampo */
/* ogni goccia: lunghezza, velocita' (--du), ritardo (--dl), trasparenza (--op), spessore (--w) e quanto cade (--c) li scrive il JavaScript */
.paesaggio-partita .pioggia line { stroke: rgb(205, 220, 255); stroke-width: var(--w, 2.5px); stroke-linecap: round; opacity: 0; }
[data-tempo="temporale"] .pioggia line { opacity: var(--op, 0.6); animation: pioggia-cade var(--du, 700ms) linear infinite; animation-delay: var(--dl, 0ms); }
@keyframes pioggia-cade { from { transform: translateY(0); } to { transform: translateY(var(--c, 640px)); } }
.paesaggio-partita .lampo { fill: #fff; opacity: 0; pointer-events: none; }
[data-tempo="temporale"] .paesaggio-partita .lampo, [data-tempo="temporale"].paesaggio-partita .lampo { animation: lampo-cielo 5.2s steps(1) infinite; }
@keyframes lampo-cielo { 0%, 92% { opacity: 0; } 93% { opacity: 0.35; } 94% { opacity: 0.08; } 95% { opacity: 0.28; } 96%, 100% { opacity: 0; } }
.paesaggio-partita .foschia { fill: url(#cielo-grad); opacity: 0; pointer-events: none; transition: opacity 900ms; }
[data-tempo="afa"] .foschia { opacity: 0.22; animation: foschia-trema 3s ease-in-out infinite alternate; }
@keyframes foschia-trema { from { transform: translateY(0); } to { transform: translateY(6px); } }
[data-tempo="afa"] .colline .collina.lontana { filter: blur(1.5px); }
/* le stelle della sera, sparse */
.paesaggio-partita .stelle circle { fill: #fff; opacity: 0; transition: opacity 1200ms; }
[data-tempo="sera"] .stelle circle { opacity: 0.85; animation: stella-brilla var(--sd, 2.4s) ease-in-out infinite alternate; animation-delay: calc(var(--sl, 0s) * -1); }
@keyframes stella-brilla { from { opacity: 0.3; } to { opacity: 0.95; } }

/* ---- 2. la terra (sesta stesura, 09/10 sera, disegno di Chiara: design/2026-10-09-scheda-paesaggio-percorso.md): le creste lontane azzurrine
        (la prospettiva aerea), la montagna con la vetta e i suoi due fianchi, il prato vicino scuro, 88 alberi, il campo base -------------- */
.paesaggio-partita .cresta.lontana { fill: #6E8DA8; opacity: 0.85; transition: opacity 900ms, fill 900ms; }
.paesaggio-partita .cresta.lontana-destra { fill: #5F7E9A; opacity: 0.9; transition: opacity 900ms; }
.paesaggio-partita .collina.lontana { fill: #3F8C78; }
.paesaggio-partita .montagna .corpo { fill: #3C7263; }
.paesaggio-partita .montagna .luce { fill: #4C8673; }
.paesaggio-partita .montagna .ombra { fill: #2F5A4F; }
.paesaggio-partita .montagna .falda { fill: rgba(0, 0, 0, 0.1); }
.paesaggio-partita .montagna .roccia { fill: #6A7E8A; }
.paesaggio-partita .montagna .neve { fill: #EEF3F6; }
.paesaggio-partita .montagna .brillio { fill: #fff; opacity: 0; }
.paesaggio-partita .collina.media { fill: #2F6E55; }
.paesaggio-partita .collina.vicina { fill: #24503F; }
/* gli alberi: tondi nel prato, conifere sulla montagna; tre profondita`, piu` chiari e piu` azzurri lontano; ognuno ha la sua ombra a terra */
.paesaggio-partita .albero .ombra-albero { fill: rgba(0, 0, 0, 0.18); transition: transform 900ms ease-in-out; transform-box: fill-box; transform-origin: center; }
.paesaggio-partita .albero .tronco { stroke: #15332A; stroke-linecap: round; }
.paesaggio-partita .albero .chioma { fill: #1C4236; transition: fill 900ms; }
.paesaggio-partita .albero.vicino .chioma { fill: #1C4236; }
.paesaggio-partita .albero.medio .chioma { fill: #245A47; }
.paesaggio-partita .albero.lontano .chioma { fill: #3A7262; }
.paesaggio-partita .albero.lontano .tronco { stroke: #2B5447; }
.paesaggio-partita .albero .chioma.riflesso { fill: rgba(255, 255, 255, 0.1); }
.paesaggio-partita .albero.abbattuto { opacity: 0; transition: opacity 300ms ease-out; } /* quando sorge un Castello, gli alberi che gli stanno addosso si tolgono */
.paesaggio-partita .velo-colline { fill: #0B0A24; opacity: 0; pointer-events: none; transition: opacity 900ms; }
[data-tempo="temporale"] .velo-colline { opacity: 0.28; }
[data-tempo="sera"] .velo-colline { opacity: 0.42; }
.tramonto .velo-colline { opacity: 0.12; }
.paesaggio-partita .campo-base .telo { fill: #F3C14F; }
.paesaggio-partita .campo-base .porta { fill: #B8862E; transition: fill 900ms; }
.paesaggio-partita .campo-base .ombra-base { fill: rgba(0, 0, 0, 0.22); }
.paesaggio-partita .campo-base .luce-base { opacity: 0; transition: opacity 1200ms; }

/* ---- 3. il sentiero in prospettiva: un nastro di terra che si stringe salendo (un poligono, non uno stroke: lo stroke ha una larghezza sola),
        una lastra per casella (quattro forme, tre tinte, schiacciate in lontananza), la miliare ogni cinque ---- */
.paesaggio-partita .sentiero-guida { fill: none; stroke: none; }
.paesaggio-partita .sentiero-bordo { fill: rgba(30, 20, 10, 0.34); stroke: none; }
.paesaggio-partita .sentiero { fill: #9C7A52; fill-opacity: 0.78; stroke: none; }
.paesaggio-partita .caselle { filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.4)); }
.pietra-mappa .lastra { fill: var(--pietra); stroke: var(--pietra-bordo); stroke-width: 1.6; }
.pietra-mappa .luce { stroke: rgba(255, 255, 255, 0.5); stroke-width: 2.2; stroke-linecap: round; }
.pietra-mappa.miliare .lastra { fill: var(--pietra-chiara); stroke-width: 1.3; }
.pietra-mappa .numero { font: 800 15px var(--font-titoli); fill: #4E4536; }
.pietra-mappa .luce { transition: stroke 900ms; }
.pietra-mappa.piazzola .lastra { fill: #D6CCB3; }
.pietra-mappa.via .lastra, .pietra-mappa.arrivo .lastra { fill: #fff; }
/* la pietra d'ingresso di una tappa e` una pietra DI UN ALTRO COLORE (blu cobalto, bordo bianco): e` lei a dire «qui ci si ferma» */
.pietra-mappa.ingresso .lastra { fill: var(--pietra-ingresso); stroke: #fff; stroke-width: 2.2; }
.pietra-mappa.ingresso .luce { stroke: rgba(255, 255, 255, 0.65); }
/* la stradina: un nastro di terra che curva dalla pietra d'ingresso alla porta, con quattro sassi sopra */
.stradina .terra-stradina { fill: none; stroke: var(--terra); stroke-opacity: 0.8; stroke-width: 9; stroke-linecap: round; }
.stradina ellipse { fill: var(--pietra); stroke: var(--pietra-bordo); stroke-width: 0.8; opacity: 0.95; }
.paesaggio-partita .bandiera .palo { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.paesaggio-partita .bandiera .tela { stroke: #fff; stroke-width: 2; }
/* «40 caselle» accanto alla bandiera: solo nell'iscrizione */
.paesaggio-partita .bandiera-quante { display: none; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.45); stroke-width: 4px; stroke-linejoin: round; }
.palco-percorso.iscrizione .bandiera-quante { display: block; }
.bandiera-quante .numero { font: 800 26px var(--font-titoli); }
.bandiera-quante .parola { font: 700 17px var(--font-testo); }
/* le tappe sono piccoli posti veri nel paesaggio: il castello di pietra, il cartello della scorciatoia */
.paesaggio-partita .tappa-mappa .terra { fill: rgba(0, 0, 0, 0.28); }
.paesaggio-partita .tappa-mappa { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4)); }
.paesaggio-partita .bandiera, .paesaggio-partita .meeple, .paesaggio-partita .tendina { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4)); }
.tappa-mappa.pedaggio .muro { fill: #B9BFCB; stroke: #5F6878; stroke-width: 1.5; }
.tappa-mappa.pedaggio .torre { fill: #A6ADBC; stroke: #5F6878; stroke-width: 1.5; }
.tappa-mappa.pedaggio .merli { fill: #A6ADBC; stroke: #5F6878; stroke-width: 1.5; stroke-linejoin: round; }
.tappa-mappa.pedaggio .porta { fill: #3A2E26; }
.tappa-mappa.pedaggio .feritoia { fill: #5F6878; }
/* I Castelli sono solo quelli dei giocatori (il Castello del gioco e` tolto, 09/10 sera): quello piazzato col lampo ha un padrone, pietra piu` chiara,
   vessillo grande e stendardo sopra la porta del colore del padrone. Senza padrone (l'anteprima sulle caselle libere) niente vessillo. */
.tappa-mappa.pedaggio .vessillo { display: none; }
.tappa-mappa.pedaggio.padrone .vessillo { display: block; }
.tappa-mappa.pedaggio.padrone .vessillo line { stroke: #5F6878; stroke-width: 2.5; stroke-linecap: round; }
.tappa-mappa.pedaggio.padrone .vessillo path { fill: var(--colore-giocatore); stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; transition: transform 300ms ease-in-out, opacity 300ms ease-in-out; }
.tappa-mappa.pedaggio .stendardo { display: none; }
.tappa-mappa.pedaggio.padrone .stendardo { display: block; fill: var(--colore-giocatore); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; transition: opacity 300ms ease-in-out; }
.tappa-mappa.pedaggio.padrone .muro { fill: #CBD1DC; }
.tappa-mappa.pedaggio.padrone .torre, .tappa-mappa.pedaggio.padrone .merli { fill: #BCC3D0; }
/* il Castello di chi e` accampato non regala niente fino all'alba (il castellano non c'e`): il vessillo e` ammainato e lo stendardo si spegne */
.tappa-mappa.pedaggio.padrone.chiuso .vessillo path { opacity: 0.35; transform: translateY(10px); }
.tappa-mappa.pedaggio.padrone.chiuso .stendardo { opacity: 0.35; }
.tappa-mappa.trampolino .palo { fill: #8A5A2E; stroke: #5A3A1E; stroke-width: 1.5; }
.tappa-mappa.trampolino .tabella { fill: #F2EFE4; stroke: #5A3A1E; stroke-width: 1.5; stroke-linejoin: round; }
.tappa-mappa.trampolino .segno { fill: none; stroke: var(--speciale-scuro); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* una tessera della legenda accende le sue tappe sul sentiero */
/* (R14: pulsano sul posto, niente piu` scale 1,3) */
/* (si anima il disegno DENTRO l'edificio: le proprieta` scale/rotate sul gruppo posizionato lo farebbero scivolare verso l'angolo del paesaggio) */
.tappa-mappa.evidenzia .edificio { animation: tappa-pulsa 600ms ease-in-out 3 alternate both; transform-box: fill-box; transform-origin: 50% 100%; }
.bivacco.evidenzia { animation: bivacco-pulsa 600ms ease-in-out 3 alternate both; }
@keyframes tappa-pulsa { from { transform: scale(1); filter: none; } to { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)); } }
@keyframes bivacco-pulsa { from { filter: none; } to { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)); } }
/* le caselle libere del Castello del lampo (§1): la pietra si accende, sotto il mouse compare il Castello con la sua stradina */
.casella-libera { cursor: pointer; pointer-events: all; }
.casella-libera .anello { fill: rgba(243, 156, 18, 0.28); stroke: var(--accento); stroke-width: 3; animation: libera-respira 1.4s ease-in-out infinite; pointer-events: none; }
.casella-libera .tocco { pointer-events: all; }
.casella-libera .ghost { opacity: 0; transition: opacity 120ms ease-out; pointer-events: none; filter: drop-shadow(0 0 6px var(--colore-giocatore)); }
.casella-libera:hover .ghost, .casella-libera:focus .ghost { opacity: 0.72; }
.casella-libera .ghost .filo { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 4 4; }
@keyframes libera-respira { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.35; } }

/* ---- 4. i bivacchi (§3 e §4 delle note): il fuoco accanto al sentiero, la piazzola davanti ------------- */
.bivacco .pietre circle { fill: #9A9FB0; stroke: #4B5066; stroke-width: 1.5; }
.bivacco .ceppi { stroke: #6B4423; stroke-width: 8; }
.bivacco .fiamma { fill: var(--fiamma); stroke: var(--fuoco); stroke-width: 3; stroke-linejoin: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.bivacco .brace { fill: #E0603A; opacity: 0; }
.bivacco .fumo { stroke: rgba(255, 255, 255, 0.5); stroke-width: 3; opacity: 0; }
.bivacco .alone-fuoco { opacity: 0; transition: opacity 500ms; }
.bivacco.spento .pietre circle { fill: #7A7F92; }
.bivacco.spento .ceppi { stroke: #3E3A3A; }
.bivacco.oggi .fiamma { opacity: 1; animation: fiamma-balla 900ms ease-in-out infinite alternate; }
.bivacco.oggi .alone-fuoco { opacity: 1; }
.bivacco.oggi .fumo { opacity: 1; animation: fumo-sale 2.6s ease-out infinite; }
.bivacco.oggi.accende .fiamma { animation: fiamma-accende 500ms cubic-bezier(0.2, 1.4, 0.4, 1) both, fiamma-balla 900ms ease-in-out 500ms infinite alternate; }
.bivacco.prima .brace { opacity: 1; animation: brace-respira 2.2s ease-in-out infinite alternate; }
.bivacco.prima .fumo { opacity: 0.6; stroke-width: 2; animation: fumo-sale 3.6s ease-out infinite; }
@keyframes fiamma-balla { from { transform: scaleX(1) scaleY(1); } to { transform: scaleX(0.86) scaleY(1.08); } }
@keyframes fiamma-accende { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes brace-respira { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes fumo-sale { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-40px); } }

/* ---- 5. i meeple (§5): la sagoma col contorno bianco, i piedi sulla pietra ------------------------------ */
.sagoma .contorno, .meeple-html .contorno { fill: #fff; stroke: #fff; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.sagoma .pieno, .meeple-html .pieno { fill: var(--colore-giocatore); stroke: none; }
.sagoma .sigla, .meeple-html .sigla { font: 800 15px var(--font-titoli); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.35); stroke-width: 2.5; }
.sagoma .sigla.due, .meeple-html .sigla.due { font-size: 12px; }
.paesaggio-partita .meeple .corpo { transition: transform 300ms ease-out; }
.paesaggio-partita .meeple .ombra-terra { fill: rgba(0, 0, 0, 0.32); }
/* di turno: l'anello bianco ai piedi che respira (1,6 s) */
.paesaggio-partita .meeple .anello-turno { fill: none; stroke: #fff; stroke-width: 3.5; opacity: 0; }
.paesaggio-partita .meeple.turno .anello-turno { opacity: 1; animation: anello-respira-p 1.6s ease-in-out infinite; }
@keyframes anello-respira-p { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.3; } }
/* in testa: la stella d'oro sopra la testa, con l'alone, visibile da lontano */
.paesaggio-partita .meeple .stella-testa { display: none; }
.paesaggio-partita .meeple.in-testa .stella-testa { display: block; animation: stella-pulsa 1.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.paesaggio-partita .meeple .stella-testa path { fill: var(--oro); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 7px rgba(243, 197, 49, 0.95)); }
@keyframes stella-pulsa { from { transform: scale(1); } to { transform: scale(1.18); } }
.paesaggio-partita .meeple.cammina .sagoma { animation: meeple-cammina 240ms ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes meeple-cammina { from { rotate: -5deg; } to { rotate: 5deg; } }
/* dentro la tenda (la sera): il meeple si infila e sparisce */
.paesaggio-partita .meeple.dentro .corpo { opacity: 0; transition: opacity 500ms ease-in; }
/* il fantasma: stessa sagoma, piu` piccolo, trasparente, col bordo tratteggiato; chiaramente secondario */
.paesaggio-partita .fantasma { opacity: 0.5; transition: transform 420ms ease-out, opacity 300ms; will-change: transform; }
.paesaggio-partita .fantasma.in-cammino { transition: opacity 300ms; } /* il salto oltre la Scorciatoia lo anima il JavaScript */
.paesaggio-partita .fantasma .corpo { transition: transform 300ms ease-out; } /* R5: il fantasma di fianco spunta da dietro la spalla (translate(18px, -28px) lo scrive il JavaScript) */
.paesaggio-partita .fantasma .ombra-terra { display: none; }
.paesaggio-partita .fantasma .contorno { fill: none; stroke: #fff; stroke-width: 3.5; stroke-dasharray: 4 3; }
.paesaggio-partita .fantasma .pieno { opacity: 0.75; }
/* la sera il fantasma si dissolve in 900 ms: trema, sale un poco e si sfuma (DURATA_FANTASMA_SERA_MS) */
.paesaggio-partita .fantasma.svanisce-sera .fantasma-anima { animation: fantasma-svanisce-sera 900ms ease-in both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes fantasma-svanisce-sera {
  0% { transform: translateY(0) scale(1); opacity: 1; } 20% { transform: translateY(-3px) scale(1.12); opacity: 1; filter: drop-shadow(0 0 6px #fff); }
  40% { transform: translateY(-6px) rotate(-6deg) scale(1.08); opacity: 0.9; } 60% { transform: translateY(-10px) rotate(6deg) scale(1); opacity: 0.6; }
  100% { transform: translateY(-22px) scale(0.6); opacity: 0; }
}
/* la Nebbia: il fantasma trema e va via (520 ms) */
.paesaggio-partita .fantasma.svanisce .fantasma-anima { animation: fantasma-svanisce 520ms ease-in both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes fantasma-svanisce {
  0% { transform: rotate(0deg); opacity: 1; } 14% { transform: rotate(-9deg); } 28% { transform: rotate(9deg); } 42% { transform: rotate(-6deg); opacity: 1; }
  100% { transform: rotate(0deg) scale(0.4); opacity: 0; }
}
/* la tendina (§6 delle note): appare dove il meeple si fermera`; accesa quando lui e` dentro */
.paesaggio-partita .tendina .telo { fill: var(--colore-giocatore); stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
.paesaggio-partita .tendina .porta { fill: #fff; opacity: 0.9; transition: fill 500ms; }
.paesaggio-partita .tendina .bandierina { fill: #fff; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.paesaggio-partita .tendina { transition: transform 420ms ease-out; }
.paesaggio-partita .tendina .tenda-anima { animation: tenda-pianta 420ms cubic-bezier(0.2, 1.4, 0.4, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
.paesaggio-partita .tendina.anteprima { opacity: 0.55; }
.paesaggio-partita .tendina.accesa .porta { fill: #FFE9A8; filter: drop-shadow(0 0 8px rgba(255, 220, 140, 0.9)); }
/* la tenda annullata (qualcuno ha risolto prima che la ruota girasse): si ripiega (300 ms) */
.paesaggio-partita .tendina.ripiega .tenda-anima { animation: tenda-ripiega 300ms ease-in both; }
@keyframes tenda-pianta { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tenda-ripiega { from { transform: scale(1); opacity: 1; } to { transform: scale(0.4); opacity: 0; } }
/* la luce delle tende accese, la sera: un alone caldo sopra la tenda */
.paesaggio-partita .tendina .luce-tenda { opacity: 0; transition: opacity 900ms; }
[data-tempo="sera"] .tendina.accesa .luce-tenda { opacity: 1; }
.paesaggio-partita .chip-mappa { animation: chip-sale 1200ms ease-out both; transform-box: fill-box; }
.paesaggio-partita .chip-mappa rect { fill: #fff; }
.paesaggio-partita .chip-mappa text { font: 800 26px var(--font-titoli); fill: #111; }
@keyframes chip-sale { 0% { opacity: 0; translate: 0 6px; } 15% { opacity: 1; translate: 0 -10px; } 75% { opacity: 1; translate: 0 -34px; } 100% { opacity: 0; translate: 0 -48px; } }

/* ============================================================================
   IL PAESAGGIO CHE REAGISCE E CHE SI MUOVE (sesta stesura, 09/10 sera) — disegno di Chiara, design/2026-10-09-scheda-paesaggio-percorso.md §3-§4,
   foglio paesaggio.css del prototipo. Criterio di Damiano (appunto 10): «il gioco lo raccontano le scritte e gli elementi, MA il mondo che reagisce
   e` quel tocco di classe». Le scritte restano tutte; questo si aggiunge. Nota: le animazioni stanno sui gruppi INTERNI (.edificio, .tenda-anima,
   .fantasma-anima) o sulle proprieta` che non si compongono con la posizione: `scale`/`rotate` su un gruppo posizionato con transform lo
   farebbero scivolare (il dondolio del Castello di prima era anche questo).
   ============================================================================ */
/* il tempo che cambia il paesaggio: con l'Afa le creste lontane spariscono nella calura, con la Limpida si vedono nitide e la neve brilla */
[data-tempo="afa"] .cresta.lontana, [data-tempo="afa"] .cresta.lontana-destra { opacity: 0.35; }
[data-tempo="afa"] .montagna .corpo, [data-tempo="afa"] .montagna .luce, [data-tempo="afa"] .montagna .ombra { filter: saturate(0.8); }
[data-tempo="limpida"] .cresta.lontana { fill: #5C7FA3; opacity: 1; }
[data-tempo="limpida"] .montagna .brillio { animation: brillio 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes brillio { 0%, 60%, 100% { opacity: 0; transform: scale(0.6); } 75% { opacity: 1; transform: scale(1.3); } }
/* col Temporale gli alberi si scuriscono, le pietre sono bagnate (la luce sopra e` piu` bianca), il fuoco si abbassa e il fumo non sale, niente lucciole */
[data-tempo="temporale"] .albero .chioma { fill: #163429; }
[data-tempo="temporale"] .albero.medio .chioma { fill: #1C4236; }
[data-tempo="temporale"] .albero.lontano .chioma { fill: #2A5648; }
[data-tempo="temporale"] .pietra-mappa .luce { stroke: rgba(255, 255, 255, 0.9); stroke-width: 3; }
[data-tempo="temporale"] .bivacco.oggi .fiamma { animation: fiamma-balla 500ms ease-in-out infinite alternate; transform: scale(0.75); }
[data-tempo="temporale"] .bivacco .fumo { opacity: 0 !important; }
/* col Ventoso (oltre agli alberi e alla bandiera) il fumo dei bivacchi si piega e le bandierine, i vessilli e gli stendardi sbattono */
[data-tempo="ventoso"] .bivacco .fumo { rotate: var(--sk, 22deg); animation-delay: calc(var(--wd, 0s) * -1); transform-box: fill-box; transform-origin: 50% 100%; }
[data-tempo="ventoso"] .tendina .bandierina, [data-tempo="ventoso"] .tappa-mappa.pedaggio.padrone .vessillo path, [data-tempo="ventoso"] .tappa-mappa.pedaggio .stendardo { animation: tela-sbatte calc(420ms * var(--wf, 1)) ease-in-out infinite alternate; animation-delay: calc(var(--wd, 0s) * -1); transform-box: fill-box; transform-origin: left center; }
/* al tramonto le ombre si allungano verso sinistra (il sole e` a destra, dietro la montagna) */
.tramonto .albero .ombra-albero { transform: translateX(-18px) scaleX(2.6); }
.tramonto .tappa-mappa .terra, .tramonto .campo-base .ombra-base { transform: translateX(-26px) scaleX(2); transform-box: fill-box; transform-origin: center; }
.tramonto .meeple .ombra-terra { transform: translateX(-16px) scaleX(2.4); transform-box: fill-box; transform-origin: center; }
.paesaggio-partita .tappa-mappa .terra, .paesaggio-partita .campo-base .ombra-base, .paesaggio-partita .meeple .ombra-terra { transition: transform 900ms ease-in-out; }
/* la sera si accendono le finestre (campo base, porte e feritoie dei Castelli, tende) e le lucciole escono fra gli alberi del prato; il fuoco acceso oggi si allarga */
[data-tempo="sera"] .campo-base .luce-base { opacity: 1; }
[data-tempo="sera"] .campo-base .porta { fill: #FFE9A8; }
[data-tempo="sera"] .tappa-mappa.pedaggio .porta, [data-tempo="sera"] .tappa-mappa.pedaggio .feritoia { fill: #FFE9A8; filter: drop-shadow(0 0 4px rgba(255, 220, 140, 0.9)); }
.paesaggio-partita .tappa-mappa.pedaggio .porta, .paesaggio-partita .tappa-mappa.pedaggio .feritoia { transition: fill 900ms; }
/* le lucciole: ognuna vaga per la sua strada (--x1..--y3, tempo --v) e accende e spegne la sua luce con un altro tempo (--b): i due periodi non
   coincidono, e nessuna parte insieme alle altre (ritardi --dv e --db) */
.paesaggio-partita .lucciola { opacity: 0; }
.paesaggio-partita .lucciola circle { fill: #E8FF9A; }
.paesaggio-partita .lucciola .alone { opacity: 0.22; }
[data-tempo="sera"] .lucciola { animation: lucciola-vaga var(--v, 7s) ease-in-out infinite alternate, lucciola-luce var(--b, 4s) ease-in-out infinite; animation-delay: calc(var(--dv, 0s) * -1), calc(var(--db, 0s) * -1); }
[data-tempo="temporale"] .lucciola { animation: none; }
@keyframes lucciola-vaga { 0% { translate: 0 0; } 35% { translate: var(--x1, 4px) var(--y1, -6px); } 70% { translate: var(--x2, -4px) var(--y2, -12px); } 100% { translate: var(--x3, 6px) var(--y3, -18px); } }
@keyframes lucciola-luce { 0%, 100% { opacity: 0; } 12% { opacity: 0.95; } 24% { opacity: 0.3; } 38% { opacity: 1; } 55% { opacity: 0.55; } 72% { opacity: 0; } }
.bivacco .alone-fuoco { transition: r 1200ms, opacity 500ms; }
.bivacco.oggi.notte .alone-fuoco { r: 110; }

/* il Castello che si ATTIVA quando una pedina ci si ferma sopra (appunto 7): la pedina e` ferma sulla pietra; +300 ms due onde si allargano (una
   bianca, una del colore del padrone) e svaniscono, la porta si accende, le torri si schiariscono, lo stendardo e il vessillo sventolano, un
   bagliore bianco; il padrone ha l'anello ai piedi (900 ms) e fa il suo passo. Niente zoom, niente dondolio. */
.tappa-mappa.pedaggio .onda { fill: none; stroke: #fff; stroke-width: 9; opacity: 0; cy: -24; }
.tappa-mappa.pedaggio .onda.due { stroke: var(--colore-giocatore, #fff); stroke-width: 4; }
.tappa-mappa.pedaggio.attivo .onda { animation: onda-castello 800ms ease-out both; transform-box: fill-box; transform-origin: center; }
.tappa-mappa.pedaggio.attivo .onda.due { animation-delay: 180ms; }
@keyframes onda-castello { 0% { opacity: 0.95; transform: scale(0.6); } 100% { opacity: 0; transform: scale(7); } }
.tappa-mappa.pedaggio.attivo .edificio { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 4px var(--colore-giocatore, #fff)); }
.tappa-mappa.pedaggio.attivo .torre, .tappa-mappa.pedaggio.attivo .merli { fill: #E4E9F2; }
.tappa-mappa.pedaggio.attivo .porta { fill: #FFE9A8; filter: drop-shadow(0 0 6px rgba(255, 220, 140, 1)); transition: fill 150ms; }
.tappa-mappa.pedaggio.attivo .stendardo, .tappa-mappa.pedaggio.attivo .vessillo path { animation: stendardo-sventola 220ms ease-in-out 4 alternate; transform-box: fill-box; transform-origin: top center; }
@keyframes stendardo-sventola { from { transform: skewX(-10deg) scaleY(1.05); } to { transform: skewX(10deg) scaleY(0.95); } }
.tappa-mappa.pedaggio.attivo .muro { filter: brightness(1.15); }
.paesaggio-partita .meeple .anello-premio { fill: none; stroke: #fff; stroke-width: 7; opacity: 0; }
.paesaggio-partita .meeple .anello-premio.colore { stroke: var(--colore-giocatore); stroke-width: 3; }
.paesaggio-partita .meeple.premiato .anello-premio { animation: anello-premio 900ms ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes anello-premio { 0% { opacity: 1; transform: scale(0.5); } 60% { opacity: 0.9; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.9); } }
/* il lampo: il Castello SORGE dalla terra (600 ms), con tre sbuffi di polvere grandi */
.tappa-mappa.pedaggio.sorge .edificio { animation: castello-sorge 600ms cubic-bezier(0.2, 1.3, 0.3, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes castello-sorge { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* la camminata (480 ms a pietra): la polvere a ogni pietra toccata, il salto ad arco senza dondolio, il cartello della Scorciatoia che indica */
.paesaggio-partita .polvere .sbuffo { fill: rgba(255, 255, 255, 0.38); animation: sbuffo 420ms ease-out both; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.paesaggio-partita .polvere .sbuffo.grande { fill: rgba(255, 240, 200, 0.55); animation-duration: 560ms; }
@keyframes sbuffo { 0% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2.2) translateY(-3px); } }
.paesaggio-partita .meeple.salta .sagoma { animation: none; }
.tappa-mappa.trampolino .segno { transition: stroke 120ms; }
.tappa-mappa.trampolino.indica .segno.s1 { animation: segno-lampeggia 400ms steps(1) 2; }
.tappa-mappa.trampolino.indica .segno.s2 { animation: segno-lampeggia 400ms steps(1) 2 200ms; }
@keyframes segno-lampeggia { 0% { stroke: var(--speciale-scuro); } 50% { stroke: #F39C12; } 100% { stroke: var(--speciale-scuro); } }
.paesaggio-partita .meeple, .paesaggio-partita .fantasma, .paesaggio-partita .tendina { will-change: transform; }

/* Il cambio di tempo si annuncia AL CENTRO dello schermo, con tutto il resto offuscato (Damiano, 09/10 sera, appunto 9: «un secondo in piu`, al centro
   con tutto il resto offuscato»; nel giro dei ritocchi era l'annuncio grande senza velo). Il velo e` un filtro sui pezzi dell'interfaccia e sul
   paesaggio: l'annuncio sta in un contenitore sopra gli altri e un velo a parte non potrebbe stare fra loro. */
body.percorso #schermata-gioco .colonna-centrale.con-annuncio .annuncio.centro { top: calc(var(--u) * 540); translate: 0 -50%; }
body.percorso.velo-annuncio .palco-percorso,
body.percorso.velo-annuncio #schermata-gioco .intestazione-gioco,
body.percorso.velo-annuncio #schermata-gioco .colonna-ruota,
body.percorso.velo-annuncio #schermata-gioco .colonna-giocatori,
body.percorso.velo-annuncio #schermata-gioco .cielo-testi,
body.percorso.velo-annuncio #schermata-gioco .colonna-centrale > :not(.annuncio) { filter: blur(5px) brightness(0.5); }
body.percorso .palco-percorso, body.percorso #schermata-gioco .intestazione-gioco, body.percorso #schermata-gioco .colonna-ruota,
body.percorso #schermata-gioco .colonna-giocatori, body.percorso #schermata-gioco .cielo-testi { transition: filter 300ms ease-out; }

/* ---- 6. la testata: i pulsanti di oggi e «Giorno 2 di 5» ---------------------------------------------- */
.solo-percorso { display: none; }
body.percorso .solo-percorso { display: flex; }
body.percorso #schermata-gioco .intestazione-gioco {
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 62); padding: 0 calc(var(--u) * 18); z-index: 3;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 0;
}
body.percorso #schermata-gioco .pulsanti-audio, body.percorso #schermata-gioco .pulsanti-classifica { display: flex; gap: calc(var(--u) * 8); }
body.percorso #schermata-gioco .btn-muto {
  width: calc(var(--u) * 44); height: calc(var(--u) * 44); padding: 0; font-size: calc(var(--u) * 22); border-radius: 50%;
  background: rgba(14, 18, 52, 0.45); border: 2px solid rgba(255, 255, 255, 0.18);
}
body.percorso #schermata-gioco .round-punti { display: none; }
body.percorso #schermata-gioco .pannello-volume, body.percorso #schermata-gioco .pannello-classifica { font-size: calc(var(--vh) * 2.2); min-width: calc(var(--vh) * 30); top: calc(100% + 6px); }
body.percorso .giorno-percorso {
  position: absolute; left: calc(var(--u) * 130); top: calc(var(--u) * 10); gap: calc(var(--vh) * 0.5); height: calc(var(--u) * 44); padding: 0 calc(var(--vh) * 1.6);
  border-radius: 999px; background: rgba(14, 18, 52, 0.45); font: 700 calc(var(--vh) * 2.3)/1 var(--font-titoli); color: #fff; align-items: center;
}
.giorno-percorso b { font-size: calc(var(--vh) * 3); }
.giorno-percorso small { font-size: calc(var(--vh) * 1.8); color: var(--testo-attenuato); font-weight: 600; }
.giorno-percorso .punti { display: inline-flex; gap: calc(var(--vh) * 0.5); margin-left: calc(var(--vh) * 1); }
.giorno-percorso .punti i { width: calc(var(--vh) * 1.1); height: calc(var(--vh) * 1.1); border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.giorno-percorso .punti i.passato { background: #fff; }
.giorno-percorso .punti i.oggi { background: var(--accento); box-shadow: 0 0 0 calc(var(--vh) * 0.3) rgba(243, 156, 18, 0.35); }
.giorno-percorso .carattere { display: inline-flex; margin-left: calc(var(--vh) * 1); width: calc(var(--vh) * 2.6); height: calc(var(--vh) * 2.6); color: var(--testo-attenuato); }
.giorno-percorso .carattere .icona-tempo, .icona-tempo { width: 100%; height: 100%; }

/* ---- 7. il tempo: la pillola di adesso e la riga della notizia ---------------------------------------- */
body.percorso .cielo-testi { position: absolute; right: calc(var(--u) * 86); top: calc(var(--u) * 10); flex-direction: column; align-items: flex-end; gap: calc(var(--vh) * 1); z-index: 3; }
.cielo-testi .icona-tempo { width: calc(var(--vh) * 3.2); height: calc(var(--vh) * 3.2); flex: 0 0 auto; }
.tempo-adesso { display: inline-flex; align-items: center; gap: calc(var(--vh) * 1); height: calc(var(--u) * 44); padding: 0 calc(var(--vh) * 1.8) 0 calc(var(--vh) * 1.2); border-radius: 999px; background: rgba(14, 18, 52, 0.45); font: 700 calc(var(--vh) * 2.4)/1 var(--font-titoli); color: #fff; }
.tempo-adesso .icona-tempo { color: #FFD86B; }
/* la riga della notizia sta a destra entro 460 unita` (va su due righe se serve), cosi' l'annuncio sopra il cartello non la copre */
.riga-tempo { display: inline-flex; align-items: center; gap: calc(var(--vh) * 1.4); padding: calc(var(--vh) * 1) calc(var(--vh) * 2) calc(var(--vh) * 1) calc(var(--vh) * 1.6); border-radius: calc(var(--vh) * 1.4); background: #fff; color: #111; font: 600 calc(var(--vh) * 2.8)/1.2 var(--font-testo); box-shadow: 0 calc(var(--vh) * 0.6) calc(var(--vh) * 2) rgba(0, 0, 0, 0.35); max-width: calc(var(--u) * 460); box-sizing: border-box; text-align: left; }
.riga-tempo b { font-weight: 800; }
.riga-tempo .icona-tempo { width: calc(var(--vh) * 4); height: calc(var(--vh) * 4); color: #1a1a1a; }
.riga-tempo.vuota { display: none; }
.riga-tempo.preavviso { background: #FFF2CC; }
/* R8: la pillola del tramonto, sotto la riga del tempo: scura, gialla nell'ultimo giro e a ruota ferma */
.riga-tramonto { display: inline-flex; align-items: center; gap: calc(var(--vh) * 1.2); padding: calc(var(--vh) * 0.8) calc(var(--vh) * 1.8) calc(var(--vh) * 0.8) calc(var(--vh) * 1.4); border-radius: calc(var(--vh) * 1.4); background: rgba(14, 18, 52, 0.72); color: #fff; font: 600 calc(var(--vh) * 2.6)/1.2 var(--font-testo); max-width: calc(var(--u) * 460); box-sizing: border-box; text-align: left; box-shadow: 0 calc(var(--vh) * 0.6) calc(var(--vh) * 2) rgba(0, 0, 0, 0.35); }
.riga-tramonto b { font-weight: 800; color: #FFD86B; }
.riga-tramonto .icona-tempo { width: calc(var(--vh) * 3.6); height: calc(var(--vh) * 3.6); color: #FFB341; }
.riga-tramonto.ultima { background: #FFF2CC; color: #111; }
.riga-tramonto.ultima b { color: #111; }
.riga-tramonto.ultima .icona-tempo { color: #C4780C; }
.riga-tramonto.vuota { display: none; }
.riga-tramonto.entra { animation: riga-entra-p 320ms cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.riga-tempo.entra { animation: riga-entra-p 320ms cubic-bezier(0.2, 1.3, 0.4, 1) both; }
@keyframes riga-entra-p { from { opacity: 0; transform: translateX(calc(var(--vh) * 3)); } to { opacity: 1; transform: none; } }

/* ---- 8. il cartello di legno: la frase (in partita) o «Chi parte» (iscrizione), piantato sulla collina ---- */
body.percorso #schermata-gioco .area-partita { position: absolute; inset: 0; display: block; margin: 0; flex: none; pointer-events: none; }
body.percorso #schermata-gioco .colonna-centrale {
  position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 1fr max-content 1fr; grid-template-rows: max-content max-content; align-content: start; justify-items: center;
  gap: 0; padding-top: calc(var(--u) * 204); margin: 0; min-height: 0; pointer-events: none; order: 0; flex: none; align-items: start;
}
body.percorso #schermata-gioco #tabellone-frase {
  --cella: calc(var(--vh) * 5.6);
  grid-column: 2; grid-row: 1; position: relative; width: auto; max-width: none; margin: 0; padding: calc(var(--vh) * 1.2) calc(var(--vh) * 1.4); gap: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--legno-chiaro), var(--legno) 18%, var(--legno-scuro)); border: calc(var(--vh) * 0.55) solid #5A3A1E; border-radius: calc(var(--vh) * 1.4);
  box-shadow: inset 0 0 0 calc(var(--vh) * 0.3) rgba(255, 230, 190, 0.35), 0 calc(var(--vh) * 1.4) calc(var(--vh) * 3.4) rgba(0, 0, 0, 0.5);
}
body.percorso #schermata-gioco #tabellone-frase::before, body.percorso #schermata-gioco #tabellone-frase::after,
.cartello-chi-parte::before, .cartello-chi-parte::after {
  content: ""; position: absolute; top: calc(100% - 40 * var(--u)); width: calc(var(--u) * 24); height: calc(var(--u) * 225); z-index: -1;
  background: linear-gradient(90deg, #6E4322, #9C6232 55%, #6E4322); border-radius: 4px; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35);
}
body.percorso #schermata-gioco #tabellone-frase::before { left: calc(var(--u) * 40); }
body.percorso #schermata-gioco #tabellone-frase::after { right: calc(var(--u) * 40); }
body.percorso #schermata-gioco .riga-tabellone { display: flex; justify-content: center; gap: 0; background: none; margin: 0 auto; width: calc(14 * var(--cella)); }
body.percorso #schermata-gioco .riga-tabellone.corta { width: calc(14 * var(--cella)); }
body.percorso #schermata-gioco .cella-tabellone {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--cella); height: calc(var(--cella) * 1.28); aspect-ratio: auto;
  border: calc(var(--vh) * 0.3) solid rgba(40, 24, 10, 0.55); border-radius: calc(var(--vh) * 0.3); font: 800 calc(var(--cella) * 0.78)/1 var(--font-titoli);
  background: var(--legno-ombra); box-shadow: none; color: #111;
}
body.percorso #schermata-gioco .cella-tabellone.vuota { background: var(--legno-ombra); box-shadow: none; }
body.percorso #schermata-gioco .cella-tabellone.coperta, body.percorso #schermata-gioco .cella-tabellone.rivelata, body.percorso #schermata-gioco .cella-tabellone.non-alfabetica {
  background: #fff; color: #111; box-shadow: inset 0 calc(var(--vh) * -0.35) 0 rgba(0, 0, 0, 0.12);
}
body.percorso #schermata-gioco .cella-tabellone.accesa { box-shadow: inset 0 calc(var(--vh) * -0.35) 0 rgba(0, 0, 0, 0.12); }
body.percorso #schermata-gioco .riga-targa { grid-column: 2; grid-row: 2; position: relative; display: block; margin: calc(var(--vh) * 1.6) 0 0; width: auto; pointer-events: none; }
body.percorso #schermata-gioco .riga-targa .categoria {
  position: relative; width: fit-content; max-width: calc(14 * var(--vh) * 5.6); margin: 0 auto; padding: calc(var(--vh) * 0.7) calc(var(--vh) * 3.2); border-radius: 999px;
  background: #fff; color: #111; font: 800 calc(var(--vh) * 3.2)/1.15 var(--font-titoli); letter-spacing: 0.08em; text-transform: uppercase; text-wrap: balance; box-shadow: 0 calc(var(--vh) * 0.4) 0 rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}
body.percorso #schermata-gioco .riga-targa .categoria::before, body.percorso #schermata-gioco .riga-targa .categoria::after,
.targa-legno::before, .targa-legno::after { content: ""; position: absolute; top: calc(var(--vh) * -1.7); width: calc(var(--vh) * 0.4); height: calc(var(--vh) * 1.7); background: #5A3A1E; }
body.percorso #schermata-gioco .riga-targa .categoria::before, .targa-legno::before { left: 22%; }
body.percorso #schermata-gioco .riga-targa .categoria::after, .targa-legno::after { right: 22%; }
body.percorso #schermata-gioco .cambia-frase { position: absolute; left: calc(100% + var(--vh) * 1.6); top: 50%; transform: translateY(-50%); font-size: calc(var(--vh) * 1.8); padding: calc(var(--vh) * 0.4) calc(var(--vh) * 1.5); white-space: nowrap; }
body.percorso #schermata-gioco .indicatore-round { display: none; }

/* ---- 9. l'annuncio: il palco di oggi, SOPRA il cartello, nel cielo fra la testata e il tabellone ---------- */
body.percorso #schermata-gioco .colonna-centrale .annuncio { display: none; }
body.percorso #schermata-gioco .colonna-centrale.con-annuncio .annuncio {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 56); margin: 0 auto; width: max-content; max-width: calc(var(--u) * 1100); z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--vh) * 2.2); min-height: calc(var(--vh) * 12.6); padding: calc(var(--vh) * 0.8) calc(var(--vh) * 3.2);
  border-radius: calc(var(--vh) * 2); background: rgba(14, 18, 52, 0.72); backdrop-filter: blur(2px); text-align: left; white-space: nowrap; pointer-events: auto;
}
body.percorso #schermata-gioco .colonna-centrale.con-annuncio .area-comandi,
body.percorso #schermata-gioco .colonna-centrale.con-annuncio .pannello-scelta { display: none; }
body.percorso #schermata-gioco .annuncio-tessera {
  flex: 0 0 auto; width: calc(var(--vh) * 9); height: calc(var(--vh) * 11.4); font: 800 calc(var(--vh) * 7.6)/1 var(--font-titoli); border: calc(var(--vh) * 0.4) solid #0b0b1e; border-radius: calc(var(--vh) * 1);
}
body.percorso #schermata-gioco .annuncio-meeple { flex: 0 0 auto; width: calc(var(--vh) * 9); height: calc(var(--vh) * 11.4); display: flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 calc(var(--vh) * 0.6) calc(var(--vh) * 0.6) rgba(0, 0, 0, 0.45)); }
body.percorso #schermata-gioco .annuncio-meeple .meeple-html { width: calc(var(--vh) * 8.2); height: calc(var(--vh) * 11); }
body.percorso #schermata-gioco .annuncio-testo { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
body.percorso #schermata-gioco .annuncio-sopra { font: 700 calc(var(--vh) * 2.6)/1.2 var(--font-testo); color: var(--testo-attenuato); }
body.percorso #schermata-gioco .annuncio-titolo { font: 800 calc(var(--vh) * 5.6)/1.05 var(--font-titoli); color: #fff; text-shadow: 0 calc(var(--vh) * 0.4) 0 rgba(0, 0, 0, 0.35), 0 0 calc(var(--vh) * 3) rgba(255, 255, 255, 0.22); }
body.percorso #schermata-gioco .annuncio-sotto { margin-top: calc(var(--vh) * 0.6); font: 800 calc(var(--vh) * 3.2)/1.1 var(--font-titoli); color: var(--accento); text-shadow: 0 calc(var(--vh) * 0.3) 0 rgba(0, 0, 0, 0.35); }
body.percorso #schermata-gioco .annuncio.scena .annuncio-titolo { font-size: calc(var(--vh) * 7); }
body.percorso #schermata-gioco .annuncio.scena .annuncio-sotto, body.percorso #schermata-gioco .annuncio.no .annuncio-sotto { font: 700 calc(var(--vh) * 2.8)/1.2 var(--font-testo); color: var(--testo-attenuato); text-shadow: none; }
body.percorso #schermata-gioco .annuncio.tocca .annuncio-titolo { font-size: calc(var(--vh) * 5.6); }
body.percorso #schermata-gioco .annuncio.tocca.lungo .annuncio-titolo { font-size: calc(var(--vh) * 4.6); }
body.percorso #schermata-gioco .annuncio.tocca .annuncio-sopra { margin-bottom: 0; }
body.percorso #schermata-gioco .annuncio.speciale .annuncio-tessera { color: var(--speciale-scuro); font-size: calc(var(--vh) * 7); }
body.percorso #schermata-gioco .annuncio.speciale .annuncio-sotto { font: 800 calc(var(--vh) * 2.8)/1.15 var(--font-titoli); white-space: normal; max-width: calc(var(--u) * 640); text-wrap: balance; } /* la riga sotto va a capo dentro il riquadro, non ne esce (09/10, terza prova) */
body.percorso #schermata-gioco .annuncio.round .annuncio-pillole { margin-top: calc(var(--vh) * 0.4); }
body.percorso #schermata-gioco .annuncio.round .annuncio-titolo { font-size: calc(var(--vh) * 5.4); }
body.percorso #schermata-gioco .colonna-centrale.con-annuncio .annuncio.round { padding-top: calc(var(--vh) * 0.4); padding-bottom: calc(var(--vh) * 0.8); }
body.percorso #schermata-gioco .annuncio.entra .annuncio-meeple { animation: annuncio-tessera-cade 380ms cubic-bezier(0.2, 1.5, 0.4, 1) both; }
/* Robin Hood: la pedina che passa di mano dice «3 caselle», piu' larga di «500 €»: il tragitto si allarga perche' non copra le due tessere */
body.percorso #schermata-gioco .annuncio.robin .tragitto { width: calc(var(--vh) * 21); height: calc(var(--vh) * 5); margin: 0 calc(var(--vh) * 1.2); }
body.percorso #schermata-gioco .annuncio.robin .pedina { font-size: calc(var(--vh) * 2.6); padding: calc(var(--vh) * 0.7) calc(var(--vh) * 1.3); }

/* ---- 10. la ruota vera, piu` piccola, con «N PASSI» sugli spicchi; i comandi ----------------------------- */
body.percorso #schermata-gioco .colonna-ruota {
  position: absolute; left: calc(var(--u) * 62); bottom: calc(var(--u) * 12); top: auto; width: calc(var(--vh) * 46); height: calc(var(--vh) * 46); max-width: none; margin: 0; z-index: 2; pointer-events: auto;
}
body.percorso #schermata-gioco .colonna-ruota canvas { display: block; width: 100%; height: 100%; }
body.percorso #schermata-gioco .colonna-ruota .puntatore { top: calc(var(--vh) * -1.3); width: calc(var(--vh) * 3.2); height: calc(var(--vh) * 4.2); }
body.percorso #schermata-gioco .colonna-ruota .puntatore::after { top: calc(var(--vh) * 0.5); width: calc(var(--vh) * 1); height: calc(var(--vh) * 1); }
body.percorso #schermata-gioco .area-comandi {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 628); margin: 0 auto; width: max-content; max-width: none; flex-wrap: nowrap; justify-content: center; gap: calc(var(--vh) * 1.2); z-index: 2; white-space: nowrap;
}
body.percorso #schermata-gioco .colonna-centrale:has(.pannello-scelta:not(.nascosta)) .area-comandi { display: none; }
body.percorso #schermata-gioco .area-comandi button {
  font: 700 calc(var(--vh) * 2.4)/1.2 var(--font-testo); padding: calc(var(--vh) * 1.3) calc(var(--vh) * 2.4); border-radius: calc(var(--vh) * 1.2); background: rgba(14, 18, 52, 0.82);
  border: calc(var(--vh) * 0.25) solid rgba(255, 255, 255, 0.22); color: #fff;
}
body.percorso #schermata-gioco .area-comandi button.primario { background: var(--accento); color: #1a1a1a; border-color: transparent; font: 800 calc(var(--vh) * 2.8)/1.2 var(--font-titoli); }
body.percorso #schermata-gioco .area-comandi button.scende-sera { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--vh) * 1); background: #F2EFE4; color: #1a1a1a; border-color: transparent; }
body.percorso #schermata-gioco .area-comandi button.scende-sera.nascosta { display: none; }
body.percorso #schermata-gioco .area-comandi button.scende-sera svg { width: calc(var(--vh) * 2.6); height: calc(var(--vh) * 2.6); }
body.percorso #schermata-gioco .area-comandi button:disabled { opacity: 0.45; }
/* i riquadri a scelta (lettere, soluzione, Jolly, Freno, fine del giorno): prendono il posto dei comandi, sotto il cartello, senza mai
   scendere sul sentiero (che passa a y 880 sotto di loro) */
body.percorso #schermata-gioco .pannello-scelta {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 628); margin: 0 auto; width: calc(var(--u) * 840); max-width: none; max-height: calc(var(--u) * 232); overflow: visible; z-index: 2;
  padding: calc(var(--vh) * 1) calc(var(--vh) * 1.6) calc(var(--vh) * 1.2); border-radius: calc(var(--vh) * 1.6); background: rgba(14, 18, 52, 0.88); border: calc(var(--vh) * 0.25) solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 calc(var(--vh) * 1) calc(var(--vh) * 3) rgba(0, 0, 0, 0.45); text-align: center; pointer-events: auto;
}
body.percorso #schermata-gioco .pannello-scelta > p { font: 700 calc(var(--vh) * 2.4)/1.2 var(--font-testo); margin: 0 0 calc(var(--vh) * 0.8); }
body.percorso #schermata-gioco .griglia-lettere { gap: calc(var(--vh) * 0.7); max-width: none; margin: 0 auto calc(var(--vh) * 0.6); }
body.percorso #schermata-gioco .griglia-lettere button { width: calc(var(--vh) * 5.2); height: calc(var(--vh) * 5.4); font: 800 calc(var(--vh) * 3.2) var(--font-titoli); }
body.percorso #schermata-gioco .pannello-scelta button.primario, body.percorso #schermata-gioco .pannello-scelta button.secondario, body.percorso #schermata-gioco #form-soluzione button, body.percorso #schermata-gioco #form-lampo button {
  font-size: calc(var(--vh) * 2.4); padding: calc(var(--vh) * 1) calc(var(--vh) * 2.4); border-radius: calc(var(--vh) * 1.2);
}
body.percorso #schermata-gioco #input-soluzione, body.percorso #schermata-gioco #input-lampo { font-size: calc(var(--vh) * 2.4); padding: calc(var(--vh) * 0.9) calc(var(--vh) * 1.4); min-width: calc(var(--vh) * 40); }
body.percorso #schermata-gioco #pannello-jolly p, body.percorso #schermata-gioco #pannello-soluzione p, body.percorso #schermata-gioco #pannello-fine-round p, body.percorso #schermata-gioco #pannello-lampo p { font-size: calc(var(--vh) * 2.4); }
body.percorso #schermata-gioco #secondi-rimasti { font-size: calc(var(--vh) * 3); }
body.percorso #schermata-gioco .pannello-scelta .altre-mosse { display: none; }
body.percorso #schermata-gioco .fascia-express { font-size: calc(var(--vh) * 2); padding: calc(var(--vh) * 0.4) calc(var(--vh) * 1.4); margin-bottom: calc(var(--vh) * 0.6); }
body.percorso .pannello-percorso .scegli-giocatore { gap: calc(var(--vh) * 2); }
body.percorso .pannello-percorso .scegli-giocatore button { padding: calc(var(--vh) * 0.8) calc(var(--vh) * 1.6); font-size: calc(var(--vh) * 2); }
body.percorso .pannello-percorso .meeple-freno .meeple-html { width: calc(var(--vh) * 4.2); height: calc(var(--vh) * 5.6); }
body.percorso .pannello-percorso .scelte { gap: calc(var(--vh) * 1.4); }
/* sopra il cartello i colonnini non coprono i pulsanti */
body.percorso #schermata-gioco .tabellone-frase.scegli-casella .cella-tabellone.coperta { cursor: pointer; }

/* ---- 11. le tessere dei viaggiatori: IN COLONNA A SINISTRA, sopra la ruota; niente copre il sentiero ---- */
body.percorso #schermata-gioco .colonna-giocatori.tessere-viaggio {
  position: absolute; left: calc(var(--u) * 24); top: calc(var(--u) * 180); width: calc(var(--u) * 380); display: flex; flex-direction: column; flex-wrap: nowrap; gap: calc(var(--u) * 8);
  padding: 0; margin: 0; z-index: 2; grid-column: auto; grid-row: auto; justify-content: flex-start; align-items: stretch;
}
.tessera-viaggio {
  flex: 0 0 auto; min-width: 0; position: relative; height: calc(var(--u) * 88);
  display: grid; grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr) calc(var(--u) * 56); grid-template-rows: auto auto; column-gap: calc(var(--u) * 8); row-gap: calc(var(--u) * 4); align-content: center;
  padding: 0 calc(var(--u) * 8); border-radius: calc(var(--vh) * 1.2); background: rgba(14, 18, 52, 0.82); border-left: calc(var(--vh) * 0.5) solid var(--colore-giocatore);
  box-shadow: 0 calc(var(--vh) * 0.4) calc(var(--vh) * 1.2) rgba(0, 0, 0, 0.3); transition: background-color 260ms ease-out, box-shadow 260ms ease-out, opacity 260ms ease-out;
}
.tessera-viaggio.turno { background: var(--sfondo-turno); box-shadow: 0 0 0 calc(var(--vh) * 0.3) #fff, 0 0 calc(var(--vh) * 1.4) calc(var(--vh) * 0.2) var(--colore-giocatore); }
.tessera-viaggio:not(.turno) .nome, .tessera-viaggio:not(.turno) .seconda, .tessera-viaggio:not(.turno) .dove { opacity: 0.8; }
.tessera-viaggio .pedina-tessera { grid-row: 1 / span 2; grid-column: 1; align-self: center; width: calc(var(--u) * 40); height: calc(var(--u) * 54); display: flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 calc(var(--vh) * 0.3) calc(var(--vh) * 0.3) rgba(0, 0, 0, 0.45)); }
.tessera-viaggio .pedina-tessera .meeple-html { width: 100%; height: 100%; }
.tessera-viaggio.in-testa .pedina-tessera::before { content: ""; position: absolute; left: calc(var(--u) * 20); top: calc(var(--u) * 2); width: calc(var(--vh) * 1.5); height: calc(var(--vh) * 1.5); background: var(--oro, #F3C531); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 calc(var(--vh) * 0.5) rgba(243, 197, 49, 0.95)); }
.tessera-viaggio .nome { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: calc(var(--vh) * 0.7); font: 700 calc(var(--vh) * 1.9)/1.1 var(--font-testo); white-space: nowrap; overflow: hidden; text-overflow: clip; color: #fff; }
.tessera-viaggio .nome small { font-weight: 600; color: var(--testo-attenuato); font-size: 0.85em; }
.tessera-viaggio .dove { grid-column: 3; grid-row: 1; justify-self: end; font: 700 calc(var(--vh) * 1.5)/1 var(--font-testo); color: var(--testo-attenuato); white-space: nowrap; }
/* la seconda riga, una di queste e solo una: il fantasma piccolo e «al 15» · la tendina e «dorme al 13» · la fiammella e «fino all'alba» */
.tessera-viaggio .seconda { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: calc(var(--vh) * 0.7); font: 700 calc(var(--vh) * 1.5)/1 var(--font-testo); color: var(--testo-attenuato); white-space: nowrap; min-height: calc(var(--vh) * 2.4); }
.tessera-viaggio .seconda b { font: 800 calc(var(--vh) * 2)/1 var(--font-titoli); color: #fff; }
.tessera-viaggio .seconda .fantasma-tessera { width: calc(var(--vh) * 2.4); height: calc(var(--vh) * 2.4); display: inline-flex; opacity: 0.5; }
.tessera-viaggio .seconda .fantasma-tessera .meeple-html { width: 100%; height: 100%; }
.tessera-viaggio .seconda .fantasma-tessera .contorno { fill: none; stroke: #fff; stroke-width: 3.5; stroke-dasharray: 4 3; }
.tessera-viaggio .seconda .segno-tenda { width: calc(var(--vh) * 2.4); height: calc(var(--vh) * 2.4); display: inline-flex; }
.tessera-viaggio .seconda .segno-tenda svg, .tessera-viaggio .seconda .fiamma-tessera { width: calc(var(--vh) * 2.4); height: calc(var(--vh) * 2.4); }
.tessera-viaggio .carte { display: inline-flex; gap: calc(var(--vh) * 0.3); position: static; }
.tessera-viaggio .carta-jolly, .tessera-viaggio .carta-scudo { position: relative; width: calc(var(--vh) * 1.9); height: calc(var(--vh) * 2.4); border-radius: calc(var(--vh) * 0.3); font-size: calc(var(--vh) * 1.4); box-sizing: border-box; }
.tessera-viaggio .carta-scudo { background: var(--speciale); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.tessera-viaggio .carta-scudo .simbolo-speciale { width: calc(var(--vh) * 1.45); height: calc(var(--vh) * 1.45); }
.tessera-viaggio .carte .segno { display: inline-flex; width: calc(var(--vh) * 2.1); height: calc(var(--vh) * 2.1); align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #c62828; }
.tessera-viaggio .carte .segno .simbolo-speciale { width: calc(var(--vh) * 1.45); height: calc(var(--vh) * 1.45); }
/* Vento in poppa: il segno resta sulla tessera per tutto il turno di chi ce l'ha (la parola accanto al simbolo, perche' il solo simbolo non si capisce) */
.tessera-viaggio .carte .segno.vento { width: auto; border-radius: 999px; padding: 0 calc(var(--vh) * 0.7) 0 calc(var(--vh) * 0.35); gap: calc(var(--vh) * 0.3); background: var(--speciale); color: #fff; animation: poppa-respira 1800ms ease-in-out infinite alternate; }
.tessera-viaggio .carte .segno.vento em { font: 800 calc(var(--vh) * 1.3)/1 var(--font-titoli); font-style: normal; letter-spacing: 0.02em; }
@keyframes poppa-respira { from { box-shadow: 0 0 0 0 rgba(77, 182, 172, 0); } to { box-shadow: 0 0 calc(var(--vh) * 1) calc(var(--vh) * 0.15) rgba(77, 182, 172, 0.85); } }
.tessera-viaggio .carte .conta { position: absolute; right: -2px; bottom: -3px; min-width: calc(var(--vh) * 1.5); height: calc(var(--vh) * 1.5); padding: 0 calc(var(--vh) * 0.25); box-sizing: border-box; border-radius: 999px; background: #1a1a1a; color: #fff; font: 800 calc(var(--vh) * 1.1)/calc(var(--vh) * 1.5) var(--font-titoli); font-style: normal; text-align: center; }
.tessera-viaggio .carta-scudo.scatta { animation: scudo-scatta 600ms ease-out both; }
/* il pulsante della tenda: che sembri una tenda e un pulsante; mentre la ruota gira resta, ma spento */
.tessera-viaggio .btn-tenda {
  grid-column: 3; grid-row: 2; justify-self: end; align-self: end; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 56); height: calc(var(--u) * 44); padding: 0; margin: 0;
  border-radius: calc(var(--vh) * 1); background: linear-gradient(180deg, #FFDD7A, #F3C14F 60%, #E5AE34); border: 0; color: #2A1B0C; cursor: pointer;
  box-shadow: 0 calc(var(--vh) * 0.45) 0 #A87A14, 0 calc(var(--vh) * 0.7) calc(var(--vh) * 1.2) rgba(0, 0, 0, 0.35), inset 0 calc(var(--vh) * 0.2) 0 rgba(255, 255, 255, 0.6);
  animation: tenda-compare 320ms cubic-bezier(0.2, 1.3, 0.4, 1) both; transition: transform 120ms, box-shadow 120ms, filter 200ms;
}
.tessera-viaggio .btn-tenda.nascosta { display: none; }
.tessera-viaggio .btn-tenda svg { width: calc(var(--vh) * 3.2); height: calc(var(--vh) * 3.2); }
.tessera-viaggio .btn-tenda:hover:not(:disabled) { transform: translateY(calc(var(--vh) * -0.15)); box-shadow: 0 calc(var(--vh) * 0.6) 0 #A87A14, 0 calc(var(--vh) * 0.9) calc(var(--vh) * 1.4) rgba(0, 0, 0, 0.35), inset 0 calc(var(--vh) * 0.2) 0 rgba(255, 255, 255, 0.6); }
.tessera-viaggio .btn-tenda:active:not(:disabled) { transform: translateY(calc(var(--vh) * 0.3)); box-shadow: 0 calc(var(--vh) * 0.15) 0 #A87A14; }
.tessera-viaggio .btn-tenda.spenta, .tessera-viaggio .btn-tenda:disabled { background: linear-gradient(180deg, #B9B9B9, #9A9A9A 60%, #808080); color: #4A4A4A; box-shadow: 0 calc(var(--vh) * 0.45) 0 #5E5E5E; cursor: default; animation: none; opacity: 1; }
@keyframes tenda-compare { from { opacity: 0; scale: 0.7; } to { opacity: 1; scale: 1; } }
.tessera-viaggio.accampata { opacity: 0.78; }
/* il round lampo: nessuno e' di turno; si tocca la tessera di chi ha toccato per primo */
body.percorso .area-partita.lampo .tessera-viaggio { opacity: 1; }
body.percorso .area-partita.lampo .colonna-ruota, body.percorso .area-partita.lampo .area-comandi { display: none; }
body.percorso .area-partita.lampo-scelta .tessera-viaggio:not(.fuori) { cursor: pointer; animation: tessera-chiama 1.4s ease-in-out infinite; }
@keyframes tessera-chiama { 50% { transform: translateY(calc(var(--vh) * -0.3)); } }
body.percorso .area-partita.lampo .tessera-viaggio.prenotato { animation: none; box-shadow: inset 0 0 0 calc(var(--vh) * 0.4) #fff, 0 0 calc(var(--vh) * 3) calc(var(--vh) * 0.4) var(--colore-giocatore); }
body.percorso .area-partita.lampo .tessera-viaggio.fuori { animation: none; opacity: 0.4; filter: grayscale(0.7); cursor: default; }
body.percorso .area-partita.lampo .tessera-viaggio.fuori .nome::after { content: " ✕"; color: #ff8a8a; }
body.percorso .ribalta-partita { display: none; }

/* ---- 12. il velo, la conferma della tenda, le bolle ------------------------------------------------------------ */
.velo { position: fixed; inset: 0; z-index: 40; background: rgba(8, 8, 26, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-mask-image: var(--buco); mask-image: var(--buco); transition: opacity 260ms; }
.palco-sopra { position: fixed; left: var(--ox); top: var(--oy); width: calc(var(--u) * 1920); height: calc(var(--u) * 1080); z-index: 41; pointer-events: none; }
.palco-sopra > * { pointer-events: auto; }
.bolla-prima-volta {
  position: absolute; transform: translate(-50%, -100%); width: max-content; max-width: calc(var(--u) * 680);
  display: flex; align-items: center; gap: calc(var(--vh) * 1.6); padding: calc(var(--vh) * 1.1) calc(var(--vh) * 1.2) calc(var(--vh) * 1.1) calc(var(--vh) * 1.8); border-radius: calc(var(--vh) * 1.6); background: #fff; color: #111;
  font: 600 calc(var(--vh) * 2.5)/1.25 var(--font-testo); text-align: left; box-shadow: 0 calc(var(--vh) * 0.6) calc(var(--vh) * 2) rgba(0, 0, 0, 0.4);
}
.bolla-prima-volta .ok { flex: 0 0 auto; padding: calc(var(--vh) * 0.7) calc(var(--vh) * 1.6); border-radius: calc(var(--vh) * 0.9); border: 0; background: var(--accento); color: #1a1a1a; font: 800 calc(var(--vh) * 2.2) var(--font-titoli); cursor: pointer; }
.bolla-prima-volta::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--vh) * -1.4); width: calc(var(--vh) * 2.8); height: calc(var(--vh) * 1.4); background: #fff; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bolla-prima-volta.sotto { transform: translate(-50%, 0); }
.bolla-prima-volta.stretta { max-width: calc(var(--u) * 520); }
.bolla-prima-volta.sotto::after { bottom: auto; top: calc(var(--vh) * -1.4); clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.bolla-prima-volta.entra { animation: bolla-entra 260ms cubic-bezier(0.2, 1.3, 0.4, 1) both; }
@keyframes bolla-entra { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
.conferma-tenda {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(var(--u) * 660);
  padding: calc(var(--vh) * 2.4) calc(var(--vh) * 3); border-radius: calc(var(--vh) * 2); background: var(--sfondo-pannello); border: calc(var(--vh) * 0.4) solid var(--colore-giocatore); box-shadow: 0 calc(var(--vh) * 1.6) calc(var(--vh) * 4) rgba(0, 0, 0, 0.55); text-align: center;
}
.conferma-tenda.alta { top: calc(var(--u) * 380); }
.conferma-tenda h2 { margin: 0 0 calc(var(--vh) * 1.6); display: flex; align-items: center; justify-content: center; gap: calc(var(--vh) * 1.4); font: 800 calc(var(--vh) * 3.6)/1.1 var(--font-titoli); }
.conferma-tenda h2 .meeple-html { width: calc(var(--vh) * 4.2); height: calc(var(--vh) * 5.6); }
.conferma-tenda ul { list-style: none; margin: 0 0 calc(var(--vh) * 1.2); padding: 0; display: grid; gap: calc(var(--vh) * 0.8); font: 600 calc(var(--vh) * 2.6)/1.25 var(--font-testo); }
.conferma-tenda li b { font: 800 calc(var(--vh) * 3.6)/1 var(--font-titoli); color: #fff; }
.conferma-tenda li.al-sicuro b { color: var(--verde); }
.conferma-tenda li.persi b { color: var(--rosso); }
.conferma-tenda li small { font-size: calc(var(--vh) * 1.9); color: var(--testo-attenuato); }
.conferma-tenda li.tramonto-riga { color: var(--accento); }
.conferma-tenda .nota-tenda { margin: 0 0 calc(var(--vh) * 1.6); font: 600 calc(var(--vh) * 1.9)/1.3 var(--font-testo); color: var(--testo-attenuato); font-style: italic; }
.conferma-tenda .scelte { display: flex; gap: calc(var(--vh) * 1.4); justify-content: center; }
.conferma-tenda button { font-size: calc(var(--vh) * 2.6); padding: calc(var(--vh) * 1.3) calc(var(--vh) * 2.6); border-radius: calc(var(--vh) * 1.2); }
.conferma-tenda button.primario { background: #F3C14F; color: #1a1a1a; border-color: transparent; font: 800 calc(var(--vh) * 2.8) var(--font-titoli); }

/* ---- 13. L'ISCRIZIONE sulla stessa plancia: «Chi parte» nel cartello, il meeple accanto al nome ----- */
.iscrizione-plancia { text-align: left; }
.iscrizione-plancia .testata-iscrizione-plancia { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 18); width: calc(var(--u) * 420); display: flex; flex-direction: column; gap: calc(var(--vh) * 1); align-items: flex-start; }
.iscrizione-plancia .testata-iscrizione-plancia .titolo-iscrizione { text-align: left; }
.iscrizione-plancia .testata-iscrizione-plancia h1 { margin: 0; text-align: left; font: 800 calc(var(--vh) * 4)/1 var(--font-titoli); color: #fff; text-shadow: 0 calc(var(--vh) * 0.3) 0 rgba(0, 0, 0, 0.35); }
.iscrizione-plancia .testata-iscrizione-plancia .sottotitolo { margin: calc(var(--vh) * 0.6) 0 0; text-align: left; font: 600 calc(var(--vh) * 1.9)/1.2 var(--font-testo); color: rgba(255, 255, 255, 0.8); }
.iscrizione-plancia .testata-iscrizione-plancia nav { display: flex; gap: calc(var(--vh) * 1); }
.iscrizione-plancia .testata-iscrizione-plancia nav button { font-size: calc(var(--vh) * 1.8); padding: calc(var(--vh) * 0.9) calc(var(--vh) * 1.6); border-radius: calc(var(--vh) * 0.9); }
.iscrizione-plancia .pannello-plancia { position: absolute; padding: calc(var(--vh) * 1.6) calc(var(--vh) * 2); border-radius: calc(var(--vh) * 1.4); background: rgba(14, 18, 52, 0.82); box-shadow: 0 calc(var(--vh) * 0.6) calc(var(--vh) * 1.6) rgba(0, 0, 0, 0.35); color: #fff; box-sizing: border-box; }
.iscrizione-plancia .titolo-pannello { margin: 0 0 calc(var(--vh) * 1); font: 700 calc(var(--vh) * 1.9)/1.2 var(--font-titoli); color: var(--testo-attenuato); letter-spacing: 0.04em; text-transform: uppercase; display: flex; align-items: center; gap: calc(var(--vh) * 1); }
.iscrizione-plancia .colonna-iscrizione { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 200); width: calc(var(--u) * 420); display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.iscrizione-plancia .colonna-iscrizione .pannello-plancia { position: static; }
.iscrizione-plancia .frecce-round { display: flex; gap: calc(var(--vh) * 0.8); }
.iscrizione-plancia .frecce-round .freccia { flex: 1; font: 800 calc(var(--vh) * 2.4) var(--font-titoli); padding: calc(var(--vh) * 1.1) 0; border-radius: calc(var(--vh) * 0.9); background: rgba(255, 255, 255, 0.08); border: calc(var(--vh) * 0.25) solid rgba(255, 255, 255, 0.18); color: #fff; }
.iscrizione-plancia .frecce-round .freccia.selezionata { background: var(--accento); color: #1a1a1a; border-color: transparent; }
.iscrizione-plancia .pannello-stasera { display: flex; flex-direction: column; gap: calc(var(--vh) * 0.7); text-align: left; }
.iscrizione-plancia .pannello-stasera .scelta-gruppi { text-align: left; }
.iscrizione-plancia .pillola-partita { padding: calc(var(--vh) * 0.3) calc(var(--vh) * 1.2); border-radius: 999px; background: var(--accento); color: #1a1a1a; font: 800 calc(var(--vh) * 1.7) var(--font-titoli); text-transform: none; letter-spacing: 0; }
.iscrizione-plancia .pannello-stasera .link { background: none; border: 0; color: var(--testo-attenuato); text-decoration: underline; font: 600 calc(var(--vh) * 1.7) var(--font-testo); padding: 0; text-transform: none; letter-spacing: 0; }
.iscrizione-plancia .pannello-stasera .scelta-gruppi p, .iscrizione-plancia .pannello-stasera .etichetta { margin: 0; font: 700 calc(var(--vh) * 1.8) var(--font-testo); color: rgba(255, 255, 255, 0.8); text-transform: none; letter-spacing: 0; }
.iscrizione-plancia .pannello-stasera .conta-frasi { font-weight: 600; color: var(--testo-attenuato); }
.iscrizione-plancia .pannello-stasera .opzioni-gruppi { display: flex; gap: calc(var(--vh) * 0.6); flex-wrap: wrap; justify-content: flex-start; margin: calc(var(--vh) * 0.4) 0; }
.iscrizione-plancia .pannello-stasera .opzione-gruppo { font: 700 calc(var(--vh) * 1.9) var(--font-testo); padding: calc(var(--vh) * 0.7) calc(var(--vh) * 1.4); border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: calc(var(--vh) * 0.25) solid rgba(255, 255, 255, 0.18); color: #fff; }
.iscrizione-plancia .pannello-stasera .opzione-gruppo.selezionata { background: #fff; color: #111; border-color: #fff; }
.iscrizione-plancia .pannello-stasera .scelta-extra { display: flex; flex-direction: column; gap: calc(var(--vh) * 0.8); margin-top: calc(var(--vh) * 0.4); }
.iscrizione-plancia .pannello-stasera .interruttore { font: 600 calc(var(--vh) * 2) var(--font-testo); display: flex; align-items: center; gap: calc(var(--vh) * 0.8); }
.iscrizione-plancia .pannello-stasera .interruttore small { font-size: 0.8em; color: var(--testo-attenuato); }
.iscrizione-plancia .pannello-stasera .campo-premio { display: flex; flex-direction: column; gap: calc(var(--vh) * 0.4); font: 600 calc(var(--vh) * 1.8) var(--font-testo); }
.iscrizione-plancia .pannello-stasera .campo-premio input { font: 600 calc(var(--vh) * 2) var(--font-testo); padding: calc(var(--vh) * 0.7) calc(var(--vh) * 1.2); border-radius: calc(var(--vh) * 0.8); border: calc(var(--vh) * 0.2) solid rgba(255, 255, 255, 0.25); background: #0d1230; color: #fff; }
.iscrizione-plancia .legenda-plancia { position: absolute; left: calc(var(--u) * 1440); top: calc(var(--u) * 28); width: calc(var(--u) * 440); }
.iscrizione-plancia .legenda-plancia .titolo-pannello { color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.tessere-tappe-plancia { display: grid; gap: calc(var(--vh) * 0.6); }
.tessera-tappa { display: flex; align-items: center; gap: calc(var(--vh) * 1.1); padding: calc(var(--vh) * 0.4) calc(var(--vh) * 1); border-radius: calc(var(--vh) * 1); background: rgba(14, 18, 52, 0.82); border: 0; color: #fff; font: 600 calc(var(--vh) * 1.7)/1.2 var(--font-testo); text-align: left; cursor: pointer; }
.tessera-tappa .testo { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.tessera-tappa b { font: 800 calc(var(--vh) * 1.9) var(--font-titoli); }
.tessera-tappa .testo span { font: 400 calc(var(--vh) * 1.5)/1.2 var(--font-testo); color: var(--testo-attenuato); }
.tessera-tappa .disco { flex: 0 0 auto; width: calc(var(--vh) * 3.8); height: calc(var(--vh) * 3.8); border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--speciale-scuro); box-shadow: 0 calc(var(--vh) * 0.3) calc(var(--vh) * 0.8) rgba(0, 0, 0, 0.4); }
.tessera-tappa .disco svg { width: calc(var(--vh) * 2.6); height: calc(var(--vh) * 2.6); fill: currentColor; stroke: currentColor; }
.tessera-tappa .disco .simbolo-speciale { width: calc(var(--vh) * 2.6); height: calc(var(--vh) * 2.6); }
.tessera-tappa .disco.fuoco { background: rgba(255, 255, 255, 0.12); }
.tessera-tappa .disco.fuoco svg { width: calc(var(--vh) * 3.4); height: calc(var(--vh) * 3.4); fill: none; stroke: none; }
.iscrizione-plancia .btn-inizia { position: static; width: 100%; box-sizing: border-box; font: 800 calc(var(--vh) * 3.2) var(--font-titoli); padding: calc(var(--vh) * 1.6) calc(var(--vh) * 4); border-radius: calc(var(--vh) * 1.4); background: var(--accento); color: #1a1a1a; border: 0; box-shadow: 0 calc(var(--vh) * 0.5) 0 #A86A0A, 0 calc(var(--vh) * 1) calc(var(--vh) * 2) rgba(0, 0, 0, 0.4); }
.iscrizione-plancia .messaggio-errore { position: static; margin: 0; font-size: calc(var(--vh) * 2); text-align: left; min-height: 0; }
.iscrizione-plancia .messaggio-errore:empty { display: none; }
.iscrizione-plancia .btn-regole-percorso { position: static; align-self: flex-start; font: 600 calc(var(--vh) * 1.8) var(--font-testo); color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.iscrizione-plancia .pie-iscrizione { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 10); margin: 0; text-align: center; display: flex; justify-content: center; gap: calc(var(--vh) * 3); padding: 0; }
.iscrizione-plancia .pie-iscrizione p { margin: 0; font-size: calc(var(--vh) * 1.5); color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.iscrizione-plancia .pie-iscrizione .link { font-size: calc(var(--vh) * 1.5); color: rgba(255, 255, 255, 0.85); }
/* il cartello di legno di «Chi parte» */
.iscrizione-plancia .cartello-chi-parte { --cella: calc(var(--vh) * 5.6); position: absolute; left: 0; right: 0; top: calc(var(--u) * 204); margin: 0 auto; width: max-content; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.cartello-chi-parte::before { left: calc(var(--u) * 40); top: calc(var(--u) * 300); }
.cartello-chi-parte::after { right: calc(var(--u) * 40); top: calc(var(--u) * 300); }
.tabellone-legno {
  display: flex; flex-direction: column; gap: 0; padding: calc(var(--vh) * 1.2) calc(var(--vh) * 1.4); width: calc(14 * var(--cella) + var(--vh) * 2.8); box-sizing: border-box; gap: calc(var(--vh) * 1);
  background: linear-gradient(180deg, var(--legno-chiaro), var(--legno) 18%, var(--legno-scuro)); border: calc(var(--vh) * 0.55) solid #5A3A1E; border-radius: calc(var(--vh) * 1.4);
  box-shadow: inset 0 0 0 calc(var(--vh) * 0.3) rgba(255, 230, 190, 0.35), 0 calc(var(--vh) * 1.4) calc(var(--vh) * 3.4) rgba(0, 0, 0, 0.5);
}
.targa-legno { position: relative; margin-top: calc(var(--vh) * 1.6); padding: calc(var(--vh) * 0.7) calc(var(--vh) * 3.2); border-radius: 999px; background: #fff; color: #111; font: 800 calc(var(--vh) * 3)/1.15 var(--font-titoli); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 calc(var(--vh) * 0.4) 0 rgba(0, 0, 0, 0.25); }
.chi-parte-testa { display: flex; justify-content: flex-end; }
.chi-parte-testa .segmenti { display: inline-flex; border-radius: 999px; background: rgba(0, 0, 0, 0.35); padding: calc(var(--vh) * 0.3); }
.chi-parte-testa .segmento { font: 700 calc(var(--vh) * 1.8) var(--font-testo); padding: calc(var(--vh) * 0.6) calc(var(--vh) * 1.4); border-radius: 999px; border: 0; background: transparent; color: #fff; }
.chi-parte-testa .segmento.selezionata { background: #fff; color: #111; }
.lista-chi-parte { display: flex; flex-direction: column; gap: calc(var(--vh) * 0.9); }
.riga-chi-parte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: calc(var(--vh) * 1.4); padding: calc(var(--vh) * 0.6) calc(var(--vh) * 1) calc(var(--vh) * 0.6) calc(var(--vh) * 0.8); border-radius: calc(var(--vh) * 1); background: rgba(255, 245, 225, 0.92); border-left: calc(var(--vh) * 0.7) solid var(--colore-giocatore); color: #111; }
.riga-chi-parte .interruttore { margin: 0; color: #111; font: 600 calc(var(--vh) * 1.8) var(--font-testo); gap: calc(var(--vh) * 0.6); }
.riga-chi-parte .interruttore .testo-interruttore { color: #111; font-size: calc(var(--vh) * 1.8); }
.squadra-mappa { display: grid; gap: calc(var(--vh) * 0.5); padding: calc(var(--vh) * 0.6); border-radius: calc(var(--vh) * 1.1); background: rgba(255, 245, 225, 0.5); border-left: calc(var(--vh) * 0.7) solid var(--colore-giocatore); }
.squadra-mappa .riga-chi-parte { grid-template-columns: auto minmax(0, 1fr); border-left: 0; }
.squadra-mappa .componenti-mappa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--vh) * 0.6); }
.squadra-mappa .componente { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--vh) * 0.6); align-items: center; padding: calc(var(--vh) * 0.3) calc(var(--vh) * 0.6); border-radius: calc(var(--vh) * 0.8); background: rgba(255, 245, 225, 0.92); color: #111; }
.squadra-mappa .componente .nome-chi-parte { font-size: calc(var(--vh) * 2); padding: calc(var(--vh) * 0.6) calc(var(--vh) * 0.9); }
.squadra-mappa .componente .interruttore { margin: 0; color: #111; font-size: calc(var(--vh) * 1.6); gap: calc(var(--vh) * 0.4); }
.squadra-mappa .componente .interruttore .testo-interruttore { font-size: calc(var(--vh) * 1.6); color: #111; }
.scegli-meeple { display: flex; gap: calc(var(--vh) * 0.4); }
.meeple-scelta { width: calc(var(--vh) * 4.6); height: calc(var(--vh) * 5.4); padding: calc(var(--vh) * 0.2); border-radius: calc(var(--vh) * 0.8); border: calc(var(--vh) * 0.3) solid transparent; background: rgba(0, 0, 0, 0.06); cursor: pointer; display: flex; align-items: flex-end; justify-content: center; }
.meeple-scelta .meeple-html { width: 100%; height: 100%; }
.meeple-scelta.scelto { border-color: #111; background: #fff; box-shadow: 0 calc(var(--vh) * 0.3) calc(var(--vh) * 0.8) rgba(0, 0, 0, 0.3); transform: scale(1.12); }
.meeple-scelta.preso { opacity: 0.22; cursor: default; filter: grayscale(1); }
.nome-chi-parte { font: 700 calc(var(--vh) * 2.6) var(--font-testo); padding: calc(var(--vh) * 0.8) calc(var(--vh) * 1.2); border-radius: calc(var(--vh) * 0.8); border: calc(var(--vh) * 0.25) solid rgba(0, 0, 0, 0.2); background: #fff; color: #111; min-width: 0; }
.riga-chi-parte .btn-rimuovi { width: calc(var(--vh) * 3.6); height: calc(var(--vh) * 3.6); padding: 0; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.1); color: #111; font-size: calc(var(--vh) * 1.8); }
.riga-chi-parte .btn-rimuovi.segnaposto { visibility: hidden; }
.btn-un-altro { align-self: flex-start; font: 700 calc(var(--vh) * 2) var(--font-testo); padding: calc(var(--vh) * 0.8) calc(var(--vh) * 1.6); border-radius: calc(var(--vh) * 0.9); border: calc(var(--vh) * 0.25) dashed rgba(255, 255, 255, 0.6); background: transparent; color: #fff; }

/* ---- 14. il pannello di controllo del regista ------------------------------------------------------------------ */
.regole-percorso { max-width: calc(var(--vh) * 62); }
.campi-regole { display: grid; gap: calc(var(--vh) * 1.2); margin: 0 0 calc(var(--vh) * 2); text-align: left; }
.campo-regola { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: calc(var(--vh) * 1); align-items: center; font: 600 calc(var(--vh) * 2.1)/1.25 var(--font-testo); }
.campo-regola input, .campo-regola select { font: 700 calc(var(--vh) * 2.2) var(--font-testo); width: calc(var(--vh) * 9); padding: calc(var(--vh) * 0.7) calc(var(--vh) * 1); border-radius: calc(var(--vh) * 0.8); border: calc(var(--vh) * 0.25) solid var(--bordo); background: #0d1230; color: #fff; }
.campo-regola select { width: auto; grid-column: 2 / span 2; }
.campo-regola .unita-regola { color: var(--testo-attenuato); min-width: calc(var(--vh) * 4); }
.nota-regole { margin: 0; font: 600 calc(var(--vh) * 1.8)/1.35 var(--font-testo); color: var(--testo-attenuato); }

@media (prefers-reduced-motion: reduce) {
  .palco-percorso *, .palco-percorso *::before, .palco-percorso *::after,
  body.percorso #schermata-gioco *, #schermata-iscrizione-percorso *, .palco-sopra *, .velo { animation: none !important; transition: none !important; }
}

/* ---- (rimasto dal disegno del 07/10) il cartello «Nebbia!»: grigio di nebbia, non il rosso della Bancarotta ---- */
.annuncio.scena.nebbia .annuncio-titolo { color: #c9d3de; text-shadow: 0 0.4vh 0 rgba(0, 0, 0, 0.4), 0 0 3.5vh rgba(201, 211, 222, 0.45); }

/* ---- i riquadri del Percorso (Freno) ----------------------------------------------- */
.pannello-percorso p b { color: var(--accento); font-weight: 800; }
.pannello-percorso .scelte { display: flex; gap: 1.4vh; justify-content: center; flex-wrap: wrap; }
.pannello-percorso button.primario { background: var(--speciale); border-color: var(--speciale-scuro); color: #fff; }
.pannello-percorso .scegli-giocatore { display: flex; gap: 2vh; justify-content: center; margin-top: 0.6vh; }
.pannello-percorso .scegli-giocatore button {
  display: flex; flex-direction: column; align-items: center; gap: 0.6vh;
  padding: 1vh 1.6vh; border-radius: 1.2vh; border: 0.3vh solid var(--colore-giocatore);
  background: rgba(255, 255, 255, 0.08); color: #fff; font: 700 2vh/1 var(--font-testo);
}
.pannello-percorso .scelte button { white-space: nowrap; }
.pannello-percorso button:disabled { opacity: 0.45; cursor: default; }

/* ---- la festa e la finale del Percorso: caselle al posto degli euro ------------------ */
.scheda-festa.percorso .festa-euro { font-size: 0.45em; }
.scheda-finale-vincitore.percorso .festa-euro { font-size: 0.45em; }
.scheda-festa.traguardo .festa-cifra-wrap, .scheda-finale-vincitore.traguardo .festa-cifra-wrap { font-size: 7vh; }
@media (max-width: 1199px) {
  .scheda-festa.traguardo .festa-cifra-wrap, .scheda-finale-vincitore.traguardo .festa-cifra-wrap { font-size: 2.2rem; }
}

/* ---- le sigle a due lettere (stessa iniziale fra due giocatori): «Ma», «Mr» ------------------ */
@media (min-width: 1200px) { .annuncio.robin .annuncio-tessera.due { font-size: 4.2vh; } }
.festa-immagine.due { font-size: 2.6rem; }
@media (min-width: 1200px) {
  .annuncio.tocca .annuncio-tessera.due { font-size: 5.8vh; }
  .festa-immagine.due { font-size: 5.2vh; }
}

/* ---- l'iscrizione della Classica: la partita scelta, accanto a «Stasera» ----------------- */
.blocco-stasera .riga-titolo-blocco { display: flex; align-items: center; gap: 3vh; margin-bottom: 1.8vh; }
.blocco-stasera .riga-titolo-blocco h2 { margin: 0; }

/* la fascia del Vento sul pannello delle consonanti: la stessa dell'Express e di Quante?, senza le altre mosse */
.pannello-consonanti.vento .fascia-express { display: flex; background: var(--speciale); border-color: var(--speciale-scuro); color: #fff; }
.pannello-consonanti.vento .altre-mosse { display: none; }

/* ============================================================================
   La scelta della partita, prima dei giocatori — Chiara, 08/10/2026.
   Portato qui in coda da proposta.css (design/prototipi/2026-10-08-scelta-modalita/), tale e quale.
   Due disegni: lo schermo largo 16:9 (da 1200px) e «basta che non si rompa» sotto.
   ============================================================================ */

/* ---- 1. la schermata: stessa ossatura dell'iscrizione larga ------------------ */
.schermata-modalita { max-width: 900px; margin: 0 auto; padding: 1.2rem; }
.corpo-modalita { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; margin: 1.6rem 0; }

/* la domanda: una sola, quella che il regista fa ai ragazzi */
.domanda-modalita { margin: 0; text-align: center; font: 700 1.6rem var(--font-titoli); color: var(--testo); }

/* ---- 2. le due carte: la carta e` il pulsante --------------------------------- */
.carte-modalita { display: grid; grid-template-columns: 1fr; gap: 1.2rem; width: 100%; }
.carta-modalita {
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  padding: 1.4rem 1.2rem 1.5rem;
  background: var(--sfondo-pannello); border: 3px solid var(--bordo); border-radius: 22px;
  color: var(--testo); text-align: center; cursor: pointer;
  transition: transform 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out;
}
.carta-modalita:hover, .carta-modalita:focus-visible {
  border-color: var(--accento); transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--accento);
  outline: none;
}
.carta-modalita:active { transform: translateY(0); transition-duration: 60ms; }
@media (prefers-reduced-motion: reduce) { .carta-modalita, .carta-modalita:hover { transition: none; transform: none; } }

.carta-nome { font: 700 2.2rem/1 var(--font-titoli); }

/* la ruota vera della modalita`, disegnata da ruota.js (non si tocca: tutta la carta e` il pulsante) */
.carta-ruota { position: relative; display: block; width: min(52vw, 240px); pointer-events: none; }
.carta-ruota canvas { display: block; width: 100%; height: auto; border-radius: 50%; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35)); }
.carta-ruota .puntatore { top: -10px; width: 22px; height: 30px; }

/* la scena: cosa si porta a casa (Classica) o dove si corre (Percorso). Stessa altezza nelle due carte. */
.carta-scena { display: flex; align-items: center; justify-content: center; gap: 0.8rem; height: 3rem; width: 100%; }
.mini-tessera {
  width: 2rem; height: 2.4rem; border-radius: 6px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #111; font: 800 1.3rem var(--font-titoli);
  outline: 3px solid var(--colore-giocatore); outline-offset: 2px;
}
.mini-soldi { font: 800 2rem/1 var(--font-titoli); color: #fff; white-space: nowrap; }
.mini-soldi .mini-euro { font-size: 0.55em; color: var(--accento); }

/* il pezzo di sentiero del Percorso (R16): sette pietre, il Viandante sulla terza, il suo fantasma sulla sesta, la bandiera (lo disegna percorso-gioco.js) */
.scena-percorso svg { display: block; height: 100%; width: auto; max-width: 100%; overflow: visible; }

/* la riga: una per carta, per la prima sera */
.carta-riga { font-size: 1rem; line-height: 1.35; color: var(--testo-attenuato); max-width: 22em; text-wrap: balance; }

/* scelta aperta 1, variante B: l'etichetta «l'ultima volta» sulla carta giocata la sera prima (?ultima=) */
.carta-modalita { position: relative; }
.carta-modalita .ultima-volta {
  position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%);
  padding: 0.25rem 0.8rem; border-radius: 999px; background: #fff; color: #111;
  font: 700 0.8rem/1.2 var(--font-testo); white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* ---- 3. nell'iscrizione: la partita scelta, al posto del segmento ---------------------- */
.partita-scelta {
  display: inline-flex; align-items: baseline; gap: 0.35em;
  padding: 0.4rem 1rem; border-radius: 999px; background: #fff; color: #111; font-weight: 700;
}
.partita-scelta small { font-weight: 400; color: #444; font-size: 0.85em; }
button.cambia-partita { font-size: 0.95rem; }  /* button.link ha specificita` piu` alta: serve l'elemento */

/* ---- 4. da 1200px: lo schermo 16:9, niente scorrimento ------------------------------ */
@media (min-width: 1200px) {
  .schermata-modalita {
    max-width: none; height: 100vh; padding: 3vh 4vw 2vh;
    display: flex; flex-direction: column; gap: 0;
  }
  .corpo-modalita { flex: 1 1 auto; min-height: 0; justify-content: center; gap: 3.2vh; margin: 2vh 0 0; }
  .domanda-modalita { font-size: 4.2vh; }

  .carte-modalita { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3vw; width: min(100%, 150vh); }
  .carta-modalita { gap: 2vh; padding: 3vh 3vh 3.4vh; border-width: 0.3vh; border-radius: 2.6vh; }
  .carta-modalita:hover, .carta-modalita:focus-visible { transform: translateY(-0.6vh); box-shadow: 0 1.4vh 3.6vh rgba(0, 0, 0, 0.38), 0 0 0 0.15vh var(--accento); }
  .carta-nome { font-size: 5.6vh; }
  .carta-ruota { width: 30vh; }
  .carta-ruota canvas { filter: drop-shadow(0 1.2vh 2.4vh rgba(0, 0, 0, 0.35)); }
  .carta-ruota .puntatore { top: -1.3vh; width: 2.6vh; height: 3.6vh; }
  .carta-scena { height: 5vh; gap: 1.4vh; }
  .mini-tessera { width: 3.4vh; height: 4.1vh; font-size: 2.3vh; border-radius: 0.7vh; outline-width: 0.3vh; outline-offset: 0.3vh; }
  .mini-soldi { font-size: 3.6vh; }
  .carta-riga { font-size: 2.2vh; }
  .carta-modalita .ultima-volta { top: -1.6vh; padding: 0.5vh 1.6vh; font-size: 1.7vh; }

  .partita-scelta { font-size: 2vh; padding: 0.8vh 2.2vh; }
  button.cambia-partita { font-size: 1.9vh; }
  .pie-iscrizione { margin-top: auto; padding-top: 1.6vh; }
}

/* ============================================================================
   L'iscrizione e il palco della Classica — Chiara, 08/10/2026.
   Prima parte (iscrizione): la scena sotto le tessere e` la sola ribalta con le luci (le casseforti vuote sono tolte,
   scelta 3 della pagina del palco). Il resto e` proposta.css del palco in partita
   (design/prototipi/2026-10-08-palco-in-partita/), portato tale e quale tranne i ritocchi
   segnati [Erbottega] (scope per il Percorso, righe della finale). La ribalta e` un pezzo solo, in tre posti.
   ============================================================================ */
.scena-iscrizione:empty { display: none; }

/* ============================================================================
   [PROPOSTA] Il palco continua in partita — Chiara, 08/10/2026.
   Damiano: «molto meglio così, il palco a questo punto lo lascerei anche durante il gioco».
   Si aggiunge DOPO style.css (la copia di lavoro dell'08/10 con il palco dell'iscrizione
   già costruito da Erbottega) e ne usa variabili e pezzi. Da portare in style.css così com'è.

   In una riga: la ribalta con le luci è UN pezzo solo, e sta in tre posti: sotto le tessere
   dell'iscrizione, sotto la fila delle tessere in partita, sotto i podi della finale. Le
   tessere diventano i podi del palco (il corpo scuro delle casseforti, il bordo colorato in
   alto), la cassaforte si legge in oro come un display. Il palco partecipa a quattro momenti:
   si accende (round nuovo, giocatore nuovo, soldi arrivati), il numero salta (lettera
   giusta), buio (Bancarotta), lampeggia (la festa).
   Due disegni: lo schermo 16:9 da 1200px (vh), e «basta che non si rompa» sotto (rem).
   ============================================================================ */

/* ---- 0. LA RIBALTA: un pezzo solo, usato in tre posti ----------------------------------
   Gli stessi valori di .palco .ribalta / .palco .luci dell'iscrizione (style.css): quelle due
   regole si possono togliere lo scope (.palco) e diventano queste. Qui si scrivono senza
   scope perché valgano anche sotto le tessere in partita e sotto i podi della finale. */
.ribalta { position: relative; height: 1rem; margin: 0.7rem 0 0; border-top: 3px solid #d9a52a; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, rgba(243, 197, 49, 0.32), transparent); }
.luci { position: absolute; left: 0; right: 0; top: -0.6rem; height: 1.2rem; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff3c4 0 2px, rgba(255, 214, 110, 0.8) 3px, rgba(255, 214, 110, 0.2) 6px, transparent 9px);
  background-size: 2.4rem 1.2rem; background-repeat: repeat-x; background-position: 50% 50%;
  transition: opacity 300ms ease-out; }

/* le luci che si accendono: lo stesso lampo del giocatore nuovo nell'iscrizione (luci-accendono è già in style.css).
   Qui scatta anche a ogni round nuovo e quando i soldi della festa sono arrivati in cassaforte. */
.ribalta.accesa .luci { animation: luci-accendono 700ms ease-out both; }
@keyframes luci-accendono { 0% { filter: brightness(0.4); } 40% { filter: brightness(1.6); } 100% { filter: brightness(1); } }
/* buio: alla Bancarotta le luci si spengono (la classe sta su .area-partita), si riaccendono col «Tocca a» */
.area-partita.buio .luci { opacity: 0.1; }
/* la festa: le lampadine si alternano, una sì e una no, ogni 240 ms (scelta aperta: ?lucifesta=no le lascia ferme) */
.ribalta.festa .luci { animation: luci-festa 480ms linear infinite; }
@keyframes luci-festa { 0%, 49.9% { background-position: 50% 50%; } 50%, 100% { background-position: calc(50% + 1.2rem) 50%; } }

/* ---- 1. L'ISCRIZIONE: le tessere stanno direttamente sulla ribalta --------------------
   Damiano (08/10): «è inutile scrivere in cassaforte 0». Senza la cifra il riquadro è un buco:
   si toglie, e la ribalta sta subito sotto le tessere, come poi in partita (raccomandazione;
   le alternative nella pagina per Damiano). gioco.js: disegnaScena() crea solo la ribalta.
   Il bagliore rosso del sipario non c'è più da nessuna parte: misurato in partita e nella finale, non si vede. */
.scena-iscrizione { margin-top: 0; }
.palco { position: relative; padding: 0; background: none; }
.palco .ribalta { margin-top: 0.7rem; }

/* ---- 2. IN PARTITA: la fila delle tessere diventa la fila dei podi ------------------------
   (solo da 1200px, dove le tessere stanno in fila: sotto, la colonna di tessere resta com'è e la ribalta non c'è) */
.ribalta-partita { display: none; }

/* ---- 3. LA FINALE: un podio per giocatore, sulla ribalta ----------------------------------- */
/* [Erbottega] le righe «1. Giulia — 6.500 €» le dicono i podi: gioco.js le nasconde nella Classica (restano al Percorso) */
.palco-finale { position: relative; width: 100%; max-width: 640px; margin: 0.4rem auto 0.8rem; padding: 0 0 0.2rem; }
.palco-finale .podi { display: flex; justify-content: center; align-items: flex-end; gap: 0.8rem; padding: 0.9rem 0.8rem 0; }
.podio-finale {
  position: relative; flex: 1 1 0; min-width: 0; max-width: 170px;
  display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); column-gap: 0.5rem; row-gap: 0.1rem; align-items: center; text-align: left;
  padding: 0.6rem 0.7rem 0.55rem; border-radius: 10px;
  background: #141a3a; border: 2px solid #2a3268; border-top: 6px solid var(--colore-giocatore);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 6px 14px rgba(0, 0, 0, 0.35);
}
/* la tessera con l'iniziale: la stessa della tessera in partita (.scheda-giocatore .tessera-giocatore) */
.podio-finale .tessera-giocatore { grid-column: 1; grid-row: 1; width: 2.3rem; height: 2.8rem; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: #fff; color: #111; font: 800 1.5rem var(--font-titoli); outline: 3px solid var(--colore-giocatore); outline-offset: 3px; }
.podio-finale .tessera-giocatore.due { font-size: 1rem; }
.podio-finale .nome { grid-column: 2; grid-row: 1; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
/* la cifra: la cassaforte, in oro come un display (la stessa forma della cifra del palco dell'iscrizione di prima) */
.podio-finale .cifra { grid-column: 1 / -1; font: 800 1.8rem/1 var(--font-titoli); color: #FFD86B; letter-spacing: 0.02em; white-space: nowrap;
  text-shadow: 0 0 2px rgba(255, 216, 107, 0.9), 0 0 12px rgba(255, 216, 107, 0.55); }
.podio-finale .cifra .euro { font-size: 0.55em; color: var(--accento); margin-left: 0.2em; }
.podio-finale .etichetta { grid-column: 1 / -1; font-size: 0.8rem; color: var(--testo-attenuato); }
/* il posto in classifica: un bollo bianco in alto a destra; d'oro per chi ha vinto. A pari soldi lo stesso numero. */
.podio-finale .posto { position: absolute; top: -0.9rem; right: 0.5rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: #fff; color: #111; font: 800 0.9rem/1.8rem var(--font-titoli); text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); }
/* chi ha vinto: un passo avanti, il corpo nel suo colore, l'anello bianco e l'alone che respira (come la tessera di turno) */
.podio-finale.vincitore { background: color-mix(in srgb, var(--colore-giocatore) 60%, #141a3a); transform: translateY(-0.4rem) scale(1.06);
  box-shadow: 0 0 0 3px #fff, 0 0 14px 2px var(--colore-giocatore), 0 8px 18px rgba(0, 0, 0, 0.45); z-index: 1; }
.podio-finale.vincitore .posto { background: #FFD86B; }
/* i podi entrano uno dopo l'altro (90 ms di scarto), poi le luci si accendono */
.podio-finale.entra { animation: podio-entra 320ms cubic-bezier(0.2, 1.4, 0.4, 1) both; animation-delay: var(--ritardo, 0ms); }
@keyframes podio-entra { from { opacity: 0; transform: translateY(1rem); } }
.podio-finale.vincitore.entra { animation-name: podio-entra-vincitore; }
@keyframes podio-entra-vincitore { from { opacity: 0; transform: translateY(1rem) scale(1.06); } to { transform: translateY(-0.4rem) scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .ribalta.accesa .luci, .ribalta.festa .luci, .podio-finale.entra { animation: none; }
  .luci { transition: none; }
}

/* ---- 4. DA 1200px: lo schermo 16:9, misure in vh come il resto ----------------------------- */
@media (min-width: 1200px) {
  .ribalta { height: 1.8vh; margin: 1.2vh 0 0; border-top-width: 0.4vh; border-radius: 0 0 1vh 1vh; }
  .luci { top: -1vh; height: 2vh; background-size: 4vh 2vh;
    background-image: radial-gradient(circle at 50% 50%, #fff3c4 0 0.3vh, rgba(255, 214, 110, 0.8) 0.45vh, rgba(255, 214, 110, 0.2) 0.9vh, transparent 1.3vh); }
  @keyframes luci-festa { 0%, 49.9% { background-position: 50% 50%; } 50%, 100% { background-position: calc(50% + 2vh) 50%; } }

  /* l'iscrizione: la ribalta 1,2vh sotto le tessere */
  .scena-iscrizione { margin-top: 0; }
  .palco { padding: 0; }
  .palco .ribalta { margin-top: 1.2vh; }

  /* -- in partita: la griglia prende una terza riga per la ribalta, sotto la fila delle tessere -- */
  body:not(.percorso) .area-partita { grid-template-rows: minmax(0, 1fr) auto auto; }
  body:not(.percorso) .colonna-ruota { grid-row: 1 / span 3; }
  /* la ribalta sta 1,6vh sotto le tessere (il row-gap della griglia): le tessere ci stanno sopra */
  .area-partita > .ribalta { grid-column: 2; grid-row: 3; margin-top: 0; }
  .ribalta-partita { display: block; }
  body.percorso .ribalta-partita { display: none; } /* [Erbottega] nel Percorso la fila e` la striscia: niente ribalta */

  /* -- la tessera è un podio: il corpo scuro della cassaforte, il bordo del colore in alto (non più a sinistra).
     gioco.js (aggiornaSchedeGiocatori) non imposta più background e borderLeftColor in linea: li dà il CSS. -- */
  .scheda-giocatore {
    background: #141a3a;
    border: 0.25vh solid #2a3268; border-top: 0.8vh solid var(--colore-giocatore);
    box-shadow: inset 0 0 0 0.12vh rgba(255, 255, 255, 0.04), 0 0.8vh 1.8vh rgba(0, 0, 0, 0.35);
  }
  /* di turno: il podio si tinge del suo colore (com'era: il 55 % del colore sul fondo), più l'anello e l'alone di sempre */
  .scheda-giocatore.turno-attivo { background: color-mix(in srgb, var(--colore-giocatore) 60%, #141a3a); }
  /* non di turno: il podio resta solido e acceso (sta sul palco), si attenua quello che c'è scritto sopra — «una avanti,
     tre indietro» resta (punto 69), non sbiadisce più la tessera intera. L'opacità è quella di sempre (--opacita-non-turno). */
  .scheda-giocatore:not(.turno-attivo) { opacity: 1; }
  .scheda-giocatore:not(.turno-attivo) :is(.tessera-giocatore, .nome-giocatore, .soldi-round-giocatore, .soldi-totale-giocatore, .jolly-giocatore, .segno-aiutino, .componenti-squadra) { opacity: var(--opacita-non-turno, 0.55); }
  .scheda-giocatore :is(.tessera-giocatore, .nome-giocatore, .soldi-round-giocatore, .soldi-totale-giocatore, .jolly-giocatore, .segno-aiutino, .componenti-squadra) { transition: opacity 260ms ease-out; }
  /* nel lampo nessuno è di turno: tutto acceso (la regola di «4. IL ROUND LAMPO» per la tessera intera, qui per il contenuto) */
  .area-partita.lampo .scheda-giocatore :is(.tessera-giocatore, .nome-giocatore, .soldi-round-giocatore, .soldi-totale-giocatore, .jolly-giocatore, .segno-aiutino, .componenti-squadra) { opacity: 1; }
  /* il balzo di chi entra in turno partiva dall'opacità sbiadita: ora la tessera è sempre piena */
  @keyframes turno-entra {
    0%   { transform: translateY(0) scale(0.94); }
    60%  { transform: translateY(-2.2vh) scale(1.18); }
    100% { transform: translateY(-1.2vh) scale(1.08); }
  }

  /* -- la cassaforte si legge in oro, come un display: è la stessa cifra d'oro del palco dell'iscrizione di prima
     e della festa («volano in cassaforte»). «in cassaforte» resta attenuato, la cifra 2,1vh con un alone leggero. -- */
  .scheda-giocatore .soldi-totale-giocatore b { display: inline-block; font: 700 2.1vh/1 var(--font-titoli); color: #FFD86B; letter-spacing: 0.01em;
    text-shadow: 0 0 0.2vh rgba(255, 216, 107, 0.8), 0 0 0.9vh rgba(255, 216, 107, 0.45); }

  /* -- i quattro momenti del palco -- */
  /* una lettera giusta: i soldi del round saltano (420 ms), nel colore dell'oro per un attimo */
  .scheda-giocatore .soldi-round-giocatore { transform-origin: left center; }
  .scheda-giocatore .soldi-round-giocatore.sale { animation: cifra-sale 420ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  @keyframes cifra-sale { 0% { transform: scale(1); } 35% { transform: scale(1.22); color: #FFD86B; text-shadow: 0 0 1.6vh rgba(255, 216, 107, 0.9); } 100% { transform: scale(1); } }
  /* la festa è finita: i soldi sono in cassaforte — la cifra d'oro si gonfia e si posa (900 ms), le luci si accendono */
  .scheda-giocatore.incassa .soldi-totale-giocatore b { animation: cassaforte-incassa 900ms cubic-bezier(0.2, 1.2, 0.4, 1) both; }
  @keyframes cassaforte-incassa { 0% { transform: scale(1.6); color: #fff; text-shadow: 0 0 2.4vh rgba(255, 216, 107, 1), 0 0 0.3vh #fff; } 100% { transform: scale(1); } }
  /* la Bancarotta: le due cifre di chi perde tremano in rosso (700 ms) mentre le luci sono spente */
  .scheda-giocatore.perde :is(.soldi-round-giocatore, .soldi-totale-giocatore b) { animation: cifra-perde 700ms steps(1, end) both; }
  @keyframes cifra-perde { 0%, 40%, 80% { color: #ff6b6b; opacity: 1; text-shadow: 0 0 1.2vh rgba(255, 80, 80, 0.7); } 20%, 60% { color: #ff6b6b; opacity: 0.25; } 100% { opacity: 1; } }

  /* -- la finale: il palco largo 100vh, i podi come le tessere in partita -- */
  #schermata-finale .titolo-classifica { margin-top: 0.2vh; }
  .palco-finale { max-width: 100vh; margin: 0 auto; padding-bottom: 0.4vh; border-radius: 1.6vh; }
  .palco-finale .podi { gap: 1.6vh; padding: 2vh 1.6vh 0; }
  .podio-finale { max-width: 24vh; padding: 1.1vh 1.3vh 1vh; border-radius: 1.4vh; border-width: 0.25vh; border-top-width: 0.8vh;
    grid-template-columns: 5.4vh minmax(0, 1fr); column-gap: 1vh; row-gap: 0.2vh;
    box-shadow: inset 0 0 0 0.12vh rgba(255, 255, 255, 0.04), 0 0.8vh 1.8vh rgba(0, 0, 0, 0.35); }
  .podio-finale .tessera-giocatore { width: 5.4vh; height: 6.4vh; font-size: 3.6vh; border-radius: 0.8vh; outline-width: 0.35vh; outline-offset: 0.35vh; }
  .podio-finale .tessera-giocatore.due { font-size: 2.4vh; }
  .podio-finale .nome { font-size: 2vh; }
  .podio-finale .cifra { font-size: 4vh; text-shadow: 0 0 0.25vh rgba(255, 216, 107, 0.9), 0 0 1.4vh rgba(255, 216, 107, 0.55); }
  .podio-finale .etichetta { font-size: 1.7vh; }
  .podio-finale .posto { top: -1.6vh; right: 0.8vh; width: 3.4vh; height: 3.4vh; font-size: 1.7vh; line-height: 3.4vh; box-shadow: 0 0.3vh 0.8vh rgba(0, 0, 0, 0.4); }
  .podio-finale.vincitore { transform: translateY(-1.2vh) scale(1.08);
    box-shadow: 0 0 0 0.5vh #fff, 0 0 3vh 0.3vh var(--colore-giocatore), 0 1.6vh 3vh rgba(0, 0, 0, 0.45);
    animation: turno-respira 1.8s ease-in-out infinite; }
  @keyframes podio-entra { from { opacity: 0; transform: translateY(2vh); } }
  @keyframes podio-entra-vincitore { from { opacity: 0; transform: translateY(2vh) scale(1.08); } to { transform: translateY(-1.2vh) scale(1.08); } }
  .podio-finale.vincitore.entra { animation: podio-entra-vincitore 320ms cubic-bezier(0.2, 1.4, 0.4, 1) both, turno-respira 1.8s ease-in-out 400ms infinite; }
}


/* ============================================================================
   I RITOCCHI DEL PERCORSO DOPO LA PRIMA PARTITA (09/10/2026 sera) — Chiara
   design/2026-10-09-scheda-ritocchi-percorso.md e design/prototipi/2026-10-09-ritocchi-percorso/ritocchi.css (portato qui blocco per blocco;
   R1, R5, R8 (pillola), R14 (pulsare) sono gia` sopra, ognuno accanto al suo gruppo di regole).
   ============================================================================ */

/* ---- R9. l'annuncio del tempo che cambia, dell'ultimo giro e della sera: lo stesso annuncio di «Tocca a», con l'icona al posto della lettera ---- */
body.percorso #schermata-gioco .annuncio.tempo .annuncio-tessera { background: #fff; color: #1a1a1a; display: flex; align-items: center; justify-content: center; }
body.percorso #schermata-gioco .annuncio.tempo .annuncio-tessera svg { width: 70%; height: 70%; }
body.percorso #schermata-gioco .annuncio.tempo.temporale .annuncio-tessera { background: #27304F; color: #fff; }
body.percorso #schermata-gioco .annuncio.tempo.afa .annuncio-tessera { background: #FFB341; }
body.percorso #schermata-gioco .annuncio.tempo.sera .annuncio-tessera { background: #251C52; color: #F2EFE4; }
/* la riga sotto va a capo (se no la «riga» lunga del tempo esce dallo schermo e passa sotto la pillola del preavviso) */
body.percorso #schermata-gioco .annuncio.tempo .annuncio-testo { max-width: calc(var(--u) * 620); }
body.percorso #schermata-gioco .annuncio.tempo .annuncio-sotto { white-space: normal; max-width: calc(var(--u) * 620); font: 800 calc(var(--vh) * 2.3)/1.12 var(--font-titoli); }

/* ---- R12. il cartellino della tappa toccata: bianco, senza velo, senza «Ok»; si chiude da solo ------------------------------ */
.cartellino-tappa {
  position: absolute; transform: translate(-50%, -100%); width: max-content; max-width: calc(var(--u) * 460);
  display: flex; align-items: center; gap: calc(var(--vh) * 1.2); padding: calc(var(--vh) * 0.9) calc(var(--vh) * 1.6); border-radius: calc(var(--vh) * 1.4); background: #fff; color: #111;
  font: 600 calc(var(--vh) * 2.2)/1.25 var(--font-testo); text-align: left; box-shadow: 0 calc(var(--vh) * 0.6) calc(var(--vh) * 2) rgba(0, 0, 0, 0.4); pointer-events: none !important;
}
.cartellino-tappa b { font: 800 calc(var(--vh) * 2.3) var(--font-titoli); display: block; margin-bottom: calc(var(--vh) * 0.2); }
.cartellino-tappa .disco { flex: 0 0 auto; width: calc(var(--vh) * 4.2); height: calc(var(--vh) * 4.2); border-radius: 50%; background: #EEF1F6; display: flex; align-items: center; justify-content: center; color: var(--speciale-scuro, #1F6F78); }
.cartellino-tappa .disco svg { width: 70%; height: 70%; fill: currentColor; stroke: currentColor; }
.cartellino-tappa .disco .meeple-html { width: 62%; height: 78%; }
.cartellino-tappa::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--vh) * -1.2); width: calc(var(--vh) * 2.4); height: calc(var(--vh) * 1.2); background: #fff; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.cartellino-tappa.entra { animation: bolla-entra 220ms cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.cartellino-tappa.nascosta { display: none; }
/* le cose toccabili sul paesaggio: l'edificio, la pietra blu, il bivacco, la tenda, il fantasma, la bandiera */
.paesaggio-partita .tappa-mappa, .paesaggio-partita .pietra-mappa.ingresso, .paesaggio-partita .bivacco, .paesaggio-partita .tendina, .paesaggio-partita .fantasma, .paesaggio-partita .bandiera { pointer-events: all; cursor: pointer; }
/* ...ma non quando il Castello del lampo chiede una casella: li` si tocca la pietra libera */
.paesaggio-partita .libere .tappa-mappa { pointer-events: none; }

/* ---- R13. la bolla della tenda punta il pulsante, a destra della tessera -------------------------------------------------------------- */
.bolla-prima-volta.destra { transform: translate(0, -50%); }
.bolla-prima-volta.destra::after { left: calc(var(--vh) * -1.4); bottom: auto; top: 50%; width: calc(var(--vh) * 1.4); height: calc(var(--vh) * 2.8); transform: translateY(-50%); clip-path: polygon(100% 0, 100% 100%, 0 50%); }

/* ---- R15. lo schermo largo: quello che sta ai bordi si aggancia ai bordi della FINESTRA, non dello stage 16:9 -------------- */
/* --ox e` la fascia a sinistra (0 su un 16:9 esatto). Le tessere, la ruota e la testata scivolano ai bordi; il tempo a destra. Il cartello,
   i comandi, l'annuncio e il sentiero restano al centro: e` il paesaggio a riempire i lati, e fra la ruota e il sentiero c'e` piu` aria. */
body.percorso #schermata-gioco .colonna-giocatori.tessere-viaggio { left: calc(var(--u) * 24 - var(--ox)); }
body.percorso #schermata-gioco .colonna-ruota { left: calc(var(--u) * 62 - var(--ox)); }
body.percorso #schermata-gioco .intestazione-gioco { left: calc(-1 * var(--ox)); right: calc(-1 * var(--ox)); }
body.percorso #schermata-gioco .cielo-testi { right: calc(var(--u) * 86 - var(--ox)); }
#schermata-iscrizione-percorso .testata-iscrizione-plancia, #schermata-iscrizione-percorso .colonna-iscrizione { left: calc(var(--u) * 40 - var(--ox)); }
#schermata-iscrizione-percorso .legenda-plancia { left: auto; right: calc(var(--u) * 40 - var(--ox)); }

/* ---- R14. «Quanti giorni? (round)» ---------------------------------------------------------------------------------------------------- */
.iscrizione-plancia .titolo-pannello small { font-size: 0.8em; color: var(--testo-attenuato); text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ---- settima stesura (10/10/2026): la grafica da prototipo — il minimo che serve a provare le meccaniche ---- */
/* il potenziamento in mano sulla tessera (una parola); giallo e con ▶ quando chi ha il turno lo puo` usare: si tocca la parola */
.tessera-viaggio .carte .pot { display: inline-flex; align-items: center; height: calc(var(--vh) * 2.2); padding: 0 calc(var(--vh) * 0.7); border: 0; border-radius: 999px; background: var(--speciale); color: #fff; font: 800 calc(var(--vh) * 1.2)/1 var(--font-titoli); letter-spacing: 0.01em; white-space: nowrap; }
.tessera-viaggio .carte .pot.btn-usa { background: #FFDD7A; color: #2A1B0C; cursor: pointer; box-shadow: 0 calc(var(--vh) * 0.25) 0 #A87A14; }
.tessera-viaggio .carte .pot.btn-usa:hover { filter: brightness(1.08); }
#paesaggio-partita .sasso { pointer-events: auto; }