/* RIFT//WATCH — the broadcast look built from the ntrdni.at language: Geist
   900 uppercase heads, Geist Mono for every number, square edges, 24-degree
   diagonals. The colors are the event's: app.js sets the paper, ink and
   accents from events.json (Riot's palette for that event) and switches
   data-mode to "light" for events Riot dressed in light. Surfaces are mixed
   from the paper, lines and quiet text from the ink, so every theme carries
   through. --mark is the fill behind selected or tagged things (the accent,
   or a highlighter color where the identity has one). */

:root{
  --paper:#010226; --ink:#eceae2;
  --acc:#6f85f0; --acc-hi:#f7d7f8; --acc-lo:#3a55e7; --acc2:#f7d7f8; --glint:#dcdcdc;
  --mark:var(--acc); --on-mark:var(--paper);
  --lift:#8fa0c0; --lift-1:6%; --lift-2:10%; --lift-3:14%;
  --surface:color-mix(in srgb, var(--paper), var(--lift) var(--lift-1));
  --surface-2:color-mix(in srgb, var(--paper), var(--lift) var(--lift-2));
  --surface-3:color-mix(in srgb, var(--paper), var(--lift) var(--lift-3));
  --glass:color-mix(in srgb, var(--surface) 78%, transparent);
  --muted:color-mix(in srgb, var(--ink) 62%, var(--paper)); --faint:color-mix(in srgb, var(--ink) 38%, var(--paper));
  --rule:color-mix(in srgb, var(--acc) 18%, transparent);
  --rule-2:color-mix(in srgb, var(--ink) 8%, transparent); --rule-3:color-mix(in srgb, var(--ink) 14%, transparent);
  --blue:#4aa3ff; --red:#ff5a66; --live:#ff3348; --good:#64eab0;
  --blue-t:#9cc9ff; --red-t:#ffb0b6; --live-t:#ff8a95;
  --disp:"Geist","Arial Black",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
  --ease:cubic-bezier(.2,.75,.25,1);
  --max:1380px;
}
/* light identities (MSI 2026, First Stand 2026): cards lighter than the
   paper, and the state colors dark enough to read on it */
:root[data-mode="light"]{
  --lift:#ffffff; --lift-1:58%; --lift-2:78%; --lift-3:40%;
  --muted:color-mix(in srgb, var(--ink) 68%, var(--paper)); --faint:color-mix(in srgb, var(--ink) 46%, var(--paper));
  --rule-2:color-mix(in srgb, var(--ink) 12%, transparent); --rule-3:color-mix(in srgb, var(--ink) 20%, transparent);
  --blue:#1f6fd6; --red:#d3283a; --good:#108a5a;
  --blue-t:#1858b0; --red-t:#b81f30; --live-t:#d01d34;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
/* the gutter stays reserved: a short view without a scrollbar must not shift the page sideways */
html{ background:var(--paper); scrollbar-color:var(--acc-lo) var(--paper); scrollbar-gutter:stable; }
body{ margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:"Geist",Arial,sans-serif; font-size:15px; -webkit-font-smoothing:antialiased; overflow-x:clip; }
body.noscroll{ overflow:hidden; }
::selection{ background:var(--mark); color:var(--on-mark); }
a{ color:var(--acc-hi); }
button{ font:inherit; color:inherit; }
img{ display:block; }

/* ------------------------------------------------------------ background */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg-grid{
  position:absolute; inset:-3%;
  background-image:
    radial-gradient(circle at 50% 30%, transparent 0 30%, var(--paper) 78%),
    linear-gradient(color-mix(in srgb, var(--ink) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 4.5%, transparent) 1px, transparent 1px);
  background-size:auto, 3.25rem 3.25rem, 3.25rem 3.25rem;
  background-position:center;
}
.bg-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(60rem 34rem at 72% -8%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 70%),
    radial-gradient(40rem 30rem at 8% 108%, color-mix(in srgb, var(--acc2) 10%, transparent), transparent 70%);
}

