/* ===== DASHBOARD — CARD DE PARTIDA (estilo placar de transmissao) ===== */
.next-match-card {
  background:
    radial-gradient(ellipse 500px 260px at 100% 0%, rgba(227,167,58,0.10), transparent 60%),
    radial-gradient(ellipse 500px 260px at 0% 100%, rgba(20,92,82,0.12), transparent 60%),
    #FFFDF8;
  border: 1px solid rgba(11,61,58,0.35);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
}
.next-match-card::before {
  content: "PRÓXIMO JOGO";
  position: absolute; top: 16px; left: -34px;
  transform: rotate(-45deg);
  background: var(--live);
  color: #fff;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 40px;
  box-shadow: 0 4px 12px rgba(214,85,63,0.4);
}
.nm-kickoff {
  text-align: center;
  font-size: 12px;
  color: var(--text-2);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  margin-bottom: 12px;
}
.nm-kickoff b { color: var(--text-0); }
.nm-kickoff-clock {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-hero);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.nm-round {
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-align: center;
  margin-bottom: 16px;
}
.nm-teams { display: flex; align-items: center; justify-content: center; gap: 32px; margin: 10px 0 24px; }
.nm-team { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 140px; }
.nm-team-name { font-family: var(--font-display); font-size: 14px; text-align: center; letter-spacing: 0.01em; }
.nm-vs {
  font-family: var(--font-hero); color: var(--gold); font-size: 26px;
  text-shadow: 0 0 20px var(--gold-glow);
}
.nm-crest-lg {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  border: 3px solid rgba(255,255,255,0.15);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.nm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nm-actions .btn { flex: 1 1 150px; max-width: 220px; justify-content: center; text-align: center; }

/* ===== KPIs ===== */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; margin: 18px 0; }
.kpi {
  background: #FFFDF8;
  border: 1px solid rgba(11,61,58,0.35);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.kpi::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--pitch), var(--gold));
  opacity: 0.7;
}
.kpi:hover { border-color: var(--line-bright); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.kpi .val { font-family: var(--font-hero); font-size: 27px; color: var(--gold); letter-spacing: 0.01em; }
.kpi .lbl { font-size: 10.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 5px; font-family: var(--font-display); }

.mini-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mini-table th {
  text-align: left; color: var(--text-2); font-weight: 500; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: 0.05em; padding: 6px 8px; border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
}
.mini-table td { padding: 9px 8px; border-bottom: 1px solid var(--bg-3); font-variant-numeric: tabular-nums; }
.mini-table tr.me { background: rgba(227,167,58,0.07); }
.mini-table tr.me td:first-child { border-left: 2px solid var(--gold); }
.mini-table td.pos { color: var(--text-2); width: 24px; }
.mini-table td.pts { color: var(--gold); font-weight: 700; }

/* ===== TABLE VIEW ===== */
.table-full { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-full th {
  text-align: left; color: var(--text-2); font-weight: 500; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.06em; padding: 11px 12px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg-1); font-family: var(--font-display);
}
.table-full td { padding: 11px 12px; border-bottom: 1px solid var(--bg-3); font-variant-numeric: tabular-nums; }
.table-full tr:hover td { background: var(--bg-2); }
.table-full tr.me td { background: rgba(227,167,58,0.07); }
.zone-g4 td:first-child { box-shadow: inset 3px 0 0 var(--pitch); }
.zone-z4 td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

.team-cell { display: flex; align-items: center; gap: 10px; }

/* ===== CALENDAR ===== */
.round-block { margin-bottom: 22px; }
.round-block h4 {
  font-size: 12px; color: var(--text-2); margin-bottom: 10px; letter-spacing: 0.14em;
  font-family: var(--font-display);
}
.fixture-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 16px; margin-bottom: 8px; font-size: 13px;
  transition: border-color 0.15s;
}
.fixture-row:hover { border-color: var(--line-bright); }
.fixture-row.played { opacity: 0.65; }
.fixture-row.next-up { border-color: var(--live); box-shadow: 0 0 0 1px var(--live-glow); }
.fixture-teams { display: flex; align-items: center; gap: 14px; flex: 1; }
.fixture-score { font-family: var(--font-hero); font-size: 16px; color: var(--gold); min-width: 60px; text-align: center; }

