/* ==========================================================================
   Arcade Kiz — extensões do app sobre o Design System v2
   Somente o que não existe no handoff: acessibilidade, rodapé, telas de
   abertura, alertas, detalhes de texto longo e pequenos ajustes de layout.
   CSS específico de cada mecânica fica no arquivo do respectivo jogo.
   ========================================================================== */

:root {
  color-scheme: dark;
  --error-surface: #2A1716;
  --fs-intro: clamp(28px, 1.6vw + 20px, 42px);
  --fs-question: clamp(20px, 1vw + 16px, 28px);
  --fs-micro: 11px;
  --fs-num-stat: clamp(36px, 1.4vw + 28px, 48px);
  --space-14: 56px;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
dl, dd { margin: 0; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: var(--space-6); }

.fa-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fa-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 30; padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-weight: 800; text-decoration: none; }
.fa-skip:focus { top: var(--space-4); color: var(--on-accent); }

.fa-container { width: 100%; }
.fa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* ---------- Header e rodapé ---------- */
.fa-wordmark { min-height: var(--touch-min); }
/* Nas páginas de jogo, a modalidade do jogo é a seção atual (aria-current="true"). */
.fa-nav__link[aria-current="true"] { color: var(--text); }
.fa-nav__link[aria-current="true"]::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: var(--r-pill); background: var(--accent); }

.fa-wordmark--sm { min-height: var(--touch-min); font-size: 15px; gap: 8px; }
.fa-wordmark--sm .fa-wordmark__mark { width: 8px; height: 8px; }
.fa-footer { border-top: 1px solid var(--border); }
.fa-footer__inner { max-width: var(--max-global); margin: 0 auto; padding: var(--space-6) var(--pad-page); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.fa-footer__note { font-size: var(--fs-caption); color: var(--text-muted); }

/* ---------- Chip: nomes longos quebram em vez de vazar no mobile ---------- */
.fa-chip { flex-wrap: wrap; gap: 4px 10px; max-width: 100%; white-space: normal; }
.fa-chip__period:empty { display: none; }

/* ---------- Home ---------- */
.fa-home-hero__lead { max-width: 480px; }
.fa-home-section { padding-bottom: var(--section-space); }
.fa-home-section__title { margin-bottom: var(--space-6); }
.fa-home-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.fa-home-section__titles { display: flex; flex-direction: column; gap: var(--space-2); }
.fa-home-section__link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch-min); font-weight: 700; color: var(--accent); text-decoration: none; }
.fa-home-section__link:hover { color: var(--accent-hover); }
.fa-eyebrow__link, .fa-shell__vertical { color: inherit; text-decoration: none; }
.fa-eyebrow__link:hover, .fa-shell__vertical:hover { color: var(--text); text-decoration: underline; }
.fa-shell__category { display: contents; }
/* Em telas estreitas o rótulo mantém uma linha: Futebol / Desafio NN. */
@media (max-width: 420px) { .fa-shell__category { display: none; } }
.fa-home-about { display: flex; flex-direction: column; gap: var(--space-3); }
.fa-home-about > * { max-width: var(--max-text); }
.fa-home-about::before { content: ""; display: block; height: 1px; max-width: none; margin-bottom: var(--space-5); background: var(--border); }

/* Card da biblioteca: <li> com o link "Jogar" cobrindo o card inteiro. */
.fa-gamecard:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.fa-gamecard__cta { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch-min); text-decoration: none; }
.fa-gamecard__cta:hover { color: var(--accent-hover); }
.fa-gamecard__cta:focus-visible { outline: none; }
.fa-gamecard__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fa-gamecard--soon { cursor: default; }
.fa-gamecard--soon:hover { background: var(--surface); border-color: var(--border); transform: none; }
.fa-gamecard--soon .fa-glyph { color: var(--text-muted); border-color: var(--border); }

/* ---------- Game shell: alertas e carregamento ---------- */
.fa-alert { padding: var(--space-3) var(--space-4); border: 1px solid var(--error); border-radius: var(--r-md); background: var(--error-surface); color: var(--text); font-size: var(--fs-small); }
.fa-alert::before { content: "✕ "; color: var(--error); font-weight: 800; }
.fa-alert .fa-btn { display: flex; width: max-content; margin-top: var(--space-3); }
.fa-loading { font-size: var(--fs-label); font-weight: 800; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
.fa-shell__title { text-wrap: balance; }

/* Painel no mobile: o handoff zera o padding superior porque o HUD fixo
   encosta no topo. Telas sem HUD (abertura, resultado) recuperam o respiro. */
@media (max-width: 720px) {
  .fa-panel { padding-top: 20px; }
  .fa-panel--hud { padding-top: 0; }
}

/* ---------- Tela de abertura de cada jogo ---------- */
.fa-intro { align-items: flex-start; }
.fa-intro__text { display: flex; flex-direction: column; gap: var(--space-3); max-width: 640px; }
.fa-intro__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-intro); line-height: 1.02; letter-spacing: var(--ls-display); text-wrap: balance; }
.fa-intro__title span { color: var(--accent); }
.fa-facts { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); width: 100%; padding-top: var(--space-5); border-top: 1px solid var(--border); }
.fa-facts > div { display: flex; flex-direction: column-reverse; gap: var(--space-2); }
.fa-facts dt { font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.fa-facts dd { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-num-sm); line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .fa-intro .fa-actions, .fa-intro .fa-actions .fa-btn { width: 100%; } }

/* ---------- Cards de jogador: nomes longos e estado de espera ---------- */
.fa-player { min-width: 0; }
.fa-player__name { overflow-wrap: anywhere; }
.fa-player__line { flex-wrap: wrap; row-gap: 4px; }
.fa-player:active:not(:disabled) { transform: none; }
.fa-player:disabled:not(.fa-player--revealed) { cursor: wait; opacity: .7; }

/* ---------- Action bar: botão sempre à direita no desktop ---------- */
.fa-actionbar__feedback { flex: 1 1 320px; }
.fa-actionbar > .fa-btn { margin-left: auto; }

/* ---------- Resultado: textos longos e unidades ---------- */
.fa-scoreboard__status--neutral { color: var(--text-secondary); }
.fa-scoreboard__detail { font-size: var(--fs-body); color: var(--text-secondary); text-wrap: pretty; }
.fa-stat__of { color: var(--text-muted); }
.fa-round__body > .fa-label { overflow-wrap: anywhere; }
.fa-round__name { min-width: 0; overflow-wrap: anywhere; }
.fa-round__value { flex: none; white-space: nowrap; }
.fa-round__unit { margin-left: 6px; font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.fa-round__line--best > span:first-child { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Sobre os dados ---------- */
.fa-disclosure > summary { border-radius: var(--r-sm); }
.fa-info { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 10px; font-weight: 800; line-height: 1; }
.fa-disclosure[open] .fa-disclosure__body { animation: fa-reveal var(--dur-reveal) var(--ease) both; }
.fa-disclosure__facts { display: grid; gap: var(--space-3); }
.fa-disclosure__facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-4); }
.fa-disclosure__facts dt { padding-top: 3px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 600px) { .fa-disclosure__facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }