/* ============================================================================
   app.css — sistema de design COMPARTILHADO do War Online (D-03)
   Fonte ÚNICA do look "mesa de guerra clássica" (navy + gold, dark mode) para
   TODAS as páginas: index.html, lobby.html, war.html, history.html + overlays.
   CSS puro, zero-build (CLAUDE.md): sem Tailwind/PostCSS/framework. Tokens do
   08-UI-SPEC.md declarados VERBATIM como custom properties em :root.
   ============================================================================ */

/* --- Tipografia: o single-player (C:\Gamers\war\war.html) usa a FONTE DO SISTEMA,
       não uma display serifada. Adotamos a MESMA stack como sistema de design
       compartilhado (fonte da verdade visual = SP aprovado). --- */

:root {
  /* ---- Cores base (extraídas VERBATIM do single-player war.html) ---- */
  --base: #0a0e14;          /* fundo do app + mar/negativo do mapa (SP body) */
  --panel: #0e1626;         /* painéis/cards (base do gradiente SP .card) */
  --panel-top: #152238;     /* topo do gradiente das cards (SP .card) */
  --panel-hover: #1a2740;   /* linha/assento em destaque (SP .pcard.cur) */
  --panel-inset: #101a2c;   /* chips de fase, pcard, campos (SP #phasebar .ph) */
  --border: #274063;        /* divisórias/bordas de painel (SP .card border) */
  --border-strong: #33465f; /* bordas enfatizadas, input focado (SP .svrow) */

  /* ---- Acento gold (10%) — o gold do SP (título, reforço, destaques) ---- */
  --accent-gold: #f0c869;      /* título WAR, reforço, foco, marca, links */
  --accent-gold-bright: #ffd23f; /* números de reforço, realces vivos (SP) */
  --accent-gold-dim: #c9a227;  /* pressed / linework do mapa em repouso */

  /* ---- Azul de ação (CTA primária do SP #mainbtn) ---- */
  --accent-blue: #3d78d8;
  --accent-blue-dim: #2b5db0;

  /* ---- Texto ---- */
  --text: #e7ecf3;          /* SP body color */
  --text-muted: #9fb3d4;    /* SP .pcard .st / labels */

  /* ---- Semânticas de estado (SP log good/bad + âmbar) ---- */
  --success: #37d84a;  /* "Reconectou", "Venceu", vitória de dado */
  --warning: #e08a3a;  /* "caiu" — âmbar mais quente que o gold */
  --danger: #ff5a5a;   /* erros, "Eliminado", alvo de ataque, ações destrutivas */

  /* ---- Cores de assento (VERBATIM do SP COLORS) ---- */
  --seat-azul: #3d78d8;
  --seat-vermelho: #d63a3a;
  --seat-amarelo: #e8c02a;
  --seat-verde: #37a84a;
  --seat-preto: #2c3444;
  --seat-preto-outline: #8b95b0; /* p/ o preto não sumir no fundo escuro */
  --seat-branco: #e2e7ee;
  /* tinta do exército: escura em fills claros, clara em fills escuros */
  --army-ink-dark: #0a0e14;
  --army-ink-light: #e7ecf3;

  /* ---- Escala de espaçamento (múltiplos de 4 — UI-SPEC §Spacing) ---- */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;

  /* ---- Tipografia: a MESMA fonte de sistema do single-player (sem Cinzel) ---- */
  --font-display: system-ui, "Segoe UI", Arial, sans-serif;
  --font-body: system-ui, "Segoe UI", Arial, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fs-body: 16px;      /* Body 16/400 */
  --fs-label: 14px;     /* Label 14/600 */
  --fs-heading: 20px;   /* Heading 20/600 */
  --fs-display: 28px;   /* Display 28/600 */
  --fs-display-hero: 40px; /* única escalada permitida (vencedor do resultado) */

  /* ---- Raios / cartografia ---- */
  --radius: 8px;
  --radius-sm: 4px;
}

/* ============================ Reset enxuto ============================ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Números (contagens de exército, timers, ocupação) não devem tremer ao mudar */
.num,
.tabular,
input[type="number"],
time,
.count { font-variant-numeric: tabular-nums; }

/* ============================ Tipografia (roles) ============================ */
.display,
h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: 0.04em;
  margin: 0;
}
.display--hero { font-size: var(--fs-display-hero); }

.heading,
h2 {
  font-family: var(--font-body);
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  margin: 0;
}

.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

.muted { color: var(--text-muted); }

/* ============================ Painéis / cards ============================ */
/* Gradiente sutil das cards do single-player (#152238 → #0e1626) */
.panel,
.card {
  background: linear-gradient(180deg, var(--panel-top), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card { padding: var(--sp-lg); }

/* ============================ Botões ============================ */
button,
.btn {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
button:hover,
.btn:hover { background: var(--panel-hover); border-color: var(--border-strong); }

/* CTA primária: fill gold (Criar sala / Iniciar partida / Entrar / Voltar ao lobby) */
.btn-primary {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--army-ink-dark);
}
.btn-primary:hover { background: var(--accent-gold-dim); border-color: var(--accent-gold-dim); }

/* Secundário / ghost: NUNCA gold (UI-SPEC) */
.btn-secondary { background: var(--panel); border-color: var(--border); color: var(--text); }

/* Destrutivo (Abandonar partida) */
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: rgba(229, 84, 78, 0.12); }

button:disabled,
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Links (histórico, "reenviar link de confirmação") — gold */
a,
.link {
  color: var(--accent-gold);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
}
a:hover,
.link:hover { text-decoration: underline; }

/* ============================ Inputs ============================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  width: 100%;
}
input::placeholder,
textarea::placeholder { color: var(--text-muted); }
input:focus,
select:focus,
textarea:focus { border-color: var(--border-strong); }

/* ============================ Foco (acessibilidade) ============================ */
/* Ring de foco gold visível ao navegar por teclado (UI-SPEC §Accessibility Floor) */
:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* ============================ Utilitárias ============================ */
/* Marca "by k3k0" — Cinzel caps em gold, discreta no rodapé */
.brand {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--accent-gold);
  letter-spacing: 0.08em;
  font-size: var(--fs-label);
}

