/* Telão (projetor, 16:9): tema de jogo escuro de alto contraste vem dos tokens (.game em tokens.css). Só leitura. */
main:has(> .screen) { max-width: none; }
.live.game.screen { max-width: none; margin: 0; padding: 1.75rem 2.5rem 2rem; gap: 1.25rem; font-size: 1.5rem; }
.screen .game-head { gap: 1rem; }
.screen .game-head .chip { padding: .625rem 1.125rem; border-radius: var(--radius-button); font-size: 1.5rem; }
.screen .game-head .logo { height: 5.5rem; margin: -.5rem 0 -.5rem .375rem; }
.screen .timer-round { --round: 5.25rem; }
.screen h1 { font-size: 3rem; }
.screen .big { margin: 0; }

/* Lobby: painel branco com URL + código + QR de um lado, contagem e fichas do outro. O QR é SVG escuro sobre branco com folga
   (zona de silêncio). */
.screen .lobby { flex-direction: row; gap: 1.75rem; flex: 1; min-height: 0; }
.screen .lobby-join { flex: none; width: 25rem; display: flex; flex-direction: column; align-items: center; gap: .875rem; padding: 1.75rem; text-align: center; }
.screen .lobby-join-text { display: flex; flex-direction: column; align-items: center; gap: .875rem; min-width: 0; width: 100%; }
.screen .lobby-join-text p { margin: 0; }
.screen .lobby-join .muted { font-size: 1.375rem; font-weight: 500; }
.screen .url { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--card-link); overflow-wrap: anywhere; }
.screen .code { font-size: 5.75rem; line-height: 1; letter-spacing: .625rem; padding: .625rem 1.5rem .875rem; background: var(--card-hilite); border-radius: 1.25rem; box-shadow: inset 0 -.375rem 0 var(--card-hilite-edge); }
.screen .join-qr-box { flex: none; width: 13rem; padding: .5rem; background: var(--card); }
.screen .join-qr-box svg { display: block; width: 100%; height: auto; }
.screen .lobby-people { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 1.125rem; }
.screen .people-count { display: flex; align-items: baseline; gap: 1rem; margin: 0; padding: 1rem 1.5rem; }
.screen .big-number { font-family: var(--font-display); font-size: 4.5rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.screen .people-count .muted-dark { font-size: 1.375rem; font-family: var(--font-display); font-weight: 500; }
/* Destaque de quem entrou (D62): o último a chegar, avatar animado, na linha do contador. */
.screen .join-spot { margin-left: auto; display: flex; align-items: center; gap: 1rem; min-width: 0; align-self: center; font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; }
.screen .join-spot[hidden] { display: none; }
.screen .join-spot .avatar { --avatar-size: 4.5rem; --avatar-ring-w: .375rem; flex: none; }
.screen .join-spot-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen .nicknames { position: relative; flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max-content; gap: .75rem; align-content: start; font-size: 1.125rem; }
.screen .nickname-chip { display: flex; align-items: center; gap: .625rem; min-width: 0; padding: .5rem .75rem .5rem .5rem; background: var(--chip); border-radius: 1.125rem; box-shadow: 0 var(--lift-chip) 0 var(--chip-shade); font-family: var(--font-display); font-weight: 500; }
.screen .nickname-chip .nick { min-width: 0; }
.screen .nickname-chip .avatar { --avatar-size: 2.5rem; }
.screen .lobby-people .muted-dark { min-height: 1.75rem; font-size: 1.25rem; font-family: var(--font-display); font-weight: 500; }
.screen .waiting { margin: auto 0 0; display: flex; align-items: center; gap: .75rem; font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; }
.screen .waiting .dot { width: .875rem; height: .875rem; border-radius: var(--radius-round); background: var(--good); }

/* Pergunta: enunciado em cartão branco, opções e (no gabarito) barras + "Mais rápidos". */
.screen .stage-wrap { flex: 1; min-height: 0; gap: 1.25rem; }
.screen .statement { flex: none; margin: 0; padding: 1.5rem 2.5rem; font-size: 2.875rem; font-weight: 600; line-height: 1.2; text-align: center; background: var(--card); color: var(--card-ink); border-radius: var(--radius-panel); box-shadow: 0 var(--lift-panel) 0 var(--panel-shade); }
.screen .prepare { margin: 0; text-align: center; font-family: var(--font-display); font-size: 3rem; font-weight: 700; }
.screen .stage { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.screen .stage .options { flex: 1; min-width: 0; margin: 0; --options-gap: 1.125rem; }
.screen .option { min-height: 0; gap: 1.25rem; padding: .75rem 1.5rem; border-radius: 1.5rem; box-shadow: 0 .5625rem 0 var(--opt-shade); overflow: hidden; font-weight: 600; }
.screen .option .shape { display: flex; align-items: center; justify-content: center; flex: none; width: max(2.75rem, 1.5em); height: max(2.75rem, 1.5em); border-radius: 1rem; background: var(--wash); font-size: .8em; }
.screen .option .label { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; }

/* Gabarito: barras por opção (altura relativa à mais votada) e cartão "Mais rápidos". */
.screen .reveal-panel { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .875rem; padding: 1.625rem 1.875rem 1.375rem; }
.screen .reveal-top { display: flex; align-items: center; gap: .875rem; }
.screen .reveal-top .stamp { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.625rem; }
.screen .reveal-top .muted-dark { margin-left: auto; font-size: 1.375rem; font-family: var(--font-display); font-weight: 500; }
.screen .bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 1.375rem; padding-top: .5rem; }
.screen .bar-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .625rem; opacity: .4; }
.screen .bar-col.correct { opacity: 1; }
.screen .bar-count { font-family: var(--font-display); font-size: 2.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.screen .bar { width: 100%; min-height: .5rem; background: var(--opt-bg); border-radius: 1rem 1rem .375rem .375rem; box-shadow: 0 .4375rem 0 var(--opt-shade); }
.screen .bar-col.correct .bar { outline: .3125rem solid var(--good); outline-offset: .3125rem; }
.screen .bar-label { max-width: 100%; display: flex; gap: .5rem; align-items: center; font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; }
.screen .bar-label .shape { flex: none; font-family: var(--font-sans); }
.screen .bar-label .bar-text { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 1.1; }
.screen .fastest { --fast-avatar: 2.25rem; flex: 1.3 1 0; min-height: 0; display: flex; flex-direction: column; gap: .375rem; padding: .875rem 1.5rem .5rem; }
.screen .fastest h2 { display: flex; align-items: center; gap: .625rem; font-size: 1.5rem; }
.screen .fastest .bolt { stroke: var(--opt-0); stroke-width: 2.6; width: 1.75rem; height: 1.75rem; }
.screen .fastest .meta { flex: none; min-height: 1.75rem; margin: 0; text-align: center; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.screen ol.fastest-list { position: relative; flex: 1; min-height: 0; overflow: hidden; font-size: 1.1875rem; margin: 0; display: grid; grid-auto-flow: column; grid-template-columns: repeat(var(--fast-cols, 1), minmax(0, 1fr)); grid-template-rows: repeat(var(--fast-rows, 10), max-content); gap: .375rem 1.5rem; }
.screen ol.fastest-list li { min-width: 0; grid-template-columns: 3rem var(--fast-avatar) minmax(10ch, 1fr) max-content max-content; gap: 0 var(--space-3); padding: .25rem .625rem; }
.screen ol.fastest-list li:first-child { background: var(--card-hilite); }
.screen ol.fastest-list li .avatar { --avatar-size: var(--fast-avatar); --avatar-ring: var(--card-ink); }
.screen ol.fastest-list .num { text-align: right; font-size: 1.125rem; color: var(--card-muted); }
.screen ol.fastest-list .pts { font-size: 1.25rem; color: var(--card-ok); }
.screen .time-bar { height: 1.125rem; border-radius: .5625rem; }

/* Ranking: pódio de cores (1º a 3º em cartão branco), demais em ficha. Só quem subiu aparece em destaque (D63), logo abaixo. */
.screen .board { align-items: center; flex: 1; min-height: 0; gap: .875rem; }
.screen .board > * { width: min(60rem, 100%); }
.screen .board-head { display: flex; flex-direction: row; align-items: center; gap: 1rem; }
.screen .board-head h1 { margin: 0; font-size: 2.75rem; }
.screen .board-head .chip { font-size: 1.375rem; }
.screen .ranking-head { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 7rem; font-size: 1.125rem; color: var(--on-dark-muted); font-family: var(--font-display); padding: 0 1.125rem 0 6.5rem; }
.screen .ranking-head span:nth-child(n+2) { text-align: right; }
.screen ol.ranking { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-auto-rows: minmax(0, 3.5rem); gap: .5rem; align-content: start; font-size: 1.625rem; }
.screen ol.ranking li {
    position: relative; display: grid; grid-template-columns: 2.75rem var(--avatar-lg) minmax(0, 1fr) max-content 7rem; gap: 0 1rem; align-items: center; padding: 0 1.125rem 0 .5rem;
    background: var(--chip); color: var(--game-text); border-radius: 1rem; box-shadow: 0 var(--lift-chip) 0 var(--chip-shade);
    font-family: var(--font-display); font-weight: 600;
}
.screen ol.ranking li.top { background: var(--card); color: var(--card-ink); box-shadow: 0 var(--lift-chip) 0 var(--panel-shade); }
.screen ol.ranking li .pos { height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: .75rem; background: var(--on-dark-muted); color: var(--card-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.screen ol.ranking li.medal-1 .pos { background: var(--medal-1); }
.screen ol.ranking li.medal-2 .pos { background: var(--medal-2); }
.screen ol.ranking li.medal-3 .pos { background: var(--medal-3); }
.screen ol.ranking li .avatar { --avatar-size: 2.375rem; }
.screen ol.ranking li .num { text-align: right; font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Pódio (FINISHED): 2º, 1º, 3º; a moldura do avatar leva a cor da medalha. Tamanhos em `vh` (com teto em rem): o pódio, os chips do 4º ao
   10º (até 2 linhas) e o rodapé cabem em 1280x720 sem corte. */
.screen .finish { display: flex; flex-direction: column; align-items: center; flex: 1; min-height: 0; }
.screen .finish-podium { display: flex; flex-direction: column; align-items: center; flex: 1; min-height: 0; width: 100%; gap: .625rem; }
.screen .finish-podium[hidden], .screen .finish-summary[hidden] { display: none; }
/* D70: sessão cancelada, só o aviso, parado e centralizado (sem animação). */
.screen .finish-cancelled { margin: auto; padding: 2.5rem 3.5rem; text-align: center; }
.screen .finish h1 { font-size: clamp(2.25rem, 6vh, 3.25rem); }
.screen .podium { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: 1.375rem; }
.screen .podium > div { transform-origin: bottom center; width: 16.25rem; display: flex; flex-direction: column; align-items: center; gap: .625rem; text-align: center; }
.screen .podium .avatar { --avatar-size: clamp(4.5rem, 11vh, 7.5rem); --avatar-ring-w: .5rem; box-shadow: 0 .5rem 0 var(--panel-shade); }
.screen .podium .first .avatar { --avatar-size: clamp(6rem, 14vh, 10rem); --avatar-ring: var(--medal-1); }
.screen .podium .second .avatar { --avatar-size: clamp(5rem, 12vh, 8.125rem); --avatar-ring: var(--medal-2); }
.screen .podium .third .avatar { --avatar-size: clamp(4.5rem, 11vh, 7.5rem); --avatar-ring: var(--medal-3); }
.screen .podium .nick { max-width: 100%; font-family: var(--font-display); font-size: clamp(1.25rem, 3.4vh, 1.875rem); font-weight: 700; }
.screen .podium .num { font-family: var(--font-display); font-size: clamp(1.125rem, 2.8vh, 1.5rem); font-weight: 600; color: var(--hilite); }
.screen .podium .step { width: 100%; display: flex; justify-content: center; padding-top: .5rem; font-family: var(--font-display); font-size: clamp(2rem, 6.5vh, 4rem); font-weight: 700; line-height: 1; color: var(--card-ink); border-radius: 1.375rem 1.375rem 0 0; box-shadow: inset 0 -.625rem 0 var(--scrim-soft); }
.screen .podium .first .step { height: clamp(5rem, 16vh, 12.5rem); background: var(--medal-1); }
.screen .podium .second .step { height: clamp(3.75rem, 11.5vh, 9.375rem); background: var(--medal-2); }
.screen .podium .third .step { height: clamp(2.75rem, 8vh, 6.875rem); background: var(--medal-3); }
.screen .podium-rest { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; }
.screen .podium-rest li { max-width: 100%; padding: .375rem .75rem; background: var(--chip); border-radius: var(--radius-md); box-shadow: 0 .25rem 0 var(--chip-shade); font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; white-space: nowrap; }
.screen .podium-rest li .pos { font-weight: 700; }
.screen .podium-rest li .pts { color: var(--hilite); font-variant-numeric: tabular-nums; }
.screen .podium-rest li.compact .pts { display: none; } /* não coube com o placar em 2 linhas: só posição e apelido */
.screen .podium-hint { margin: 0; min-height: 1.5em; font-size: 1.125rem; color: var(--on-dark-muted); }
.screen .podium-hint:empty { display: none; }
.screen .podium .crown { flex: none; width: clamp(2.25rem, 6vh, 4rem); height: clamp(1.5rem, 4.2vh, 2.75rem); fill: var(--medal-1); stroke: #c99410; stroke-width: 3; stroke-linejoin: round; }

/* O telão é a viewport inteira, em toda fase: nada rola, nada vaza para fora do projetor. */
.live.game.screen { height: 100vh; height: 100dvh; overflow: hidden; }

/* D60: "Mais rápidos" ao lado do gabarito só em tela larga (16:9 e pelo menos 1400 px); abaixo disso, empilhado e em duas
   colunas. Nos dois casos a lista cabe na altura (sem rolagem): o controller mostra só as linhas que cabem e o resto vira "e mais N". */
@media (min-aspect-ratio: 4/3) and (min-width: 1400px) {
    .screen .stage { flex-direction: row; gap: 1.75rem; }
    .screen .fastest { --fast-avatar: var(--avatar-md); flex: none; width: clamp(24rem, 34%, 30rem); padding: 1.375rem 1.5rem; gap: .625rem; }
    .screen ol.fastest-list { font-size: 1.375rem; }
}

/* Movimento no ranking (D63): só quem subiu ou entrou no top 10 leva marca; quem desceu ou ficou igual não leva nada. */
.screen ol.ranking li.rising { z-index: 1; }
.screen ol.ranking li .move { grid-column: 4; padding: .1875rem .625rem; border-radius: .625rem; font-size: 1.125rem; font-weight: 700; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.screen ol.ranking li .move-up { background: var(--good); color: var(--on-good); }
.screen ol.ranking li .num { grid-column: 5; }
.screen .time-stamp { padding: .375rem 1.125rem; font-size: 2rem; }

/* O pulso do gabarito e o crescimento das barras partem da base. */
.screen .bar { transform-origin: bottom center; }

/* Resumo da partida (D65): legenda fixa no topo, barra geral, uma barra por jogador (até 20 por página, 2 colunas divididas por igual, `--rows` vem do JS). Barras de
   `div` com `flex-grow` = contagem; vão de 2px na cor da superfície (--panel); cantos de 4px só nas pontas (o contêiner recorta);
   segmento com 0 não é desenhado. Número em tinta escura (--on-good): o branco não passa de 4.5:1 sobre as três cores. */
.screen .finish-summary { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: .625rem; padding: 1rem 1.75rem 1.125rem; }
.screen .summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.screen .summary-head h1 { margin: 0; font-size: 2.25rem; }
.screen .summary-page { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.screen .summary-empty { margin: auto; font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; text-align: center; }
.screen .summary-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .625rem; }
.screen .summary-body[hidden], .screen .summary-empty[hidden] { display: none; }
.screen .legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--game-text); }
.screen .legend-item { display: flex; align-items: center; gap: .5rem; }
.screen .legend-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: .375rem; color: var(--on-good); font-weight: 700; line-height: 1; }
.screen .mark-correct, .screen .seg-correct { background: var(--result-correct); }
.screen .mark-wrong, .screen .seg-wrong { background: var(--result-wrong); }
.screen .mark-unanswered, .screen .seg-unanswered { background: var(--result-unanswered); }
.screen .stack { display: flex; flex-direction: row; gap: 2px; background: var(--panel); border-radius: 4px; overflow: hidden; }
.screen .stack .seg { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; transform-origin: left center; color: var(--on-good); font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.screen .stack .seg-label { padding: 0 .375rem; }
.screen .stack .seg-label[hidden] { display: none; }
.screen .overall .stack { height: 4rem; font-size: 1.5rem; }
.screen .overall-total { margin: 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; color: var(--on-dark-muted); }
.screen .players-bars { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 10), minmax(0, 1fr)); grid-auto-flow: column; gap: .25rem 2rem; }
.screen .players-bars li { min-height: 0; max-height: 4.5rem; align-self: center; display: grid; grid-template-columns: 2.25rem var(--avatar-sm) minmax(0, 9rem) minmax(0, 1fr); align-items: center; gap: 0 .625rem; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
.screen .players-bars .pos { text-align: right; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.screen .players-bars .avatar { --avatar-size: var(--avatar-sm); }
.screen .players-bars .nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen .players-bars .stack { height: 1.5rem; font-size: .9375rem; }
@media (max-height: 760px) {
    .screen .finish-summary { padding: .75rem 1.5rem .875rem; gap: .5rem; }
    .screen .summary-head h1 { font-size: 1.875rem; }
    .screen .overall .stack { height: 3.25rem; }
    .screen .players-bars li { font-size: 1rem; }
    .screen .players-bars .stack { height: 1.25rem; font-size: .875rem; }
}