:root{
  --bg:#0f1115;
  --panel:#171a21;
  --card:#1b212a;
  --line:#262c36;
  --text:#e8eef7;
  --muted:#9da8bf;
  --green:#1fd783;  /* casa favorita */
  --red:#ff5b5b;    /* visitante favorito */
  --gray:#9aa3b7;   /* empate */
  --white:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.topbar h1{ margin:0; font-size:18px; }

.tabs{ display:flex; gap:8px; }
.tab{
  background:#0c56d1; color:#fff; border:0; padding:7px 12px; border-radius:10px; cursor:pointer; font-weight:600; opacity:.85;
}
.tab.active{ opacity:1; box-shadow:0 0 0 2px #244e9b inset; }

.container{ max-width:1300px; margin:18px auto; padding:0 16px; }

.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:14px;
}
.filters .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.filters label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.filters input[type="text"],
.filters input[type="number"]{
  background:var(--card); border:1px solid var(--line); color:var(--text);
  padding:8px 10px; border-radius:10px; min-width:140px;
}
.filters .chk{ flex-direction:row; gap:8px; align-items:center; padding:6px 10px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
#btnLoad{ background:#6ea8fe; color:#0b1220; border:0; padding:9px 14px; border-radius:10px; cursor:pointer; font-weight:700; }

.status{ color:var(--muted); min-height:20px; margin:4px 0; }

.main-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:16px; }
.stage-wrap{ position:relative; min-height:520px; background:radial-gradient(1200px 600px at 60% -200px, #1b2330 0%, #0f1115 60%); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.stage{ position:relative; width:100%; height:100%; }

.side{ display:flex; flex-direction:column; gap:16px; }
.side-card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:12px; }

.list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.item{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:8px 10px; cursor:pointer; display:flex; gap:10px; align-items:center;
}
.item small{ color:var(--muted); }

.foot{ margin:24px 0 40px; text-align:center; color:var(--muted); }

/* -------- Bolhas -------- */
.bubble{
  position:absolute; display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6);
  border:2px solid #fff;
  user-select:none; cursor:pointer; will-change:transform;
  box-shadow:
    inset -12px -14px 28px rgba(0,0,0,.25),
    inset 6px 8px 16px rgba(255,255,255,.12),
    0 12px 24px rgba(0,0,0,.25);
}
.bubble .label{ text-align:center; line-height:1.15; }
.bubble .code{ font-weight:800; display:block; }
.bubble .pct{ font-size:12px; opacity:.95; }

.b-green{ background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 40%), linear-gradient(180deg, #27c77a, #159b57); }
.b-red{   back