/* ---------------------------------------------------------------- header */
.top{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 78%, transparent); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--rule); }
.top-in{ max-width:var(--max); margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:22px; }
.brand{ display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; flex:none; }
.brand .mark{ width:36px; height:36px; display:block; }
.brand .wm svg{ display:block; height:17px; width:auto; }
.brand .wm .dd{ fill:var(--acc); }
/* the event picker: every event, newest year first, each with its color */
.picker{ position:relative; flex:none; }
.pk-btn{ display:inline-flex; align-items:center; gap:10px; height:34px; padding:0 12px; border:1px solid var(--rule); background:color-mix(in srgb, var(--surface) 70%, transparent); cursor:pointer; font-family:var(--disp); font-weight:900; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--acc-hi); transition:border-color .2s; }
.pk-btn:hover,.pk-btn[aria-expanded="true"]{ border-color:var(--acc); }
.pk-btn svg{ width:11px; height:8px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .2s; }
.pk-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.pk-panel{ position:absolute; left:0; top:calc(100% + 8px); z-index:40; width:300px; max-height:70vh; overflow-y:auto; padding:8px; background:var(--surface); border:1px solid var(--rule); box-shadow:0 24px 60px rgba(0,0,0,.55); animation:fade .15s ease both; }
.pk-y{ padding:10px 8px 6px; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em; color:var(--faint); }
.pk-i{ display:grid; grid-template-columns:14px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 8px; color:var(--ink); text-decoration:none; border:1px solid transparent; }
.pk-i:hover{ border-color:var(--rule-3); background:var(--surface-2); }
.pk-i.on{ border-color:var(--rule); background:var(--surface-2); }
.pk-sw{ width:10px; height:18px; background:var(--sw,var(--acc)); transform:skewX(-24deg); }
.pk-n{ font-family:var(--disp); font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:.02em; }
.pk-st{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.pk-ch{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.pk-ch .logo{ width:18px; height:18px; }
.tabs{ display:flex; gap:4px; margin:0 auto; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tabs a{ position:relative; padding:9px 12px; font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .3s var(--ease); }
.tabs a::after{ content:""; position:absolute; left:12px; right:12px; bottom:2px; height:3px; background:var(--acc); transform:skewX(-24deg) scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.tabs a:hover{ color:var(--ink); }
.tabs a.on{ color:var(--acc-hi); }
.tabs a.on::after{ transform:skewX(-24deg) scaleX(1); }
.clock{ display:flex; align-items:center; gap:8px; flex:none; font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.04em; }
.clock-z{ padding:3px 7px; border:1px solid var(--rule); color:var(--acc); font-size:10.5px; letter-spacing:.12em; }
.clock-t{ font-variant-numeric:tabular-nums; }
.conn{ width:7px; height:7px; background:var(--faint); }
.conn.on{ background:var(--good); box-shadow:0 0 8px var(--good); }
.conn.off{ background:var(--live); animation:blink 1s steps(2,start) infinite; }
@keyframes blink{ to{ visibility:hidden; } }

.livebar{ display:flex; align-items:center; gap:14px; justify-content:center; padding:7px 22px; background:linear-gradient(90deg, rgba(255,51,72,.22), rgba(255,51,72,.06) 40%, rgba(255,51,72,.06) 60%, rgba(255,51,72,.22)); border-top:1px solid rgba(255,51,72,.35); color:var(--ink); text-decoration:none; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.livebar .lb-m{ display:inline-flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
.livebar .logo{ width:20px; height:20px; }
.livebar .lb-g,.livebar .lb-c{ color:var(--muted); }

/* ---------------------------------------------------------------- shared */
main{ position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:0 22px 40px; }
/* switching views only fades: nothing moves */
.view{ animation:fade .22s ease both; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.slant{ display:inline-block; width:9px; height:15px; background:var(--acc); transform:skewX(-24deg); margin-right:12px; vertical-align:-1px; }
.sh{ font-family:var(--disp); font-weight:900; font-size:15px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px; display:flex; align-items:center; }
h3.sh{ margin-top:34px; }
.vh{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:34px 0 22px; border-bottom:1px solid var(--rule-2); margin-bottom:24px; }
.vt{ margin:0; font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; font-size:clamp(34px,5vw,58px); line-height:.9; background:linear-gradient(180deg, var(--glint) 0%, var(--acc) 55%, var(--acc-lo) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vmeta{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--rule); background:color-mix(in srgb, var(--surface) 60%, transparent); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.chip.alive{ color:var(--good); border-color:color-mix(in srgb, var(--good) 35%, transparent); }
.chip.out{ color:var(--red); border-color:color-mix(in srgb, var(--red) 35%, transparent); }
.chip.crown{ color:var(--acc-hi); border-color:var(--acc); }
.empty{ padding:26px 14px; text-align:center; border:1px dashed var(--rule-3); color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--acc); background:transparent; color:var(--acc-hi); font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; cursor:pointer; position:relative; overflow:hidden; isolation:isolate; transition:color .5s var(--ease); }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--mark); opacity:0; transform:scale(.1) rotate(12deg); transition:transform .5s var(--ease), opacity .5s var(--ease); }
.btn:hover{ color:var(--on-mark); }
.btn:hover::before{ opacity:1; transform:scale(1.6) rotate(0); }
.btn.mini{ padding:6px 10px; font-size:10.5px; }

.livetag{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 8px; background:var(--live); color:#fff; font-family:var(--mono); font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; transform:skewX(-24deg); }
.livetag::before{ content:""; width:6px; height:6px; background:#fff; animation:pulse 1.2s ease-in-out infinite; transform:skewX(24deg); }
@keyframes pulse{ 50%{ opacity:.25; } }

.logo{ width:28px; height:28px; object-fit:contain; flex:none; }
.logo.lg{ width:64px; height:64px; }
.logo.xl{ width:96px; height:96px; }
.logo.tbd{ display:inline-block; border:1px dashed var(--rule-3); transform:skewX(-24deg) scale(.72); }
/* on a light page the white parts of a logo would vanish: a hairline outline keeps them */
:root[data-mode="light"] img.logo{ filter:drop-shadow(0 0 1px rgba(0,0,0,.55)); }
.champ{ width:32px; height:32px; flex:none; object-fit:cover; border:1px solid var(--rule); background:var(--surface-2); }
.champ.none{ display:inline-block; }

/* corner notch: the accent-colored 24-degree wedge every card carries */
.bcard,.nextup,.game,.tcard,.pool,.panel,.livecard,.sheet{ position:relative; }
.bcard::after,.nextup::after,.game::after,.tcard::after,.livecard::after,.sheet::after{
  content:""; position:absolute; left:-1px; top:-1px; width:10px; height:22px; background:var(--tc,var(--acc));
  clip-path:polygon(0 0,100% 0,0 100%); pointer-events:none;
}

/* ------------------------------------------------------------------ hero */
.hero{ position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; gap:30px; min-height:430px; padding:44px 0 34px; overflow:clip; }
/* the sweep: a band of light crossing the hero, faded out toward every edge
   so it never shows where the hero's box ends */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(66deg, transparent 44%, color-mix(in srgb, var(--acc-hi) 8%, transparent) 50%, transparent 56%) no-repeat;
  background-size:300% 100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent), linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent), linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  mask-composite:intersect;
  animation:sweep 9s var(--ease) infinite;
}
@keyframes sweep{ 0%{ background-position:100% 0; } 60%,100%{ background-position:0 0; } }
.emblem{ position:absolute; right:-6%; top:50%; width:min(720px,80vw); height:auto; transform:translateY(-50%); opacity:.55; pointer-events:none; overflow:visible; }
.emblem *{ fill:none; stroke:var(--acc); stroke-width:1; vector-effect:non-scaling-stroke; }
.emblem g{ transform-origin:0 0; transform-box:view-box; }
.emblem .e1{ animation:spin 140s linear infinite; opacity:.5; }
.emblem .e2{ animation:spin 100s linear infinite reverse; opacity:.45; }
.emblem .e3{ animation:spin 180s linear infinite; opacity:.6; }
.emblem .e4{ animation:spin 70s linear infinite reverse; opacity:.8; }
.emblem .dash{ stroke-dasharray:3 9; }
.emblem .ticks{ stroke-dasharray:1 7; stroke-width:6; opacity:.6; }
.emblem .e4 polygon{ stroke:var(--acc2); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.hero-copy{ position:relative; z-index:1; }
.eyebrow{ display:flex; align-items:center; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--acc); margin-bottom:18px; }
.hero-title{ margin:0; font-family:var(--disp); font-weight:900; text-transform:uppercase; line-height:.8; letter-spacing:-.05em; font-size:clamp(64px,11.5vw,172px); }
.hero-title.long{ font-size:clamp(48px,7.6vw,118px); }
.ht-a{ display:block; background:linear-gradient(180deg, var(--glint) 0%, var(--acc-hi) 30%, var(--acc) 62%, var(--acc-lo) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 6px 30px color-mix(in srgb, var(--acc) 25%, transparent)); }
.ht-b{ display:block; color:transparent; -webkit-text-stroke:2px var(--acc); margin-top:.04em; letter-spacing:-.03em; }
.hero-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:26px; font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.hero-meta .dot{ display:inline-block; width:5px; height:5px; background:var(--acc); margin:0 8px; vertical-align:2px; transform:rotate(45deg); }
.hero-meta .hm-d{ padding:5px 10px; border:1px solid var(--acc); color:var(--acc-hi); }
.hero-focus{ position:relative; z-index:1; display:flex; justify-content:flex-end; }

.nextup{ width:100%; max-width:470px; padding:22px 24px 24px; background:var(--glass); border:1px solid var(--rule); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); text-align:center; cursor:pointer; text-decoration:none; color:var(--ink); display:block; transition:border-color .3s var(--ease), transform .3s var(--ease); }
.nextup:hover{ border-color:var(--acc); }
.nextup.live{ border-color:rgba(255,51,72,.5); }
.nu-k{ margin-top:16px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); display:flex; align-items:center; justify-content:center; gap:8px; }
.nu-when{ margin-top:6px; font-family:var(--mono); font-size:15px; color:var(--ink); }
.nu-when b{ color:var(--acc-hi); }
.versus{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; }
.vt-t{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; background:none; border:0; padding:0; color:inherit; }
button.vt-t{ cursor:pointer; }
.vt-t .cd{ font-family:var(--disp); font-weight:900; font-size:22px; letter-spacing:.01em; }
.vt-t .nm{ font-size:12px; color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vt-t.lose{ opacity:.45; }
.vt-t .logo{ filter:drop-shadow(0 0 18px color-mix(in srgb, var(--tc,var(--acc)) 45%, transparent)); }
.vt-s{ font-family:var(--disp); font-weight:900; font-size:40px; display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
.vt-s .vs{ font-family:var(--mono); font-size:13px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; padding:6px 10px; border:1px solid var(--rule-3); transform:skewX(-24deg); }
.vt-s i{ color:var(--acc); font-style:normal; }
.countdown{ display:flex; justify-content:center; gap:10px; margin-top:18px; }
.countdown span{ display:flex; flex-direction:column; align-items:center; min-width:62px; padding:9px 6px 7px; border:1px solid var(--rule); background:color-mix(in srgb, var(--paper) 55%, transparent); }
.countdown b{ font-family:var(--mono); font-size:30px; font-weight:700; line-height:1; color:var(--acc-hi); font-variant-numeric:tabular-nums; }
.countdown small{ margin-top:5px; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

.champion{ position:relative; display:flex; flex-direction:column; align-items:center; width:100%; max-width:470px; text-align:center; padding:28px 34px; border:1px solid var(--acc); background:var(--glass); color:var(--ink); cursor:pointer; transition:box-shadow .3s var(--ease); }
.champion:hover{ box-shadow:0 0 50px color-mix(in srgb, var(--tc,var(--acc)) 25%, transparent); }
.ch-f{ position:relative; margin-top:10px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.champion .ch-glow{ position:absolute; inset:0; background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc,var(--acc)) 40%, transparent), transparent 65%); }
.champion .logo{ position:relative; margin:0 auto; width:130px; height:130px; }
.ch-k{ position:relative; margin-top:14px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); }
.ch-n{ position:relative; font-family:var(--disp); font-weight:900; font-size:30px; text-transform:uppercase; }

/* ------------------------------------------------------------ phase rail */
.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:10px; margin:6px 0 34px; }
.ph{ position:relative; display:flex; flex-direction:column; gap:3px; padding:14px 14px 16px; background:color-mix(in srgb, var(--surface) 70%, transparent); border:1px solid var(--rule-2); border-top:2px solid var(--rule-3); overflow:hidden; }
.ph-n{ font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--faint); }
.ph-name{ font-family:var(--disp); font-weight:900; font-size:17px; text-transform:uppercase; letter-spacing:.01em; }
.ph-date{ font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--acc-hi); }
.ph-city{ font-size:12px; color:var(--muted); }
.ph-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:color-mix(in srgb, var(--ink) 5%, transparent); }
.ph-bar i{ display:block; height:100%; width:var(--w,0%); background:linear-gradient(90deg, var(--acc-lo), var(--acc-hi)); }
.ph.done{ border-top-color:var(--acc-lo); }
.ph.done .ph-name{ color:var(--muted); }
.ph.live{ border-color:var(--rule); border-top-color:var(--acc-hi); background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 14%, transparent), color-mix(in srgb, var(--surface) 70%, transparent) 70%); box-shadow:0 0 30px color-mix(in srgb, var(--acc) 12%, transparent); }
.ph.live .ph-n::after{ content:"Now"; margin-left:8px; padding:1px 6px; background:var(--mark); color:var(--on-mark); }

