/* Engage: stile di telefono e schermo, sopra spell.css.
   Tutti i colori passano dalle variabili --tema-*: il tema del cliente (ondata 2) si
   aggiunge ridefinendo solo queste, senza toccare le pagine. Regole del CIB:
   l'arancione non è mai testo su fondo chiaro e non regge testo bianco sopra. */
:root {
  --tema-primario: var(--blu-spell);
  --tema-su-primario: var(--bianco);
  --tema-accento: var(--arancione-teatro);
  --tema-su-accento: var(--nero);
  --tema-sfondo: var(--sabbia-20);
  --tema-superficie: var(--bianco);
  --tema-testo: var(--antracite-spell);
  --tema-tenue: var(--antracite-80);
  --tema-bordo: var(--sabbia-spell);
  --tema-giusto: #1e7b45;
  --tema-sbagliato: var(--corallo-spell);
  --tema-logo: url(/assets/spell-logo.png);
  --bg: var(--tema-sfondo);
  --border: var(--tema-bordo);
  --ink: var(--tema-testo);
}

[hidden] { display: none !important; }

/* --- Telefono del partecipante: caratteri grandi, pulsanti larghi, una mano. */
.phone { font-size: 17px; }
.phone #app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.phone header.me { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; background: var(--tema-superficie); border-bottom: 1px solid var(--tema-bordo); }
.phone header.me .who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.phone header.me .pts { font-weight: 700; color: var(--tema-primario); white-space: nowrap; }
.phone main { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
.phone h1 { font-size: 1.5rem; text-align: center; }
.phone .center { text-align: center; }
.phone .big-msg { font-size: 1.5rem; font-weight: 700; text-align: center; margin: 1rem 0 0.25rem; }
.phone .sub { text-align: center; color: var(--tema-tenue); }
.phone input.big { width: 100%; font-size: 1.15rem; padding: 0.8rem; text-align: center; }
.phone input.code { text-transform: uppercase; letter-spacing: 0.15em; }
.phone button.big { width: 100%; padding: 1rem; font-size: 1.1rem; }
.phone .question { font-size: 1.3rem; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.phone .options { display: grid; gap: 0.6rem; }
.phone .options button { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.6rem; padding: 0.7rem 0.9rem; font-size: 1.1rem; text-align: left; white-space: normal; background: var(--tema-superficie); color: var(--tema-testo); border: 2px solid var(--tema-primario); }
.phone .options button:hover:not(:disabled) { background: var(--blu-10); }
.phone .options button.chosen { background: var(--tema-primario); color: var(--tema-su-primario); }
.phone .options button:disabled:not(.chosen) { opacity: 0.45; }
.phone .options button.chosen:disabled { opacity: 1; }
.letter { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-md); background: var(--tema-primario); color: var(--tema-su-primario); font-weight: 700; }
.chosen .letter { background: var(--tema-su-primario); color: var(--tema-primario); }
.phone .timer { text-align: center; font-size: 2.4rem; font-weight: 800; color: var(--tema-primario); font-variant-numeric: tabular-nums; }
.phone .result { border-radius: var(--radius-md); padding: 1.2rem; text-align: center; font-size: 1.4rem; font-weight: 700; }
.phone .result.ok { background: #dff3e6; color: var(--tema-giusto); }
.phone .result.ko { background: var(--corallo-10); color: var(--antracite-spell); }
.phone .result.none { background: var(--antracite-10); color: var(--antracite-spell); }
.phone .scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.phone .scale button { padding: 1rem 0; font-size: 1.5rem; }
.phone .scale-labels { display: flex; justify-content: space-between; color: var(--tema-tenue); font-size: 0.9rem; }
.phone .big-text { font-size: 1.1rem; padding: 0.8rem; }
.phone .sent { font-size: 1.1rem; overflow-wrap: anywhere; }
.phone .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.phone .stat { background: var(--tema-superficie); border: 1px solid var(--tema-bordo); border-radius: var(--radius-md); padding: 0.7rem; text-align: center; }
.phone .stat b { display: block; font-size: 1.6rem; color: var(--tema-primario); }
.phone .team-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; }
.phone .team-pick button { padding: 0.8rem 0.5rem; font-size: 1rem; white-space: normal; border: 3px solid transparent; }
.phone .team-pick button.sel { border-color: var(--tema-testo); box-shadow: 0 0 0 2px var(--tema-superficie) inset; }
.phone .linkish { background: none; border: none; color: var(--tema-primario); text-decoration: underline; padding: 0.3rem; font-weight: 600; }
.phone .linkish:hover:not(:disabled) { background: none; }
.phone .team-block { border-radius: var(--radius-md); padding: 1.4rem 1rem; text-align: center; font-size: 1.4rem; font-weight: 700; }
.phone .offline { background: var(--arancione-20); text-align: center; padding: 0.3rem; font-size: 0.85rem; }
.phone .privacy { font-size: 0.8rem; color: var(--tema-tenue); text-align: center; margin: 0.5rem 0 0; }
.signature { text-align: center; font-size: 0.75rem; color: var(--tema-tenue); padding: 1rem 0; }

/* Chip della squadra: numero e colore, sempre insieme (il colore da solo non basta a chi
   distingue male i colori). */
.chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); font-weight: 700; white-space: nowrap; border: 1px solid rgba(0, 0, 0, 0.15); }

