/* ============================================================================
   JoeQUIZ · schermo condiviso.
   Una sola composizione, due scale. Niente scroll a 1920x1080, 1280x720 e
   1024x768 — se qualcosa scorre, e' un bug.
   ============================================================================ */

.jq-palco {
  --ds: 1;                       /* il token di scala: tv = 1, tablet = 0.6 */
  height: 100dvh;
  overflow: hidden;              /* mai scroll, mai */
  display: flex;
  flex-direction: column;
  padding: calc(3vh * var(--ds)) calc(3vw * var(--ds));
  cursor: none;                  /* e' una trasmissione, non un'interfaccia */
}
.jq-palco[data-modo="tablet"] { --ds: 0.6; }

.jq-scena { flex: 1 1 auto; display: flex; flex-direction: column; gap: calc(2vh * var(--ds)); min-height: 0; }
.jq-scena[hidden] { display: none; }

.jq-palco__etichetta { font-family: var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
                       color: var(--muted-ink); font-size: calc(1.6vw * var(--ds)); margin: 0; }
.jq-palco__codice    { font-size: calc(12vw * var(--ds)); letter-spacing: 0.18em; margin: 0; line-height: 1; }
.jq-palco__titolo    { font-family: var(--font-display); font-size: calc(9vw * var(--ds));
                       margin: 0; line-height: 1.02; }
.jq-palco__regola    { font-size: calc(2.4vw * var(--ds)); color: var(--muted-ink); margin: 0; }

.jq-palco__domanda {
  font-family: var(--font-display);
  font-size: calc(4.4vw * var(--ds));
  line-height: 1.1; margin: 0;
  flex: 0 0 auto;
}

.jq-palco__risposte { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.6vh * var(--ds)); flex: 1 1 auto; }
.jq-palco__risposte .jq-risposta { min-height: 0; font-size: calc(2.2vw * var(--ds)); }
.jq-palco__risposte .jq-risposta__glifo { width: calc(3vw * var(--ds)); height: calc(3vw * var(--ds)); }

.jq-palco__griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(14vw * var(--ds)), 1fr));
                     gap: calc(1.4vh * var(--ds)); overflow: hidden; }
.jq-palco__carta { display: flex; align-items: center; gap: 10px; padding: calc(1.2vh * var(--ds));
                   background: var(--ink-soft); border-radius: var(--radius);
                   font-size: calc(1.6vw * var(--ds)); }

/* La striscia dice CHI ha risposto. Non c'e' modo di sapere cosa: il dato non arriva. */
.jq-palco__striscia { display: flex; gap: calc(0.8vw * var(--ds)); flex: 0 0 auto; }
.jq-palco__pallino  { width: calc(3vw * var(--ds)); height: calc(3vw * var(--ds));
                      display: grid; place-items: center; border-radius: 50%;
                      background: var(--ink-soft); color: var(--muted-ink);
                      font-family: var(--font-mono); font-size: calc(1.2vw * var(--ds)); }
.jq-palco__pallino--fatto { background: var(--azzurro); color: var(--ink); }

.jq-palco__classifica { flex: 1 1 auto; overflow: hidden; padding: calc(2vh * var(--ds)); }
.jq-palco__riga { display: grid; grid-template-columns: calc(4vw * var(--ds)) 1fr auto;
                  align-items: center; gap: calc(1.2vw * var(--ds));
                  padding: calc(1vh * var(--ds)) 0; font-size: calc(2.4vw * var(--ds));
                  border-bottom: 1px solid rgba(0,0,0,0.08); }
.jq-palco__pos   { color: color-mix(in oklch, var(--ink) 55%, transparent); }
.jq-palco__nome  { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jq-palco__punti { font-weight: 800; }

.jq-palco .jq-bar { height: calc(1.4vh * var(--ds)); flex: 0 0 auto; }

.jq-palco__errore { position: fixed; inset: auto 2vw 2vh 2vw; padding: 1vh 1vw;
                    background: var(--flame); color: var(--paper); border-radius: var(--radius); }

/* D8 · le banche del finale. Le barre SONO la schermata: tutto il resto e' contorno. */
.jq-banche { display: flex; flex-direction: column; gap: calc(1.4vh * var(--ds));
             flex: 1 1 auto; justify-content: center; }
.jq-banca { display: grid; grid-template-columns: calc(14vw * var(--ds)) 1fr calc(6vw * var(--ds));
            align-items: center; gap: calc(1.2vw * var(--ds)); }
.jq-banca__nome  { font-family: var(--font-display); font-size: calc(2.2vw * var(--ds));
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jq-banca__tempo { font-size: calc(2vw * var(--ds)); text-align: right; }
.jq-banca .jq-bar { height: calc(3.2vh * var(--ds)); }

/* Colpito ma ancora sullo schermo: non sparisce, si spegne. */
.jq-banca--fuori { opacity: 0.38; }
.jq-banca--fuori .jq-banca__nome { text-decoration: line-through; }