/* ------------------------------------------------------------- overview */
.ov-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.list{ display:flex; flex-direction:column; gap:6px; container-type:inline-size; }

/* -------------------------------------------------------------- match row */
.mrow{ display:grid; grid-template-columns:62px 150px minmax(0,1fr) 76px minmax(0,1fr); align-items:center; gap:12px; width:100%; min-height:54px; padding:8px 14px; background:color-mix(in srgb, var(--surface) 82%, transparent); border:1px solid var(--rule-2); text-align:left; cursor:pointer; transition:border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease); }
.mrow:hover{ border-color:var(--rule); background:color-mix(in srgb, var(--surface-3) 90%, transparent); }
.mrow.live{ border-color:rgba(255,51,72,.55); background:linear-gradient(90deg, rgba(255,51,72,.12), color-mix(in srgb, var(--surface) 82%, transparent) 40%); }
.mrow.wd{ grid-template-columns:86px 150px minmax(0,1fr) 76px minmax(0,1fr); }
.m-time{ display:flex; flex-direction:column; gap:2px; font-family:var(--mono); }
.m-time b{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.m-time small{ font-size:10.5px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.m-stage{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.m-stage i{ font-style:normal; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); }
.m-stage small{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-team{ display:flex; align-items:center; gap:10px; min-width:0; }
.m-team.a{ justify-content:flex-end; text-align:right; }
.m-team .cd{ font-family:var(--disp); font-weight:900; font-size:15px; letter-spacing:.01em; flex:none; }
.m-team .nm{ font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.m-team.lose{ opacity:.42; }
.m-team.win .cd{ color:var(--acc-hi); }
.m-score{ display:flex; flex-direction:column; align-items:center; gap:2px; font-family:var(--mono); }
.m-score .ms{ display:flex; align-items:center; justify-content:center; gap:7px; font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; }
.m-score i{ width:7px; height:2px; background:var(--acc); }
.m-score small{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.m-score.live b{ color:var(--live-t); }
.m-score .vs{ font-size:11px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }
@container (max-width:700px){
  .mrow,.mrow.wd{ grid-template-columns:76px 104px minmax(0,1fr) 58px minmax(0,1fr); gap:9px; padding:8px 11px; }
  .mrow:not(.wd){ grid-template-columns:52px 104px minmax(0,1fr) 58px minmax(0,1fr); }
  .mrow .nm{ display:none; }
}
@container (max-width:470px){
  .mrow,.mrow.wd,.mrow:not(.wd){ grid-template-columns:72px minmax(0,1fr) 52px minmax(0,1fr); grid-template-areas:"t s s s" "t a c b"; row-gap:4px; }
  .m-time{ grid-area:t; }
  .m-stage{ grid-area:s; flex-direction:row; gap:8px; align-items:baseline; }
  .m-team.a{ grid-area:a; }
  .m-score{ grid-area:c; }
  .m-team.b{ grid-area:b; }
}

/* -------------------------------------------------------------- schedule */
.seg{ display:inline-flex; border:1px solid var(--rule); background:color-mix(in srgb, var(--surface) 70%, transparent); }
.seg button{ padding:9px 15px; border:0; background:none; cursor:pointer; font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:color .25s, background-color .25s; }
.seg button + button{ border-left:1px solid var(--rule); }
.seg button:hover{ color:var(--ink); }
.seg button[aria-checked="true"]{ background:var(--mark); color:var(--on-mark); }
.day{ margin-bottom:26px; scroll-margin-top:90px; }
.day-h{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:0 0 10px; margin-bottom:8px; border-bottom:1px solid var(--rule-2); }
.day-h .dw{ font-family:var(--disp); font-weight:900; font-size:22px; text-transform:uppercase; color:var(--acc); }
.day-h .dd{ font-family:var(--disp); font-weight:900; font-size:22px; text-transform:uppercase; }
.day-h .dv{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.day-h .dz{ margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--faint); }
.today-tag{ padding:2px 8px; background:var(--mark); color:var(--on-mark); font-family:var(--mono); font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; transform:skewX(-24deg); }
.day.past .mrow{ opacity:.82; }
.day.today .day-h{ border-bottom-color:var(--acc); }

/* --------------------------------------------------------------- brackets */
.bracket{ position:relative; }
.bracket svg.links{ position:absolute; left:0; top:0; pointer-events:none; overflow:visible; }
.bracket svg.links path{ fill:none; stroke:var(--rule-3); stroke-width:2; }
.bracket svg.links path.hot{ stroke:var(--acc); filter:drop-shadow(0 0 4px color-mix(in srgb, var(--acc) 50%, transparent)); }
.bcol{ display:flex; flex-direction:column; justify-content:center; gap:18px; min-width:0; position:relative; }
.bh{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin-bottom:-6px; }
.bcard{ display:flex; flex-direction:column; width:100%; padding:0; text-align:left; cursor:pointer; background:var(--surface); border:1px solid var(--rule); transition:border-color .25s var(--ease), box-shadow .25s var(--ease); z-index:1; }
.bcard:hover{ border-color:var(--acc); box-shadow:0 0 24px color-mix(in srgb, var(--acc) 15%, transparent); }
.bcard.live{ border-color:rgba(255,51,72,.6); box-shadow:0 0 24px rgba(255,51,72,.18); }
.bcard.final{ border-color:var(--acc); }
.bc-h{ display:flex; justify-content:space-between; gap:10px; padding:7px 11px 6px 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--rule-2); }
.bc-t{ display:grid; grid-template-columns:24px auto minmax(0,1fr) 26px; align-items:center; gap:9px; padding:8px 11px; }
.bc-t + .bc-t{ border-top:1px solid var(--rule-2); }
.bc-t .logo{ width:24px; height:24px; }
.bc-t .cd{ font-family:var(--disp); font-weight:900; font-size:14px; }
.bc-t .nm{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-t b{ text-align:right; font-family:var(--mono); font-size:16px; font-variant-numeric:tabular-nums; }
.bc-t.win{ background:linear-gradient(90deg, color-mix(in srgb, var(--tc,var(--acc)) 16%, transparent), transparent 70%); }
.bc-t.win b,.bc-t.win .cd{ color:var(--acc-hi); }
.bc-t.lose{ opacity:.45; }

.bracket.pi{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-areas:"u1 u2 f q" "l1 l2 f q"; column-gap:64px; row-gap:40px; padding:10px 0 20px; }
.bracket.pi .c1.up{ grid-area:u1; } .bracket.pi .c2.up{ grid-area:u2; }
.bracket.pi .c1.lo{ grid-area:l1; } .bracket.pi .c2.lo{ grid-area:l2; }
.bracket.pi .c3{ grid-area:f; } .bracket.pi .c4{ grid-area:q; }
.bracket.pi .c1.lo,.bracket.pi .c2.lo{ padding-top:18px; border-top:1px dashed var(--rule-2); }
.bracket.ko{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:64px; padding:10px 0 20px; }
.bracket.ko .bcol{ justify-content:space-around; }
.bracket.ko .bh{ position:absolute; top:-22px; }
.bracket.ko{ margin-top:22px; }
.advance,.cup{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 14px; border:1px solid var(--rule); background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tc,var(--acc)) 22%, transparent), var(--surface) 70%); text-align:center; z-index:1; }
.advance .cd,.cup .cd{ font-family:var(--disp); font-weight:900; font-size:22px; }
.advance small,.cup small{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.cup{ border-color:var(--acc); }
.cup .dim{ color:var(--faint); }
.cup-art{ width:64px; height:60px; fill:var(--acc-hi); stroke:#141416; stroke-width:.9; filter:drop-shadow(0 0 16px color-mix(in srgb, var(--acc-hi) 35%, transparent)); }
.cup.won .cup-art{ width:44px; height:40px; }
.advance .cd.dim{ color:var(--faint); }
.bracket.k3col{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1000px; }

/* GSL group: openers, then the winners' match above the elimination match,
   the decider, and the two who advance */
.grp + .grp{ margin-top:10px; }
.bracket.gsl{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-areas:"g1 g2u . g4u" "g1 g2l g3 g4l"; column-gap:56px; row-gap:26px; padding:6px 0 18px; }
.bracket.gsl.nodec{ grid-template-areas:"g1 g2u g4u ." "g1 g2l . ."; }
.bracket.gsl .g1{ grid-area:g1; } .bracket.gsl .g2u{ grid-area:g2u; } .bracket.gsl .g2l{ grid-area:g2l; }
.bracket.gsl .g3{ grid-area:g3; } .bracket.gsl .g4u{ grid-area:g4u; } .bracket.gsl .g4l{ grid-area:g4l; }
.bracket.gsl .advance{ padding:14px 10px; }
.bracket.gsl .advance .logo.lg{ width:44px; height:44px; }
.bracket.gsl .advance .cd{ font-size:18px; }

/* eight-team double elimination: upper bracket above, lower below, both into
   the grand final */
.bracket.d8{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-areas:"u1 us uf . gf ch" "l1 l2 l3 lf gf ch"; column-gap:34px; row-gap:30px; padding:6px 0 20px; }
.bracket.d8 .d-u1{ grid-area:u1; } .bracket.d8 .d-us{ grid-area:us; justify-content:space-around; } .bracket.d8 .d-uf{ grid-area:uf; }
.bracket.d8 .d-l1{ grid-area:l1; } .bracket.d8 .d-l2{ grid-area:l2; } .bracket.d8 .d-l3{ grid-area:l3; } .bracket.d8 .d-lf{ grid-area:lf; }
.bracket.d8 .d-gf{ grid-area:gf; } .bracket.d8 .d-ch{ grid-area:ch; }
.bracket.d8 .d-l1,.bracket.d8 .d-l2,.bracket.d8 .d-l3,.bracket.d8 .d-lf{ padding-top:16px; border-top:1px dashed var(--rule-2); }
.bracket.d8 .bc-t .nm{ display:none; }
.bracket.d8 .bc-t{ grid-template-columns:24px minmax(0,1fr) 26px; }

/* final standings */
.places{ display:flex; flex-direction:column; gap:6px; }
.place{ display:grid; grid-template-columns:86px minmax(0,1fr) auto; align-items:center; gap:14px; padding:9px 14px; background:color-mix(in srgb, var(--surface) 82%, transparent); border:1px solid var(--rule-2); }
.place.first{ border-color:var(--acc); background:linear-gradient(90deg, color-mix(in srgb, var(--acc) 16%, transparent), color-mix(in srgb, var(--surface) 82%, transparent) 60%); }
.pl-r{ font-family:var(--disp); font-weight:900; font-size:17px; text-transform:uppercase; color:var(--acc-hi); }
.pl-x{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.pl-t{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.pl-team{ display:inline-flex; align-items:center; gap:7px; padding:4px 9px 4px 5px; background:var(--surface-2); border:1px solid transparent; cursor:pointer; font-family:var(--disp); font-weight:900; font-size:13px; }
.pl-team:hover{ border-color:var(--acc); }
.pl-team .logo{ width:22px; height:22px; }
.sh-x{ margin-left:12px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--muted); }

/* ----------------------------------------------------------------- swiss */
.swiss{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; align-items:stretch; }
.sw-col{ display:flex; flex-direction:column; min-width:0; }
.sw-h{ display:flex; flex-direction:column; gap:2px; padding:0 0 10px; margin-bottom:12px; border-bottom:2px solid var(--rule); }
.sw-h b{ font-family:var(--disp); font-weight:900; font-size:16px; text-transform:uppercase; }
.sw-h span{ font-family:var(--mono); font-size:11px; color:var(--acc); letter-spacing:.06em; }
.sw-col.res .sw-h{ border-bottom-color:var(--acc); }
.sw-body{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.pool{ display:flex; flex-direction:column; gap:5px; padding:9px; border:1px solid var(--rule-2); background:color-mix(in srgb, var(--surface) 75%, transparent); }
.pool.bo3{ border-color:var(--rule); background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 8%, transparent), color-mix(in srgb, var(--surface) 75%, transparent) 40%); }
.pool-h{ display:flex; align-items:baseline; justify-content:space-between; padding:0 2px 3px; }
.pool-h b{ font-family:var(--mono); font-size:17px; font-weight:700; }
.pool-h span{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pool.bo3 .pool-h span{ color:var(--acc); }
.sm{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:6px; width:100%; padding:6px 7px; background:var(--surface-2); border:1px solid transparent; cursor:pointer; transition:border-color .2s; }
.sm:hover{ border-color:var(--acc); }
.sm.tbd{ cursor:default; opacity:.5; }
.sm.tbd:hover{ border-color:transparent; }
.sm.live{ border-color:rgba(255,51,72,.6); }
.sm-t{ display:flex; align-items:center; gap:6px; min-width:0; font-family:var(--mono); font-size:12px; font-weight:700; }
.sm-t.b{ flex-direction:row-reverse; }
.sm-t .logo{ width:20px; height:20px; }
.sm-t span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sm-t.lose{ opacity:.4; }
.sm-t.win span{ color:var(--acc-hi); }
.sm-s{ display:flex; align-items:center; gap:3px; font-family:var(--mono); font-size:13px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sm-s small{ font-size:10.5px; color:var(--muted); font-weight:700; }
.sm-s i{ font-style:normal; color:var(--acc); }
.sm-s .livetag{ font-size:9px; padding:2px 6px; }
.exit{ padding:9px; border:1px solid; }
.exit.q{ border-color:color-mix(in srgb, var(--good) 40%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--good) 10%, transparent), color-mix(in srgb, var(--surface) 75%, transparent)); }
.exit.e{ border-color:rgba(255,90,102,.35); background:linear-gradient(180deg, rgba(255,90,102,.08), color-mix(in srgb, var(--surface) 75%, transparent)); }
.ex-h{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.ex-h b{ font-family:var(--mono); font-size:17px; }
.ex-h span{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.exit.q .ex-h span{ color:var(--good); }
.exit.e .ex-h span{ color:var(--red); }
.ex-t{ display:flex; flex-wrap:wrap; gap:5px; }
.ex-team{ display:inline-flex; align-items:center; gap:5px; padding:3px 7px 3px 4px; background:var(--surface-2); border:1px solid transparent; cursor:pointer; font-family:var(--mono); font-size:11.5px; font-weight:700; }
.ex-team:hover{ border-color:var(--acc); }
.ex-team .logo{ width:18px; height:18px; }
.exit.e .ex-team{ opacity:.6; }
.ex-none{ color:var(--faint); font-family:var(--mono); }

.stand{ display:flex; flex-direction:column; gap:4px; }
.st-row{ display:grid; grid-template-columns:34px minmax(0,1fr) 70px 150px 110px; align-items:center; gap:12px; width:100%; padding:8px 14px; background:color-mix(in srgb, var(--surface) 82%, transparent); border:1px solid var(--rule-2); text-align:left; cursor:pointer; transition:border-color .2s; }
.st-row:hover{ border-color:var(--rule); }
.stand.rr .st-row{ grid-template-columns:34px minmax(0,1fr) 80px 80px 110px; }
.st-row.head{ background:none; border:0; cursor:default; padding-top:0; padding-bottom:2px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.st-n{ font-family:var(--mono); font-weight:700; color:var(--muted); }
.st-t{ display:flex; align-items:center; gap:10px; min-width:0; }
.st-t b{ font-family:var(--disp); font-weight:900; font-size:15px; }
.st-t small{ color:var(--muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-r{ font-family:var(--mono); font-weight:700; font-size:16px; }
.st-pips{ display:flex; gap:4px; }
.st-pips i{ width:22px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-family:var(--mono); font-size:10px; font-weight:800; }
.st-pips i.W{ background:color-mix(in srgb, var(--good) 18%, transparent); color:var(--good); }
.st-pips i.L{ background:rgba(255,90,102,.15); color:var(--red); }
.st-s{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.st-row.q{ border-left:3px solid var(--good); }
.st-row.q .st-s{ color:var(--good); }
.st-row.e{ border-left:3px solid var(--red); opacity:.62; }
.st-row.e .st-s{ color:var(--red); }

/* ----------------------------------------------------------------- teams */
.region{ margin-bottom:8px; }
.region h3.sh{ margin-top:22px; }
.tgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.tcard{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px 14px 14px; overflow:hidden; background:var(--surface); border:1px solid var(--rule-2); cursor:pointer; text-align:center; transition:border-color .3s var(--ease), transform .3s var(--ease); }
.tcard:hover{ border-color:var(--tc,var(--acc)); }
.tc-glow{ position:absolute; inset:0; background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tc,var(--acc)) 28%, transparent), transparent 60%); opacity:.85; transition:opacity .3s; pointer-events:none; }
.tcard:hover .tc-glow{ opacity:1; }
.tcard::before{ content:""; position:absolute; right:-30%; top:-10%; width:60%; height:130%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.04)); transform:skewX(-24deg); pointer-events:none; }
.tc-logo{ position:relative; margin-bottom:6px; }
.tc-logo .logo{ width:84px; height:84px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)); transition:transform .4s var(--ease); }
.tcard:hover .tc-logo .logo{ transform:scale(1.06); }
.tc-code{ position:relative; font-family:var(--disp); font-weight:900; font-size:24px; letter-spacing:.01em; }
.tc-name{ position:relative; font-size:12.5px; color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tc-meta{ position:relative; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
.tc-meta span{ padding:2px 7px; border:1px solid var(--rule-3); font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.tc-status{ position:relative; margin-top:8px; width:100%; padding-top:9px; border-top:1px solid var(--rule-2); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.tcard.alive .tc-status{ color:var(--good); }
.tcard.out{ opacity:.55; }
.tcard.out .logo{ filter:grayscale(1); }
.tcard.out .tc-status{ color:var(--red); }
.tcard.crown{ border-color:var(--acc); box-shadow:0 0 40px color-mix(in srgb, var(--acc) 25%, transparent); }
.tcard.crown .tc-status{ color:var(--acc-hi); }

/* ------------------------------------------------------------------ live */
.livecard{ margin:4px 0 34px; border:1px solid rgba(255,51,72,.4); background:var(--surface); --tc:var(--live); overflow:hidden; scroll-margin-top:90px; }
.lv-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px 12px 22px; border-bottom:1px solid var(--rule-2); background:linear-gradient(90deg, rgba(255,51,72,.14), transparent 50%); }
.lv-stage{ font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); }
.lv-game{ font-family:var(--disp); font-weight:900; text-transform:uppercase; font-size:15px; }
.lv-clock{ font-family:var(--mono); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; color:var(--ink); }
.lv-watch{ margin-left:auto; display:flex; gap:8px; }
.lv-main{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px) minmax(0,1fr); grid-template-areas:"b m r"; min-height:300px; }
.lv-team{ position:relative; overflow:hidden; display:flex; align-items:flex-end; }
.lv-team.blue{ grid-area:b; }
.lv-team.red{ grid-area:r; justify-content:flex-end; }
.lv-mid{ grid-area:m; }
.lv-art{ position:absolute; inset:0 -40px; display:flex; gap:4px; transform:skewX(-24deg); opacity:.55; }
.lv-team.blue .lv-art{ mask-image:linear-gradient(90deg, #000 30%, transparent 100%); -webkit-mask-image:linear-gradient(90deg, #000 30%, transparent 100%); }
.lv-team.red .lv-art{ mask-image:linear-gradient(270deg, #000 30%, transparent 100%); -webkit-mask-image:linear-gradient(270deg, #000 30%, transparent 100%); }
.lv-art .sl{ flex:1; overflow:hidden; position:relative; }
.lv-art img{ position:absolute; left:50%; top:0; height:100%; width:auto; min-width:180%; object-fit:cover; transform:translateX(-50%) skewX(24deg) scale(1.15); }
.lv-team::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, var(--surface) 4%, transparent 60%), radial-gradient(circle at 30% 80%, color-mix(in srgb, var(--tc,var(--acc)) 30%, transparent), transparent 60%); pointer-events:none; }
.lv-team.red::after{ background:linear-gradient(0deg, var(--surface) 4%, transparent 60%), radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--tc,var(--acc)) 30%, transparent), transparent 60%); }
.lv-id{ position:relative; z-index:1; display:flex; flex-direction:column; gap:4px; padding:22px 26px; }
.lv-team.red .lv-id{ align-items:flex-end; text-align:right; }
.lv-id .logo{ filter:drop-shadow(0 6px 24px rgba(0,0,0,.7)); }
.lv-id .cd{ font-family:var(--disp); font-weight:900; font-size:44px; line-height:1; margin-top:8px; }
.lv-id .nm{ font-size:13px; color:var(--muted); }
.lv-id .side{ margin-top:4px; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.lv-team.blue .side{ color:var(--blue); }
.lv-team.red .side{ color:var(--red); }
.lv-mid{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; padding:18px 18px 20px; border-left:1px solid var(--rule-2); border-right:1px solid var(--rule-2); background:color-mix(in srgb, var(--paper) 55%, transparent); }
.lv-series{ display:flex; align-items:center; gap:14px; font-family:var(--disp); font-weight:900; font-size:64px; line-height:1; font-variant-numeric:tabular-nums; }
.lv-series i{ font-style:normal; color:var(--acc); font-size:44px; }
.pips{ display:flex; gap:6px; margin:10px 0 16px; }
.pips i{ width:22px; height:6px; background:var(--rule-3); transform:skewX(-24deg); }
.pips i.b{ background:var(--blue); }
.pips i.r{ background:var(--red); }
.pips i.on{ background:var(--live); animation:pulse 1.2s ease-in-out infinite; }
.lv-stats{ width:100%; display:flex; flex-direction:column; gap:7px; }
.sr{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.sr > span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:center; min-width:76px; }
.sr b{ font-family:var(--mono); font-size:16px; font-variant-numeric:tabular-nums; }
.sr .sa{ text-align:right; color:var(--blue-t); }
.sr .sb{ text-align:left; color:var(--red-t); }
.sr.big b{ font-family:var(--disp); font-weight:900; font-size:30px; color:var(--ink); }
.sr.drk .sa{ display:flex; justify-content:flex-end; }
.gbar{ height:5px; background:var(--red); margin:-2px 0 3px; }
.gbar i{ display:block; height:100%; width:var(--w,50%); background:var(--blue); transition:width .8s var(--ease); }
.drakes{ display:inline-flex; gap:4px; flex-wrap:wrap; }
.dk{ width:11px; height:11px; transform:rotate(45deg); background:var(--muted); display:inline-block; }
.dk.infernal{ background:#ff6a3d; } .dk.ocean{ background:#3fb6ff; } .dk.mountain{ background:#b8875a; }
.dk.cloud{ background:#c7dff0; } .dk.hextech{ background:#3ee8d8; } .dk.chemtech{ background:#8fd64b; } .dk.elder{ background:#f3e7c2; box-shadow:0 0 6px #f3e7c2; }
.lv-wait{ margin-top:10px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center; }
.lv-gold{ padding:14px 18px 6px; border-top:1px solid var(--rule-2); }
.gc-h{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.gc-h b{ font-size:12.5px; color:var(--ink); }
.gc-h b.b{ color:var(--blue-t); } .gc-h b.r{ color:var(--red-t); }
svg.gold{ display:block; width:100%; height:110px; }
svg.gold .grid line{ stroke:color-mix(in srgb, var(--ink) 7%, transparent); stroke-width:1; vector-effect:non-scaling-stroke; }
svg.gold .grid text{ fill:var(--faint); font-family:var(--mono); font-size:11px; }
svg.gold .zero{ stroke:color-mix(in srgb, var(--ink) 20%, transparent); stroke-width:1; vector-effect:non-scaling-stroke; }
svg.gold .ab{ fill:rgba(74,163,255,.32); }
svg.gold .ar{ fill:rgba(255,90,102,.3); }
svg.gold .ln{ fill:none; stroke:var(--ink); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.lv-players{ display:flex; flex-direction:column; border-top:1px solid var(--rule-2); }
.pr{ display:grid; grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); align-items:center; padding:6px 16px; }
.pr + .pr{ border-top:1px solid var(--rule-2); }
.pr .role{ text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.pl{ display:flex; align-items:center; gap:10px; min-width:0; }
.pl.r{ flex-direction:row-reverse; text-align:right; }
.pl-n{ display:flex; flex-direction:column; min-width:0; }
.pl-n b{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-n small{ font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.pl-k{ margin-left:auto; font-family:var(--mono); font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; }
.pl.r .pl-k{ margin-left:0; margin-right:auto; }

/* ----------------------------------------------------------------- modal */
.modal{ position:fixed; inset:0; z-index:50; display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; }
.modal-back{ position:absolute; inset:0; background:rgba(3,4,6,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fade .25s ease both; }
@keyframes fade{ from{ opacity:0; } }
.sheet{ width:min(1000px,100%); max-height:90vh; overflow-y:auto; padding:26px 26px 30px; background:var(--surface); border:1px solid var(--rule); box-shadow:0 30px 90px rgba(0,0,0,.6); animation:rise .4s var(--ease) both; scrollbar-width:thin; }
.x{ position:sticky; top:0; float:right; z-index:3; width:36px; height:36px; margin:-10px -10px 0 0; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--rule); background:var(--surface-2); cursor:pointer; }
.x svg{ width:16px; height:16px; fill:var(--ink); }
.x:hover{ border-color:var(--acc); }
.mh{ text-align:center; padding:6px 0 18px; border-bottom:1px solid var(--rule-2); margin-bottom:18px; }
.mh .versus{ max-width:560px; margin:0 auto; }
.mh .logo.lg{ width:84px; height:84px; }
.mh .vt-s{ font-size:52px; }
.mh-k{ margin-top:16px; display:flex; justify-content:center; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); }
.mh-w{ margin-top:6px; font-family:var(--mono); font-size:13px; color:var(--muted); }
.mh-w b{ color:var(--ink); }
.games{ display:flex; flex-direction:column; gap:14px; }
.game{ border:1px solid var(--rule-2); background:var(--surface-2); }
.game.live{ border-color:rgba(255,51,72,.5); }
.g-h{ display:flex; align-items:center; gap:12px; padding:10px 14px 10px 20px; border-bottom:1px solid var(--rule-2); font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.g-h b{ font-family:var(--disp); font-weight:900; font-size:15px; color:var(--ink); letter-spacing:.02em; }
.g-h .btn{ margin-left:auto; }
.g-sides{ display:grid; grid-template-columns:1fr 1fr; }
.gs{ padding:12px 14px; min-width:0; border-top:3px solid var(--blue); }
.gs.red{ border-top-color:var(--red); border-left:1px solid var(--rule-2); }
.gs.lose{ opacity:.7; }
.gs-h{ display:flex; align-items:center; gap:9px; }
.gs-h b{ font-family:var(--disp); font-weight:900; font-size:17px; }
.wtag{ margin-left:auto; padding:2px 8px; background:var(--mark); color:var(--on-mark); font-family:var(--mono); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; transform:skewX(-24deg); }
.gs-s{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:10px 0; }
.gs-s > span:not(.drakes){ display:flex; flex-direction:column; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.gs-s > span b{ font-size:15px; color:var(--ink); letter-spacing:0; }
.gs-p{ display:flex; flex-direction:column; gap:5px; }
.gp{ display:flex; align-items:center; gap:9px; min-width:0; }
.gp-n{ display:flex; flex-direction:column; min-width:0; }
.gp-n b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gp-n small{ font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.g-gold{ padding:12px 14px 8px; border-top:1px solid var(--rule-2); }
.th{ position:relative; display:flex; align-items:center; gap:22px; padding:10px 0 20px; border-bottom:1px solid var(--rule-2); overflow:hidden; }
.th .tc-glow{ inset:-40% 40% -40% -20%; }
.th > *{ position:relative; }
.th-c{ font-family:var(--disp); font-weight:900; font-size:40px; line-height:1; }
.th-n{ font-size:15px; color:var(--muted); margin-top:4px; }
.th-m{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.lineup{ display:flex; flex-direction:column; gap:6px; }
.lu{ display:grid; grid-template-columns:44px 140px minmax(0,1fr); align-items:center; gap:12px; padding:8px 12px; background:var(--surface-2); border:1px solid var(--rule-2); }
.lu .role{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); }
.lu b{ font-size:15px; }
.lu-c{ display:flex; gap:8px; flex-wrap:wrap; }
.lc{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.lc small{ font-family:var(--mono); font-size:10px; color:var(--muted); }

/* ---------------------------------------------------------------- footer */
.foot{ position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:26px 22px 34px; border-top:1px solid var(--rule-2); display:flex; flex-direction:column; gap:6px; font-size:11.5px; color:var(--faint); line-height:1.5; }
.foot span:first-child{ font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* ------------------------------------------------------------ responsive */
@media (max-width:1180px){
  .swiss{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:30px; }
  .sw-body{ justify-content:flex-start; }
}
@media (max-width:1000px){
  .hero{ grid-template-columns:1fr; min-height:0; }
  .hero-focus{ justify-content:flex-start; }
  .emblem{ right:-30%; top:32%; }
  .rail{ grid-auto-columns:minmax(150px,1fr); overflow-x:auto; scrollbar-width:none; }
  .rail::-webkit-scrollbar{ display:none; }
  .ov-cols{ grid-template-columns:1fr; }
  .lv-main{ grid-template-columns:1fr 1fr; grid-template-areas:"b r" "m m"; }
  .lv-mid{ border:0; border-top:1px solid var(--rule-2); }
  .lv-id .cd{ font-size:32px; }
  .lv-id .logo.xl{ width:64px; height:64px; }
  .bracket.pi,.bracket.ko,.bracket.gsl,.bracket.d8{ display:flex; flex-direction:column; gap:22px; }
  .bracket svg.links{ display:none; }
  .bracket.ko .bh{ position:static; }
  .bracket.ko{ margin-top:0; }
  .bracket.pi .c1.lo,.bracket.pi .c2.lo,.bracket.d8 .bcol{ padding-top:0; border-top:0; }
  .bracket.d8 .bc-t .nm{ display:block; }
  .bracket.d8 .bc-t{ grid-template-columns:24px auto minmax(0,1fr) 26px; }
  .bcol{ gap:10px; }
  .bh{ margin-bottom:0; }
}
@media (max-width:720px){
  .top-in{ flex-wrap:wrap; gap:8px 14px; padding:10px 16px; }
  .tabs{ order:3; width:100%; margin:0 -6px; }
  .clock{ margin-left:auto; }
  .brand .wm{ display:none; }
  .pk-panel{ position:fixed; left:16px; right:16px; top:110px; width:auto; }
  .place{ grid-template-columns:96px minmax(0,1fr); }
  .pl-t{ grid-column:1 / -1; justify-content:flex-start; }
  .stand.rr .st-row{ grid-template-columns:26px minmax(0,1fr) 46px 52px; }
  main{ padding:0 16px 30px; }
  .swiss{ grid-template-columns:1fr; }
  .st-row{ grid-template-columns:26px minmax(0,1fr) 46px 84px; }
  .st-row .st-s{ display:none; }
  .st-t small{ display:none; }
  .st-pips i{ width:15px; }
  .g-sides{ grid-template-columns:1fr; }
  .gs.red{ border-left:0; }
  .lu{ grid-template-columns:36px minmax(0,1fr); }
  .lu-c{ grid-column:1 / -1; }
  .sheet{ padding:20px 16px 24px; }
  .mh .vt-s{ font-size:38px; }
  .mh .logo.lg{ width:60px; height:60px; }
  .countdown span{ min-width:54px; }
  .countdown b{ font-size:24px; }
  .lv-watch{ margin-left:0; }
  .pr{ grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); padding:6px 10px; }
  .pl-n small{ display:none; }
  .pl{ gap:7px; }
  .pl-k{ font-size:12px; }
  .lv-art{ opacity:.4; }
  .hero-title{ font-size:clamp(56px,19vw,110px); }
  .tgrid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .foot{ padding:22px 16px 30px; }
}