/* =====================================================================
   Mente Tática — Navegação unificada (cabeçalho, barra inferior, menu "Mais")
   Autocontido: usa apenas classes .mt-* e variáveis --mt-*, para poder ser
   carregado também no Modo Pênaltis (que tem CSS próprio) sem conflitos.
   ===================================================================== */
:root{
  --mt-bg:#0b0c10;
  --mt-surface:#14151b;
  --mt-surface-2:#1c1d25;
  --mt-line:#2a2b33;
  --mt-text:#f5f5f7;
  --mt-muted:#a9aab4;
  --mt-red:#8b1e1e;
  --mt-red-2:#a82a2e;
  --mt-rose:#d49aab;
  --mt-pitch:#2fbf71;
  --mt-header-h:60px;
  --mt-tabbar-h:64px;
  --mt-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Link de pular para o conteúdo ---------- */
.mt-skip{
  position:absolute; left:12px; top:-60px; z-index:2000;
  background:var(--mt-text); color:#111; font:700 .95rem var(--mt-font);
  padding:12px 16px; border-radius:10px; text-decoration:none;
  transition:top .15s ease;
}
.mt-skip:focus{ top:12px; }

/* ---------- Cabeçalho ---------- */
.mt-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,12,16,.9);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--mt-line);
  font-family:var(--mt-font);
}
.mt-header-inner{
  width:min(1240px, calc(100% - 32px)); margin:0 auto;
  min-height:var(--mt-header-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.mt-brand{
  display:flex; align-items:center; gap:10px; color:var(--mt-text);
  text-decoration:none; min-height:44px; flex-shrink:0;
}
.mt-brand-mark{ width:34px; height:34px; flex-shrink:0; }
.mt-brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.mt-brand-text strong{ font-size:1.05rem; font-weight:800; letter-spacing:.2px; }
.mt-brand-text span{ font-size:.72rem; color:var(--mt-muted); margin-top:3px; }

.mt-nav{ display:none; align-items:center; gap:4px; }
.mt-nav a,
.mt-account{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 12px; border-radius:10px;
  color:var(--mt-muted); font:700 .92rem var(--mt-font); text-decoration:none;
  border:0; background:transparent; cursor:pointer;
  transition:color .15s ease, background .15s ease;
}
.mt-nav a:hover{ color:var(--mt-text); background:rgba(255,255,255,.05); }
.mt-nav a[aria-current="page"]{ color:var(--mt-text); }
.mt-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:3px;
  border-radius:3px; background:linear-gradient(90deg,var(--mt-red-2),var(--mt-rose));
}
.mt-account{
  color:var(--mt-text); border:1px solid var(--mt-line); background:var(--mt-surface);
  padding:0 16px; flex-shrink:0;
}
.mt-account:hover{ border-color:rgba(212,154,171,.55); background:var(--mt-surface-2); }

/* ---------- Barra inferior (celular/tablet) ---------- */
.mt-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  background:rgba(14,15,20,.96);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-top:1px solid var(--mt-line);
  padding-bottom:env(safe-area-inset-bottom);
  font-family:var(--mt-font);
}
.mt-tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:var(--mt-tabbar-h); padding:6px 2px;
  color:var(--mt-muted); text-decoration:none; background:none; border:0; cursor:pointer;
  font:700 .68rem/1.1 var(--mt-font); position:relative;
  -webkit-tap-highlight-color:transparent;
}
.mt-tab svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.mt-tab[aria-current="page"], .mt-tab[data-active="true"]{ color:var(--mt-text); }
.mt-tab[aria-current="page"]::before, .mt-tab[data-active="true"]::before{
  content:""; position:absolute; top:0; left:26%; right:26%; height:3px; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--mt-red-2),var(--mt-rose));
}
.mt-tab[aria-current="page"] svg{ color:var(--mt-rose); }
.mt-tab:active{ background:rgba(255,255,255,.04); }

/* Espaço para a barra inferior não cobrir o conteúdo */
body.mt-has-tabbar{ padding-bottom:calc(var(--mt-tabbar-h) + env(safe-area-inset-bottom)); }