/* ===== RESULTADOS (ex-HISTÓRICO) ===== */
.results-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.results-col-title {
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2); margin-bottom: 10px;
}
.results-list { max-height: 640px; overflow-y: auto; padding-right: 4px; }
.fixture-row-with-date { flex-wrap: nowrap; }
.fixture-date {
  flex: 0 0 auto; width: 74px; font-size: 10.5px; line-height: 1.3;
  color: var(--text-2); font-family: var(--font-display);
}
@media (max-width: 900px) {
  .results-columns { grid-template-columns: 1fr; }
}

/* ===== TATICAS ===== */
.tactics-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.option-list { display: flex; flex-direction: column; gap: 8px; }
.option-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(11,61,58,0.35); background: #FFFDF8;
  font-size: 13px; transition: all 0.15s; cursor: pointer;
}
.option-item:hover { border-color: var(--line-bright); }
.option-item.selected { border-color: var(--pitch); background: rgba(20,92,82,0.10); color: var(--pitch); }
.option-item small { color: var(--text-2); display: block; margin-top: 3px; }
.option-item.selected small { color: var(--text-1); }

/* ===== MATCH DAY ===== */
.matchday-header { text-align: center; margin-bottom: 6px; }
.scoreboard {
  display: flex; align-items: center; justify-content: center; gap: 40px;
  background: linear-gradient(160deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.scoreboard::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,92,82,0.08), transparent 30%, transparent 70%, rgba(214,85,63,0.08));
  pointer-events: none;
}
.sb-team { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 160px; }
.sb-score { font-family: var(--font-hero); font-size: 58px; display: flex; align-items: center; gap: 20px; letter-spacing: 0.02em; }

/* Barrinha "quem tá mais no ataque agora" (pressão em tempo real, cores
   dos dois times) -- ver UI.momentumBarMarkup()/App.applyMomentumEvent()
   em ui-match.js/app-match.js. As duas faixas mudam de largura suavemente
   (transition) conforme a narração revela lances -- nunca 100% de uma
   cor só, sempre "cabo de guerra". */
.momentum-bar {
  display: flex; width: 100%; height: 8px; border-radius: 4px; overflow: hidden;
  margin: 0 0 16px; box-shadow: inset 0 0 0 1px var(--line);
}
.momentum-bar-fill { height: 100%; transition: width 0.6s ease; }
.sb-clock {
  font-family: var(--font-display); font-size: 12.5px; color: var(--live); text-align: center; letter-spacing: 0.12em;
  display: inline-flex; align-items: center; gap: 6px;
}
.sb-clock::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 8px var(--live-glow);
  animation: pulseLive 1.4s ease-in-out infinite;
}
@keyframes pulseLive { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Botão "fechar" fixo no canto superior direito da tela de Amistoso PvP
   (ver UI.renderPvpWatchShell() em ui-pvp.js) -- ao contrário da partida
   oficial/amistoso contra IA (que travam a tela até "Continuar", ver
   UI.renderMatchEndActions()), assistir um PvP não tem nada em jogo pro
   ESPECTADOR sair no meio (o resultado já foi decidido pelo servidor no
   aceite do desafio), então dá pra sair a qualquer momento, não só no fim.
   Pedido do usuário: sem botão "Voltar" lá embaixo, só este X fixo aqui em
   cima. */
.pvpwatch-close-btn {
  position: fixed; top: 18px; right: 18px; z-index: 70;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-1);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.pvpwatch-close-btn:hover { border-color: var(--live); color: var(--live); }

.watch-field-svg {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  margin: 16px 0;
  background: #2f7d3a;
}
.watch-dot { transition: r 0.2s ease; }

.commentary-box {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
  height: 340px; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}
/* A narração (voz do narrador) é azul na maior parte do texto — inclusive
   nos gols, que ficam em negrito pra se destacar sem trocar de cor. Os
   comentários da comentarista (ver .narrator-comment) são a única linha
   em rosa dentro do chat. */
.commentary-line { font-size: 13.5px; line-height: 1.5; color: var(--blue); display: flex; gap: 10px; animation: fadeIn 0.3s ease; }
.commentary-line .min { color: var(--gold); font-family: var(--font-display); flex-shrink: 0; width: 42px; }
.commentary-line.goal { color: var(--blue); font-weight: 700; text-shadow: 0 0 10px rgba(43,159,224,0.35); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }

/* Linha extra de reação do narrador (gol)/comentarista (falta ou cartão),
   em rosa, com a mini foto de quem está falando. */
.commentary-line.narrator-comment {
  color: var(--live);
  font-weight: 600;
  font-style: italic;
  align-items: center;
}
.commentary-line.narrator-comment .min { color: var(--live); opacity: 0.85; }
.commentary-avatar {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--live); box-shadow: 0 0 8px var(--live-glow);
  flex-shrink: 0;
}

