/* Game-day site: shared layout and components. Each page picks a theme with body.sea or body.kc. */
:root{
  --font-head:'Barlow Condensed',Bahnschrift,'DIN Condensed','Roboto Condensed','Arial Narrow',sans-serif;
  --font-body:Inter,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --field:#4F9E24;--field-2:#59AB2B;--field-end:#2E7A1C;--field-line:#A8D97C;
}
body.sea{
  --brand:#002244;--brand-2:#0A3A66;--brand-deep:#00152B;
  --accent:#69BE28;--accent-ink:#002244;--accent-text:#3E7E14;
  --hero-muted:#B9C3CD;--hero-line:rgba(255,255,255,.14);
  --muted:#A5ACAF;--opp:#A5ACAF;
  --bg:#EDF1F5;--card:#FFFFFF;--soft:#F3F6F9;--line:#DCE3EA;
  --ink:#0F1E2E;--ink-2:#3A4A5A;--ink-3:#5B6B7B;
}
body.kc{
  --brand:#A50E24;--brand-2:#E31837;--brand-deep:#4F0410;
  --accent:#FFB81C;--accent-ink:#3A0A10;--accent-text:#986200;
  --hero-muted:#F6D2D7;--hero-line:rgba(255,255,255,.22);
  --muted:#E9B9C0;--opp:#002244;
  --bg:#F6F0EF;--card:#FFFFFF;--soft:#FBF6F5;--line:#ECDDDD;
  --ink:#1D1214;--ink-2:#4D3A3D;--ink-3:#7A6669;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:112px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:.01em}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;background:var(--brand);background:color-mix(in srgb,var(--brand) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.topbar-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:10px 20px}
.brandmark{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--font-head);font-weight:800;letter-spacing:.08em;font-size:18px;white-space:nowrap;text-transform:uppercase}
.brandmark .badge{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:15px;letter-spacing:0}
.switch{margin-left:auto;white-space:nowrap;text-decoration:none;font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--accent-ink);background:var(--accent);padding:7px 13px;border-radius:999px}
.switch:hover{filter:brightness(1.06)}
.nav{order:3;width:100%;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{color:rgba(255,255,255,.78);text-decoration:none;font-weight:600;font-size:13px;padding:6px 11px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.12);color:#fff}
@media (min-width:980px){.nav{order:0;width:auto;margin-left:auto}.switch{margin-left:6px}}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(900px 420px at 88% -10%,var(--brand-2) 0%,transparent 62%),linear-gradient(160deg,var(--brand-deep) 0%,var(--brand) 58%,var(--brand-2) 125%)}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 22px);pointer-events:none}
.hero-inner{position:relative;max-width:1080px;margin:0 auto;padding:54px 20px 64px;display:grid;grid-template-columns:1.35fr .9fr;gap:30px;align-items:end}
@media (max-width:860px){.hero-inner{grid-template-columns:1fr;padding:40px 20px 58px}}
.eyebrow{font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.hero h1{font-size:clamp(68px,14vw,140px);line-height:.85;margin:14px 0 12px;letter-spacing:.015em}
.vsline{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:700;font-size:clamp(20px,3.4vw,30px);letter-spacing:.08em;color:var(--hero-muted);text-transform:uppercase}
.vs{background:var(--accent);color:var(--accent-ink);border-radius:6px;padding:3px 10px;font-size:.66em;letter-spacing:.06em}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid var(--hero-line)}
.facts>div{padding:14px 10px 0 0}
.facts>div+div{padding-left:14px;border-left:1px solid var(--hero-line)}
.k{font-size:11px;letter-spacing:.2em;font-weight:700;text-transform:uppercase}
.facts .k{color:var(--hero-muted)}
.facts .v{font-family:var(--font-head);font-weight:700;font-size:clamp(17px,3vw,24px);letter-spacing:.03em;margin-top:3px;text-transform:uppercase;line-height:1.15}

