/* =========================================================
   TOKENS / BASE
   ========================================================= */
:root{
  /* cores */
  --bg:#070c12;
  --bg-spot:#0e1722;
  --panel:#0e1620;
  --line:#203044;
  --txt:#eaf3ff;
  --muted:#9bb0c9;
  --chip:#152231;
  --accent:#2ee59d;
  --cyan:#7dd3fc;
  --amber:#f6d58f;
  --red:#ef4444;

  /* layout */
  --container: 1800px;            /* largura padrão (dashboard) */
  --topbar-h: 56px;               /* altura da topbar (centralizado aqui) */

  /* efeitos */
  --shadow:0 24px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
html,body{
  background:
    radial-gradient(1200px 600px at 20% -10%, var(--bg-spot) 0, transparent 50%),
    radial-gradient(1200px 600px at 80% 110%, #0a121a 0, transparent 50%),
    var(--bg);
  color:var(--txt);
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  letter-spacing:.1px;
}
a{ color:inherit; }
.mono{ font-variant-numeric:tabular-nums; }

/* containers gerais (dashboard) */
/* containers gerais (dashboard) */
.wrap{
  max-width: var(--container);
  margin: 22px auto 0;
  padding: 0 16px;
  position: relative;
}

/* brilho discreto atrás dos painéis do topo */
.wrap::before{
  content:"";
  position:absolute; inset:-60px 0 auto;
  height:240px; z-index:0;
  background:radial-gradient(800px 260px at 50% 0, rgba(125,211,252,.08), transparent 60%);
  pointer-events:none;
}

/* manter elementos acima da marca d’água */
.panel,.hbar,#topbar-holder{ position:relative; z-index:1; }

/* marca-d’água (desktop) */
@media (max-width:1024px){ body::after{ display:none; } }

/* =========================================================
   HEADER / TOOLBAR
   ========================================================= */
.hbar{
  position:sticky; top:12px; z-index:10;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:16px;
  background:linear-gradient(180deg, rgba(20,28,40,.65), rgba(14,22,32,.65));
  border:1px solid #1a2a3f; box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
}
.hbar h1{ margin:0 8px 0 0; font-weight:800; font-size:20px; letter-spacing:.3px; }

.stat{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:var(--chip); border:1px solid var(--line); color:#d7e9ff;
}
.stat b{ color:#bfe6ff; }

.input-step{
  display:flex; align-items:center; gap:6px;
  padding:0 6px; border-radius:999px;
  background:linear-gradient(180deg,#0e1924,#0c141d);
  border:1px solid #1a2a3f; box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.input-step input{
  height:36px; min-width:96px; padding:0 8px;
  background:transparent; border:0; color:#e9f3ff;
  font-size:15px; text-align:center; outline:none;
}
.input-step button{
  width:36px; height:36px; border-radius:999px; line-height:1;
  border:1px solid #29415a; background:linear-gradient(180deg,#0e2533,#0d2030);
  color:#d7efff; cursor:pointer; font-size:18px;
  transition:filter .12s, transform .05s;
}
.input-step button:hover{ filter:brightness(1.07); }
.input-step button:active{ transform:translateY(1px); }

.switch{ display:inline-flex; align-items:center; gap:8px; }
.swcheck{
  appearance:none; width:40px; height:22px; border-radius:999px;
  background:#112232; border:1px solid var(--line); position:relative; cursor:pointer;
}
.swcheck:before{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#061018; transition:transform .18s;
}
.swcheck:checked{ background:linear-gradient(90deg,#10b981,#22d3ee); }
.swcheck:checked:before{ transform:translateX(18px); }

.btn{
  height:36px; padding:0 14px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,#143126,#122a22); color:#dfffee;
  box-shadow:0 0 0 1px rgba(46,229,157,.10), 0 10px 22px rgba(46,229,157,.14);
  transition:filter .12s, box-shadow .12s, transform .05s;
}
.btn:hover{ filter:brightness(1.08); box-shadow:0 0 0 1px rgba(46,229,157,.18), 0 16px 28px rgba(46,229,157,.2); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* indicador “pronto” */
.ready-indicator{
  width:16px; height:16px; border-radius:50%; margin-left:auto; position:relative;
  border:1px solid #1a2a3f; background:linear-gradient(180deg,#0b1b27,#0a141d);
  box-shadow:0 0 0 1px rgba(255,255,255,.04), inset 0 0 0 2px rgba(255,255,255,.02);
}
.ready-indicator.is-loading::after{
  content:""; position:absolute; inset:3px; border:2px solid #7dd3fc;
  border-top-color:transparent; border-radius:50%; animation:spin .9s linear infinite;
}
.ready-indicator.is-ready{
  background:linear-gradient(180deg,#143126,#0f241c); border-color:#1c6a4b;
  box-shadow:0 0 10px rgba(34,197,94,.35);
}
.ready-indicator.is-ready::after{
  content:""; position:absolute; left:4px; top:5px; width:7px; height:4px;
  border-left:2px solid #bfffe5; border-bottom:2px solid #bfffe5; transform:rotate(-45deg);
}
.ready-indicator.is-error{
  background:linear-gradient(180deg,#2a1212,#180b0b); border-color:#7a2222;
  box-shadow:0 0 10px rgba(239,68,68,.35);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.stat-row{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }

/* =========================================================
   GRID / PAINÉIS
   ========================================================= */
.grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(760px,1fr) 420px; gap:18px; margin-top:14px;
}
.panel{
  padding:14px; border-radius:18px;
  background:linear-gradient(180deg,#101a26,#0c141d);
  border:1px solid var(--line); box-shadow:var(--shadow);
}

/* lateral (sticky) */
.panel.side{ position:sticky; top:96px; align-self:start; }
.side h3{
  margin:6px 0 10px; font-size:12px; letter-spacing:.7px; color:#cfe7ff;
  text-transform:uppercase; opacity:.9;
}
.kv{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 12px; margin-bottom:10px; border-radius:12px;
  background:linear-gradient(180deg,#0c151f,#0c141d); border:1px solid #1a2b40;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 18px rgba(0,0,0,.25);
}
.kv .mono{ color:#bfe6ff; }
.kv.row{ padding:12px; }
.bar{ position:relative; height:6px; flex:1; background:#0f2233; border-radius:999px; overflow:hidden; }
.fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg,rgba(125,211,252,.55),rgba(46,229,157,.85));
  border-radius:inherit; box-shadow:0 0 10px rgba(46,229,157,.45);
}
#log{ white-space:pre-wrap; color:#a9c3dd; font:12px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }

/* =========================================================
   PITCH / TIME
   ========================================================= */
.pitch-wrap{ position:relative; }
.pitch-head{ display:flex; justify-content:center; margin:2px 0 10px; }
.pitch-head h2{
  margin:0; padding:10px 18px; border-radius:12px; font-weight:900; font-size:18px; letter-spacing:.6px;
  background:linear-gradient(90deg, rgba(34,197,94,.18), rgba(125,211,252,.18));
  border:1px solid rgba(46,229,157,.35);
  box-shadow:0 0 26px rgba(46,229,157,.20), inset 0 0 0 1px rgba(255,255,255,.05);
}
.pitch{
  position:relative; width:100%; aspect-ratio:3/3.7; border-radius:18px; overflow:hidden; background:#0a1719;
}
.pitch .bg{
  position:absolute; inset:12px;
  background:
    url("/assets/img/campinho/campinho.png") center/contain no-repeat,
    radial-gradient(60% 80% at 50% 50%, #0e2a15 0, #0a1f12 60%, #091518 100%);
  filter:drop-shadow(0 24px 32px rgba(0,0,0,.55));
}
.pitch .vignette{
  pointer-events:none; position:absolute; inset:0; border-radius:18px;
  background:radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.18) 82%, rgba(0,0,0,.35) 100%);
  mix-blend-mode:multiply;
}
.pitch::after{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none; opacity:0;
  background:
    linear-gradient(120deg, rgba(46,229,157,0) 0%, rgba(46,229,157,.12) 50%, rgba(46,229,157,0) 100%),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(46,229,157,.06) 42px 84px);
  transition:opacity .25s ease;
}
.pitch.computing::after{ opacity:.22; }

/* linhas de passe */
.pass-svg{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s; }
.pass-svg.show{ opacity:.95; }
.pass-svg .pl{ stroke:var(--accent); stroke-width:2.4; opacity:.9; filter:url(#passGlow); }

/* jogadores */
.player{ position:absolute; transform:translate(-50%,-50%); text-align:center; min-width:122px; max-width:180px; z-index:2; opacity:0; }
.player.appear{ transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .28s; opacity:1; transform:translate(-50%,-50%); }
.card{ position:relative; padding-top:64px; }
.circle{
  position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  width:94px; height:94px; border-radius:50%;
  background:radial-gradient(65% 65% at 50% 50%, #162536 0,#0e1622 60%);
  border:2px solid rgba(255,255,255,.08);
  box-shadow:0 10px 22px rgba(0,0,0,.45),0 0 26px rgba(58,164,255,.30) inset, 0 0 18px rgba(58,164,255,.28);
  display:grid; place-items:center; overflow:hidden;
}
.circle img{ width:60px; height:60px; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.player.is-best .circle::after{
  content:""; position:absolute; inset:-8px; border-radius:inherit;
  box-shadow:0 0 10px rgba(58,164,255,.75), 0 0 20px rgba(58,164,255,.75);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.5; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)} }
.info{
  background:rgba(6,12,18,.85); border:1px solid #1a2b40; border-radius:13px;
  padding:9px 12px; color:#daeeff; backdrop-filter: blur(2px);
}
.name{ font-weight:700; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14.5px; }
.meta{ display:flex; justify-content:center; gap:8px; margin-top:6px; }
.tag{ background:#0e1a26; border:1px solid #23384f; padding:3px 10px; border-radius:999px; font-size:12px; color:#b8d6f7; }
.perc{
  position:absolute; right:-6px; bottom:-8px; padding:4px 9px; font-size:12px;
  border-radius:999px; border:1px solid; box-shadow:0 4px 10px rgba(0,0,0,.35);
  font-weight:700; letter-spacing:.2px;
}
.perc.p-green{ background:#0f1f12; border-color:#22c55e; color:#bfffe5; }
.perc.p-amber{ background:var(--amber); border-color:#caa24d; color:#111; }
.perc.p-red{ background:#1f0e0e; border-color:#ef4444; color:#ffd7d7; }

/* legenda do pitch */
.legend{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:3;
}
.legend .chip{
  font-size:11px; padding:4px 8px; border-radius:999px;
  border:1px solid #1a2b40; background:#0e1a26;
}
.legend .g{ background:rgba(16,185,129,.12); border-color:#1f6e52; color:#bfffe5; }
.legend .a{ background:#f6d58f; color:#111; border-color:#caa24d; }
.legend .r{ background:rgba(239,68,68,.15); border-color:#9b2222; color:#ffd2d2; }

/* =========================================================
   TABELAS
   ========================================================= */
/* tabela mobile (lista) */
.tabela-time{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border-radius:12px; font-size:13px;
  background:linear-gradient(180deg,#0f1721,#0e1620); border:1px solid var(--line);
}
.tabela-time thead th{
  background:#152231; text-transform:uppercase; font-weight:700; letter-spacing:.4px;
  padding:10px 8px; border-bottom:1px solid #1a2b40;
}
.tabela-time td{
  padding:10px 8px; text-align:center; vertical-align:middle;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.tabela-time tbody tr:nth-child(even) td{ background:rgba(255,255,255,.02); }
.tabela-time .pos{ font-weight:800; color:#cfe7ff; }
.tabela-time .club img{ width:22px; height:22px; object-fit:contain; }
.tabela-time .name{ text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:0; }
.tabela-time .price{ font-variant-numeric:tabular-nums; }
.tabela-time .bia{
  display:inline-block; min-width:48px; padding:2px 8px; border-radius:999px;
  font-weight:800; font-size:12px; border:1px solid transparent;
}
.bia--g{ background:rgba(16,185,129,.16); border-color:#1f6e52; color:#bfffe5; }
.bia--a{ background:var(--amber); border-color:#caa24d; color:#111; }
.bia--r{ background:rgba(239,68,68,.18); border-color:#9b2222; color:#ffd2d2; }
.tabela-time td.name{ width:60%; }
.tabela-time td.club{ width:36px; }
.tabela-time td.pos{ width:44px; }
.tabela-time td.price{ width:64px; }
.tabela-time td.bia-cell{ width:64px; }

/* larguras extras (desktop) */
.tabela-time th.col-price, .tabela-time td.price{ width:72px; }
.tabela-time th.col-media, .tabela-time td.media{ width:76px; }
.tabela-time th.col-mb,    .tabela-time td.mb   { width:68px; }

/* esconder MB no mobile */
@media (max-width:768px){
  .tabela-time th.col-mb,
  .tabela-time td.mb{ display:none; }
}

/* “Escalação Otimizada” – tabela grande (desktop) */
@media (min-width:920px){
  .panel table{
    width:100%; table-layout:fixed;
    border-collapse:separate; border-spacing:0;
  }
  .panel table thead th{
    padding:12px 10px; text-transform:uppercase; letter-spacing:.35px; font-weight:800;
    color:#cfe7ff; background:#152231; border-bottom:1px solid #1a2b40;
  }
  .panel table tbody td{
    padding:12px 10px; vertical-align:middle; border-bottom:1px solid rgba(255,255,255,.04);
  }
  .panel table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.02); }
  .panel table tbody tr:hover td{ background:rgba(125,211,252,.04); }

  /* POS */
  .panel table th:nth-child(1),
  .panel table td:nth-child(1){ width:58px; text-align:center; }

  /* CLUBE */
  .panel table th:nth-child(2),
  .panel table td:nth-child(2){ width:60px; text-align:center; }

  /* JOGADOR */
  .panel table th:nth-child(3),
  .panel table td:nth-child(3){ width:auto; }

  /* C$ */
  .panel table th:nth-child(4),
  .panel table td:nth-child(4){
    width:86px; text-align:right; font-variant-numeric:tabular-nums; color:#d7e9ff;
  }

  /* MÉDIA */
  .panel table th:nth-child(5),
  .panel table td:nth-child(5){ width:96px; text-align:right; font-variant-numeric:tabular-nums; }

  /* MÉDIA BÁSICA (MB) */
  .panel table th:nth-child(6),
  .panel table td:nth-child(6){ width:112px; text-align:right; font-variant-numeric:tabular-nums; }

  /* BIA+ */
  .panel table th:nth-child(7),
  .panel table td:nth-child(7){ width:80px; text-align:center; }

  /* pill % */
  .panel table td:last-child span{
    display:inline-block; min-width:52px; padding:2px 8px;
    border-radius:999px; font-weight:800; font-size:12px; border:1px solid transparent;
  }
}


/* =========================================================
   RESPONSIVO / AMPLIAÇÕES
   ========================================================= */
@media (max-width:920px){
  .grid{ grid-template-columns:1fr; }
  .pitch-wrap{ display:none !important; }
  .panel.side{ position:static; margin-top:10px; }
  .hbar h1{ font-size:18px; }
  .stat-row{ display:none !important; }
  .input-step input{ height:44px; min-width:108px; font-size:18px; }
  .input-step button{ width:42px; height:42px; font-size:20px; }
}

/* resumo (cards inferiores) */
.resumo-mobile{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:6px 0 12px;
}
.resumo-mobile .card{
  background:#152231; border:1px solid var(--line);
  border-radius:10px; padding:8px 10px; text-align:center; font-size:13px;
}
@media (max-width:420px){ .resumo-mobile{ grid-template-columns:1fr; } }

/* 3 cards em linha no desktop */
@media (min-width:1024px){
  .stat-row{ flex-wrap:nowrap; }
  .stat-row .stat{ flex:1 0 0; width:auto; justify-content:center; }
  .resumo-mobile{
    grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;
  }
  .resumo-mobile .card{ display:flex; align-items:center; justify-content:center; }
}

/* 1 card/linha no mobile estreito */
@media (max-width:768px){
  .resumo-mobile{ grid-template-columns:1fr !important; gap:8px; }
  .resumo-mobile .card{ width:100%; justify-content:center; }
}

/* ampliações do grid em telas grandes */
@media (min-width:1400px){
  .wrap{ max-width:1440px; }
  .grid{ grid-template-columns:minmax(860px,1fr) 440px; }
}
@media (min-width:1600px){
  .wrap{ max-width:1640px; }
  .grid{ grid-template-columns:minmax(960px,1fr) 480px; }
}
@media (min-width:1760px){
  .wrap{ max-width:1760px; }
  .grid{ grid-template-columns:minmax(1040px,1fr) 520px; }
}

/* ===== appbar spacing fix (mantido) ===== */
.appbar-wrap{ padding-bottom: 0 !important; }

/* ===== FX de IA sobre o campinho ===== */
.ai-fx{
  position:absolute; inset:12px; border-radius:14px;
  pointer-events:none; opacity:0; transition:opacity .25s ease;
  mix-blend-mode:screen; z-index:1;
}
.pitch.computing .ai-fx{ opacity:1; }

.ai-grid{
  position:absolute; inset:0; border-radius:inherit;
  --step:46px;
  background:
    repeating-linear-gradient(0deg,  rgba(46,229,157,.10) 0 1px, transparent 1px var(--step)),
    repeating-linear-gradient(90deg, rgba(125,211,252,.08) 0 1px, transparent 1px var(--step));
  animation:aiGrid 3.6s linear infinite;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
@keyframes aiGrid{
  to{ background-position: var(--step) calc(var(--step)*-1), calc(var(--step)*-1) var(--step); }
}
.ai-scan{
  position:absolute; inset:-10% -12%; border-radius:inherit;
  background:linear-gradient(180deg, transparent 35%, rgba(46,229,157,.25) 50%, transparent 65%);
  filter:blur(2px);
  animation:aiScan 1.6s linear infinite;
  mix-blend-mode:screen;
}
@keyframes aiScan{
  from{ transform:translateY(-100%); }
  to  { transform:translateY(100%); }
}
.ai-radar{
  position:absolute; left:50%; top:50%; width:180%; height:180%;
  transform:translate(-50%,-50%);
  background:
    conic-gradient(from 0deg, rgba(125,211,252,.0) 0deg, rgba(125,211,252,.22) 18deg, rgba(125,211,252,.0) 26deg),
    radial-gradient(60% 60% at 50% 50%, rgba(46,229,157,.10), transparent 70%);
  -webkit-mask:radial-gradient(closest-side, #000 55%, transparent 56%);
          mask:radial-gradient(closest-side, #000 55%, transparent 56%);
  filter:blur(1px);
  animation:aiRadar 3.2s linear infinite;
}
@keyframes aiRadar{ to{ transform:translate(-50%,-50%) rotate(1turn); } }
.ai-dots{ position:absolute; inset:0; border-radius:inherit; }
.ai-dots .dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #cffff1, #2ee59d 60%, transparent 61%);
  box-shadow:0 0 10px rgba(46,229,157,.55), 0 0 18px rgba(125,211,252,.35);
  opacity:.0; transform:scale(.6);
  animation:aiBlink 1.8s ease-in-out infinite;
}
@keyframes aiBlink{
  10%{ opacity:.95; transform:scale(1); }
  60%{ opacity:.25; transform:scale(.7); }
  100%{ opacity:.0; transform:scale(.6); }
}