:root{
  --bg:#f3efe8; --surface:#ffffff; --surface-2:#faf7f2;
  --ink:#201d18; --muted:#8c8273; --faint:#b7ae9f;
  --bronze:#b07a3c; --bronze-2:#c79a5e; --bronze-ink:#8a5c28;
  --line:#e7e0d4; --line-2:#efe9de;
  --gold:#c99a1e; --silver:#9aa0a6; --bronze-medal:#b07a3c;
  --shadow:0 1px 2px rgba(60,45,20,.06), 0 8px 24px rgba(60,45,20,.06);
  --radius:14px;
  --font:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.4;
  padding-bottom:40px;
}
a{color:var(--bronze-ink)}

/* ---------- header ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{max-width:1180px; margin:0 auto; padding:12px 18px; display:flex; align-items:center; gap:16px}
.logo{height:40px; width:auto; display:block}
.title-wrap{display:flex; flex-direction:column; min-width:0}
.title{font-weight:800; font-size:clamp(15px,2.4vw,20px); letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.subtitle{font-size:12px; color:var(--muted); font-weight:600}
.live{margin-left:auto; display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap}
.dot{width:8px; height:8px; border-radius:50%; background:#2ecc71; box-shadow:0 0 0 0 rgba(46,204,113,.5); animation:pulse 2s infinite}
.live.stale .dot{background:var(--faint); animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,204,113,.5)}70%{box-shadow:0 0 0 7px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}

/* ---------- category chips ---------- */
.cats-wrap{background:var(--surface-2); border-bottom:1px solid var(--line)}
.cats{max-width:1180px; margin:0 auto; padding:10px 18px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin}
.cats::-webkit-scrollbar{height:6px}
.cats::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
.chip{
  flex:0 0 auto; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); font-weight:700; font-size:14px; padding:8px 15px;
  border-radius:999px; cursor:pointer; transition:.15s; white-space:nowrap;
}
.chip:hover{border-color:var(--bronze-2)}
.chip.on{background:var(--bronze); border-color:var(--bronze); color:#fff; box-shadow:var(--shadow)}

/* ---------- main ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:18px}
.tabs{display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--line)}
.tab{
  border:0; background:none; font-family:inherit; font-weight:700; font-size:15px;
  color:var(--muted); padding:11px 16px; cursor:pointer; position:relative; transition:.15s;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--bronze-ink)}
.tab.on::after{content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:3px; background:var(--bronze); border-radius:3px 3px 0 0}

.panel{display:none}
.panel.on{display:block; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}

.section-head{display:flex; align-items:baseline; gap:12px; margin:4px 2px 12px}
.section-head h2{font-size:17px; margin:0; font-weight:800}
.section-head .meta{font-size:13px; color:var(--muted); font-weight:600}

/* ---------- results table ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch}
.tbl{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:14px}
.tbl th,.tbl td{padding:10px 10px; text-align:right; white-space:nowrap}
.tbl th{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:800; background:var(--surface-2); border-bottom:1px solid var(--line)}
.tbl td{border-bottom:1px solid var(--line-2); font-weight:600}
.tbl tr:last-child td{border-bottom:0}
.tbl .c-rank{width:46px; text-align:center; font-weight:800; color:var(--muted)}
.tbl .c-flag{width:34px; text-align:center}
.tbl .c-num{width:54px; color:var(--muted); font-weight:700}
.tbl .c-name{text-align:left; font-weight:700; color:var(--ink); white-space:normal}
.tbl .c-q{color:var(--muted); font-weight:600; line-height:1.25}
.tbl .c-q .qt{display:inline-block}
.tbl .c-q .qpen{display:block; font-size:10px; font-weight:800; color:#c0392b; letter-spacing:.04em; text-transform:uppercase; margin-top:1px}
.tbl .c-q .qrev{color:var(--bronze-ink); margin-left:4px; font-weight:800}
.tbl .c-total{font-weight:800}
.tbl td.miss{color:var(--faint)}
.tbl tr.rev td.c-total{color:var(--bronze-ink)}
.tbl tr.noflew{opacity:.6}
.tbl tr.noflew .c-name{font-weight:600; color:var(--muted)}
.tbl tr.noflew:hover{opacity:.85}
.tbl tbody tr:hover{background:var(--surface-2)}
.rank-medal{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-size:13px; font-weight:800; color:#fff}
.m1{background:var(--gold)} .m2{background:var(--silver)} .m3{background:var(--bronze-medal)}
.flag{height:16px; width:auto; aspect-ratio:4/3; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); vertical-align:-2px}
.flag-int{display:inline-block; font-size:9px; font-weight:800; letter-spacing:.03em; padding:2px 4px; border:1.5px solid var(--faint); border-radius:3px; color:var(--muted)}

.unit{color:var(--muted); font-weight:700; font-size:.78em; margin-left:2px}
.note{padding:28px 18px; text-align:center; color:var(--muted); font-weight:600}

/* ---------- bracket ---------- */
.bracket-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:6px; overflow:auto}
#bracketCanvas{display:block; width:100%; height:auto}
.scroll-hint{font-size:12px; color:var(--muted); font-weight:600; margin:8px 2px 0; display:none}

/* ---------- footer ---------- */
.foot{max-width:1180px; margin:28px auto 0; padding:18px; text-align:center; color:var(--faint); font-size:12px; font-weight:600}
.foot img{height:26px; opacity:.6; display:block; margin:0 auto 8px}

@media (max-width:640px){
  .wrap{padding:12px}
  .tbl{font-size:12px}
  .tbl th,.tbl td{padding:8px 7px}
  .tbl .c-rank{width:38px}
  .tbl .c-flag{width:28px}
  .tbl .c-num{width:40px}
  .tbl .c-q .qpen{font-size:9px}
  .rank-medal{width:22px; height:22px; font-size:11px}
  .card{border-radius:12px}
  .scroll-hint{display:block}
  .qual-hint{display:block}
}
/* horizontal-scroll hint for the qualification table on small screens */
.qual-hint{display:none; font-size:12px; color:var(--muted); font-weight:600; margin:8px 2px 0; text-align:center}