/* La grafica è neutra: niente colori cliente. Rosso Casa di Carta solo per gli accenti.
   Adattiva: dai 320px dello smartphone fino a 1600px del laptop staff. */
:root {
  --fondo: #f5f3ee;
  --carta: #ffffff;
  --inchiostro: #1a1a1a;
  --inchiostro-tenue: #666;
  --rosso: #c81d1d;
  --oro: #c8a52a;
  --allarme: #d97706;
  --coesione: #1f6fb2;
  --riga: #e5e2d8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Georgia", "Times New Roman", serif; color: var(--inchiostro);
       background: var(--fondo); font-size: 16px; line-height: 1.4;
       overflow-x: hidden; }
.testata { padding: 1rem 2rem; background: var(--rosso); color: #fff; display: flex;
           justify-content: space-between; align-items: baseline; gap: 2rem; flex-wrap: wrap; }
.testata h1 { margin: 0; font-size: 1.3rem; font-weight: 400; }
.testata h1 span { opacity: .8; font-size: .9em; }
.testata a { color: #fff; }
main { padding: 2rem; display: grid; gap: 2rem; grid-template-columns: 1fr; max-width: 1600px; margin: 0 auto; }
h2, h3 { font-weight: 400; }
/* Pulsanti più grandi per i polpastrelli, su qualunque schermo. */
button, select, input, textarea { font-size: 1em; min-height: 44px; }
button { background: var(--inchiostro); color: #fff; border: 0; padding: .7rem 1.2rem; cursor: pointer; font: inherit; min-height: 44px; }
.avvisi { background: #fef3c7; border-left: 4px solid var(--allarme); padding: .5rem 1rem; list-style: none; }
button.link { background: none; color: inherit; padding: 0; text-decoration: underline; min-height: 0; }
button:hover { background: var(--rosso); }
input, textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--riga); background: #fff; width: 100%; max-width: 100%; }

/* progettazione: solo il piano, una colonna sola centrata */
.tavolo.progettazione main { grid-template-columns: minmax(0, 900px); justify-content: center; }
.testata .tab a { color: #fff; text-decoration: none; background: rgba(255,255,255,.15); padding: .4rem .8rem; border-radius: 4px; }
.testata .tab a:hover { background: rgba(255,255,255,.25); }

/* la stanza del prof: avatar a sinistra, chat a destra */
.tavolo.prof main { grid-template-columns: 1fr; }
.prof-stanza { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; background: var(--carta); border: 1px solid var(--riga); padding: 2rem; }
@media (max-width: 800px) { .prof-stanza { grid-template-columns: 1fr; } }
.avatar-pane { display: flex; flex-direction: column; align-items: center; }
.avatar { width: 100%; max-width: 280px; aspect-ratio: 4/5; position: relative; background: linear-gradient(180deg, #faf6ea 0%, #e5dcc3 100%); border-radius: 8px; overflow: hidden; }
.video-avatar { width: 100%; height: 100%; object-fit: cover; display: none; }
.video-avatar.attivo { display: block; }
.segnaposto-avatar { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.segnaposto-avatar.nascosto { display: none; }
.segnaposto-avatar svg { display: block; width: 100%; max-width: 220px; height: auto; }
#bocca { transform-origin: 80px 98px; transition: transform .12s; }
.avatar.parla #bocca { animation: parla .3s infinite alternate; }
@keyframes parla { from { transform: scaleY(1); } to { transform: scaleY(3); } }
.stato-avatar { text-align: center; color: var(--inchiostro-tenue); font-style: italic; margin: .8rem 0; }
.chiama, .chiudi { margin-top: .5rem; width: 100%; max-width: 280px; }
.chiama.nascosto, .chiudi.nascosto { display: none; }
.chat-pane h2 { margin-top: 0; }
.chat-pane .aiuto { color: var(--inchiostro-tenue); font-size: .95em; }
.chat-pane .messaggi { background: #faf8f3; border: 1px solid var(--riga); padding: .8rem; max-height: 50vh; min-height: 240px; overflow-y: auto; margin: 1rem 0; }
.chat-pane .riga { padding: .5rem .8rem; margin-bottom: .5rem; border-radius: 4px; }
.chat-pane .riga.banda { background: #e7f0f8; margin-left: 2rem; }
.chat-pane .riga.personaggio { background: #faf0d8; margin-right: 2rem; }
.chat-pane .riga.placeholder { color: var(--inchiostro-tenue); font-style: italic; background: transparent; }
.input-prof { display: grid; gap: .5rem; }
.input-prof textarea { width: 100%; resize: vertical; }
.input-prof .pulsanti { display: flex; gap: .5rem; justify-content: flex-end; }
.input-prof #microfono { background: #666; cursor: not-allowed; }
.nota-avatar { font-size: .85em; color: var(--inchiostro-tenue); border-top: 1px solid var(--riga); padding-top: .8rem; margin-top: 1rem; }
.piano .fasi { list-style: none; padding: 0; display: grid; gap: .5rem; }
.piano .fase { background: var(--carta); border: 1px solid var(--riga); padding: .6rem .8rem; }
.piano .fase h3 { margin: 0 0 .2rem; font-size: 1rem; }
.piano .fase h3 span { color: var(--inchiostro-tenue); font-size: .9em; }
.piano .fase .obiettivo { font-size: .85em; color: var(--inchiostro-tenue); margin: 0 0 .5rem; }
.piano .fase .slot-riga { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.piano .fase label { display: block; font-size: .85em; color: var(--inchiostro-tenue); }
.piano .fase label span { display: block; margin-bottom: .2rem; }
.piano .fase select { width: 100%; padding: .4rem; font: inherit; border: 1px solid var(--riga); background: #fff; color: var(--inchiostro); }
.piano .fase select:focus { outline: 2px solid var(--rosso); outline-offset: -2px; }
.piano .fase select option.in-uso { color: #999; font-style: italic; }
.piano .fase select option.doppia { color: var(--rosso); font-weight: bold; }
.azioni-piano { margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.avviso-piano { margin: 0; font-size: .9em; color: var(--inchiostro-tenue); }
.avviso-piano.ok { color: #2f855a; }
.avviso-piano.errore { color: var(--rosso); font-weight: bold; }

/* chat */
.chat { background: var(--carta); border: 1px solid var(--riga); display: flex; flex-direction: column; }
.chat h2 { margin: 0; padding: .6rem 1rem; background: #faf8f3; border-bottom: 1px solid var(--riga); font-size: 1rem; }
.chat .messaggi { flex: 1; overflow-y: auto; padding: .6rem 1rem; max-height: 50vh; min-height: 20vh; }
.chat .riga { padding: .4rem .6rem; margin-bottom: .4rem; border-radius: 4px; }
.chat .riga.banda { background: #e7f0f8; text-align: right; }
.chat .riga.personaggio { background: #faf6ea; }
.chat form { display: flex; gap: .4rem; padding: .5rem; border-top: 1px solid var(--riga); }
.chat textarea { flex: 1; resize: vertical; }

/* partita */
.tavolo.partita main { grid-template-columns: 2fr 1fr; }
.indicatori { display: flex; gap: 1.5rem; }
.indicatori b { font-size: 1.2em; }
.indicatori .allarme-pieno { color: var(--allarme); font-weight: bold; }
.passo { background: var(--carta); padding: 1rem; border: 1px solid var(--riga); }
.passo .imprevisto { color: var(--rosso); }
.passo .annuncio { font-style: italic; }
.scena-narrativa { border-left: 4px solid var(--rosso); padding: .8rem 1rem; margin: 1rem 0; background: #faf8f3; font-style: italic; color: #3a3a3a; }
.scena-narrativa p { margin: 0; }
.scena-progettazione { margin: .4rem 0 .6rem; }
.scena-progettazione summary { cursor: pointer; color: var(--rosso); font-size: .9em; user-select: none; }
.scena-progettazione summary:hover { text-decoration: underline; }
.scena-progettazione blockquote { border-left: 3px solid var(--rosso); padding: .5rem .8rem; margin: .4rem 0; background: #faf8f3; font-style: italic; color: #3a3a3a; }
.scena-progettazione blockquote p { margin: 0; font-size: .95em; }
.carte-fase-rimedio { list-style: none; padding: 0; display: grid; gap: .3rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: .5rem 0; }
.rimedio .dal-futuro, .al-volo .dal-futuro { border-left-style: dashed; }
.costo-rimedio { color: var(--allarme); font-size: .9em; margin: .5rem 0; }
.al-volo { margin-top: 1rem; padding: 1rem; background: #faf8f3; border-top: 2px solid var(--allarme); }
.al-volo.nascosto { display: none; }
.al-volo h3 { margin-top: 0; }

/* progettazione a tappe */
.testata .passi-progetto { color: #fff; font-size: .9em; }
.progetta-fase { background: var(--carta); padding: 1.5rem; border: 1px solid var(--riga); max-width: 900px; margin: 0 auto; }
.progetta-fase > h2 { margin-top: 0; color: var(--rosso); }
.avatar-fase { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; margin: 1.5rem 0; }
.avatar-fase .avatar { width: 100%; max-width: 240px; aspect-ratio: 4/5; position: relative; background: linear-gradient(180deg, #faf6ea 0%, #e5dcc3 100%); border-radius: 8px; overflow: hidden; }
.scena-testo { border-left: 4px solid var(--rosso); padding: 1rem 1.2rem; margin: 0; background: #faf8f3; font-style: italic; color: #2a2a2a; line-height: 1.5; }
.scena-testo p { margin: 0; }
@media (max-width: 700px) {
  .avatar-fase { grid-template-columns: 1fr; }
  .avatar-fase .avatar { max-width: 220px; margin: 0 auto; }
}
.ascolta { background: var(--rosso); color: #fff; width: 100%; margin: .4rem 0; }
.ascolta.nascosto { display: none; }
.scelta-carta { background: #faf8f3; padding: 1rem; margin-top: 1rem; border: 1px dashed var(--riga); }
.scelta-carta h3 { margin-top: 0; }
.scelta-carta select { width: 100%; max-width: 100%; margin-top: .4rem; padding: .6rem; font: inherit; }
.azioni-progetto { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.azioni-progetto .indietro { color: var(--inchiostro-tenue); text-decoration: none; }
.azioni-progetto .chat-link { color: var(--rosso); text-decoration: none; }
.pulsante-link { display: inline-block; background: var(--inchiostro); color: #fff; padding: .7rem 1.2rem; text-decoration: none; min-height: 44px; }
.pulsante-link:hover { background: var(--rosso); }

/* riepilogo */
.riepilogo-piano { background: var(--carta); padding: 1.5rem; border: 1px solid var(--riga); max-width: 900px; margin: 0 auto; }
.riepilogo-piano table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.riepilogo-piano th, .riepilogo-piano td { padding: .5rem .8rem; text-align: left; border-bottom: 1px solid var(--riga); }
.riepilogo-piano .carta-scelta.ok { color: #2f855a; font-weight: bold; }
.riepilogo-piano .carta-scelta.vuota { color: var(--rosso); font-style: italic; }

/* ─── adattivo: tablet (≤900px) e smartphone (≤640px) ──────────────────────── */

@media (max-width: 900px) {
  main { padding: 1rem; gap: 1rem; }
  .testata { padding: .8rem 1rem; gap: 1rem; }
  .testata h1 { font-size: 1.1rem; }
  /* Prof: avatar e chat impilati */
  .prof-stanza { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }
  /* Partita: passo e chat impilati */
  .tavolo.partita main { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  main { padding: .6rem; }
  .testata { padding: .6rem .8rem; flex-direction: column; align-items: flex-start; gap: .4rem; }
  .testata h1 { font-size: 1rem; }
  .indicatori { gap: .8rem; flex-wrap: wrap; }

  /* Progettazione: niente padding grosso, select full-width già di default */
  .piano .fase { padding: .5rem; }
  .piano .fase .slot-riga { grid-template-columns: 1fr; }
  .azioni-piano { flex-direction: column; align-items: stretch; }
  .azioni-piano button { width: 100%; }

  /* Dilemmi: opzioni full-width, testo più stretto */
  .dilemma { padding: 1rem; }
  .dilemma .opzioni { gap: .4rem; }
  .dilemma .opzione { padding: .8rem; }

  /* Carte: una colonna sola, nessun grid */
  .carte-in-fase, .riserva, .carte-fase-rimedio {
    grid-template-columns: 1fr !important;
  }

  /* Rimedio + al-volo pannelli pieni */
  .rimedio, .al-volo { padding: .8rem; }

  /* Chat più bassa in altezza */
  .chat .messaggi { max-height: 40vh; min-height: 160px; }
  .chat-pane .messaggi { max-height: 40vh; min-height: 160px; }
  .chat .riga.banda { margin-left: 1rem; }
  .chat .riga.personaggio { margin-right: 1rem; }

  /* Overlay scena: niente padding grosso, legge comodo sul telefono */
  .overlay-dentro { max-width: 100%; max-height: 100vh; overflow-y: auto;
                   padding: 1.2rem; border-top-width: 4px; }
  .overlay-dentro h2 { font-size: 1.2rem; }
  .scena-apertura { padding: .8rem 1rem; font-size: 1rem; }

  /* La chat del Prof di prima: pulsanti pieni */
  .input-prof { gap: .5rem; }
  .input-prof .pulsanti { flex-direction: column; }

  /* Avatar prof: non più grande di uno schermo mobile */
  .avatar { max-width: 220px; margin: 0 auto; }
  .chiama, .chiudi { max-width: 100%; }

  /* Staff: tabella monitor scrollabile orizzontale */
  .monitor, .elenco { display: block; overflow-x: auto; white-space: nowrap; }
  .monitor th, .monitor td, .elenco th, .elenco td { padding: .3rem .5rem; font-size: .9em; }

  /* Nuova sessione: form a colonna singola, già ok */
  .nuova form { max-width: 100%; }
  .accesso form { max-width: 100%; }

  /* Proiettore: numeroni più piccoli ma leggibili su schermo mobile */
  .proiettore .classifica { font-size: 1.4rem; }
  .proiettore .classifica li { gap: 1rem; }

  /* Finale */
  .tavolo.finale .numerone { font-size: 3rem; }
  .tavolo.finale .risultato { padding: 1.2rem; }

  /* Pulsanti dilemma, azioni: full width così si toccano facile */
  .azioni { flex-direction: column; }
  .azioni button { width: 100%; }

  /* Scena della progettazione: dettaglio aperto, no padding grosso */
  .scena-progettazione summary { padding: .3rem 0; }
}

/* overlay scena di apertura */
.overlay-scena { position: fixed; inset: 0; background: rgba(10, 10, 10, .85); display: flex; align-items: center; justify-content: center; z-index: 100; }
.overlay-scena.nascosto { display: none; }
.overlay-dentro { background: var(--carta); max-width: 760px; padding: 2rem 2.5rem; border-top: 6px solid var(--rosso); }
.overlay-dentro h2 { margin-top: 0; }
.scena-apertura { border-left: 4px solid var(--rosso); padding: 1rem 1.4rem; margin: 1rem 0; background: #faf8f3; font-style: italic; color: #2a2a2a; font-size: 1.05em; line-height: 1.5; }
.scena-apertura p { margin: 0; }
.overlay-dentro button { margin-top: 1rem; }

/* dilemma */
.dilemma { background: var(--carta); border: 1px solid var(--riga); padding: 1.5rem; border-top: 4px solid var(--rosso); }
.dilemma h2 { margin-top: 0; color: var(--rosso); }
.dilemma .domanda { font-size: 1.05em; }
.dilemma .opzioni { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
.dilemma .opzione { background: #faf8f3; border: 1px solid var(--riga); padding: 1rem; cursor: pointer; transition: background .1s, border-color .1s; }
.dilemma .opzione:hover { background: #fef3c7; border-color: var(--rosso); }
.dilemma .opzione.scelta { background: #fef3c7; border-color: var(--rosso); }
.dilemma .opzione.occupato { pointer-events: none; opacity: .6; }
.dilemma .opzione strong { display: block; margin-bottom: .3rem; font-weight: normal; font-size: 1.05em; }
.dilemma .opzione .effetti { font-size: .85em; color: var(--inchiostro-tenue); font-style: italic; }
.dilemma .aiuto { font-size: .85em; color: var(--inchiostro-tenue); text-align: right; }

.riserva, .carte-in-fase { list-style: none; padding: 0; display: grid; gap: .4rem;
                           grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.azioni { margin-top: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.rimedio.nascosto { display: none; }
.rimedio { margin-top: 1rem; padding: 1rem; background: #faf8f3; }

/* staff */
.monitor { width: 100%; border-collapse: collapse; background: var(--carta); }
.monitor th, .monitor td { padding: .4rem .6rem; border-bottom: 1px solid var(--riga); text-align: left; }
.monitor code { background: #f0ede4; padding: 0 .3rem; }
.elenco { width: 100%; border-collapse: collapse; background: var(--carta); }
.elenco th, .elenco td { padding: .4rem .6rem; border-bottom: 1px solid var(--riga); text-align: left; }

/* proiettore */
.proiettore main { grid-template-columns: 1fr; justify-items: center; }
.proiettore .classifica { font-size: 2.2rem; }
.proiettore .classifica ol { list-style: none; padding: 0; }
.proiettore .classifica li { margin: 1rem 0; display: flex; justify-content: space-between; gap: 4rem; }
.proiettore .classifica .finale { color: var(--rosso); font-weight: bold; }
.proiettore .classifica .posto-1 { font-size: 1.3em; }

/* finale */
.tavolo.finale .risultato { background: var(--carta); padding: 2rem; border: 1px solid var(--riga); text-align: center; }
.tavolo.finale .numerone { font-size: 4rem; color: var(--rosso); margin: 1rem 0; }
.tavolo.finale .numerone span { font-size: 1rem; color: var(--inchiostro-tenue); display: block; }
.tavolo.finale .indicatori { justify-content: center; list-style: none; padding: 0; }

/* accesso */
.accesso form { display: grid; gap: .6rem; max-width: 300px; }
.accesso label { display: block; }
.nuova form { display: grid; gap: .6rem; max-width: 500px; }
.nuova label { display: block; }
.nuova input { display: block; width: 100%; margin-top: .2rem; }

/* ── la fase in due passi: le carte, poi il rimedio alla cieca prima dei verdetti ─────────── */
.passo-carte.nascosto, .passo-rimedio.nascosto { display: none; }
.passo-rimedio { margin-top: 1rem; padding: 1rem; background: #faf8f3; border-top: 3px solid var(--rosso); }
.passo-rimedio h3 { margin-top: 0; color: var(--rosso); }
.passo-rimedio .carte-al-tavolo { font-style: italic; color: var(--inchiostro-tenue); }
button.principale { background: var(--rosso); }
button.principale:hover { background: var(--inchiostro); }
.carte-in-fase .carta.al-volo-scelta { border-left-style: dashed; }
.azzera-banda { margin: 1.5rem 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* ── la Banca in 3D: il plastico occupa tutto lo schermo sotto la testata ─────────────────── */
.azioni-progetto .banca-link { color: var(--rosso); text-decoration: none; }
body.tavolo.banca { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.tavolo.banca main { flex: 1; min-height: 0; width: 100%; margin: 0; padding: 0; max-width: none; display: block; }
.plastico { position: relative; height: 100%; min-height: 360px; overflow: hidden;
            background: radial-gradient(ellipse at 50% 30%, #fbf8f2 0%, #ece5d6 65%, #ddd3c1 100%); }
/* un contesto di impilamento: il CSS2DRenderer dà alle etichette uno z-index fino al loro numero, e
   senza questo passerebbero sopra la mano, i comandi e la scheda */
.plastico-scena { position: absolute; inset: 0; z-index: 0; }
.plastico-scena canvas { display: block; touch-action: none; }
.plastico-attesa[hidden] { display: none; }
.plastico-attesa { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 2rem;
                   text-align: center; color: var(--inchiostro-tenue); font-style: italic; z-index: 1; }
.plastico-comandi { position: absolute; top: .75rem; left: .75rem; right: .75rem; display: flex; gap: .4rem;
                    flex-wrap: wrap; z-index: 3; pointer-events: none; }
.plastico-comandi button { pointer-events: auto; background: rgba(255,255,255,.94); color: var(--inchiostro);
                           border: 1px solid var(--riga); border-radius: 999px; padding: .45rem .95rem;
                           box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: background .15s, color .15s; }
.plastico-comandi button:hover { background: #fff; color: var(--rosso); }
.plastico-comandi button[aria-pressed="true"] { background: var(--inchiostro); color: #fff; border-color: var(--inchiostro); }
.plastico-aiuto { position: absolute; top: 4.1rem; left: .9rem; margin: 0; font-size: .85rem;
                  color: var(--inchiostro-tenue); z-index: 2; pointer-events: none; }
.plastico-fasi { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: .4rem; overflow-x: auto;
                 padding: .7rem .75rem calc(.7rem + env(safe-area-inset-bottom)); z-index: 3; scrollbar-width: none;
                 background: linear-gradient(to top, rgba(236,229,214,.97) 55%, rgba(236,229,214,0)); }
.plastico-fasi::-webkit-scrollbar { display: none; }
.plastico-fasi button { flex: 0 0 auto; background: #fff; color: var(--inchiostro); border: 1px solid var(--riga);
                        border-radius: 8px; padding: .45rem .85rem; white-space: nowrap; }
.plastico-fasi button b { color: var(--rosso); margin-right: .2rem; }
.plastico-fasi button:hover { background: #fff; color: var(--rosso); }
.plastico-fasi button[aria-current="true"] { background: var(--rosso); color: #fff; border-color: var(--rosso); }
.plastico-fasi button[aria-current="true"] b { color: #fff; }
.plastico-scheda { position: absolute; top: 4rem; right: .75rem; width: min(23rem, calc(100% - 1.5rem)); z-index: 4;
                   background: rgba(255,255,255,.97); border-left: 4px solid var(--rosso); padding: .9rem 2.2rem .9rem 1rem;
                   box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.plastico-scheda h2 { margin: 0 0 .35rem; font-size: 1.15rem; color: var(--rosso); }
.plastico-scheda p { margin: .3rem 0; }
.plastico-scheda .ora { font-style: italic; color: var(--inchiostro-tenue); }
.plastico-scheda .chiudi { position: absolute; top: .3rem; right: .3rem; background: none; color: var(--inchiostro-tenue);
                           min-height: 36px; padding: .1rem .55rem; font-size: 1.4rem; line-height: 1; }
.plastico-scheda .chiudi:hover { background: none; color: var(--rosso); }
/* etichette dentro la scena (CSS2DRenderer): i numeri delle fasi si toccano, le stanze si leggono */
.perno { pointer-events: auto; width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%;
         background: var(--rosso); color: #fff; font: 700 15px/30px Georgia, serif; text-align: center;
         border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer; transition: transform .15s; }
.perno:hover { background: var(--inchiostro); }
.perno.attivo { background: var(--inchiostro); transform: scale(1.25); }
.perno.spento { visibility: hidden; }
.stanza { font: 12px/1.2 Georgia, serif; color: var(--inchiostro); background: rgba(255,255,255,.88);
          padding: 2px 6px; border-radius: 3px; white-space: nowrap; pointer-events: none;
          box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.stanza.piano { font-weight: 700; background: var(--inchiostro); color: #fff; }
.stanza.fuori { background: rgba(255,255,255,.7); color: var(--inchiostro-tenue); font-style: italic; }
@media (max-width: 640px) {
  .plastico-aiuto { display: none; }
  .plastico-scheda { top: auto; bottom: 4.4rem; }
  .plastico-comandi button { padding: .4rem .75rem; font-size: .92em; }
}
@media (prefers-reduced-motion: reduce) { .perno, .plastico-comandi button { transition: none; } }

/* ── la pagina unica della banda: il 3D al centro, il Prof (poi l'Ispettrice) a sinistra, il tempo
   e i furti a destra, la striscia delle otto fasi in basso. Riempie lo schermo sotto la testata,
   come la Banca; disegnata per un PC da 1366×768 in su. ──────────────────────────────────────── */
body.tavolo.gioco-pagina { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.tavolo.gioco-pagina main { flex: 1; min-height: 0; width: 100%; margin: 0; padding: 0; max-width: none;
                            display: flex; flex-direction: column; gap: 0; }
.gioco { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px;
         grid-template-rows: minmax(0, 1fr) auto; }
.gioco-sinistra, .gioco-destra { min-height: 0; overflow-y: auto; padding: 1rem; background: var(--carta); }
.gioco-sinistra { grid-column: 1; grid-row: 1; border-right: 1px solid var(--riga); }
.gioco-centro { grid-column: 2; grid-row: 1; position: relative; min-height: 0; overflow: hidden;
                background: radial-gradient(ellipse at 50% 30%, #fbf8f2 0%, #ece5d6 65%, #ddd3c1 100%); }
.gioco-destra { grid-column: 3; grid-row: 1; border-left: 1px solid var(--riga); }
.gioco-striscia { grid-column: 1 / -1; grid-row: 2; background: var(--carta); border-top: 1px solid var(--riga); }
/* il menù in alto a destra: per ora solo «Modalità testo» / «Torna al 3D» */
.gioco-menu { display: flex; justify-content: flex-end; margin: 0 0 .8rem; }
.gioco-menu button { min-height: 32px; padding: .25rem .8rem; font-size: .85rem; background: none;
                     color: var(--inchiostro-tenue); border: 1px solid var(--riga); border-radius: 999px; }
.gioco-menu button:hover { background: none; color: var(--rosso); border-color: var(--rosso); }

/* ── il plastico al centro della pagina unica. plastico.js lo monta coi comandi e la scheda del
   plastico qui sopra; sopra il 3D possono stare la scena scritta (la modalità testo, o il 3D che
   non arriva), l'avviso del PC lento e la mano. ─────────────────────────────────────────────────── */
.plastico-comandi[hidden], .plastico-lento[hidden], .plastico-testo[hidden] { display: none; }
.plastico-testo { position: absolute; inset: 0; z-index: 2; overflow-y: auto; padding: 1.6rem 2rem 2rem;
                  display: flex; flex-direction: column; gap: .7rem; }
.plastico-testo h2 { margin: 0; font-size: 1.3rem; color: var(--rosso); }
.plastico-testo p { margin: 0; }
.plastico-testo .scena-testo { max-width: 46rem; }
.plastico-avviso { padding: .5rem .8rem; background: #fef3c7; border-left: 4px solid var(--allarme); }
.plastico-lento { position: absolute; left: .75rem; top: 6rem; z-index: 5; display: flex; flex-wrap: wrap;
                  align-items: center; gap: .5rem; max-width: calc(100% - 1.5rem); padding: .6rem .8rem;
                  background: rgba(255,255,255,.97); border-left: 4px solid var(--allarme);
                  box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.plastico-lento p { margin: 0 .4rem 0 0; }
.plastico-lento button { min-height: 36px; padding: .35rem .85rem; }
/* le carte della banda appese sotto i numeri delle fasi (appendiCarte), nel colore della famiglia */
.carte-appese { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 22px;
                pointer-events: none; }
.carte-appese.spento { visibility: hidden; }
.carta-appesa { max-width: 9rem; padding: 2px 6px; border-radius: 3px; background: var(--famiglia, var(--inchiostro));
                color: #fff; font: 700 11px/1.2 Georgia, serif; text-align: center;
                box-shadow: 0 0 0 1px #f3ead6, 0 1px 3px rgba(0,0,0,.35); }
/* sul maxischermo il plastico non si tocca e si legge dal fondo della sala */
.banca-etichette.maxischermo .perno { pointer-events: none; width: 48px; height: 48px; font-size: 22px; line-height: 44px; }
.banca-etichette.maxischermo .stanza { font-size: 18px; }
.banca-etichette.maxischermo .carta-appesa { max-width: 14rem; font-size: 17px; }

/* ── le carte (carta.js): una carta sola in tre misure, come quelle stampate (63 × 88). Crema col
   bordo rosso; in alto, nel colore della famiglia, il nome con l'icona della famiglia e il tratto col
   suo effetto; sotto, «Fa bene» e «Fa male», con il male in fondo. Dentro la carta le misure sono in
   em e le righe in px interi, così la grande è la media ingrandita e un testo tagliato si misura
   giusto; il filo sotto i due testi tiene le gambe delle lettere. Le regole partono da [data-carta] o
   dalla misura. ──────────────────────────────────────────────────────────────────────────────────── */
.famiglia-tecnica { --famiglia: #3b4248; }
.famiglia-inganno { --famiglia: #5b3a6b; }
.famiglia-banda { --famiglia: #2f5d44; }
.famiglia-trattativa { --famiglia: #2b4a6f; }
.carta[data-carta] { flex: none; display: flex; flex-direction: column; gap: .15em;
                     overflow: hidden; padding: 0 .2em .15em; background: #f3ead6; color: var(--inchiostro);
                     border: 2px solid var(--rosso); border-radius: .5em; box-shadow: 0 1px 3px rgba(0,0,0,.2);
                     font-family: Georgia, "Times New Roman", serif; text-align: left; }
.carta.piccola { width: 63px; height: 88px; font-size: 8px; line-height: 10px; }
.carta.media { width: 126px; height: 176px; font-size: 11px; line-height: 12px; }
.carta.grande { width: 189px; height: 264px; font-size: 16.5px; line-height: 18px; border-width: 3px; }
.carta-testa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .25em;
               margin: 0 -.2em; padding: .15em .2em; background: var(--famiglia); color: #fff; }
.carta-testa svg { display: block; width: 1em; height: 1em; }
.carta-nome { font-weight: 700; overflow-wrap: anywhere; hyphens: auto; }
.carta-famiglia { grid-area: 1 / 2; padding-top: .05em; }
.carta-tratto { grid-area: 2 / 1; display: flex; align-items: center; gap: .3em; font-style: italic; }
.carta-tratto svg { flex: none; }
.carta-copie { grid-area: 2 / 2; align-self: center; padding: 0 .3em; border-radius: 1em; background: var(--rosso);
               box-shadow: 0 0 0 1px #f3ead6; font-weight: 700; }
.carta-bene, .carta-male { flex: 0 1 auto; min-height: 0; overflow: hidden; margin: 0; padding-bottom: .1em; }
.carta-male { margin-top: auto; }
.carta-male b { color: var(--rosso); }
.carta[data-carta].scelta { outline: 3px solid var(--inchiostro); outline-offset: 2px; }
/* la piccola è la testa sola: il nome in alto, l'icona della famiglia in basso a destra */
.carta.piccola { padding: 0; background: var(--famiglia); }
.carta.piccola .carta-testa { flex: 1; margin: 0; grid-template: auto 1fr / 1fr; padding: .3em .35em; }
.carta.piccola .carta-nome { font-size: 1.15em; }
.carta.piccola .carta-famiglia { grid-area: 2 / 1; align-self: end; justify-self: end; }
.carta.piccola .carta-famiglia svg { width: 2em; height: 2em; }
.carta.piccola .carta-tratto, .carta.piccola .carta-copie,
.carta.piccola .carta-bene, .carta.piccola .carta-male { display: none; }

/* ── il primo tempo nella pagina unica (piano.js, prof.js): a sinistra il Prof con la scena o la chat,
   a destra il tempo, in basso la striscia delle otto fasi con sotto la frase dell'Ispettrice, e la
   mano che si apre sopra il 3D. La striscia ha le colonne della pagina: i posti stanno sotto il 3D,
   i passi tra le fasi sotto le due colonne. Disegnata per 1366×768. ─────────────────────────────── */
.tavolo.gioco-pagina .testata { padding: .55rem 1.2rem; }
.tavolo.gioco-pagina .testata h1 { font-size: 1.15rem; }
.croce { min-height: 36px; width: 36px; padding: 0; flex: none; background: none; color: var(--inchiostro-tenue);
         font-size: 1.4rem; line-height: 1; border-radius: 50%; }
.croce:hover { background: #f0ede4; color: var(--rosso); }

/* il Prof: la foto (o la sagoma) piccola coi pulsanti accanto; in chiamata il video prende la colonna */
.gioco-sinistra { display: flex; flex-direction: column; gap: .9rem; }
.prof { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .5rem .7rem; align-items: center; }
.prof.in-chiamata { grid-template-columns: minmax(0, 1fr); }
.prof-volto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px;
              background: linear-gradient(180deg, #faf6ea 0%, #e5dcc3 100%); }
.prof-sagoma, .prof-foto, .prof-sagoma svg { display: block; width: 100%; height: 100%; }
.prof-foto { object-fit: cover; }
.prof-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #2a2a2a; }
.prof.in-chiamata .prof-sagoma, .prof.in-chiamata .prof-foto { visibility: hidden; }
.prof-volto.parla #bocca { animation: parla .3s infinite alternate; }
.prof-comandi { display: flex; flex-direction: column; gap: .45rem; }
.prof-comandi button { min-height: 40px; padding: .45rem .6rem; font-size: .9rem; line-height: 1.2; text-align: left; }
#prof-scrivi, #prof-riattacca { background: #fff; color: var(--inchiostro); border: 1px solid var(--riga); }
#prof-scrivi:hover, #prof-riattacca:hover { background: #fff; color: var(--rosso); border-color: var(--rosso); }
#prof-scrivi[aria-expanded="true"] { border-color: var(--inchiostro); }
.prof-stato { grid-column: 1 / -1; margin: 0; font-size: .85rem; line-height: 1.35; font-style: italic;
              color: var(--inchiostro-tenue); }
.gioco-fase h2 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--rosso); }
.gioco-fase p { margin: 0 0 .55rem; font-size: .92rem; line-height: 1.4; }
.gioco-fase .scena-testo { padding: .7rem .85rem; }
.gioco-fase .scena-testo p { margin: 0; font-size: .9rem; line-height: 1.45; }
.gioco-fase .mancano { color: var(--rosso); font-weight: 700; }
.gioco-sinistra.in-chat .gioco-fase { display: none; }
.prof-chat { display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; min-height: 15rem; }
.prof-chat[hidden] { display: none; }
.prof-chat-testa { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.prof-chat-testa h2 { margin: 0; font-size: 1.05rem; color: var(--rosso); }
/* le righe della chat: col Prof nel piano, con l'Ispettrice nel colpo */
.prof-messaggi, .ispettrice-messaggi { flex: 1 1 auto; min-height: 6rem; overflow-y: auto; padding: .5rem;
                                       background: #faf8f3; border: 1px solid var(--riga); }
.prof-messaggi .riga, .ispettrice-messaggi .riga { margin: 0 0 .45rem; padding: .4rem .6rem; border-radius: 4px;
                                                   font-size: .9rem; line-height: 1.35; white-space: pre-wrap; }
.prof-messaggi .riga.banda, .ispettrice-messaggi .riga.banda { background: #e7f0f8; margin-left: 1.5rem; }
.prof-messaggi .riga.personaggio, .ispettrice-messaggi .riga.personaggio { background: #faf0d8; margin-right: 1.5rem; }
.prof-messaggi .riga.vuota, .prof-messaggi .riga.pensa,
.ispettrice-messaggi .riga.vuota, .ispettrice-messaggi .riga.pensa { background: none; font-style: italic;
                                                                     color: var(--inchiostro-tenue); }
.prof-messaggi .riga.avviso, .ispettrice-messaggi .riga.avviso { background: #fef3c7; border-left: 3px solid var(--allarme); }
.prof-domanda, .ispettrice-domanda { display: flex; flex-direction: column; gap: .4rem; }
.prof-domanda textarea, .ispettrice-domanda textarea { min-height: 3.6rem; resize: vertical; font-size: .92rem; }
.prof-domanda button, .ispettrice-domanda button { align-self: flex-end; min-height: 40px; padding: .45rem 1rem; }

/* il tempo che resta, a destra: il numero grande, rosso negli ultimi minuti */
.gioco-tempo { margin: .2rem 0 1.2rem; }
.gioco-tempo p { margin: 0; }
.tempo-prima, .tempo-dopo { font-size: .95rem; color: var(--inchiostro-tenue); }
.tempo-numero { margin: .1rem 0; font-size: 3.2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.gioco-tempo.poco .tempo-numero { color: var(--rosso); }
.tempo-parole { font-size: 1.05rem; font-style: italic; color: var(--inchiostro-tenue); }

/* la striscia: otto posti sotto il 3D, i passi ai lati; ferma prima del via e dopo la consegna */
.striscia { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; align-items: center; }
.striscia-indietro, .striscia-avanti { display: flex; flex-direction: column; gap: .35rem; padding: .4rem 1rem; }
.striscia-indietro { align-items: flex-start; }
.striscia-avanti { align-items: flex-end; text-align: right; }
.striscia-passo { min-height: 40px; padding: .45rem .95rem; white-space: nowrap; }
.striscia-consegna { min-height: 46px; padding: .6rem 1.1rem; }
.striscia-consegnato { margin: 0; padding: .45rem .75rem; background: #e9f3ec; border-left: 4px solid #2f855a;
                       font-size: .95rem; line-height: 1.3; }
.striscia-avviso { margin: 0; max-width: 16rem; font-size: .85rem; line-height: 1.3; color: var(--rosso); }
.posti { display: flex; justify-content: center; gap: .3rem; margin: 0; padding: .35rem 0; list-style: none; }
.posto { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .2rem;
         width: 5.75rem; min-height: 0; padding: .25rem .2rem .3rem; background: none; color: var(--inchiostro);
         border: 2px solid transparent; border-radius: 8px; }
.posto:hover { background: #f6f1e6; }
.posto[aria-current="step"], .posto[aria-current="step"]:hover { background: #fbefea; border-color: var(--rosso); }
.posto:disabled { cursor: default; }
.posto:disabled:not([aria-current="step"]):hover { background: none; }
.posto-nome { display: flex; align-items: flex-end; justify-content: center; height: 2.4em; overflow: hidden;
              font-size: .72rem; line-height: 1.2; text-align: center; }
.posto-nome b { margin-right: .25em; color: var(--rosso); }
.posto-carta { display: block; width: 63px; height: 88px; }
.posto-vuoto { display: grid; place-items: center; width: 63px; height: 88px; padding: 4px; border: 2px dashed #cdbf9f;
               border-radius: 4px; background: #faf8f3; color: var(--inchiostro-tenue); font-size: 10px;
               line-height: 1.2; text-align: center; }
.gioco-striscia.ferma .posto-vuoto { border-style: solid; border-color: var(--riga); }
/* la frase dell'Ispettrice, sotto i posti, finché la fase è aperta */
.indizio { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 300px;
           padding: 0 .5rem .5rem; }
.indizio[hidden] { display: none; }
.indizio-sagoma svg { display: block; width: 30px; height: 38px; }
.indizio p { margin: 0; font-size: .98rem; line-height: 1.3; }
.indizio b { margin-right: .35rem; font-variant: small-caps; letter-spacing: .03em; color: var(--rosso); }
.indizio q { font-style: italic; quotes: "«" "»"; }

/* la mano: tutte le carte sopra il 3D, per famiglia, con un filtro e la ricerca per nome */
.mano { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; background: var(--fondo); }
.mano[hidden] { display: none; }
.mano-testa { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem .35rem; }
.mano-testa h2 { flex: 1; margin: 0; font-size: 1.15rem; color: var(--rosso); }
.mano-togli { min-height: 36px; padding: .3rem .85rem; font-size: .88rem; background: #fff; color: var(--inchiostro);
              border: 1px solid var(--riga); border-radius: 999px; }
.mano-togli:hover { background: #fff; color: var(--rosso); border-color: var(--rosso); }
.mano-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; padding: .3rem .9rem .65rem;
               border-bottom: 1px solid var(--riga); }
.mano-famiglie { display: flex; flex-wrap: wrap; gap: .35rem; }
.mano-famiglie button { min-height: 34px; padding: .25rem .85rem; font-size: .88rem; background: #fff;
                        color: var(--inchiostro); border: 1px solid var(--riga); border-radius: 999px; }
.mano-famiglie button:hover { background: #fff; color: var(--rosso); border-color: var(--rosso); }
.mano-famiglie button[aria-pressed="true"] { background: var(--inchiostro); color: #fff; border-color: var(--inchiostro); }
.mano-cerca { flex: 1 1 12rem; width: auto; max-width: 26rem; min-height: 36px; padding: .3rem .8rem;
              border-radius: 999px; }
.mano-carte { flex: 1; min-height: 0; overflow-y: auto; padding: .2rem .9rem 1.2rem; }
.mano-famiglia h3 { margin: .7rem 0 .45rem; font-size: .95rem; color: var(--inchiostro-tenue); }
.mano-griglia { display: flex; flex-wrap: wrap; gap: .6rem; }
.mano-niente { color: var(--inchiostro-tenue); font-style: italic; }
.in-mano { position: relative; display: block; min-height: 0; padding: 0; background: none; color: inherit; border: 0;
           border-radius: .5em; }
.in-mano[hidden] { display: none; }
.in-mano:hover { background: none; }
.in-mano .carta { transition: transform .12s, box-shadow .12s; }
.in-mano:not(:disabled):hover .carta { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.22); }
.in-mano:focus-visible { outline: 3px solid var(--rosso); outline-offset: 3px; }
.in-mano:disabled { cursor: not-allowed; }
.in-mano:disabled .carta { opacity: .45; }
.in-mano-dove { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 2px 8px;
                border-radius: 999px; background: var(--inchiostro); color: #fff; font-size: 11px; line-height: 16px;
                white-space: nowrap; }
/* la conferma: la carta in grande, da leggere prima di metterla */
.mano-conferma { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1rem;
                 background: rgba(26, 26, 26, .5); }
.mano-conferma[hidden] { display: none; }
.mano-conferma-dentro { display: flex; align-items: center; gap: 1.4rem; max-width: 100%; padding: 1.2rem 1.4rem;
                        background: var(--fondo); border-top: 4px solid var(--rosso); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.mano-conferma-testo { display: flex; flex-direction: column; gap: .6rem; max-width: 16rem; }
.mano-per { margin: 0; font-style: italic; color: var(--inchiostro-tenue); }
.mano-indietro { background: #fff; color: var(--inchiostro); border: 1px solid var(--riga); }
.mano-indietro:hover { background: #fff; color: var(--rosso); border-color: var(--rosso); }
.mano-avviso { margin: 0; font-size: .9rem; color: var(--rosso); }

/* il plastico nel centro della pagina: l'aiuto sotto i comandi, la scheda in basso a destra */
.gioco-centro .plastico-aiuto { top: 3.9rem; right: .9rem; }
.gioco-centro .plastico-scheda { top: auto; bottom: .75rem; width: auto; max-width: min(24rem, calc(100% - 1.5rem)); }
.plastico-scheda .chiudi { width: auto; max-width: none; margin: 0; }

/* ── il secondo tempo nella pagina unica (colpo.js, film.js): a sinistra l'Ispettrice con la sua
   chat, a destra Allarme e Coesione, in basso le otto fasi con le carte giocate; al centro il film nel
   sipario, in basso sopra il 3D, e le finestre dove la banda decide. Disegnato per 1366×768. ───── */
.gioco.colpo .plastico-scheda { display: none; }          /* il luogo lo dice il film */

/* l'Ispettrice e la sua chat, a sinistra */
.ispettrice { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .5rem .75rem; align-items: center; }
.ispettrice-sagoma { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px;
                     background: linear-gradient(180deg, #faf6ea 0%, #e5dcc3 100%); }
.ispettrice-sagoma svg { display: block; width: 100%; height: 100%; }
.ispettrice-chi h2 { margin: 0; font-size: 1.05rem; color: var(--rosso); }
.ispettrice-chi p { margin: .2rem 0 0; font-size: .85rem; line-height: 1.35; font-style: italic;
                    color: var(--inchiostro-tenue); }
.ispettrice-chat { display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; min-height: 12rem; }

/* Allarme e Coesione, a destra: il numero grande e la barra */
.segnalini { display: flex; flex-direction: column; gap: 1.1rem; margin-top: .2rem; }
.segnalino-testa { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 .35rem; }
.segnalino-testa span:first-child { flex: 1; font-size: .95rem; color: var(--inchiostro-tenue); }
.segnalino-testa b { font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.segnalino-testa span:last-child { font-size: .85rem; color: var(--inchiostro-tenue); }
.barra { height: 12px; overflow: hidden; border-radius: 999px; background: #ece6da;
         box-shadow: inset 0 1px 2px rgba(0,0,0,.1); }
.barra span { display: block; height: 100%; border-radius: inherit; transition: width .6s ease; }
.segnalino.allarme .barra span { background: var(--allarme); }
.segnalino.coesione .barra span { background: var(--coesione); }
.segnalini-regola { margin: 0; font-size: .82rem; line-height: 1.35; color: var(--inchiostro-tenue); }
.segnalini-nota { margin: 0; padding: .45rem .65rem; font-size: .88rem; line-height: 1.35; background: #fef3c7;
                  border-left: 3px solid var(--allarme); }
.segnalini-nota.ammutinati { background: #fbefea; border-left-color: var(--rosso); }

/* la striscia del colpo: tutta la larghezza, le carte giocate piene, quelle da giocare velate */
.striscia.striscia-colpo { display: block; padding: 0 1rem; }
.striscia-colpo .posti { overflow-x: auto; }
.striscia-colpo .posto { width: auto; min-width: 5.75rem; padding: .25rem .35rem .3rem; }
.striscia-colpo .posto:hover { background: none; }
.posto-carte { display: flex; gap: 3px; }
.posto-carta { position: relative; }
.posto-segno { position: absolute; left: 3px; right: 3px; bottom: 3px; padding: 1px 2px; border-radius: 3px;
               background: var(--rosso); color: #fff; font-size: 9px; line-height: 1.25; text-align: center; }
.striscia-colpo .posto:not(.giocata):not([aria-current]) .posto-carta { opacity: .5; }
.striscia-colpo .posto.giocata .posto-nome b::before { content: "✓ "; color: #2f855a; }

/* il sipario: il film in basso sopra il 3D, come i sottotitoli, il testo una riga alla volta */
.sipario { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 6; max-height: 62%;
           display: flex; justify-content: center; pointer-events: none; }
.sipario[hidden] { display: none; }
.sipario-palco { display: flex; flex-direction: column; gap: .35rem; width: min(46rem, 100%); max-height: 100%;
                 padding: .8rem 1.1rem .6rem; pointer-events: auto; color: #f6f1e7;
                 background: rgba(24, 20, 17, .87); border-top: 3px solid var(--rosso); border-radius: 6px;
                 box-shadow: 0 12px 36px rgba(0,0,0,.35); }
.sipario-titolo { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                  color: #f1b6a6; }
.sipario-righe { min-height: 0; overflow-y: auto; }
.sipario-riga { margin: 0 0 .35rem; font-size: 1.06rem; line-height: 1.45; animation: riga-che-compare .45s ease both; }
@keyframes riga-che-compare { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sipario-carte { display: flex; gap: .4rem; }
.sipario-carte[hidden], .sipario-titolo[hidden], .sipario-scorre[hidden] { display: none; }
.sipario-piede { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; }
.sipario-scorre { flex: 1; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.16); }
.sipario-scorre span { display: block; width: 0; height: 100%; background: rgba(255,255,255,.6); }
.sipario-avanti { min-height: 36px; padding: .3rem .95rem; color: #fff; background: none;
                  border: 1px solid rgba(255,255,255,.5); border-radius: 999px; }
.sipario-avanti:hover { background: rgba(255,255,255,.12); }
.sipario-avanti[hidden] { display: none; }

/* le finestre: dove il film si ferma. In basso sopra il 3D; l'imprevisto, con la riserva, tutto il centro */
.finestra { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 7; display: flex;
            flex-direction: column; gap: .55rem; max-height: calc(100% - 1.5rem); overflow-y: auto;
            padding: .85rem 1.1rem 1rem; background: var(--fondo); border-top: 4px solid var(--rosso);
            border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.28); }
.finestra-imprevisto { top: .75rem; overflow: hidden; }
.finestra-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.finestra-testa h2 { margin: 0; font-size: 1.2rem; color: var(--rosso); }
.finestra-orologio { margin: 0; display: flex; align-items: baseline; gap: .35rem; white-space: nowrap;
                     font-size: .85rem; color: var(--inchiostro-tenue); }
.finestra-tempo { font-size: 1.7rem; line-height: 1; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.finestra-orologio.poco .finestra-tempo { color: var(--rosso); }
.finestra-guida { margin: 0; font-size: .92rem; line-height: 1.35; color: var(--inchiostro-tenue); }
/* la scena del film, da rileggere nella finestra della fase: chiusa sotto l'obiettivo */
.finestra-scena summary { width: fit-content; cursor: pointer; font-size: .9rem; color: var(--rosso); }
.finestra-scena summary:hover { text-decoration: underline; }
.finestra-scena p { margin: .4rem 0 0; padding: .55rem .8rem; font-size: .92rem; font-style: italic;
                    line-height: 1.45; background: #fff; border-left: 4px solid var(--rosso); }
.finestra-corpo { display: flex; align-items: flex-start; gap: 1.2rem; min-height: 0; }
.finestra-tavolo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .8rem; }
.finestra-carta { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.finestra-carta figcaption { font-size: .82rem; font-weight: 700; color: var(--rosso); }
.finestra-esce { min-height: 0; padding: 0; background: none; border-radius: .5em; outline: 3px dashed var(--rosso);
                 outline-offset: 3px; }
.finestra-esce:hover { background: none; }
.finestra-vuota { display: grid; place-items: center; width: 189px; height: 264px; margin: 0; padding: 1rem;
                  border: 2px dashed #cdbf9f; border-radius: 8px; color: var(--inchiostro-tenue); font-style: italic;
                  text-align: center; }
.finestra-decisioni { display: flex; flex-direction: column; gap: .5rem; flex: 0 0 15.5rem; min-width: 0; }
.finestra-decisioni button { text-align: left; line-height: 1.25; }
.finestra-decisioni button small { display: block; margin-top: .1rem; font-size: .78rem; opacity: .8; }
.finestra-decisioni button:not(.principale), .finestra-opzioni button { background: #fff; color: var(--inchiostro);
                                                                        border: 1px solid var(--riga); }
.finestra-decisioni button:not(.principale):hover:not(:disabled) { background: #fff; color: var(--rosso);
                                                                    border-color: var(--rosso); }
.finestra button:disabled { opacity: .5; cursor: not-allowed; }
.finestra-scelta { margin: 0; font-size: .9rem; line-height: 1.35; }
.finestra-avviso { margin: 0; font-size: .88rem; line-height: 1.35; color: var(--rosso); }
.finestra-avviso[hidden] { display: none; }
/* l'imprevisto: la riserva a sinistra, che scorre; l'annuncio, il tono e le tre risposte a destra */
.finestra-imprevisto .finestra-corpo { flex: 1; align-items: stretch; }
.finestra-riserva { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .4rem; }
.riserva-colpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.finestra .riserva-colpo .mano-filtri { padding: 0 0 .5rem; }
.riserva-colpo .mano-cerca { min-width: 0; }
.finestra .riserva-colpo .mano-carte { padding: .2rem .2rem .6rem 0; }
.finestra-imprevisto .finestra-decisioni { overflow-y: auto; }
.finestra-annuncio { display: block; padding: .55rem .75rem; font-style: italic; line-height: 1.4; background: #fff;
                     border-left: 4px solid var(--rosso); quotes: "«" "»"; }
.finestra-etichetta { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.finestra-tono { min-height: 3.4rem; resize: vertical; font-size: .92rem; }
/* il dilemma: la domanda e tre strade */
.finestra-domanda { margin: 0; font-size: 1.02rem; line-height: 1.45; }
.finestra-opzioni { display: flex; flex-direction: column; gap: .45rem; }
.finestra-opzioni button { padding: .65rem .9rem; text-align: left; line-height: 1.35; border-left: 4px solid var(--rosso); }
.finestra-opzioni button:hover:not(:disabled), .finestra-opzioni button.scelta { background: #fef3c7; color: var(--inchiostro); }
/* la fine: la Banca intera e una domanda, in basso come l'ultima riga del film */
.colpo-fine { position: absolute; bottom: .75rem; left: 50%; z-index: 6; width: min(34rem, calc(100% - 2rem));
              padding: 1.2rem 1.6rem; transform: translateX(-50%); text-align: center; background: rgba(255,255,255,.94);
              border-top: 4px solid var(--rosso); border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.colpo-fine h2 { margin: 0 0 .45rem; font-size: 1.9rem; color: var(--rosso); }
.colpo-fine p { margin: 0; line-height: 1.4; color: var(--inchiostro-tenue); }
/* la mano della riserva sopra il 3D, per la carta al volo e il rimedio: come la mano del piano */
.mano-colpo .riserva-colpo { min-height: 0; }

/* il messaggio della regia, in alto al centro, nei due tempi */
.regia { position: absolute; top: .6rem; left: 50%; z-index: 9; display: flex; align-items: center; gap: .6rem;
         width: min(40rem, calc(100% - 1.5rem)); padding: .5rem .55rem .5rem 1rem; transform: translateX(-50%);
         color: #fff; background: var(--inchiostro); border-left: 5px solid var(--rosso); border-radius: 6px;
         box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.regia[hidden] { display: none; }
.regia p { flex: 1; margin: 0; line-height: 1.35; }
.regia b { margin-right: .4rem; font-variant: small-caps; letter-spacing: .04em; color: #f1b6a6; }
.regia .croce, .regia .croce:hover { color: #fff; }
.regia .croce:hover { background: rgba(255,255,255,.14); }

@media (max-width: 1100px) {
  .gioco, .striscia { grid-template-columns: 240px minmax(0, 1fr) 240px; }
  .gioco-centro .plastico-aiuto { display: none; }               /* i comandi vanno su due righe */
  .indizio { margin: 0 240px; }
  .prof { grid-template-columns: minmax(0, 1fr); }
  .prof-volto { max-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .prof-volto.parla #bocca { animation: none; }
  .in-mano .carta { transition: none; }
  .sipario-riga { animation: none; }
  .barra span { transition: none; }
}