/* Ícone via sprite (<use href="icons.svg#nome">) herda currentColor */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
}

/* Badge de conexão (D-11) — âmbar de "caiu", ícone + texto (nunca só cor) */
.badge-conn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 2px var(--sp-xs);
  border-radius: var(--radius-sm);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--warning);
  background: rgba(224, 138, 58, 0.12);
}
.badge-conn--ai { color: var(--text-muted); background: rgba(139, 149, 176, 0.12); }
.badge-conn--ok { color: var(--success); background: rgba(63, 185, 107, 0.12); }

/* Tags de resultado (Venceu / Eliminado / Abandonou) — carregam a PALAVRA */
.tag { display: inline-block; padding: 2px var(--sp-sm); border-radius: var(--radius-sm);
       font-size: var(--fs-label); font-weight: var(--fw-semibold); }
.tag--win { color: var(--success); background: rgba(63, 185, 107, 0.14); }
.tag--out { color: var(--danger); background: rgba(229, 84, 78, 0.14); }
.tag--left { color: var(--text-muted); background: rgba(139, 149, 176, 0.14); }

/* Linha de erro inline (login, jogada inválida) — discreta, sem modal */
.error-line { color: var(--danger); font-size: var(--fs-label); font-weight: var(--fw-semibold); }
.hidden { display: none !important; }

/* ============================ Fundo compartilhado "mesa de guerra" ============================ */
/* O MESMO fundo da tela de jogo (war.html #wrap), para o app inteiro parecer o mesmo produto. */
.war-bg { background: radial-gradient(circle at 40% 0%, #16213a 0%, #070a10 78%); }

/* Mapa-múndi como ATMOSFERA: o mesmo mapa da mesa, esmaecido como pano de fundo (clone do SP). */
.map-atmos {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; opacity: 0.12; pointer-events: none;   /* atrás de todo conteúdo em fluxo normal */
  filter: saturate(0.8) brightness(0.9);
}

/* Wordmark "W A R" — o MESMO título da tela de jogo (war.html #wartitle), reutilizável. */
.wordmark {
  font-family: var(--font-body); color: var(--accent-gold);
  font-weight: var(--fw-semibold); letter-spacing: 3px; line-height: 1.1; margin: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.wordmark__sub { color: #7fa8e8; font-weight: var(--fw-semibold); }
.wordmark--hero { font-size: 46px; letter-spacing: 8px; text-align: center; }
.wordmark--hero .wordmark__sub { display: block; font-size: 13px; letter-spacing: 2px; margin-top: var(--sp-sm); }
.wordmark--bar { font-size: 18px; letter-spacing: 5px; white-space: nowrap; }
.wordmark--bar .wordmark__sub { font-size: 12px; letter-spacing: 1px; margin-left: var(--sp-sm); }

/* Card de login centralizado (index.html) */
.login-shell {
  position: relative; z-index: 1;   /* acima da .map-atmos (z-index:0) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xl);
  padding: var(--sp-3xl) var(--sp-md);
}
.login-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--sp-lg); }

/* Abas Entrar / Criar conta */
.tabs { display: flex; gap: var(--sp-xs); }
.tab {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}
.tab[aria-selected="true"] { color: var(--text); border-color: var(--border-strong); background: var(--panel-hover); }

.field { display: flex; flex-direction: column; gap: var(--sp-xs); }
.stack { display: flex; flex-direction: column; gap: var(--sp-md); }

/* ============================ Movimento reduzido ============================ */
/* Vale para as telas de NAVEGAÇÃO (login, lobby, ranking, perfil, histórico).
   A MESA (war.html, <body class="ingame">) fica de fora de propósito: lá a animação
   não é enfeite, é informação — alvo válido pulsando, dado rolando, tropa marchando,
   comemoração da vitória. O single-player faz o mesmo (war\war.html não tem nenhum
   bloco de movimento reduzido), e a paridade com ele é o contrato do jogo.
   Antes daqui o `*` congelava a mesa inteira e cada efeito precisava ser religado
   um a um com !important — quem esquecesse a linha perdia o efeito calado. */
@media (prefers-reduced-motion: reduce) {
  body:not(.ingame),
  body:not(.ingame) *,
  body:not(.ingame) *::before,
  body:not(.ingame) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ================= Barra de topo: caber em tela estreita (2026-07-23) =================
   As QUATRO telas logadas (perfil, ranking, histórico, salas) repetem a mesma `.topbar` no
   <style> de cada página, e nenhuma previu celular: com o nome do jogador + 3 links + o botão
   Sair, a barra media 487px numa tela de 390px — o "Sair" ficava FORA da tela, sem rolagem que
   o alcançasse (medido no perfil em 390px: scrollWidth 487 > clientWidth 390).

   A correção mora aqui, no CSS compartilhado, para valer nas quatro sem editar uma a uma.
   O seletor precisa de `body` na frente por causa da cascata: o <style> de cada página vem
   DEPOIS do <link> deste arquivo, então em empate de especificidade a página venceria. */
body .topbar { flex-wrap: wrap; }
body .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 640px) {
  body .topbar {
    justify-content: center;
    gap: var(--sp-sm);
    padding: var(--sp-md);
  }
  body .topbar-actions {
    justify-content: center;
    gap: var(--sp-md);
    width: 100%;
  }
}