/* Partida ao vivo, lado do jogador: celular primeiro, cresce no notebook. O telão estende isto em screen.css.
   `.live` sozinho (painel e resultado do host) segue sóbrio; `.live.game` é o tema de jogo (D64). */
.live { max-width: 40rem; margin: 0 auto; font-size: 1.125rem; }
.live h1, .live h2 { margin: var(--space-2) 0; }
.live .options { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.live .player-bar { display: flex; align-items: center; gap: var(--space-3); }
.live .player-bar .meta { margin: 0; }
.live ol.ranking { padding-left: 2.5rem; }
.live ol.ranking li { padding: var(--space-1) 0; }
.live ol.ranking li .avatar { --avatar-size: var(--avatar-sm); margin-right: var(--space-2); }
.live ol.ranking li .score { font-variant-numeric: tabular-nums; }
.live input[type=text] { font-size: 1.5rem; padding: var(--space-3); max-width: none; }
.live:not(.game) button.go, .live:not(.game) .button.go { width: 100%; min-height: 3.5rem; font-size: 1.25rem; margin-top: var(--space-4); }
.live:not(.game) .button.go { display: flex; padding: .9rem var(--space-4); background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.live:not(.game) button.go { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }

/* ---- Jogador e entrada na sala, tema de jogo ---- */
main:has(> .game) { max-width: none; padding: 0; }
.live.game { display: flex; flex-direction: column; gap: var(--space-4); min-height: 100vh; min-height: 100dvh; padding: 1.25rem 1.125rem 1.625rem; font-size: 1.0625rem; }
.live.game h1, .live.game h2 { margin: 0; }
:where(.live.game) > section { display: flex; flex-direction: column; gap: var(--space-4); }
.live.game input[type=text] { font-family: var(--font-display); font-weight: 600; color: var(--card-ink); background: var(--card); border: .1875rem solid var(--card-border); border-radius: var(--radius-button); }
.live.game .paper input[type=text] { background: var(--card); }
.live.game button.go, .live.game a.go { width: 100%; margin-top: var(--space-3); }
.game-head { flex: none; display: flex; align-items: center; gap: .625rem; min-height: 3.25rem; }
.game-head .chip[hidden], .game-head .timer-round[hidden] { display: none; }

.game-head .closed-stamp { max-width: 72%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.15; text-align: center; }

/* Entrada (código da sala e apelido) */
.entry { max-width: 28rem; }
.entry .entry-card { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-6); }
.entry .entry-card h1 { font-size: 1.75rem; }
.entry .entry-card label { color: var(--card-muted); }
.entry .code-sm { font-size: 1.75rem; letter-spacing: .125rem; }

/* LOBBY (celular) */
.lobby-phone { align-items: center; text-align: center; }
.lobby-phone .stamp { margin-top: var(--space-3); }
.lobby-phone .profile { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: 1.5rem 1.25rem; }
.player-name { margin: 0; font-family: var(--font-display); font-size: 2rem; font-weight: 700; overflow-wrap: anywhere; }
.waiting-block { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: .625rem; }
.waiting-block .big { margin: 0; font-size: 1.375rem; font-weight: 600; }
.wait-dots { display: flex; gap: .5rem; margin: 0; }
.wait-dots span { width: .875rem; height: .875rem; border-radius: var(--radius-round); background: var(--hilite); }
.wait-dots span:nth-child(2) { opacity: .6; }
.wait-dots span:nth-child(3) { opacity: .3; }

/* Pergunta (celular): enunciado em cartão branco, depois as opções */
.question-phase { position: relative; flex: 1; min-height: 0; }
.question-phase .statement { flex: none; margin: 0; padding: 1rem 1.125rem; font-size: 1.3125rem; font-weight: 600; line-height: 1.25; text-align: center; border-radius: var(--radius-block); box-shadow: 0 var(--lift-button) 0 var(--panel-shade); }
.question-phase .prepare { margin: 0; text-align: center; font-size: 1.75rem; }
.question-phase .options { margin: 0; flex: 1; min-height: 0; }

/* Tela = viewport em toda fase de pergunta (a opção nunca rola para fora; rolar custa tempo e tempo conta ponto). */
.live.game.player:is([data-current-phase="COUNTDOWN"], [data-current-phase="QUESTION_OPEN"], [data-current-phase="QUESTION_CLOSED"]) { max-width: none; height: 100vh; height: 100dvh; overflow: hidden; }
.question-phase .statement { overflow-wrap: anywhere; }
@media (min-width: 900px) {
    .question-phase .statement { padding: 1.375rem 1.875rem; }
}
/* Celular deitado ou janela baixa: cabeçalho e respiros encolhem para sobrar altura às opções. */
@media (max-height: 480px) {
    .live.game.player { padding: .5rem .75rem; gap: .5rem; }
    .game-head { min-height: 2.25rem; }
    .game .logo { height: 2.25rem; }
    .live.game.player .timer-round { --round: 2.25rem; }
    .question-phase { gap: .5rem; }
    .question-phase .statement { padding: .5rem .75rem; }
    .question-phase .options { --options-gap: .5rem; }
    .option { padding: .25rem .625rem; }
}

/* REVEAL (celular) */
.reveal-phase { align-items: center; text-align: center; }
.result-block { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: var(--space-3); }
.result-badge { display: flex; align-items: center; justify-content: center; width: 7.5rem; height: 7.5rem; border-radius: var(--radius-round); border: .4375rem solid var(--card); box-shadow: 0 var(--lift-block) 0 var(--panel-shade); background: var(--panel); }
.result-badge .icon { width: 4rem; height: 4rem; stroke: var(--game-text); stroke-width: 3.4; display: none; }
.result-badge .result-none { display: none; font-family: var(--font-display); font-size: 3rem; font-weight: 700; }
.reveal-phase[data-result="correct"] .result-badge { background: var(--good); }
.reveal-phase[data-result="correct"] .result-ok { display: block; stroke: var(--on-good); }
.reveal-phase[data-result="wrong"] .result-badge { background: var(--card-error); }
.reveal-phase[data-result="wrong"] .result-no { display: block; }
.reveal-phase[data-result="none"] .result-none, .reveal-phase[data-result=""] .result-none { display: block; }
.result-title { margin: 0; font-family: var(--font-display); font-size: 2.75rem; font-weight: 700; line-height: 1.1; transform: rotate(-3deg); }
.points-chip { margin: 0; padding: .375rem 1.125rem; font-family: var(--font-display); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--hilite); color: var(--on-hilite); border-radius: var(--radius-chip); box-shadow: 0 var(--lift-chip) 0 var(--hilite-shade); }
.result-sentence { margin: 0; font-size: 1.125rem; font-weight: 500; }
.reveal-phase .score-line { margin: 0; color: var(--on-dark-muted); }
.fastest-card { width: 100%; text-align: left; margin-top: auto; padding: .875rem; }
ol.fastest-list li .avatar { --avatar-size: var(--avatar-sm); }
.fastest-card h2 { font-size: 1.25rem; padding: 0 .25rem; }
.fastest-card ol.fastest-list li.me { background: var(--card-hilite); }

