/* Worlds section (generated by scripts/build-worlds.ts). */
.ov { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
nav.crumbs { z-index: auto; padding: 0; background: none; border: none; transition: none; font-size: 13px; color: var(--text-dim); }
.crumbs a { color: var(--text-dim); text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--gold); }
.crumbs span[aria-hidden] { margin: 0 8px; opacity: .6; }
.wd h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; color: var(--gold-bright); margin: 0 0 10px; text-wrap: balance; scroll-margin-top: 24px; }
.wd p { font-size: 16px; line-height: 1.7; color: var(--text-muted); }
.sec-intro { max-width: 640px; }
.wm-sec { margin-top: 120px; scroll-margin-top: 16px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; margin-bottom: 20px; }
.wm-credit { margin: 80px 0 0; padding-bottom: 96px; font-size: 13px !important; line-height: 1.6 !important; color: var(--text-dim) !important; }
.wm-credit a { color: var(--text-muted); }
.wm-more { margin-top: 24px; }
.wm-empty { padding: 22px 4px; color: var(--text-dim) !important; }
.wd a:focus-visible, .wd button:focus-visible, .wd input:focus-visible, .wd summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 8px; }
.wd .btn-secondary svg, .wd .btn-primary svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wd .btn-secondary svg path[d^="M8 5.5"] { fill: currentColor; stroke: none; }

