:root { --bg:#0b0b0c; --panel:#141416; --text:#f2f2f3; --muted:#a9a9b3; --accent:#ffd600; --border:#26262b; --green:#2bd980; }
* { box-sizing:border-box; }
html { color-scheme:dark; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,"Segoe UI",Arial,sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.container { width:100%; max-width:1160px; margin:auto; padding:20px; }
header { position:sticky; top:0; z-index:50; background:rgba(11,11,12,.7); backdrop-filter:blur(8px); border-bottom:1px solid #1d1d20; font-family:Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif; line-height:normal; }
header .container { max-width:1100px; margin:0 auto; padding:20px; }
header .brand:hover { color:inherit; }
.nav { display:flex; align-items:center; gap:16px; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; }
.logo { width:36px; height:36px; border-radius:10px; background:var(--accent); }
.tabs { display:flex; gap:10px; flex-wrap:wrap; }
.tab, .tab:hover { padding:10px 14px; border-radius:12px; background:#17171a; border:1px solid #1f1f22; color:#d9d9df; }
.tab.active { background:var(--accent); color:#111; }
.hero { padding:30px 0 24px; }
h1 { font-size:clamp(30px,4.5vw,46px); line-height:1.15; letter-spacing:-.035em; margin:12px 0 16px; overflow-wrap:anywhere; }
h2 { font-size:22px; margin:0 0 12px; }
h3 { font-size:16px; margin:0 0 18px; }
p { margin:8px 0 16px; }
.eyebrow { font-size:11px; color:var(--accent); font-weight:700; letter-spacing:.14em; margin:0 0 8px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px; }
.stats-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.stats-one { grid-template-columns:1fr; max-width:420px; }
.stat { background:#151517; border:1px solid #212127; border-radius:16px; padding:18px 20px; }
.stat > span { display:block; color:var(--muted); font-size:13px; margin-bottom:8px; }
.stat strong { font-size:clamp(18px,2.5vw,25px); }
.panel { border:1px solid var(--border); background:linear-gradient(180deg,#141416,#101013); border-radius:18px; }
.tournament-list { display:grid; gap:12px; }
.tournament-row { display:grid; grid-template-columns:1fr 1fr auto; gap:24px; align-items:center; padding:24px; }
.tournament-row h2 { margin:0; font-size:22px; }
.tournament-row p.muted { margin:8px 0 0; font-size:13px; }
.row-winners > span { display:block; font-size:12px; margin-bottom:8px; }
.row-winners > div { font-size:17px; font-weight:600; overflow-wrap:anywhere; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; background:var(--accent); color:#111; padding:11px 17px; border:1px solid var(--accent); border-radius:12px; font-family:inherit; font-size:14px; font-weight:600; line-height:1.5; cursor:pointer; white-space:nowrap; }
.button:hover { color:#111; filter:brightness(1.08); }
.button.secondary { background:#1b1b1e; border-color:#2a2a2f; color:var(--text); }
.button.secondary:hover { border-color:var(--accent); color:var(--accent); }
.search { margin:0 0 24px; }
.search label { display:block; font-size:13px; color:var(--muted); margin-bottom:8px; }
.search-row { display:flex; gap:10px; flex-wrap:wrap; }
.search input { flex:1; min-width:150px; max-width:500px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#141416; color:var(--text); font:inherit; }
.pagination { display:flex; gap:20px; align-items:center; justify-content:center; margin-top:28px; }
.empty { padding:32px; }
.breadcrumbs { display:flex; gap:12px; font-size:13px; color:var(--muted); margin:16px 0 0; }
.champions { border-color:#665900; padding:20px; margin-top:16px; background:linear-gradient(110deg,#28230c,#141416); }
.champion-names { margin-top:8px; font-size:24px; font-weight:700; overflow-wrap:anywhere; }
.separator { color:var(--muted); }
.notice { padding:20px; border:1px solid #765625; border-radius:16px; background:#221c11; }
.notice h2 { font-size:18px; }
.notice ul { margin-bottom:0; }
.section { margin:16px 0 34px; }
.review-notes { margin-top:12px; color:var(--muted); font-size:13px; }
.review-notes summary { cursor:pointer; }
.review-notes summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.review-notes ul { padding-left:20px; }
.withdrawal-label { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:4px; }
.bracket-scroll { overflow:auto; border:1px solid var(--border); border-radius:18px; background:#101012; }
.bracket { display:flex; width:max-content; min-width:100%; padding:16px; gap:40px; position:relative; }
.bracket-round { flex:0 0 220px; width:220px; z-index:1; }
.bracket-round h3 { color:var(--muted); padding-left:8px; margin-bottom:12px; }
.round-matches { display:flex; flex-direction:column; justify-content:space-around; gap:16px; position:relative; }
.match-card { width:100%; border:1px solid #303037; background:#17171b; border-radius:8px; overflow:hidden; scroll-margin:20px; }
.match-card:target { outline:2px solid var(--accent); outline-offset:4px; }
.match-team { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; font-size:13px; line-height:18px; border-left:3px solid transparent; }
.match-team + .match-team { border-top:1px solid #29292f; }
.match-team.won { background:#142a21; border-left-color:var(--green); }
.match-team .team-link { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.match-result { flex-shrink:0; color:var(--muted); }
.won .match-result { color:var(--green); font-weight:700; }
.match-meta { display:flex; gap:8px; justify-content:space-between; padding:4px 10px; color:var(--muted); font-size:10px; border-top:1px solid #29292f; }
.bracket-lines { position:absolute; inset:0; pointer-events:none; z-index:0; }
.bracket-lines path { fill:none; stroke:#545447; stroke-width:1.5; }
.table-scroll { overflow-x:auto; padding:8px 12px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; font-size:12px; font-weight:500; color:var(--muted); padding:16px 12px; white-space:nowrap; }
td { padding:16px 12px; border-top:1px solid #25252a; }
.place { font-weight:700; white-space:nowrap; }
.first { color:var(--accent); }
.text-link { color:var(--accent); white-space:nowrap; }
.footer { margin-top:40px; border-top:1px solid #212127; padding:20px 0; font-size:12px; color:var(--muted); }
.skip-link { position:absolute; left:16px; top:-100px; background:var(--accent); color:#111; padding:10px; z-index:100; }
.skip-link:focus { top:10px; }
@media (max-width:900px) { .nav { flex-direction:column; align-items:flex-start; } }
@media (max-width:650px) { .container { padding:16px; } .hero { padding:24px 0 20px; } .stats { grid-template-columns:1fr; gap:8px; } .stat { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 16px; } .stat > span { margin:0; } .tournament-row { grid-template-columns:1fr; gap:18px; padding:20px; } .tournament-row .button { justify-self:start; } .champion-names { font-size:21px; } .pagination { gap:12px; font-size:12px; } td { padding:14px 10px; min-width:90px; } .bracket { padding:20px; gap:40px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }