/* Componentes compartilhados pelo telão, pelo celular e pelo painel: opção (cor + forma), avatar, tempo, listas.
   Os componentes do tema de jogo (D64: botão "gordo", painel, cartão, selo, cronômetro) valem dentro de `.game`.
   Cor e medida só por token (tokens.css). Sombra sempre sólida (sem blur). */

/* Opção de resposta. Índice 0..5 -> .opt-N (cor, texto e sombra) e uma forma desenhada por assets/lib/options.js. A forma
   é decorativa (aria-hidden); o texto da opção continua sendo o rótulo acessível. Texto grande e em negrito. */
.option {
    position: relative; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); width: 100%; min-height: 4rem;
    padding: var(--space-3) var(--space-4); font: inherit; font-family: var(--font-display); font-size: var(--fit-size, 1.25rem); font-weight: 700; text-align: left;
    color: var(--opt-fg, var(--color-text)); background: var(--opt-bg, var(--color-muted));
    border: 0; border-radius: var(--radius-block);
    box-shadow: 0 var(--lift-block) 0 var(--opt-shade, var(--color-border));
}
button.option { cursor: pointer; transition: transform var(--duration-press) var(--ease-out); }
button.option:not(:disabled):active { transform: translateY(var(--press)); box-shadow: 0 var(--lift-pressed) 0 var(--opt-shade); }
.option:disabled { opacity: 1; cursor: default; }
.opt-0 { --opt-bg: var(--opt-0); --opt-fg: var(--opt-0-text); --opt-shade: var(--opt-0-shade); }
.opt-1 { --opt-bg: var(--opt-1); --opt-fg: var(--opt-1-text); --opt-shade: var(--opt-1-shade); }
.opt-2 { --opt-bg: var(--opt-2); --opt-fg: var(--opt-2-text); --opt-shade: var(--opt-2-shade); }
.opt-3 { --opt-bg: var(--opt-3); --opt-fg: var(--opt-3-text); --opt-shade: var(--opt-3-shade); }
.opt-4 { --opt-bg: var(--opt-4); --opt-fg: var(--opt-4-text); --opt-shade: var(--opt-4-shade); }
.opt-5 { --opt-bg: var(--opt-5); --opt-fg: var(--opt-5-text); --opt-shade: var(--opt-5-shade); }
.option .shape { flex: none; width: 1.3em; font-family: var(--font-sans); font-size: 1.3em; font-weight: 400; line-height: 1; text-align: center; }
.option .option-text { flex: 1; min-width: 0; line-height: 1.15; overflow-wrap: anywhere; }

/* Grade das opções (docs/ui-ux.md, "Opções sem rolagem (2 a 6)"). O JS põe `data-count` (2 a 6) e `data-layout` (portrait
   | landscape; o telão é sempre landscape) e `assets/lib/fit.js` decide `data-fit` (grid | single), `--fit-size` e o corte
   (`data-clip`, `--fit-clamp`). As linhas dividem a altura que sobra (`minmax(0, 1fr)`): nada empurra nada para baixo. */
