/* Ported from world_cup_2026_status.html, extended for the live app. */
:root{
  --ink:#0d1b2a; --muted:#5b6b7b; --line:#e3e8ee; --bg:#f6f8fb;
  --win:#1b7f4b; --draw:#b6862c; --loss:#b23b3b; --live:#c0392b;
  --accent:#16324f; --soft:#eef3f8; --card:#ffffff;
  --green1:#118a4e; --gold:#caa53d;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;padding:28px 18px;}
.wrap{max-width:980px;margin:0 auto;}
header.hero{background:linear-gradient(135deg,#0d2b45,#16324f 60%,#1b4d3a);
  color:#fff;border-radius:18px;padding:26px 28px;position:relative;overflow:hidden;}
header.hero h1{margin:0 0 4px;font-size:26px;letter-spacing:.2px;}
header.hero .sub{font-size:14px;opacity:.85;font-weight:500;}
.badge{display:inline-block;margin-top:14px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);padding:6px 13px;border-radius:999px;
  font-size:13px;font-weight:600;}
.hostflags{position:absolute;right:24px;top:22px;font-size:13px;opacity:.9;text-align:right;}

/* live meta bar: Updated / Source / LIVE / stale banner */
.metabar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:16px 0 0;font-size:12.5px;color:var(--muted);}
.metabar .updated b{color:var(--ink);}
.metabar .src{font-weight:600;}
.live-pill{display:inline-flex;align-items:center;gap:6px;color:var(--live);
  font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:11.5px;}
.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 0 rgba(192,57,43,.6);animation:pulse 1.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,.55);}70%{box-shadow:0 0 0 7px rgba(192,57,43,0);}100%{box-shadow:0 0 0 0 rgba(192,57,43,0);}}
.stale-banner{margin:12px 0 0;padding:9px 13px;border-radius:9px;font-size:12.5px;font-weight:600;
  background:#fff6e3;border:1px solid #ecd9a6;color:#8a6300;display:none;}
.stale-banner.show{display:block;}
@media (prefers-reduced-motion:reduce){.livedot{animation:none;}}

/* timeline */
.tl{margin:26px 0 8px;}
.tl h2,.section h2{font-size:13px;text-transform:uppercase;letter-spacing:1.3px;
  color:var(--muted);margin:0 0 12px;font-weight:700;}
.stages{display:flex;gap:6px;flex-wrap:wrap;}
.stage{flex:1 1 0;min-width:118px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:11px 12px;position:relative;}
.stage.now{border-color:#1b4d3a;box-shadow:0 0 0 2px rgba(27,77,58,.18);}
.stage .ph{font-weight:700;font-size:13.5px;}
.stage .dt{font-size:11.5px;color:var(--muted);margin-top:2px;}
.stage .tag{position:absolute;top:-9px;left:11px;background:#1b4d3a;color:#fff;
  font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.4px;}

/* matchday progress */
.mdbar{display:flex;gap:5px;margin:16px 0 4px;flex-wrap:wrap;}
.mdpill{flex:1 1 60px;text-align:center;padding:8px 4px;border-radius:9px;font-size:12px;
  font-weight:700;border:1px solid var(--line);background:var(--card);}
.mdpill.done{background:#e7f3ec;border-color:#bfe0cd;color:#0f6b3e;}
.mdpill.part{background:#fff6e3;border-color:#ecd9a6;color:#9a7415;}
.mdpill.today{background:#fdeceb;border-color:#f3c4c0;color:#b23b3b;}
.mdpill.next{background:var(--soft);color:var(--muted);}
.legend{font-size:12px;color:var(--muted);margin-top:8px;}
.legend span{display:inline-block;margin-right:14px;}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;}

.section{margin-top:30px;}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(max-width:680px){.grid{grid-template-columns:1fr;}}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:14px 15px 6px;}
.ghead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;}
.ghead .gname{font-weight:800;font-size:15px;}
.status{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.3px;white-space:nowrap;}
.s-done{background:#e7f3ec;color:#0f6b3e;}
.s-part{background:#fff6e3;color:#9a7415;}
.s-today{background:#fdeceb;color:#b23b3b;}
.s-next{background:var(--soft);color:var(--muted);}
.s-live{background:#fdeceb;color:#b23b3b;display:inline-flex;align-items:center;gap:5px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:700;text-align:center;padding:2px 0;}
th.tl,td.tl{text-align:left;}
td{padding:5px 0;border-top:1px solid #f0f3f7;text-align:center;}
td.team{text-align:left;font-weight:600;}
td.team .flag{margin-right:6px;}
td.pts{font-weight:800;}
.qual td.team .name::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--green1);margin-right:7px;vertical-align:middle;}
tr.pending td{color:#9aa7b4;font-style:italic;}
.fixtures{font-size:12px;color:var(--muted);margin-top:7px;padding-top:7px;border-top:1px dashed #e7ecf2;}
.fixtures b{color:var(--ink);font-weight:700;}
.res{color:var(--ink);}
.res .livedot{margin-right:4px;}

/* loading skeleton */
.skeleton .gcard{min-height:150px;}
.loading-note{font-size:13px;color:var(--muted);padding:20px 0;text-align:center;}

footer{margin-top:26px;font-size:11.5px;color:var(--muted);line-height:1.6;}
footer b{color:var(--ink);}

/* a11y: visible focus */
a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}