/* "Corte" do narrador/comentarista que aparece na lateral da tela (fora da
   coluna central da partida) durante gol/falta-cartão, com a imagem que
   estiver configurada em assets/img/departament/narradores/. Some sozinho
   se o arquivo ainda não existir (ver onerror em UI.reactionImagesMarkup). */
.commentary-reaction-img {
  position: fixed; top: 50%; width: min(660px, 34vw);
  transform: translateY(-50%) scale(0.85);
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity 0.35s ease, transform 0.35s ease;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,0.6));
}
.commentary-reaction-img.right { right: 10px; }
.commentary-reaction-img.left { left: 10px; }
.commentary-reaction-img.show { opacity: 1; transform: translateY(-50%) scale(1); }

/* Só esconde em telas realmente estreitas (celular/janela minúscula) — a
   maioria das telas de notebook/desktop (mesmo 1280-1440px, muito comuns)
   precisa continuar mostrando essas imagens nos lances importantes. */
@media (max-width: 760px) {
  .commentary-reaction-img { display: none; }
}

.match-controls { display: flex; gap: 10px; justify-content: center; margin: 18px 0; }
.match-stats-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
.stat-row { display: grid; grid-template-columns: 50px 1fr 90px 1fr 50px; align-items: center; gap: 10px; font-size: 12.5px; }
.stat-row .label { text-align: center; color: var(--text-2); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; font-family: var(--font-display); }
.stat-row .num { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-row .bar-l, .stat-row .bar-r { display: flex; }
.stat-row .bar-r { justify-content: flex-end; }

/* ===== INTERVALO (SUBSTITUICOES / TATICA) ===== */
.halftime-controls-row { display: flex; gap: 10px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }

.halftime-section { display: flex; flex-direction: column; }
.halftime-section label {
  font-size: 10.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
  font-family: var(--font-display);
}
.halftime-section select { width: 100%; text-align: left; }
.sub-option-list { display: flex; flex-direction: column; gap: 8px; }
.sub-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2);
  font-size: 12.5px; cursor: pointer; transition: all 0.15s;
}
.sub-option:hover { border-color: var(--gold); }
.sub-option.selected { border-color: var(--gold); background: rgba(227,167,58,0.10); color: var(--gold); }
.sub-option small { display: block; color: var(--text-2); margin-top: 3px; font-weight: 400; }
.sub-option.selected small { color: var(--gold); opacity: 0.8; }

/* ===== GAVETA LATERAL DE TÁTICAS (INTERVALO) — igual ao menu principal ===== */
.tactics-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(6,10,8,0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 200;
}
.tactics-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.tactics-drawer {
  position: fixed; top: 0; right: -400px; width: 380px; max-width: 90vw; height: 100%;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border-left: 1px solid var(--line);
  box-shadow: -10px 0 32px rgba(0,0,0,0.45);
  padding: 22px 18px; overflow-y: auto;
  transition: right 0.25s ease;
  z-index: 201;
  backdrop-filter: blur(14px);
}
.tactics-drawer.open { right: 0; }
.tactics-drawer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pitch), var(--gold) 50%, var(--live));
}
.tactics-drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tactics-drawer-header h4 {
  font-size: 12.5px; letter-spacing: 0.08em; color: var(--gold); text-transform: uppercase;
  font-family: var(--font-display);
}
.drawer-close {
  background: none; border: 1px solid var(--line); color: var(--text-1); border-radius: 6px;
  width: 28px; height: 28px; cursor: pointer; font-size: 13px; transition: all 0.15s;
}
.drawer-close:hover { border-color: var(--gold); color: var(--gold); }
.tactics-drawer-body { display: flex; flex-direction: column; gap: 22px; }

@media (max-width: 480px) {
  .tactics-drawer { width: 100%; max-width: 100%; right: -100%; }
}

