:root {
  --bg: #0f1216;
  --card: #191e26;
  --card2: #212836;
  --line: #2c3444;
  --txt: #e7ecf3;
  --dim: #93a0b4;
  --accent: #37d17a;
  --accent2: #ffcf4d;
  --danger: #ff5d5d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #1b2430, var(--bg));
  color: var(--txt);
  min-height: 100vh;
}

.topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: rgba(15,18,22,.85);
  backdrop-filter: blur(8px); z-index: 5;
}
.topo h1 { font-size: 20px; margin: 0; letter-spacing: .5px; }
.topo h1 span { color: var(--accent); }
.hud { display: flex; gap: 16px; font-size: 14px; color: var(--dim); }
.hud b { color: var(--txt); }

main { max-width: 940px; margin: 0 auto; padding: 22px; }

.rodape { text-align: center; color: var(--dim); font-size: 12px; padding: 20px; }

h2 { margin: 0 0 4px; }
.sub { color: var(--dim); margin: 0 0 18px; }

.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px;
}
.card.click { cursor: pointer; transition: transform .12s, border-color .12s; }
.card.click:hover { transform: translateY(-3px); border-color: var(--accent); }
.card .clube { font-size: 18px; font-weight: 700; }
.card .ano { color: var(--accent2); font-weight: 700; }
.card .estrela { color: var(--dim); font-size: 13px; margin-top: 6px; }