/* --- Schermo proiettato: si legge dal fondo della sala, anche con proiettori deboli. */
.screen { background: var(--bianco); color: var(--nero); font-size: 2.2vh; overflow: hidden; }
.screen #stage { height: 100vh; display: flex; flex-direction: column; padding: 3vh 4vw; gap: 2.5vh; }
.screen .top { display: flex; align-items: center; gap: 2vw; font-size: 2.6vh; color: var(--antracite-80); }
.screen .top .logo { width: 12vh; min-width: 120px; height: 5vh; background: var(--tema-logo) left center / contain no-repeat; }
.screen .top .right { margin-left: auto; font-weight: 700; color: var(--nero); }
.screen .fill { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: safe center; }
.screen h1 { font-size: 6vh; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.screen .lobby { display: grid; grid-template-columns: auto 1fr; gap: 5vw; align-items: center; }
.screen .qr { width: 52vh; height: 52vh; padding: 1.5vh; background: var(--bianco); border: 0.4vh solid var(--nero); }
.screen .qr svg { width: 100%; height: 100%; display: block; }
.screen .join-how { font-size: 3.4vh; line-height: 1.4; }
.screen .join-code { font-family: var(--mono); font-weight: 800; font-size: 8vh; letter-spacing: 0.15em; }
.screen .count { font-size: 4.5vh; font-weight: 800; color: var(--tema-primario); }
.screen .teams { display: flex; flex-wrap: wrap; gap: 1vh; margin-top: 2vh; }
.screen .teams .chip { font-size: 2.6vh; padding: 0.6vh 1.4vh; }
.screen .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 2vh 2vw; margin-top: 4vh; }
.screen .opt { display: flex; align-items: center; gap: 1.5vw; font-size: 4vh; font-weight: 700; padding: 2vh 2vw; border: 0.4vh solid var(--tema-primario); border-radius: 1.2vh; position: relative; overflow: hidden; }
.screen .opt .letter { width: 6vh; height: 6vh; font-size: 3.5vh; border-radius: 1vh; }
.screen .opt .bar { position: absolute; inset: 0 auto 0 0; background: var(--blu-20); z-index: 0; transition: width 0.6s; }
.screen .opt > :not(.bar) { position: relative; z-index: 1; }
.screen .opt .n { margin-left: auto; font-variant-numeric: tabular-nums; }
.screen .opt.right { border-color: var(--tema-giusto); }
.screen .opt.right .bar { background: #c9ecd6; }
.screen .opt.right .letter { background: var(--tema-giusto); }
.screen .opt.wrong { opacity: 0.55; }
.screen .status-row { display: flex; align-items: center; justify-content: center; gap: 6vw; margin-top: 3vh; font-size: 3.4vh; }
.screen .clock { font-size: 10vh; font-weight: 800; color: var(--tema-primario); font-variant-numeric: tabular-nums; min-width: 15vh; text-align: center; }
.screen .clock.low { color: var(--corallo-spell); }
.screen .rank { display: grid; gap: 0.8vh; max-width: 120vh; width: 100%; margin: 2vh auto 0; }
.screen .rank .r { display: flex; align-items: center; gap: 2vw; font-size: 3.2vh; padding: 0.6vh 2vw; border-radius: 1vh; background: var(--azzurro-10); }
.screen .rank .r .pos { width: 6vh; font-weight: 800; color: var(--tema-primario); }
.screen .rank .r .nm { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen .rank .r .pt { font-weight: 800; font-variant-numeric: tabular-nums; }
.screen .tbar { display: flex; align-items: center; gap: 2vw; font-size: 3vh; }
.screen .tbar .lbl { width: 30vh; font-weight: 700; }
.screen .tbar .track { flex: 1; height: 4vh; background: var(--antracite-10); border-radius: 1vh; overflow: hidden; }
.screen .tbar .fillbar { height: 100%; border-radius: 1vh; transition: width 0.8s; }
.screen .tbar .pt { width: 12vh; text-align: right; font-weight: 800; }
.screen .hint { position: fixed; bottom: 1vh; right: 1vw; font-size: 1.4vh; color: var(--antracite-80); }

/* Sondaggi e nuvola sullo schermo. */
.screen .poll-body { margin-top: 3vh; min-height: 0; }
.screen .waiting { text-align: center; font-size: 4vh; color: var(--antracite-80); }
.screen .hbars { display: grid; gap: 1.4vh; max-width: 150vh; margin: 0 auto; }
.screen .hbar { display: flex; align-items: center; gap: 2vw; font-size: 3.2vh; }
.screen .hbar .lbl { width: 45vh; display: flex; align-items: center; gap: 1vw; font-weight: 700; overflow: hidden; }
.screen .hbar .letter { width: 5vh; height: 5vh; font-size: 3vh; }
.screen .hbar .track { flex: 1; height: 5vh; background: var(--antracite-10); border-radius: 1vh; overflow: hidden; display: flex; }
.screen .hbar .fillbar { height: 100%; border-radius: 1vh; transition: width 0.6s; }
.screen .hbar .track.stack span { display: block; height: 100%; transition: width 0.6s; }
.screen .hbar .pt { width: 18vh; text-align: right; font-weight: 800; }
.screen .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 1vh 2vw; font-size: 2.6vh; margin-bottom: 2vh; }
.screen .legend i { display: inline-block; width: 2.4vh; height: 2.4vh; border-radius: 0.4vh; margin-right: 0.6vw; vertical-align: middle; }
.screen .scale-wrap { display: flex; align-items: flex-end; justify-content: center; gap: 6vw; }
.screen .avg { text-align: center; }
.screen .avg b { display: block; font-size: 14vh; line-height: 1; color: var(--tema-primario); }
.screen .avg small { font-size: 3vh; }
.screen .vbars { display: flex; align-items: flex-end; gap: 2vw; height: 38vh; }
.screen .vbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 10vh; }
.screen .vbar .col { width: 100%; background: var(--tema-primario); border-radius: 1vh 1vh 0 0; transition: height 0.6s; min-height: 0.4vh; }
.screen .vbar .n { font-size: 3vh; font-weight: 800; }
.screen .vbar .v { font-size: 3.4vh; font-weight: 700; margin-top: 0.6vh; }
.screen .scale-labels { display: flex; justify-content: space-between; font-size: 2.6vh; color: var(--antracite-80); margin-top: 1vh; }
.screen .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(40vh, 1fr)); gap: 1.6vh; max-height: 52vh; overflow: hidden; }
.screen .answer-card { background: var(--azzurro-10); border-left: 1vh solid var(--tema-primario); border-radius: 1vh; padding: 1.6vh 2vh; font-size: 3vh; overflow-wrap: anywhere; }
.screen .cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1vh 3vh; max-width: 160vh; margin: 0 auto; max-height: 55vh; overflow: hidden; line-height: 1.1; }
.screen .cloud span { font-weight: 700; white-space: nowrap; }

/* Pagine dello staff: modulo delle attività (editor e domanda al volo). */
.opt-row { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.3rem; }
.opt-row input[type=text] { flex: 1; min-width: 0; }
.opt-row label { margin: 0; display: flex; align-items: center; gap: 0.2rem; font-weight: 500; }
label.check { display: flex; gap: 0.4rem; align-items: center; font-weight: 500; color: var(--ink); }
.kind { flex: none; font-size: 0.7rem; font-weight: 700; color: var(--muted); width: 1.2rem; }