/* ══════════ Escala do texto ══════════
   Nenhum dos três grandes do gênero — EA Sports FC, Madden, NBA 2K — tem
   controle de tamanho do texto da interface. O FC 26 só tem para legenda de
   cinemática, e o "alto contraste" dele recolore o gramado sem tocar no
   texto. É gol aberto, e custa isto aqui (docs/INTERFACE.md §8).

   As 481 declarações de font-size do jogo são `rem`. Com --escala em 1 a raiz
   vale 16px e cada rem devolve exatamente o px que havia antes: ligar isto
   não mudou um pixel. Mexer na escala mexe no jogo inteiro de uma vez.

   O teto de 1.3 não é arbitrário — acima disso o texto começa a estourar
   caixas que continuam em px. */
html{ font-size:calc(16px * var(--escala,1)) }

:root{
  --escala:1;      /* 0.9 · 1 · 1.15 · 1.3 */
  --densidade:1;   /* respiro de linhas e cartões: 0.85 compacto · 1.15 folgado */

  /* ═══════════════════════════════════════════════════════════════
     Aro Tático — roxo #452080 · verde-lima #C2F34A · off-white #F7F7FA.
     Roxo é o padrão; themes.css oferece claro e preto. Sem time do GM, o
     lima continua a ação nos modos escuros.

     Todas as razões de contraste abaixo foram calculadas pela luminância
     relativa sRGB (WCAG 2.2). O mínimo adotado para texto normal é 4,5:1.
     ═══════════════════════════════════════════════════════════════ */

  /* Fallback roxo fixo. A navegação não altera mais a matiz: quem escolhe
     as superfícies é o tema salvo pelo jogador. */
  --matiz:260;

  /* ── Superfícies: seis degraus, do mais fundo ao mais alto ──
     Antes havia basicamente dois (fundo e cartão), e por isso tudo tinha
     o mesmo peso: sem degraus, não há profundidade nem hierarquia.
     Os valores em hsl reproduzem exatamente os hex que havia antes
     (#0D0719, var(--bg), #1A0F30, var(--card2), #2A1A49, #34205C) na matiz 260. */
  /* Escala de fallback para autenticação e páginas sem prototype.css.
     Nas telas internas o roxo aprovado está em prototype.css. */
  --s0:hsl(var(--matiz),56%,6.3%);    /* poço: barras fixas, trás de modal  */
  --s1:hsl(var(--matiz),55%,9.6%);    /* fundo do app                       */
  --s2:hsl(var(--matiz),52%,12.4%);   /* faixa, seção                       */
  --s3:hsl(var(--matiz),49%,15.3%);   /* cartão                             */
  --s4:hsl(var(--matiz),47%,19.4%);   /* cartão elevado, hover, campo       */
  --s5:hsl(var(--matiz),48%,24.3%);   /* selecionado, destaque              */

  /* ── Texto: quatro níveis, todos medidos ──
     t4 é o piso: #9286B5 dá 5,15:1 sobre o cartão. O antigo var(--t4)
     dava 3,93:1 e reprovava para texto normal. */
  --t1:#F7F7FA;   /* principal        16,06:1 sobre s3 */
  --t2:#CFC7E2;   /* secundário forte 10,57:1 sobre s3 */
  --t3:#A79CC2;   /* secundário        6,69:1 sobre s3 */
  --t4:#9286B5;   /* terciário         5,15:1 sobre s3 */

  /* ── A ação é o VERDE-LIMA, de volta por decisão do Marcos ──
     O lima preenche (botão, aba ativa) com texto ESCURO em cima: #241041
     sobre #C2F34A dá 10,9:1. Como texto sobre fundo escuro, o próprio lima
     passa com folga (10,5:1 sobre --s3). */
  --brand:#C2F34A; --brand2:#D2FB6B; --on-brand:#241041;
  --purple:#452080; --lime:#C2F34A;
  --accent:var(--brand);
  /* Apoio roxo; dentro de uma dinastia a cor do time assume o detalhe. */
  --accent2:hsl(var(--matiz),62%,68%);

  /* ── Cores que significam ──
     Antes vitória, derrota, lesão e contrato vencendo eram todos texto
     cinza: a informação existia, mas não saltava. Cada estado agora tem
     cor própria, e um fundo suave para selos e faixas.
     Nunca usar cor como ÚNICA indicação — sempre com texto ou ícone. */
  --ok:#3BE08A;         --ok-bg:rgba(59,224,138,.13);     --ok-borda:rgba(59,224,138,.34);
  --perigo:#FF6B78;     --perigo-bg:rgba(255,107,120,.13); --perigo-borda:rgba(255,107,120,.32);
  --alerta:#FFB24D;     --alerta-bg:rgba(255,178,77,.13);  --alerta-borda:rgba(255,178,77,.32);
  --info:#9DB2FF;       --info-bg:rgba(157,178,255,.13);   --info-borda:rgba(157,178,255,.3);
  --quente:#FF9052;     --quente-bg:rgba(255,144,82,.14);  /* sequência de vitórias, jogador em alta */
  --frio:#7CC4FF;       --frio-bg:rgba(124,196,255,.13);   /* em baixa, esfriou */

  /* ── Estrutura ── */
  --line:hsl(var(--matiz),43%,23.3%);       /* borda padrão                     */
  --line-forte:hsl(var(--matiz),36%,29.4%); /* divisor visível                */
  --sidebar:248px;

  /* ── Apelidos antigos ──
     O CSS tem ~2.700 linhas usando estes nomes. Apontam para a escala
     nova em vez de serem trocados um a um, o que evitaria uma refatoração
     grande e arriscada sem ganho visível. */
  --bg:var(--s1); --bg2:var(--s2); --card:var(--s3); --card2:var(--s4);
  --text:var(--t1); --muted:var(--t3);
  --green:var(--ok); --red:var(--perigo);

  /* usados pelo SVG da bola no logotipo */
  --mark-body:#F7F7FA; --brand-ball:#C2F34A; --brand-rim:#F7F7FA;
}