/* ── Hex badge: team logo (unaltered) or tricode inside our hex frame ── */
.hx { position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; aspect-ratio: 100 / 88; color: var(--c); transition: transform .3s cubic-bezier(.16,1,.3,1), filter .3s; }
.hx svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hx path { fill: color-mix(in srgb, var(--c) 14%, #15121a); stroke: color-mix(in srgb, var(--c) 80%, transparent); stroke-width: 4; stroke-linejoin: round; }
.hx b { position: relative; font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.hx img { position: relative; width: 60%; height: 60%; object-fit: contain; }
.hx-sm { width: 34px; } .hx-sm b { font-size: 9px; }
.hx-lg { width: 64px; } .hx-lg b { font-size: 15px; }
.hx-tbd path { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.22); stroke-dasharray: 7 6; }
.hx-tbd b { color: var(--text-dim); }
.hx.is-followed path { stroke: var(--gold-bright); stroke-width: 6; }
.hx.is-followed { filter: drop-shadow(0 0 8px rgba(232,213,163,0.5)); }

/* ── Hero ── */
.wh { position: relative; z-index: 4; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 24px 40px; min-height: 660px; padding: 26px 0 30px; }
.wh-art { position: absolute; z-index: -1; inset: 0 -24px 0 auto; width: min(1000px, 82%); margin: 0; pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 42%, transparent 92%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 42%, transparent 92%); mask-composite: intersect; }
.wh-art img { display: block; width: 100%; height: auto; }
.wh::after { content: ''; position: absolute; z-index: -1; inset: 10% -10% auto 40%; height: 70%; background: radial-gradient(closest-side, rgba(200,170,110,0.16), transparent); filter: blur(20px); pointer-events: none; }
.wh-copy { position: relative; min-width: 0; }
.wh-meta { margin: 36px 0 12px; font-size: 13px !important; color: var(--text-dim) !important; }
.wh-meta strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wh h1 { max-width: 620px; margin-bottom: 14px; font-size: clamp(38px, 5.6vw, 68px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; text-wrap: balance;
  background: linear-gradient(135deg, #9a7b4f 0%, #c8aa6e 28%, #f4e4b0 52%, #c8aa6e 74%, #9a7b4f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.subtitle { max-width: 540px; font-size: 17px !important; }
.wh-defend { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px !important; color: var(--text-dim) !important; }
.wh-solo { grid-template-columns: minmax(0, 1fr); min-height: 520px; }
.wh-solo .wh-copy { max-width: 640px; }

/* Countdown */
.cd { margin: 26px 0 18px; }
.cd-label { margin-bottom: 10px; font-size: 13px !important; font-weight: 700; letter-spacing: .02em; color: var(--gold) !important; }
.cd.is-live .cd-label { color: #ff6b6b !important; }
.cd-units { display: flex; gap: 10px; }
.cd-u { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 80px; padding: 12px 8px 9px; background: linear-gradient(180deg, rgba(40,36,48,0.88), rgba(22,19,27,0.88)); border: 1px solid var(--gold-border); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 40px -24px rgba(0,0,0,0.9); overflow: hidden; }
.cd-u::after { content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: rgba(0,0,0,0.35); }
.cd-u b { display: block; font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cd-u b.tick { animation: cd-tick .45s cubic-bezier(.16,1,.3,1); }
@keyframes cd-tick { from { transform: translateY(-30%); opacity: .2; } }
.cd-u small { margin-top: 5px; font-size: 11px; font-weight: 600; text-transform: lowercase; color: var(--text-dim); }
.cd-u:last-child b { color: var(--gold-bright); }
.cd-when { margin-top: 10px; font-size: 14px !important; color: var(--text-muted) !important; }
html:not(.wjs) .cd-units { display: none; }

/* Time zone picker */
.tzp { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tzp-lead { font-size: 14px; color: var(--text-dim); }
.tzp-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-primary); background: rgba(30,27,36,0.85); border: 1px solid var(--gold-border); border-radius: 10px; cursor: pointer; transition: border-color .2s, background .2s; }
.tzp-btn:hover, .tzp-btn[aria-expanded="true"] { border-color: var(--gold-border-hover); background: rgba(40,36,48,0.9); }
.tzp-btn svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tzp-btn svg:last-child { width: 15px; transition: transform .2s; }
.tzp-btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.tzp-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: min(360px, calc(100vw - 32px)); padding: 8px; background: #19161e; border: 1px solid var(--gold-border-hover); border-radius: 14px; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.9); animation: pop-in .18s cubic-bezier(.16,1,.3,1); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.tzp-q { width: 100%; min-height: 42px; padding: 9px 12px; font: inherit; font-size: 16px; color: var(--text-primary); background: rgba(255,255,255,0.04); border: 1px solid var(--gold-border); border-radius: 10px; outline: none; }
.tzp-q:focus, .tzp-q:focus-visible { border-color: var(--gold); outline: none; }
.tzp-q::placeholder { color: var(--text-dim); }
.tzp-list { max-height: 300px; margin-top: 6px; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.tzp-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; font-size: 14px; color: var(--text-muted); border-radius: 8px; cursor: pointer; }
.tzp-opt svg { width: 15px; height: 15px; fill: none; stroke: var(--gold-bright); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.tzp-opt[aria-selected="true"] { color: var(--text-primary); }
.tzp-opt[aria-selected="true"] svg { visibility: visible; }
.tzp-opt.is-active { background: rgba(200,170,110,0.12); color: var(--text-primary); }
.tzp-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tzp-opt small { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tzp-opt.is-active small, .tzp-opt[aria-selected="true"] small { color: var(--gold); }
.tzp-sep { margin: 6px 10px; border-top: 1px solid var(--gold-border); }
.tzp-none { padding: 14px 10px; font-size: 14px !important; color: var(--text-dim) !important; }
html:not(.wjs) .tzp { display: none; }
.wm-utc-note { margin-top: 10px; font-size: 13px !important; color: var(--text-dim) !important; }
html.wjs .wm-utc-note { display: none; }

/* The Hive: every team; the hex opens its page, the star follows it */
.hive-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; --w: 86px; }
.hive-wrap::before { content: ''; position: absolute; z-index: -1; inset: -12% -8%; background: radial-gradient(closest-side, rgba(18,16,22,0.82), rgba(18,16,22,0.5) 60%, transparent); pointer-events: none; }
.hive { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5)); }
.hive-row { display: flex; gap: 6px; }
.hive-row + .hive-row { margin-top: calc(var(--w) * -0.2); }
.hv { position: relative; width: var(--w); aspect-ratio: 88 / 100; color: var(--c); transition: transform .35s cubic-bezier(.16,1,.3,1), filter .35s; animation: hv-in .7s cubic-bezier(.16,1,.3,1) both; }
.hv-link { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; color: inherit; text-decoration: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hv-link > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(90deg) scale(1.12); }
.hv-link > svg path { fill: color-mix(in srgb, var(--c) 18%, #141118); stroke: color-mix(in srgb, var(--c) 70%, transparent); stroke-width: 2.5; stroke-linejoin: round; transition: fill .3s, stroke .3s, stroke-width .3s; }
.hv-link img { position: relative; width: 50%; height: calc(var(--w) * 0.4); object-fit: contain; }
.hv-link b { position: relative; font-size: calc(var(--w) * 0.13); font-weight: 800; letter-spacing: .03em; line-height: 1; }
.hv-tbd .hv-link b { font-size: calc(var(--w) * 0.22); color: var(--text-dim); }
.hv:hover { transform: translateY(-5px) scale(1.07); z-index: 2; filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--c) 45%, transparent)); }
.hv:hover .hv-link > svg path { fill: color-mix(in srgb, var(--c) 30%, #141118); stroke: var(--c); }
.hv-link:active { transform: scale(.97); }
.hv:has(.hv-star[aria-pressed="true"]) .hv-link > svg path { fill: color-mix(in srgb, var(--c) 32%, #141118); stroke: var(--gold-bright); stroke-width: 4; }
.hv:has(.hv-star[aria-pressed="true"]) { filter: drop-shadow(0 0 14px rgba(232,213,163,0.45)); }
.hv-star { position: absolute; z-index: 3; top: 0; right: -2px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--gold-bright); background: rgba(20,17,24,0.94); border: 2px solid rgba(232,213,163,0.7); border-radius: 50%; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.6); opacity: 0; transform: scale(.6); transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s, background .2s, color .2s; }
.hv-star svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.hv:hover .hv-star, .hv-star:focus-visible { opacity: 1; transform: scale(1); }
.hv-star:hover { background: rgba(40,34,44,0.98); transform: scale(1.12) !important; }
.hv-star[aria-pressed="true"] { opacity: 1; transform: scale(1); color: #121016; background: linear-gradient(135deg, #f8ebc0, var(--gold)); border-color: #141118; box-shadow: 0 4px 14px rgba(0,0,0,0.6), 0 0 16px rgba(232,213,163,0.55); }
.hv-star[aria-pressed="true"] svg { fill: currentColor; stroke: none; }
@media (hover: none) { .hv-star { opacity: .9; transform: scale(.85); } }
.hv-tbd { cursor: default; --c: #6b6575; }
.hv-tbd .hv-link > svg path { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.22); stroke-dasharray: 6 6; }
.hv-tbd:hover { transform: none; filter: none; }
.hive-row:nth-child(1) .hv { animation-delay: .05s; }
.hive-row:nth-child(2) .hv { animation-delay: .15s; }
.hive-row:nth-child(3) .hv { animation-delay: .25s; }
@keyframes hv-in { from { opacity: 0; transform: translateY(14px) scale(.9); } }
.hive-hint { display: flex; align-items: flex-start; gap: 8px; max-width: 440px; font-size: 13.5px !important; line-height: 1.5 !important; color: var(--text-muted) !important; }
.hive-hint svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: var(--gold); }
.wd .hv-link:focus-visible { outline: none; }
.wd .hv-link:focus-visible > svg path { stroke: var(--gold-bright); stroke-width: 5; }

/* ── Event rail ── */
.rail { position: relative; margin-top: 12px; padding: 26px 28px 28px; background: linear-gradient(180deg, rgba(30,27,36,0.7), rgba(22,19,27,0.5)); border: 1px solid var(--gold-border); border-radius: 18px; }
.rail-stops { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style: none; }
.rail-stop { position: relative; display: flex; flex-direction: column; gap: 2px; padding-top: 30px; }
.rail-dot { position: absolute; top: 0; width: 14px; height: 14px; margin-top: 2px; background: #1b1820; border: 2px solid rgba(200,170,110,0.4); border-radius: 50%; transform: translateY(-1px); }
.rail-stop strong { font-size: 15px; color: var(--text-primary); }
.rail-date { font-size: 13px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.rail-city { font-size: 12.5px; color: var(--text-dim); }
.rail-stop.is-past .rail-dot { background: var(--gold); border-color: var(--gold); }
.rail-stop.is-past strong { color: var(--text-muted); }
.rail-stop.is-now .rail-dot { background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: 0 0 0 6px rgba(232,213,163,0.15), 0 0 20px rgba(232,213,163,0.6); }
.rail-stop.is-now strong { color: var(--gold-bright); }
.rail-track { position: absolute; top: 34px; left: 34px; right: 28px; height: 2px; background: rgba(200,170,110,0.15); border-radius: 2px; }
.rail-stop.is-next .rail-dot { border-color: var(--gold-bright); box-shadow: 0 0 0 0 rgba(232,213,163,0.5); animation: rail-pulse 2s ease-out infinite; }
.rail-stop.is-next strong { color: var(--gold-bright); }
@keyframes rail-pulse { 70% { box-shadow: 0 0 0 10px rgba(232,213,163,0); } 100% { box-shadow: 0 0 0 0 rgba(232,213,163,0); } }
.rail-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright)); border-radius: 2px; box-shadow: 0 0 12px rgba(232,213,163,0.5); transition: width 1.2s cubic-bezier(.16,1,.3,1); }
.rail-now { position: absolute; z-index: 2; top: -6px; width: 14px; height: 14px; margin-left: -7px; background: var(--gold-bright); border-radius: 50%; box-shadow: 0 0 0 5px rgba(232,213,163,0.18), 0 0 22px rgba(232,213,163,0.7); }
.rail-now em { position: absolute; bottom: 20px; left: 50%; padding: 2px 8px; font-size: 11px; font-style: normal; font-weight: 800; color: #121016; background: var(--gold-bright); border-radius: 999px; transform: translateX(-50%); white-space: nowrap; }

/* ── Match tile ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; list-style: none; }
.mt { position: relative; padding: 14px 16px 16px; overflow: hidden; background:
    linear-gradient(90deg, color-mix(in srgb, var(--ca) 20%, transparent) 0%, transparent 42%, transparent 58%, color-mix(in srgb, var(--cb) 20%, transparent) 100%),
    linear-gradient(180deg, rgba(34,30,40,0.92), rgba(22,19,27,0.92));
  border: 1px solid var(--gold-border); border-radius: 16px; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s; }
.mt::before { content: ''; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.06), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.mt:hover { transform: translateY(-3px); border-color: var(--gold-border-hover); box-shadow: 0 20px 40px -24px rgba(0,0,0,0.9); }
.mt:hover::before { opacity: 1; }
.mt-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mt-top time { font-size: 17px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mt-meta { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.mt-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.mt-side { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-primary); text-decoration: none; }
.mt-b { flex-direction: row-reverse; text-align: right; }
a.mt-side:hover .hx { transform: translateY(-2px) scale(1.06); }
a.mt-side:hover .mt-name { color: var(--gold-bright); }
.mt-name { overflow: hidden; font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; transition: color .2s; }
.mt-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; }
.mt-vsl { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.mt-score { display: flex; align-items: baseline; gap: 4px; font-size: 26px; font-weight: 800; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mt-score b.w { color: var(--gold-bright); }
.mt-score i { font-style: normal; font-size: 18px; opacity: .6; }
.mt-reveal { display: none; align-items: center; gap: 5px; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--gold); background: rgba(200,170,110,0.08); border: 1px solid var(--gold-border); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.mt-reveal:hover { background: rgba(200,170,110,0.16); color: var(--gold-bright); }
.mt-reveal svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mt[data-state="completed"] .mt-side:not(.is-win) .mt-name { color: var(--text-dim); }
.mt.is-mine { border-color: rgba(232,213,163,0.5); box-shadow: inset 0 0 0 1px rgba(232,213,163,0.15); }
.mt[data-state="inProgress"] { border-color: rgba(255,107,107,0.55); box-shadow: 0 0 0 1px rgba(255,107,107,0.25), 0 18px 50px -20px rgba(255,80,80,0.35); }
.wm-live { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ff6b6b; background: rgba(255,80,80,0.1); border-radius: 999px; }
.wm-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: wm-pulse 1.6s ease-in-out infinite; }
@keyframes wm-pulse { 50% { opacity: .3; } }
.mt[hidden] { display: none; }

/* Spoiler-free (on by default): scores hidden until revealed per match */
html.no-spoilers .mt-score, html.no-spoilers [data-spoiler] { display: none; }
html.no-spoilers .mt-reveal { display: inline-flex; }
html.no-spoilers .mt.is-revealed .mt-score { display: flex; }
html.no-spoilers .mt.is-revealed .mt-reveal { display: none; }
html.no-spoilers .mt:not(.is-revealed)[data-state="completed"] .mt-side .mt-name { color: var(--text-primary); }
html.no-spoilers .cl.has-results .cl-cell:not([data-pool="0-0"]) .cl-teams { visibility: hidden; }
.cl-hidden { display: none; }
html.no-spoilers .cl.has-results .cl-hidden { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 14px !important; color: var(--text-muted) !important; background: rgba(18,16,22,0.55); border-radius: 18px; }
.cl-hidden svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.8; }

/* Switch */
.sw { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; user-select: none; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-track { position: relative; flex: none; width: 46px; height: 26px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; transition: background .25s, border-color .25s; }
.sw-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #d9d4cc; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.5); transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .25s; }
.sw input:checked + .sw-track { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-color: transparent; }
.sw input:checked + .sw-track .sw-knob { transform: translateX(20px); background: #121016; }
.sw input:focus-visible + .sw-track { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.sw-text { font-size: 14px; font-weight: 600; color: var(--text-primary); }
html:not(.wjs) .sw { display: none; }

/* Next-up spotlight */
.spot { margin-top: 40px; padding: 26px 28px 28px; background: radial-gradient(120% 120% at 50% 0%, rgba(200,170,110,0.08), transparent 60%), rgba(24,21,29,0.7); border: 1px solid var(--gold-border); border-radius: 22px; }
.spot-label { margin-bottom: 14px; font-size: 22px !important; font-weight: 800; color: var(--gold-bright) !important; }
.spot.is-live .spot-label { color: #ff6b6b !important; }
.spot-slot { list-style: none; }
.spot .mt { padding: 22px 26px 26px; border-radius: 18px; background:
    linear-gradient(90deg, color-mix(in srgb, var(--ca) 34%, transparent) 0%, transparent 46%, transparent 54%, color-mix(in srgb, var(--cb) 34%, transparent) 100%),
    linear-gradient(180deg, rgba(34,30,40,0.95), rgba(20,17,25,0.95)); }
.spot .mt:hover { transform: none; }
.spot .mt-top time { font-size: 22px; }
.spot .hx { width: 92px; }
.spot .hx b { font-size: 21px; }
.spot .mt-name { font-size: clamp(18px, 2.2vw, 26px); font-weight: 800; }
.spot .mt-vsl { font-size: 16px; }
.spot .mt-score { font-size: 44px; }
.spot-tbd { padding: 6px 0 2px; }
.spot-tbd .pi-field { margin: 6px 0 12px; }
.spot-tbd p { font-size: 14px !important; color: var(--text-dim) !important; }
.spot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.spot-actions .btn-secondary { padding: 11px 18px; font-size: 14px; }

/* Days */
.wm-days { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; margin: 0 -24px 14px; padding: 12px 24px; overflow-x: auto; scrollbar-width: none; background: linear-gradient(180deg, var(--bg-deep) 72%, transparent); }
.wm-days::-webkit-scrollbar { display: none; }
.wm-day-chip { display: flex; flex-direction: column; align-items: center; flex: none; min-width: 60px; padding: 8px 10px; font: inherit; color: var(--text-muted); background: rgba(30,28,36,0.7); border: 1px solid var(--gold-border); border-radius: 12px; cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .2s; }
.wm-day-chip small { font-size: 11px; text-transform: capitalize; }
.wm-day-chip strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.wm-day-chip:hover { border-color: var(--gold-border-hover); color: var(--text-primary); transform: translateY(-2px); }
.wm-day-chip.is-today { border-color: var(--gold); color: var(--gold-bright); }
.wm-day-chip[aria-current="true"] { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #121016; border-color: transparent; }
.wm-day-chip.is-past { opacity: .5; }
.wm-day-chip.has-mine::after { content: ''; width: 5px; height: 5px; margin-top: 3px; border-radius: 50%; background: currentColor; }
.wm-day { scroll-margin-top: 96px; }
.wm-day + .wm-day { margin-top: 34px; }
.wm-day h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px 2px; font-size: 16px; font-weight: 700; color: var(--text-primary); text-transform: capitalize; }

/* Session card for days whose matchups are not set yet */
.mt-sum { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 18px 20px; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 12px, transparent 12px 24px), rgba(26,23,31,0.7); border: 1px dashed rgba(200,170,110,0.25); border-radius: 16px; }
.mt-sum-n { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.mt-sum-when { font-size: 16px; font-weight: 700; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.mt-sum-note { margin-left: auto; font-size: 13px; color: var(--text-dim); }

/* ── Stages ── */
.st { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px 48px; align-items: start; margin-top: 56px; }
.st-copy h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 22px; font-weight: 800; color: var(--text-primary); }
.st-copy h3 span { font-size: 13px; font-weight: 600; color: var(--gold); }
.st-copy p { font-size: 15px !important; }
.pi-field { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.pi-team { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: var(--text-primary); text-decoration: none; }
a.pi-team:hover .hx { transform: translateY(-3px) scale(1.05); filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--c) 40%, transparent)); }
a.pi-team:hover { color: var(--gold-bright); }
.pi-team .hx-tbd + span { color: var(--text-dim); font-weight: 500; }
.spot .pi-team .hx { width: 52px; } .spot .pi-team .hx b { font-size: 12px; }

/* The Climb */
.cl-wrap { display: grid; gap: 18px; min-width: 0; }
.cl { position: relative; padding: 14px; background: rgba(22,19,27,0.6); border: 1px solid var(--gold-border); border-radius: 18px; }
.cl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cl-cell { position: relative; min-height: 104px; padding: 30px 10px 10px; background: rgba(34,30,40,0.55); border: 1px solid rgba(200,170,110,0.1); border-radius: 12px; transition: border-color .3s, background .3s; }
.cl-cell.cl-through { background: linear-gradient(180deg, rgba(200,170,110,0.18), rgba(200,170,110,0.06)); border-color: rgba(200,170,110,0.4); box-shadow: inset 0 1px 0 rgba(255,236,190,0.12); }
.cl-cell.cl-out { background: rgba(224,122,110,0.04); border: 1px dashed rgba(224,122,110,0.25); }
.cl-cell.cl-out .hx { filter: grayscale(.7); opacity: .55; }
.cl-void { background: none; border: none; }
.cl-rec { position: absolute; top: 8px; left: 11px; display: flex; gap: 6px; align-items: baseline; font-size: 13px; font-weight: 800; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cl-rec em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cl-through .cl-rec { color: var(--gold-bright); }
.cl-out .cl-rec em { color: #e07a6e; }
.cl-teams { display: flex; flex-wrap: wrap; gap: 5px; }
.cl-teams .hx { width: 42px; }
.cl-teams .hx b { font-size: 10.5px; }
.cl.has-focus .hx:not(.is-focus) { opacity: .25; }
.cl-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; font-size: 14px; color: var(--text-muted); }
.cl-facts li { display: flex; align-items: center; gap: 10px; }
.cl-ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; font-size: 11px; font-weight: 800; color: var(--gold-bright); background: rgba(200,170,110,0.1); border: 1px solid var(--gold-border); border-radius: 8px; }
.cl-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cl-ico-l { color: #e8998c; background: rgba(224,122,110,0.08); border-color: rgba(224,122,110,0.25); }
.hx-ghost { display: inline-block; width: 30px; aspect-ratio: 100 / 88; }
.hx-ghost svg { width: 100%; height: 100%; overflow: visible; }
.hx-ghost path { fill: none; stroke: rgba(200,170,110,0.18); stroke-width: 4; stroke-dasharray: 6 6; }
.cl-through .hx-ghost path { stroke: rgba(232,213,163,0.35); }
.cl-out .hx-ghost path { stroke: rgba(224,122,110,0.25); }
.cl-cell.cl-start { border-color: rgba(200,170,110,0.35); box-shadow: inset 0 0 40px -10px rgba(200,170,110,0.18); }
.cl-start .cl-rec { color: var(--text-primary); }
.cl-start .cl-rec em { color: var(--gold); }

/* Knockouts bracket */
.ko { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ko-col { display: flex; flex-direction: column; }
.ko h4 { margin: 0 0 10px 2px; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--gold); }
.ko .tiles { flex: 1; grid-template-columns: 1fr; gap: 10px; align-content: space-around; }
.ko .mt { padding: 12px 14px 14px; }
.ko .mt-vs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ko .mt-mid { display: none; }
.ko .mt-b { flex-direction: row; text-align: left; }
.ko .hx { width: 34px; } .ko .hx b { font-size: 9px; }
.ko .mt-name { font-size: 14px; }
.ko-final .mt { border-color: rgba(200,170,110,0.45); background: radial-gradient(120% 100% at 50% 0%, rgba(200,170,110,0.14), transparent 70%), linear-gradient(180deg, rgba(34,30,40,0.92), rgba(22,19,27,0.92)); }

/* ── Teams ── */
.tcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 12px; list-style: none; margin-top: 22px; }
.tc { position: relative; }
.tc-link { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 26px 14px 18px; text-align: center; text-decoration: none; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), rgba(26,23,31,0.8); border: 1px solid var(--gold-border); border-radius: 16px; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s; }
.tc-link .hx { width: 76px; margin-bottom: 6px; }
.tc-link:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--c) 45%, black); }
.tc-link:hover .hx { transform: scale(1.08); }
.tc-name { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.tc-meta { font-size: 12px; color: var(--text-dim); }
.tc-roster { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.tc-follow { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--text-dim); background: none; border: none; border-radius: 50%; cursor: pointer; transition: color .2s, background .2s, transform .2s; }
.tc-follow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.tc-follow:hover { color: var(--gold-bright); background: rgba(200,170,110,0.1); }
.tc-follow[aria-pressed="true"] { color: var(--gold-bright); }
.tc-follow[aria-pressed="true"] svg { fill: currentColor; }
.tc-follow:active { transform: scale(.88); }
.tc-tbd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px 14px 18px; text-align: center; border: 1px dashed var(--gold-border); border-radius: 16px; }
.tc-tbd .tc-name { color: var(--text-dim); }

/* ── Play: the bridge to the app ── */
.play { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 40px; align-items: center; margin-top: 120px; padding: 44px; background: radial-gradient(90% 120% at 0% 0%, rgba(200,170,110,0.12), transparent 60%), rgba(26,23,31,0.7); border: 1px solid var(--gold-border); border-radius: 24px; }
.play h2 { background: linear-gradient(135deg, #c8aa6e 0%, #f4e4b0 50%, #c8aa6e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.play-copy > p { margin-bottom: 18px; }
.tiers { display: grid; gap: 9px; margin: 0 0 24px; list-style: none; font-size: 14.5px; color: var(--text-muted); }
.tiers li { display: flex; align-items: center; gap: 10px; }
.chip { flex: none; min-width: 44px; padding: 2px 8px; font-size: 11px; font-weight: 800; text-align: center; color: var(--text-primary); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; }
.chip-pro { color: var(--gold-bright); background: rgba(200,170,110,0.1); border-color: rgba(200,170,110,0.3); }
.play-shot { margin: 0; justify-self: center; transform: perspective(1200px) rotateY(-10deg) rotate(2deg); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.play-shot:hover { transform: none; }
.play-shot img { display: block; width: min(320px, 100%); height: auto; border: 1px solid rgba(200,170,110,0.3); border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.95), 0 0 60px -20px rgba(200,170,110,0.35); }
.play-shot figcaption { max-width: 320px; margin-top: 12px; font-size: 12.5px; line-height: 1.5; text-align: center; color: var(--text-dim); }

/* Watch and play along: a band with the play mark, LoL Esports and Riot's Pick'em */
.watch { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px 34px; margin-top: 120px; padding: 30px 34px; overflow: hidden; background: linear-gradient(120deg, rgba(200,170,110,0.12), rgba(26,23,31,0.7) 45%); border: 1px solid var(--gold-border); border-radius: 22px; }
.watch-mark { width: 92px; height: 92px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 18px rgba(200,170,110,0.35)); }
.watch-mark path + path { fill: var(--gold-bright); stroke: none; opacity: .85; }
.watch h2 { margin-bottom: 6px; }
.watch-copy p { max-width: 620px; }
.watch-actions { display: flex; flex-direction: column; gap: 10px; }
.watch-actions a { justify-content: center; white-space: nowrap; }

/* Watch, FAQ */
.faq { display: grid; gap: 8px; max-width: 860px; margin-top: 18px; }
.faq details { border: 1px solid var(--gold-border); border-radius: 14px; background: rgba(30,28,36,0.45); transition: border-color .2s; }
.faq details[open] { border-color: var(--gold-border-hover); }
.faq summary { padding: 17px 20px; font-size: 16px; font-weight: 700; color: var(--text-primary); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--gold); font-weight: 700; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 20px 18px; font-size: 15px; }

/* ── Team page ── */
.wd-team::before { content: ''; position: absolute; z-index: -1; top: -80px; right: -10%; width: 70%; height: 700px; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent); pointer-events: none; }
.wh-team { grid-template-columns: minmax(0, 1fr) auto; min-height: 520px; }
.tm-badge { order: 1; padding-right: 4%; }
.tm-badge .hx { width: min(330px, 30vw); filter: drop-shadow(0 0 70px color-mix(in srgb, var(--c) 40%, transparent)); animation: badge-float 6s ease-in-out infinite; }
.tm-badge .hx b { font-size: clamp(40px, 6vw, 84px); }
.tm-badge .hx path { stroke-width: 2.2; }
@keyframes badge-float { 50% { transform: translateY(-10px); } }
.wh-actions { margin: 6px 0 0; }
.tm-follow[aria-pressed="true"] { color: #121016; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-color: transparent; }
.tm-follow[aria-pressed="true"] svg { fill: currentColor; }
.roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; list-style: none; margin-top: 16px; }
.roster li { display: flex; align-items: center; gap: 12px; padding: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, transparent), transparent), rgba(26,23,31,0.7); border: 1px solid var(--gold-border); border-radius: 14px; }
.roster img { flex: none; opacity: .9; }
.roster span { display: flex; flex-direction: column; min-width: 0; }
.roster strong { overflow: hidden; font-size: 16px; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; }
.roster small { font-size: 12px; color: var(--text-dim); }