/* ===== APRESENTAÇÃO (NARRADOR / COMENTARISTA) =====
   Janela em overlay fixo (por cima de tudo, inclusive o fundo fotográfico),
   sempre centralizada na tela — tamanho igual a 60% do viewport (ou seja,
   40% menor que o fundo), preservando a proporção 16:9 das imagens. */
.presentation-shell {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 20px; box-sizing: border-box;
}
.presentation-frame {
  position: relative;
  width: min(60vw, 106.67vh);
  aspect-ratio: 640 / 360;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 24px 64px rgba(0,0,0,0.65);
  background: #000;
  /* Vira um "container" pra que o texto do balão escale em cqw — ou seja,
     em proporção direta ao tamanho REAL do quadro, e não do viewport. Isso
     evita que a fonte fique grande/pequena demais em relação ao balão
     quando a janela do navegador é menor (o balão em si já escala em % do
     quadro, então a fonte precisa acompanhar na mesma base). */
  container-type: inline-size;
}
.presentation-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.presentation-bubble {
  position: absolute; display: flex; align-items: center; justify-content: center;
  padding: 2% 5%; box-sizing: border-box;
}
.presentation-bubble p {
  margin: 0; color: #17181a; text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(8px, 2cqw, 20px);
  line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.presentation-bubble.pb-right { left: 60.6%; top: 4.17%; width: 25%; height: 24.7%; }
.presentation-bubble.pb-left { left: 18.3%; top: 4.17%; width: 30.9%; height: 30.8%; }
.presentation-bubble.pb-twin-left { left: 1.4%; top: 4.4%; width: 25%; height: 24.7%; }
.presentation-bubble.pb-twin-right { left: 46.25%; top: 2.2%; width: 25%; height: 24.7%; }
.presentation-name {
  position: absolute; bottom: 5%; padding: 5px 14px; border-radius: 100px;
  background: rgba(6,10,8,0.72); border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--font-display); font-size: clamp(9px, 1.3cqw, 14px); letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}
.presentation-name.pb-name-left { left: 5%; }
.presentation-name.pb-name-right { right: 5%; }
.presentation-controls { display: flex; justify-content: center; }

/* ===== CONFIG ===== */
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px; border-bottom: 1px solid var(--bg-3);
}
.settings-row:last-child { border-bottom: none; }
.settings-row .desc { font-size: 12px; color: var(--text-2); margin-top: 2px; }

.switch { width: 42px; height: 24px; background: var(--bg-4); border-radius: 100px; position: relative; border: 1px solid var(--line); }
.switch.on { background: var(--pitch-dark); }
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--text-0); transition: left 0.15s;
}

/* ===== COPA NACIONAL (campeonato multiplayer) ===== */
.copa-slots-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px; margin-top: 12px;
}
.copa-slot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-2);
  font-size: 12.5px;
}
.copa-slot.filled { border-color: var(--line-bright); }
.copa-slot.filled span { font-weight: 600; }
.copa-slot.you { border-color: var(--gold); background: rgba(227,167,58,0.08); }
.copa-slot.empty { color: var(--text-2); justify-content: center; border-style: dashed; }

.copa-fixtures-scroll { max-height: 360px; overflow-y: auto; margin-top: 10px; padding-right: 4px; }
.copa-round-block { margin-bottom: 14px; }
.copa-round-label {
  font-family: var(--font-display); font-size: 10.5px; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px;
}
.copa-fixture-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px; padding: 7px 10px;
  border-bottom: 1px solid var(--bg-3); font-size: 12.5px;
}
.copa-fixture-row:last-child { border-bottom: none; }
.copa-fixture-row.you { background: rgba(227,167,58,0.06); border-radius: 6px; }
.copa-fixture-team:first-child { text-align: right; }
.copa-fixture-score { font-variant-numeric: tabular-nums; text-align: center; min-width: 46px; }

.copa-result-banner {
  font-family: var(--font-display); font-size: 15px; text-align: center;
  padding: 16px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-2); color: var(--text-1);
}
.copa-result-banner.champ {
  border-color: var(--gold); color: var(--gold);
  background: radial-gradient(ellipse 400px 160px at 50% 0%, rgba(227,167,58,0.16), transparent 70%), var(--bg-2);
}
.copa-result-banner.runner {
  border-color: var(--text-2); color: var(--text-0);
}
.switch.on::after { left: 20px; background: #06170c; }

/* ===================================================================
   FM HOME — layout estilo Football Manager (3 colunas)
   Gerado para renderBlankHome() em ui-shell.js
   =================================================================== */

/* Wrapper externo: banner do clube no topo, depois center + right side-by-side */
.fm-home {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 0;
}

/* ---- Banner do clube (topo) ---- */
.fm-club-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #FFFDF8;
  border: 1px solid rgba(11,61,58,0.35);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  position: relative;
  overflow: hidden;
}
.fm-club-banner::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pitch), var(--gold) 50%, var(--live));
}