/* data-secao continua no HTML para navegação e estrutura, sem mudar a cor. */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--ui);line-height:1.5}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand2)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* ===== App shell ===== */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);background:linear-gradient(180deg,#120A22,var(--bg));
  border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.logo{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.logo img{height:46px;width:auto;display:block}
.logo .logo-txt{font-weight:900;font-style:italic;font-size:1.625rem;letter-spacing:1px;
  background:linear-gradient(90deg,#fff,#ffd5dc);-webkit-background-clip:text;background-clip:text;color:transparent}
.side-nav{flex:1;overflow-y:auto;padding:12px 12px 20px}
.nav-group{font-size:0.6875rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--t4);
  font-weight:800;padding:16px 12px 6px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-md);
  font-weight:600;font-size:0.90625rem;color:#D6CFE8;margin-bottom:2px;border:1px solid transparent;transition:.12s}
.nav-item:hover{background:var(--card2);color:#fff}
.nav-item .ni-ic{width:22px;text-align:center;font-size:1rem}
.nav-item.active{background:linear-gradient(90deg,rgba(194,243,74,.20),rgba(194,243,74,.04));
  color:#fff;border-color:rgba(194,243,74,.5)}
.nav-item.active .ni-ic{filter:drop-shadow(0 0 4px rgba(194,243,74,.6))}
.side-foot{border-top:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.sf-user{font-weight:700;margin-bottom:4px}
.sf-link{font-size:0.8125rem;color:var(--muted);font-weight:600}
.sf-link:hover{color:var(--brand2)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* ===== Topbar ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 28px;height:66px;
  background:linear-gradient(90deg,#170D2B,var(--card2));border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50}
.tb-left{display:flex;align-items:center;gap:12px}
.tb-team{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);font-weight:800;font-size:0.875rem;
  color:#fff;background:var(--c,#3A2660);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.tb-team-info strong{display:block;font-size:0.9375rem}
.tb-team-info .muted{font-size:0.75rem}
.season-info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{background:var(--card2);border:1px solid var(--line);padding:5px 11px;border-radius:20px;
  font-size:0.75rem;font-weight:700;color:var(--muted)}
.pill.phase-playoffs,.pill.phase-lottery,.pill.phase-draft{color:var(--brand2);border-color:rgba(194,243,74,.5)}
.pill.phase-offseason,.pill.phase-freeagency{color:var(--green);border-color:rgba(43,212,122,.4)}
.pill-date{color:var(--text)}

.container{max-width:1320px;width:100%;margin:0 auto;padding:26px 28px 48px}
.page-title{margin:0 0 18px;font-size:1.625rem;font-weight:800}

/* ===== Cards / dashboard ===== */
.dashboard{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.card{background:linear-gradient(180deg,var(--card),#11151f);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px 20px;box-shadow:0 2px 14px rgba(0,0,0,.25)}
.card.span2{grid-column:1/-1}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.card-head h2{margin:0;font-size:0.875rem;text-transform:uppercase;letter-spacing:1px;color:#aeb8cc;
  position:relative;padding-left:12px}
.card-head h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:15px;border-radius:var(--r-sm);background:var(--brand)}
.card-head.page{margin:0 0 16px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ===== Buttons ===== */
.btn{display:inline-block;background:var(--card2);border:1px solid var(--line);color:var(--text);
  padding:9px 16px;border-radius:var(--r-md);font-weight:700;font-size:0.875rem;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--brand);color:var(--text);background:var(--card2)}
.btn-primary{background:linear-gradient(180deg,var(--brand2),var(--brand));color:var(--on-brand);border-color:var(--brand);
  box-shadow:0 3px 12px rgba(194,243,74,.32)}
.btn-primary:hover{filter:brightness(1.08);color:var(--on-brand)}
.btn-lg{padding:14px 28px;font-size:1rem}

/* Hero / install */
.hero{max-width:680px;margin:60px auto;text-align:center}
.hero h1{font-size:3rem;margin:0 0 16px}
.hero p{color:var(--muted);font-size:1.0625rem}

/* ===== Auth (login/registro/saves) ===== */
/* ATENÇÃO: nada de `place-items` aqui.
   Em container de bloco, `justify-items:center` encolhe E centraliza os
   filhos de largura automática — era o que deixava login e menu inicial
   espremidos em ~660px no meio de uma tela de 1440px. Quem precisa de
   centralização (.auth-shell) usa margin:0 auto. */
.auth-body{min-height:100vh;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(194,243,74,.14),transparent 60%),var(--bg)}
.auth-shell{width:100%;max-width:920px;padding:24px;margin:0 auto}
.auth-brand{display:flex;align-items:center;gap:18px;justify-content:center;margin-bottom:22px}
.auth-logo{height:84px}
.ab-name{display:block;font-size:2.625rem;font-weight:900;font-style:italic;letter-spacing:1px;
  background:linear-gradient(90deg,#fff,#ffc9d2);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-sub{display:block;color:var(--muted);font-size:0.8125rem;font-weight:600}
.auth-foot{text-align:center;color:var(--t4);font-size:0.75rem;margin-top:18px}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:0.875rem}
.standings-table th,.box-table th,.mini-table th{text-align:left;color:var(--muted);
  font-size:0.6875rem;text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;border-bottom:1px solid var(--line)}
.standings-table td,.box-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04)}
.standings-table tr:hover,.box-table tbody tr:hover{background:var(--card2)}
.standings-table .seed{color:var(--muted);width:24px}
.standings-table tr.po .seed{color:var(--green);font-weight:700}
.standings-table tr.pi .seed{color:var(--accent)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:middle}
.mini-table td{padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.04)}
.mini-table .rank,.ranked .rank{color:var(--muted);width:22px;text-align:center}
.link-more{display:inline-block;margin-top:10px;font-size:0.8125rem;color:var(--accent);font-weight:600}

.legend{color:var(--muted);font-size:0.8125rem;margin-bottom:14px}
.key{display:inline-block;width:12px;height:12px;border-radius:var(--r-sm);vertical-align:middle;margin-right:4px}
.key.po{background:var(--green)} .key.pi{background:var(--accent)}

/* OVR badges */
.ovr{display:inline-block;min-width:30px;text-align:center;padding:2px 6px;border-radius:var(--r-sm);font-weight:800;font-size:0.8125rem}
.ovr-elite{background:#7b2ff7;color:#fff}
.ovr-star{background:#1d63ff;color:#fff}
.ovr-good{background:#2bd47a;color:#06281a}
.ovr-role{background:var(--s5);color:var(--t2)}

/* Games grid (home) */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.game-row{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:10px 12px;font-weight:600;position:relative}
.game-row:hover{border-color:var(--accent)}
.game-row .g-team{display:flex;align-items:center;gap:5px}
.game-row .g-score{flex:1;text-align:center;color:var(--muted)}
.game-row.played .g-score{color:var(--text);font-weight:800}
.ot-badge{position:absolute;top:-7px;right:6px;background:var(--accent);color:#1a1205;
  font-size:0.6875rem;padding:1px 5px;border-radius:var(--r-sm);font-weight:800}

/* Schedule */
.day-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.schedule-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.schedule-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;display:block}
.schedule-card:hover{border-color:var(--accent)}
.schedule-card.pending{border-style:dashed}
.sc-team{display:flex;align-items:center;gap:8px;padding:4px 0;font-weight:600}
.sc-team .sc-name{flex:1}
.sc-team .sc-pts{font-weight:800;font-size:1.125rem}
.sc-status{margin-top:8px;text-align:right;color:var(--muted);font-size:0.8125rem}
.badge-live{background:var(--accent2);color:#fff;padding:3px 10px;border-radius:var(--r-sm);font-weight:700}

/* Scoreboard */
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;
  background:linear-gradient(135deg,var(--s1),var(--s2));border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 30px;margin-bottom:20px}
.sb-team{text-align:center}
.sb-team .sb-abbr{font-size:1.875rem;font-weight:900;color:var(--c)}
.sb-team .sb-city{color:var(--muted);font-size:0.8125rem;margin-bottom:6px}
.sb-team .sb-score{font-size:4rem;font-weight:900;line-height:1;transition:.1s}
.sb-score.bump{transform:scale(1.25);color:var(--accent)}
.sb-mid{text-align:center;min-width:180px}
.sb-clock{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.sb-quarter{color:var(--muted);font-size:0.8125rem;margin-bottom:10px;height:18px}
.sb-speed{margin-top:10px;font-size:0.75rem;color:var(--muted)}
.sb-speed select{background:var(--card2);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 6px}

/* Game body */
.game-body{display:grid;grid-template-columns:1fr 1.3fr;gap:18px}
.pbp-feed{height:520px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:6px}
.pbp-item{padding:8px 10px;border-radius:var(--r-sm);background:var(--card2);font-size:0.875rem;
  border-left:3px solid var(--line);animation:slideIn .25s ease}
.pbp-item .pbp-meta{color:var(--muted);font-size:0.6875rem;margin-right:8px;font-variant-numeric:tabular-nums}
.pbp-item.made{border-left-color:var(--green)}
.pbp-item.three{border-left-color:var(--accent)}
.pbp-item.miss,.pbp-item.turnover{border-left-color:#55607a}
.pbp-item.block{border-left-color:var(--red)}
.pbp-item.ft{border-left-color:var(--accent2)}
.pbp-item.quarter-sep{background:transparent;text-align:center;color:var(--accent);
  font-weight:800;border:none;letter-spacing:1px;margin-top:6px}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.box-table .bx-name{min-width:150px}
.box-team{margin:14px 0 6px;font-size:0.9375rem;color:var(--accent)}

/* Team page */
.team-hero{display:flex;align-items:center;gap:24px;border-radius:var(--r-lg);padding:28px 30px;margin-bottom:20px;color:#fff}
.team-hero .th-abbr{font-size:3.375rem;font-weight:900;opacity:.9}
.team-hero h1{margin:0 0 4px}
.team-hero p{margin:0;opacity:.9}
.roster-table tr.starter .bx-name{font-weight:700}
.tag{background:var(--accent2);color:#fff;font-size:0.6875rem;padding:1px 6px;border-radius:var(--r-sm);margin-left:6px;font-weight:700}

/* Player page */
.player-hero{display:flex;align-items:center;gap:24px;margin-bottom:20px}
.ph-photo{width:90px;height:110px;border-radius:var(--r-md);overflow:hidden;flex-shrink:0;background:var(--card2)}
.ph-photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ph-ovr{width:90px;height:90px;border-radius:var(--r-lg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:2.375rem;font-weight:900}
.ph-ovr span{font-size:0.6875rem;font-weight:700;opacity:.8}
.ph-info h1{margin:0 0 4px}
/* Face em listas pequenas (draft board, roster) */
.face-mini{width:2.25rem;aspect-ratio:36/44;height:auto;border-radius:var(--r-sm);object-fit:cover;object-position:top;background:var(--card2);vertical-align:middle}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat-big{background:var(--card2);border-radius:var(--r-md);padding:14px;text-align:center}
.stat-big span{display:block;font-size:1.625rem;font-weight:900;color:var(--accent)}
.attr-list{display:flex;flex-direction:column;gap:9px}
.attr-row{display:grid;grid-template-columns:90px 1fr 32px;align-items:center;gap:10px;font-size:0.8125rem}
.attr-bar{background:var(--card2);height:9px;border-radius:var(--r-sm);overflow:hidden}
.attr-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.attr-val{font-weight:700;text-align:right}

/* Playoffs bracket */
.bracket{display:flex;gap:20px;overflow-x:auto;padding-bottom:10px}
.round-col{min-width:200px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.round-title{font-size:0.8125rem;text-transform:uppercase;color:var(--muted);letter-spacing:.5px;text-align:center}
.series{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;position:relative}
.series-conf{font-size:0.6875rem;color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.series-team{display:flex;align-items:center;gap:8px;padding:4px 0;font-weight:600}
.series-team .seed{color:var(--muted);width:18px;font-size:0.75rem}
.series-team .wins{margin-left:auto;font-weight:800}
.series-team.winner{color:var(--green)}
.series-team.winner .wins{color:var(--green)}

.champion-banner{padding:18px 24px;border-radius:var(--r-lg);color:#fff;font-size:1.25rem;
  text-align:center;margin-bottom:18px;box-shadow:0 6px 24px rgba(0,0,0,.3)}

.footer{text-align:center;color:var(--muted);font-size:0.75rem;padding:30px;border-top:1px solid var(--line);margin-top:30px}

@media(max-width:880px){
  .dashboard,.game-body{grid-template-columns:1fr}
  .leaders-grid{grid-template-columns:1fr!important}
  .topbar{flex-wrap:wrap;height:auto;padding:10px}
}
.leaders-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Cap page */
.team-hero .th-meta{font-size:0.8125rem;opacity:.92;margin-top:6px}
.cap-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.cap-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;text-align:center}
.cap-box span{display:block;font-size:1.875rem;font-weight:900;color:var(--text)}
.cap-box.highlight span{color:var(--accent)}
.cap-alert{background:#3a2a10;border:1px solid var(--accent);color:#ffd591;border-radius:var(--r-md);padding:12px 16px;margin-bottom:16px}
.cap-status{padding:2px 9px;border-radius:var(--r-sm);font-size:0.75rem;font-weight:700}
.cap-ok{background:#10371f;color:var(--green)}
.cap-over{background:#3a1414;color:#ff8a8a}
.cap-under{background:#3a2a10;color:#ffce85}

/* Awards */
.awards-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.award-card{background:linear-gradient(135deg,#241544,#23170a);border:1px solid var(--accent);
  border-radius:var(--r-md);padding:14px;text-align:center}
.award-label{font-size:0.75rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.award-name{display:block;font-size:1.125rem;font-weight:800;margin:6px 0 2px}
.award-meta{font-size:0.75rem;color:var(--muted)}
.allnba{font-size:0.875rem;line-height:2}
.season-select{background:var(--card2);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;font-weight:600}

/* Draft / scouting grades */
.draft-table .seed{color:var(--accent);font-weight:800}
.grade{display:inline-block;min-width:26px;text-align:center;padding:1px 6px;border-radius:var(--r-sm);font-weight:800;font-size:0.75rem}
.g-a{background:#10371f;color:#7dffb0}
.g-b{background:#251748;color:#8fb6ff}
.g-c{background:#3a2a10;color:#ffce85}
.g-d{background:#3a1414;color:#ff8a8a}
.pot{display:inline-block;min-width:28px;text-align:center;padding:2px 6px;border-radius:var(--r-sm);font-weight:800;font-size:0.8125rem}
.pot-high{background:#7b2ff7;color:#fff}
.pot-mid{background:#1d63ff;color:#fff}
.pot-low{background:#473066;color:#cdd6e6}

/* Injury / status badges */
.badge-inj{background:#3a1414;color:#ff8a8a;font-size:0.6875rem;padding:1px 6px;border-radius:var(--r-sm);margin-left:6px;font-weight:700}
.injury-note{background:var(--perigo-bg);border:1px solid var(--perigo-borda);color:var(--perigo);border-radius:var(--r-md);padding:9px 13px;margin:10px 0;font-size:0.8125rem;font-weight:600}
.pbp-item.injury{border-left-color:var(--perigo);background:var(--perigo-bg)}
.news-list{display:flex;flex-direction:column;gap:4px;font-size:0.8125rem;max-height:200px;overflow-y:auto}
.news-list .nl-item{padding:5px 8px;background:var(--card2);border-radius:var(--r-sm)}

/* Modo GM */
.nav-gm{color:var(--accent)!important;font-weight:700!important}
.pill-gm{color:#fff;border-width:2px!important}
.gm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.gm-card{border-radius:var(--r-md);padding:16px;color:#fff;border:2px solid transparent;display:block;transition:.15s}
.gm-card:hover{transform:translateY(-3px);color:#fff}
.gm-card.active{border-color:var(--accent)}
.gm-card .gm-abbr{font-size:1.75rem;font-weight:900}
.gm-card .gm-name{font-weight:700;margin:2px 0}
.gm-card .gm-meta{font-size:0.75rem;opacity:.9}
.gm-card .gm-current{margin-top:8px;background:rgba(0,0,0,.35);border-radius:var(--r-sm);padding:3px 8px;font-size:0.75rem;font-weight:700;display:inline-block}
.scheme-form{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.scheme-form label{display:flex;flex-direction:column;gap:4px;font-size:0.8125rem;color:var(--muted);font-weight:600}
.scheme-form select{background:var(--card2);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;min-width:220px}
.min-input{width:60px;background:var(--card2);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px;text-align:center}
.trade-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.trade-msg{padding:12px 16px;border-radius:var(--r-md);margin-bottom:16px;font-weight:700}
.trade-msg.ok{background:#10371f;color:#9bffc0;border:1px solid #1f6b3a}
.trade-msg.no{background:#3a1414;color:#ff9b9b;border:1px solid #6b2a2a}
@media(max-width:880px){.trade-grid{grid-template-columns:1fr}}

/* Metas da diretoria */
.board-goal{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--r-md);padding:12px 16px;margin-bottom:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.board-goal .goal-detail{color:var(--muted);font-size:0.8125rem}
.board-goal .goal-badge{margin-left:auto;font-size:0.75rem;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--card2)}
.board-goal.goal-cumprida{border-left-color:var(--green)}
.board-goal.goal-cumprida .goal-badge{background:#10371f;color:var(--green)}
.board-goal.goal-falhou{border-left-color:var(--red)}
.board-goal.goal-falhou .goal-badge{background:#3a1414;color:#ff8a8a}

/* Sala do Draft */
.draft-status{display:flex;gap:24px;align-items:center;background:linear-gradient(135deg,var(--s1),var(--s2));
  border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;margin-bottom:14px;font-size:0.9375rem}
.on-clock-you{margin-left:auto;background:var(--accent);color:#1a1205;font-weight:800;padding:6px 14px;border-radius:var(--r-sm)}
.btn-sm{padding:4px 10px;font-size:0.75rem}

/* ===== Comando ao vivo (SimCast) ===== */
.live-panel{border:1px solid var(--accent2)}
.live-timeouts{font-size:0.8125rem;color:var(--muted)}
.live-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:14px}
.live-controls label{display:flex;flex-direction:column;gap:4px;font-size:0.8125rem;color:var(--muted);font-weight:600}
.live-controls select{background:var(--card2);color:var(--text);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:7px 10px;min-width:160px}
.live-controls .ctrl-check{flex-direction:row;align-items:center;gap:8px;color:var(--text)}
.live-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.live-hint{font-size:0.8125rem;color:var(--muted)}
.live-hint.clutch{color:var(--accent);font-weight:700}
.pbp-item.timeout-ev{color:var(--accent2);font-weight:600}

/* ===== Inbox do GM / pressão da diretoria ===== */
.inbox-list{display:flex;flex-direction:column;gap:8px}
.inbox-item{display:flex;gap:10px;align-items:flex-start;background:var(--card2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:9px 12px}
.ib-icon{font-size:1.125rem;line-height:1.2}
.ib-from{display:block;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.conf-bar{height:8px;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:12px}
.conf-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--accent),var(--green))}
.pill.conf-ok{color:var(--green);border-color:var(--green)}
.pill.conf-warn{color:var(--accent);border-color:var(--accent)}
.pill.conf-bad{color:var(--red);border-color:var(--red)}

/* ===== Loop de calendário (jogo a jogo) ===== */
.continue-bar{display:flex;gap:12px;align-items:center;margin:14px 0;padding:12px 16px;
  background:var(--card);border:1px solid var(--accent2);border-radius:var(--r-md)}
.gm-today{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:0.9375rem}
.gm-today .btn{margin-left:4px}

/* ===== Contas / Saves ===== */
.auth-wrap{max-width:480px;margin:40px auto}
.auth-wrap.wide{max-width:840px}
.auth-card h1{margin:0 0 6px}
.auth-form{display:flex;flex-direction:column;gap:14px;margin:18px 0}
.auth-form label,.newsave-form label{display:flex;flex-direction:column;gap:5px;font-size:0.8125rem;color:var(--muted);font-weight:600}
.auth-form input,.newsave-form input,.newsave-form select{background:var(--card2);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;font-size:0.9375rem}
.auth-err{background:#3a1620;border:1px solid #7a2233;color:#ffb3bd;padding:9px 12px;border-radius:var(--r-sm);margin-bottom:6px}
.newsave-form{display:flex;flex-direction:column;gap:14px}
.ns-row{display:flex;gap:14px;flex-wrap:wrap}
.ns-row label{flex:1;min-width:160px}
.save-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.save-card{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;position:relative}
.save-card h3{margin:6px 0 2px}
.save-slot{position:absolute;top:12px;right:14px;font-size:0.6875rem;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-md);padding:2px 8px}
.save-actions{display:flex;gap:8px;margin-top:12px}
.btn-danger{background:#3a1620;border-color:#7a2233;color:#ffb3bd}
.btn-danger:hover{background:#52202e;color:#fff}

/* ===== Mini-calendário do time ===== */
.mini-cal{display:flex;flex-direction:column;gap:6px}
.mc-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  background:var(--card2);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 11px;font-size:0.875rem}
.mc-row.mc-win{border-left:3px solid var(--green)}
.mc-row.mc-loss{border-left:3px solid var(--red)}
.mc-date{color:var(--muted);font-size:0.8125rem}
.mc-vs{display:flex;align-items:center;gap:6px;font-weight:600}
.mc-res{font-weight:700;font-variant-numeric:tabular-nums}

/* ===== Scouting ===== */
.scout{display:flex;flex-direction:column;gap:10px}
.scout-head{display:flex;align-items:center;gap:12px;color:#fff;border-radius:var(--r-md);padding:12px 14px}
.scout-abbr{font-size:1.5rem;font-weight:800;letter-spacing:1px}
.scout-form{font-size:0.8125rem;color:var(--muted);display:flex;align-items:center;gap:5px}
.scout-form .form-w,.scout-form .form-l{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;
  border-radius:var(--r-sm);font-weight:800;font-size:0.75rem;color:#fff}
.scout-form .form-w{background:var(--green);color:#06281a}
.scout-form .form-l{background:var(--red)}
.scout-cols{display:flex;gap:18px;flex-wrap:wrap}
.scout-cols>div{flex:1;min-width:140px}
.scout h4{margin:6px 0 4px;font-size:0.875rem}
.scout-cols ul{margin:0;padding-left:18px}
.scout-players{display:flex;flex-direction:column;gap:5px}
.scout-p{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 9px;display:flex;align-items:center;gap:8px}
.scout-tips{margin:4px 0 0;padding-left:18px;color:var(--text)}
.scout-tips li{margin-bottom:4px}
.scout-card{border:1px solid var(--accent)}

/* ===== Decisões do GM ===== */
.decisions-card{border:1px solid var(--accent)}
.decision{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin-bottom:10px}
.decision h3{margin:0 0 4px;font-size:0.9375rem}
.decision p{margin:0 0 10px;color:var(--muted)}
.decision-opts{display:flex;gap:8px;flex-wrap:wrap}

/* ===== H2H no scouting ===== */
.scout-h2h{font-size:0.8125rem;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px}
.h2h-g{display:inline-block;border-radius:var(--r-sm);padding:1px 6px;margin-left:4px;font-weight:700;font-size:0.75rem}
.h2h-w{background:#10371f;color:#7dffb0}
.h2h-l{background:#3a1620;color:#ffb3bd}

/* ===== Resumo da franquia (histórico) ===== */
.fr-summary{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px;font-size:0.875rem;color:var(--muted)}
.fr-stat strong{color:var(--text);font-size:1rem}
.fr-champ{color:var(--accent);font-weight:700}

/* ===== Draft Picks ===== */
.picks-list{display:flex;flex-wrap:wrap;gap:8px}
.pick-chip{display:inline-block;border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px;font-size:0.8125rem;font-weight:600;background:var(--card2)}
.pick-chip.pick-r1{border-color:var(--accent2);color:#bcd2ff}
.pick-chip.pick-r2{color:var(--muted)}

/* ===== Loteria do Draft ===== */
.lottery-mine{background:rgba(29,99,255,.12)}
.lottery-slots{display:flex;flex-direction:column;gap:8px;min-height:120px;max-height:520px;overflow-y:auto;margin-bottom:14px}
.lottery-ball{display:flex;align-items:center;gap:12px;background:var(--card2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:12px 16px;font-size:1rem}
.lottery-ball .lb-num{font-weight:800;font-size:1.25rem;min-width:46px;color:var(--muted)}
.lottery-ball .lb-dot{width:16px;height:16px;border-radius:50%}
.lottery-ball .lb-team{font-weight:700}
.lottery-ball .lb-you{margin-left:auto;background:var(--accent2);color:#fff;font-size:0.6875rem;font-weight:800;
  padding:3px 8px;border-radius:var(--r-md);letter-spacing:.5px}
.lottery-ball.is-gm{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2) inset}
.lottery-ball.top-pick{background:linear-gradient(135deg,#3a2d0a,#241544);border-color:var(--accent)}
.lottery-ball.top-pick .lb-num{color:var(--accent)}
.lottery-ball .lb-crown{margin-left:auto;color:var(--accent);font-weight:800}
.lottery-ball.top-pick .lb-you{margin-left:8px}
.lottery-actions{display:flex;gap:12px;align-items:center}
@keyframes lbpop{0%{transform:scale(.6) translateY(-8px);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.lottery-ball.pop{animation:lbpop .42s ease-out}

/* ===== Responsivo: sidebar vira barra superior ===== */
@media (max-width:920px){
  .app{flex-direction:column}
  .sidebar{width:100%;flex:none;height:auto;position:static;flex-direction:row;align-items:center;
    border-right:none;border-bottom:1px solid var(--line)}
  .logo{border-bottom:none;border-right:1px solid var(--line);padding:12px 16px;flex:0 0 auto}
  .logo img{height:36px}
  .logo .logo-txt{font-size:1.25rem}
  .side-nav{flex:1;display:flex;align-items:center;gap:4px;overflow-x:auto;padding:8px;white-space:nowrap}
  .nav-group{display:none}
  .nav-item{margin:0}
  .side-foot{flex-direction:row;gap:12px;border-top:none;border-left:1px solid var(--line);align-items:center}
  .sf-user{margin:0}
  .topbar{padding:0 16px;height:auto;flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}
  .container{padding:18px 16px 40px}
  .dashboard{grid-template-columns:1fr}
}

/* ===== Matchup CTA ===== */
.cta-matchup{ display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:4px }
.ctam-side{ display:flex;flex-direction:column;align-items:center;gap:6px }
.ctam-logo{ width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)) }
.ctam-abbr{ font-family:var(--display);font-size:1.125rem;font-weight:700;letter-spacing:1px }
.ctam-mid{ display:flex;flex-direction:column;align-items:center;gap:2px;min-width:60px }
.ctam-at{ font-family:var(--display);font-size:1.75rem;color:var(--muted);font-weight:700 }
.ctam-date{ font-size:0.6875rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px }

/* ===== CTA central (home) ===== */
.cta-card{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:radial-gradient(700px 220px at 50% -40%,rgba(194,243,74,.22),transparent 70%),linear-gradient(180deg,#171c28,#10141d);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 20px;margin-bottom:18px;
  box-shadow:0 4px 24px rgba(0,0,0,.3)}
.cta-note{font-size:0.8125rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.cta-btn{font-size:1.125rem;padding:16px 36px;border-radius:var(--r-md)}
.cta-alt{font-size:0.8125rem;color:var(--muted);font-weight:600}
.cta-alt:hover{color:var(--brand2)}

/* ===== Manchetes em destaque ===== */
.news-card{border-left:3px solid var(--brand)}
.news-feature{display:flex;flex-direction:column;gap:0}
.nf-item{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.05);font-size:0.9375rem}
.nf-item:last-child{border-bottom:none}
.nf-bar{flex:0 0 4px;align-self:stretch;min-height:20px;border-radius:var(--r-sm);background:var(--brand);opacity:.7}
.nf-text{font-weight:600}

/* ===== Ajustes táticos (live) recolhíveis ===== */
.live-tactics{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.live-tactics summary{cursor:pointer;font-weight:700;color:#aeb8cc;font-size:0.8125rem;text-transform:uppercase;letter-spacing:.5px;list-style:none}
.live-tactics summary::-webkit-details-marker{display:none}
.live-tactics summary::before{content:"▸ ";color:var(--brand)}
.live-tactics[open] summary::before{content:"▾ "}
.live-actions .btn-lg{padding:13px 26px}
.sb-speed{font-size:0.75rem;color:var(--muted)}

/* ===== Rótulo de seção (Meu Time) ===== */
.section-tag{font-size:0.8125rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#aeb8cc;
  margin:18px 0 12px;padding-left:12px;border-left:3px solid var(--brand)}

/* =================================================================
   POLIMENTO VISUAL v2 — "cara de game"
   ================================================================= */
/* ── A LETRA ──
   Inter na interface: foi desenhada para dado denso e tem algarismo tabular
   de verdade, então coluna de número para de dançar. Oswald no que é placar:
   sigla, pontuação, relógio — é a condensada de transmissão esportiva.

   O que saiu: Baloo 2 e Nunito Sans, as duas arredondadas. Juntas davam ar
   de aplicativo infantil num jogo sobre decidir folha salarial. */
:root{
  /* As fontes do PROTÓTIPO que o Marcos aprovou ("ficou exatamente como eu
     queria", 21/10, Downloads/Protótipo jogo gerenciador FIFA): Lexend na
     interface, Barlow Condensed nos títulos e números grandes — em caixa
     alta, como placar. Inter/Oswald durou um dia; o protótipo manda. */
  --display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --ui:'Lexend','Segoe UI',Roboto,system-ui,sans-serif;

  /* ── O RAIO ──
     Era 10–16px espalhado em literal por todo o arquivo, e canto muito
     redondo é metade do ar casual: cartão com 16px de raio parece botão de
     celular, não painel de dado. Agora é escala, em um lugar só. */
  /* O raio também é o do protótipo: cartão de hub 6px, painel 8px, selo
     4px. O "quadrado" de antes era a reação ao 16px arredondado; o
     protótipo mostrou o ponto do meio que ele queria. */
  --r-sm:4px;   /* etiqueta, distintivo, campo pequeno */
  --r-md:6px;   /* cartão de hub, botão, linha de lista */
  --r-lg:8px;   /* painel grande, seção */
}
body{font-family:var(--ui);letter-spacing:-0.004em}

/* Tipografia esportiva nos destaques.
   `letter-spacing` menor que antes: Oswald já é estreita, e espaçar
   condensada desfaz justamente o que ela faz de bom. */
.page-title,.card-head h2,.logo .logo-txt,.ab-name,
.sb-abbr,.sb-score,.sb-clock,.team-hero .th-abbr,.team-hero h1,
.tb-team,.cta-btn,.hero h1,.ovr{font-family:var(--display)!important;letter-spacing:.2px}
.card-head h2{font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.page-title{font-weight:600;letter-spacing:.4px}

/* Cenário / arena no conteúdo */
.main{
  background:
    radial-gradient(1000px 520px at 85% -8%, rgba(194,243,74,.10), transparent 62%),
    radial-gradient(820px 520px at -5% 108%, rgba(47,123,255,.07), transparent 60%),
    linear-gradient(180deg,#160C29,#080a10);
}
.container{position:relative}
.container::before{ /* círculo central de quadra, bem sutil */
  content:"";position:fixed;top:120px;left:calc(50% + var(--sidebar)/2);transform:translateX(-50%);
  width:520px;height:520px;border:2px solid rgba(255,255,255,.025);border-radius:50%;
  box-shadow:0 0 0 90px rgba(255,255,255,.012);pointer-events:none;z-index:0}
.container > *{position:relative;z-index:1}

/* Cards com mais profundidade + leve realce no topo */
.card{box-shadow:0 6px 22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)}
.card-head h2::before{height:16px;box-shadow:0 0 10px rgba(194,243,74,.6)}

/* Sidebar: brilho na logo e barra do item ativo */
.logo img{filter:drop-shadow(0 0 10px rgba(194,243,74,.35))}
.nav-item.active{position:relative}
.nav-item.active::before{content:"";position:absolute;left:-1px;top:7px;bottom:7px;width:3px;border-radius:var(--r-sm);
  background:var(--brand);box-shadow:0 0 10px var(--brand)}

/* Topbar: fio vermelho no rodapé */
.topbar{box-shadow:inset 0 -2px 0 rgba(194,243,74,.35)}
.tb-team{font-size:0.9375rem;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 4px 14px rgba(0,0,0,.4)}

/* ===== Placar estilo jumbotron ===== */
.scoreboard{background:linear-gradient(180deg,var(--s1),var(--s0))!important;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px 26px;box-shadow:0 10px 34px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.03);
  position:relative;overflow:hidden}
.scoreboard::before{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 220px at 50% -50%,rgba(194,243,74,.18),transparent 70%);pointer-events:none}
.sb-team{position:relative;padding:6px 10px;border-radius:var(--r-md)}
.sb-team .sb-abbr{font-size:2.375rem;text-shadow:0 0 22px var(--c)}
.sb-team .sb-score{font-size:4.875rem;text-shadow:0 0 26px rgba(255,255,255,.14)}
.sb-score.bump{color:var(--brand2)}
.sb-clock{font-size:1.625rem;color:#fff;letter-spacing:2px;text-shadow:0 0 14px rgba(194,243,74,.5)}
.sb-quarter{text-transform:uppercase;letter-spacing:1.5px;font-weight:700}

/* ===== Hero do time com motivo de quadra ===== */
.team-hero{position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.team-hero::after{content:"";position:absolute;right:-60px;top:50%;transform:translateY(-50%);
  width:280px;height:280px;border:14px solid rgba(255,255,255,.10);border-radius:50%;pointer-events:none}
.team-hero::before{content:"";position:absolute;right:120px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.12)}
.team-hero .th-abbr{font-size:3.75rem;text-shadow:0 4px 18px rgba(0,0,0,.4)}
.team-hero h1{font-size:2.125rem;letter-spacing:1px}

/* Tabelas com zebra + hover mais vivo */
/* Zebra removida (INTERFACE.md §6): o fio de 1px já separa as linhas. */
.box-table tbody tr:hover,.standings-table tr:hover{background:rgba(194,243,74,.08)}

/* Game rows / botões com leve elevação */
.game-row,.btn{transition:.14s ease}
.game-row:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.btn-primary:hover{transform:translateY(-1px)}
.cta-btn{letter-spacing:1px}

/* Banners mais vibrantes */
.champion-banner{box-shadow:0 8px 26px rgba(0,0,0,.35);position:relative;overflow:hidden}
.champion-banner::after{content:"🏀";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:3.75rem;opacity:.12}

@media (max-width:920px){ .container::before{display:none} }

/* =================================================================
   LOGOS DE TIME
   ================================================================= */
.tlogo{ display:inline-block;object-fit:contain;vertical-align:middle;flex-shrink:0; }
.tlogo-sm{ width:24px;height:24px }
.tlogo-md{ width:36px;height:36px }
.tlogo-lg{ width:56px;height:56px }
.tlogo-xl{ width:80px;height:80px }
.tlogo-hero{ width:120px;height:120px }
/* Fallback badge quando a img falhar */
.tlogo-fb{ display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  font-family:var(--display);font-weight:700;color:#fff;vertical-align:middle;flex-shrink:0;font-size:0.6875rem; }
/* Exceção consciente ao piso de 11px: a sigla aqui é desenho dentro de uma
   caixa de 24px, não texto corrido. Três letras a 11px estouram. */
.tlogo-fb.tlogo-sm{ width:24px;height:24px;font-size:0.59375rem;border-radius:var(--r-sm) }
.tlogo-fb.tlogo-md{ width:36px;height:36px;font-size:0.6875rem;border-radius:var(--r-sm) }
.tlogo-fb.tlogo-lg{ width:56px;height:56px;font-size:0.9375rem;border-radius:var(--r-md) }
.tlogo-fb.tlogo-xl{ width:80px;height:80px;font-size:1.25rem;border-radius:var(--r-lg) }
.tlogo-fb.tlogo-hero{ width:120px;height:120px;font-size:1.875rem;border-radius:20px }

/* ===== Side-team-hero (sidebar logo do GM) ===== */
.side-team-hero{ display:flex;align-items:center;gap:12px;padding:14px 18px;margin:0;position:relative;overflow:hidden; }
.side-team-hero::after{ content:"";position:absolute;right:-20px;top:50%;transform:translateY(-50%);
  width:90px;height:90px;border:6px solid rgba(255,255,255,.08);border-radius:50%;pointer-events:none; }
.sth-logo{ position:relative;z-index:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.sth-info{ display:flex;flex-direction:column;position:relative;z-index:1; }
.sth-abbr{ font-family:var(--display);font-size:1.375rem;font-weight:700;color:#fff;line-height:1;letter-spacing:1px; }
.sth-record{ font-size:0.8125rem;color:rgba(255,255,255,.75);font-weight:700; }
.tb-logo{ filter:drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
.tb-record{ font-weight:800;color:var(--text); }

/* =================================================================
   STANDINGS — 2K style
   ================================================================= */
.standings-table td,.standings-table th{ padding:8px 10px }
.st-team-cell{ display:flex;align-items:center;gap:10px }
.st-team-cell .tlogo,.st-team-cell .tlogo-fb{ flex-shrink:0 }
.st-team-name{ font-weight:600;font-size:0.875rem }
.st-team-name .st-city{ color:var(--muted);font-size:0.75rem;font-weight:400 }
.win-bar{ width:60px;height:6px;background:var(--card2);border-radius:var(--r-sm);overflow:hidden;display:inline-block;vertical-align:middle;margin-left:6px }
.win-bar span{ display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--accent2));border-radius:var(--r-sm) }
.standings-table tr.po td:first-child{ box-shadow:inset 3px 0 0 var(--ok, #2bd47a) }
.standings-table tr.po .st-team-name{ color:#fff }
.standings-table tr.pi td:first-child{ box-shadow:inset 3px 0 0 var(--aviso, #f5a623) }
.standings-table tr.pi .st-team-name{ color:#ffe8a0 }
/* posição highlight */
.seed-badge{ display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;font-size:0.6875rem;font-weight:800;background:var(--card2);color:var(--muted) }
.seed-badge.po{ background:rgba(43,212,122,.15);color:var(--green) }
.seed-badge.pi{ background:rgba(194,243,74,.15);color:var(--brand2) }

/* =================================================================
   SCHEDULE — match cards 2K
   ================================================================= */
.schedule-list{ display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px }
.match-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:.15s;display:block;position:relative }
.match-card:hover{ border-color:var(--brand);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.35) }
.match-card.played{ opacity:.9 }
.match-stripe{ height:4px }
.match-body{ padding:16px 14px }
.match-teams{ display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px }
.match-side{ display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 }
.match-side .ms-logo{ width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)) }
.match-side .ms-abbr{ font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:.5px }
.match-side .ms-pts{ font-family:var(--display);font-size:2rem;font-weight:700;line-height:1 }
.match-side .ms-pts.winner{ color:var(--text) }
.match-side .ms-pts.loser{ color:var(--muted) }
.match-vs{ text-align:center;font-size:0.75rem;color:var(--muted);font-weight:700;
  display:flex;flex-direction:column;align-items:center;gap:4px }
.match-vs .vs-at{ font-size:1.25rem;color:var(--muted) }
.match-footer{ border-top:1px solid var(--line);padding:8px 14px;display:flex;align-items:center;justify-content:space-between;
  font-size:0.75rem;color:var(--muted) }
.match-footer .mf-status{ font-weight:700 }
.match-footer .mf-status.live{ color:var(--brand2) }
.match-footer .mf-date{ }
.match-card.played .match-body{ }
.ot-tag{ background:var(--brand);color:#fff;font-size:0.6875rem;font-weight:800;padding:1px 5px;border-radius:var(--r-sm) }

/* =================================================================
   HOME — game cards com logos
   ================================================================= */
.games-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px }
.game-card{ background:var(--card2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 12px;transition:.15s;display:block;position:relative }
.game-card:hover{ border-color:var(--brand);transform:translateY(-2px) }
.game-card.gm-game{ border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) }
.gc-teams{ display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:8px }
.gc-side{ display:flex;flex-direction:column;align-items:center;gap:4px;flex:1 }
.gc-side img,.gc-side .tlogo-fb{ width:38px;height:38px }
.gc-abbr{ font-family:var(--display);font-size:0.8125rem;font-weight:700 }
.gc-pts{ font-family:var(--display);font-size:1.375rem;font-weight:700;line-height:1 }
.gc-pts.winner{ color:var(--text) }
.gc-pts.loser{ color:var(--muted) }
.gc-sep{ font-size:0.875rem;color:var(--muted);font-weight:700;text-align:center }
.gc-status{ text-align:center;font-size:0.6875rem;font-weight:700;color:var(--muted) }
.gc-status.pending{ color:var(--accent2) }
.gc-mine{ position:absolute;top:6px;right:8px;font-size:0.6875rem;font-weight:800;
  background:var(--brand);color:#fff;padding:1px 5px;border-radius:var(--r-sm);text-transform:uppercase }

/* =================================================================
   TEAM PAGE — hero com logo
   ================================================================= */
.team-hero-v2{ display:flex;align-items:center;gap:24px;border-radius:var(--r-lg);padding:28px 30px;
  margin-bottom:20px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.45) }
.team-hero-v2::after{ content:"";position:absolute;right:-50px;top:50%;transform:translateY(-50%);
  width:260px;height:260px;border:12px solid rgba(255,255,255,.08);border-radius:50%;pointer-events:none }
.team-hero-v2 .th-logo{ filter:drop-shadow(0 4px 16px rgba(0,0,0,.5));position:relative;z-index:1;flex-shrink:0 }
.team-hero-v2 .th-body{ position:relative;z-index:1 }
.team-hero-v2 h1{ margin:0 0 5px;font-family:var(--display);font-size:2rem;letter-spacing:1px }
.team-hero-v2 .th-meta{ font-size:0.875rem;opacity:.9 }
.team-hero-v2 .th-sub{ font-size:0.8125rem;opacity:.75;margin-top:6px }

/* =================================================================
   MANAGE — player list 2K style
   ================================================================= */
.roster-grid{ display:flex;flex-direction:column;gap:6px }
.roster-row{ display:grid;grid-template-columns:36px 1fr 52px 48px 48px 48px auto;
  align-items:center;gap:10px;background:var(--card2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:10px 14px;transition:.12s }
.roster-row:hover{ background:rgba(194,243,74,.06);border-color:rgba(194,243,74,.25) }
.roster-row.starter{ border-left:3px solid var(--green) }
.roster-row.bench{ border-left:3px solid var(--line) }
.rr-num{ font-size:0.6875rem;color:var(--muted);font-weight:800;text-align:center }
.rr-name{ font-weight:700;font-size:0.875rem }
.rr-name .rr-pos{ font-size:0.6875rem;color:var(--muted);font-weight:400;margin-left:4px }
.rr-ovr{ display:flex;align-items:center;justify-content:center }
.rr-stat{ text-align:right;font-size:0.8125rem;color:var(--muted) }
.rr-stat strong{ color:var(--text);display:block;font-size:0.875rem;font-weight:800 }
.rr-mins{ min-width:60px }
.roster-header{ display:grid;grid-template-columns:36px 1fr 52px 48px 48px 48px auto;
  gap:10px;padding:4px 14px;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:800 }

/* =================================================================
   AUTH v4 — portas de entrada com a identidade Aro Tático
   Quadra ao fundo, roxo profundo, lima como farol. As entradas são
   animadas; quem pediu menos movimento recebe tudo parado.
   ================================================================= */
.auth-body{ display:block; background:var(--bg); overflow-x:hidden; }
.auth-split{ display:flex; min-height:100vh; }

/* Painel esquerdo — a arena */
.auth-left{
  flex:0 0 480px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:60px 48px;
  background:
    radial-gradient(640px 640px at 50% -18%, rgba(194,243,74,.14), transparent 62%),
    linear-gradient(160deg,#1C1038,var(--bg));
  border-right:1px solid var(--line);
}
/* círculo central da quadra, visto de cima */
.auth-left::before{
  content:"";position:absolute;top:50%;left:-230px;transform:translateY(-50%);
  width:460px;height:460px;border:2px solid rgba(194,243,74,.08);border-radius:50%;
  box-shadow:0 0 0 90px rgba(194,243,74,.025), 0 0 0 180px rgba(194,243,74,.015);
  pointer-events:none;
}
/* garrafão estilizado no rodapé */
.auth-left .court-line{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:220px;height:110px;border:2px solid rgba(247,247,250,.05);
  border-bottom:none;border-radius:110px 110px 0 0;pointer-events:none;
}
.auth-left .court-line::after{
  content:"";position:absolute;inset:36px 36px 0;border:2px solid rgba(247,247,250,.035);
  border-bottom:none;border-radius:80px 80px 0 0;
}
.al-logo{ display:flex;align-items:center;gap:18px;margin-bottom:30px;position:relative;z-index:1; }
.al-brand{ display:flex;flex-direction:column;align-items:center; }
.al-tagline{ font-size:0.75rem;color:var(--muted);font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-top:8px; }
.al-divider{ width:54px;height:3px;background:linear-gradient(90deg,var(--brand),transparent);border-radius:var(--r-sm);margin:24px 0;position:relative;z-index:1; }
.al-features{ list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px;position:relative;z-index:1; }
.al-features li{ display:flex;align-items:center;gap:14px;font-size:0.9375rem;color:#D6CFE8;line-height:1.35; }
.al-features li .fi{
  font-size:1.0625rem;width:38px;height:38px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(194,243,74,.08);border:1px solid rgba(194,243,74,.18);border-radius:var(--r-md);
}
.al-features li strong{ color:#F7F7FA; }
.al-quote{ font-size:0.78125rem;color:#7E6CA8;font-style:italic;text-align:center;margin-top:30px;position:relative;z-index:1;max-width:300px;line-height:1.8; }

/* Painel direito — o formulário */
.auth-right{
  flex:1;display:flex;align-items:center;justify-content:center;padding:48px 32px;
  background:
    radial-gradient(760px 520px at 85% 12%, rgba(69,32,128,.45), transparent 62%),
    var(--bg);
}
.auth-form-box{
  width:100%;max-width:400px;
  background:rgba(32,20,58,.55);border:1px solid var(--line);border-radius:20px;
  padding:36px 32px;backdrop-filter:blur(10px);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.auth-form-box h1{ font-family:var(--display);font-size:1.75rem;font-weight:800;margin:0 0 6px; }
.auth-form-box>.muted{ margin:0 0 26px;font-size:0.875rem; }
.auth-field{ display:flex;flex-direction:column;gap:6px;margin-bottom:16px; }
.auth-field label{ font-size:0.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted); }
.auth-field input{
  background:rgba(20,11,38,.85);border:1.5px solid var(--line);border-radius:var(--r-md);
  color:var(--text);padding:13px 16px;font-size:0.9375rem;font-family:inherit;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.auth-field input:focus{ outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(194,243,74,.14); }
.auth-submit{ width:100%;padding:14px;font-size:0.9375rem;font-family:var(--display);font-weight:800;letter-spacing:.6px;margin-top:8px;border-radius:var(--r-md); }
.auth-links{ text-align:center;margin-top:20px;font-size:0.875rem;color:var(--muted); }
.auth-links a{ color:var(--brand2);font-weight:700; }
.auth-links a:hover{ text-decoration:underline; }
.auth-separator{ display:flex;align-items:center;gap:10px;margin:20px 0;color:#7E6CA8;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.5px; }
.auth-separator::before,.auth-separator::after{ content:"";flex:1;height:1px;background:var(--line); }

/* Entradas animadas */
@media (prefers-reduced-motion: no-preference){
  .auth-form-box{ animation:authSobe .55s cubic-bezier(.22,.8,.3,1) both; }
  .al-logo{ animation:authSobe .55s .05s cubic-bezier(.22,.8,.3,1) both; }
  .al-features li{ opacity:0;animation:authSobe .5s cubic-bezier(.22,.8,.3,1) forwards; }
  .al-features li:nth-child(1){animation-delay:.12s} .al-features li:nth-child(2){animation-delay:.19s}
  .al-features li:nth-child(3){animation-delay:.26s} .al-features li:nth-child(4){animation-delay:.33s}
  .al-features li:nth-child(5){animation-delay:.40s} .al-features li:nth-child(6){animation-delay:.47s}
  .al-quote{ opacity:0;animation:authSobe .5s .56s cubic-bezier(.22,.8,.3,1) forwards; }
  @keyframes authSobe{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
}
@media(max-width:820px){ .auth-left{display:none} .auth-right{padding:40px 20px} .auth-form-box{padding:30px 24px} }

/* =================================================================
   SAVES PAGE — game-style slot cards
   ================================================================= */
.saves-layout{ min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(1200px 600px at 50% -5%,rgba(194,243,74,.12),transparent 60%),var(--bg);
  padding:0 0 60px; }
.saves-topbar{ display:flex;align-items:center;justify-content:space-between;padding:20px 40px;
  border-bottom:1px solid rgba(255,255,255,.06); }
.saves-topbar .logo-row{ display:flex;align-items:center;gap:14px; }
.saves-topbar .logo-row img{ height:44px;filter:drop-shadow(0 0 12px rgba(194,243,74,.4)); }
.saves-topbar .logo-row span{ font-family:var(--display);font-size:1.75rem;font-weight:700;font-style:italic;
  background:linear-gradient(90deg,#fff,#ffc9d2);-webkit-background-clip:text;background-clip:text;color:transparent; }
.saves-topbar .logout-link{ font-size:0.8125rem;color:var(--muted);font-weight:600; }
.saves-topbar .logout-link:hover{ color:var(--brand2); }

.saves-body{ max-width:1000px;margin:0 auto;padding:40px 24px 0; }
.saves-title{ font-family:var(--display);font-size:2.25rem;font-weight:700;letter-spacing:1px;margin:0 0 4px; }
.saves-sub{ color:var(--muted);font-size:0.9375rem;margin:0 0 32px; }

/* Slots de save */
.slots-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:32px; }
.slot-card{ border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.08);
  background:var(--card);position:relative;transition:.18s; }
.slot-card:hover{ transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.4); }
.slot-banner{ height:80px;display:flex;align-items:center;padding:0 20px;gap:14px;position:relative;overflow:hidden; }
.slot-banner::after{ content:"";position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  width:160px;height:160px;border:10px solid rgba(255,255,255,.08);border-radius:50%;pointer-events:none; }
.slot-abbr{ font-family:var(--display);font-size:2.25rem;font-weight:700;color:rgba(255,255,255,.95);
  text-shadow:0 2px 10px rgba(0,0,0,.4);position:relative;z-index:1; }
.slot-info{ position:relative;z-index:1; }
.slot-info strong{ display:block;font-size:0.9375rem;font-weight:800;color:#fff; }
.slot-info span{ font-size:0.75rem;color:rgba(255,255,255,.7); }
.slot-body{ padding:14px 18px; }
.slot-meta{ display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px; }
.slot-meta .sm-item{ font-size:0.75rem;color:var(--muted); }
.slot-meta .sm-item strong{ color:var(--text);display:block;font-size:0.8125rem; }
.slot-actions{ display:flex;gap:8px; }
.slot-num{ position:absolute;top:12px;right:14px;font-size:0.6875rem;color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.15);border-radius:var(--r-md);padding:2px 8px;font-weight:700;z-index:2; }

/* Slot vazio (+ New) */
.slot-new{ border:2px dashed rgba(255,255,255,.12);background:rgba(255,255,255,.02);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 24px;border-radius:var(--r-lg);cursor:pointer;transition:.18s;text-align:center;min-height:200px; }
.slot-new:hover{ border-color:var(--brand);background:rgba(194,243,74,.06);transform:translateY(-2px); }
.slot-new .sn-icon{ font-size:2.25rem;margin-bottom:10px;opacity:.6; }
.slot-new .sn-label{ font-family:var(--display);font-size:1rem;font-weight:600;color:var(--muted);letter-spacing:1px; }
.slot-new:hover .sn-label{ color:var(--brand2); }

/* =================================================================
   WIZARD — criação de save (multi-step)
   ================================================================= */
.wizard-overlay{
  position:fixed;inset:0;z-index:100;overflow-y:auto;
  background:rgba(4,5,9,.96);
  display:none;
  animation:wiz-in .22s ease;
}
.wizard-overlay.open{ display:block; }
@keyframes wiz-in{ from{opacity:0}to{opacity:1} }
.wizard-inner{ max-width:880px;margin:0 auto;padding:40px 24px 80px; }

/* Barra de progresso */
.wiz-progress{ display:flex;align-items:center;margin-bottom:40px; }
.wiz-step-dot{ display:flex;align-items:center;gap:0;flex:1; }
.wiz-step-dot:last-child{ flex:0; }
.wiz-dot{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--line);
  background:var(--card2);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:0.875rem;color:var(--muted);
  flex-shrink:0;transition:.2s;cursor:default;
}
.wiz-step-dot.active .wiz-dot{ background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 16px rgba(194,243,74,.5); }
.wiz-step-dot.done .wiz-dot{ background:#10371f;border-color:var(--green);color:var(--green); }
.wiz-dot-label{ font-size:0.6875rem;font-weight:700;color:var(--muted);white-space:nowrap;margin-left:8px;text-transform:uppercase;letter-spacing:.5px; }
.wiz-step-dot.active .wiz-dot-label{ color:var(--text); }
.wiz-step-dot.done .wiz-dot-label{ color:var(--green); }
.wiz-line{ flex:1;height:2px;background:var(--line);margin:0 12px; }
.wiz-step-dot.done + .wiz-step-dot .wiz-line,
.wiz-step-dot.done .wiz-line{ background:var(--green); }

.wiz-close{ position:fixed;top:18px;right:24px;z-index:110;background:var(--card2);border:1px solid var(--line);
  color:var(--muted);border-radius:var(--r-md);padding:8px 14px;font-size:0.8125rem;font-weight:700;cursor:pointer;transition:.12s; }
.wiz-close:hover{ color:#fff;border-color:var(--brand); }

/* Step panels */
.wiz-panel{ display:none; }
.wiz-panel.active{ display:block;animation:fadeInUp .22s ease; }
.wiz-h{ font-family:var(--display);font-size:1.875rem;font-weight:700;letter-spacing:1px;margin:0 0 6px; }
.wiz-sub{ color:var(--muted);font-size:0.875rem;margin:0 0 24px;line-height:1.6; }

/* ERA cards */
.era-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:24px; }
.era-card{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);padding:20px 18px;
  cursor:pointer;transition:.15s;position:relative;overflow:hidden;
}
.era-card:hover{ border-color:rgba(194,243,74,.45);transform:translateY(-2px); }
.era-card.era-sel{ border-color:var(--brand);background:linear-gradient(135deg,rgba(194,243,74,.10),var(--card)); }
.era-card input[type=radio]{ position:absolute;opacity:0;pointer-events:none; }
.era-year{ font-family:var(--display);font-size:1.625rem;font-weight:700;color:var(--brand2);margin-bottom:4px; }
.era-nm{ font-weight:800;font-size:0.9375rem;margin-bottom:5px; }
.era-dc{ font-size:0.75rem;color:var(--muted);line-height:1.5;margin-bottom:8px; }
.era-stars{ font-size:0.6875rem;color:#7db3ff;font-weight:600; }
.era-sel-icon{ position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:0.6875rem;font-weight:800;
  display:none;align-items:center;justify-content:center; }
.era-card.era-sel .era-sel-icon{ display:flex; }
.era-badge{ position:absolute;top:12px;left:12px;background:var(--card2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:2px 7px;font-size:0.6875rem;font-weight:700;color:var(--muted); }
.era-card.era-sel .era-badge{ background:rgba(194,243,74,.15);border-color:rgba(194,243,74,.4);color:var(--brand2); }

/* Team picker */
.tp-search{ width:100%;background:#170D2B;color:var(--text);border:1px solid var(--line);
  border-radius:var(--r-md);padding:12px 14px;font-size:0.875rem;font-family:var(--ui);margin-bottom:16px;transition:.15s; }
.tp-search:focus{ outline:none;border-color:var(--brand); }
.tp-conf-label{ font-size:0.6875rem;text-transform:uppercase;letter-spacing:1.5px;color:#4a5568;
  font-weight:800;padding:10px 0 6px; }
.team-pick-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:12px; }
.team-pick-card{
  border-radius:var(--r-md);padding:12px 8px;cursor:pointer;border:2px solid transparent;
  transition:.15s;text-align:center;color:#fff;position:relative;
}
.team-pick-card:hover{ transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.4); }
.team-pick-card.tp-sel{ border-color:rgba(255,255,255,.9);box-shadow:0 0 0 3px rgba(255,255,255,.25); }
.team-pick-card input[type=radio]{ position:absolute;opacity:0;pointer-events:none; }
.tpc-abbr{ font-family:var(--display);font-size:1.25rem;font-weight:700;letter-spacing:1px;display:block; }
.tpc-city{ font-size:0.6875rem;opacity:.8;display:block;margin-top:2px;font-weight:600; }
.tpc-name{ font-size:0.6875rem;opacity:.6;display:block; }

/* GM Setup */
.gm-fields{ display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px; }
.gm-field{ display:flex;flex-direction:column;gap:5px; }
.gm-field.full{ grid-column:1/-1; }
.gm-flabel{ font-size:0.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted); }
.gm-input{ background:#170D2B;color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;font-size:0.9375rem;font-family:var(--ui);transition:.15s; }
.gm-input:focus{ outline:none;border-color:var(--brand); }
.opt-group{ margin-bottom:18px; }
.opt-group-title{ font-size:0.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:10px; }
.opt-cards{ display:flex;flex-wrap:wrap;gap:10px; }
.opt-card{ background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);
  padding:14px 16px;cursor:pointer;transition:.15s;min-width:120px;position:relative; }
.opt-card:hover{ border-color:rgba(194,243,74,.4); }
.opt-card.opt-sel{ border-color:var(--brand);background:rgba(194,243,74,.08); }
.opt-card input[type=radio]{ position:absolute;opacity:0;pointer-events:none; }
.oc-icon{ font-size:1.5rem;display:block;margin-bottom:6px; }
.oc-lbl{ font-weight:800;font-size:0.8125rem;display:block;margin-bottom:2px; }
.oc-desc{ font-size:0.6875rem;color:var(--muted);line-height:1.4; }
.opt-card.opt-sel .oc-lbl{ color:var(--brand2); }

/* Confirmação */
.confirm-banner{
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:20px;position:relative;
}
.cb-stripe{ height:8px; }
.cb-body{ padding:20px 24px;display:flex;align-items:center;gap:18px;
  background:linear-gradient(135deg,rgba(194,243,74,.10),rgba(47,123,255,.05));
  border:1px solid rgba(194,243,74,.2);border-top:none;border-radius:0 0 18px 18px; }
.cb-badge{ width:66px;height:66px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.625rem;font-weight:700;color:#fff;flex-shrink:0; }
.cb-meta h2{ font-family:var(--display);font-size:1.375rem;font-weight:700;margin:0 0 3px;letter-spacing:.5px; }
.cb-meta p{ margin:0;font-size:0.8125rem;color:var(--muted); }
.confirm-items{ display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:24px; }
.ci-box{ background:var(--card2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px; }
.ci-lbl{ font-size:0.6875rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:800;margin-bottom:4px; }
.ci-val{ font-weight:800;font-size:0.9375rem; }
.ci-val.brand{ color:var(--brand2); }

/* Wizard nav */
.wiz-nav{ display:flex;justify-content:space-between;align-items:center;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line); }
.wiz-nav .btn-lg{ min-width:130px; }
.wiz-err{ background:#3a1620;border:1px solid #7a2233;color:#ffb3bd;padding:9px 12px;
  border-radius:var(--r-sm);margin-bottom:12px;font-size:0.8125rem;display:none; }

@media(max-width:600px){
  .gm-fields{ grid-template-columns:1fr }
  .era-grid{ grid-template-columns:1fr }
  .team-pick-grid{ grid-template-columns:repeat(auto-fill,minmax(80px,1fr)) }
}

/* =================================================================
   AWARD RACE (home — corrida pelos prêmios)
   ================================================================= */
.award-race-card{ border-left:3px solid #ffd700; }
.ar-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
@media(max-width:860px){ .ar-grid{ grid-template-columns:1fr } }
.ar-cat-title{ font-size:0.6875rem;text-transform:uppercase;letter-spacing:1px;font-weight:800;
  color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:6px; }
.ar-cat-title .ar-trophy{ font-size:1rem; }
.ar-row{ display:flex;align-items:center;gap:8px;padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.04);font-size:0.875rem; }
.ar-row:last-child{ border-bottom:none; }
.ar-rank{ width:18px;font-size:0.6875rem;color:var(--muted);flex-shrink:0;font-weight:800; }
.ar-rank.gold{ color:#ffd700; }
.ar-name a{ font-weight:700; }
.ar-abbr{ color:var(--muted);font-size:0.75rem;margin-left:4px; }
.ar-val{ margin-left:auto;font-weight:800;font-family:var(--display);font-size:0.9375rem;color:var(--brand2); }
.ar-empty{ color:var(--muted);font-size:0.8125rem;padding:10px 0; }

/* =================================================================
   PLAYER PAGE — enhanced hero
   ================================================================= */
.player-hero-v2{ display:flex;align-items:stretch;gap:0;border-radius:var(--r-lg);overflow:hidden;margin-bottom:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.4); }
.ph2-color{ width:8px;flex-shrink:0; }
.ph2-body{ flex:1;display:flex;align-items:center;gap:20px;padding:24px 26px;
  background:linear-gradient(135deg,var(--s2),var(--s3)); }
.ph2-ovr{
  width:80px;height:80px;border-radius:var(--r-lg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:2.25rem;font-weight:900;
  font-family:var(--display);flex-shrink:0;
}
.ph2-ovr span{ font-size:0.6875rem;font-weight:700;opacity:.8;font-family:var(--ui); }
.ph2-info h1{ margin:0 0 5px;font-family:var(--display);font-size:1.75rem;font-weight:700;letter-spacing:.5px; }
.ph2-info .ph2-meta{ color:var(--muted);font-size:0.875rem;margin:0 0 8px; }
.ph2-badges{ display:flex;flex-wrap:wrap;gap:6px; }
.ph2-badge{ background:var(--card2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:3px 10px;font-size:0.75rem;font-weight:700; }
.ph2-badge.rookie{ background:rgba(123,47,247,.2);border-color:rgba(123,47,247,.5);color:#c09aff; }
.ph2-badge.injured{ background:var(--perigo-bg);border-color:var(--perigo-borda);color:var(--perigo); }
.ph2-badge.potential{ background:rgba(43,212,122,.1);border-color:rgba(43,212,122,.3);color:var(--green); }
.ph2-right{ padding:24px 26px;background:linear-gradient(135deg,#170D2B,#19102C);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:130px; }
.ph2-awards{ display:flex;flex-wrap:wrap;gap:6px;justify-content:center; }
.ph2-award{ background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.3);border-radius:var(--r-sm);
  padding:3px 9px;font-size:0.6875rem;font-weight:700;color:#ffd700; }
.ph2-gp{ font-family:var(--display);font-size:1.75rem;font-weight:700;color:var(--text); }
.ph2-gp-lbl{ font-size:0.6875rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px; }

/* career history table */
.career-table th{ text-align:left;color:var(--muted);font-size:0.6875rem;text-transform:uppercase;
  letter-spacing:.5px;padding:6px 8px;border-bottom:1px solid var(--line); }
.career-table td{ padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04);font-size:0.875rem; }
.career-table .highlight td{ font-weight:700; }

/* =================================================================
   FOTOS DE JOGADORES
   ================================================================= */
.ph2-photo{ position:relative;z-index:2;flex-shrink:0; }
.player-photo{ object-fit:cover;display:block; }
.player-photo-hero{ width:8.75rem;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:var(--r-md) 12px 0 0;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.7)); }
.player-photo-lg{ width:6rem;aspect-ratio:96/70;height:auto;object-fit:cover;border-radius:var(--r-sm);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.player-photo-md{ width:4rem;aspect-ratio:1;height:auto;object-fit:cover;border-radius:50%;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.player-photo-sm{ width:2.5rem;aspect-ratio:1;height:auto;object-fit:cover;border-radius:50%; }

/* Hero v2 com foto */
.player-hero-v2{ display:flex;align-items:flex-end;gap:20px;padding:28px 28px 24px;
  border-radius:var(--r-lg);position:relative;overflow:hidden;margin-bottom:20px; }
.ph2-color{ position:absolute;inset:0;opacity:.18; }
.ph2-photo{ margin-bottom:-4px; }

/* Trade player cards */
.trade-player-card{ display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:var(--r-md);background:var(--card2);border:2px solid transparent;cursor:pointer;
  transition:all .15s;margin-bottom:6px; }
.trade-player-card:hover{ border-color:rgba(255,255,255,.15); }
.trade-player-card.selected{ border-color:var(--brand);background:rgba(194,243,74,.1); }
.trade-player-card input[type=checkbox]{ display:none; }
.tpc-photo{ width:2.75rem;aspect-ratio:1;height:auto;border-radius:50%;object-fit:cover;flex-shrink:0; }
.tpc-info{ flex:1;min-width:0; }
.tpc-name{ font-size:0.875rem;font-weight:700;color:var(--text);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.tpc-meta{ font-size:0.75rem;color:var(--muted); }
.tpc-ovr{ font-family:var(--display);font-size:1.125rem;font-weight:800;flex-shrink:0; }
.tpc-check{ width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.6875rem; }
.trade-player-card.selected .tpc-check{ background:var(--brand);border-color:var(--brand); }

/* Trade page layout */
.trade-page{ display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start; }
.trade-col-header{ display:flex;align-items:center;gap:10px;margin-bottom:14px; }
.trade-col-title{ font-family:var(--display);font-size:1rem;font-weight:700;color:var(--text); }
.trade-col-record{ font-size:0.75rem;color:var(--muted);font-weight:600; }
.trade-arrows{ display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:0 8px;margin-top:60px; }
.trade-arrow{ font-size:1.75rem;color:var(--muted); }

/* Trade summary / contraproposta */
.trade-summary{ border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);padding:18px;margin-top:16px; }
.trade-summary-title{ font-size:0.8125rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  color:var(--muted);margin-bottom:12px; }
.trade-value-bars{ display:flex;gap:8px;align-items:center;margin-bottom:10px; }
.tvb-label{ font-size:0.75rem;color:var(--muted);width:50px;text-align:right; }
.tvb-bar{ flex:1;height:8px;border-radius:var(--r-sm);background:var(--card2);overflow:hidden; }
.tvb-fill{ height:100%;border-radius:var(--r-sm);transition:width .3s; }
.tvb-num{ font-size:0.75rem;font-weight:700;width:36px; }
.trade-verdict{ text-align:center;padding:12px;border-radius:var(--r-sm);font-weight:700;margin-top:8px; }
.trade-verdict.fair{ background:rgba(43,212,122,.1);color:var(--green);border:1px solid rgba(43,212,122,.2); }
.trade-verdict.unfair{ background:rgba(194,243,74,.1);color:var(--brand2);border:1px solid rgba(194,243,74,.2); }
.trade-verdict.neutral{ background:rgba(255,166,35,.1);color:#f5a623;border:1px solid rgba(255,166,35,.2); }

/* Counter proposal box */
.counter-box{ border-radius:var(--r-md);background:var(--card);border:1px solid rgba(255,166,35,.3);
  padding:16px;margin-top:12px; }
.counter-title{ font-size:0.8125rem;font-weight:800;color:#f5a623;margin-bottom:10px;
  display:flex;align-items:center;gap:6px; }
.counter-players{ display:flex;gap:8px;flex-wrap:wrap; }
.counter-chip{ background:var(--card2);border-radius:var(--r-sm);padding:6px 10px;font-size:0.8125rem;
  font-weight:700;border:1px solid rgba(255,166,35,.2); }

/* =================================================================
   SIDEBAR REDESIGN v3 — "game UI"
   ================================================================= */

/* Container */
.sidebar{
  background:#07090f;
  border-right:1px solid rgba(255,255,255,.06);
  position:relative;
}
/* Thin brand accent line at the very top */
.sidebar::before{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--brand) 0%,rgba(194,243,74,.3) 60%,transparent 100%);
  position:absolute;top:0;left:0;right:0;
}

/* Logo */
.logo{
  padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-top:3px; /* push below accent line */
}
.logo .logo-txt{
  font-size:1.5rem;letter-spacing:2px;
  background:linear-gradient(90deg,#fff 40%,rgba(255,180,190,.6));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Team hero */
.side-team-hero{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px 14px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;overflow:hidden;
}
/* Large watermark abbr */
.side-team-hero::after{
  content:attr(data-abbr);
  position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-size:4.5rem;font-weight:900;
  color:rgba(255,255,255,.055);letter-spacing:-3px;
  pointer-events:none;line-height:1;
}
.sth-logo{ position:relative;z-index:1;filter:drop-shadow(0 3px 10px rgba(0,0,0,.6)); }
.sth-info{ display:flex;flex-direction:column;gap:1px;position:relative;z-index:1;min-width:0; }
.sth-city{
  font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  color:rgba(255,255,255,.55);line-height:1.2;
}
.sth-abbr{
  font-family:var(--display);font-size:1rem;font-weight:700;color:#fff;
  line-height:1.1;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sth-record{
  font-size:0.6875rem;font-weight:700;color:rgba(255,255,255,.55);
  letter-spacing:.5px;margin-top:2px;
}

/* Nav */
.side-nav{ flex:1;overflow-y:auto;padding:8px 10px 12px;scrollbar-width:none; }
.side-nav::-webkit-scrollbar{ display:none; }

.nav-group{
  display:flex;align-items:center;gap:8px;
  font-size:0.6875rem;font-weight:800;text-transform:uppercase;
  letter-spacing:2px;color:rgba(194,243,74,.7);
  padding:14px 6px 6px;
}
.nav-group::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(194,243,74,.25),transparent);
}

.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:8px 11px;border-radius:var(--r-sm);
  color:#6e7d96;font-size:0.84375rem;font-weight:600;
  transition:background .15s,color .15s;
  margin-bottom:1px;position:relative;
}
.nav-item:hover{ background:rgba(255,255,255,.05);color:#c8d0de; }

.nav-item .ni-ic{
  width:18px;text-align:center;font-size:0.8125rem;
  flex-shrink:0;color:#4a5568;font-style:normal;font-weight:900;
  font-family:'Segoe UI Symbol',system-ui,sans-serif;
  transition:color .15s;
}
.nav-item:hover .ni-ic{ color:#A79CC2; }

.nav-item.active{
  background:rgba(194,243,74,.1);
  color:#fff;font-weight:700;
}
.nav-item.active .ni-ic{ color:var(--brand2); }
.nav-item.active::before{
  content:"";position:absolute;
  left:0;top:5px;bottom:5px;width:3px;
  border-radius:0 3px 3px 0;
  background:var(--brand);
  box-shadow:0 0 10px rgba(194,243,74,.7);
}

/* Footer */
.side-foot{
  border-top:1px solid rgba(255,255,255,.06);
  padding:12px 12px 14px;
  display:flex;flex-direction:column;gap:8px;
}
.sf-user-chip{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-md);padding:8px 12px;
}
.sf-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),#7a0018);
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:800;color:#fff;
}
.sf-username{ font-size:0.8125rem;font-weight:700;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sf-links{ display:flex;gap:6px; }
.sf-link{
  flex:1;font-size:0.75rem;font-weight:600;color:var(--muted);
  padding:6px 8px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  text-align:center;transition:all .15s;
}
.sf-link:hover{ background:rgba(255,255,255,.09);color:#fff; }
.sf-logout:hover{ background:rgba(194,243,74,.15);color:var(--brand2);border-color:rgba(194,243,74,.25); }

/* Mobile override — keep old behavior */
@media(max-width:700px){
  .sidebar::before{ display:none; }
  .side-team-hero::after{ display:none; }
  .sth-city{ display:none; }
  .sf-user-chip{ display:none; }
  .sf-links{ flex-direction:row; }
  .side-foot{ flex-direction:row;border-top:none;border-left:1px solid rgba(255,255,255,.06);padding:8px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   COACH CARD
   ══════════════════════════════════════════════════════════════════════ */
.coach-card{ margin-bottom:20px; }

.coach-form{ display:flex;flex-direction:column;gap:14px; }

.coach-identity{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.03);border-radius:var(--r-md);padding:14px;
  border:1px solid rgba(255,255,255,.07);
}
.coach-avatar{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),#7a0018);
  display:flex;align-items:center;justify-content:center;
  font-size:1.375rem;font-weight:900;color:#fff;letter-spacing:-1px;
}
.coach-name-input{
  font-size:1.125rem;font-weight:800;color:var(--text);
  background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.15);
  padding:2px 0;width:100%;outline:none;transition:border-color .15s;
}
.coach-name-input:focus{ border-bottom-color:var(--brand); }
.coach-record{ font-size:0.75rem;color:var(--muted);margin-top:4px; }

.coach-attrs{ display:flex;flex-direction:column;gap:8px; }

.coach-attr-row{
  display:grid;
  grid-template-columns:24px 140px 1fr 48px;
  align-items:center;gap:8px;
}
.car-icon{ font-size:1rem;text-align:center; }
.car-label{ font-size:0.8125rem;font-weight:700;color:var(--muted2); }

.car-bar{
  height:8px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);overflow:hidden;
}
.car-fill{
  height:100%;border-radius:var(--r-sm);
  transition:width .3s;
}
.attr-elite{ background:linear-gradient(90deg,#C2F34A,#ff4d6d); }
.attr-good { background:linear-gradient(90deg,#f5a623,#ffcc66); }
.attr-low  { background:linear-gradient(90deg,#4a5568,#6b7280); }

.car-num{
  width:44px;text-align:center;
  font-size:0.8125rem;font-weight:800;color:var(--text);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);padding:3px 0;
}
.car-num:focus{ outline:none;border-color:var(--brand); }

/* ═══════════════════════════════════════════════════════════════════════
   LINEUP PAGE — Escalação visual
   ══════════════════════════════════════════════════════════════════════ */

/* Section tag bar */
.section-tag-bar{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 12px;
}

/* Court: 5 slots em linha */
.lineup-court{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin-bottom:20px;
}
@media(max-width:900px){
  .lineup-court{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:600px){
  .lineup-court{ grid-template-columns:repeat(2,1fr); }
}

/* Cada slot de posição */
.lineup-slot{
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);
  padding:14px 10px 12px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;transition:all .2s;
  position:relative;
  text-decoration:none;
}
.lineup-slot:hover{ background:rgba(255,255,255,.07);border-color:rgba(194,243,74,.3); }
.lineup-slot.empty{ opacity:.5;cursor:default; }

.ls-pos-badge{
  font-size:0.6875rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--brand2);background:rgba(194,243,74,.12);
  border:1px solid rgba(194,243,74,.25);
  border-radius:20px;padding:2px 10px;
  align-self:flex-start;
}

.ls-face{ position:relative; }
.ls-photo{
  width:4.5rem!important;aspect-ratio:1;height:auto!important;
  border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.12);
}
.ls-inj-badge{
  position:absolute;bottom:-2px;right:-2px;
  font-size:0.875rem;background:var(--bg);border-radius:50%;padding:1px;
}

.ls-info{ text-align:center;width:100%; }
.ls-name{
  display:block;font-size:0.8125rem;font-weight:800;color:var(--text);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ls-name:hover{ color:var(--brand2); }
.ls-pos-name{ display:block;font-size:0.6875rem;color:var(--muted);margin-top:1px; }
.ls-stats-row{ display:flex;justify-content:center;gap:6px;margin-top:5px;align-items:center; }
.ls-stat{ font-size:0.6875rem;color:var(--muted); }
.ls-morale{ font-size:0.6875rem;margin-top:3px; }
.ls-empty-msg{ font-size:0.75rem;color:var(--muted);text-align:center;padding:10px 0; }

.ls-actions{
  display:flex;gap:5px;width:100%;justify-content:center;
  opacity:0;transition:opacity .15s;
}
.lineup-slot:hover .ls-actions{ opacity:1; }
.ls-btn{
  width:28px;height:28px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;font-size:0.875rem;
  transition:background .15s;text-decoration:none;
}
.ls-btn:hover{ background:rgba(194,243,74,.2);border-color:rgba(194,243,74,.4); }

/* ─── Bench ──────────────────────────────────────────────────────────── */
.bench-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:8px;
}
.bench-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-md);padding:10px 12px;
  display:flex;align-items:center;gap:10px;
  transition:background .15s;
}
.bench-card:hover{ background:rgba(255,255,255,.06); }
.bench-card.bench-injured{ opacity:.55; }
.bc-face{ position:relative;flex-shrink:0; }
.bc-photo{
  width:3rem!important;aspect-ratio:1;height:auto!important;
  border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(255,255,255,.1);
}
.bc-inj{
  position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  font-size:0.6875rem;background:rgba(245,72,49,.9);color:#fff;
  border-radius:var(--r-sm);padding:0 4px;white-space:nowrap;font-weight:700;
}
.bc-info{ flex:1;min-width:0; }
.bc-name{
  display:block;font-size:0.8125rem;font-weight:700;color:var(--text);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bc-name:hover{ color:var(--brand2); }
.bc-pos{ font-size:0.6875rem;color:var(--muted); }
.bc-row{ display:flex;align-items:center;gap:6px;margin-top:4px; }
.bc-ppg{ font-size:0.6875rem;color:var(--muted); }
.bc-morale{ font-size:0.75rem; }
.bc-btns{ display:flex;flex-direction:column;gap:4px; }
.bc-btn{
  width:26px;height:26px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;font-size:0.75rem;
  transition:background .15s;text-decoration:none;
}
.bc-btn:hover{ background:rgba(194,243,74,.2); }

/* ─── Minutagem ──────────────────────────────────────────────────────── */
.minutes-grid{ display:flex;flex-direction:column;gap:6px; }
.min-row{
  display:grid;
  grid-template-columns:40px 1fr auto;
  align-items:center;gap:10px;
  padding:6px 8px;border-radius:var(--r-md);
  transition:background .15s;
}
.min-row:hover{ background:rgba(255,255,255,.04); }
.min-row.min-injured{ opacity:.5; }
.min-face{
  width:40px!important;height:40px!important;
  border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.1);
}
.min-info{ min-width:0; }
.min-name{
  display:block;font-size:0.8125rem;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.min-pos{ font-size:0.6875rem;color:var(--muted); }
.min-ctrl{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.min-starter{ accent-color:var(--brand); }
.min-input{
  width:46px;text-align:center;
  font-size:0.8125rem;font-weight:800;color:var(--text);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);padding:4px 0;
}
.min-input:focus{ outline:none;border-color:var(--brand); }
.min-bar-wrap{
  width:60px;height:6px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);overflow:hidden;
}
.min-bar-fill{ height:100%;border-radius:var(--r-sm);transition:width .2s; }

/* ─── Modal de jogador ────────────────────────────────────────────────── */
.player-modal{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.pm-box{
  background:var(--surface);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:24px;width:320px;max-width:95vw;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.pm-close{
  position:absolute;top:12px;right:14px;
  background:none;border:none;color:var(--muted);font-size:1.125rem;cursor:pointer;
  transition:color .15s;
}
.pm-close:hover{ color:var(--brand2); }
.pm-hero{ display:flex;align-items:center;gap:14px;margin-bottom:16px; }
.pm-face{
  width:72px;height:72px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(194,243,74,.4);flex-shrink:0;
}
.pm-pname{ font-size:1.125rem;font-weight:900;color:var(--text); }
.pm-pmeta{ font-size:0.75rem;color:var(--muted);margin-top:2px; }
.pm-morale{ font-size:0.75rem;color:var(--muted2);margin-top:4px; }
.pm-attrs{ display:flex;flex-direction:column;gap:6px;margin-bottom:16px; }
.pm-attr{ display:grid;grid-template-columns:120px 1fr 30px;align-items:center;gap:8px; }
.pm-al{ font-size:0.75rem;font-weight:700;color:var(--muted2); }
.pm-abar{
  height:6px;border-radius:var(--r-sm);background:rgba(255,255,255,.07);overflow:hidden;
}
.pm-abar div{ height:100%;border-radius:var(--r-sm);transition:width .3s; }
.pm-av{ font-size:0.75rem;font-weight:800;color:var(--text); }
.pm-actions{ display:flex;flex-direction:column;gap:8px; }
.pm-btn{
  padding:10px 14px;border-radius:var(--r-md);font-size:0.8125rem;font-weight:700;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:var(--text);text-decoration:none;text-align:center;
  transition:all .15s;display:block;
}
.pm-btn:hover{ background:rgba(255,255,255,.12); }
.pm-view{ background:rgba(194,243,74,.1);border-color:rgba(194,243,74,.3);color:var(--brand2); }
.pm-view:hover{ background:rgba(194,243,74,.2); }

/* Faces inline no roster row (manage.php) */
.rr-face{
  width:2.25rem!important;aspect-ratio:1;height:auto!important;
  border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(255,255,255,.1);flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════════════════
   TEAMS PAGE — Todos os Times
   ══════════════════════════════════════════════════════════════════════ */

/* Topbar */
/* .teams-topbar saiu: existia só para segurar título e busca lado a lado,
   e o cabeçalho de página (.ph) faz isso agora. */
.teams-search-form{ display:flex;align-items:center;gap:8px; }
.teams-search-input{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);padding:8px 14px;font-size:0.8125rem;color:var(--text);
  width:min(220px, 48vw);outline:none;transition:border-color .15s;
}
.teams-search-input:focus{ border-color:var(--brand); }
.teams-search-input::placeholder{ color:var(--muted); }

/* Layout: sidebar + main */
.teams-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:16px;
  align-items:start;
}
@media(max-width:900px){
  .teams-layout{ grid-template-columns:1fr; }
}

/* Sidebar de times */
.teams-sidebar{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg);overflow:hidden;
  position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;
}
.teams-sidebar::-webkit-scrollbar{ width:4px; }
.teams-sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1);border-radius:var(--r-sm); }

.ts-conf-header{
  font-size:0.6875rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);padding:10px 12px 6px;
  background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.05);
  position:sticky;top:0;z-index:2;
}

.ts-team-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .12s;
}
.ts-team-row:hover{ background:rgba(255,255,255,.06); }
.ts-team-row.active{
  background:rgba(194,243,74,.1);
  border-left:3px solid var(--brand);
}
.tsr-info{ flex:1;min-width:0; }
.tsr-name{
  display:block;font-size:0.8125rem;font-weight:800;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tsr-full{ display:none; } /* hidden in compact sidebar */
.tsr-record{ text-align:right;flex-shrink:0; }
.tsr-wl{ font-size:0.75rem;font-weight:700;color:var(--muted2); }
.tsr-seed{
  display:block;font-size:0.6875rem;color:var(--brand2);font-weight:800;
}

/* Main panel */
.teams-main{ min-width:0; }

/* Tabela com scroll horizontal */
.table-scroll{ overflow-x:auto; }
.teams-roster-table{ min-width:700px; }

/* Sort headers */
.sort-th{
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:color .15s;
}
.sort-th:hover{ color:#fff; }
.sort-active{ color:var(--brand2)!important; }
.sort-arrow{ font-size:0.6875rem;opacity:.7; }

/* Row de jogador lesionado */
.inj-row td{ opacity:.6; }
.inj-row .badge-inj{ opacity:1; }

/* Face redonda mini */
.face-mini-round{
  width:2.25rem!important;aspect-ratio:1;height:auto!important;
  border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(255,255,255,.1);
  display:block;
}

/* Stats coloridas */
.stat-hot{ color:#f5a623;font-weight:800; }
.stat-good{ color:#9bffc0;font-weight:700; }

/* Resumo do time */
.team-summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:12px;
}
.tsm-item{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-md);padding:12px;text-align:center;
}
.tsm-val{ display:block;font-size:1.375rem;font-weight:900;color:var(--text); }
.tsm-lbl{ display:block;font-size:0.6875rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-top:2px; }

/* =================================================================
   DC REDESIGN — TOP NAV LAYOUT
   ================================================================= */

/* AS FONTES SAÍRAM DAQUI, e isto é a correção de um erro antigo.
   Este bloco redeclarava `--display` e `--ui` — a MESMA dupla de variáveis
   já declarada lá em cima. Como ele vem depois, ele vencia: eu troquei a
   tipografia no bloco de tokens e nada mudou nos títulos, porque esta
   segunda declaração continuava mandando. É exatamente o modo de falha que
   o comentário do próprio arquivo já descreve em outro lugar — duas listas
   para a mesma coisa, e a segunda ganha em silêncio.
   Agora a fonte tem UM lugar só. `tests/interface.php` reprova se Baloo ou
   Nunito reaparecerem em qualquer arquivo de CSS. */
:root {
  --sidebar:0px; /* reset court circle offset */
}
body { font-family:var(--ui)!important; }
/* A condensada de placar nos destaques numéricos e títulos */
.page-title,.card-head h2,.ab-name,.sb-abbr,.sb-score,.sb-clock,
.team-hero .th-abbr,.team-hero h1,.tb-team,.cta-btn,.hero h1,.ovr,
.ph2-ovr,.cap-box span,.tsm-val,.tn-rec-num,.gc-pts,.match-side .ms-pts,
.gcpts,.gc-abbr,.match-side .ms-abbr,.wiz-h,.ar-val,.ph2-gp,
.draft-status,.slot-abbr,.era-year,.tpc-abbr,.tpc-ovr,.sth-abbr {
  font-family:var(--display)!important;
}

/* 2. App shell */
.fba-app {
  display:flex;
  flex-direction:column;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
}

/* 3. TOP NAV (barra de identidade: brand + centro + record/user) */
.top-nav {
  height:48px;
  flex:none;
  background:var(--s2);                               /* era #190F2F */
  border-bottom:1px solid hsl(var(--matiz),52%,16.5%); /* era #221440 */
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:0;
  position:sticky;
  top:0;
  z-index:100;
  justify-content:space-between;
}
/* Red accent line at top of nav */
.top-nav::before {
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--brand) 0%,rgba(194,243,74,.25) 60%,transparent 100%);
}

/* Centro: fase + data */
.tn-center {
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  justify-content:center;
}
.tn-phase-pill {
  font-size:0.6875rem;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--muted);
  background:hsl(var(--matiz),52%,16.5%);
  border:1px solid #3A2660;
  border-radius:var(--r-sm);
  padding:2px 7px;
}
.tn-phase-pill.phase-regular { color:#B0A5CC; }
.tn-phase-pill.phase-playoffs,.tn-phase-pill.phase-playin { color:var(--brand2); border-color:rgba(194,243,74,.35); }
.tn-phase-pill.phase-offseason,.tn-phase-pill.phase-freeagency { color:var(--green); border-color:rgba(43,212,122,.3); }
.tn-date-txt {
  font-size:0.6875rem;
  color:var(--muted);
}
/* O bloco central inteiro sumia no celular. Fazia sentido quando ele só
   tinha fase e data — mas agora carrega o próximo jogo, que é o item mais
   acionável da barra. O que sai no celular é a data (§3), não o bloco. */
@media(max-width:640px) { .tn-center { display:flex; } }

/* Brand block */
.tn-brand {
  display:flex;
  align-items:center;
  gap:9px;
  padding-right:14px;
  border-right:1px solid var(--line);
  flex:none;
  min-width:0;
}
.tn-logo { flex-shrink:0; }
.tn-logo-link {
  display:flex;align-items:center;gap:8px;color:var(--text);
}
.tn-brand-name {
  font-family:var(--display)!important;
  font-size:1.125rem;font-weight:800;letter-spacing:1px;
}
.tn-brand-txt { min-width:0; }
.tn-team-name {
  font-family:var(--display)!important;
  font-size:0.8125rem;font-weight:800;letter-spacing:.5px;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;
  color:var(--text);
}
.tn-gm-sub {
  font-size:0.6875rem;color:var(--brand2);letter-spacing:1.5px;font-weight:700;
  text-transform:uppercase;
}

/* Tabs dentro do top-nav (legado — não mais usadas) */
.tn-tabs { display:none !important; }

/* ── NAV TABS BAR — barra de navegação dedicada ── */
.nav-tabs-bar {
  background:var(--card2);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:stretch;
  height:38px;
  overflow-x:auto;
  padding:0 10px;
  scrollbar-width:none;
  flex:none;
  /* sticky abaixo do top-nav */
  position:sticky;
  top:48px;
  z-index:99;
}
.nav-tabs-bar::-webkit-scrollbar { display:none; }

.tn-tab {
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--muted);
  font-family:var(--ui)!important;
  font-size:0.71875rem;
  font-weight:600;
  padding:0 11px;
  cursor:pointer;
  white-space:nowrap;
  transition:color .12s;
  text-decoration:none;
  display:flex;
  align-items:center;
  line-height:1;
  flex:none;
}
.tn-tab:hover { color:#CFC7E2; }
.tn-tab.active {
  border-bottom-color:var(--brand);
  color:#fff;
  font-weight:700;
}

/* Right block */
.tn-right {
  display:flex;
  align-items:center;
  gap:12px;
  flex:none;
  padding-left:12px;
  border-left:1px solid var(--line);
}
.tn-record { text-align:right; }
.tn-rec-num {
  font-size:1rem;font-weight:700;color:var(--brand2);line-height:1.1;
}
.tn-rec-sub {
  font-size:0.6875rem;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;
  white-space:nowrap;
}
.tn-user-acts {
  display:flex;align-items:center;gap:8px;
}
.tn-avatar {
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),#6B3FBF);color:#fff;
  font-size:0.6875rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.tn-act {
  font-size:0.6875rem;color:var(--muted);font-weight:600;
}
.tn-act:hover { color:var(--text); }
.tn-logout { color:rgba(194,243,74,.55); }
.tn-logout:hover { color:var(--brand2); }

/* Mobile-tabs e season-strip: removidos da estrutura */
.mobile-tabs { display:none !important; }
.season-strip { display:none !important; }

/* App body scroll container */
.app-body {
  flex:1;
  overflow-y:auto;
}

/* Container — full width without sidebar offset */
.container {
  max-width:1400px !important;
  padding:22px 24px 48px !important;
  margin:0 auto;
}
/* Remove the court-circle sidebar offset */
.container::before {
  left:50% !important;
}

/* Slightly tighter cards */
.card {
  border-radius:var(--r-md) !important;
}

/* Responsive */
@media (max-width:640px) {
  .top-nav { padding:0 10px; }
  .nav-tabs-bar { padding:0 4px; }
  .tn-tab { font-size:0.6875rem; padding:0 9px; }
  .container { padding:12px 10px 40px !important; }
}
@media (max-width:400px) {
  .tn-team-name { max-width:110px; }
  .tn-rec-sub { display:none; }
}

/* Fix: old .app/.main/.sidebar no longer rendered — just in case */
.app { all:unset; }
.main { all:unset; }

/* =================================================================
   DC REDESIGN v2 — Dashboard & card grid refinements
   ================================================================= */

/* Dashboard 4-col on wide desktop, 2-col on medium, 1-col mobile */
.dashboard {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1100px) {
  .dashboard { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .dashboard { grid-template-columns: 1fr !important; }
}

/* Season strip: hide if empty */
.season-strip:empty { display:none; }

/* Topbar — keep existing styles from topbar but it's now gone from HTML,
   these declarations are dead but harmless. Reset any layout influence. */
.topbar { display:none !important; }

/* =================================================================
   GAME PAGE — lineups preview + stats layout
   ================================================================= */
.game-lineups {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media(max-width:640px) { .game-lineups { grid-template-columns:1fr; } }
.gl-header {
  padding:6px 10px;
  border-radius:var(--r-sm) 0 0 6px;
  background:rgba(255,255,255,.03);
  margin-bottom:2px;
}

/* =================================================================
   DC REDESIGN v3 — palette, cards, typography, buttons, tables
   ================================================================= */

/* ─ Palette override (exact DC colors) ─ */
:root {
  /* Este bloco redefinia a paleta inteira com cores literais, o que
     anulava a escala medida e impedia a matiz por seção de funcionar:
     o cartão saía igual em todas as áreas. Agora aponta para a escala.
     Em 260° as cores são as mesmas de antes — o que muda é que giram. */
  --bg:var(--s1);                     /* antes 140B26 — é --s1 exato          */
  --card:var(--s3);                   /* unificado na escala neutra           */
  --card2:var(--s3);                  /* antes 20143A — é --s3 exato          */
  --text:var(--t1);                   /* antes f0f0f0 — t1 é um pouco melhor  */
  --muted:var(--t4);                  /* antes 8F82B0 (5,05:1); t4 dá 5,31:1  */
}

/* ─ Flat cards ─ */
.card {
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  padding:15px !important;
  box-shadow:none !important;
}

/* Título de seção: era 9px !important, ou seja, menor que rótulo de selo.
   Título é estrutura, não etiqueta — ver docs/INTERFACE.md §0 e §5. */
.card-head h2 {
  font-size:0.78125rem !important;
  font-weight:700 !important;
  letter-spacing:.8px !important;
  color:var(--muted) !important;
  text-transform:uppercase !important;
  padding-left:0 !important;
  font-family:var(--ui) !important;
}
.card-head h2::before { display:none !important; }

/* ─ Page titles keep large Barlow size ─ */
h1.page-title {
  font-size:1.25rem !important;
  color:var(--text) !important;
  font-family:var(--display) !important;
}

/* ─ Buttons: compact, 5px radius ─ */
.btn {
  border-radius:var(--r-sm) !important;
  font-size:0.6875rem !important;
  padding:6px 11px !important;
  font-family:var(--ui) !important;
}
.btn-sm {
  font-size:0.75rem !important;
  padding:3px 7px !important;
}
.btn-lg {
  font-size:0.8125rem !important;
  padding:10px 20px !important;
}
.btn-primary {
  background:var(--brand) !important;
  background-image:none !important;
  border-color:var(--brand) !important;
  box-shadow:none !important;
}

/* ─ Table: compact headers + rows ─ */
/* 9px era ilegível e o !important impedia correção sem escalar. */
.standings-table th,.box-table th,.mini-table th,table thead th {
  font-size:0.6875rem;
  color:var(--t4);
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:9px 10px;
}
/* Era 12px com !important, o que obrigava qualquer ajuste a escalar outro
   !important — a escalada que torna uma folha de estilo impossível de
   manter. Os valores voltam a ser normais e ficam na regra única de
   tabelas, lá embaixo. 13.5px é o piso do estudo para dado operacional. */
.standings-table td,.box-table td,.mini-table td,table tbody td {
  font-size:0.84375rem;
  padding:9px 10px;
}

/* ─ OVR + grade badges ─ */
.ovr { font-size:0.6875rem !important; padding:2px 5px !important; border-radius:var(--r-sm) !important; }
.grade { font-size:0.6875rem !important; padding:1px 5px !important; border-radius:var(--r-sm) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DC GM DASHBOARD — 4 compact stat cards row
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dc-dash-top {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:12px;
}
@media(max-width:900px) { .dc-dash-top { grid-template-columns:repeat(2,1fr); } }

.dc-stat-card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:15px;
}
.dc-stat-card.dc-next {
  border-color:var(--brand);
  border-top:2px solid var(--brand);
}
.dc-sc-label {
  font-size:0.6875rem;color:var(--muted);letter-spacing:.8px;
  text-transform:uppercase;margin-bottom:5px;
}
.dc-sc-num {
  font-family:var(--display)!important;
  font-size:1.875rem;font-weight:800;
  color:var(--brand2);line-height:1;
}
.dc-sc-sub { font-size:0.6875rem;color:var(--muted);margin-top:3px; }
.dc-sc-next-title { font-size:0.8125rem;font-weight:700;color:var(--text);line-height:1.2; }
.dc-sc-next-date { font-size:0.6875rem;color:var(--brand2);margin-top:4px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DC GM DASHBOARD — 3-col middle row
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dc-dash-mid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:16px;
}
@media(max-width:900px) { .dc-dash-mid { grid-template-columns:1fr 1fr; } }
@media(max-width:580px) { .dc-dash-mid { grid-template-columns:1fr; } }

.dc-mid-card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:15px;
}
.dc-mid-label {
  font-size:0.6875rem;color:var(--muted);letter-spacing:.8px;
  text-transform:uppercase;margin-bottom:10px;
}

/* top performers */
.dc-perf-row {
  display:flex;align-items:center;
  justify-content:space-between;
  padding:6px 0;border-bottom:1px solid var(--line);
}
.dc-perf-row:last-child { border-bottom:none; }
.dc-pr-name { font-size:0.75rem;font-weight:600;color:var(--text); }
.dc-pr-pos  { font-size:0.6875rem;color:var(--muted); }
.dc-pr-stat { font-size:0.9375rem;font-weight:700;color:var(--brand2);font-family:var(--display); }
.dc-pr-lbl  { font-size:0.6875rem;color:var(--muted);text-align:right; }

/* form badges */
.dc-form-row { display:flex;gap:5px;margin-bottom:10px; }
.dc-fb {
  width:30px;height:30px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:700;
  font-family:var(--display);
}
.dc-fb-w { background:var(--ok-bg);color:var(--ok); }
.dc-fb-l { background:var(--perigo-bg);color:var(--perigo); }
.dc-form-stats { font-size:0.6875rem;color:var(--muted); }
.dc-form-stats span { display:block;margin-top:2px; }

/* alerts */
.dc-alert-row {
  display:flex;align-items:flex-start;gap:7px;
  padding:5px 0;border-bottom:1px solid var(--line);
}
.dc-alert-row:last-child { border-bottom:none; }
.dc-ar-icon  { font-size:0.8125rem;flex:none;margin-top:1px; }
.dc-ar-title { font-size:0.6875rem;font-weight:500; }
.dc-ar-sub   { font-size:0.6875rem;color:var(--muted);margin-top:1px; }

/* storylines / narrativa */
.dc-story {
  display:flex;align-items:flex-start;gap:8px;
  padding:7px 0;border-bottom:1px solid var(--line);
  font-size:0.6875rem;line-height:1.35;color:#CFC7E2;
}
.dc-story:last-child { border-bottom:none; }
.dc-story-bar {
  width:3px;align-self:stretch;border-radius:var(--r-sm);flex:none;
  background:var(--team-primary,var(--brand));min-height:14px;
}

/* ═══════════════════════════════════════════════════════════
   GM COMMAND CENTER — hero imersivo (cores do time)
   ═══════════════════════════════════════════════════════════ */
.gm-hero {
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  margin-bottom:14px;
  background:var(--card2);
}
/* fundo em gradiente com as cores do time + textura de quadra */
.gm-hero-bg {
  position:absolute;inset:0;
  background:
    radial-gradient(900px 300px at 0% 0%, color-mix(in srgb, var(--team-primary,#C2F34A) 38%, transparent), transparent 70%),
    radial-gradient(700px 320px at 100% 120%, color-mix(in srgb, var(--team-secondary,var(--card2)) 55%, transparent), transparent 70%),
    linear-gradient(135deg,var(--card2),#170D2B);
  opacity:.95;
}
/* círculo de quadra sutil */
.gm-hero-bg::after {
  content:"";position:absolute;right:-60px;top:50%;transform:translateY(-50%);
  width:260px;height:260px;border-radius:50%;
  border:2px solid rgba(255,255,255,.04);
}
.gm-hero-inner {
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  grid-template-areas:"identity stats" "mission mission" "next next";
  gap:14px 18px;
  padding:18px 20px;
}
@media(min-width:900px){
  .gm-hero-inner{
    grid-template-columns:1.5fr auto;
    grid-template-areas:"identity stats" "mission next";
    align-items:start;
  }
}
@media(max-width:600px){
  .gm-hero-inner{
    grid-template-columns:1fr;
    grid-template-areas:"identity" "stats" "mission" "next";
  }
}

/* Identidade + treinador */
.gmh-identity { grid-area:identity; display:flex; gap:14px; align-items:flex-start; }
.gmh-logo img,.gmh-logo .tlogo-fb { width:56px;height:56px; }
.gmh-team {
  font-family:var(--display)!important;
  font-size:1.625rem;font-weight:800;letter-spacing:.5px;line-height:1;
  color:#fff;
}
.gmh-sub { font-size:0.6875rem;color:#B0A5CC;margin-top:4px;letter-spacing:.3px; }
.gmh-coach {
  display:flex;align-items:center;gap:9px;margin-top:12px;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-sm);padding:8px 10px;
}
.gmh-coach-ava {
  width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--team-primary,var(--brand));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display)!important;font-weight:800;font-size:0.9375rem;
}
.gmh-coach-name { font-size:0.75rem;font-weight:700;color:#fff; }
.gmh-coach-role { font-size:0.6875rem;color:#A79CC2;font-weight:500; }
.gmh-coach-attrs { display:flex;gap:9px;margin-top:3px;flex-wrap:wrap; }
.gmh-coach-attrs span { font-size:0.6875rem;color:#A79CC2;letter-spacing:.3px; }
.gmh-coach-attrs strong { color:#DCD6EC; }

/* Stats grandes */
.gmh-stats {
  grid-area:stats;
  display:flex;gap:18px;align-items:center;justify-content:flex-end;
}
@media(max-width:600px){ .gmh-stats{ justify-content:flex-start; } }
.gmh-stat { text-align:center; }
.gmh-stat-num {
  font-family:var(--display)!important;
  font-size:2rem;font-weight:800;line-height:1;color:#fff;
}
.gmh-stat-num.pos { color:var(--green); }
.gmh-stat-num.neg { color:var(--red); }
.gmh-stat-lbl {
  font-size:0.6875rem;color:#A79CC2;text-transform:uppercase;
  letter-spacing:.6px;margin-top:4px;
}

/* Missão */
.gmh-mission {
  grid-area:mission;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--team-primary,var(--brand));
  border-radius:var(--r-sm);padding:10px 13px;
}
.gmh-mission.goal-cumprida { border-left-color:var(--green); }
.gmh-mission.goal-falhou   { border-left-color:var(--red); }
.gmh-mission-label { font-size:0.6875rem;color:#A79CC2;text-transform:uppercase;letter-spacing:.8px; }
.gmh-mission-desc  { font-size:0.875rem;font-weight:700;color:#fff;margin-top:3px; }
.gmh-mission-detail{ font-size:0.6875rem;color:#B0A5CC;margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.gmh-mission-badge {
  font-size:0.6875rem;font-weight:700;padding:2px 7px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);color:#CFC7E2;
}

/* Próximo passo */
.gmh-next { grid-area:next; display:flex;flex-direction:column;gap:6px;justify-content:center; }
.gmh-next-btn {
  display:flex;flex-direction:column;gap:2px;
  background:var(--team-primary,var(--brand));
  border-radius:var(--r-sm);padding:11px 16px;
  color:#fff;text-decoration:none;
  box-shadow:0 4px 16px color-mix(in srgb, var(--team-primary,#C2F34A) 40%, transparent);
  transition:transform .12s, filter .12s;
}
.gmh-next-btn:hover { transform:translateY(-1px); filter:brightness(1.08); color:#fff; }
.gmh-next-kicker { font-size:0.6875rem;text-transform:uppercase;letter-spacing:1px;opacity:.85; }
.gmh-next-label {
  font-family:var(--display)!important;
  font-size:1rem;font-weight:800;letter-spacing:.3px;
}
.gmh-next-alt { font-size:0.6875rem;color:#A79CC2;text-align:center;text-decoration:underline; }
.gmh-next-alt:hover { color:#CFC7E2; }

/* ═══════════════════════════════════════════════════════════
   INBOX DO GM
   ═══════════════════════════════════════════════════════════ */
.inbox-badge {
  display:inline-block;background:var(--brand);color:#fff;
  font-size:0.6875rem;font-weight:800;border-radius:var(--r-sm);
  padding:1px 6px;margin-left:5px;vertical-align:middle;
}
.inbox-list { display:flex;flex-direction:column;gap:2px; }
.inbox-msg {
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 10px;border-radius:var(--r-sm);
  border:1px solid transparent;
  transition:background .12s;
}
.inbox-msg + .inbox-msg { border-top:1px solid #241544; }
.inbox-msg:hover { background:rgba(255,255,255,.02); }
.inbox-msg.urgent {
  background:color-mix(in srgb, var(--brand) 8%, transparent);
  border-color:rgba(194,243,74,.25);
}
/* Precisa de uma decisão do GM (ainda pendente) → destaque âmbar, diferente de
   "importante mas informativo" (vermelho). Só aplica às 3 pendências reais. */
.inbox-msg.urgent.kind-decision,
.inbox-msg.urgent.kind-resign,
.inbox-msg.urgent.kind-injury {
  background:linear-gradient(90deg, rgba(245,166,35,.10), transparent 60%);
  border-color:rgba(245,166,35,.30);
}
.im-icon {
  font-size:1.0625rem;flex:none;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border-radius:var(--r-sm);
}
.inbox-msg.urgent .im-icon { background:rgba(194,243,74,.15); }
.inbox-msg.urgent.kind-decision .im-icon,
.inbox-msg.urgent.kind-resign .im-icon,
.inbox-msg.urgent.kind-injury .im-icon { background:rgba(245,166,35,.20); }
.im-body { flex:1;min-width:0; }
.im-from {
  font-size:0.6875rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.6px;font-weight:700;
}
.im-title { font-size:0.78125rem;font-weight:600;color:#EFEBF7;margin-top:1px;line-height:1.3; }
.im-text  { font-size:0.6875rem;color:#A79CC2;margin-top:2px;line-height:1.35;white-space:pre-line; }
.im-actions { display:flex;gap:6px;margin-top:7px;flex-wrap:wrap; }
.im-link {
  font-size:0.6875rem;font-weight:700;color:var(--brand2);
  text-transform:uppercase;letter-spacing:.4px;
}
.im-link:hover { color:#fff; }
.im-resolved {
  font-size:0.6875rem;font-weight:700;color:var(--green);
  margin-top:6px;letter-spacing:.3px;
}
.kind-injury .im-icon { background:rgba(255,91,103,.12); }
.kind-news   .im-icon { background:rgba(255,255,255,.04); }
.kind-decision .im-icon,.kind-resign .im-icon { background:rgba(245,166,35,.15); }
.kind-award  .im-icon { background:rgba(255,215,0,.15); }

/* ═══════════════════════════════════════════════════════════
   FOLHA SALARIAL / CONTRATOS
   ═══════════════════════════════════════════════════════════ */
.pay-summary {
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
@media(max-width:640px){ .pay-summary{ grid-template-columns:repeat(2,1fr); } }
.pay-box {
  background:var(--s2,#160C29);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px;text-align:center;
}
.pay-box span {
  display:block;font-family:var(--display)!important;
  font-size:1.5rem;font-weight:800;color:var(--text);line-height:1;margin-bottom:4px;
}
.pay-box { font-size:0.6875rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px; }
.pay-box.pos span { color:var(--green); }
.pay-box.neg span { color:var(--red); }

.pay-status {
  font-size:0.6875rem;font-weight:700;padding:3px 9px;border-radius:var(--r-sm);
  text-transform:uppercase;letter-spacing:.5px;
}
.pay-ok    { background:rgba(43,212,122,.12);color:var(--green); }
.pay-tax   { background:rgba(245,166,35,.15);color:#f5a623; }
.pay-apron { background:rgba(255,91,103,.15);color:var(--red); }

/* barra de salário relativa */
.sal-bar {
  background:hsl(var(--matiz),52%,16.5%);border-radius:var(--r-sm);height:7px;overflow:hidden;width:100%;
}
.sal-bar span {
  display:block;height:100%;border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--team-primary,var(--brand)),var(--brand2));
}

/* ═══════════════════════════════════════════════════════════
   MOBILE-FIRST — tabelas largas rolam dentro do card; refinamentos
   ═══════════════════════════════════════════════════════════ */
/* Qualquer tabela de dados larga ganha rolagem horizontal suave no card,
   em vez de transbordar/quebrar a página no celular. */
.card { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.card > table,
.card > .table-scroll > table { min-width:max-content; }
/* barra de rolagem fininha (combina com o tema) */
.card::-webkit-scrollbar { height:4px; }
.card::-webkit-scrollbar-thumb { background:#3A2660;border-radius:var(--r-sm); }

@media (max-width:640px) {
  /* tabelas mais compactas no celular */
  .box-table th, .standings-table th, .mini-table th, table thead th { font-size:0.6875rem; padding:7px 6px; }
  .box-table td, .standings-table td, .mini-table td, table tbody td { font-size:0.78125rem; padding:7px 6px; }
  /* títulos de página um pouco menores */
  h1.page-title { font-size:1.125rem !important; }
  /* grids de cards empilham por padrão */
  .dashboard { grid-template-columns:1fr !important; }
  /* hero: stats e próximo passo ocupam largura cheia */
  .gmh-stats { gap:14px; }
  .gmh-stat-num { font-size:1.625rem; }
  /* botões grandes ocupam a largura no mobile (alvo de toque) */
  .cta-btn, .gmh-next-btn { width:100%; text-align:center; }
  /* legendas e textos auxiliares menores */
  .legend { font-size:0.6875rem !important; }
}

/* Alvos de toque mínimos no mobile (acessibilidade) */
@media (max-width:640px) {
  .btn { min-height:34px; display:inline-flex; align-items:center; justify-content:center; }
  .im-actions .btn { min-height:30px; }
}

/* Utilitários de visibilidade responsiva */
@media (max-width:640px) { .hide-sm { display:none !important; } }
@media (min-width:641px) { .only-sm { display:none !important; } }

/* Central de Trocas: empilha as duas colunas no mobile */
@media (max-width:768px) {
  .trade-page { grid-template-columns:1fr !important; }
  .trade-arrows { flex-direction:row !important; gap:24px; padding:8px 0; }
  .trade-arrow { transform:rotate(90deg); }
}

/* Placar (game.php): compacta para caber no mobile sem cortar o time da casa */
@media (max-width:600px) {
  .scoreboard { gap:6px !important; padding:12px 8px !important; }
  .sb-mid { min-width:0 !important; }
  .sb-team { padding:4px 4px !important; }
  .sb-team .sb-abbr { font-size:1.375rem !important; }
  .sb-team .sb-score { font-size:2.625rem !important; }
  .sb-team .sb-city { font-size:0.6875rem !important; line-height:1.1; }
  .sb-clock { font-size:1rem !important; }
  .sb-speed { font-size:0.6875rem; }
  .sb-speed select { padding:3px 6px; }
}

/* ═══════════════════════════════════════════════════════════
   PRÉ-TEMPORADA + CAIXA DE MENSAGENS (FM)
   ═══════════════════════════════════════════════════════════ */
.tab-badge {
  display:inline-block;background:var(--brand);color:#fff;
  font-size:0.6875rem;font-weight:800;border-radius:var(--r-sm);
  padding:0 5px;margin-left:4px;vertical-align:middle;line-height:15px;min-width:15px;text-align:center;
}
.tn-phase-pill.phase-preseason { color:#f5a623;border-color:rgba(245,166,35,.4); }

/* Cabeçalho da pré-temporada: contador de dias + progresso */
.ps-head {
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;margin-bottom:14px;
  border-top:2px solid #f5a623;
}
.ps-day { font-family:var(--display)!important;font-size:2.125rem;font-weight:800;color:#f5a623;line-height:1; }
.ps-day small { font-size:0.8125rem;color:var(--muted);font-weight:600; }
.ps-prog-wrap { flex:1;min-width:140px; }
.ps-prog-label { font-size:0.6875rem;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px; }
.ps-prog { background:#160C29;border-radius:var(--r-sm);height:8px;overflow:hidden; }
.ps-prog span { display:block;height:100%;background:linear-gradient(90deg,#f5a623,var(--brand2)); }
.ps-actions { display:flex;gap:8px;flex-wrap:wrap; }
.ps-quick { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px; }
@media(max-width:640px){ .ps-quick{ grid-template-columns:repeat(2,1fr); } }
.ps-quick a {
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;
  text-align:center;color:var(--text);font-size:0.6875rem;font-weight:600;
}
.ps-quick a:hover { border-color:var(--brand);color:#fff; }
.ps-quick .pq-ic { font-size:1.25rem;display:block;margin-bottom:4px; }

/* Lista de mensagens (inbox page) */
.inbox-page-msg {
  display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 14px;margin-bottom:8px;
}
.inbox-page-msg.unread { border-left:3px solid var(--brand); }
.inbox-page-msg.read { opacity:.72; }
/* Urgente-acionável = precisa de uma decisão do GM (decisão/renovação/lesão pendente) —
   se destaca em âmbar das notícias/anúncios, que ficam no vermelho padrão de "não lida". */
.inbox-page-msg.urgent.unread.kind-decision,
.inbox-page-msg.urgent.unread.kind-resign,
.inbox-page-msg.urgent.unread.kind-injury {
  border-left-color:#f5a623;
  background:linear-gradient(90deg,rgba(245,166,35,.06),var(--card) 40%);
}
.inbox-page-msg.urgent.unread.kind-decision .ipm-icon,
.inbox-page-msg.urgent.unread.kind-resign .ipm-icon,
.inbox-page-msg.urgent.unread.kind-injury .ipm-icon { background:rgba(245,166,35,.16); }
.ipm-icon {
  font-size:1.125rem;flex:none;width:34px;height:34px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);
}
.inbox-page-msg.unread .ipm-icon { background:rgba(194,243,74,.14); }
.inbox-page-msg.kind-injury .ipm-icon { background:rgba(255,91,103,.14); }
.ipm-body { flex:1;min-width:0; }
.ipm-top { display:flex;justify-content:space-between;gap:8px;align-items:baseline; }
.ipm-sender { font-size:0.6875rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700; }
.ipm-when { font-size:0.6875rem;color:var(--t4);white-space:nowrap; }
.ipm-title { font-size:0.8125rem;font-weight:700;color:#EFEBF7;margin-top:2px;line-height:1.3; }
.ipm-text { font-size:0.6875rem;color:#A79CC2;margin-top:3px;line-height:1.4;white-space:pre-line; }
.ipm-link { font-size:0.6875rem;font-weight:700;color:var(--brand2);text-transform:uppercase;letter-spacing:.4px;margin-top:6px;display:inline-block; }
.inbox-page-msg .im-actions { margin-top:8px; }

/* ═══════════════════════════════════════════════════════════
   RECAP — tela "estilo FM" de resumo do avanço
   ═══════════════════════════════════════════════════════════ */
.recap-head {
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:8px;margin-bottom:14px;
  border-bottom:1px solid var(--line);padding-bottom:12px;
}
.recap-date {
  font-family:var(--display)!important;
  font-size:1.5rem;font-weight:800;color:var(--text);
}
.recap-count { font-size:0.75rem;color:var(--brand2);font-weight:700; }
.recap-count.muted { color:var(--muted);font-weight:600; }
.recap-cta { margin-top:14px; }
.recap-actions { text-align:center;margin-top:16px; }

/* ═══════════════════ Planos (parede de upgrade) ═══════════════════ */
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:10px}
.plan-card{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px 24px;display:flex;flex-direction:column;text-align:left}
.plan-featured{border-color:var(--brand);
  background:linear-gradient(170deg,rgba(194,243,74,.10),var(--card) 55%)}
.plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  font-size:0.6875rem;font-weight:800;letter-spacing:1.5px;padding:5px 14px;border-radius:999px}
.plan-name{font-family:var(--display);font-size:1.3125rem;font-weight:800;
  text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.plan-price{font-family:var(--display);font-size:2.75rem;font-weight:900;
  line-height:1.1;margin:4px 0 18px}
.plan-feats{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;
  gap:10px;font-size:0.875rem}
.plan-feats li{color:#c8d1e2}
.plan-feats li.off{color:#5f6b83}
.plan-cta{margin-top:auto}
.plan-cta .btn{width:100%}

/* Era bloqueada pelo plano */
.era-card.era-locked{cursor:pointer}
.era-card.era-locked:hover{opacity:.8!important;border-color:var(--brand)}

@media (max-width:720px){ .plan-grid{grid-template-columns:1fr} }

/* ═══════════════════ Recuperação de senha ═══════════════════ */
.auth-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.auth-forgot{font-size:0.78125rem;color:var(--muted);font-weight:600}
.auth-forgot:hover{color:var(--brand2)}
.auth-note{background:var(--card2);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r-sm);padding:14px 16px;font-size:0.84375rem;color:#D6CFE8;line-height:1.6;margin-top:20px}

/* ═══════════════════ Ações por POST ═══════════════════ */
/* O <form> de action_button() não pode ocupar espaço: display:contents faz
   o <button> herdar o lugar exato que o <a> ocupava na linha flex. */
.act-form{display:contents}
/* <button> não herda fonte nem cursor do .btn como o <a> herdava. */
.act-form button{font:inherit;cursor:pointer;border:1px solid transparent}
/* Botões 'texto' (Sair etc.): sem isto herdam o fundo cinza padrão do
   navegador. Os .btn* têm fundo próprio e não passam por aqui. */
button.tn-act, button.logout-link{background:none;border:none;padding:0}

/* ═══════════════════ Logotipo Aro Tático ═══════════════════
   O jogo é sempre escuro, então o logotipo entra sempre revertido. */
.brand-lockup{display:block;height:30px;width:auto;filter:brightness(0) invert(1)}
.brand-lockup.bl-sm{height:23px}
.brand-lockup.bl-lg{height:44px}

/* O logotipo precisa vencer as regras antigas que aplicavam brilho nas <img>
   do cabeçalho (.al-logo img, .logo img, .saves-topbar .logo-row img). Elas
   trocavam o filtro inteiro e cancelavam a inversão, deixando o letreiro
   roxo sobre o fundo roxo. Combinamos inversão e brilho numa regra só. */
.al-logo img.brand-lockup,
.logo img.brand-lockup,
.saves-topbar .logo-row img.brand-lockup,
img.brand-lockup{
  filter:brightness(0) invert(1) drop-shadow(0 0 18px rgba(194,243,74,.30));
}
.al-logo img.brand-lockup{height:44px}
.saves-topbar .logo-row img.brand-lockup{height:30px}

/* ═══════════════════ TELA INICIAL — menu-lar ═══════════════════
   Sidebar fixa com o menu do jogador; conteúdo em abas à direita.
   É a sala de estar do jogo: dinastias, técnicos, conta e o espaço
   já reservado para o online. */
.hub-body{ background:
  radial-gradient(900px 540px at 85% -10%, rgba(69,32,128,.5), transparent 60%),
  radial-gradient(700px 500px at -10% 110%, rgba(194,243,74,.06), transparent 55%),
  var(--bg); }
.hub-layout{ display:flex; min-height:100vh; }

.hub-side{
  flex:0 0 264px; display:flex; flex-direction:column;
  padding:28px 18px 20px; border-right:1px solid var(--line);
  background:rgba(20,11,38,.65); backdrop-filter:blur(8px);
  position:sticky; top:0; height:100vh;
}
.hub-logo{ padding:0 10px 24px; }
.hub-menu{ display:flex; flex-direction:column; gap:4px; flex:1; }
.hm-item{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 14px; border-radius:var(--r-md); border:1px solid transparent;
  background:transparent; color:#D6CFE8; font:inherit; font-size:0.90625rem; font-weight:700;
  cursor:pointer; text-align:left; transition:.15s;
}
.hm-item:hover{ background:var(--card2); color:#fff; }
.hm-item.active{
  background:linear-gradient(90deg, rgba(194,243,74,.16), rgba(194,243,74,.03));
  border-color:rgba(194,243,74,.35); color:#fff;
}
.hm-item.active .hm-ic{ filter:drop-shadow(0 0 6px rgba(194,243,74,.6)); }
.hm-ic{ width:24px; text-align:center; font-size:1.0625rem; }
.hm-count{
  margin-left:auto; background:var(--card2); border:1px solid var(--line);
  font-size:0.6875rem; font-weight:800; padding:1px 8px; border-radius:999px; color:var(--muted);
}
.hm-item.active .hm-count{ background:rgba(194,243,74,.15); color:var(--brand); border-color:transparent; }
.hm-soon{
  margin-left:auto; font-size:0.6875rem; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; color:var(--brand);
  border:1px solid rgba(194,243,74,.4); padding:2px 7px; border-radius:999px;
}

.hub-side-foot{ border-top:1px solid var(--line); padding-top:14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hub-user{ display:flex; align-items:center; gap:10px; min-width:0; }
.hu-avatar{
  width:38px; height:38px; border-radius:var(--r-md); flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--purple), #6B3FBF);
  color:#fff; font-weight:800; font-size:1rem; font-family:var(--display);
}
.hu-txt{ display:flex; flex-direction:column; min-width:0; }
.hu-txt strong{ font-size:0.84375rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hu-plan{
  font-size:0.6875rem; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
  color:var(--muted); background:var(--card2); border-radius:999px; padding:1px 8px;
  width:fit-content; margin-top:3px;
}
.hu-plan.hu-pro{ color:var(--on-brand); background:var(--brand); }
.hub-logout{ background:none; border:none; color:var(--muted); font-size:0.78125rem;
  font-weight:700; cursor:pointer; white-space:nowrap; }
.hub-logout:hover{ color:var(--brand2); }

.hub-main{ flex:1; min-width:0; max-width:1060px; padding:44px 48px 60px; }
.hub-greet h1{ font-family:var(--display); font-size:2.125rem; font-weight:800; margin:0; }
.hub-greet-sub{ color:var(--muted); margin:6px 0 0; font-size:0.9375rem; }
.hub-flash{ margin-top:20px; }
.hub-ok{
  background:rgba(43,212,122,.1); border:1px solid rgba(43,212,122,.35);
  color:#7fe2ae; border-radius:var(--r-md); padding:12px 16px; font-size:0.875rem; font-weight:600;
}

.hub-pane{ display:none; margin-top:30px; }
.hub-pane.active{ display:block; }
@media (prefers-reduced-motion: no-preference){
  .hub-pane.active{ animation:paneEntra .35s ease both; }
  @keyframes paneEntra{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
  .hub-greet h1{ animation:paneEntra .4s ease both; }
}
.hub-pane-intro{ color:var(--muted); font-size:0.90625rem; max-width:60ch; margin:0 0 22px; }
.sn-sub{ margin-top:6px; font-size:0.75rem; color:var(--muted); }

/* ── Técnicos salvos ── */
.coach-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:16px; }
.coach-card{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px;
  transition:.15s;
}
.coach-card:hover{ border-color:rgba(194,243,74,.4); transform:translateY(-2px); }
.cc-ic{
  width:44px; height:44px; flex:0 0 auto; font-size:1.25rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(194,243,74,.08); border:1px solid rgba(194,243,74,.2); border-radius:var(--r-md);
}
.cc-txt{ display:flex; flex-direction:column; min-width:0; flex:1; }
.cc-txt strong{ font-size:0.9375rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-txt span{ font-size:0.75rem; color:var(--muted); font-weight:700; }
.cc-del{ background:none; border:none; cursor:pointer; font-size:0.875rem; opacity:.4; transition:.15s; }
.cc-del:hover{ opacity:1; filter:drop-shadow(0 0 4px rgba(255,91,103,.6)); }

.coach-new{
  display:flex; flex-direction:column; gap:10px;
  background:transparent; border:2px dashed var(--line); border-radius:var(--r-lg); padding:18px;
}
.coach-new:focus-within{ border-color:rgba(194,243,74,.45); border-style:solid; }
.cn-title{ font-weight:800; font-size:0.8125rem; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); }
.coach-new select.gm-input{ cursor:pointer; }
.coach-full p{ margin:0; color:var(--muted); font-size:0.84375rem; }

/* ── Configurações ── */
.cfg-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:18px; align-items:start; }
.cfg-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; }
.cfg-card h3{ font-family:var(--display); font-size:1.125rem; margin:0 0 18px; }
.cfg-list{ margin:0; display:flex; flex-direction:column; gap:14px; }
.cfg-list > div{ display:flex; flex-direction:column; gap:3px; }
.cfg-list dt{ font-size:0.6875rem; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); }
.cfg-list dd{ margin:0; font-size:0.9375rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cfg-upsell{ font-size:0.78125rem; color:var(--brand2); font-weight:700; }
.cfg-upsell:hover{ text-decoration:underline; }
.cfg-card .auth-field input{ background:rgba(20,11,38,.85); border:1.5px solid var(--line);
  border-radius:var(--r-md); color:var(--text); padding:11px 14px; font-size:0.875rem; font-family:inherit; }
.cfg-card .auth-field input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(194,243,74,.14); }

/* ── Online (teaser) ── */
.online-teaser{
  position:relative; text-align:center; max-width:560px; margin:30px auto 0;
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:52px 40px;
  overflow:hidden;
}
.online-teaser::before{
  content:""; position:absolute; inset:-60% -20% auto; height:140%;
  background:radial-gradient(closest-side, rgba(194,243,74,.1), transparent); pointer-events:none;
}
.ot-badge{
  position:absolute; top:18px; right:18px; font-size:0.6875rem; font-weight:800;
  letter-spacing:1.4px; color:var(--on-brand); background:var(--brand);
  padding:4px 12px; border-radius:999px;
}
.ot-ic{ font-size:2.75rem; margin-bottom:10px; }
.online-teaser h2{ font-family:var(--display); font-size:1.625rem; margin:0 0 10px; }
.online-teaser p{ color:var(--muted); font-size:0.90625rem; line-height:1.7; margin:0 auto; max-width:44ch; }

/* ── Chips de técnico no assistente ── */
.wiz-presets{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 4px; }
.wp-lbl{ font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); }
.wp-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card2); border:1.5px solid var(--line); border-radius:999px;
  color:var(--text); font:inherit; font-size:0.8125rem; font-weight:700;
  padding:7px 14px; cursor:pointer; transition:.15s;
}
.wp-chip:hover{ border-color:rgba(194,243,74,.5); }
.wp-chip.on{ background:rgba(194,243,74,.14); border-color:var(--brand); color:#fff; }

/* ── Responsivo do lar ── */
@media (max-width:860px){
  .hub-layout{ flex-direction:column; }
  /* No celular a barra vira cabeçalho: logo e usuário dividem a primeira
     linha e o menu rola embaixo. Empilhar os três comia 200px de altura
     numa tela de 812px — um quarto do aparelho só para a moldura. */
  .hub-side{
    position:static; height:auto; flex:none; border-right:none;
    border-bottom:1px solid var(--line); padding:14px 16px;
    display:grid; grid-template-columns:auto 1fr;
    grid-template-areas:"logo user" "menu menu";
    align-items:center; gap:12px 10px;
  }
  .hub-logo{ grid-area:logo; padding:0; }
  .hub-side-foot{ grid-area:user; border-top:none; padding-top:0; justify-content:flex-end; }
  .hub-user .hu-txt{ display:none; }       /* o avatar já identifica */
  .hub-menu{ grid-area:menu; flex-direction:row; overflow-x:auto;
    gap:6px; padding-bottom:4px; scrollbar-width:none; }
  .hub-menu::-webkit-scrollbar{ display:none; }
  .hm-item{ white-space:nowrap; padding:9px 13px; }
  .hm-count, .hm-soon{ margin-left:6px; }
  .hub-main{ padding:26px 18px 48px; }
  .hub-greet{ padding-bottom:18px; }
}

/* ═══════════════════ TELA INICIAL v2 ═══════════════════
   O que mudou e por quê:
   O corpo das telas de conta herdava `place-items:center` de uma regra
   antiga. Em container de bloco isso centraliza e ENCOLHE o filho — o menu
   ficava com 660px no meio de uma tela de 1440px. O reset está no .hub-body.

   O desenho segue o que jogos de gestão fazem bem (FM26): panorama
   primeiro, ação principal grande e única, detalhe atrás. A dinastia jogada
   por último vira um herói com as cores da franquia; as outras ficam em
   cartões; quem não tem nenhuma recebe um convite de tela cheia. */

.hub-body{ display:block; }
.hub-layout{ width:100%; }
.hub-main{ max-width:none; padding:40px clamp(20px,3.4vw,56px) 72px; }

/* Cabeçalho da área: saudação à esquerda, plano à direita */
.hub-greet{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--line); }
.hub-greet h1{ font-size:clamp(26px,2.6vw,38px); }

.hub-sec-title{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-size:0.9375rem; font-weight:800;
  text-transform:uppercase; letter-spacing:1.4px; color:var(--muted);
  margin:34px 0 16px;
}
.hub-sec-title::after{ content:""; flex:1; height:1px; background:var(--line); }
.hst-count{ font-size:0.75rem; letter-spacing:.5px; color:var(--brand);
  background:rgba(194,243,74,.12); padding:2px 10px; border-radius:999px; }

/* ── Herói da dinastia ── */
.dyn-hero{
  position:relative; overflow:hidden; border-radius:22px;
  border:1px solid var(--line); margin-top:28px;
  box-shadow:0 26px 60px rgba(0,0,0,.42);
}
.dh-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(760px 320px at 8% 0%, color-mix(in srgb, var(--c1) 62%, transparent), transparent 70%),
    radial-gradient(620px 340px at 100% 110%, color-mix(in srgb, var(--c2) 32%, transparent), transparent 70%),
    linear-gradient(130deg, #241544, #160C29);
}
/* linhas de quadra, discretas */
.dh-bg::after{
  content:""; position:absolute; right:-70px; top:50%; transform:translateY(-50%);
  width:300px; height:300px; border-radius:50%;
  border:2px solid rgba(247,247,250,.07);
  box-shadow:0 0 0 60px rgba(247,247,250,.022);
}
.dh-inner{
  position:relative; z-index:1;
  display:grid; gap:18px 26px; padding:30px clamp(22px,2.6vw,38px);
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"crest id stats" "crest actions stats";
  align-items:center;
}
.dh-crest{
  grid-area:crest; width:96px; height:96px; border-radius:24px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:1.875rem; letter-spacing:.5px;
  color:#fff; background:rgba(0,0,0,.3);
  border:2px solid rgba(247,247,250,.16);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.dh-id{ grid-area:id; min-width:0; }
.dh-kicker{
  font-size:0.6875rem; font-weight:800; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--brand);
}
.dh-team{ font-family:var(--display); font-size:clamp(26px,2.9vw,40px); font-weight:800;
  margin:4px 0 6px; line-height:1.05; color:#fff; }
.dh-meta{ margin:0; font-size:0.84375rem; color:#CFC7E2; opacity:.9; }
.dh-stats{ grid-area:stats; display:flex; gap:clamp(16px,2vw,30px); align-items:center; }
.dh-stat{ text-align:center; }
.dh-stat strong{ display:block; font-family:var(--display); font-size:1.625rem; font-weight:800; color:#fff; line-height:1; }
.dh-stat span{ display:block; margin-top:5px; font-size:0.6875rem; font-weight:800;
  letter-spacing:1.1px; text-transform:uppercase; color:#B0A5CC; }
.dh-actions{ grid-area:actions; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn-ghost-dim{
  background:rgba(0,0,0,.28); border:1px solid rgba(247,247,250,.16); color:#CFC7E2;
  padding:9px 16px; border-radius:var(--r-md); font-weight:700; font-size:0.84375rem; cursor:pointer;
}
.btn-ghost-dim:hover{ border-color:var(--red); color:#fff; }

@media (prefers-reduced-motion: no-preference){
  .dyn-hero{ animation:heroDyn .5s cubic-bezier(.22,.8,.3,1) both; }
  @keyframes heroDyn{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
}

/* ── Cartões das outras dinastias ── */
.slots-grid{ grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.slot-card{ background:var(--card); }

.slot-new{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-height:190px; padding:22px;
  background:transparent; border:2px dashed var(--line); border-radius:var(--r-lg);
  color:var(--text); font:inherit; cursor:pointer; text-align:center; transition:.16s;
}
.slot-new:hover{ border-color:var(--brand); border-style:solid;
  background:rgba(194,243,74,.05); transform:translateY(-3px); }
.sn-icon{ font-size:1.875rem; line-height:1; color:var(--brand); }
.sn-label{ margin-top:10px; font-family:var(--display); font-size:0.9375rem; font-weight:800;
  letter-spacing:.6px; text-transform:uppercase; }
.sn-sub{ margin-top:4px; font-size:0.75rem; color:var(--muted); }
.slot-locked{ text-decoration:none; }
.slot-locked:hover{ border-color:var(--brand); }

/* ── Primeira visita: convite de tela cheia ── */
.dyn-empty{
  position:relative; overflow:hidden; margin-top:28px;
  border:1px solid var(--line); border-radius:24px;
  background:linear-gradient(140deg,#241544,#160C29);
  padding:clamp(36px,5vw,66px) clamp(24px,4vw,56px);
}
.de-court{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(720px 380px at 12% -10%, rgba(194,243,74,.14), transparent 62%),
    radial-gradient(620px 360px at 100% 120%, rgba(69,32,128,.6), transparent 64%);
}
.de-court::after{
  content:""; position:absolute; right:6%; top:50%; transform:translateY(-50%);
  width:260px; height:260px; border-radius:50%;
  border:2px solid rgba(247,247,250,.07); box-shadow:0 0 0 54px rgba(247,247,250,.02);
}
.de-inner{ position:relative; z-index:1; max-width:52ch; }
.de-kicker{ font-size:0.6875rem; font-weight:800; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--brand); }
.dyn-empty h2{ font-family:var(--display); font-size:clamp(28px,3.4vw,44px);
  font-weight:800; margin:8px 0 12px; color:#fff; }
.dyn-empty p{ color:#CFC7E2; font-size:0.96875rem; line-height:1.7; margin:0 0 26px; }
.de-steps{ list-style:none; display:flex; gap:26px; flex-wrap:wrap;
  padding:0; margin:30px 0 0; }
.de-steps li{ display:flex; align-items:center; gap:9px; font-size:0.84375rem;
  color:#B0A5CC; font-weight:600; }
.de-steps span{
  width:24px; height:24px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(194,243,74,.14); border:1px solid rgba(194,243,74,.3);
  color:var(--brand); font-size:0.6875rem; font-weight:800;
}

/* ── Responsivo ── */
@media (max-width:1080px){
  .dh-inner{ grid-template-columns:auto 1fr;
    grid-template-areas:"crest id" "stats stats" "actions actions"; }
  .dh-stats{ justify-content:flex-start; padding-top:4px; }
}
@media (max-width:620px){
  .dh-inner{ grid-template-columns:1fr; grid-template-areas:"crest" "id" "stats" "actions"; }
  .dh-crest{ width:70px; height:70px; font-size:1.4375rem; border-radius:var(--r-lg); }
  .dh-actions .btn{ width:100%; }
  .de-steps{ flex-direction:column; gap:12px; }
}

/* ═══════════════════ Modal, toast e estado de carga ═══════════════════
   Substitui o confirm() do navegador e dá resposta ao clique.
   Ver docs/estudo-design.md, fase 1. */

/* ── Modal ── */
.gmodal{ position:fixed; inset:0; z-index:2000; display:flex;
  align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .18s ease; }
.gmodal.is-open{ opacity:1; pointer-events:auto; }
.gmodal-fundo{ position:absolute; inset:0; background:rgba(10,5,22,.72);
  backdrop-filter:blur(3px); }
.gmodal-caixa{
  position:relative; width:100%; max-width:430px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 28px 22px; box-shadow:0 30px 70px rgba(0,0,0,.6);
  transform:translateY(12px) scale(.97); transition:transform .2s cubic-bezier(.22,.8,.3,1);
}
.gmodal.is-open .gmodal-caixa{ transform:none; }
.gmodal-titulo{ font-family:var(--display); font-size:1.3125rem; font-weight:800;
  margin:0 0 8px; color:#fff; }
.gmodal-texto{ margin:0 0 24px; font-size:0.90625rem; line-height:1.6; color:#CFC7E2; }
.gmodal-acoes{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.gmodal-acoes .btn{ min-width:120px; justify-content:center; text-align:center; }
.gmodal-sim:focus-visible, .gmodal-nao:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .gmodal, .gmodal-caixa{ transition:none; }
  .gmodal-caixa{ transform:none; }
}

/* ── Toast ── */
.gtoast{
  position:fixed; left:50%; bottom:28px; z-index:2100;
  transform:translate(-50%, 16px); opacity:0;
  max-width:min(520px, calc(100vw - 32px));
  padding:14px 20px; border-radius:var(--r-md);
  font-size:0.875rem; font-weight:700; line-height:1.45;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  transition:opacity .25s ease, transform .25s cubic-bezier(.22,.8,.3,1);
}
.gtoast.is-open{ opacity:1; transform:translate(-50%, 0); }
.gtoast-ok{ background:var(--brand); color:var(--on-brand); }
.gtoast-erro{ background:#5A1A28; color:#FFD8DE; border:1px solid var(--red); }
@media (prefers-reduced-motion: reduce){ .gtoast{ transition:opacity .2s ease; transform:translate(-50%,0); } }

/* ── Estado de carga ──
   O jogador clicou em "avançar dia" e a página some por segundos. Sem sinal
   ele clica de novo; o pulso diz que o comando foi recebido. */
.is-carregando{
  position:relative; pointer-events:none;
  opacity:.72; cursor:progress;
}
.is-carregando::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--on-brand), transparent);
  animation:cargaDesliza 1s linear infinite;
}
.btn.is-carregando::after{ border-radius:0 0 10px 10px; }
@keyframes cargaDesliza{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }
@media (prefers-reduced-motion: reduce){
  .is-carregando::after{ animation:none; opacity:.5; }
}

/* ═══════════════ Resposta visual às ações ═══════════════
   Fase 1, item 2 do estudo. O jogo reagia igual para tudo: o placar
   aparecia pronto, vitória e derrota voltavam para a mesma tela.
   Ver docs/estudo-design.md. */

/* ── Pulso do número que acabou de mudar ──
   A classe `bump` já era chamada pelo live.js desde sempre, mas não existia
   no CSS: a animação estava morta. */
.bump{ animation:numPulsa .42s cubic-bezier(.22,.8,.3,1); }
@keyframes numPulsa{
  0%  { transform:scale(1);    }
  35% { transform:scale(1.18); }
  100%{ transform:scale(1);    }
}
.sb-score{ display:inline-block; font-variant-numeric:tabular-nums; }

/* ── Entrada escalonada de listas ── */
.entra{ animation:itemEntra .45s cubic-bezier(.22,.8,.3,1) both; }
@keyframes itemEntra{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}

/* ── Faixa de resultado: vitória e derrota deixam de ser iguais ── */
.res-faixa{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 14px; padding:14px 20px; border-radius:var(--r-lg);
  border:1px solid transparent; border-left-width:4px;
  animation:resEntra .5s cubic-bezier(.22,.8,.3,1) both;
}
.rf-tag{
  font-family:var(--display); font-size:1.25rem; font-weight:800;
  letter-spacing:1.4px; text-transform:uppercase; line-height:1;
}
.rf-txt{ font-size:0.90625rem; color:#CFC7E2; }

.res-vitoria{
  background:linear-gradient(90deg, rgba(43,212,122,.16), rgba(43,212,122,.03));
  border-color:rgba(43,212,122,.3); border-left-color:var(--green);
}
.res-vitoria .rf-tag{ color:var(--green); }

.res-derrota{
  background:linear-gradient(90deg, rgba(255,91,103,.14), rgba(255,91,103,.03));
  border-color:rgba(255,91,103,.28); border-left-color:var(--red);
}
.res-derrota .rf-tag{ color:var(--red); }

@keyframes resEntra{
  from{ opacity:0; transform:translateY(-10px); }
  to  { opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .bump, .entra, .res-faixa{ animation:none; }
  .entra{ opacity:1; transform:none; }
}

/* ═══════════════ Selos semânticos ═══════════════
   Classes reutilizáveis para estados que antes eram texto cinza. A cor
   nunca vem sozinha: o selo sempre carrega texto. */
.selo{
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.6875rem; font-weight:800; letter-spacing:.4px;
  padding:3px 9px; border-radius:999px; border:1px solid transparent;
  white-space:nowrap;
}
.selo-ok     { background:var(--ok-bg);     color:var(--ok);     border-color:var(--ok-borda); }
.selo-perigo { background:var(--perigo-bg); color:var(--perigo); border-color:var(--perigo-borda); }
.selo-alerta { background:var(--alerta-bg); color:var(--alerta); border-color:var(--alerta-borda); }
.selo-info   { background:var(--info-bg);   color:var(--info);   border-color:var(--info-borda); }
.selo-quente { background:var(--quente-bg); color:var(--quente); border-color:rgba(255,144,82,.32); }
.selo-frio   { background:var(--frio-bg);   color:var(--frio);   border-color:rgba(124,196,255,.3); }

/* ═══════════════ Cartão de jogo (lista de partidas) ═══════════════
   Era sigla no escudo + sigla repetida embaixo, sem nenhuma informação
   sobre o confronto. Virou uma linha por time, com campanha e placar. */
.mc-linhas{ display:flex; flex-direction:column; gap:2px; padding:12px 14px 10px; }
.mc-linha{
  display:flex; align-items:center; gap:9px;
  padding:7px 9px; border-radius:var(--r-sm);
  font-size:0.875rem; line-height:1;
}
.mc-cor{ width:4px; height:20px; border-radius:var(--r-sm); flex:none; }
.mc-abbr{ font-family:var(--display); font-weight:800; font-size:1rem; letter-spacing:.4px; min-width:44px; }
.mc-camp{ font-size:0.71875rem; color:var(--t4); font-variant-numeric:tabular-nums; }
.mc-casa{ font-size:0.6875rem; color:var(--t4); text-transform:uppercase; letter-spacing:.7px; }
.mc-pts{
  margin-left:auto; font-family:var(--display); font-weight:800; font-size:1.25rem;
  font-variant-numeric:tabular-nums; color:var(--t2);
}
/* Vencedor em destaque; perdedor recua. A cor não vai sozinha: o número
   maior e o peso da fonte também marcam quem ganhou. */
.mc-venceu{ background:var(--s4); }
.mc-venceu .mc-abbr{ color:var(--t1); }
.mc-venceu .mc-pts{ color:var(--ok); }
.mc-perdeu{ opacity:.62; }
.mc-meu .mc-abbr{ color:var(--brand); }
.match-card:not(.played) .mc-linha{ padding-block:9px; }

/* ═══════════════ Tabelas de dados ═══════════════
   Eram 12px com números proporcionais: as colunas não alinhavam e o olho
   não conseguia comparar valores de cima a baixo, que é o único motivo de
   existir uma tabela. O estudo pede 14–16px para texto operacional. */
.standings-table, .box-table, .mini-table, .card table{ font-size:0.84375rem; }
.standings-table td, .box-table td, .card table td{ padding:9px 10px; }
.standings-table th, .box-table th, .mini-table th, table thead th{
  padding:9px 10px; font-size:0.6875rem; color:var(--t4);
  background:var(--s2); position:sticky; top:0; z-index:2;
}
/* Números só comparam quando têm a mesma largura. */
.num, .mc-camp, .mc-pts, td.num, th.num,
.standings-table td:not(.bx-name), .box-table td:not(.bx-name){
  font-variant-numeric:tabular-nums;
}
.num, th.num{ text-align:right; }
/* Linhas alternadas: o olho não perde a linha em tabela larga. */
.standings-table tbody tr:nth-child(even),
.box-table tbody tr:nth-child(even){ background:rgba(247,247,250,.016); }
.standings-table tbody tr:hover,
.box-table tbody tr:hover{ background:var(--s4); }
/* A coluna do jogador é a âncora da leitura: fica estável e legível. */
.bx-name{ font-weight:600; color:var(--t1); }
.bx-name a{ color:inherit; }
.bx-name a:hover{ color:var(--brand); }

/* ═══════════════ Sala de comando ao vivo ═══════════════
   O botão de agir vinha antes da decisão, e as táticas ficavam num
   <details> com rótulos minúsculos — convidava a simular sem olhar o que
   estava escolhido. Agora: decidir, depois agir. */
.cmd-bloco{ padding:16px 18px 4px; }
.cmd-titulo{
  font-family:var(--display); font-size:0.8125rem; font-weight:800;
  text-transform:uppercase; letter-spacing:1.2px; color:var(--t4);
  margin:0 0 12px;
}
.cmd-cartoes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:10px; }

.cmd-cartao{
  position:relative; display:flex; flex-direction:column; gap:3px;
  padding:13px 15px; border-radius:var(--r-md); cursor:pointer;
  background:var(--s3); border:1.5px solid var(--line);
  transition:border-color .15s, background .15s, transform .15s;
}
.cmd-cartao:hover{ border-color:var(--accent2); transform:translateY(-1px); }
.cmd-cartao input{ position:absolute; opacity:0; width:0; height:0; }
.cmd-cartao:has(input:checked){
  border-color:var(--brand); background:var(--s4);
  box-shadow:0 0 0 3px rgba(194,243,74,.12);
}
.cmd-cartao:has(input:focus-visible){ outline:2px solid var(--brand); outline-offset:2px; }

.cc-nome{ font-family:var(--display); font-size:1rem; font-weight:800; color:var(--t1); }
.cc-curto{ font-size:0.71875rem; color:var(--t4); text-transform:uppercase; letter-spacing:.6px; }
/* O ganho e a contrapartida vêm dos modificadores reais do motor. Mostrar só
   a vantagem transformaria a escolha em promessa de vitória. */
.cc-ganha{ font-size:0.78125rem; color:var(--ok); margin-top:5px; }
.cc-perde{ font-size:0.78125rem; color:var(--t3); }

.cmd-extras{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px; padding:14px 18px 4px;
}
.cmd-campo{ display:flex; flex-direction:column; gap:5px; font-size:0.78125rem; }
.cmd-campo > span{ font-weight:700; color:var(--t3); }
.cmd-campo select{
  background:var(--s4); border:1.5px solid var(--line); border-radius:var(--r-md);
  color:var(--text); padding:9px 12px; font:inherit; font-size:0.84375rem; cursor:pointer;
}
.cmd-campo select:focus{ outline:none; border-color:var(--brand); }
.cmd-campo small, .cmd-check small{ display:block; color:var(--t4); font-size:0.71875rem; line-height:1.45; }
.cmd-check{ display:flex; align-items:flex-start; gap:10px; font-size:0.84375rem; cursor:pointer; }
.cmd-check input{ margin-top:3px; accent-color:var(--brand); width:17px; height:17px; }
.cmd-check > span{ font-weight:700; color:var(--t2); }

.cmd-acao{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 18px; margin-top:12px;
  border-top:1px solid var(--line); background:var(--s2);
}
.cmd-acao .live-hint{ flex:1 1 220px; margin:0; font-size:0.75rem; color:var(--t4); }

/* Placar antes do jogo: dois zeros não merecem 130px de altura. */
.scoreboard:not(.sb-rolando) .sb-score{ font-size:2.75rem; opacity:.5; }
.scoreboard:not(.sb-rolando){ padding-block:16px; }

@media (max-width:720px){
  .cmd-cartoes{ grid-template-columns:1fr; }
  .cmd-acao .btn{ width:100%; }
}

/* ══════════ Imprensa ══════════
   A matéria tem que se distinguir de um recado da diretoria à primeira vista:
   a marca do veículo em cima, a manchete em peso de manchete, e a assinatura
   embaixo. É o formato que faz parecer notícia, não a marca em si. */
.imp-marca{
  display:inline-flex;align-items:center;gap:7px;
  font-size:0.6875rem;letter-spacing:.04em;line-height:1;
}
.imp-sigla{
  background:var(--imp-cor);color:#fff;font-weight:800;
  padding:3px 6px;border-radius:var(--r-sm);font-size:0.6875rem;letter-spacing:.06em;
}
.imp-nome{color:var(--text);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.imp-papel{
  color:var(--muted);text-transform:uppercase;letter-spacing:.08em;
  padding-left:7px;border-left:1px solid var(--linha);
}
.ipm-data{color:var(--muted);font-size:0.6875rem;margin-left:8px}

.imp-urgente{
  display:inline-block;background:var(--perigo,#D93A3A);color:#fff;
  font-size:0.6875rem;font-weight:800;letter-spacing:.1em;
  padding:2px 6px;border-radius:var(--r-sm);vertical-align:middle;margin-right:4px;
}

.imp-autor{
  margin-top:8px;font-size:0.78125rem;font-style:italic;color:var(--muted);
}

/* A matéria ganha um filete na cor do veículo — é o que faz a caixa de
   entrada parecer uma banca em vez de uma lista. */
.inbox-page-msg.eh-imprensa{border-left:3px solid var(--imp-cor,var(--linha))}
.inbox-page-msg.eh-imprensa .ipm-title{font-size:1rem;line-height:1.3;letter-spacing:-.01em}

@media (max-width:640px){
  .imp-marca{flex-wrap:wrap;gap:5px}
  .imp-papel{padding-left:0;border-left:0}
  .ipm-data{margin-left:0;width:100%}
}

/* A foto do líder era estilo inline repetido em cada linha do laço. Virou
   classe quando a tela passou a usar player_photo(), que é o único ponto que
   decide entre foto real e face gerada (ver docs/DADOS-E-DIREITOS.md §5b). */
.player-photo.leader-face{
  width:1.75rem;aspect-ratio:28/34;height:auto;border-radius:var(--r-sm);
  object-fit:cover;object-position:top;
  vertical-align:middle;margin-right:6px;background:var(--card2);
}

/* ══════════ Barra de topo: três blocos fixos ══════════
   Escudo+time | data+próximo jogo | folha+meta. Sempre os três, sempre na
   mesma ordem, em toda tela — é o que o EA FC 26 acerta e o que faz você
   nunca precisar procurar o básico (docs/INTERFACE.md §3). */

.tn-proximo{
  display:inline-flex;align-items:baseline;gap:6px;
  margin-left:10px;padding:3px 9px;border-radius:999px;
  background:var(--s4);border:1px solid var(--line);
  white-space:nowrap;
}
.tn-prox-vs{font-weight:800;font-size:0.75rem;letter-spacing:.03em;color:var(--t1)}
.tn-prox-quando{font-size:0.6875rem;color:var(--t3)}
/* Jogo hoje é a única coisa na barra que pede ação. Ganha a cor da marca —
   e o rótulo "hoje" continua escrito, porque cor sozinha não informa (§4.4). */
.tn-proximo.tn-prox-hoje{
  background:var(--brand);border-color:var(--brand);
}
.tn-prox-hoje .tn-prox-vs,
.tn-prox-hoje .tn-prox-quando{color:var(--on-brand)}
.tn-prox-hoje .tn-prox-quando{font-weight:800}

.tn-folha{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  padding:2px 10px;border-left:1px solid var(--line);
  text-decoration:none;line-height:1.15;
}
.tn-folha:hover{background:var(--s4)}
.tn-folha-num{font-size:0.8125rem;font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums}
.tn-folha-lbl{font-size:0.6875rem;color:var(--t4);text-transform:uppercase;letter-spacing:.07em}

/* Barra segmentada de progresso da temporada, tingida pelo estado da meta.
   Segmentada e não contínua porque lê melhor de longe. */
.tn-meta{display:flex;gap:2px;margin-top:3px}
.tn-meta i{width:11px;height:3px;border-radius:var(--r-sm);background:var(--line-forte)}
.tn-meta i.on{background:var(--t4)}
.tn-meta.meta-cumprida i.on{background:var(--ok)}
.tn-meta.meta-falhou   i.on{background:var(--perigo)}
.tn-meta.meta-andamento i.on{background:var(--accent2)}

@media (max-width:860px){
  /* No celular o bloco 2 perde a data e fica só com o que pede ação. */
  .tn-center .tn-date-txt{display:none}
  .tn-center .tn-phase-pill{display:none}
  .tn-folha{border-left:0;padding-right:4px}
  .tn-folha-lbl{display:none}
}
@media (max-width:560px){
  .tn-proximo{margin-left:6px;padding:2px 7px}
  .tn-prox-quando{display:none}
  .tn-prox-hoje .tn-prox-quando{display:inline}
}

/* No celular a barra estourava e empurrava para fora justamente o bloco do
   próximo jogo — o único item dela que pede ação. A conta não fecha em 375px
   com nome completo, subtítulo, campanha, folha e as ações de conta juntos,
   então o que sai é o que o usuário não precisa ler a cada tela. */
@media (max-width:620px){
  .top-nav{ overflow:visible }
  .tn-brand{ min-width:0; flex:0 1 auto; padding-right:8px }
  .tn-brand-txt{ min-width:0 }
  .tn-team-name{ max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .tn-gm-sub{ display:none }          /* "GM MODE · T1" não muda nunca */
  .tn-record{ display:none }          /* a campanha já aparece na Central */
  .tn-act:not(.tn-logout){ display:none } /* "Saves" vive na tela de saves */
  .tn-center{ flex:1 1 auto; min-width:0; justify-content:flex-end }
  .tn-proximo{ flex:0 0 auto }
}

/* ══════════ Cartão de decisão ══════════
   Não é um item de lista de tarefas: é uma pergunta com as opções à vista, a
   recomendação assinada de alguém, e um jeito de delegar sabendo o que vai
   acontecer. Ver docs/INTERFACE.md §2. */
.decisoes{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}

.cartao-decisao{
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--accent2);
  border-radius:var(--r-md);
  padding:16px 18px;
}
.cd-topo{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cd-selo{
  background:var(--accent2);color:var(--on-brand);
  font-size:0.6875rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--r-sm);
}
.cd-dia{font-size:0.6875rem;color:var(--t4);text-transform:uppercase;letter-spacing:.06em}

.cd-titulo{margin:0 0 6px;font-size:1.0625rem;line-height:1.3;color:var(--t1)}
.cd-corpo{margin:0 0 14px;font-size:0.875rem;line-height:1.55;color:var(--t2)}

/* A fala do auxiliar. É o elemento que transforma o cartão numa conversa em
   vez de um formulário — por isso tem retrato, aspas e assinatura. */
.cd-conselho{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--s2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:12px 13px;margin-bottom:14px;
}
.cd-aux{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--s5);color:var(--t1);
  display:flex;align-items:center;justify-content:center;
  font-size:0.78125rem;font-weight:800;letter-spacing:.04em;
}
.cd-fala-bloco{min-width:0}
.cd-fala{margin:0 0 5px;font-size:0.875rem;line-height:1.5;color:var(--t1);font-style:italic}
.cd-assina{margin:0;font-size:0.6875rem;color:var(--t4);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.cd-assina span{font-weight:400;letter-spacing:.04em}

.cd-opcoes{display:flex;flex-wrap:wrap;gap:8px}
.cd-opcoes .act-form{display:contents}
.cd-opcao{
  font-size:0.84375rem;font-weight:700;padding:9px 14px;border-radius:var(--r-sm);
  background:var(--s4);border:1px solid var(--line);color:var(--t1);
  text-align:left;cursor:pointer;
}
.cd-opcao:hover{background:var(--s5);border-color:var(--line-forte)}
/* A opção recomendada: contorno, não preenchimento — ela é sugestão, não a
   ação primária. Quem decide ainda é o usuário. */
.cd-opcao-rec{border-color:var(--accent2)}
.cd-rec{
  display:inline-block;margin-left:7px;font-size:0.6875rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;color:var(--accent2);
}

.cd-delegar{margin-top:10px;padding-top:11px;border-top:1px solid var(--line)}
.cd-btn-delegar{
  width:100%;font-size:0.8125rem;font-weight:700;padding:9px 12px;border-radius:var(--r-sm);
  background:transparent;border:1px dashed var(--line-forte);color:var(--t3);
  cursor:pointer;
}
.cd-btn-delegar:hover{color:var(--t1);border-color:var(--accent2);background:var(--s2)}
/* O travessão precisa respirar; o espaço do HTML some na quebra. */
.cd-btn-delegar span{font-weight:400;color:var(--t4);margin-left:5px}
.cd-btn-delegar:hover span{color:var(--t3)}

@media (max-width:560px){
  .cartao-decisao{padding:14px}
  .cd-opcoes{flex-direction:column}
  .cd-opcoes .act-form,.cd-opcao{width:100%}
}

/* Aviso de ação concluída — some ao navegar, não precisa ser fechado. */
.aviso-acao{
  margin:0 0 16px;padding:10px 14px;
  background:var(--ok-bg);border:1px solid var(--ok-borda);
  border-left:3px solid var(--ok);border-radius:var(--r-sm);
  font-size:0.84375rem;line-height:1.5;color:var(--t1);
}

/* ══════════ Densidade ══════════
   A pesquisa de skins do FM encontrou duas escolas em guerra aberta: a
   maximalista ("muita informação numa tela só", elogiada pela potência e
   criticada por ser avassaladora) e a minimalista-hierárquica. O mercado
   resolveu publicando DUAS versões da mesma skin. Um controle resolve melhor
   que duas versões do produto (docs/INTERFACE.md §8).

   A densidade mexe no ritmo VERTICAL, que é onde ela se sente: altura de
   linha de tabela e respiro de cartão. Não mexe em texto — isso é a escala,
   e são decisões separadas de propósito: tem quem queira letra grande e
   tabela compacta. */
.standings-table td, .box-table td, .card table td{
  padding-top:calc(9px * var(--densidade,1));
  padding-bottom:calc(9px * var(--densidade,1));
}
.standings-table th, .box-table th, .mini-table th, table thead th{
  padding-top:calc(7px * var(--densidade,1));
  padding-bottom:calc(7px * var(--densidade,1));
}
.mini-table td{
  padding-top:calc(6px * var(--densidade,1));
  padding-bottom:calc(6px * var(--densidade,1));
}
.card{
  padding-top:calc(15px * var(--densidade,1)) !important;
  padding-bottom:calc(15px * var(--densidade,1)) !important;
}
.cartao-decisao{
  padding-top:calc(16px * var(--densidade,1));
  padding-bottom:calc(16px * var(--densidade,1));
}
.decisoes{ gap:calc(14px * var(--densidade,1)) }
.inbox-page-msg{
  padding-top:calc(13px * var(--densidade,1));
  padding-bottom:calc(13px * var(--densidade,1));
}

/* ══════════ Foco de teclado ══════════
   Nenhum dos jogos pesquisados tem foco visível de verdade; o contorno ciano
   de 1px do EA FC 26 é literalmente um outline, e serve de referência.
   `:focus-visible` e não `:focus`: o anel aparece para quem navega por
   teclado e não atrapalha quem clica. */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
/* O navegador já não desenha o anel padrão quando há :focus-visible, mas
   alguns componentes zeravam o outline na mão. */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* ══════════ Alto contraste do sistema ══════════
   `prefers-contrast: more` é o pedido explícito de quem precisa de mais
   contraste, e é o que o modo de alto contraste do EA FC 26 NÃO faz: lá ele
   recolore uniforme, bola e gramado, e deixa o texto como estava.

   Aqui ele sobe os quatro níveis de texto e marca as bordas. O piso (--t4)
   vai de 5,15:1 para 9,2:1 sobre o cartão. */
@media (prefers-contrast: more){
  :root{
    --t2:#EDEAF5;
    --t3:#DAD4EA;
    --t4:#C8C0DE;
    --line:hsl(var(--matiz),43%,38%);
    --line-forte:hsl(var(--matiz),40%,46%);
  }
  .cd-opcao, .btn{ border-width:2px }
  :focus-visible{ outline-width:3px }
}

/* ══════════ Painel de leitura ══════════ */
.tn-leitura{position:relative;display:flex;align-items:center}
.tn-leitura-btn{
  background:none;border:1px solid var(--line);color:var(--t3);
  border-radius:var(--r-sm);padding:3px 8px;cursor:pointer;line-height:1;
  font-family:var(--ui);font-weight:800;font-size:0.875rem;
}
.tn-leitura-btn span{font-size:0.6875rem}
.tn-leitura-btn:hover{color:var(--t1);border-color:var(--line-forte);background:var(--s4)}
.tn-leitura-btn[aria-expanded="true"]{color:var(--on-brand);background:var(--brand);border-color:var(--brand)}

.leitura-painel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  width:242px;padding:14px;
  background:var(--s3);border:1px solid var(--line-forte);
  border-radius:var(--r-md);box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.leitura-painel[hidden]{display:none}
.lp-grupo{border:0;margin:0 0 13px;padding:0}
.lp-grupo:last-of-type{margin-bottom:9px}
.lp-grupo legend{
  padding:0;margin-bottom:7px;
  font-size:0.6875rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t4);
}
.lp-opcoes{display:flex;flex-wrap:wrap;gap:5px}
.lp-op{
  flex:1 1 auto;padding:6px 9px;cursor:pointer;
  background:var(--s4);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--t2);font-family:var(--ui);font-size:0.75rem;font-weight:700;
  white-space:nowrap;
}
.lp-op:hover{background:var(--s5);color:var(--t1)}
/* O ativo é preenchido, não só contornado: aqui a cor PODE carregar sozinha
   porque aria-pressed diz o mesmo ao leitor de tela. */
.lp-op-ativo{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.lp-nota{margin:0;font-size:0.6875rem;color:var(--t4);line-height:1.45}

@media (max-width:620px){
  .tn-leitura-btn{padding:3px 6px}
  .leitura-painel{right:-6px;width:min(242px,calc(100vw - 20px))}
}

/* O retrato dentro do cartão de decisão. Fica à esquerda do título, não
   acima, para que o nome e o contexto ainda leiam como um parágrafo. */
.cd-cabeca{display:flex;gap:13px;align-items:flex-start}
.cd-cabeca-txt{min-width:0;flex:1 1 auto}
.cd-retrato{flex:0 0 auto;line-height:0;text-decoration:none;display:block}
.player-photo.cd-foto{
  width:3.25rem;aspect-ratio:1;height:auto;
  border-radius:var(--r-md);border:1px solid var(--line);
}
.cd-retrato:hover .cd-foto{border-color:var(--accent2)}
@media (max-width:560px){
  .player-photo.cd-foto{width:2.75rem}
  .cd-cabeca{gap:10px}
}

/* ══════════ Navegação em dois níveis ══════════
   Treze abas lado a lado não eram navegação, eram uma lista — e uma lista de
   treze ninguém aprende, relê toda vez. Quatro áreas fixas em cima, as telas
   da área embaixo. É a estrutura do EA Sports FC, e é o que permite a matiz
   de cor significar alguma coisa: a cor É a área. */
.nav-areas{
  display:flex;align-items:stretch;gap:2px;
  background:var(--s1);
  border-bottom:1px solid var(--line);
  padding:0 14px;
  overflow-x:auto;scrollbar-width:none;
}
.nav-areas::-webkit-scrollbar{display:none}
.na-item{
  position:relative;flex:0 0 auto;
  display:flex;align-items:center;gap:7px;
  padding:13px 18px 12px;
  font-family:var(--display);
  font-size:0.875rem;font-weight:700;letter-spacing:.04em;
  color:var(--t4);text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;
  transition:color .15s, border-color .15s;
}
.na-item:hover{color:var(--t2)}
/* A área ativa é a única em branco, e carrega o filete na cor da marca.
   Peso e cor juntos: a cor sozinha não informa (§4.4). */
.na-ativa{color:var(--t1);border-bottom-color:var(--brand)}
.na-badge,.nt-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.1rem;height:1.1rem;padding:0 .3rem;
  background:var(--brand);color:var(--on-brand);
  border-radius:999px;font-size:0.6875rem;font-weight:800;line-height:1;
}

.nav-telas{
  display:flex;align-items:center;gap:3px;
  background:var(--s2);
  border-bottom:1px solid var(--line);
  padding:7px 14px;
  overflow-x:auto;scrollbar-width:none;
}
.nav-telas::-webkit-scrollbar{display:none}
.nt-item{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:999px;
  font-size:0.8125rem;font-weight:700;
  color:var(--t4);text-decoration:none;white-space:nowrap;
}
.nt-item:hover{color:var(--t1);background:var(--s4)}
.nt-ativa{color:var(--t1);background:var(--s5)}
.nt-ativa .nt-badge{background:var(--brand)}

@media (max-width:620px){
  .nav-areas{padding:0 8px}
  .na-item{padding:11px 13px 10px;font-size:0.8125rem}
  .nav-telas{padding:6px 8px}
  .nt-item{padding:5px 11px;font-size:0.75rem}
}

/* ══════════ Hero da Central ══════════
   O lugar onde o usuário entra todo dia é onde ele tem que lembrar que está
   comandando um time de basquete — não abrindo um painel de administração.
   Fundo: meia quadra desenhada na cor do time, com medidas reais (src/Arte.php).
   Não é foto: sem licença, sem borrão quando o texto cresce, na cor certa. */
.hero{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  padding:calc(22px * var(--densidade,1)) 24px;
  /* Zera o margin-top que uma regra genérica de <header> aplicava: o hero
     é a primeira coisa da tela e não deve flutuar longe do submenu. */
  margin:0 0 18px;
  /* `max-width:none` ANULA a regra genérica `.hero{max-width:680px}` lá em
     cima, escrita para o hero centralizado do instalador e que vazou para a
     Central. O efeito medido: 680px de conteúdo dentro de 1352px, metade da
     faixa vazia, e tudo que importa empurrado para baixo da dobra. Foi o
     ChatGPT quem achou, e a medição bateu. */
  max-width:none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cor-time) 26%, var(--s2)) 0%,
                            var(--s2) 62%, var(--s1) 100%);
  border:1px solid var(--line);
}
/* A quadra entra como camada própria, e não no `background` do bloco, para
   poder ser posicionada e recortada sem brigar com o gradiente. */
.hero::before{
  content:"";position:absolute;inset:0;
  background:var(--quadra) no-repeat center bottom / auto 155%;
  opacity:.5;pointer-events:none;
}
.hero > *{position:relative}

.hero-topo{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.hero-escudo{flex:0 0 auto;line-height:0}
.hero-escudo .tlogo{width:4.5rem;height:auto;aspect-ratio:1}
.hero-nome{min-width:0}
.hero-kicker{
  display:block;font-size:0.6875rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--t3);margin-bottom:5px;
}
.hero-nome h1{
  margin:0;font-family:var(--display);
  font-size:clamp(1.6rem, 4.2vw, 2.4rem);line-height:1.05;
  letter-spacing:-.015em;color:var(--t1);
}
.hero-data{margin:5px 0 0;font-size:0.875rem;color:var(--t3)}

/* Blocos de número: valor enorme, rótulo minúsculo. */
.hero-numeros{
  display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px;
}
.hn{
  flex:1 1 7rem;min-width:0;
  padding:calc(10px * var(--densidade,1)) 13px;
  background:color-mix(in srgb, var(--s0) 55%, transparent);
  border:1px solid var(--line);border-radius:var(--r-md);
  backdrop-filter:blur(3px);
}
.hn-valor{
  display:block;font-family:var(--display);
  font-size:1.5rem;line-height:1.1;font-weight:800;color:var(--t1);
  font-variant-numeric:tabular-nums;
}
.hn-rotulo{
  display:block;margin-top:3px;
  font-size:0.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hn-meta.meta-cumprida .hn-valor{color:var(--ok)}
.hn-meta.meta-falhou .hn-valor{color:var(--perigo)}

/* O confronto: dois escudos e a contagem. */
.hero-jogo{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:calc(12px * var(--densidade,1)) 16px;
  background:color-mix(in srgb, var(--s0) 62%, transparent);
  border:1px solid var(--line);border-radius:var(--r-md);
}
.hj-quando{
  font-size:0.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);padding:4px 9px;border:1px solid var(--line);border-radius:999px;
}
.hj-hoje{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.hj-confronto{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
.hj-confronto .hj-escudo{width:2.25rem;height:auto;aspect-ratio:1;flex:0 0 auto}
.hj-sigla{font-family:var(--display);font-size:1.25rem;font-weight:800;color:var(--t1);letter-spacing:.02em}
.hj-vs{font-size:0.875rem;color:var(--t4);font-weight:700}
.hj-link{font-size:0.8125rem;font-weight:700;color:var(--brand);text-decoration:none;white-space:nowrap}
.hj-link:hover{text-decoration:underline}

@media (max-width:620px){
  .hero{padding:18px 15px;border-radius:var(--r-lg)}
  .hero-topo{gap:13px;margin-bottom:15px}
  .hero-escudo .tlogo{width:3.25rem}
  .hn{flex:1 1 5.5rem;padding:9px 11px}
  .hn-valor{font-size:1.25rem}
  .hero-jogo{gap:11px}
  .hj-link{flex:1 1 100%;text-align:right}
}

/* ══════════ Foto de cena na notícia ══════════
   A matéria ganha imagem; o recado da diretoria não. É o que faz a caixa de
   entrada parecer uma banca em vez de uma lista de e-mails — e a diferença
   entre notícia e recado fica visível antes de ler o remetente. */
.inbox-page-msg.com-foto{
  display:grid;
  grid-template-columns:7.5rem 1fr;
  gap:14px;
  align-items:stretch;
  overflow:hidden;
}
.ipm-foto{
  /* Proporção fixa em vez de height:100%: numa grade, altura percentual
     resolve contra a linha e a linha é medida pelo conteúdo — o resultado
     era um cartão de uma linha de texto ficar mais alto que um de duas. */
  width:100%;aspect-ratio:4/3;height:auto;align-self:start;
  object-fit:cover;
  border-radius:var(--r-sm);
  /* A foto é cenário, não assunto: dessaturada para o texto ao lado
     continuar sendo o que se lê primeiro. O brilho sobe um pouco em vez de
     descer — escurecer uma foto de contraluz, que já é escura, apagava a
     imagem inteira. O contraste devolve a forma. */
  filter:saturate(.78) brightness(1.04) contrast(1.06);
  background:var(--s4);
}
.inbox-page-msg.com-foto:hover .ipm-foto{filter:saturate(1) brightness(1.12) contrast(1.06)}

@media (max-width:620px){
  /* No celular a foto vira faixa no topo: 7,5rem de largura comeriam
     metade da linha de texto. */
  .inbox-page-msg.com-foto{grid-template-columns:1fr;gap:11px}
  .ipm-foto{aspect-ratio:21/9}
}

/* ══════════ A estrela no hero ══════════
   O rosto grande, recortado, sangrando na borda, com o cenário atrás — é a
   composição que FIFA e Madden usam no hero, e é o que amarra time, jogador e
   cena numa coisa só. Funciona nos dois modos: foto real da CDN da NBA, ou o
   rosto gerado (player_photo decide). */
.hero-com-estrela{ --estrela:clamp(6rem, 19vw, 10.5rem); padding-right:calc(var(--estrela) + 14px) }
/* A figura é medida pela ALTURA do hero, não pela largura da tela: é isso
   que a faz parecer uma pessoa em pé no bloco, e não uma miniatura no
   canto. O recorte 3/4 transforma o headshot deitado (260x190) num retrato. */
.hero-estrela{
  position:absolute;right:0;top:0;bottom:0;z-index:1;
  display:flex;align-items:flex-end;justify-content:center;
  text-decoration:none;line-height:0;pointer-events:auto;
}
.player-photo.he-foto{
  width:var(--estrela);height:auto;aspect-ratio:3/4;
  object-fit:cover;object-position:top center;
  border-radius:0;
  /* Desvanece na base e à esquerda, para o rosto sair da cena em vez de
     terminar num retângulo colado no canto. */
  -webkit-mask-image:linear-gradient(to bottom, #000 58%, transparent 100%),
                     linear-gradient(to right, transparent 0, #000 32%);
          mask-image:linear-gradient(to bottom, #000 58%, transparent 100%),
                     linear-gradient(to right, transparent 0, #000 32%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  filter:saturate(1.05) contrast(1.04);
}
.he-nome{
  position:absolute;left:0;right:0;bottom:6px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:0.6875rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--t2);
  text-shadow:0 1px 3px rgba(0,0,0,.8);
  line-height:1.2;padding:0 6px;text-align:center;
}
.he-nome b{
  background:var(--brand);color:var(--on-brand);
  padding:1px 5px;border-radius:var(--r-sm);font-size:0.6875rem;
}
.hero-estrela:hover .he-foto{filter:saturate(1.15) contrast(1.06) brightness(1.06)}

@media (max-width:620px){
  /* No celular o rosto roubaria a largura do nome do time. Some, e o elenco
     continua a um toque em "Meu Time". */
  .hero-com-estrela{padding-right:15px;--estrela:0}
  .hero-estrela{display:none}
}

/* ══════════ Faixa de situação do jogador ══════════
   Tirada das skins CTRL 26 e WTCS Gold: uma fileira de mini-painéis, cada um
   de um FORMATO diferente — texto, barra, gráfico, trio de números. É o que
   faz caber muita coisa "de relance" sem virar parede de número. */
.faixa-situacao{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(8.5rem, 1fr));
  gap:10px;margin-bottom:18px;
}
.fs-painel{
  display:flex;flex-direction:column;gap:4px;
  padding:calc(12px * var(--densidade,1)) 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  min-width:0;
}
.fs-largo{grid-column:span 2}
.fs-titulo{
  font-size:0.6875rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--t4);
}
.fs-valor{
  font-family:var(--display);font-size:1.0625rem;line-height:1.15;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fs-nota{font-size:0.6875rem;color:var(--t4);line-height:1.35}
/* Cor pareada com a palavra, nunca sozinha. */
.cor-ok{color:var(--ok)} .cor-alerta{color:var(--alerta)} .cor-perigo{color:var(--perigo)}

.fs-barra{display:block;height:4px;border-radius:var(--r-sm);background:var(--s5);overflow:hidden}
.fs-barra i{display:block;height:100%;background:var(--accent2);border-radius:var(--r-sm)}

/* As cinco barras da forma: a sequência se lê antes de qualquer número. */
.fs-forma{display:flex;align-items:flex-end;gap:4px;height:2.25rem}
.fs-forma i{
  flex:1 1 0;border-radius:var(--r-sm) 3px 1px 1px;min-height:12%;
  background:var(--t4);
}
.fs-forma i.alta{background:var(--ok)}
.fs-forma i.media{background:var(--accent2)}
.fs-forma i.baixa{background:var(--t4)}

.fs-trio{display:flex;gap:14px}
.fs-trio b{
  display:flex;flex-direction:column;gap:1px;
  font-family:var(--display);font-size:1.125rem;color:var(--t1);
  font-variant-numeric:tabular-nums;
}
.fs-trio small{
  font-size:0.6875rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--t4);font-family:var(--ui);
}

@media (max-width:620px){
  .faixa-situacao{grid-template-columns:repeat(2, 1fr);gap:8px}
  .fs-largo{grid-column:span 2}
}

/* O hero do jogador era uma linha rígida (flex nowrap): foto, OVR, texto e
   coluna da direita disputando a largura, e o texto perdia — ficava com 90px
   e o nome enrolava letra a letra. Agora ele quebra, e a coluna de texto tem
   uma largura mínima própria. */
.ph2-body{ flex-wrap:wrap; }
.ph2-info{ flex:1 1 14rem; min-width:0; }
.ph2-photo{ flex:0 0 auto; }
.ph2-right{ flex:0 0 auto; }
@media (max-width:560px){
  .ph2-body{ gap:14px;padding:18px 16px; }
  .ph2-info h1{ font-size:1.375rem; }
  .ph2-ovr{ width:60px;height:60px;font-size:1.75rem; }
}

/* ══════════ Livro de recordes ══════════
   As lendas e o que o save acumula na mesma lista, com uma barra mostrando a
   distância entre eles. É a barra que transforma "38.387 pontos" de número
   solto em meta: dá para ver quanto falta. */
.livro-abas{display:flex;flex-wrap:wrap;gap:4px}
.la-item{
  padding:4px 11px;border-radius:999px;text-decoration:none;
  font-size:0.75rem;font-weight:700;color:var(--t4);
  border:1px solid transparent;
}
.la-item:hover{color:var(--t1);background:var(--s4)}
.la-ativa{color:var(--t1);background:var(--s5);border-color:var(--line-forte)}

.livro-lista{list-style:none;margin:12px 0 0;padding:0;counter-reset:none}
.lv-linha{
  display:grid;
  grid-template-columns:1.75rem minmax(7rem,1fr) minmax(3rem,8rem) auto 3.5rem;
  align-items:center;gap:10px;
  padding:calc(8px * var(--densidade,1)) 0;
  border-bottom:1px solid var(--line);
}
.lv-linha:last-child{border-bottom:0}
.lv-pos{
  font-family:var(--display);font-size:0.8125rem;font-weight:800;
  color:var(--t4);text-align:right;font-variant-numeric:tabular-nums;
}
.lv-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--t2)}
.lv-nome a{color:var(--t1);text-decoration:none}
.lv-nome a:hover{text-decoration:underline}
/* Marca do save: o selo é texto, não só a borda — cor sozinha não informa. */
.lv-selo{
  margin-left:7px;font-size:0.6875rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand);
}
.lv-do-save{background:color-mix(in srgb, var(--brand) 7%, transparent)}
.lv-barra{display:block;height:5px;border-radius:var(--r-sm);background:var(--s4);overflow:hidden}
.lv-barra i{display:block;height:100%;background:var(--accent2);border-radius:var(--r-sm)}
.lv-do-save .lv-barra i{background:var(--brand)}
.lv-valor{
  font-family:var(--display);font-size:0.9375rem;font-weight:800;color:var(--t1);
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.lv-valor small{font-size:0.6875rem;color:var(--t4);margin-left:3px;font-family:var(--ui)}
.lv-quando{font-size:0.6875rem;color:var(--t4);text-align:right;white-space:nowrap}

.livro-curta .lv-linha{grid-template-columns:1.75rem 1fr auto 5rem}

@media (max-width:640px){
  .lv-linha{grid-template-columns:1.5rem 1fr auto;gap:8px}
  .lv-barra,.lv-quando{display:none}
  .livro-curta .lv-linha{grid-template-columns:1.5rem 1fr auto}
}


/* ══════════ Faixas de volume ══════════
   Uma por tipo de som, e zero desliga. O rótulo diz "desligado" por extenso
   no zero, porque a palavra responde à pergunta que a pessoa está fazendo e
   "0%" não. */
.lp-vol{margin-bottom:11px}
.lp-vol:last-child{margin-bottom:0}
.lp-vol-topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:0.75rem;font-weight:700;color:var(--t2);margin-bottom:5px;cursor:pointer;
}
.lp-vol-num{
  font-size:0.6875rem;font-weight:800;letter-spacing:.04em;
  color:var(--t4);font-variant-numeric:tabular-nums;
}
.lp-vol-ajuda{
  display:block;margin-top:4px;
  font-size:0.6875rem;color:var(--t4);line-height:1.35;
}

/* A faixa é desenhada na mão porque o controle nativo ignora a paleta e fica
   azul de sistema no meio de uma interface roxa. */
.lp-faixa{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:var(--r-sm);margin:0;
  background:var(--s5);cursor:pointer;
}
.lp-faixa::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;
  background:var(--brand);border:2px solid var(--s0);cursor:pointer;
}
.lp-faixa::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:var(--brand);border:2px solid var(--s0);cursor:pointer;
}
.lp-faixa:focus-visible{outline:2px solid var(--brand);outline-offset:4px}

/* ══════════ Cabeçalho de tela ══════════
   Cada view abria com um <h1> solto, e o resultado era que toda tela interna
   parecia um documento e não um jogo. Agora o título tem a arte da área atrás
   — quadra em Meu Time, arquibancada na Liga, aro na Temporada. */
.ph{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
  padding:calc(16px * var(--densidade,1)) 20px;
  margin:0 0 16px;border-radius:var(--r-lg);
  background:linear-gradient(110deg,
      color-mix(in srgb, var(--cor-time) 18%, var(--s2)) 0%,
      var(--s2) 58%, var(--s1) 100%);
  border:1px solid var(--line);
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:var(--arte) no-repeat right center / auto 190%;
  opacity:.42;pointer-events:none;
}
/* A arquibancada é textura e ladrilha; a quadra e o aro são peça única. */
.ph[data-area="liga"]::before{background:var(--arte) repeat center / 240px auto;opacity:.3}
.ph > *{position:relative}

.ph-txt{min-width:0}
.ph-titulo{
  margin:0;font-family:var(--display);
  font-size:clamp(1.25rem, 3vw, 1.75rem);line-height:1.15;
  letter-spacing:-.01em;color:var(--t1);
}
.ph-legenda{
  margin:5px 0 0;font-size:0.8125rem;line-height:1.5;color:var(--t3);
  max-width:62ch;
}
.ph-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

@media (max-width:620px){
  .ph{padding:14px 15px;border-radius:var(--r-md)}
  .ph::before{opacity:.3}
}

/* ══════════ Quadra atrás do placar e da escalação ══════════
   Duas telas onde a quadra não é decoração: no placar porque é o único
   momento em que a bola está rolando, e na escalação porque os cinco
   titulares estão literalmente posicionados nela. */
.sb-quadra, .lineup-court{position:relative}
.sb-quadra::before, .lineup-court::before{
  content:"";position:absolute;inset:0;
  background:var(--quadra) no-repeat center bottom / auto 150%;
  opacity:.4;pointer-events:none;border-radius:inherit;
}
/* Na escalação a quadra é o chão: entra inteira e de frente, não cortada. */
.lineup-court::before{
  background:var(--quadra) no-repeat center top / contain;
  opacity:.5;
}
.sb-quadra > *, .lineup-court > *{position:relative}

/* Rótulo só para leitor de tela: o campo de busca tem um placeholder, mas
   placeholder não é rótulo — ele some assim que a pessoa digita, e leitor de
   tela não garante lê-lo. */
.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;
}

/* ══════════ A arena do time ══════════
   A foto preenche o bloco e o texto fica sobre um degradê — e é por isso que o
   degradê existe: sem ele o crédito ficaria ilegível em metade das fotos, e o
   crédito é condição da licença, não enfeite. */
.arena{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);margin-bottom:16px;
  border:1px solid var(--line);
  background:var(--s2);
  min-height:9rem;
  display:flex;align-items:flex-end;
}
.arena-foto{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) brightness(.82);
}
/* Sem foto: a quadra desenhada, para o bloco não virar um retângulo vazio. */
.arena:not(.arena-com-foto)::after{
  content:"";position:absolute;inset:0;
  background:var(--quadra) no-repeat center bottom / auto 150%;
  opacity:.4;
}
.arena-txt{
  position:relative;z-index:1;width:100%;
  padding:calc(16px * var(--densidade,1)) 18px;
  /* O degradê garante contraste do texto seja qual for a foto. */
  background:linear-gradient(to top, rgba(8,4,18,.92) 0%, rgba(8,4,18,.72) 55%, transparent 100%);
}
.arena-kicker{
  display:block;font-size:0.6875rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t3);margin-bottom:3px;
}
.arena-nome{
  margin:0;font-family:var(--display);
  font-size:clamp(1.125rem, 2.6vw, 1.5rem);line-height:1.2;color:#fff;
}
.arena-credito{
  margin:7px 0 0;font-size:0.6875rem;color:rgba(255,255,255,.72);line-height:1.4;
}
.arena-credito a{color:rgba(255,255,255,.9)}

@media (max-width:620px){
  .arena{min-height:7.5rem}
  .arena-txt{padding:13px 14px}
}

/* ══════════ A arena do mandante atrás do placar ══════════
   Quem joga em casa dá o cenário. É o mesmo princípio da quadra desenhada
   logo acima, só que com a foto do ginásio de verdade — e a foto ENTRA NO
   LUGAR da quadra (classe `sb-arena` em vez de `sb-quadra`), nunca por cima:
   linha de quadra sobre fotografia vira sujeira.

   O véu escuro não é estética, é cálculo. Sobre uma foto qualquer, o pior
   caso é um pixel branco (luminância 1). Com véu de 88% de #06080e sobra
   L≈0,127, e aí texto #eef1f6 bate 5,2:1 — acima do piso de 4,5:1 da WCAG
   para texto normal. Com véu mais leve o placar ficaria bonito em metade das
   arenas e ilegível na outra metade. A faixa de cima é mais clara porque ali
   não há texto: é onde o ginásio aparece. */
.sb-arena{position:relative}
.sb-arena::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(6,8,14,.56) 0%,
      rgba(6,8,14,.88) 15%,
      rgba(6,8,14,.90) 100%),
    var(--arena) no-repeat center 32% / cover;
  pointer-events:none;border-radius:inherit;
}
.sb-arena > *{position:relative}
/* A SIGLA SOBRE A FOTO.
   A cor do time já vem clareada do PHP (`cor_no_escuro()`), o que tira a
   sigla do breu sem lavar o matiz. Mas clarear só resolve metade: a foto tem
   pontos claros e escuros, e a mesma cor que lê bem sobre a arquibancada
   some sobre um refletor.

   Quem fecha a conta é o halo preto — é o contorno que placar de transmissão
   usa, e pela mesma razão: ele fabrica o fundo local da letra, então o
   contraste deixa de depender do que a fotografia tem atrás. O brilho na cor
   do time vem por último, já por cima do halo, só como presença. */
.sb-arena .sb-abbr{
  text-shadow:
    0 1px 2px #000, 0 -1px 2px #000, 1px 0 2px #000, -1px 0 2px #000,
    0 2px 10px rgba(0,0,0,.9),
    0 0 26px var(--c);
}
.sb-arena .sb-score{
  text-shadow:0 2px 12px rgba(0,0,0,.95), 0 0 26px rgba(255,255,255,.14);
}
.sb-arena .sb-city,
.sb-arena .sb-clock,
.sb-arena .sb-quarter{text-shadow:0 1px 6px rgba(0,0,0,.9)}
/* O cinza de apoio não sobrevive a uma fotografia: sobre o véu ele cairia
   para ~2:1. Todo texto de apoio que fica SOBRE a foto vai de branco quase
   puro — cidade, período e o rótulo de velocidade. */
.sb-arena .sb-city,
.sb-arena .sb-quarter,
.sb-arena .sb-speed{color:#eef1f6}

/* ══════════ Onde o jogo é ══════════
   Atravessa as três colunas do placar. Vem por último de propósito: o
   resultado é o assunto, o local é o contexto. */
.sb-venue{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
  justify-content:center;
  margin:14px 0 0;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:0.75rem;line-height:1.5;
}
.sb-venue .sbv-local{color:#eef1f6}
.sb-venue .sbv-local strong{font-weight:700}
/* 0,82 e não 0,70: a 12px isto é texto normal, e sobre o véu o cinza mais
   fraco dava 3,9:1. Com 0,82 dá 4,6:1. O crédito é obrigatório pela licença —
   então tem de ser legível, não só estar presente. */
.sb-venue .sbv-cred{color:rgba(255,255,255,.82)}
.sb-venue .sbv-cred a{color:#fff}

@media (max-width:620px){
  .sb-venue{margin-top:11px;padding-top:10px;font-size:0.6875rem}
}

/* ══════════ BUSCA GLOBAL ══════════
   Fixa na barra de cima, como nos gerenciadores. O campo é discreto em
   repouso porque não compete com o nome do time nem com a próxima partida;
   ao receber foco ele cresce e ganha contorno, que é quando ele importa.

   O painel é `position:absolute` ancorado no campo, e não um modal: busca
   que escurece a tela inteira interrompe o que a pessoa estava fazendo, e
   aqui ela quase sempre está só espiando um dado antes de voltar. */
.tn-busca{
  position:relative;display:flex;align-items:center;gap:6px;
  margin-inline:auto 8px;
}
.tb-lupa{
  position:absolute;left:9px;pointer-events:none;
  font-size:1rem;line-height:1;color:var(--t3);
}
.tb-campo{
  width:clamp(130px, 17vw, 230px);
  padding:7px 30px 7px 27px;
  background:rgba(255,255,255,.06);
  border:1px solid transparent;border-radius:var(--r-sm);
  color:var(--text);font-size:0.8125rem;font-family:inherit;
  transition:width .16s ease, background .16s ease, border-color .16s ease;
}
.tb-campo::placeholder{color:var(--t3)}
.tb-campo:focus{
  outline:none;width:clamp(200px, 26vw, 340px);
  background:var(--s2);border-color:var(--brand);
}
/* O X nativo do type=search é cinza-sistema e não acompanha o tema. */
.tb-campo::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* A tecla do atalho, mostrada como tecla. Some no foco: ali ela já cumpriu
   o papel, que era avisar que o atalho existe. */
.tb-atalho{
  position:absolute;right:8px;pointer-events:none;
  font:600 0.6875rem/1 var(--mono, ui-monospace, monospace);
  color:var(--t3);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);
  padding:2px 5px;
}
.tb-campo:focus ~ .tb-atalho{opacity:0}

.busca-painel{
  position:absolute;top:calc(100% + 7px);right:0;
  width:min(420px, 92vw);max-height:min(62vh, 480px);overflow:auto;
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  padding:6px;z-index:70;
}
.bp-grupo + .bp-grupo{margin-top:4px;border-top:1px solid var(--line);padding-top:4px}
/* 0.6875rem = 11px, o piso do projeto. Caíra para 10px aqui "porque é só um
   rótulo", e rótulo pequeno é precisamente o que custou reembolso ao FM26.
   Caixa alta e espaçamento já dão o ar de etiqueta sem encolher a letra. */
.bp-titulo{
  font-size:0.6875rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--t3);padding:7px 9px 4px;
}
.bp-item{
  display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;
  gap:2px 10px;
  padding:7px 9px 7px 13px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--text);position:relative;
}
/* A listra complementa a foto ou o escudo, sobretudo quando a imagem falha. */
.bp-item::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;width:3px;
  border-radius:var(--r-sm);background:var(--bp-cor, transparent);
}
/* As três células POSICIONADAS, uma a uma.
   Deixar o grid colocar sozinho jogava o número para a primeira coluna e
   empurrava o nome para a direita: lia-se "87 ... Bojan Vasquez", com o dado
   de apoio na frente do nome. Numa lista de resultados o nome é o assunto;
   ele vem primeiro e começa na margem. */
.bp-foto,.bp-escudo{grid-column:1;grid-row:1 / span 2;width:30px;height:30px;border-radius:var(--r-sm)}
.bp-foto{object-fit:cover;background:var(--s4)}
.bp-escudo{display:grid;place-items:center;background:var(--bp-cor,var(--s4));color:#fff;font-size:.6875rem;font-weight:800}
.bp-nome{grid-column:2;grid-row:1;font-weight:600;font-size:0.875rem;line-height:1.3}
.bp-sub {grid-column:2;grid-row:2;font-size:0.75rem;color:var(--t2);line-height:1.3}
.bp-marca{
  grid-column:3;grid-row:1 / span 2;align-self:center;
  font-weight:800;font-size:0.875rem;
  font-variant-numeric:tabular-nums;color:var(--brand);
}
/* Mouse e teclado chegam ao mesmo destaque: quem alterna entre os dois não
   deve ver dois comportamentos diferentes. */
.bp-item:hover,
.bp-item.bp-ativo{background:var(--s3, rgba(255,255,255,.07))}
.bp-item.bp-ativo .bp-marca{color:var(--text)}
.bp-vazio{margin:0;padding:14px 11px;font-size:0.8125rem;color:var(--t2)}

@media (max-width:860px){
  /* Na barra estreita o campo vira só a lupa até receber foco — o nome do
     time vale mais espaço que um campo vazio. */
  .tb-campo{width:34px;padding-right:9px}
  .tb-atalho{display:none}
  .tb-campo:focus{width:min(62vw, 300px);padding-right:9px}
}

/* ══════════ O CANTO DIREITO DO PROTÓTIPO: data + Continuar ══════════ */
.tn-dia{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  flex-shrink:0;line-height:1.2;
}
.tn-dia-data{font-size:0.8125rem;font-weight:700;color:var(--t1);white-space:nowrap}
.tn-dia-sub{font-size:0.6875rem;color:var(--t4);white-space:nowrap}

/* O botão sempre diz "Continuar ›"; o pill é o do protótipo — lima cheio,
   texto escuro, raio de 10px. Vale para o <a> e para o <button> do form. */
.tn-continuar .btn,
.tn-continuar a{
  display:inline-flex;align-items:center;gap:6px;
  height:40px;padding:0 18px;border-radius:var(--r-lg);
  background:var(--brand);color:var(--on-brand);
  font-weight:700;font-size:0.875rem;white-space:nowrap;
  border:0;box-shadow:none;
}
.tn-continuar .btn:hover,
.tn-continuar a:hover{background:var(--brand2);color:var(--on-brand)}
.tn-continuar form{display:inline}

@media (max-width:1100px){
  /* Em barra estreita a data cede antes do botão: a ação vale mais que o
     carimbo de quando. */
  .tn-dia{display:none}
}