/* ============================================================
   Design System — Copas do Mundo (protótipo Fase 1)
   Componentes reutilizáveis sobre o Tailwind CDN.
   Use estas classes nas views para manter consistência visual.
   ============================================================ */

:root {
  --ata: #f87171;   /* ataque  - vermelho  */
  --mei: #34d399;   /* meio    - verde      */
  --def: #60a5fa;   /* defesa  - azul       */
  --gol: #fbbf24;   /* goleiro - ouro       */
}

body { background-image: radial-gradient(1200px 600px at 50% -10%, rgba(16,185,129,.10), transparent 60%); }

/* ---------- Navegação ---------- */
.nav-link {
  padding: .35rem .7rem; border-radius: .5rem; white-space: nowrap;
  color: #cbd5e1; transition: all .15s;
}
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.active { background: rgba(16,185,129,.18); color: #6ee7b7; }

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(180deg, rgba(31,41,55,.7), rgba(17,24,39,.7));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem; padding: 1.25rem;
}
.card-tight { padding: .85rem; border-radius: .85rem; }
.card-hover:hover { border-color: rgba(16,185,129,.4); transform: translateY(-2px); transition: all .15s; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: .65rem; font-weight: 600; font-size: .9rem;
  cursor: pointer; border: 1px solid transparent; transition: all .15s; text-decoration: none;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: #10b981; color: #05241a; }
.btn-primary:hover:not(:disabled) { background: #34d399; }
.btn-gold { background: #f59e0b; color: #3a2a02; }
.btn-gold:hover:not(:disabled) { background: #fbbf24; }
.btn-ghost { background: rgba(255,255,255,.06); color: #e2e8f0; border-color: rgba(255,255,255,.12); }
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; border-radius: .5rem; }

/* ---------- Badges / setores ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
  background: rgba(255,255,255,.08);
}
.badge-ATA { background: rgba(248,113,113,.18); color: #fca5a5; }
.badge-MEI { background: rgba(52,211,153,.18); color: #6ee7b7; }
.badge-DEF { background: rgba(96,165,250,.18); color: #93c5fd; }
.badge-GOL { background: rgba(251,191,36,.18); color: #fcd34d; }
.badge-conf { background: rgba(255,255,255,.08); color: #cbd5e1; }

/* ---------- Força (barra + chip) ---------- */
.force-chip {
  font-variant-numeric: tabular-nums; font-weight: 800; border-radius: .5rem;
  padding: .15rem .5rem; background: rgba(16,185,129,.15); color: #6ee7b7;
}
.force-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.force-bar > span { display: block; height: 100%; background: linear-gradient(90deg,#10b981,#fbbf24); }

/* ---------- Campo / formação ---------- */
.pitch {
  position: relative; border-radius: 1rem; aspect-ratio: 2/3;
  background:
    repeating-linear-gradient(0deg, #0c5a32 0 8%, #0a4f2c 8% 16%),
    #0a4f2c;
  border: 2px solid rgba(255,255,255,.18); overflow: hidden;
}
.pitch::before { /* círculo central */
  content:""; position:absolute; left:50%; top:50%; width:90px; height:90px;
  transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.25); border-radius:50%;
}
.pitch-line { position:absolute; left:6%; right:6%; top:50%; height:2px; background:rgba(255,255,255,.22); }
.player-dot {
  width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.8rem; border:2px solid rgba(255,255,255,.7); background:#111827; color:#fff;
}

/* ---------- Cronômetro ---------- */
.timer-ring { font-variant-numeric: tabular-nums; font-weight: 800; }
.pulse { animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.flash-in { animation: flashIn .35s ease-out; }
@keyframes flashIn { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* ---------- Tabelas ---------- */
.tbl { width:100%; border-collapse: collapse; font-size:.85rem; }
.tbl th { text-align:left; color:#94a3b8; font-weight:600; padding:.5rem .6rem; border-bottom:1px solid rgba(255,255,255,.1); }
.tbl td { padding:.5rem .6rem; border-bottom:1px solid rgba(255,255,255,.05); }
.tbl tr:hover td { background: rgba(255,255,255,.03); }

/* Classificação dos grupos: card encolhe ao seu track (min-width:0) e a tabela — com NOMES COMPLETOS
   (sem truncar) — rola na horizontal dentro do card. Dá pra arrastar (drag-to-scroll, classe .drag). */
#groupsGrid > div { min-width: 0; }
.tbl-scroll { overflow-x: auto; cursor: grab; -webkit-overflow-scrolling: touch; }
.tbl-scroll.drag { cursor: grabbing; user-select: none; }
.tbl-scroll .tbl { min-width: max-content; }                 /* não comprime: nomes inteiros */
.tbl-scroll .tbl th, .tbl-scroll .tbl td { white-space: nowrap; }
.tbl-scroll::-webkit-scrollbar { height: 7px; }
.tbl-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }
.tbl-scroll::-webkit-scrollbar-track { background: transparent; }
.qualified { box-shadow: inset 3px 0 0 #10b981; }

/* ---------- Narração ---------- */
.feed-item { display:flex; gap:.6rem; padding:.5rem .25rem; border-bottom:1px solid rgba(255,255,255,.05); }
.feed-min { width:34px; text-align:right; color:#94a3b8; font-variant-numeric:tabular-nums; font-weight:700; }
.ev-goal { color:#6ee7b7; font-weight:700; }
.ev-card { color:#fcd34d; }
.ev-chance, .ev-save { color:#93c5fd; }

/* ---------- Util ---------- */
.section-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.muted { color:#94a3b8; }
.scroll-y { max-height: 70vh; overflow-y: auto; }
.scroll-y::-webkit-scrollbar { width: 8px; }
.scroll-y::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }
.grid-slots { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:.6rem; }
.locked { opacity:.4; filter: grayscale(.6); pointer-events:none; }

/* ---------- Flow stepper (navegação encadeada) ---------- */
.flow-bar { background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.08); }
.step { padding:.25rem .6rem; border-radius:999px; white-space:nowrap; font-weight:700; text-decoration:none; }
.step-done { color:#6ee7b7; background:rgba(16,185,129,.12); }
.step-done:hover { background:rgba(16,185,129,.22); }
.step-active { color:#05241a; background:#10b981; }
.step-todo { color:#64748b; }
.step-sep { color:#475569; }