/* ---------- Menu "Mais" (bottom sheet) ---------- */
.mt-sheet-backdrop{
  position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.mt-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:1110;
  background:var(--mt-surface); border-top:1px solid var(--mt-line);
  border-radius:20px 20px 0 0;
  padding:10px 16px calc(16px + env(safe-area-inset-bottom));
  transform:translateY(105%); transition:transform .25s ease; visibility:hidden;
  max-height:80vh; overflow:auto; font-family:var(--mt-font);
}
.mt-sheet::before{
  content:""; display:block; width:40px; height:4px; border-radius:4px;
  background:var(--mt-line); margin:0 auto 12px;
}
.mt-sheet h2{ font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; color:var(--mt-muted); margin:4px 4px 8px; font-weight:800; }
.mt-sheet a, .mt-sheet button.mt-sheet-item{
  display:flex; align-items:center; gap:14px; width:100%;
  min-height:52px; padding:0 12px; border-radius:12px;
  color:var(--mt-text); font:700 1rem var(--mt-font); text-decoration:none;
  background:none; border:0; cursor:pointer; text-align:left;
}
.mt-sheet a:hover, .mt-sheet button.mt-sheet-item:hover{ background:var(--mt-surface-2); }
.mt-sheet a[aria-current="page"]{ background:rgba(139,30,30,.22); }
.mt-sheet svg{ width:22px; height:22px; stroke:var(--mt-rose); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.mt-sheet hr{ border:0; border-top:1px solid var(--mt-line); margin:8px 0; }
body.mt-sheet-open .mt-sheet-backdrop{ opacity:1; pointer-events:auto; }
body.mt-sheet-open .mt-sheet{ transform:none; visibility:visible; }
body.mt-sheet-open{ overflow:hidden; }

/* ---------- Rodapé ---------- */
.mt-footer{
  border-top:1px solid var(--mt-line); background:#08090c; color:var(--mt-muted);
  font-family:var(--mt-font); font-size:.9rem; margin-top:auto;
}
.mt-footer-inner{
  width:min(1240px, calc(100% - 32px)); margin:0 auto; padding:28px 0;
  display:flex; flex-wrap:wrap; gap:16px 32px; align-items:flex-start; justify-content:space-between;
}
.mt-footer strong{ color:var(--mt-text); display:block; margin-bottom:4px; font-size:1rem; }
.mt-footer p{ margin:0; line-height:1.5; max-width:46ch; }
.mt-footer nav{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.mt-footer nav a{ color:var(--mt-muted); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; font-weight:600; }
.mt-footer nav a:hover{ color:var(--mt-text); text-decoration:underline; }

/* ---------- Foco visível (WCAG 2.4.7 / 2.4.11) ---------- */
.mt-header a:focus-visible, .mt-header button:focus-visible,
.mt-tabbar a:focus-visible, .mt-tabbar button:focus-visible,
.mt-sheet a:focus-visible, .mt-sheet button:focus-visible,
.mt-footer a:focus-visible{
  outline:3px solid var(--mt-rose); outline-offset:2px; border-radius:10px;
}

/* ---------- Responsivo ---------- */
@media (min-width:1024px){
  .mt-nav{ display:flex; }
  .mt-tabbar, .mt-sheet, .mt-sheet-backdrop{ display:none; }
  body.mt-has-tabbar{ padding-bottom:0; }
  :root{ --mt-header-h:68px; }
}
@media (max-width:1023px){
  .mt-header-inner{ min-height:56px; }
  .mt-brand-text span{ display:none; }
  .mt-account{ min-height:44px; padding:0 14px; font-size:.88rem; }
}
@media (max-width:359px){
  .mt-brand-text strong{ font-size:.95rem; }
  .mt-brand-mark{ width:30px; height:30px; }
}
@media (prefers-reduced-motion:reduce){
  .mt-sheet, .mt-sheet-backdrop, .mt-skip, .mt-nav a, .mt-account{ transition:none; }
}
/* Telas baixas em paisagem: barra inferior mais compacta */
@media (max-height:480px) and (orientation:landscape){
  :root{ --mt-tabbar-h:48px; }
  .mt-tab{ flex-direction:row; gap:6px; font-size:.72rem; }
  .mt-tab svg{ width:18px; height:18px; }
  .mt-header{ position:static; }
}

/* ---------- Modo Pênaltis: áreas de toque mínimas (44px) sem alterar o layout do jogo ---------- */
body.mt-pen .btn, body.mt-pen .btn-mini, body.mt-pen .choice, body.mt-pen .team-picker-trigger,
body.mt-pen .team-picker-option, body.mt-pen .setup-grid select{ min-height:44px; }

/* Aviso de erro de sessão */
.mt-toast{ position:fixed; left:50%; bottom:calc(var(--mt-tabbar-h) + 16px + env(safe-area-inset-bottom)); transform:translate(-50%,20px);
  z-index:1200; max-width:min(92vw,440px); padding:14px 18px; border-radius:12px; background:#2a1215; color:#ffd9de;
  border:1px solid #7a2a31; font:600 .92rem/1.4 var(--mt-font); box-shadow:0 12px 32px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.mt-toast.is-on{ opacity:1; transform:translate(-50%,0); }
.mt-account[aria-busy="true"]{ opacity:.7; cursor:progress; }
@media (min-width:1024px){ .mt-toast{ bottom:24px; } }
.mt-footer nav a{ min-width:44px; justify-content:center; }

/* Modo Pênaltis: alvos de toque (o CSS do jogo usa !important em alguns pontos) */
body.mt-pen .btn, body.mt-pen .btn-mini, body.mt-pen .choice, body.mt-pen .team-picker-trigger,
body.mt-pen .team-picker-option{ min-height:44px !important; }
body.mt-pen input[type="checkbox"]{ width:24px; height:24px; accent-color:#a82a2e; }

/* Texto só para leitores de tela (h1 semântico sem alterar o layout) */
.mt-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* =====================================================================
   Mente Tática — Design System (camada global)
   Carregado DEPOIS de style.css / analises.css / loja.css e antes dos
   <style> inline de cada página. Só refina; não remove regras de jogo.
   Não é carregado no Modo Pênaltis (que tem CSS próprio).
   ===================================================================== */

/* ---------- Tokens (aliases de compatibilidade + novos) ---------- */
:root{
  --preto:#0b0c10;
  --grafite:#16171d;
  --cinza:#a9aab4;            /* contraste 8:1 sobre o fundo (antes #9a9a9a ≈ 6.7:1) */
  --borda:#2a2b33;
  --mt-radius:12px;
  --mt-radius-lg:18px;
  --mt-gap:16px;
  --mt-focus:#e3a9ba;
  --mt-shadow-card:0 10px 30px rgba(0,0,0,.28);
  /* escala tipográfica fluida */
  --mt-fs-h1:clamp(2.1rem, 1.2rem + 4.2vw, 4.4rem);
  --mt-fs-h2:clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  --mt-fs-body:1rem;
}

/* ---------- Base ---------- */
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--mt-header-h, 60px) + 12px); }
body{
  font-family:var(--mt-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  line-height:1.55;
  overflow-x:clip;
}
img,video,svg{ max-width:100%; }
main:focus{ outline:none; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* Foco visível para todo o site (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--mt-focus);
  outline-offset:2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline-offset:0; }

/* ---------- Botões: altura, estados e área de toque padronizados ---------- */
.btn, button.btn, a.btn{
  min-height:48px;
  padding:12px 20px;
  border-radius:var(--mt-radius);
  font-size:.98rem;
  line-height:1.2;
  letter-spacing:.1px;
  background-image:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ transform:translateY(-1px); background-color:var(--mt-red-2, #a82a2e); }
.btn:active{ transform:translateY(0); filter:brightness(.95); }
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-ghost, a.btn-ghost, button.btn-ghost{
  background-image:none;
  background-color:transparent;
  border:1px solid #3a3b45;
}
.btn-ghost:hover{ background-color:rgba(255,255,255,.05); border-color:rgba(212,154,171,.6); }

/* ---------- Cards ---------- */
.card, .metric, .hero-panel{ border-radius:var(--mt-radius-lg); }
.card{ box-shadow:var(--mt-shadow-card); }

/* ---------- Seções ---------- */
.section{ padding:clamp(40px, 6vw, 72px) 0; }
.section-head h2{ font-size:var(--mt-fs-h2); line-height:1.15; }
.kicker{ color:var(--mt-rose, #d49aab); }

/* ---------- Hero da página inicial ---------- */
.hero{
  position:relative;
  min-height:auto;
  padding:clamp(40px, 7vw, 88px) 0 clamp(36px, 5vw, 64px);
}
.hero::after{          /* linhas de campo discretas — identidade tática */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(circle at 78% 50%, transparent 0 118px, rgba(47,191,113,.10) 118px 120px, transparent 120px),
    linear-gradient(90deg, transparent 0 calc(78% - 1px), rgba(47,191,113,.08) calc(78% - 1px) calc(78% + 1px), transparent calc(78% + 1px));
}
.hero > *{ position:relative; z-index:1; }
.hero-text h1{ font-size:var(--mt-fs-h1); max-width:11ch; }
.hero-photo-card img{ min-height:0; }

/* ---------- Formulários (login, cadastro, admin, Arena) ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], select, textarea{
  min-height:48px;
  font-size:16px;              /* evita zoom automático no iOS */
}
.auth-message{ min-height:1.4em; }
.auth-message:empty{ display:none; }

/* ---------- Rodapé alinhado ao fim da página ---------- */
body > .mt-footer{ flex-shrink:0; }

/* ---------- Contraste e áreas de toque em componentes específicos ---------- */
.product-old-price{ color:#9b9ca7; }            /* antes #777983 = 4,2:1 (< 4,5:1 AA) */
.filter-btn{ min-height:44px; }
.read-link{ min-height:44px; display:inline-flex; align-items:center; }

/* ---------- Botões compactos (Ver mais, treinamento, etc.) — antes sem estilo na Arena ---------- */
button.btn-mini{
  min-height:44px; padding:10px 16px; border:1px solid var(--borda); background:rgba(255,255,255,.05);
  color:var(--branco); border-radius:999px; font-weight:800; font-size:.9rem; line-height:1.2; font-family:inherit; cursor:pointer;
}
button.btn-mini:hover{ border-color:var(--mt-rose, #d49aab); color:var(--mt-rose, #d49aab); }
button.btn-mini:disabled{ opacity:.55; cursor:not-allowed; }
button.trail-btn, button.stage-btn{ min-height:44px; }
button.filter-btn{ min-height:44px !important; height:auto; }
.back-btn{ min-height:44px; display:inline-flex; align-items:center; }
.cart-close{ min-width:44px; min-height:44px; }

/* Reserva espaço enquanto loja.js monta a grade (evita o rodapé "pular" — CLS) */
.product-grid:empty{ min-height:100vh; min-height:100svh; }

/* Arena em 320 px: `1fr` deixava a coluna crescer além da tela (4–8 px de rolagem horizontal, já existia no original) */
@media (max-width:850px){ #arenaSection.arena-grid{ grid-template-columns:minmax(0,1fr); } }

/* ---------- Tablets e celulares ---------- */
@media (max-width:760px){
  .container{ width:min(1160px, calc(100% - 32px)); }
  /* Os botões principais do hero estavam ocultos no celular (display:none) */
  .hero .cta{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:22px; }
  .hero .cta .btn{ width:100%; }
  .mini-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px; }
  .metric{ padding:10px 8px; }
  .metric-num{ font-size:.95rem; }
  .metric-label{ font-size:.74rem; }
  .about-actions{ display:flex; flex-direction:column; gap:10px; }
  .about-actions .btn, .about-actions .textlink{ width:100%; min-height:48px; justify-content:center; text-align:center; }
  .hero-text h1{ max-width:12ch; }
}
@media (max-width:359px){
  .container{ width:calc(100% - 24px); }
  .btn{ padding:12px 14px; }
}
@media (hover:none){
  .btn:hover, .card:hover{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Diálogo acessível (substitui alert/confirm nativos) ---------- */
.mt-dialog-backdrop{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(5,6,9,.72); }
.mt-dialog{ width:min(440px,100%); background:var(--mt-surface); color:var(--mt-text); border:1px solid var(--mt-line);
  border-radius:16px; padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.55); font-family:var(--mt-font); }
.mt-dialog p{ margin:0 0 18px; line-height:1.5; font-size:1rem; white-space:pre-line; }
.mt-dialog-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.mt-dialog-actions button{ min-height:44px; min-width:44px; padding:10px 18px; border-radius:12px; font:700 .95rem var(--mt-font); cursor:pointer; }
.mt-dialog-ok{ background:var(--mt-red); color:#fff; border:1px solid var(--mt-red-2); }
.mt-dialog-cancel{ background:transparent; color:var(--mt-text); border:1px solid var(--mt-line); }
.mt-dialog-actions button:focus-visible{ outline:2px solid var(--mt-rose); outline-offset:2px; }