/* =====================================================================
   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; }