/* Entrances */
@media (prefers-reduced-motion: no-preference) {
  html.wjs [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); }
  html.wjs [data-reveal].in { opacity: 1; transform: none; }
  .cl-teams .hx { animation: cl-in .5s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes cl-in { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@media (prefers-reduced-motion: reduce) {
  .hv, .hx, .mt, .tc-link, .play-shot, .rail-fill { transition: none; animation: none; }
  .tm-badge .hx, .wm-live::before, .cd-u b.tick { animation: none; }
}

@media (max-width: 1060px) {
  .wh { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hive-wrap { --w: 76px; }
  .st { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .play { grid-template-columns: minmax(0, 1fr); padding: 34px 28px; }
  .play-shot { transform: none; }
  .roster { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .watch { grid-template-columns: minmax(0, 1fr); }
  .watch-mark { display: none; }
  .watch-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .ov { padding: 0 16px; }
  .wm-sec { margin-top: 84px; }
  .wh { padding: 10px 0 18px; gap: 20px; }
  .wh-art { inset: -10px -16px auto -16px; width: calc(100% + 32px); height: 380px; opacity: .45;
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .wh-art img { height: 100%; object-fit: cover; object-position: 60% 20%; }
  .wh-meta { margin-top: 22px; }
  .subtitle { font-size: 16px !important; }
  .cd-units { gap: 6px; }
  .cd-u { flex: 1; min-width: 0; padding: 10px 4px 8px; border-radius: 12px; }
  .hive-wrap { --w: 45px; }
  .hive-row { gap: 3px; }
  .hv-link b { display: none; }
  .hv-tbd .hv-link b { display: block; }
  .hv-link img { width: 56%; height: calc(var(--w) * 0.5); }
  .hv-star { width: 22px; height: 22px; top: -4px; right: -6px; }
  .hv-star svg { width: 12px; height: 12px; }
  .rail { padding: 18px 16px 18px 18px; }
  .rail-stops { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rail-stop { padding: 0 0 0 30px; }
  .rail-dot { top: 3px; left: 0; }
  .rail-track { width: 2px; }
  .rail-fill { inset: 0 0 auto 0; width: 100%; height: var(--fill, 0%); transition: height 1.2s cubic-bezier(.16,1,.3,1); }
  .rail-now { display: none; }
  .spot { padding: 18px 14px 18px; border-radius: 18px; }
  .spot .mt { padding: 16px 14px 18px; }
  .spot .hx { width: 60px; } .spot .hx b { font-size: 14px; }
  .spot .mt-side { flex-direction: column; text-align: center; gap: 6px; }
  .spot .mt-name { font-size: 15px; white-space: normal; }
  .spot .mt-score { font-size: 32px; }
  .spot-actions .btn-secondary { flex: 1 1 100%; justify-content: center; }
  .wm-days { margin: 0 -16px 12px; padding: 10px 16px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .mt-name { font-size: 14px; }
  .mt-sum-note { margin-left: 0; flex-basis: 100%; }
  .cl { margin: 0 -16px; padding: 12px 16px; border-radius: 0; border-left: none; border-right: none; overflow-x: auto; scrollbar-width: none; }
  .cl::-webkit-scrollbar { display: none; }
  .cl-grid { min-width: 620px; }
  .ko { grid-template-columns: minmax(0, 1fr); }
  .tcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tc-link { padding: 22px 10px 14px; }
  .tc-link .hx { width: 60px; }
  .tc-roster { display: none; }
  .play { padding: 26px 18px; margin-top: 84px; }
  .play .btn-primary { width: 100%; justify-content: center; }
  .watch { padding: 24px 18px; margin-top: 84px; }
  .watch-actions a { flex: 1 1 100%; }
  .wh-team { grid-template-columns: minmax(0, 1fr); }
  .tm-badge { order: -1; display: flex; justify-content: center; padding: 0; margin-bottom: -10px; }
  .tm-badge .hx { width: 150px; }
  .roster { grid-template-columns: 1fr 1fr; }
}

/* ── Views: one sticky switcher for Schedule, The Climb, Bracket and Teams ── */
.views { margin-top: 64px; scroll-margin-top: 0; }
.vt { position: sticky; top: 0; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: 0 -24px; padding: 10px 24px; background: linear-gradient(180deg, var(--bg-deep) 78%, rgba(18,16,22,0)); }
.vt-tabs { position: relative; display: flex; gap: 2px; padding: 5px; overflow-x: auto; scrollbar-width: none; background: rgba(30,27,36,0.85); border: 1px solid var(--gold-border); border-radius: 14px; box-shadow: 0 14px 30px -20px rgba(0,0,0,0.9); }
.vt-tabs::-webkit-scrollbar { display: none; }
.vt-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 42px; padding: 9px 16px; font-size: 14.5px; font-weight: 700; color: var(--text-muted); text-decoration: none; border-radius: 10px; transition: color .25s; }
.vt-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vt-tab:hover { color: var(--text-primary); }
.vt-tab[aria-selected="true"] { color: #121016; }
.vt-ink { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-radius: 10px; box-shadow: 0 6px 18px -6px rgba(200,170,110,0.6); transition: transform .4s cubic-bezier(.16,1,.3,1), width .4s cubic-bezier(.16,1,.3,1); }
html:not(.wjs) .vt-ink { display: none; }
html:not(.wjs) .vt-tab[aria-selected="true"] { color: var(--text-muted); }
.vp { padding-top: 26px; scroll-margin-top: 72px; }
.views:not(.is-tabbed) .vp + .vp { margin-top: 72px; }
.views.is-tabbed .vp:not([hidden]) { animation: vp-in .45s cubic-bezier(.16,1,.3,1); }
@keyframes vp-in { from { opacity: 0; transform: translateY(10px); } }
.vp > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.vp-sub { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--text-dim); -webkit-text-fill-color: currentColor; }
.vp .sec-intro { margin-bottom: 22px; }
.views .wm-days { top: 66px; }
.pi { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--gold-border); }
.pi h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; font-size: 22px; font-weight: 800; color: var(--text-primary); }
.pi .pi-field { margin: 4px 0 22px; }
@media (prefers-reduced-motion: reduce) { .vt-ink { transition: none; } .views.is-tabbed .vp:not([hidden]) { animation: none; } }
@media (max-width: 640px) {
  .views { margin-top: 48px; }
  .vt { margin: 0 -16px; padding: 8px 16px; }
  .vt-tabs { width: 100%; }
  .vt-tab { flex: 1 0 auto; justify-content: center; padding: 8px 10px; font-size: 13.5px; }
  .vt-tab svg { display: none; }
  .vt .sw { margin-left: auto; }
  .views .wm-days { top: 112px; }
}

/* ── Day cards: one card per broadcast night ── */
html.wjs .wm-sched { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
html.wjs .wm-day + .wm-day { margin-top: 0; }
html.wjs .wm-day { --sc: var(--gold); padding: 16px 16px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 7%, transparent), transparent 120px), rgba(24,21,29,0.75); border: 1px solid var(--gold-border); border-radius: 18px; transition: border-color .3s; }
html.wjs .wm-day:hover { border-color: var(--gold-border-hover); }
html.wjs .wm-day.is-wide { grid-column: 1 / -1; }
html.wjs .wm-day.is-today { border-color: rgba(232,213,163,0.6); box-shadow: 0 0 0 1px rgba(232,213,163,0.15), 0 24px 50px -30px rgba(200,170,110,0.5); }
html.wjs .wm-day.is-past { opacity: .62; }
html.wjs .wm-day .tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
html.wjs .wm-day.is-wide .tiles { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.dc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 14px; }
.dc-num { min-width: 44px; font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.is-today .dc-num { background: linear-gradient(135deg, #f4e4b0, #c8aa6e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dc-date { display: flex; flex-direction: column; min-width: 0; }
.dc-date strong { font-size: 15px; color: var(--text-primary); }
.is-today .dc-date strong { color: var(--gold-bright); }
.dc-date small { font-size: 12.5px; color: var(--text-dim); }
.dc-stage { padding: 4px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent); border-radius: 999px; white-space: nowrap; }
.wm-day:has(.dc-stage[data-stage="playin"]) { --sc: #6fb8e8; }
.wm-day:has(.dc-stage[data-stage="swiss"]) { --sc: #c8aa6e; }
.wm-day:has(.dc-stage[data-stage="qf"]), .wm-day:has(.dc-stage[data-stage="sf"]) { --sc: #e0927e; }
.wm-day:has(.dc-stage[data-stage="final"]) { --sc: #ffd98a; }
html.wjs .wm-day .mt-sum { display: grid; gap: 10px; padding: 12px 0 0; background: none; border: none; border-top: 1px solid color-mix(in srgb, var(--sc) 18%, transparent); border-radius: 0; }
.mt-sum-when { font-size: 20px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mt-sum-fmt { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-sum-fmt span { padding: 3px 9px; font-size: 12px; font-weight: 700; color: var(--text-muted); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; }
html.wjs .wm-day .mt-sum-note { margin: 0; font-size: 12.5px; color: var(--text-dim); }
@media (max-width: 640px) {
  html.wjs .wm-sched { grid-template-columns: minmax(0, 1fr); }
  html.wjs .wm-day.is-wide .tiles { grid-template-columns: minmax(0, 1fr); }
}
html.wjs .wm-day.is-picked { animation: day-pick 1.8s cubic-bezier(.16,1,.3,1); }
@keyframes day-pick { 0%, 35% { border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(232,213,163,0.35), 0 24px 60px -24px rgba(200,170,110,0.65); } }
@media (prefers-reduced-motion: reduce) { html.wjs .wm-day.is-picked { animation: none; border-color: var(--gold-bright); } }

/* Decorative glows bleed past the edges; the page never scrolls sideways (clip keeps sticky bars working). */
.wd { overflow-x: clip; }
/* Time zone list: breathing room before the scrollbar */
.tzp-pop { width: min(380px, calc(100vw - 32px)); padding: 8px 6px 8px 8px; }
.tzp-list { padding-right: 8px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(200,170,110,0.3) transparent; }
.tzp-list::-webkit-scrollbar { width: 6px; }
.tzp-list::-webkit-scrollbar-thumb { background: rgba(200,170,110,0.3); border-radius: 3px; }
.tzp-opt { padding: 9px 12px 9px 10px; }

/* Worlds offer: two plans, monthly and yearly rows, normal price struck through */
.offer { margin-top: 26px; padding: 18px; background: radial-gradient(120% 100% at 100% 0%, rgba(200,170,110,0.12), transparent 60%), rgba(18,16,22,0.7); border: 1px solid rgba(200,170,110,0.32); border-radius: 16px; }
.offer-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 14px; }
.offer-badge { display: grid; place-items: center; width: 52px; height: 52px; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: #121016; background: linear-gradient(135deg, #f8ebc0, var(--gold)); border-radius: 14px; box-shadow: 0 8px 22px -10px rgba(200,170,110,0.7); transform: rotate(-4deg); }
.offer-head p { display: flex; flex-direction: column; margin: 0; line-height: 1.35 !important; }
.offer-head strong { font-size: 17px; color: var(--text-primary); }
.offer-head small { font-size: 13px; color: var(--text-dim); }
.offer-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 4px; font-size: 14px; font-weight: 700; color: var(--gold); text-decoration: none; white-space: nowrap; transition: color .2s, gap .2s; }
.offer-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.offer-link:hover { color: var(--gold-bright); gap: 9px; }
.offer-link-foot { display: none; }
.offer-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.op { padding: 12px 14px 10px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; }
.op-plus { background: linear-gradient(180deg, rgba(200,170,110,0.08), rgba(200,170,110,0.02)); border-color: rgba(200,170,110,0.25); }
.op-name { display: inline-block; margin-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--text-primary); }
.op-plus .op-name { color: var(--gold-bright); }
.op-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "int was now" "note note note"; align-items: baseline; gap: 0 8px; margin: 0; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.op-int { grid-area: int; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.op-row s { grid-area: was; font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.op-row strong { grid-area: now; font-size: 20px; font-weight: 800; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.op-row small { grid-area: note; justify-self: end; font-size: 12px; color: var(--text-dim); }
@media (max-width: 640px) {
  .offer { padding: 14px; }
  .offer-head { grid-template-columns: auto minmax(0, 1fr); }
  .offer-head .offer-link { display: none; }
  .offer-link-foot { display: flex; justify-content: center; margin-top: 10px; }
  .offer-plans { grid-template-columns: minmax(0, 1fr); }
}

/* League terms: dotted underline says "this is explained"; one floating tooltip explains it */
.term { text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; cursor: help; border-radius: 4px; }
.term:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.mt-sum-fmt .term, .dc-stage.term { text-decoration: none; }
.wm-tip { position: fixed; z-index: 100; max-width: min(280px, calc(100vw - 16px)); padding: 9px 12px; font-size: 13px; line-height: 1.5; color: var(--text-primary); background: #1d1a22; border: 1px solid var(--gold-border-hover); border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.9); pointer-events: none; animation: tip-in .15s ease-out; }
.wm-tip::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: #1d1a22; border-right: 1px solid var(--gold-border-hover); border-bottom: 1px solid var(--gold-border-hover); transform: rotate(45deg); }
.wm-tip.is-below::after { top: -6px; bottom: auto; transform: rotate(225deg); }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .wm-tip { animation: none; } }
/* Follow stars: small to look at, thumb-sized to tap */
.hv-star::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; }
/* Narrow tiles (day cards): the reveal button keeps its icon and moves its label into the tooltip */
.mt { container-type: inline-size; }
@container (max-width: 460px) {
  .mt-reveal { padding: 6px 8px; }
  .mt-reveal span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── Live mode ── */
.cd.is-live-card .cd-label, .cd.is-live-card .cd-units, .cd.is-live-card .cd-when { display: none; }
.lv { max-width: 560px; padding: 18px 20px 20px; background: radial-gradient(120% 120% at 50% 0%, rgba(255,80,80,0.14), transparent 60%), rgba(22,19,27,0.88); border: 1px solid rgba(255,107,107,0.45); border-radius: 18px; box-shadow: 0 0 0 1px rgba(255,107,107,0.15), 0 24px 60px -24px rgba(255,80,80,0.45); animation: pop-in .3s cubic-bezier(.16,1,.3,1); }
.lv-label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px !important; font-weight: 700; color: var(--text-muted) !important; }
.lv-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.lv-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lv-team b { overflow: hidden; font-size: 18px; font-weight: 800; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; }
.lv-team-b { flex-direction: row-reverse; text-align: right; }
.lv .hx { width: 64px; }
.lv-mid { display: flex; justify-content: center; }
.lv-score { display: flex; align-items: baseline; gap: 6px; font-size: 40px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lv-score i { font-style: normal; font-size: 26px; opacity: .5; }
.lv-watch { width: 100%; justify-content: center; margin-top: 18px; }
.lv-streams { margin-top: 10px; font-size: 13px !important; text-align: center; color: var(--text-dim) !important; }
.lv-streams a { color: var(--gold); font-weight: 700; text-decoration: none; }
.lv-streams a:hover { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }

/* Live strip under the spotlight tile */
.ls { position: relative; margin-top: 12px; padding: 16px 18px; background: rgba(18,16,22,0.6); border: 1px solid var(--gold-border); border-radius: 14px; }
.ls-gold { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ls-bar { position: relative; height: 10px; overflow: hidden; background: color-mix(in srgb, #e07a6e 55%, #1b1820); border-radius: 999px; }
.ls-bar span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3d8bff, #6fb8e8); border-radius: 999px; transition: width .8s cubic-bezier(.16,1,.3,1); }
.ls-lead { margin: 8px 0 12px; font-size: 15px !important; font-weight: 800; text-align: center; color: var(--gold-bright) !important; font-variant-numeric: tabular-nums; }
.ls-stats { display: grid; gap: 6px; margin: 0; }
.ls-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 18px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.ls-row dt { font-size: 13px; color: var(--text-dim); }
.ls-row dd { display: flex; gap: 4px; justify-content: flex-end; min-width: 56px; margin: 0; font-size: 15px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ls-drake { width: 14px; height: 14px; border-radius: 4px; transform: rotate(45deg) scale(.8); background: #888; cursor: help; }
.ls-infernal { background: #e8603c; } .ls-ocean { background: #3fa9d8; } .ls-mountain { background: #a7835a; } .ls-cloud { background: #c9d6df; }
.ls-hextech { background: #3ad1d1; } .ls-chemtech { background: #7fd14b; } .ls-elder { background: #b9a3ff; }
.ls-none { color: var(--text-dim); }
.ls-note { margin-top: 10px; font-size: 12px !important; color: var(--text-dim) !important; }
.ls-reveal { display: none; }
/* Spoiler-free: the live score and the live strip stay hidden until revealed */
html.no-spoilers .lv:not(.is-revealed) .lv-score { display: none; }
html.no-spoilers .lv.is-revealed .lv-score { display: flex; }
html.no-spoilers .lv:not(.is-revealed) .lv-reveal { display: inline-flex; }
.lv.is-revealed .lv-reveal, html:not(.no-spoilers) .lv-reveal { display: none; }
html.no-spoilers .ls:not(.is-revealed) > :not(.ls-reveal) { visibility: hidden; }
html.no-spoilers .ls:not(.is-revealed) .ls-reveal { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; display: inline-flex; visibility: visible; }
@media (max-width: 640px) {
  .lv { padding: 14px; }
  .lv .hx { width: 48px; }
  .lv-team { flex-direction: column; gap: 6px; text-align: center; }
  .lv-team-b { flex-direction: column; text-align: center; }
  .lv-team b { font-size: 15px; white-space: normal; }
  .lv-score { font-size: 30px; }
}
html.no-spoilers .ls.is-revealed .ls-reveal, html:not(.no-spoilers) .ls-reveal { display: none !important; }