.fm-club-crest { flex-shrink: 0; }

.fm-club-info { flex: 1; min-width: 0; }

.fm-club-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-0);
  flex-wrap: wrap;
}

.fm-badge-division {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pitch);
  border: 1px solid var(--pitch);
  border-radius: 4px;
  padding: 2px 7px;
}

.fm-club-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 7px;
  font-size: 12px;
  color: var(--text-2);
}
.fm-club-meta b { color: var(--text-1); }

.fm-club-force {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.fm-force-gauge { width: 80px; height: 80px; }
.fm-force-svg { width: 80px; height: 80px; display: block; }

/* ---- Layout principal: centro largo + coluna direita ---- */
.fm-body-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}

/* ---- Grid central ---- */
.fm-center-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Linha de 2 colunas (próximo jogo + notícias) */
.fm-row-two {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
  align-items: start;
}

/* ---- Coluna direita ---- */
.fm-right-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---- Cartão de seção (área central) ---- */
.fm-section-card {
  background: #FFFDF8;
  border: 1px solid rgba(11,61,58,0.35);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  transition: border-color 0.15s;
}
.fm-section-card:hover { border-color: var(--line-bright); }

/* ---- Widget (coluna direita) ---- */
.fm-widget {
  background: #FFFDF8;
  border: 1px solid rgba(11,61,58,0.35);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  transition: border-color 0.15s;
}
.fm-widget:hover { border-color: var(--line-bright); }

/* ---- Cabeçalho de seção/widget ---- */
.fm-section-head,
.fm-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
}
.fm-section-head > span,
.fm-widget-head > span {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ---- Link fantasma (canto superior direito dos headers) ---- */
.fm-link {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pitch);
  background: none;
  border: 1px solid rgba(20,92,82,0.30);
  border-radius: 5px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fm-link:hover {
  background: rgba(20,92,82,0.12);
  border-color: var(--pitch);
}

/* ---- Próximo jogo ---- */
.fm-match-card { display: flex; flex-direction: column; gap: 10px; }

.fm-match-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: center;
}

.fm-match-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.fm-match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 110px;
  font-family: var(--font-display);
  font-size: 13px;
  text-align: center;
  color: var(--text-0);
}

.fm-match-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fm-match-vs {
  font-family: var(--font-hero);
  font-size: 24px;
  color: var(--gold);
  text-shadow: 0 0 16px var(--gold-glow);
  letter-spacing: 0.04em;
}

.fm-match-date {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-2);
  text-align: center;
}

.fm-match-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.fm-match-actions .btn { flex: 1 1 120px; max-width: 180px; justify-content: center; text-align: center; }

/* ---- Lista de notícias ---- */
.fm-news-list { display: flex; flex-direction: column; gap: 10px; }

.fm-news-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.15s;
}
.fm-news-item:hover { border-color: var(--line-bright); }

.fm-news-thumb {
  font-size: 22px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  line-height: 1;
  padding-top: 2px;
}

.fm-news-body { min-width: 0; }

.fm-news-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-0);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Acesso rápido (grid de 5 botões) ---- */
.fm-quick-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.fm-quick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px 12px;
  border-radius: var(--radius);
  background: var(--bg-3);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.fm-quick-card:hover {
  border-color: var(--gold);
  background: rgba(227,167,58,0.06);
}

.fm-quick-ic {
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
}

/* Ícones em PNG (lote futmanager_icones, 25/07/2026) usados dentro de
   .fm-quick-ic no lugar dos SVGs currentColor -- já vêm com fundo/estilo
   próprios (selo arredondado), então só precisam de tamanho + cantos. */
.fm-quick-ic-img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: block;
  object-fit: cover;
}

.fm-quick-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-0);
  letter-spacing: 0.02em;
}

.fm-quick-sub {
  font-size: 10px;
  color: var(--text-2);
  line-height: 1.3;
}