button {
  font: inherit; cursor: pointer; border: none; border-radius: 10px;
  padding: 11px 18px; font-weight: 600; color: #0d1013; background: var(--accent);
  transition: filter .12s;
}
button:hover { filter: brightness(1.08); }
button.ghost { background: transparent; color: var(--txt); border: 1px solid var(--line); }
button.warn { background: var(--accent2); }
button.danger { background: var(--danger); color: #fff; }
button:disabled { opacity: .4; cursor: not-allowed; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

select {
  font: inherit; background: var(--card2); color: var(--txt);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--dim); font-weight: 600; }
tr.eu { background: rgba(55,209,122,.12); }
td.num, th.num { text-align: center; }
.pos-badge { display:inline-block; width:22px; height:22px; line-height:22px; text-align:center;
  border-radius:6px; font-size:11px; font-weight:700; }
.G { background:#3a2f00; color:#ffcf4d; }
.D { background:#052b1a; color:#37d17a; }
.M { background:#0a2036; color:#5db4ff; }
.A { background:#2e0a0a; color:#ff8b8b; }

.ovr { font-weight: 700; }
.linha-jog { display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid var(--line); }
.linha-jog .nome { flex:1; }
.linha-jog .idade { color:var(--dim); font-size:12px; width:40px; text-align:right; }
.linha-jog.eu { background: rgba(55,209,122,.12); border-radius:6px; }

.painel { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:18px; }
@media (max-width:720px){ .painel { grid-template-columns:1fr; } }

.msg { padding:12px 14px; border-radius:10px; background:var(--card2); border:1px solid var(--line); margin-bottom:14px; }
.msg.bom { border-color: var(--accent); }
.msg.ruim { border-color: var(--danger); }

.chip { display:inline-block; padding:2px 8px; border-radius:99px; background:var(--card2); font-size:12px; color:var(--dim); }
.resultado b { font-variant-numeric: tabular-nums; }

/* ---- campo do draft ---- */
.campo {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.035) 0 11.11%, rgba(0,0,0,.05) 11.11% 22.22%),
    linear-gradient(160deg, #0f3d22, #0b2c18);
  border:1px solid #16532f; border-radius:16px; padding:16px 12px;
}
.linha-campo { position:relative; z-index:2; display:flex; gap:10px; justify-content:center; margin:10px 0; flex-wrap:wrap; }
.slot {
  min-width:120px; max-width:150px; flex:1; text-align:center; padding:10px 8px;
  border-radius:12px; background:rgba(0,0,0,.42); border:1px dashed #2f6b45;
  display:flex; flex-direction:column; gap:2px; min-height:52px; justify-content:center;
}
.slot.cheio { border-style:solid; border-color:#37d17a; background:rgba(0,0,0,.5); }
.slot.on { border-color:var(--accent2); box-shadow:0 0 0 2px rgba(255,207,77,.35); }
.slot b { font-size:14px; }
.slot span { font-size:11px; color:var(--dim); }
.slot .vazio { color:#7fae93; font-size:12px; }

/* ---- linhas do campo (círculo, áreas, meia-lua, gols) ---- */
.pitch { position:absolute; inset:10px; z-index:1; pointer-events:none;
  border:2px solid var(--pl); border-radius:4px; --pl:rgba(233,255,240,.32); }
.pitch span { position:absolute; box-sizing:border-box; border-color:var(--pl); }
/* linha central + círculo + marca do meio */
.pitch .midline { left:0; right:0; top:50%; border-top:2px solid var(--pl); }
.pitch .circle { left:50%; top:50%; width:34%; aspect-ratio:1; transform:translate(-50%,-50%);
  border:2px solid var(--pl); border-radius:50%; }
.pitch .spot { left:50%; top:50%; width:6px; height:6px; transform:translate(-50%,-50%);
  background:var(--pl); border-radius:50%; }
/* grande área */
.pitch .box { left:50%; transform:translateX(-50%); width:58%; height:17%; border:2px solid var(--pl); }
.pitch .box-top { top:0; border-top:none; }
.pitch .box-bot { bottom:0; border-bottom:none; }
/* pequena área */
.pitch .six { left:50%; transform:translateX(-50%); width:32%; height:8%; border:2px solid var(--pl); }
.pitch .six-top { top:0; border-top:none; }
.pitch .six-bot { bottom:0; border-bottom:none; }
/* meia-lua (arco da área) */
.pitch .arc { left:50%; transform:translateX(-50%); width:22%; height:7%; border:2px solid var(--pl); }
.pitch .arc-top { top:17%; border-top:none; border-radius:0 0 90% 90%/0 0 100% 100%; }
.pitch .arc-bot { bottom:17%; border-bottom:none; border-radius:90% 90% 0 0/100% 100% 0 0; }
/* gols */
.pitch .goal { left:50%; transform:translateX(-50%); width:15%; height:2%; border:2px solid var(--pl); }
.pitch .goal-top { top:-4px; border-top:none; background:rgba(233,255,240,.06); }
.pitch .goal-bot { bottom:-4px; border-bottom:none; background:rgba(233,255,240,.06); }

/* ---- cards de candidatos ---- */
.cand { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); }
.cand .nome { flex:1; font-weight:600; }
.cand.caro { opacity:.5; }
.cand button { padding:7px 12px; }
.cand.free { border-left:3px solid var(--dim); }
.cand.free .nome { color:var(--dim); font-style:italic; }
.cand.free button { background:var(--card2); color:var(--txt); border:1px solid var(--line); }

/* ---- layout do draft: [overall] [campo] [opções] ---- */
main[data-tela="draft"] { max-width: 1180px; }
.draft-layout {
  display: grid;
  grid-template-columns: 210px minmax(0,1fr) 340px;
  gap: 16px; align-items: stretch;
}
@media (max-width: 900px){
  .draft-layout { grid-template-columns: 1fr; }
}

/* painel de overall (esquerda) */
.painel-ovr { display:flex; flex-direction:column; gap:14px; }
.ovr-time {
  background: var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px; text-align:center;
}
.ovr-time .rot { color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.6px; }
.ovr-time .val { font-size:46px; font-weight:800; line-height:1; margin-top:4px; color:var(--accent); }
.setores {
  display:flex; flex-direction:column; gap:14px;
  background: var(--card); border:1px solid var(--line); border-radius:14px; padding:16px;
}
.setor .top { display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; }
.setor .top b { font-variant-numeric: tabular-nums; }
.setor .bar { height:8px; border-radius:99px; background:var(--card2); overflow:hidden; }
.setor .fill { height:100%; border-radius:99px; transition:width .3s ease; }
.setor.def .fill { background:#37d17a; }
.setor.mei .fill { background:#5db4ff; }
.setor.ata .fill { background:#ff8b8b; }

/* campo esticado (centro) */
.draft-layout .campo {
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:440px;
}
.draft-layout .linha-campo { margin:0; }

/* opções (direita) */
.draft-layout .candidatos { align-self:start; }

/* ---- transmissão ao vivo ---- */
main[data-tela="transmissao"] { max-width: 760px; }
.tv { position: relative; background: var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; }
.tv-flag { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.live { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13px;
  letter-spacing:.6px; color:var(--danger); }
.ldot { width:9px; height:9px; border-radius:50%; background:var(--danger); animation:pulse 1.2s infinite; }
@keyframes pulse {
  0%   { box-shadow:0 0 0 0 rgba(255,93,93,.55); }
  70%  { box-shadow:0 0 0 8px rgba(255,93,93,0); }
  100% { box-shadow:0 0 0 0 rgba(255,93,93,0); }
}
.placar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; }
.placar .lado { display:flex; align-items:center; gap:10px; min-width:0; }
.placar .lado.dir { justify-content:flex-end; text-align:right; }
.placar .lado b { font-size:18px; }
.placar .lado .ano { color:var(--dim); font-size:12px; margin-left:6px; }
.placar .lado.eu b { color:var(--accent); }
.placar .dot { width:14px; height:14px; border-radius:50%; flex:none; }
.placar .gols { display:flex; align-items:center; gap:12px; font-size:40px; font-weight:800;
  font-variant-numeric:tabular-nums; }
.placar .gols .x { font-size:22px; color:var(--dim); }
.placar .gols span.flash { animation:pop .5s ease; color:var(--accent2); }
@keyframes pop { 0%{transform:scale(1);} 40%{transform:scale(1.6);} 100%{transform:scale(1);} }
.relogio { display:flex; align-items:center; gap:12px; margin:16px 0 12px; }
.relogio #tv-min { font-variant-numeric:tabular-nums; font-weight:700; width:44px; }
.relogio .prog { flex:1; height:8px; border-radius:99px; background:var(--card2); overflow:hidden; }
.relogio .prog .fill { height:100%; width:0; background:var(--accent); transition:width .12s linear; }
.feed { min-height:120px; max-height:240px; overflow:auto; display:flex; flex-direction:column;
  gap:6px; padding-top:4px; }
.feed .ev { padding:7px 10px; border-radius:9px; background:var(--card2); font-size:14px;
  animation:slidein .25s ease; }
.feed .ev.info { color:var(--dim); font-size:13px; }
.feed .ev.gol { border-left:3px solid var(--accent2); }
.feed .ev.gol.dir { text-align:right; border-left:none; border-right:3px solid var(--accent2); }
.feed .ev.gol .g { color:var(--accent2); font-weight:800; }
.feed .ev.gol .tm { color:var(--dim); font-size:12px; }
@keyframes slidein { from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }

/* ---- escolha do batedor de pênalti ---- */
.pk-overlay {
  position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: rgba(10,12,16,.82); border-radius: 16px; padding: 18px;
  animation: slidein .2s ease;
}
.pk-box {
  width: 100%; max-width: 380px; background: var(--card2); border: 1px solid var(--accent2);
  border-radius: 14px; padding: 18px; text-align: center;
}
.pk-box h3 { margin: 0 0 4px; }
.pk-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; max-height: 320px; overflow: auto; }
.pk-jog {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--card); color: var(--txt); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; text-align: left;
}
.pk-jog:hover { border-color: var(--accent2); }
.pk-jog .nome { flex: 1; font-weight: 600; }
.pk-jog .ovr { font-weight: 700; color: var(--accent2); }

/* ---- tela inicial ---- */
main[data-tela="inicio"] { max-width: 880px; }
.home-hero { text-align: center; padding: 42px 12px 8px; }
.home-eyebrow {
  display: inline-block; color: var(--accent2); font-size: 12px; font-weight: 800;
  letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 16px;
}
.home-title { font-size: 40px; line-height: 1.15; font-weight: 800; margin: 0 0 16px; }
.home-title span { color: var(--accent); }
.home-tag { color: var(--dim); font-size: 16px; max-width: 540px; margin: 0 auto; line-height: 1.55; }

.home-features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px; margin: 40px 0 36px;
}
.home-feat {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  transition: border-color .12s, transform .12s;
}
.home-feat:hover { border-color: var(--accent); transform: translateY(-2px); }
.home-feat-icon {
  flex: none; width: 46px; height: 46px; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; font-size: 22px; background: var(--card2);
}
.home-feat b { display: block; margin-bottom: 5px; font-size: 15px; }
.home-feat p { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.5; }

.home-cta-wrap { text-align: center; padding-bottom: 12px; }
.home-cta { font-size: 16px; padding: 16px 36px; border-radius: 14px; }

/* ---- controles de velocidade / auto ---- */
.ctrl { display:flex; align-items:center; gap:8px; }
.ctrl-lbl { color:var(--dim); }
.seg { display:inline-flex; background:var(--card2); border:1px solid var(--line);
  border-radius:10px; overflow:hidden; }
.seg button { background:transparent; color:var(--dim); border:none; border-radius:0;
  padding:9px 14px; font-weight:700; }
.seg button:hover { filter:none; color:var(--txt); }
.seg button.on { background:var(--accent); color:#0d1013; }
button.ghost.on { border-color:var(--accent2); color:var(--accent2); }