/* countdown / live score card */
.clock{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:20px 22px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.clock .k{color:var(--accent)}
.digits{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.unit{background:rgba(0,0,0,.22);border-radius:14px;padding:12px 6px 10px;text-align:center}
.num{font-family:var(--font-head);font-weight:800;font-size:clamp(40px,7vw,58px);line-height:1;font-variant-numeric:tabular-nums}
.lbl{font-size:10px;letter-spacing:.2em;color:var(--hero-muted);font-weight:700;margin-top:4px}
.clock .sub{margin-top:12px;font-size:13px;color:var(--hero-muted)}
.clock .live,.clock .cheer{display:none}
.clock.started .count,.clock.live .count{display:none}
.clock.started .cheer{display:block}
.clock.live .cheer{display:none}
.clock.live .live{display:block}
.cheer{font-family:var(--font-head);font-weight:800;font-size:clamp(40px,7vw,56px);line-height:1;margin-top:10px;letter-spacing:.04em}
.score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:10px;text-align:center}
.score .tm{font-size:12px;letter-spacing:.2em;font-weight:700;color:var(--hero-muted)}
.score .pts{font-family:var(--font-head);font-weight:800;font-size:clamp(46px,8vw,64px);line-height:1;font-variant-numeric:tabular-nums}
.score .dash{font-family:var(--font-head);font-size:30px;color:var(--hero-muted)}
.status{margin-top:8px;text-align:center;font-weight:700;letter-spacing:.06em;font-size:14px}
.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2DCC57;margin-right:6px;vertical-align:1px;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(45,204,87,.6)}70%{box-shadow:0 0 0 8px rgba(45,204,87,0)}100%{box-shadow:0 0 0 0 rgba(45,204,87,0)}}
.stripe{height:5px;background:var(--accent)}
.stripe+.stripe{height:3px;background:var(--muted)}

/* main layout */
main{max-width:1080px;margin:0 auto;padding:0 20px 30px}
.reveal{transition:opacity .7s ease,transform .7s ease}
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.in{opacity:1;transform:none}