/* ---- Próximos eventos (linha horizontal de cards) ---- */
.fm-events-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.fm-events-row::-webkit-scrollbar { height: 4px; }
.fm-events-row::-webkit-scrollbar-track { background: transparent; }
.fm-events-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.fm-event-card {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 130px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  transition: border-color 0.15s;
}
.fm-event-card:hover { border-color: var(--line-bright); }

.fm-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 30px;
}
.fm-event-date b {
  font-family: var(--font-hero);
  font-size: 18px;
  color: var(--gold);
  line-height: 1;
}
.fm-event-date span {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fm-event-body { min-width: 0; }
.fm-event-match {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Tarefas ---- */
.fm-task-list { display: flex; flex-direction: column; gap: 8px; }

.fm-task-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
}

.fm-task-check { font-size: 13px; flex-shrink: 0; }
.fm-task-label { flex: 1; color: var(--text-1); }
.fm-task-count {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
}

/* ---- Mini tabela de classificação ---- */
.fm-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fm-mini-table th {
  text-align: left;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
}
.fm-mini-table td { padding: 7px 6px; border-bottom: 1px solid var(--bg-3); font-variant-numeric: tabular-nums; }
.fm-mini-table tr.fm-table-me { background: rgba(227,167,58,0.07); }
.fm-mini-table tr.fm-table-me td:first-child { border-left: 2px solid var(--gold); }

/* ---- Finanças ---- */
.fm-finance-rows { display: flex; flex-direction: column; gap: 0; }

.fm-finance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--bg-3);
  font-size: 12.5px;
  color: var(--text-1);
}
.fm-finance-row:last-child { border-bottom: none; }
.fm-finance-row span:first-child { color: var(--text-2); }

/* ---- Estado vazio ---- */
.fm-empty {
  font-size: 12.5px;
  color: var(--text-2);
  text-align: center;
  padding: 14px 0;
}

/* ---- Responsivo ---- */
@media (max-width: 1100px) {
  .fm-body-row { grid-template-columns: 1fr; }
  .fm-right-col { flex-direction: row; flex-wrap: wrap; }
  .fm-right-col .fm-widget { flex: 1 1 260px; }
}
@media (max-width: 820px) {
  .fm-row-two { grid-template-columns: 1fr; }
  .fm-quick-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .fm-club-banner { flex-wrap: wrap; }
  .fm-quick-grid { grid-template-columns: repeat(2, 1fr); }
  .fm-club-name { font-size: 16px; }
}

/* ===================================================================
   MOBILE FM-HOME — ≤ 640px
   1. Esconde a quick-menu-bar horizontal (os atalhos ficam nos
      fm-quick-card dentro da home FM).
   2. Fundo preto sólido em todos os cards fm-*.
   3. Grid de 4 colunas nos atalhos (8 itens = 2 linhas de 4).
   4. Lock de orientação landscape via @media.
   =================================================================== */

/* --- Orientação forçada landscape --------------------------------- */
@media screen and (orientation: portrait) and (max-width: 900px) {
  html {
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

/* --- Oculta barra horizontal no mobile — cards fm-* grandes ------- */
@media (max-width: 900px) {
  .fm-section-card,
  .fm-widget,
  .fm-club-banner,
  .fm-news-item,
  .fm-event-card {
    background: #FFFDF8 !important;
    border-color: rgba(11,61,58,0.30) !important;
  }

  /* Grid de 4 colunas para os 16 atalhos — estilo app mobile */
  .fm-quick-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
  }

  /* Cada atalho: card compacto mas bem clicável */
  .fm-quick-card {
    background: #FFFDF8 !important;
    border-color: rgba(11,61,58,0.30) !important;
    border-radius: 14px !important;
    padding: 14px 6px 12px !important;
    gap: 7px !important;
    min-height: 88px !important;
    justify-content: center !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.28) !important;
  }
  .fm-quick-card:active {
    background: #6a7078 !important;
    border-color: var(--gold) !important;
    transform: scale(0.95) !important;
  }

  /* Ícone em "selo" circular dourado */
  .fm-quick-ic {
    font-size: 22px !important;
    line-height: 1 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(227,167,58,0.18) !important;
    border: 1.5px solid rgba(227,167,58,0.35) !important;
    overflow: hidden !important;
  }
  .fm-quick-ic-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
  }

  /* Label legível */
  .fm-quick-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-0) !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  /* Sub-texto oculto no mobile */
  .fm-quick-sub { display: none !important; }
}


/* ===================================================================
   PERFIL DO DIRIGENTE DENTRO DO BANNER — EXCLUSIVO DO MOBILE
   Modo Criador (UI.renderBlankHome em ui-shell.js).

   Por que existe: em `@media (max-width: 900px)` a `.sidebar` é
   `display:none !important` (menu.css) -- e é lá que moram a foto, o
   nome, o nível e a barra de XP do dirigente. No mobile, portanto, o
   perfil não aparecia em lugar nenhum. Este bloco o traz para a
   esquerda do banner do clube, e o restante (escudo, nome, dados e
   medidor de força) fica reagrupado à direita dele.

   O desktop NÃO muda: `.fm-profile-mini` nasce `display:none` e só é
   ligado dentro do media query.

   Classes próprias de propósito: `.xp-badge-level`/`.xp-badge-count`
   NÃO podem ser reaproveitadas aqui porque menu.css as esconde em
   `max-width: 900px` (resquício de quando a sidebar só encolhia, antes
   de passar a sumir por completo).
   =================================================================== */

.fm-profile-mini { display: none; }

@media (max-width: 900px) {
  .fm-club-banner {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 14px 16px;
  }

  /* --- área do perfil (esquerda) --- */
  .fm-profile-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 86px;
    width: 86px;
    align-self: stretch;
    padding-right: 12px;
    border-right: 1px solid rgba(11,61,58,0.18);
  }
  .fm-profile-mini-photo {
    width: 46px; height: 46px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--line-bright);
    background: var(--bg-3);
  }
  .fm-profile-mini-photo img,
  .fm-profile-mini-photo svg { width: 100%; height: 100%; display: block; object-fit: cover; }

  .fm-profile-mini-name {
    max-width: 100%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--text-0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fm-profile-mini-level {
    max-width: 100%;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    color: var(--gold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fm-profile-mini-xp {
    width: 100%;
    height: 4px;
    background: var(--bg-4);
    border-radius: 99px;
    overflow: hidden;
  }
  .fm-profile-mini-xp-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  }

  /* --- restante do banner, reagrupado à direita do perfil --- */
  .fm-club-crest { transform: scale(0.86); transform-origin: left center; }
  .fm-club-info  { flex: 1 1 auto; min-width: 0; }
  .fm-club-meta  { gap: 6px 14px; margin-top: 5px; font-size: 11px; }
  .fm-club-force { flex: 0 0 auto; }
  .fm-force-gauge, .fm-force-svg { width: 64px; height: 64px; }
}

/* Telas bem estreitas: o perfil encolhe em vez de quebrar a linha. */
@media (max-width: 560px) {
  .fm-profile-mini { flex-basis: 68px; width: 68px; padding-right: 9px; }
  .fm-profile-mini-photo { width: 38px; height: 38px; }
  .fm-profile-mini-level { display: none; }
}

/* Ícone PNG pequeno nas abas internas do Modo Carreira (Treinador/Comissão/
   Minha Carteira -- ver ui-career.js::_renderCareerDashboard, 25/07/2026). */
.career-tab-ic img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: block;
  object-fit: cover;
}
.career-tab-ic { display: inline-flex; align-items: center; }

/* Abas Treinador/Comissão/Clube/Carteira/Caixa (_renderCareerDashboard,
   ui-career-dashboard.js) -- tamanho padrão pras 5 abas, com o texto se
   ajustando pra caber no box em vez de vazar/sobrepor o botão vizinho.
   Escopado só em .career-dash-tab-btn pra não mexer no .btn genérico
   usado no resto do app (inclusive nos cards de baixo, Auxiliar
   Técnico/Equipe de Fisioterapia etc.). */
.career-dash-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.career-dash-tabs .career-dash-tab-btn {
  flex: 1 1 140px;
  min-width: 110px;
  max-width: 200px;
  height: 46px;
  padding: 6px 10px;
  gap: 6px;
  container-type: inline-size;
}
.career-dash-tab-label {
  font-size: clamp(9px, 12cqw, 12px);
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}
@media (max-width: 560px) {
  .career-dash-tabs .career-dash-tab-btn { flex-basis: calc(50% - 8px); min-width: 0; max-width: none; }
}