/* LEADERBOARD e FINISHED (celular) */
.board-phase h1 { text-align: center; font-size: 2.125rem; }
.board-phase .finish-me { display: flex; flex-direction: column; align-items: center; gap: .375rem; }
.board-phase .finish-me .avatar-hero { --avatar-size: 8rem; --avatar-ring: var(--medal-3); }
.board-phase .finish-me .player-name { font-size: 1.625rem; font-weight: 600; }
.board-phase .my-rank { align-self: center; margin: 0; padding: .5rem 1.125rem; font-size: 1.375rem; text-align: center; background: var(--hilite); color: var(--on-hilite); border-radius: var(--radius-chip); box-shadow: 0 var(--lift-chip) 0 var(--hilite-shade); }
.board-phase ol.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.board-phase ol.ranking li {
    display: grid; grid-template-columns: 2.25rem var(--avatar-sm) minmax(0, 1fr) max-content; gap: 0 .625rem; align-items: center;
    margin: 0; padding: .375rem .75rem .375rem .5rem; background: var(--chip); border-radius: var(--radius-button); box-shadow: 0 var(--lift-chip) 0 var(--chip-shade);
    font-family: var(--font-display); font-weight: 600;
}
.board-phase ol.ranking li .pos { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.board-phase ol.ranking li .avatar { margin: 0; }
.board-phase ol.ranking li .score { font-weight: 700; font-variant-numeric: tabular-nums; }
.board-phase ol.ranking li.me { background: var(--hilite); color: var(--on-hilite); box-shadow: 0 var(--lift-chip) 0 var(--hilite-shade); }
.live.game button.go.go-sm { width: auto; margin: 0; }

/* Resultado do jogador: cartão branco sobre o fundo de jogo; tabela mais justa para caber no celular. */
.live.game .result { width: 100%; margin: 0 auto; }
.live.game .result th, .live.game .result td { padding: var(--space-2) var(--space-1); }

/* Variação do próprio jogador no ranking (D63): só aqui aparece descida. Vai dentro da pílula de posição, na mesma linha, com seta e
   palavra (a cor nunca é o único canal). */
.board-phase .rank-move { display: inline-block; margin-left: .5em; padding-left: .5em; border-left: .125rem solid currentColor; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-phase .rank-move[data-move="down"] { color: var(--card-error); }

/* Celular: REVEAL, LEADERBOARD e FINISHED ocupam a viewport e não rolam (como a pergunta). As listas ("Mais rápidos", ranking) têm a
   altura que sobra; o controller mostra só as linhas que cabem e o resto vira "e mais N" (assets/lib/fitrows.js). */
.live.game.player:is([data-current-phase="REVEAL"], [data-current-phase="LEADERBOARD"], [data-current-phase="FINISHED"]) { height: 100vh; height: 100dvh; overflow: hidden; }
.reveal-phase, .board-phase { flex: 1; min-height: 0; }
.fastest-card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: .25rem; margin-top: 0; }
.fastest-card ol.fastest-list { flex: 1; min-height: 0; margin: 0; overflow: hidden; }
.fastest-card .meta, .fastest-card .mine { flex: none; margin: 0; }
.board-phase ol.ranking { flex: 1; min-height: 0; overflow: hidden; }
.board-phase .list-more { flex: none; margin: 0; text-align: center; color: var(--on-dark-muted); font-family: var(--font-display); }
.board-phase > p:has(.go) { flex: none; margin: 0; }
.board-phase .go { margin-top: 0; }
@media (max-height: 760px) {
    .result-block { gap: .25rem; margin-top: 0; }
    .result-badge { width: 5rem; height: 5rem; border-width: .3125rem; }
    .result-badge .icon { width: 2.75rem; height: 2.75rem; }
    .result-title { font-size: 2rem; }
    .points-chip { font-size: 1.5rem; padding: .25rem .875rem; }
    .board-phase .finish-me .avatar-hero { --avatar-size: 5rem; }
    .board-phase .finish-me .player-name { font-size: 1.25rem; }
    .board-phase h1 { font-size: 1.75rem; }
    .board-phase .my-rank { font-size: 1.125rem; padding: .375rem .875rem; }
}
/* Celular deitado: resultado de um lado, lista do outro; o cabeçalho e os respiros já encolhem acima. */
@media (max-height: 480px) {
    .reveal-phase { flex-direction: row; align-items: stretch; gap: .75rem; }
    .reveal-phase .result-block { flex: 0 0 38%; justify-content: center; }
    .reveal-phase .fastest-card { padding: .5rem .625rem; }
    .reveal-phase .fastest-card ol.fastest-list li { padding-block: .125rem; }
    .result-badge { width: 3.5rem; height: 3.5rem; }
    .result-badge .icon { width: 2rem; height: 2rem; }
    .result-title { font-size: 1.5rem; }
    .points-chip { font-size: 1.125rem; }
    .board-phase { gap: .375rem; }
    .board-phase h1 { font-size: 1.375rem; }
    .board-phase .finish-me { flex-direction: row; gap: .625rem; }
    .board-phase .finish-me .avatar-hero { --avatar-size: 2.75rem; --avatar-ring-w: .25rem; }
    .board-phase ol.ranking { gap: .25rem; }
    .board-phase ol.ranking li { padding-block: .1875rem; }
    .live.game button.go, .live.game a.go { min-height: 2.5rem; padding-block: .25rem; }
}

/* D70: sessão cancelada no celular: um cartão com o aviso, parado (sem animação). */
.live .cancelled-card { margin: var(--space-6) 0; text-align: center; }
.live .cancelled-card .big { margin: 0; font-size: 1.5rem; font-weight: 600; }