:root{
  --ink:#07091a;
  --panel:#12162c;
  --panel2:#1a2040;
  --line:rgba(244,193,93,.22);
  --gold:#f4c15d;
  --gold2:#ffe3a3;
  --ice:#e7ecff;
  --muted:#9aa3c7;
  --live:#ff4d6d;
  --soon:#8b7cff;
  --done:#7f89b2;
  --ok:#3ee0b0;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --font:"Segoe UI",Tahoma,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ice);
  font-family:var(--font);
  line-height:1.75;
  background:
    radial-gradient(900px 420px at 0% -10%, rgba(139,124,255,.28), transparent 55%),
    radial-gradient(700px 380px at 100% 0%, rgba(244,193,93,.16), transparent 50%),
    radial-gradient(500px 300px at 80% 100%, rgba(62,224,176,.08), transparent 50%),
    var(--ink);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.skip{position:absolute;right:-999px;top:0}
.skip:focus{right:12px;top:12px;z-index:9;background:#fff;color:#111;padding:8px 12px;border-radius:8px}
.top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 22px;
  background:rgba(7,9,26,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand .mark{width:42px;height:42px;flex:none}
.brand em{font-style:normal;color:var(--gold)}
.brand small{display:block;color:var(--muted);font-weight:600;letter-spacing:.08em;font-size:11px}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a,.orbit-link{
  border:1px solid transparent;
  border-radius:999px;
  padding:6px 12px;
  color:var(--muted);
  font-size:14px;
}
.nav a[aria-current="page"],.orbit-link.is-on{
  color:#1a1406;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  border-color:transparent;
}
.shell{width:min(1080px,calc(100% - 28px));margin:0 auto;padding:28px 0 48px}
.hero{padding:18px 0 8px}
.eyebrow{display:flex;align-items:center;gap:8px;color:var(--gold);font-size:13px;margin:0 0 8px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(255,77,109,.7);animation:ping 1.6s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
h1{margin:0 0 8px;font-size:clamp(28px,5vw,46px);line-height:1.25;letter-spacing:-.02em}
.lead{margin:0;max-width:68ch;color:var(--muted)}
.orbit{display:flex;gap:8px;margin:18px 0 14px;flex-wrap:wrap}
.meters{display:flex;gap:10px;list-style:none;padding:0;margin:0}
.meters li{
  min-width:92px;padding:10px 14px;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.meters b{display:block;font-size:22px;color:var(--gold2)}
.meters span{color:var(--muted);font-size:13px}
.board-wrap{margin-top:26px}
.board-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:12px}
.board-head h2,.prose h2,.faq h2{margin:0;font-size:22px}
.board-head p{margin:0;color:var(--muted);font-size:13px}
.empty{
  padding:28px;border-radius:20px;text-align:center;color:var(--muted);
  border:1px dashed var(--line);background:rgba(255,255,255,.03);
}
.star-board{display:grid;gap:12px}
.star-card{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr;
  grid-template-areas:"league league status status" "home mid mid away";
  gap:8px 12px;align-items:center;
  padding:14px 16px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
  border:1px solid rgba(244,193,93,.16);
  box-shadow:var(--shadow);
}
.star-card.is-live{border-color:rgba(255,77,109,.55);box-shadow:0 0 0 1px rgba(255,77,109,.25),var(--shadow)}
.star-league{grid-area:league;color:var(--gold2);font-size:13px}
.star-status{grid-area:status;justify-self:end;font-size:12px;border-radius:999px;padding:3px 10px;background:rgba(255,255,255,.06)}
.star-status.is-live{color:#fff;background:var(--live)}
.star-status.is-soon{color:#efeaff;background:rgba(139,124,255,.35)}
.star-status.is-done{color:var(--done)}
.star-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-left:6px}
.star-side{display:flex;align-items:center;gap:10px;min-width:0}
.star-side.home{grid-area:home}
.star-side.away{grid-area:away;flex-direction:row-reverse;text-align:left}
.star-side img{width:46px;height:46px;object-fit:contain;background:#0c1024;border-radius:14px;padding:4px}
.star-side strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.star-mid{grid-area:mid;text-align:center}
.star-score{font-size:26px;letter-spacing:.04em;color:#fff}
.star-score span{color:var(--gold);padding:0 4px}
.star-kick{display:block;font-size:18px}
.star-mid small{color:var(--muted)}
.prose,.faq{margin-top:34px}
.prose p,.faq p{color:#c9d0ee}
.prose a,.faq a{color:var(--gold2);text-decoration:underline}
.faq details{border-top:1px solid rgba(255,255,255,.08);padding:10px 0}
.faq summary{cursor:pointer;font-weight:700}
.foot{
  width:min(1080px,calc(100% - 28px));
  margin:0 auto 28px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;gap:8px;color:var(--muted);
}
.foot nav{display:flex;gap:12px;flex-wrap:wrap}
.foot strong{color:var(--ice)}
.client-ad{margin:12px 0;overflow:auto}
.errpage{min-height:70vh;display:grid;place-items:center;text-align:center;padding:40px 16px}
.errpage a{color:#1a1406;background:var(--gold);border-radius:999px;padding:8px 16px;display:inline-block;margin-top:12px}
@media(max-width:720px){
  .top{flex-wrap:wrap}
  .star-card{grid-template-columns:1fr auto 1fr;grid-template-areas:"league status status" "home mid away"}
  .star-side strong{white-space:normal}
  .board-head{flex-direction:column;align-items:start}
}