.options { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); gap: var(--options-gap, .875rem); }
.options > .option { min-height: 0; }
.options[data-layout="portrait"]:is([data-count="4"], [data-count="5"], [data-count="6"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.options[data-layout="portrait"][data-count="5"] > :nth-child(5) { grid-column: 1 / -1; }
.options[data-layout="landscape"][data-count="2"], .options[data-layout="landscape"][data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.options[data-layout="landscape"]:is([data-count="3"], [data-count="6"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.options[data-layout="landscape"][data-count="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.options[data-layout="landscape"][data-count="5"] > :nth-child(-n+3) { grid-column: span 2; }
.options[data-layout="landscape"][data-count="5"] > :nth-child(n+4) { grid-column: span 3; }
.options[data-layout="landscape"][data-count="2"] { grid-auto-rows: minmax(0, 1fr); }
/* 1 coluna: uma opção por linha, na largura toda (só retrato, 4 a 6 opções). */
.options[data-fit="single"][data-layout][data-count] { grid-template-columns: minmax(0, 1fr); --options-gap: .625rem; }
.options[data-fit="single"][data-layout][data-count] > .option { grid-column: auto; }
/* Bloco estreito (retrato, 2 colunas): forma em cima e texto centralizado. Bloco largo: forma à esquerda, texto à esquerda. */
.options[data-layout="portrait"]:is([data-count="4"], [data-count="5"], [data-count="6"]):not([data-fit="single"]) > .option { flex-direction: column; justify-content: center; gap: .375rem; text-align: center; }
.options[data-layout="portrait"][data-count="5"]:not([data-fit="single"]) > .option:nth-child(5) { flex-direction: row; justify-content: flex-start; gap: var(--space-3); text-align: left; }
.options[data-layout="portrait"]:is([data-count="4"], [data-count="5"], [data-count="6"]):not([data-fit="single"]) > .option .option-text { flex: 0 1 auto; }
/* Corte: reticências depois de `--fit-clamp` linhas; o texto inteiro vai no aria-label do botão. */
.options[data-clip] .option-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--fit-clamp, 3); line-clamp: var(--fit-clamp, 3); overflow: hidden; }
/* Número da tecla (notebook com mouse): 1 a 6 respondem; fora de hover+ponteiro fino o número nem existe na tela. */
.option .key-hint { display: none; }
@media (hover: hover) and (pointer: fine) {
    .option .key-hint {
        display: flex; flex: none; align-items: center; justify-content: center; align-self: flex-start; margin-left: auto; width: 2rem; height: 2rem;
        border-radius: .625rem; background: var(--scrim-strong); color: var(--game-text); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1;
    }
}

/* Estados sem depender só de cor: contorno + etiqueta com texto/símbolo no canto do bloco (não ocupa espaço do texto). */
.option.chosen, .option.correct, .option.wrong { outline: .25rem solid var(--color-text); outline-offset: .1875rem; }
.option.wrong { outline-style: dashed; }
.option.chosen::after, .option.correct::after, .option.wrong::after {
    position: absolute; bottom: .375rem; right: .5rem; padding: 0 var(--space-2); border-radius: var(--radius-sm);
    font-size: .75rem; font-weight: 700; line-height: 1.5; background: var(--scrim-strong); color: var(--game-text);
}
.option.chosen::after { content: "Sua escolha"; }
.option.correct::after { content: "\2713  Correta"; }
.option.wrong::after { content: "\2717  Errada"; }

/* Avatar padrão: iniciais sobre uma cor da paleta (cor definida inline por assets/lib/avatar.js via CSSOM), com moldura
   grossa (D64). A moldura entra no tamanho (border-box); `ring` do avatar.js só troca a cor dela. */
.avatar {
    --avatar-size: var(--avatar-md); --avatar-ring-w: .1875rem;
    box-sizing: border-box; display: inline-flex; flex: none; align-items: center; justify-content: center; vertical-align: middle;
    width: var(--avatar-size); height: var(--avatar-size); overflow: hidden; border-radius: var(--radius-round);
    border: var(--avatar-ring-w) solid var(--avatar-ring);
    font-family: var(--font-display); font-size: calc(var(--avatar-size) * .4); font-weight: 700; line-height: 1; letter-spacing: .02em; user-select: none;
    color: var(--avatar-text); background: var(--avatar-bg, var(--avatar-11));
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { --avatar-size: var(--avatar-sm); --avatar-ring-w: .125rem; }
.avatar-lg { --avatar-size: var(--avatar-lg); }
.avatar-xl { --avatar-size: var(--avatar-xl); --avatar-ring-w: .5rem; }
.avatar-hero { --avatar-size: var(--avatar-hero); --avatar-ring-w: .5rem; --avatar-ring: var(--hilite); }
.avatar-ring-gold { --avatar-ring: var(--medal-1); }
.avatar-ring-silver { --avatar-ring: var(--medal-2); }
.avatar-ring-bronze { --avatar-ring: var(--medal-3); }
.avatar-ring-hilite { --avatar-ring: var(--hilite); }

/* Barra de tempo (a única coisa que se move com a pergunta aberta): só `transform`. */
.time-bar { flex: none; height: .625rem; background: var(--panel-shade); border-radius: var(--radius-sm); overflow: hidden; }
.time-bar > div { height: 100%; width: 100%; background: var(--hilite); border-radius: var(--radius-sm); transform-origin: left center; }
.remaining { font-variant-numeric: tabular-nums; }

.nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pts { color: var(--color-ok); font-weight: 700; }
.mine { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-accent-soft); font-weight: 700; margin: var(--space-2) 0; }

/* "Mais rápidos" (telão e celular): posição, avatar, apelido, tempo, pontos. */
ol.fastest-list { list-style: none; padding: 0; margin: var(--space-2) 0; }
ol.fastest-list li {
    display: grid; grid-template-columns: 2.5rem var(--avatar-sm) minmax(6ch, 1fr) max-content max-content;
    gap: 0 var(--space-3); align-items: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md);
}
ol.fastest-list .pos { font-family: var(--font-display); font-weight: 700; color: var(--color-muted); text-align: right; font-variant-numeric: tabular-nums; }
ol.fastest-list .nick { font-family: var(--font-display); font-weight: 600; }
ol.fastest-list .num { font-variant-numeric: tabular-nums; }
ol.fastest-list .pts { font-family: var(--font-display); }
ol.fastest-list li.me, ol.ranking li.me { font-weight: 700; background: var(--color-accent-soft); }

/* ---- Tema de jogo (D64) ---- */
.game .logo { display: block; flex: none; width: auto; height: 2.75rem; }
.game .spacer { flex: 1; }
.game a { color: var(--hilite); }
.game .paper a, .game.paper a { color: var(--card-link); }
.game .muted-dark { color: var(--on-dark-muted); margin: 0; }
.game .muted { color: var(--card-muted); margin: 0; }
.game .icon { flex: none; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Botão "gordo": cor chapada, raio grande, sombra sólida; ao tocar desce (`transform`, 80 ms) e a sombra encolhe. É o retorno
   do próprio toque, não entrada animada (princípio 1). */
.game .go {
    --shade: var(--hilite-shade);
    display: flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3.5rem; padding: .75rem 1.25rem;
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; text-decoration: none; cursor: pointer;
    color: var(--on-hilite); background: var(--hilite); border: 0; border-radius: var(--radius-button);
    box-shadow: 0 var(--lift-button) 0 var(--shade); transition: transform var(--duration-press) var(--ease-out);
}
.game .go:not(:disabled):active { transform: translateY(var(--press)); box-shadow: 0 var(--lift-pressed) 0 var(--shade); }
.game .go:disabled { cursor: default; opacity: .6; }
.game .go-sm { min-height: 2.75rem; padding: .5rem 1.125rem; font-size: 1.125rem; }
.game a.go { color: var(--on-hilite); }

/* Ficha (chip) e painel: sombra sólida, raio grande. */
.game .chip {
    display: inline-flex; flex: none; align-items: center; gap: var(--space-1); margin: 0; padding: .375rem .75rem; white-space: nowrap;
    font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums;
    background: var(--panel); color: var(--game-text); border-radius: var(--radius-chip); box-shadow: 0 var(--lift-chip) 0 var(--panel-shade);
}
.game .count-good { color: var(--good); }
.game .code-chip { letter-spacing: .125rem; }
.game .panel { background: var(--panel); border-radius: var(--radius-panel); box-shadow: 0 var(--lift-panel) 0 var(--panel-shade); }

/* Cartão branco (tinta escura): tokens de `.paper` em tokens.css. */
.game .paper { background: var(--card); color: var(--card-ink); border-radius: var(--radius-panel); box-shadow: 0 var(--lift-panel) 0 var(--panel-shade); padding: var(--space-4); }
.game .paper .error { background: var(--card-hilite); border: .125rem solid var(--card-error); }

/* Selo: cor chapada levemente inclinada (a inclinação é fixa; quando o selo entra animado, `motion.stamp` a preserva). `.stamp-hilite` em amarelo. */
.game .stamp {
    display: inline-block; margin: 0; padding: .5rem 1rem; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1.2;
    background: var(--good); color: var(--on-good); border-radius: var(--radius-chip); box-shadow: 0 var(--lift-chip) 0 var(--good-shade);
    transform: rotate(-3deg);
}
.game .stamp-hilite { background: var(--hilite); color: var(--on-hilite); box-shadow: 0 var(--lift-chip) 0 var(--hilite-shade); }
.game .stamp-new { padding: .1875rem .625rem; font-size: 1.125rem; transform: rotate(-4deg); }

/* Cronômetro redondo amarelo (número = segundos; no COUNTDOWN, 3-2-1). */
.game .timer-round {
    --round: 3.25rem;
    flex: none; display: flex; align-items: center; justify-content: center; width: var(--round); height: var(--round); border-radius: var(--radius-round);
    font-family: var(--font-display); font-size: calc(var(--round) * .5); font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--hilite); color: var(--on-hilite); box-shadow: 0 var(--lift-chip) 0 var(--hilite-shade);
}
.game .timer-round strong { font-weight: 700; }

/* Toast ("Resposta enviada", erro): mora no cabeçalho, entre a ficha e o cronômetro, com altura fixa e no máximo 2 linhas. Nunca
   cobre opção e nunca desloca o layout (a pergunta nunca rola nem se remonta). O texto inteiro segue no DOM (leitor de tela). */
.game .toast {
    flex: 100 1 0; min-width: 0; align-self: stretch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    margin: 0; padding: .25rem .625rem; text-align: center; font-family: var(--font-display); font-size: .8125rem; font-weight: 600; line-height: 1.15;
    background: var(--panel); color: var(--game-text); border-radius: var(--radius-chip); box-shadow: 0 var(--lift-pressed) 0 var(--panel-shade);
}
.game .toast[hidden] { display: none; }
.game .toast-error { background: var(--card); color: var(--card-error); }

.game .error, .game .notice { font-family: var(--font-display); }
.game .notice { border-radius: var(--radius-chip); box-shadow: 0 var(--lift-chip) 0 var(--hilite-shade); }
.game .paper .error { color: var(--card-error); }