/* ticket */
.ticket{position:relative;z-index:2;margin-top:-34px;display:grid;grid-template-columns:1fr auto;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 22px 44px -24px rgba(0,0,0,.45)}
.ticket .main{padding:20px 24px 18px}
.ticket .main .k{color:var(--ink-3)}
.seats{display:flex;gap:34px;margin-top:10px;flex-wrap:wrap}
.seats .v{font-family:var(--font-head);font-weight:800;font-size:clamp(38px,8vw,54px);line-height:1;color:var(--brand);white-space:nowrap}
.seats .k{font-size:10px}
.ticket .note{margin-top:10px;font-size:14px;color:var(--ink-2)}
.stub{position:relative;background:var(--brand);color:#fff;padding:18px 26px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-left:2px dashed rgba(255,255,255,.4);min-width:160px}
.stub::before,.stub::after{content:"";position:absolute;left:-14px;width:26px;height:26px;border-radius:50%;background:var(--bg)}
.stub::before{top:-13px}.stub::after{bottom:-13px}
.stub .k{color:var(--accent)}
.stub .big{font-family:var(--font-head);font-weight:800;font-size:48px;line-height:1;margin-top:4px}
.stub .s{font-size:12px;color:var(--hero-muted);margin-top:2px}
@media (max-width:600px){.ticket{grid-template-columns:1fr}.stub{border-left:0;border-top:2px dashed rgba(255,255,255,.4);flex-direction:row;justify-content:space-between;gap:12px;text-align:left}.stub::before,.stub::after{display:none}.stub .big{font-size:38px}}

/* glance cards */
.glance{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
@media (max-width:860px){.glance{grid-template-columns:repeat(2,1fr)}}
.gcard{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:16px;padding:14px 16px 16px}
.gcard .k{color:var(--ink-3);font-size:10px}
.gcard .v{font-family:var(--font-head);font-weight:800;font-size:26px;line-height:1.05;color:var(--brand);margin-top:5px;text-transform:uppercase}
.gcard .s{font-size:13px;line-height:1.4;color:var(--ink-2);margin-top:4px}

/* sections */
.block{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;margin-top:22px}
@media (max-width:600px){.block{padding:22px 18px;border-radius:18px}}
.shead{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.shead .n{flex:none;width:46px;height:46px;border-radius:50%;background:var(--brand);color:var(--accent);display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:19px}
.shead .k{color:var(--ink-3);font-size:11px}
.shead h2{margin:3px 0 0;font-size:clamp(28px,4.8vw,38px);color:var(--brand)}
.lead{font-size:17px;margin:0 0 16px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
ul.ticks{list-style:none;padding:0;margin:0}
ul.ticks li{position:relative;padding-left:22px;margin:0 0 11px}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--accent)}
ul.ticks b{color:var(--brand)}
.fine{font-size:12px;color:var(--ink-3);margin-top:10px}
.callout{background:var(--soft);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:12px 16px;font-size:14px;color:var(--ink-2);margin-top:16px}
.callout b{color:var(--brand)}

/* timeline */
.tl{list-style:none;margin:4px 0 0;padding:0}
.tl li{position:relative;display:grid;grid-template-columns:88px 22px 1fr;column-gap:12px;padding-bottom:18px}
.tl li::before{content:"";position:absolute;left:109px;top:14px;bottom:-2px;width:2px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl .t{font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--brand);text-align:right;white-space:nowrap;line-height:1.25}
.tl .d{position:relative;z-index:1;width:14px;height:14px;margin:4px auto 0;border-radius:50%;background:var(--accent);border:3px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.tl .x b{display:block;line-height:1.3}
.tl .x span{font-size:14px;color:var(--ink-3)}
.tl li.ko .t{color:var(--accent-text);font-size:21px}
.tl li.ko .d{width:20px;height:20px;margin-top:2px;background:var(--brand);border:4px solid var(--accent);box-shadow:none}
.tl li.ko .x{background:var(--brand);color:#fff;border-radius:12px;padding:9px 14px;font-family:var(--font-head);font-weight:800;font-size:23px;letter-spacing:.12em;text-transform:uppercase}
.tl li.ko .x small{color:var(--accent);font-size:13px;letter-spacing:.08em;margin-left:6px}

/* weather */
.wx{background:var(--soft);border-radius:18px;padding:16px 10px 8px}
.wx svg{width:100%}
.wx-t{font-family:var(--font-head);font-weight:800;font-size:22px;fill:var(--brand);text-anchor:middle}
.wx-p{font-family:var(--font-body);font-weight:700;font-size:15px;fill:var(--ink);text-anchor:middle}
.wx-h{font-family:var(--font-body);font-weight:600;font-size:13px;fill:var(--ink-3);text-anchor:middle}
.wx-h.ko{fill:var(--brand);font-weight:800}
.wx-bar{fill:#B9C3CD}
.wx-bar-g{fill:var(--accent)}
.wx-game{fill:var(--accent);opacity:.09}
.wx-ko{font-family:var(--font-body);font-weight:800;font-size:11px;letter-spacing:.14em;fill:var(--brand);text-anchor:middle}
.wx-meta{font-size:12px;color:var(--ink-3);margin-top:8px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
@media (max-width:600px){.chips{grid-template-columns:repeat(2,1fr)}}
.chip{border:1px solid var(--line);border-radius:14px;padding:10px 8px;text-align:center}
.chip .k{font-size:10px;color:var(--ink-3)}
.chip .v{font-family:var(--font-head);font-weight:800;font-size:23px;color:var(--brand);margin-top:2px;text-transform:uppercase}

/* stadium diagram */
.stadium{background:var(--soft);border-radius:18px;padding:16px 12px 12px}
.stadium svg{margin:0 auto;width:100%;max-width:440px}
.st-shell{fill:#DCE3EA}
.kc .st-shell{fill:#EADADC}
.st-west{fill:var(--brand)}
.st-east{fill:#B9C3CD}
.kc .st-east{fill:#CDB7BB}
.st-south{fill:#C6CED6}
.kc .st-south{fill:#D9C4C7}
.st-field{fill:var(--field)}
.st-stripe{fill:var(--field-2)}
.st-end{fill:var(--field-end)}
.st-line{stroke:var(--field-line);stroke-width:1}
.st-50{font-family:var(--font-head);font-weight:800;font-size:16px;fill:#fff;text-anchor:middle;letter-spacing:.1em}
.st-sec{fill:var(--accent)}
.st-ring{fill:none;stroke:var(--accent);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
.st-seclbl{font-family:var(--font-head);font-weight:800;font-size:20px;fill:var(--accent-ink);text-anchor:middle}
.st-secsub{font-family:var(--font-body);font-weight:800;font-size:8px;letter-spacing:.12em;fill:var(--accent-ink);text-anchor:middle}
.st-side{font-family:var(--font-body);font-weight:700;font-size:9px;letter-spacing:.16em;fill:#fff;text-anchor:middle;opacity:.8}
.st-side.dark{fill:var(--ink-2)}
.st-cap{font-family:var(--font-body);font-weight:700;font-size:10px;letter-spacing:.14em;fill:var(--ink-3);text-anchor:middle}
.st-gate{fill:var(--brand);stroke:#fff;stroke-width:2}
.st-gatelbl{font-family:var(--font-head);font-weight:800;font-size:13px;fill:var(--brand);text-anchor:end}
.st-roof{fill:#fff;opacity:.12}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:12px;color:var(--ink-3);margin-top:8px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--accent);margin-right:6px;vertical-align:-1px}
.legend i.g{border-radius:50%;background:var(--brand)}

/* event list */
.ev{display:grid;grid-template-columns:auto 1fr;gap:0 14px}
.ev>div{padding:11px 0;border-bottom:1px solid var(--line)}
.ev>div:nth-last-child(-n+2){border-bottom:0}
.pill{display:inline-block;background:var(--brand);color:#fff;border-radius:999px;padding:4px 12px;font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.04em;white-space:nowrap;text-transform:uppercase}
.pill.hot{background:var(--accent);color:var(--accent-ink)}
.ev .what{font-size:15px}
.ev .what b{color:var(--brand)}

/* food */
.spots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:860px){.spots{grid-template-columns:1fr}}
.spot{background:var(--soft);border-radius:16px;padding:15px 16px;border-left:4px solid var(--muted)}
.spot.pick{border-left-color:var(--accent)}
.spot h3{margin:0;font-size:21px;color:var(--brand)}
.spot .addr{font-size:13px;color:var(--ink-3);margin-top:3px}
.spot p{margin:7px 0 0;font-size:14px;color:var(--ink-2)}
.tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.14em;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:3px;font-family:var(--font-body)}
.subhead{font-size:11px;letter-spacing:.2em;font-weight:800;color:var(--brand);margin:22px 0 10px;text-transform:uppercase}
.near{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px}
@media (max-width:600px){.near{grid-template-columns:1fr}}
.nitem{display:flex;align-items:center;gap:12px;font-size:15px}
.sec{flex:none;width:54px;height:34px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:18px}
.sec.hot{background:var(--accent);color:var(--accent-ink)}

/* matchup */
.board{position:relative;overflow:hidden;border-radius:20px;color:#fff;padding:24px 18px 20px;background:radial-gradient(600px 240px at 50% -20%,var(--brand-2),transparent 70%),linear-gradient(155deg,var(--brand-deep),var(--brand) 60%,var(--brand-2) 130%);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center}
.board .tm{font-size:12px;letter-spacing:.24em;font-weight:800}
.board .tm.us{color:var(--accent)}
.board .tm.them{color:var(--hero-muted)}
.board .rec{font-family:var(--font-head);font-weight:800;font-size:clamp(60px,11vw,92px);line-height:.95;margin:4px 0}
.board .tg{font-size:13px;color:var(--hero-muted)}
.vsb{width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:21px}
.odds{grid-column:1/-1;margin-top:16px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.odds span{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700;letter-spacing:.05em}
.tape{width:100%;border-collapse:collapse;margin-top:20px}
.tape caption{font-size:11px;letter-spacing:.22em;font-weight:800;color:var(--brand);padding-bottom:10px}
.tape th{font-size:11px;letter-spacing:.2em;font-weight:800;padding:0 12px 8px}
.tape th.l{text-align:right;color:var(--accent-text)}
.tape th.r{text-align:left;color:var(--ink-3)}
.tape td{padding:12px;border-top:1px solid var(--line);vertical-align:middle;font-size:14px}
.tape td.l{text-align:right}
.tape td.m{text-align:center;font-size:10px;letter-spacing:.2em;color:var(--ink-3);font-weight:800;width:92px;padding:12px 2px}
.tape td.r{text-align:left}
.tape .big{font-family:var(--font-head);font-weight:800;font-size:28px;color:var(--brand)}
.tape .nm{font-weight:700;color:var(--brand)}
.tape .st{color:var(--ink-3);font-size:13px}
.nw{white-space:nowrap}
.stories{list-style:none;padding:0;margin:0;counter-reset:s}
.stories li{counter-increment:s;display:grid;grid-template-columns:38px 1fr;margin-bottom:13px}
.stories li::before{content:counter(s);font-family:var(--font-head);font-weight:800;font-size:30px;line-height:.95;color:var(--accent-text)}
.stories b{color:var(--brand)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:860px){.keys{grid-template-columns:1fr}}
.key{background:var(--soft);border-radius:16px;padding:16px 18px}
.key .kn{font-family:var(--font-head);font-weight:800;font-size:38px;line-height:1;color:var(--accent-text)}
.key h4{margin:6px 0 5px;font-size:21px;color:var(--brand)}
.key p{margin:0;font-size:14px;color:var(--ink-2)}
.inj{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.inj{grid-template-columns:1fr}}
.injc{background:var(--soft);border-radius:16px;padding:14px 16px;border-top:4px solid var(--accent);font-size:14px}
.injc.opp{border-top-color:var(--opp)}
.injc .k{color:var(--brand);font-size:11px;margin-bottom:6px}
.injc p{margin:0 0 6px}

/* chant jumbotron */
.jumbo{position:relative;overflow:hidden;border-radius:24px;color:#fff;text-align:center;padding:30px 22px 26px;background:radial-gradient(circle at 50% 0%,var(--brand-2) 0%,var(--brand) 56%,var(--brand-deep) 100%)}
.jumbo::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px);background-size:6px 6px;pointer-events:none}
.jumbo>*{position:relative}
.jumbo .k{color:var(--accent)}
.chantrow{display:flex;align-items:center;justify-content:center;gap:16px}
.chantrow .lbl{width:84px;text-align:right;color:var(--hero-muted)}
.word{font-family:var(--font-head);font-weight:800;font-size:clamp(78px,17vw,150px);line-height:.92;letter-spacing:.04em;min-width:3.4em;text-align:left}
.word.call{color:#fff;animation:callA 2.6s infinite}
.word.resp{color:var(--accent);animation:respA 2.6s infinite}
@keyframes callA{0%,42%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55)}50%,100%{opacity:.32;text-shadow:none}}
@keyframes respA{0%,46%{opacity:.32;text-shadow:none}54%,94%{opacity:1;text-shadow:0 0 30px var(--accent)}100%{opacity:.32}}
.jumbo p{max-width:560px;margin:14px auto 0;color:#E2E8EE;font-size:16px}
.kc .jumbo p{color:#FCE6E9}
.duel{max-width:620px;margin:24px auto 0;padding-top:18px;border-top:1px solid var(--hero-line);text-align:left}
.duel .k{display:block;margin-bottom:12px}
.db{display:grid;grid-template-columns:104px 1fr 82px;gap:12px;align-items:center;margin-bottom:10px}
.db .who{font-weight:700;font-size:14px;line-height:1.2}
.db .who span{display:block;font-weight:500;font-size:12px;color:var(--hero-muted)}
.bar{height:16px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--accent);width:var(--w);transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.bar i.alt{background:var(--hero-muted)}
.js .duel:not(.in) .bar i{width:0}
.db .val{font-family:var(--font-head);font-weight:800;font-size:22px;text-align:right;white-space:nowrap}
.duel .note{font-size:14px;color:var(--hero-muted);margin-top:6px}

/* getting there, rules */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:860px){.ways{grid-template-columns:1fr}}
.way{background:var(--soft);border-radius:16px;padding:16px 18px}
.way h3{margin:0 0 8px;font-size:22px;color:var(--brand)}
.way ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink-2)}
.way li{margin-bottom:6px}
.way b{color:var(--brand)}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:860px){.rules{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.rules{grid-template-columns:1fr}}
.rule{background:var(--soft);border-radius:16px;padding:14px 16px}
.rule h4{margin:0 0 5px;font-size:19px;letter-spacing:.06em;color:var(--brand)}
.rule p{margin:0;font-size:14px;color:var(--ink-2)}

/* footer */
.go{color:#fff;text-align:center;padding:46px 20px 42px;background:radial-gradient(700px 260px at 50% -30%,var(--brand-2),transparent 70%),linear-gradient(160deg,var(--brand-deep),var(--brand))}
.go .badge{width:58px;height:58px;margin:0 auto;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:26px}
.go .big{font-family:var(--font-head);font-weight:800;font-size:clamp(52px,10vw,84px);line-height:1;letter-spacing:.08em;margin-top:14px}
.go a{display:inline-block;margin-top:14px;color:var(--accent);font-weight:700;text-decoration:none;font-size:14px}
.go a:hover{text-decoration:underline}
.sources{max-width:1080px;margin:0 auto;padding:22px 20px 44px;font-size:12px;line-height:1.7;color:var(--ink-3)}
.sources a{color:var(--accent-text)}

/* live states, chart marks, small screens */
.nav a.on{background:rgba(255,255,255,.16);color:#fff}
.clock.final .livedot{display:none}
.wx-chart{min-height:252px}
.wx-chart.narrow .wx-t{font-size:18px}
.wx-chart.narrow .wx-p{font-size:13px}
.wx-chart.narrow .wx-h{font-size:11.5px}
.wx-line{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round}
.wx-dot{fill:var(--card);stroke:var(--brand);stroke-width:3}
.legend i.gr{background:#B9C3CD}
.st-line.mid{stroke:#fff;stroke-width:1.6}
.duel .note{max-width:none;margin:8px 0 0}
.tl li::before{left:110px}
.word.long{font-size:clamp(58px,13vw,128px)}
.share{display:inline-flex;align-items:center;gap:8px;margin-top:18px;border:0;cursor:pointer;background:var(--accent);color:var(--accent-ink);font:700 14px/1 var(--font-body);letter-spacing:.02em;padding:12px 20px;border-radius:999px}
.share:hover{filter:brightness(1.06)}
.go a{display:block;width:max-content;margin:16px auto 0}
.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:860px){.tips{grid-template-columns:1fr}}
.tip{background:var(--soft);border-radius:16px;padding:15px 17px;border-top:4px solid var(--accent)}
.tip h4{margin:0 0 6px;font-size:20px;color:var(--brand)}
.tip p{margin:0;font-size:14px;color:var(--ink-2)}
@media (max-width:600px){
  .tape td{padding:10px 6px;font-size:13px}
  .tape td.m{width:62px;font-size:9px;letter-spacing:.12em}
  .tape .big{font-size:24px}
  .chantrow .lbl{display:none}
  .word{min-width:0;text-align:center}
  .tl li{grid-template-columns:74px 22px 1fr;column-gap:10px}
  .tl li::before{left:94px}
  .tl .t{font-size:17px}
  .go a{width:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .word,.st-ring,.livedot{animation:none!important}
  .word{opacity:1!important}
  .reveal,.js .reveal{opacity:1;transform:none;transition:none}
  .bar i{transition:none}
}