/* ==========================================================================
   Arcade Kiz — camada multi-domínio (Sprint 10A)
   Header global, cards de universo, arte abstrata dos domínios e páginas de
   domínios em desenvolvimento. Usa apenas os tokens do Design System; a cor
   de cada universo vem de .fa-theme--sports|ent|geek (var(--cat)).
   ========================================================================== */

.fa-label--cat { color: var(--cat, var(--accent)); }

/* ---------- Header global: selo AK + navegação entre universos ---------- */
.fa-wordmark__seal { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-size: 14px; line-height: 1; letter-spacing: -0.04em; }
.fa-wordmark--sm .fa-wordmark__seal { width: 24px; height: 24px; border-radius: 6px; font-size: 11px; }
.fa-nav { min-width: 0; }
.fa-nav__link--domain::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 8px; border-radius: var(--r-pill); background: var(--cat); opacity: .6; }
.fa-nav .fa-nav__link--domain[aria-current]::before { background: var(--cat); opacity: 1; }
.fa-nav .fa-nav__link--domain[aria-current] { color: var(--text); background: var(--surface); box-shadow: inset 0 -2px 0 var(--cat); }
.fa-nav .fa-nav__link--home[aria-current] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
@media (max-width: 720px) {
  .fa-header__inner { gap: var(--space-3); }
  .fa-nav { gap: 2px; }
  .fa-nav__link { padding: 0 10px; }
  .fa-nav__link--home { display: none; } /* o selo AK leva à home */
}
@media (max-width: 560px) { .fa-wordmark__text { display: none; } }
@media (max-width: 380px) {
  .fa-header__inner { gap: var(--space-2); }
  .fa-nav__link { padding: 0 8px; font-size: 13px; }
  .fa-nav__link--domain:not([aria-current])::before { display: none; }
  .fa-nav__link--domain::before { margin-right: 6px; }
}

/* ---------- Rodapé ---------- */
.fa-footer__nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.fa-footer__nav a { display: inline-flex; align-items: center; min-height: var(--touch-min); font-size: var(--fs-caption); font-weight: 600; color: var(--text-secondary); text-decoration: none; }
.fa-footer__nav a:hover { color: var(--text); }

/* ---------- Breadcrumbs: Arcade Kiz em amarelo e área de toque maior sem mudar o layout ---------- */
.fa-eyebrow__link { color: var(--platform-primary); }
.fa-eyebrow__link, .fa-shell__vertical { display: inline-block; padding-block: 13px; margin-block: -13px; }

/* ---------- Game shell: o domínio do jogo na cor do universo ---------- */
.fa-shell__vertical { color: var(--cat, inherit); }

/* ---------- Hero em duas colunas (home e /football): texto | Desafio do dia ---------- */
/* Colunas alinhadas pelo topo: o breadcrumb começa na mesma altura com qualquer conteúdo à direita
   (Desafio do dia em qualquer estado ou a arte do domínio). */
