/* 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; }
.carte-fase-rimedio .carta { padding: .4rem .6rem; cursor: pointer; }
.carte-fase-rimedio .carta.scelta { background: #fef3c7; }
.rimedio .riserva .carta { padding: .4rem .6rem; cursor: pointer; }
.rimedio .riserva .carta.scelta { background: #fef3c7; }
.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; }
.al-volo .riserva .carta { padding: .4rem .6rem; cursor: pointer; }
.al-volo .riserva .carta.scelta { background: #fef3c7; }

/* 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; }

  /* Risposta libera, dilemma: testarea e pulsanti pieni */
  .input-prof, .risposta-libera form { 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; }

/* risposta libera */
.risposta-libera { background: var(--carta); border: 1px solid var(--riga); padding: 1.5rem; border-top: 4px solid var(--coesione); }
.risposta-libera h2 { margin-top: 0; color: var(--coesione); }
.risposta-libera .domanda { font-size: 1em; line-height: 1.5; }
.risposta-libera form { display: grid; gap: .6rem; margin-top: 1rem; }
.risposta-libera textarea { width: 100%; resize: vertical; font-size: 1em; }
.riserva, .carte-in-fase { list-style: none; padding: 0; display: grid; gap: .4rem;
                           grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.riserva .carta.scelta { background: #fef3c7; }
.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; }