.fa-hero-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: clamp(32px, 5vw, 72px); padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 64px); }
.fa-hero-split__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.fa-hero-split .fa-hero { max-width: 680px; font-size: clamp(42px, 2.6vw + 28px, 68px); }
.fa-hero-split .fa-actions { margin-top: var(--space-1); }
@media (max-width: 960px) { .fa-hero-split { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 720px) { .fa-hero-split { padding-top: 28px; padding-bottom: 40px; } .fa-hero-split__copy { gap: var(--space-4); } .fa-hero-split .fa-hero { text-wrap: pretty; } }
@media (max-width: 480px) { .fa-hero-split .fa-actions { width: 100%; } .fa-hero-split .fa-actions .fa-btn { flex: 1 1 100%; } }
/* Breadcrumb de três níveis (Arcade Kiz / Universo / Domínio) em uma linha até 360 px. */
@media (max-width: 400px) { .fa-hero-split .fa-eyebrow { gap: 6px; letter-spacing: .08em; } }

/* ---------- Card de universo/domínio ---------- */
.fa-domains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fa-domain { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; color: var(--text); transition: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.fa-domain::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 3px; background: var(--cat); }
.fa-domain:hover { background: var(--surface-hover); border-color: var(--cat); transform: translateY(-2px); }
.fa-domain__art { height: 136px; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.fa-domain__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding-inline: var(--space-6); }
.fa-domain__universe { display: flex; align-items: center; gap: 10px; font-size: var(--fs-label); font-weight: 800; line-height: 1.2; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--cat); }
.fa-domain__dot { flex: none; width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--cat); }
.fa-domain__num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fa-domain__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 1.2vw + 24px, 44px); line-height: 1; letter-spacing: var(--ls-display); }
.fa-domain__sub { font-size: 15px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.fa-domain__games { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.fa-domain__game { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--bg-elevated); font-size: 13px; font-weight: 700; color: var(--text); text-decoration: none; transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.fa-domain__game:hover { border-color: var(--cat); color: var(--text); }
.fa-domain__next { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-1); padding: var(--space-3) 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.fa-domain__next-title { font-family: var(--font-heading); font-size: 18px; font-weight: 800; line-height: 1.2; }
.fa-domain__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-inline: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.fa-domain__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); font-size: var(--fs-caption); color: var(--text-muted); }
.fa-domain__count { font-weight: 600; color: var(--text-secondary); }
.fa-domain__daily { font-weight: 800; letter-spacing: .04em; color: var(--accent); }
a.fa-domain__daily { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: var(--touch-min); text-decoration: underline; text-decoration-color: var(--accent-muted); }
a.fa-domain__daily:hover { color: var(--accent-hover); }
.fa-domain__cta { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: var(--touch-min); font-size: 14px; font-weight: 800; color: var(--accent); text-decoration: none; white-space: nowrap; }
.fa-domain__cta:hover { color: var(--accent-hover); }
.fa-domain__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.fa-domain--soon .fa-domain__cta { color: var(--text); }
@supports selector(:has(*)) {
  .fa-domain__cta:focus-visible { outline: none; }
  .fa-domain:has(.fa-domain__cta:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
}
/* Tablet: card horizontal, arte à direita. */
@media (max-width: 900px) {
  .fa-domains { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .fa-domain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 32%); grid-template-rows: 1fr auto; row-gap: var(--space-4); padding-bottom: 0; }
  .fa-domain__art { grid-column: 2; grid-row: 1 / span 2; height: auto; min-height: 180px; border-bottom: 0; border-left: 1px solid var(--border); }
  .fa-domain__body { grid-column: 1; padding-top: var(--space-6); }
  .fa-domain__foot { grid-column: 1; margin-bottom: var(--space-5); }
  .fa-domain:hover { transform: none; }
}
/* Mobile: empilhado, arte como faixa curta no topo. */
@media (max-width: 600px) {
  .fa-domain { display: flex; gap: var(--space-4); padding-bottom: 0; }
  .fa-domain__art { height: 88px; min-height: 0; padding: var(--space-2) var(--space-4); border-left: 0; border-bottom: 1px solid var(--border); }
  .fa-domain__body { gap: var(--space-2); padding: 0 18px; }
  .fa-domain__title { font-size: 32px; }
  .fa-domain__sub { font-size: 14px; }
  .fa-domain__foot { margin: 0 18px var(--space-2); padding-top: var(--space-1); }
}

/* ---------- Arte abstrata dos domínios (SVG em partials/domain.html) ---------- */
.fa-art { display: flex; align-items: center; justify-content: center; min-width: 0; color: var(--cat, var(--accent)); background: var(--bg-elevated); background: color-mix(in srgb, var(--cat, var(--accent)) 6%, var(--bg-elevated)); }
.fa-art svg { display: block; width: 100%; height: 100%; }
.fa-art__line, .fa-art__dim, .fa-art__accent { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fa-art__line { opacity: .55; }
.fa-art__dim { opacity: .25; }
.fa-art__accent { stroke-width: 2; stroke-dasharray: 4 5; }
.fa-art--screen .fa-art__accent { stroke-width: 3; stroke-dasharray: none; }
.fa-art__fill { fill: currentColor; }
.fa-art__area { fill: currentColor; fill-opacity: .18; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* ---------- Landings de Séries e Pokémon ---------- */
/* O hero usa .fa-hero-split (igual a /football); aqui fica só a arte. */
.fa-domain-hero__art { aspect-ratio: 2 / 1; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--r-panel); }
.fa-domain-soon { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; gap: var(--space-6); }
.fa-domain-soon__note { display: flex; flex-direction: column; gap: var(--space-5); max-width: 520px; padding-top: var(--space-2); }
.fa-library--single { grid-template-columns: minmax(0, 1fr); }
.fa-library--single > *, .fa-library--single > :nth-child(n) { grid-column: auto; }
/* Domínio com mais de um jogo: cards lado a lado, cada um com a largura do card único. */
.fa-domain-live .fa-library { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 380px)); }
.fa-domain-page .fa-gamecard--soon { min-height: 0; }
.fa-domain-page .fa-gamecard--soon .fa-glyph { color: var(--cat); border-color: var(--border-strong); }
@media (max-width: 720px) {
  .fa-domain-hero__art { aspect-ratio: 5 / 2; padding: var(--space-3); border-radius: var(--r-lg); }
  .fa-domain-soon { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .fa-domain-soon__note { padding-top: 0; }
}
@media (max-width: 480px) { .fa-domain-soon__note .fa-actions, .fa-domain-soon__note .fa-btn { width: 100%; } }

/* ---------- Página de erro (404/500) ---------- */
.fa-error-page { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-5); padding-block: clamp(48px, 10vw, 120px); }
.fa-error-page .fa-lead { max-width: 480px; }
@media (max-width: 480px) { .fa-error-page .fa-actions, .fa-error-page .fa-btn { width: 100%; } }