:root {
  color-scheme: light;
  --page: #ffffff;
  --page-grid: none;
  --bar: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --surface-3: #eef0f3;
  --line: #eef0f3;
  --line-strong: #e5e7eb;
  --card-line: #e5e7eb;
  --field-line: #868d9a;
  --ink: #0a0c10;
  --ink-2: #4b5260;
  --muted: #6b7280;
  --nav-on: #0a0c10;
  --accent: #0a0c10;
  --accent-hover: #2a2f38;
  --on-accent: #ffffff;
  --accent-text: #0a0c10;
  --accent-wash: #f1f4ff;
  --accent-edge: #ffffff;
  --clock: #0a0c10;
  --chip-on: #0a0c10;
  --chip-on-ink: #ffffff;
  --chip-on-line: #0a0c10;
  --seg-bg: #f3f4f6;
  --seg-line: transparent;
  --seg-on: #ffffff;
  --seg-on-ink: #0a0c10;
  --seg-shadow: 0 1px 2px rgba(10, 12, 16, .08);
  --team-us: #2b63ff;
  --team-them: #ffd23f;
  --team-us-edge: transparent;
  --team-them-edge: #e15e00;
  --team-us-ring: var(--surface);
  --team-them-ring: #e15e00;
  --on-team-us: #ffffff;
  --on-team-them: #0a0c10;
  --map-us: #87afff;
  --map-them: #ffe8a4;
  --team-light: var(--team-us);
  --team-dark: var(--team-them);
  --team-light-edge: var(--team-us-edge);
  --team-dark-edge: var(--team-them-edge);
  --team-light-ring: var(--team-us-ring);
  --team-dark-ring: var(--team-them-ring);
  --on-team-light: var(--on-team-us);
  --on-team-dark: var(--on-team-them);
  --map-light: var(--map-us);
  --map-dark: var(--map-them);
  --official: #4b5260;
  --swatch-edge: rgba(10, 12, 16, .28);
  --grid: #eef0f3;
  --axis: #d1d5db;
  --neutral: #f4f6f8;
  --heat-1: #4f5bff;
  --heat-2: #a33fd0;
  --heat-3: #f2343b;
  --heat-4: #ff8a1c;
  --heat-5: #ffd319;
  --brand-ramp: linear-gradient(90deg, #4ce0f0, #2fa8f5 16%, #2b63ff 40%, #7b2cbf 50%, #e15e00 60%, #f9844a 80%, #ffd23f);
  --brand-focus: #245cff;
  --ice: #f7f8fa;
  --rink-out: #ffffff;
  --hatch: #e3e6eb;
  --boards: #9ca3af;
  --rink-red: #eaa5a5;
  --rink-blue: #a9bdf2;
  --rink-thin: #f0c2c2;
  --rink-ink: rgba(10, 12, 16, .28);
  --rink-net: rgba(10, 12, 16, .6);
  --crease: #e8eefc;
  --crease-on: rgba(255, 255, 255, .35);
  --halo: rgba(255, 255, 255, .95);
  --marker-ring: #ffffff;
  --marker-edge: rgba(10, 12, 16, .55);
  --video-light: var(--team-light);
  --video-dark: var(--team-dark);
  --video-light-tag: var(--team-light);
  --video-dark-tag: var(--team-dark);
  --video-dark-tag-ink: var(--on-team-dark);
  --video-tag-ink: var(--on-team-light);
  --video-accent: #ffffff;
  --video-edge: #0a0c10;
  --video-tag-radius: 5;
  --stage-chip: rgba(10, 12, 16, .82);
  --stage-ink: #ffffff;
  --stage-ink-2: rgba(255, 255, 255, .72);
  --stage-track: rgba(255, 255, 255, .4);
  --mark-red: #ff2a6a;
  --mark-green: #34e07c;
  --mark-black: #0a0c10;
  --mark-white: #ffffff;
  --mark-halo: rgba(6, 8, 11, .82);
  --mark-halo-ink: rgba(255, 255, 255, .92);
  --good: #147b3b;
  --good-wash: #e7f5ec;
  --warn: #8a5c00;
  --warn-wash: #f9efe1;
  --bad: #c0362c;
  --bad-wash: #fbe9e7;
  --tip: #0a0c10;
  --tip-ink: #f3f4f6;
  --tip-line: #0a0c10;
  --stage: #0a0c10;
  --stage-2: #151a22;
  --paper: #ffffff;
  --shadow-pop: 0 8px 28px rgba(10, 12, 16, .18);
  --font-display: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-body: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-label: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --case: none;
  --track: normal;
  --track-s: normal;
  --track-head: -0.03em;
  --w-head: 600;
  --w-ui: 500;
  --label-size: 12px;
  --h1: 36px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-21: 21px;
  --fs-24: 24px;
  --radius: 14px;
  --radius-m: 10px;
  --radius-s: 8px;
  --radius-xs: 5px;
  --pill: 999px;
  --tick: 2px;
  --cut: none;
  --cut-top: none;
  --cut-bottom: none;
  --cut-s: none;
  --play-radius: 50%;
  --hud: 0;
  --bar-h: 64px;
  --rail-w: 88px;
  --pop-room: calc(100vw - 50px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #06080b;
    --page-grid: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    --bar: rgba(6, 8, 11, .94);
    --surface: #0b0f14;
    --surface-2: #111821;
    --surface-3: #18202a;
    --line: #1b232d;
    --line-strong: #2a3542;
    --card-line: transparent;
    --field-line: #5c6876;
    --ink: #e9eef3;
    --ink-2: #a3aebb;
    --muted: #7f8a97;
    --nav-on: #ffffff;
    --accent: #ffffff;
    --accent-hover: #dfe5ec;
    --on-accent: #06080b;
    --accent-text: #ffffff;
    --accent-wash: rgba(255, 255, 255, .06);
    --plate-edge: rgba(255, 255, 255, .22);
    --accent-edge: #06080b;
    --clock: #ffffff;
    --chip-on: transparent;
    --chip-on-ink: #ffffff;
    --chip-on-line: #ffffff;
    --seg-bg: transparent;
    --seg-line: #2a3542;
    --seg-on: #e9eef3;
    --seg-on-ink: #06080b;
    --seg-shadow: none;
    --team-them-edge: transparent;
    --team-them-ring: var(--surface);
    --on-team-them: #06080b;
    --map-us: #2149b1;
    --map-them: #ac913b;
    --official: #a3aebb;
    --swatch-edge: rgba(255, 255, 255, .45);
    --grid: #1b232d;
    --axis: #2a3542;
    --neutral: #0c1117;
    --heat-1: #5a66ff;
    --heat-2: #b84fe0;
    --heat-3: #ff4740;
    --heat-4: #ff9b2f;
    --heat-5: #fff15a;
    --brand-focus: #4ce0f0;
    --ice: #0c1117;
    --rink-out: #0b0f14;
    --hatch: #18212b;
    --boards: #3a4757;
    --rink-red: #7a3a3a;
    --rink-blue: #2c5a86;
    --rink-thin: #4a2e2e;
    --rink-ink: rgba(233, 238, 243, .24);
    --rink-net: rgba(233, 238, 243, .6);
    --crease: #12253a;
    --crease-on: rgba(255, 255, 255, .06);
    --halo: rgba(11, 15, 20, .92);
    --marker-ring: #06080b;
    --marker-edge: #06080b;
    --video-accent: #ffffff;
    --video-edge: #06080b;
    --video-tag-radius: 0;
    --stage-chip: rgba(10, 12, 16, .82);
    --stage-ink: #ffffff;
    --mark-red: #ff2a6a;
    --mark-green: #34e07c;
    --mark-black: #0a0c10;
    --mark-white: #ffffff;
    --mark-halo: rgba(6, 8, 11, .82);
    --mark-halo-ink: rgba(255, 255, 255, .92);
    --good: #3ddc84;
    --good-wash: rgba(61, 220, 132, .12);
    --warn: #e9a23e;
    --warn-wash: rgba(233, 162, 62, .13);
    --bad: #ff6b6b;
    --bad-wash: rgba(255, 107, 107, .13);
    --tip: #111821;
    --tip-ink: #e9eef3;
    --tip-line: #2a3542;
    --stage: #000000;
    --stage-2: #0b0f14;
    --shadow-pop: 0 10px 32px rgba(0, 0, 0, .55);
    --font-display: "Chakra Petch", "Bahnschrift", "Arial Narrow", sans-serif;
    --font-ui: "Chakra Petch", "Bahnschrift", "Arial Narrow", sans-serif;
    --font-body: "Barlow", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --font-label: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
    --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
    --case: uppercase;
    --track: .14em;
    --track-s: .08em;
    --track-head: .02em;
    --w-head: 700;
    --w-ui: 600;
    --label-size: 11px;
    --h1: 48px;
    --radius: 0px;
    --radius-m: 0px;
    --radius-s: 0px;
    --radius-xs: 0px;
    --pill: 0px;
    --tick: 0px;
    --cut: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    --cut-top: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
    --cut-bottom: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
    --cut-s: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
    --play-radius: 0;
    --hud: 1;
  }
}
:root[data-theme="dark"], :root[data-skin] {
  color-scheme: dark;
  --page: #06080b;
  --page-grid: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  --bar: rgba(6, 8, 11, .94);
  --surface: #0b0f14;
  --surface-2: #111821;
  --surface-3: #18202a;
  --line: #1b232d;
  --line-strong: #2a3542;
  --card-line: transparent;
  --field-line: #5c6876;
  --ink: #e9eef3;
  --ink-2: #a3aebb;
  --muted: #7f8a97;
  --nav-on: #ffffff;
  --accent: #ffffff;
  --accent-hover: #dfe5ec;
  --on-accent: #06080b;
  --accent-text: #ffffff;
  --accent-wash: rgba(255, 255, 255, .06);
  --plate-edge: rgba(255, 255, 255, .22);
  --accent-edge: #06080b;
  --clock: #ffffff;
  --chip-on: transparent;
  --chip-on-ink: #ffffff;
  --chip-on-line: #ffffff;
  --seg-bg: transparent;
  --seg-line: #2a3542;
  --seg-on: #e9eef3;
  --seg-on-ink: #06080b;
  --seg-shadow: none;
  --team-them-edge: transparent;
  --team-them-ring: var(--surface);
  --on-team-them: #06080b;
  --map-us: #2149b1;
  --map-them: #ac913b;
  --official: #a3aebb;
  --swatch-edge: rgba(255, 255, 255, .45);
  --grid: #1b232d;
  --axis: #2a3542;
  --neutral: #0c1117;
  --heat-1: #5a66ff;
  --heat-2: #b84fe0;
  --heat-3: #ff4740;
  --heat-4: #ff9b2f;
  --heat-5: #fff15a;
  --brand-focus: #4ce0f0;
  --ice: #0c1117;
  --rink-out: #0b0f14;
  --hatch: #18212b;
  --boards: #3a4757;
  --rink-red: #7a3a3a;
  --rink-blue: #2c5a86;
  --rink-thin: #4a2e2e;
  --rink-ink: rgba(233, 238, 243, .24);
  --rink-net: rgba(233, 238, 243, .6);
  --crease: #12253a;
  --crease-on: rgba(255, 255, 255, .06);
  --halo: rgba(11, 15, 20, .92);
  --marker-ring: #06080b;
  --marker-edge: #06080b;
  --video-accent: #ffffff;
  --video-edge: #06080b;
  --video-tag-radius: 0;
  --stage-chip: rgba(10, 12, 16, .82);
  --stage-ink: #ffffff;
  --mark-red: #ff2a6a;
  --mark-green: #34e07c;
  --mark-black: #0a0c10;
  --mark-white: #ffffff;
  --mark-halo: rgba(6, 8, 11, .82);
  --mark-halo-ink: rgba(255, 255, 255, .92);
  --good: #3ddc84;
  --good-wash: rgba(61, 220, 132, .12);
  --warn: #e9a23e;
  --warn-wash: rgba(233, 162, 62, .13);
  --bad: #ff6b6b;
  --bad-wash: rgba(255, 107, 107, .13);
  --tip: #111821;
  --tip-ink: #e9eef3;
  --tip-line: #2a3542;
  --stage: #000000;
  --stage-2: #0b0f14;
  --shadow-pop: 0 10px 32px rgba(0, 0, 0, .55);
  --font-display: "Chakra Petch", "Bahnschrift", "Arial Narrow", sans-serif;
  --font-ui: "Chakra Petch", "Bahnschrift", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-label: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --case: uppercase;
  --track: .14em;
  --track-s: .08em;
  --track-head: .02em;
  --w-head: 700;
  --w-ui: 600;
  --label-size: 11px;
  --h1: 48px;
  --radius: 0px;
  --radius-m: 0px;
  --radius-s: 0px;
  --radius-xs: 0px;
  --pill: 0px;
  --tick: 0px;
  --cut: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  --cut-top: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  --cut-bottom: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  --cut-s: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  --play-radius: 0;
  --hud: 1;
}
:root[data-skin="halloween"] {
  --page: #07040c;
  --page-grid: linear-gradient(rgba(192, 78, 224, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(192, 78, 224, .035) 1px, transparent 1px);
  --bar: rgba(9, 5, 15, .94);
  --surface: #110a1b;
  --surface-2: #180f26;
  --surface-3: #211534;
  --line: #261a3b;
  --line-strong: #3b2856;
  --field-line: #6f5c8c;
  --ink: #f3edfb;
  --ink-2: #c6b8dc;
  --muted: #a091b8;
  --seg-line: #3b2856;
  --grid: #261a3b;
  --axis: #3b2856;
  --neutral: #130c1e;
  --ice: #120b1d;
  --rink-out: #110a1b;
  --hatch: #1f1530;
  --boards: #4d3c68;
  --crease: #1c1840;
  --halo: rgba(17, 10, 27, .92);
  --marker-ring: #07040c;
  --marker-edge: #07040c;
  --tip: #180f26;
  --tip-line: #3b2856;
  --card-line: #24173a;
  --map-us: #2847b3;
  --map-them: #ae9041;
  --occ-night: radial-gradient(70% 55% at 50% 112%, rgba(192, 78, 224, .5), transparent 70%),
    radial-gradient(80% 80% at 0% 0%, rgba(192, 78, 224, .26), transparent 60%),
    linear-gradient(180deg, #1d0c33 0%, #13081f 55%, #0c0516 100%);
  --occ-stars: radial-gradient(1.5px 1.5px at 4% 30%, #f2e9ff 50%, transparent), radial-gradient(1px 1px at 13% 62%, #f2e9ff 50%, transparent),
    radial-gradient(1.5px 1.5px at 24% 20%, #f2e9ff 50%, transparent), radial-gradient(1px 1px at 33% 55%, #f2e9ff 50%, transparent),
    radial-gradient(1px 1px at 41% 25%, #f2e9ff 50%, transparent), radial-gradient(1.5px 1.5px at 49% 66%, #f2e9ff 50%, transparent),
    radial-gradient(1px 1px at 57% 30%, #f2e9ff 50%, transparent), radial-gradient(1.5px 1.5px at 64% 58%, #f2e9ff 50%, transparent),
    radial-gradient(1px 1px at 72% 18%, #f2e9ff 50%, transparent), radial-gradient(1px 1px at 79% 50%, #f2e9ff 50%, transparent),
    radial-gradient(1.5px 1.5px at 97% 40%, #f2e9ff 50%, transparent);
  --occ-event: #ff8a1a;
  --occ-event-shadow: #5e1780;
  --occ-event-glow: rgba(255, 138, 26, .38);
  --occ-event-font: "Creepster", "Big Shoulders Display", Impact, sans-serif;
  --occ-honor: #5dfcab;
  --occ-honor-glow: rgba(93, 252, 171, .35);
  --occ-rim: rgba(192, 78, 224, .5);
  --occ-moon: radial-gradient(circle at 64% 36%, rgba(8, 52, 30, .32) 0 8%, transparent 9%),
    radial-gradient(circle at 34% 62%, rgba(8, 52, 30, .26) 0 11%, transparent 12%),
    radial-gradient(circle at 70% 70%, rgba(8, 52, 30, .22) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 36%, #e9fff2, #7dffbe 42%, #22b877 100%);
  --occ-moon-glow: 0 0 34px 8px rgba(61, 245, 156, .34), 0 0 110px 40px rgba(61, 245, 156, .1);
  --occ-bat: #030106;
  --occ-web: rgba(226, 214, 255, .26);
  --occ-eye: #ff5a1a;
  --occ-tree: #030106;
  --occ-window: #ffb13d;
  --occ-fog: radial-gradient(30% 70% at 15% 70%, rgba(205, 180, 240, .2), transparent 70%),
    radial-gradient(26% 60% at 48% 80%, rgba(205, 180, 240, .16), transparent 70%),
    radial-gradient(30% 70% at 82% 70%, rgba(205, 180, 240, .2), transparent 70%);
  --occ-page-glow: radial-gradient(60% 45% at 85% 0%, rgba(192, 78, 224, .13), transparent 70%),
    radial-gradient(70% 40% at 10% 100%, rgba(61, 245, 156, .05), transparent 70%);
}
:root[data-ours="dark"] {
  --team-light: var(--team-them);
  --team-dark: var(--team-us);
  --team-light-edge: var(--team-them-edge);
  --team-dark-edge: var(--team-us-edge);
  --team-light-ring: var(--team-them-ring);
  --team-dark-ring: var(--team-us-ring);
  --on-team-light: var(--on-team-them);
  --on-team-dark: var(--on-team-us);
  --map-light: var(--map-them);
  --map-dark: var(--map-us);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background-color: var(--page);
  background-image: var(--page-grid);
  background-size: 48px 48px;
  color: var(--ink);
  font: 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--w-head); text-wrap: balance; }
.num, td.n, .tnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
.small { font-size: 13px; }
.label, .lab-caps { font: 500 var(--label-size)/1.3 var(--font-label); letter-spacing: var(--track); text-transform: var(--case); color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 40px;
  height: var(--bar-h); padding: 0 40px;
  background: var(--bar);
  border-bottom: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font: 700 16px/1 "Chakra Petch", "Bahnschrift", "Arial Narrow", sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.brand-mark { width: 26px; height: 26px; flex: none; }

:root {
  --org-1: #0a0c10;
  --org-2: #6b7280;
  --org-1-ink: #ffffff;
  --plate: #ffffff;
  --plate-edge: rgba(10, 12, 16, .14);
  --hem: 6px;
  --club-panel: var(--surface);
  --club-ink: var(--ink);
  --club-ink-2: var(--ink-2);
  --club-stripe: var(--line-strong);
  --club-stripe-text: var(--ink);
  --club-veil: var(--surface-2);
  --club-line: var(--field-line);
  --club-tile: var(--surface-2);
  --club-tile-ink: var(--ink);
  --club-tile-ink-2: var(--ink-2);
  --club-tile-line: var(--field-line);
  --club-mark: var(--ink);
  --club-mark-ink: var(--surface);
  --club-hero-panel: var(--club-panel);
  --club-hero-ink: var(--club-ink);
  --club-hero-ink-2: var(--club-ink-2);
  --club-hero-stripe: var(--club-stripe);
  --club-hero-stripe-text: var(--club-stripe-text);
  --club-hero-veil: var(--club-veil);
  --club-hero-line: var(--club-line);
  --club-hero-tile: var(--club-tile);
  --club-hero-tile-ink: var(--club-tile-ink);
  --club-hero-tile-ink-2: var(--club-tile-ink-2);
  --club-hero-tile-line: var(--club-tile-line);
  --club-hero-join: 1;
  --font-hero: "Big Shoulders Display", "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  --range: #888f9b;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --range: #5b6675; } }
:root[data-theme="dark"], :root[data-skin] { --range: #5b6675; }
.hem { display: block; height: var(--hem); background: linear-gradient(var(--org-1) 0 4px, var(--org-2) 4px var(--hem)); }
.plate {
  --s: 40px;
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s);
  overflow: hidden; border-radius: min(var(--radius-s), 25%); background: var(--plate); vertical-align: middle;
}
.plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--plate-edge); pointer-events: none; }
.plate img { display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 12%; object-fit: contain; }
.plate.mono {
  background: var(--org-1); color: var(--org-1-ink);
  font: 700 calc(var(--s) * .36)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase;
}
.plate.s24 { --s: 24px; }
.plate.s32 { --s: 32px; }
.plate.s48 { --s: 48px; }
.plate.s56 { --s: 56px; }
.nav { display: flex; gap: 32px; align-self: stretch; }
.nav a { position: relative; display: flex; align-items: center; text-decoration: none; color: var(--ink-2); font: var(--w-ui) 14px/1 var(--font-ui); letter-spacing: var(--track); text-transform: var(--case); white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--nav-on); }
.nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--seg-bg); border: 1px solid var(--seg-line); border-radius: var(--radius-s); }
.seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-xs); background: transparent;
  color: var(--ink-2); font: 500 12px/1 var(--font-mono); text-transform: var(--case); white-space: nowrap; cursor: pointer;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--seg-on); color: var(--seg-on-ink); box-shadow: var(--seg-shadow); }
.seg svg { width: 14px; height: 14px; }
.seg.icons button { padding: 0 8px; }

.account summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); color: var(--ink); cursor: pointer; list-style: none;
  font: 600 13px/1 var(--font-mono); letter-spacing: var(--track-s); text-transform: var(--case); white-space: nowrap;
}
.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: grid; gap: 2px; width: max-content; min-width: 200px;
  max-width: calc(100vw - 32px); padding: 8px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-m); box-shadow: var(--shadow-pop);
}
.account-email { margin: 4px 8px 6px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.account-menu a {
  display: flex; align-items: center; min-height: 36px; padding: 0 8px; border-radius: var(--radius-xs); color: var(--ink);
  font: var(--w-ui) 14px/1 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); text-decoration: none;
}
.account-menu a:hover { background: var(--surface-2); }

main { outline: none; }
.page { max-width: 1440px; margin: 0 auto; padding: 36px 40px 64px; }
@media (orientation: landscape) and (max-height: 560px) { .page:has(.watch-card) { padding: 16px 16px 40px; } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 20px 0 40px; }
.page-head h1 { margin: 0; font-size: calc(var(--h1) * 1.25); line-height: 1; letter-spacing: var(--track-head); text-transform: var(--case); }
.page-head p { margin: 12px 0 0; color: var(--ink-2); font-size: 16px; max-width: 70ch; }
p, li { text-wrap: pretty; }
.card { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius); clip-path: var(--cut); }
.panel { padding: 20px; margin-top: 20px; }
.panel > h3, .panel > .info-title > h3 { margin: 0 0 4px; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.panel > .info-title { margin: 0 0 4px; }
.panel > .info-title > h3 { margin: 0; }
.panel > .lead-in { margin: 0 0 14px; color: var(--muted); font-size: 13px; max-width: 80ch; }
.loading { padding: 80px 24px; text-align: center; color: var(--ink-2); font-family: var(--font-label); text-transform: var(--case); letter-spacing: var(--track-s); }
.spinner { display: inline-block; width: 20px; height: 20px; margin-right: 10px; vertical-align: middle; border: 2.5px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error { padding: 14px 16px; border: 1px solid var(--bad); background: var(--bad-wash); border-radius: var(--radius-s); color: var(--ink); max-width: 80ch; }
.error b { color: var(--bad); }
.empty-state { padding: 40px 24px; text-align: center; color: var(--ink-2); }
.empty-state b { display: block; color: var(--ink); font: var(--w-head) 18px/1.3 var(--font-display); text-transform: var(--case); margin-bottom: 4px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: transparent;
  color: var(--ink); font: var(--w-ui) 13px/1 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: var(--w-head); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn[disabled]:hover { border-color: var(--line-strong); }
.btn.primary[disabled]:hover { background: var(--accent); border-color: var(--accent); }
.btn svg { width: 14px; height: 14px; }

.chip { display: inline-flex; align-items: center; gap: 7px; font: var(--w-ui) 14px/1.2 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); white-space: nowrap; }
.chip .sw { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px var(--swatch-edge); }
.team-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--tick); flex: none; }
.team-dot.light { background: var(--team-light); box-shadow: inset 0 0 0 1px var(--team-light-edge); }
.team-dot.dark { background: var(--team-dark); box-shadow: inset 0 0 0 1px var(--team-dark-edge); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-xs);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2);
  font: 500 var(--label-size)/1.5 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); white-space: nowrap;
}
.badge.ok { color: var(--good); background: var(--good-wash); border-color: transparent; }
.badge.ok::before { content: "✓" / ""; font-weight: 700; }
.badge.warn { color: var(--warn); background: var(--warn-wash); border-color: transparent; }
.badge.warn::before, .badge.bad::before { content: "!" / ""; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; color: var(--surface); font-size: 10px; font-weight: 700; }
.badge.warn::before { background: var(--warn); }
.badge.bad::before { background: var(--bad); }
.badge.bad { color: var(--bad); background: var(--bad-wash); border-color: transparent; }
.badge.run { color: var(--ink); background: var(--accent-wash); border-color: transparent; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.run .dot { background: var(--accent); box-shadow: 0 0 0 1px var(--accent-edge); }
.dot.pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

.st { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 700 var(--fs-11)/1 var(--font-mono); }
.st.done { background: var(--good-wash); color: var(--good); }
.st.running { background: var(--accent); color: var(--on-accent); }
.st.failed { background: var(--bad-wash); color: var(--bad); }
.st.pending { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.st.skipped { background: var(--surface-3); color: var(--muted); }
.st.held { background: var(--warn-wash); color: var(--warn); }
.stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.stage-list li { display: flex; align-items: center; gap: 8px; }
.stage-pips { display: flex; gap: 3px; }
.stage-pips i { width: 12px; height: 6px; border-radius: var(--tick); background: var(--line-strong); }
.stage-pips i.done { background: var(--good); }
.stage-pips i.running { background: var(--accent); animation: pulse 1.2s infinite; }
.stage-pips i.failed { background: var(--bad); }
.stage-pips i.skipped { background: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 4px); }
.proc { display: grid; gap: 6px; width: 100%; min-width: 0; }
.proc .badge { justify-self: start; max-width: 100%; white-space: normal; }
.proc-bar { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.proc-bar progress.bar { flex: 1 1 auto; width: auto; min-width: 64px; }
.proc-count { flex: none; white-space: nowrap; }
.proc-time { margin: 0; color: var(--muted); font-size: 13px; }
.proc.wide { grid-template-columns: auto minmax(160px, 22rem) minmax(0, 1fr); align-items: center; gap: 8px 20px; }
.proc.wide .badge { white-space: nowrap; }
.logline { font: var(--fs-11)/1.5 var(--font-mono); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
pre.code { margin: 0; padding: 10px 12px; overflow-x: auto; font: var(--fs-12)/1.7 var(--font-mono); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-xs); }

.grid-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 32px 28px; }
.game-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; }
:root .game-card.card { border-color: transparent; background: var(--gc-bg, transparent); }
a.game-card:hover h3 { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.poster { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius-m); overflow: hidden; background: var(--stage) center / cover no-repeat; }
.poster::after, .video-wrap::after, .dropzone-box::after {
  content: ""; position: absolute; inset: 12px; z-index: 3; pointer-events: none; opacity: var(--hud);
  --b: var(--hud-ink, #e9eef3);
  background:
    linear-gradient(var(--b), var(--b)) left top / 16px 2px no-repeat, linear-gradient(var(--b), var(--b)) left top / 2px 16px no-repeat,
    linear-gradient(var(--b), var(--b)) right top / 16px 2px no-repeat, linear-gradient(var(--b), var(--b)) right top / 2px 16px no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / 16px 2px no-repeat, linear-gradient(var(--b), var(--b)) left bottom / 2px 16px no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / 16px 2px no-repeat, linear-gradient(var(--b), var(--b)) right bottom / 2px 16px no-repeat;
}
.video-wrap::after { inset: 14px; --b: var(--accent); }
.poster .dur, .poster .tag { position: absolute; z-index: 4; padding: 3px 8px; border-radius: var(--radius-xs); background: var(--stage-chip); color: var(--stage-ink); font: 600 12px/1 var(--font-mono); letter-spacing: var(--track-s); text-transform: var(--case); }
.poster .dur { right: 12px; bottom: 12px; font-variant-numeric: tabular-nums; }
.poster .tag { left: 12px; top: 12px; background: var(--surface); color: var(--ink); }
.poster.empty { display: grid; place-items: center; color: #9aa3ae; background: repeating-linear-gradient(135deg, var(--stage-2) 0 10px, var(--stage) 10px 20px); }
.poster.empty svg { width: 44px; height: 44px; opacity: .7; }
.game-body { display: flex; flex-direction: column; gap: 16px; flex: 1; padding: var(--gc-pad, 18px 0 0); }
.game-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.game-title h3 { margin: 0; font-size: 22px; line-height: 1.1; letter-spacing: var(--track-head); text-transform: var(--case); }
.game-title .muted { font: 500 13px/1.2 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.mini-box { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mini-box th, .mini-box td { padding: 8px 0 8px 12px; text-align: right; white-space: nowrap; }
.mini-box thead th { padding-top: 0; color: var(--muted); font: 400 var(--label-size)/1.2 var(--font-label); letter-spacing: var(--track); text-transform: var(--case); }
.mini-box tbody th { padding-left: 0; text-align: left; }
.mini-box tbody td { font: 400 19px/1.1 var(--font-mono); color: var(--ink-2); }
.mini-box tbody td.lead { color: var(--ink); font-weight: 600; }
.mini-box tbody tr > * { border-top: 1px solid var(--line); }
.unit { margin-left: 3px; font: 400 12px/1 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); color: var(--muted); }
.team-row { display: inline-flex; align-items: center; gap: 10px; font: var(--w-ui) 16px/1.2 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); color: var(--ink); }
.team-row .bar { width: 4px; height: 18px; border-radius: var(--tick); flex: none; }
.team-row .bar.light { background: var(--team-light); box-shadow: 0 0 0 1px var(--team-light-edge); }
.team-row .bar.dark { background: var(--team-dark); box-shadow: 0 0 0 1px var(--team-dark-edge); }
.strip { display: grid; gap: 6px; }
.strip-cap { display: flex; justify-content: space-between; color: var(--muted); font: 500 var(--label-size)/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.share-strip { display: flex; height: 28px; gap: 1px; }
.share-strip i { flex: 1; display: flex; flex-direction: column-reverse; gap: 1px; }
.share-strip i b { background: var(--team-light); }
.share-strip i s { flex: 1; background: var(--team-dark); text-decoration: none; }
.stages-line { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font: 500 13px/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); color: var(--muted); }
.stages-line .badge { font-size: inherit; }
.stages-line .stage-pips { margin-left: auto; }
.process-box { display: flex; flex-direction: column; gap: 10px; }
.process-row { display: flex; align-items: center; gap: 8px; }
.process-row .btn { margin-left: auto; }
.process-note { margin: 0; color: var(--muted); font-size: 13px; }
.empty-state p { margin: 4px auto 18px; max-width: 60ch; }

progress.bar { flex: none; width: min(220px, 40%); height: 6px; border: 0; border-radius: var(--tick); background: var(--surface-3); overflow: hidden; appearance: none; }
progress.bar::-webkit-progress-bar { background: var(--surface-3); }
progress.bar::-webkit-progress-value { background: var(--accent); }
progress.bar::-moz-progress-bar { background: var(--accent); }
progress.bar:indeterminate { background: linear-gradient(90deg, var(--surface-3) 0 35%, var(--accent) 35% 65%, var(--surface-3) 65%) 50% 0 / 300% 100%; animation: sweep 1.4s linear infinite; }
progress.bar:indeterminate::-webkit-progress-bar { background: transparent; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
.dropzone { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px 16px; background: var(--page); background: color-mix(in srgb, var(--page) 84%, transparent); }
.dropzone-box { position: relative; display: grid; justify-items: center; gap: 8px; width: min(640px, 100%); padding: 64px 24px; border: 2px dashed var(--accent); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-pop); text-align: center; }
.dropzone-box b { font: var(--w-head) 28px/1.15 var(--font-display); letter-spacing: var(--track-head); text-transform: var(--case); }
.dropzone-box span { color: var(--ink-2); }

.game-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 20px 20px; margin: 8px 0 24px; }
.game-id { min-width: 0; }
.game-id h1 { margin: 0; font-size: var(--h1); line-height: 1; letter-spacing: var(--track-head); text-transform: var(--case); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; color: var(--ink-2); font: 500 14px/1.4 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }

.boxscore-wrap { max-width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius); clip-path: var(--cut-s); border-top: 4px solid var(--line-strong); }
.boxscore { border-collapse: collapse; color: var(--ink); font-variant-numeric: tabular-nums; }
.boxscore th, .boxscore td { padding: 6px 22px; text-align: right; white-space: nowrap; }
.boxscore thead th { padding-top: 14px; padding-bottom: 4px; color: var(--muted); font: 400 var(--label-size)/1.2 var(--font-label); letter-spacing: var(--track); text-transform: var(--case); }
.boxscore tbody th { padding-left: 20px; text-align: left; }
.boxscore tbody tr:last-child > * { padding-bottom: 14px; }
.boxscore tbody tr > * { border-top: 1px solid var(--line); }
.boxscore tbody td { color: var(--ink-2); font: 400 24px/1.15 var(--font-mono); letter-spacing: -0.02em; }
.boxscore tbody td.lead { color: var(--ink); font-weight: 700; }
.boxscore .team-row { color: var(--ink); font-size: 18px; }
.boxscore .unit { color: var(--muted); }

.stage-row { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.pane { position: relative; overflow: hidden; clip-path: var(--cut-top); }
.pane-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-height: 56px; padding: 10px 16px 10px 20px; }
.pane-head h2 { margin: 0; font-size: 15px; letter-spacing: var(--track); text-transform: var(--case); }
.pane-head .right { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.video-wrap { position: relative; aspect-ratio: var(--video-ar, 16 / 9); max-width: 100%; background: var(--stage); }
.video-wrap video, .video-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-wrap video { object-fit: contain; }
.video-wrap canvas { pointer-events: none; }
.video-wrap .hit { position: absolute; inset: 0; cursor: pointer; z-index: 4; }
.view-pic { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.view-layer { position: absolute; inset: 0; transform-origin: 0 0; }
.steady { overflow: hidden; }
.steady > video { object-position: 0 -200vh; }
.video-failed {
  position: absolute; z-index: 5; inset: 12px 12px auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 10px 14px; border-radius: var(--radius-xs); background: var(--stage-chip); color: var(--stage-ink); font-size: 14px;
}
.video-failed b { font-weight: 600; }
.video-failed .btn, .video-failed .btn:hover { margin-left: auto; border-color: var(--stage-ink); color: var(--stage-ink); }
.video-failed .btn:focus-visible { outline-color: var(--stage-ink); }
.hold-cover { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 12px; pointer-events: none; }
.hold-cover[hidden] { display: none; }
.hold-panel {
  display: grid; justify-items: center; gap: 10px; width: min(280px, 100%); padding: 14px 16px 16px;
  border-radius: var(--radius-s); background: var(--stage-chip); color: var(--stage-ink); pointer-events: auto;
}
.hold-words { font: 600 15px/1.2 var(--font-mono); letter-spacing: var(--track-s); text-transform: var(--case); white-space: nowrap; }
.hold-bar { position: relative; width: 100%; height: 4px; overflow: hidden; border-radius: 2px; background: var(--stage-track); }
.hold-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--stage-ink); transition: width .25s linear; }
.hold-panel .btn, .hold-panel .btn:hover { border-color: var(--stage-ink); background: transparent; color: var(--stage-ink); }
.hold-panel .btn:focus-visible { outline-color: var(--stage-ink); }
@media (prefers-reduced-motion: reduce) {
  .hold-bar i { transition: none; }
}
.rink-wrap { position: relative; padding: 4px 16px 0; }
.rink-wrap canvas { display: block; width: 100%; height: auto; cursor: crosshair; }
.rink-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px 20px 16px; border-top: 1px solid var(--line); color: var(--ink-2); font: 500 12px/1.4 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.ramp { width: 110px; height: 8px; border-radius: var(--tick); }
.legend-lead { display: inline-flex; flex-wrap: wrap; align-items: center; gap: inherit; max-width: 100%; }
.legend-lead > .ramp { flex: 1 1 32px; max-width: 110px; }
.speed-scale .ramp { width: 140px; }
.rink-pane .pane-head > .info-title { flex: none; }
.speed-mark { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; box-sizing: border-box; }
.speed-mark.ours { background: var(--ink); }
.speed-mark.theirs { border: 2px solid var(--ink); }
.hatch-sw { width: 22px; height: 12px; border: 1px solid var(--line-strong); border-radius: var(--tick); background: repeating-linear-gradient(135deg, var(--hatch) 0 1px, var(--ice) 1px 6px); }
.now-share { color: var(--ink-2); font: 500 13px/1 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); font-variant-numeric: tabular-nums; white-space: nowrap; }
.now-share b { color: var(--ink); font-weight: 700; }
.live-speed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 10px 20px 12px; border-top: 1px solid var(--line); }
.ls-title { color: var(--muted); font: 500 12px/1.4 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.ls-teams { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
.ls-team { display: inline-flex; align-items: center; gap: 10px; }
.live-speed .team-row { gap: 8px; color: var(--ink-2); font-size: 14px; }
.live-speed .team-row .bar { height: 14px; }
.ls-val { white-space: nowrap; }
.ls-num { display: inline-block; min-width: 4ch; color: var(--ink); font: 600 18px/1 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: right; }
.ls-team.none .ls-num { color: var(--muted); }
.ls-team.none .unit { visibility: hidden; }
.viewer.full .live-speed { display: none; }

.toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--pill); background: transparent;
  color: var(--ink-2); font: 500 12px/1 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); white-space: nowrap; cursor: pointer; user-select: none;
}
.toggle:hover { border-color: var(--ink-2); color: var(--ink); }
.toggle .box { display: none; }
.toggle[aria-pressed="true"] { background: var(--chip-on); border-color: var(--chip-on-line); color: var(--chip-on-ink); }

.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.play { display: grid; place-items: center; flex: none; width: 46px; height: 44px; border: 0; border-radius: var(--play-radius); background: var(--accent); color: var(--on-accent); clip-path: var(--cut-s); cursor: pointer; }
.play:hover { background: var(--accent-hover); }
.play svg { width: 16px; height: 16px; }
.icon-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: transparent; color: var(--ink); cursor: pointer; }
.icon-btn:hover { border-color: var(--ink-2); }
.icon-btn svg { width: 14px; height: 14px; }
.clock { display: inline-flex; align-items: baseline; gap: 6px; min-width: 150px; padding: 0 8px; color: var(--clock); font: 700 26px/1 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.clock span { color: var(--muted); font-size: 15px; font-weight: 500; }
.kbd { padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: transparent; color: var(--ink-2); font: 500 var(--fs-11)/1.5 var(--font-mono); }

.timeline { padding: 18px 20px 6px; }
.timeline + .timeline { border-top: 1px solid var(--line); }
.timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 6px; }
.timeline-head h3 { margin: 0; font-size: 14px; letter-spacing: var(--track); text-transform: var(--case); }
.timeline-head .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; color: var(--ink-2); font: 500 12px/1.4 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.timeline svg { display: block; width: 100%; height: 132px; cursor: pointer; user-select: none; touch-action: none; }
.timeline svg.speed { height: 128px; }
.timeline svg text, svg.hist text, svg.speed text { font-family: var(--font-mono); }
.icon-btn.sm { width: 32px; height: 32px; }
.transport .btn { min-height: 40px; }
.viewer.full {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px;
  width: 100%; height: 100%; padding: 16px; overflow: hidden;
  background-color: var(--page); background-image: var(--page-grid); background-size: 48px 48px;
}
.viewer.cover { position: fixed; inset: 0; z-index: 40; height: auto; }
body:has(.viewer.cover) { overflow: hidden; }
.viewer.full .fs-open { display: none; }
.viewer.full .stage-row { margin: 0; min-height: 0; grid-template-columns: auto; justify-content: center; align-content: center; }
.viewer.full[data-view="video"] .rink-pane, .viewer.full[data-view="rink"] .video-pane { display: none; }
.viewer.full .pane { width: min-content; max-width: 100%; }
.viewer.full .now-share { white-space: normal; }
.viewer.full .pane-head { min-height: 48px; padding-block: 6px; }
.viewer.full .video-wrap { width: var(--video-w); max-width: none; }
.viewer.full .rink-wrap { padding: 4px 16px 8px; }
.viewer.full .rink-wrap canvas { width: var(--rink-w); }
.viewer.full .transport { border-bottom: 0; flex-wrap: nowrap; }
.viewer.full .clock { flex: none; white-space: nowrap; }
@media (max-width: 900px) {
  .viewer.full .clock span { display: none; }
}
@media (max-width: 640px) {
  .viewer.full { padding: 8px; gap: 8px; }
  .viewer.full .pane-head, .viewer.full .rink-legend { display: none; }
  .viewer.full .transport { flex-wrap: wrap; padding: 10px 12px; }
}
@media (max-height: 560px) {
  .viewer.full { gap: 8px; padding: 8px; }
  .viewer.full .pane-head, .viewer.full .rink-legend { display: none; }
  .viewer.full .transport { padding: 6px 12px; }
}
.linkish { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

.tabs-card { margin-top: 20px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.tabs { display: flex; gap: 28px; padding: 0 24px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { position: relative; padding: 18px 0 15px; border: 0; background: transparent; color: var(--ink-2); font: var(--w-ui) 15px/1 var(--font-ui); letter-spacing: var(--track); text-transform: var(--case); white-space: nowrap; cursor: pointer; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--nav-on); }
.tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.tab-body { padding: 20px 24px; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.filters .note { margin-left: auto; max-width: 64ch; color: var(--muted); font-size: 13px; }
.own-note { max-width: 64ch; margin: 0 0 14px; }
.ptable { width: 100%; border-collapse: separate; border-spacing: 0; }
.ptable th { position: sticky; top: var(--bar-h); z-index: 1; padding: 10px 10px; border-bottom: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font: 500 var(--label-size)/1.2 var(--font-label); letter-spacing: var(--track); text-transform: var(--case); text-align: left; white-space: nowrap; }
.ptable th.n, .ptable td.n { text-align: right; }
.ptable .sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ptable .sort:hover { color: var(--ink); }
.ptable th[aria-sort] { color: var(--nav-on); }
.ptable th .arrow { margin-left: 4px; color: var(--accent-text); font-size: 10px; }
.ptable td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ptable td.n { font: 400 14px/1.2 var(--font-mono); color: var(--ink-2); }
.ptable tbody tr { cursor: pointer; }
.ptable tbody tr:hover td { background: var(--surface-2); }
.ptable tbody tr.sel td { background: var(--accent-wash); }
.ptable tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ptable tbody tr:focus-visible { outline-offset: -2px; }
.who { display: flex; align-items: center; gap: 12px; }
.thumb { flex: none; width: 30px; height: 38px; border-radius: var(--radius-xs); object-fit: cover; background: var(--surface-3); }
.who b { font: var(--w-head) 16px/1.1 var(--font-mono); }
.who .sub { display: block; color: var(--muted); font: 400 12px/1.3 var(--font-body); }
.team-cell { display: inline-flex; align-items: center; gap: 8px; font: var(--w-ui) 14px/1.2 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); }
.bar-cell { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.bar-cell i { display: block; height: 6px; border-radius: var(--tick); }
.spark { display: block; width: 120px; height: 26px; }

.detail { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px; margin-bottom: 18px; padding: 20px; background: var(--surface-2); border: 0; box-shadow: inset 3px 0 0 var(--accent-line, transparent); }
:root[data-theme="dark"] .detail, :root[data-skin] .detail { --accent-line: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .detail { --accent-line: var(--accent); } }
.detail img { width: 132px; height: 168px; border-radius: var(--radius-s); object-fit: cover; background: var(--surface-3); }
.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.detail-head h3 { margin: 0; font-size: 32px; line-height: 1; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.detail-note { margin: 6px 0 0; color: var(--muted); font-size: 13px; max-width: 90ch; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0; }
.figures > div { padding: 4px 20px 4px 0; }
.figures > div + div { padding-left: 20px; border-left: 1px solid var(--line-strong); }
.figures b { display: block; font: 600 26px/1.15 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.figures span { color: var(--muted); font: 500 var(--label-size)/1.4 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.detail svg.speed { display: block; width: 100%; height: 90px; }

.teams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.team-card { padding: 20px; background: var(--surface-2); border-color: transparent; }
.team-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; font-size: 18px; letter-spacing: var(--track-s); text-transform: var(--case); }
.team-card .sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.team-card dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin: 0; }
.team-card dt { color: var(--ink-2); }
.team-card dd { margin: 0; text-align: right; font: 500 16px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }
.compare { display: grid; gap: 14px; }
.cmp-row { display: grid; grid-template-columns: 210px 110px minmax(0, 1fr) 110px; align-items: center; gap: 12px; }
.cmp-row .lab { color: var(--ink-2); }
.cmp-row .v { font: 500 14px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-row .v.l { text-align: right; }
.cmp-bar { position: relative; display: flex; gap: 2px; height: 14px; }
.cmp-bar i { display: block; border-radius: var(--tick); }
.cmp-bar i.l { background: var(--team-light); box-shadow: inset 0 0 0 1px var(--team-light-edge); }
.cmp-bar i.d { background: var(--team-dark); box-shadow: inset 0 0 0 1px var(--team-dark-edge); }
.cmp-bar .mid { position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 1.5px dashed var(--ink-2); }
.hist-legend { display: flex; gap: 14px; margin-bottom: 6px; color: var(--ink-2); font: 500 12px/1.4 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.hist { display: block; width: 100%; max-width: 760px; height: auto; aspect-ratio: 640 / 180; }

.prose { max-width: 76ch; }
.prose h2 { margin: 28px 0 8px; font-size: 18px; letter-spacing: var(--track-s); text-transform: var(--case); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose li + li { margin-top: 4px; }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }
.prose table { margin: 8px 0 16px; border-collapse: collapse; }
.prose th, .prose td { padding: 6px 14px 6px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; }
.prose img { max-width: 100%; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 32px; }
.figure { margin: 0; padding: 16px; }
.figure h3 { margin: 0 0 10px; font-size: 14px; letter-spacing: var(--track-s); text-transform: var(--case); }
.figure .paper { padding: 8px; border-radius: var(--radius-xs); background: var(--paper); }
.figure img { display: block; width: 100%; }
.figure p { margin: 10px 0 0; color: var(--muted); font-size: 13px; }

.tooltip { position: fixed; z-index: 50; max-width: 300px; padding: 8px 10px; border: 1px solid var(--tip-line); border-radius: var(--radius-xs); background: var(--tip); color: var(--tip-ink); box-shadow: var(--shadow-pop); font-size: 13px; line-height: 1.45; pointer-events: none; }
.tooltip b { font-weight: 600; }
.tooltip .row { display: flex; align-items: center; gap: 6px; }
.tooltip .sw { width: 9px; height: 9px; border-radius: var(--tick); flex: none; }
.tooltip .soft { opacity: .75; }

.info { display: inline-flex; align-self: center; vertical-align: -3px; flex: none; }
.info-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.info-title > :first-child { min-width: 0; }
.notes-about, .to-about { display: inline-flex; }
.notes-about:empty, .to-about:empty { display: none; }
.info-btn {
  position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0;
  border: 1.5px solid currentColor; border-radius: var(--pill); background: transparent; color: var(--muted); cursor: pointer;
}
.info > .info-btn > svg { display: block; flex: none; width: 12px; height: 12px; color: inherit; cursor: inherit; touch-action: manipulation; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--ink); }
@media (pointer: coarse) { .info-btn::before { content: ""; position: absolute; inset: -13px; } }
.info-note {
  position: fixed; inset: auto; z-index: 60; box-sizing: border-box; width: max-content; height: auto; margin: 0;
  max-width: min(22rem, calc(100vw - 32px)); max-height: 70vh; overflow: auto; overscroll-behavior: contain;
  padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface);
  box-shadow: var(--shadow-pop); color: var(--ink-2); font: 400 13px/1.45 var(--font-body); letter-spacing: normal;
  text-align: left; text-transform: none; white-space: normal;
}
.info-note[hidden] { display: none; }
.info > .info-note > p { margin: 0; max-width: none; color: inherit; font: inherit; }
.info > .info-note > p + p { margin-top: 6px; }
:root[data-mode="simple"] .info-btn { width: 22px; height: 22px; }
:root[data-mode="simple"] .info > .info-btn > svg { width: 14px; height: 14px; }
:root[data-mode="simple"] .info-note { font-size: 16px; }
.info-d > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.info-d > summary::-webkit-details-marker { display: none; }
.info-d > summary > .info-btn > svg { display: block; width: 12px; height: 12px; }
.info-d > summary:hover > .info-btn, .info-d[open] > summary > .info-btn { color: var(--ink); }
.info-d > .info-note { position: static; width: auto; max-width: min(36rem, 100%); max-height: none; margin: 8px 0 0; box-shadow: none; }

.nudge {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 16px;
  background: var(--surface); border-bottom: 1px solid var(--line-strong); color: var(--ink);
}
:where(.nudge) p { margin: 0; }
.nudge-time { font: 800 20px/1 var(--font-hero); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.nudge-lead { font: var(--w-head) 14px/1.3 var(--font-display); text-wrap: balance; }
.nudge-close {
  justify-self: end; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-s);
  background: none; color: var(--ink-2); font: 400 24px/1 var(--font-body); cursor: pointer;
}
.nudge-close:hover { background: var(--line); color: var(--ink); }
@media (pointer: coarse) { .nudge-close { width: 44px; height: 44px; margin: -8px -10px -8px 0; } }
@media (min-width: 761px) {
  .nudge { column-gap: 16px; padding-inline: max(40px, calc((100% - 1440px) / 2 + 40px)); }
  .nudge-lead { font-size: 15px; }
}
@media print { .nudge { display: none; } }

.team-facts { margin-top: 12px; font-size: 15px; }
.team-facts a { color: var(--ink-2); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.team-facts a:hover { color: var(--ink); text-decoration-color: var(--accent); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 18px 20px 12px; }
.section-head h2 { margin: 0; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.games-card { margin-bottom: 28px; }
.games-list { list-style: none; margin: 0; padding: 0; }
.game-row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1.5fr) 7.5rem minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 6px 20px;
  min-height: 68px; padding: 12px 20px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.game-row:hover { background: var(--surface-2); }
.game-row:hover .gr-name { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.game-row:focus-visible { outline-offset: -2px; }
.game-row > span { min-width: 0; }
.gr-date, .gr-event { display: grid; gap: 2px; font-size: 14px; }
.gr-date b { font: var(--w-ui) 15px/1.25 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); }
.gr-opp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.gr-vs { min-width: 0; overflow-wrap: break-word; }
.gr-at { color: var(--muted); font: 500 var(--label-size)/1 var(--font-label); letter-spacing: var(--track); text-transform: var(--case); }
.gr-vs .gr-at { margin-right: 3px; }
.gr-name { font: var(--w-head) 17px/1.25 var(--font-display); letter-spacing: var(--track-s); text-transform: var(--case); }
.gr-opp .muted { font-size: 13px; }
.gr-res { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink-2); font: 400 17px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gr-res b { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); color: var(--ink-2); font: 600 12px/1 var(--font-mono); }
.gr-res.win { color: var(--ink); }
.gr-res.win b { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.gr-res.muted { font: 400 13px/1.3 var(--font-body); }
.gr-ot { color: var(--muted); font-size: 12px; }
.gr-clips { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.gr-clips > span:last-child { display: grid; gap: 1px; }
.gr-clips b { font-weight: 600; }
.thumbs { display: flex; flex: none; }
.thumb-mini { width: 48px; height: 27px; border-radius: var(--radius-xs); background: var(--stage) center / cover no-repeat; box-shadow: 0 0 0 2px var(--surface); }
.thumb-mini + .thumb-mini { margin-left: -18px; }
.upcoming .game-row { min-height: 56px; }
.pad { padding: 0 20px 20px; }
.mono { font-family: var(--font-mono); }

.game-top { margin: 4px 0 24px; }
.scoreboard { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); align-items: center; gap: 20px 48px; }
.sb-teams { display: grid; }
.sb-team { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name score" "sub score"; align-items: center; column-gap: 24px; padding: 12px 0; border-top: 1px solid var(--line); }
.sb-team:first-child { border-top: 0; }
.sb-name { grid-area: name; display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink-2); font: 800 clamp(26px, 3.2vw, 44px)/.95 var(--font-hero); letter-spacing: .01em; text-transform: uppercase; }
.sb-name .bar { width: 6px; height: 1em; border-radius: var(--tick); flex: none; }
.sb-name .bar.light { background: var(--team-light); box-shadow: 0 0 0 1px var(--team-light-edge); }
.sb-name .bar.dark { background: var(--team-dark); box-shadow: 0 0 0 1px var(--team-dark-edge); }
.sb-sub { grid-area: sub; margin: 4px 0 0 18px; color: var(--muted); font: 500 13px/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.sb-score { grid-area: score; color: var(--ink-2); font: 800 clamp(48px, 6vw, 80px)/.85 var(--font-hero); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sb-team.won .sb-name, .sb-team.won .sb-score { color: var(--ink); }
.sb-facts { display: grid; gap: 6px; align-content: center; color: var(--ink-2); font-size: 15px; }
.sb-state { color: var(--ink); font: 800 24px/1 var(--font-hero); letter-spacing: .03em; text-transform: uppercase; }
.sb-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.sb-links a { color: var(--ink-2); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.sb-links a:hover { color: var(--ink); text-decoration-color: var(--accent); }
.box-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.tl-card h2 { margin: 0 0 10px; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.tl-card { margin-top: 20px; padding: 18px 20px 14px; }
.tl-card .timeline-head { margin-bottom: 8px; }
.tl-card .timeline-head h2 { margin: 0; }
.tl-card .legend { flex-wrap: wrap; gap: 4px 14px; }
.game-tl { display: block; width: 100%; height: 214px; user-select: none; }
.game-tl .tl-hit { cursor: pointer; }
.game-tl .tl-hit:focus { outline: none; }
.game-tl .tl-hit:focus-visible > .tl-target { stroke: var(--accent-text); stroke-width: 2px; }
.game-tl .pulse { animation: pulse 1.2s ease-in-out infinite; }
.clip-key { display: inline-block; width: 16px; height: 10px; border: 1.5px solid var(--ink-2); border-radius: 2px; background: var(--surface); }
.clip-key.st-analysed { border-color: var(--accent); background: radial-gradient(circle at 3.5px 50%, var(--surface) 0 1.6px, transparent 2px), var(--accent); }
.clip-key.st-running { background: repeating-linear-gradient(135deg, var(--ink-2) 0 1.5px, var(--surface) 1.5px 4px); }
.clip-key.st-queued { border-style: dashed; }
.tip-img { display: block; width: 200px; max-width: 100%; aspect-ratio: 16 / 9; margin-bottom: 6px; border-radius: var(--radius-xs); object-fit: cover; background: var(--stage); }
.tip-frame { display: block; width: 160px; aspect-ratio: 16 / 9; margin-bottom: 6px; border-radius: var(--radius-xs); object-fit: cover; background: var(--stage) no-repeat; }
.clips-sec { margin-top: 28px; }
.clips-sec .section-head { padding: 0 0 14px; }
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px 24px; }
.clip-card { display: flex; flex-direction: column; gap: 12px; scroll-margin: 96px; }
.clip-card.sel .poster { box-shadow: 0 0 0 3px var(--accent); }
.poster.frames { background-size: cover; background-position: center; }
.scrub { position: absolute; left: 12px; right: 12px; bottom: 6px; z-index: 4; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.poster.frames:hover .scrub { opacity: 1; }
.scrub i { flex: 1; height: 3px; border-radius: 1px; background: rgba(255, 255, 255, .45); }
.scrub i.on { background: #ffffff; }
.clip-body { display: flex; flex: 1; flex-direction: column; gap: 8px; }
.clip-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.clip-title h4 { margin: 0; font: 600 18px/1.2 var(--font-mono); }
.clip-where { margin: 0; color: var(--ink-2); font-size: 14px; }
.clip-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.clip-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding-top: 4px; }
.crumb-line { display: inline-block; margin-bottom: 6px; color: var(--ink-2); font: 500 12px/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); text-decoration: none; }
.crumb-line:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.game-tabs { display: flex; gap: 32px; margin: 0 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; scroll-margin-top: calc(var(--bar-h) + 8px); }
.game-tabs::-webkit-scrollbar { display: none; }
.game-tabs a { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--ink-2); font: var(--w-ui) 16px/1 var(--font-ui); letter-spacing: var(--track); text-transform: var(--case); white-space: nowrap; text-decoration: none; }
.game-tabs a:hover { color: var(--ink); }
.game-tabs a[aria-selected="true"] { color: var(--nav-on); }
.game-tabs a[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--accent); }
.game-tabs a:focus-visible { outline-offset: -3px; }
.game-tabs .tab-count { margin: 0; background: var(--accent); color: var(--on-accent); letter-spacing: 0; text-transform: none; }
.pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 20px; }
.pick-label { color: var(--ink-2); font: var(--w-ui) 14px/1 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); }
.pick-chips { gap: 6px; }
.pick-chip { justify-content: center; min-width: 52px; font: 600 15px/1 var(--font-mono); letter-spacing: 0; }
.game-panel > :first-child { margin-top: 0; }
.watch-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }
.watch-none { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 18px 20px; }
.watch-none p { flex: 1 1 22rem; margin: 0; color: var(--ink-2); }
.clips-none { margin: 4px 0 0; }

:root[data-theme="dark"] .game-card.card, :root[data-skin] .game-card.card { --gc-bg: var(--surface); --gc-pad: 18px 20px 20px; }
:root[data-theme="dark"] .poster, :root[data-skin] .poster { border-radius: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .game-card.card { --gc-bg: var(--surface); --gc-pad: 18px 20px 20px; }
}

@media (max-width: 1180px) {
  .stage-row { grid-template-columns: minmax(0, 1fr); }
  .game-head { grid-template-columns: 44px minmax(0, 1fr); }
  .boxscore-wrap { grid-column: 1 / -1; justify-self: stretch; }
  .teams-grid, .two-col { grid-template-columns: minmax(0, 1fr); }
  .table-scroll { overflow-x: auto; }
  .scoreboard, .box-row { grid-template-columns: minmax(0, 1fr); }
  .game-row { grid-template-columns: 7rem minmax(min-content, 1fr) 7rem minmax(0, 1fr); container-type: inline-size; }
  .game-row .gr-opp { max-width: calc(100cqi - 19rem - 60px); }
  .game-row .gr-clips { grid-column: 2 / -1; }
  .game-row .gr-clips:empty { display: none; }
}
@media (max-width: 920px) {
  .topbar { gap: 24px; padding: 0 20px; }
  .nav { gap: 22px; }
}
@media (min-width: 761px) and (max-width: 920px) {
  .brand span { display: none; }
}
@media (max-width: 760px) {
  :root { --bar-h: 0px; }
  .topbar { position: relative; flex-wrap: wrap; height: auto; gap: 0 16px; padding: 10px 16px 0; }
  .topbar::after { content: ""; order: 2; flex-basis: 100%; }
  .nav { order: 3; flex: 1 1 0; min-width: 0; height: 44px; gap: 24px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a.active::after { bottom: 0; }
  .nav a:focus-visible { outline-offset: -2px; }
  .topbar-right { gap: 6px; }
  .page { padding: 16px 16px 40px; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .page-head h1 { font-size: min(calc(var(--h1) * 1.25), 12vw); overflow-wrap: anywhere; }
  .clock { min-width: 0; }
  .detail { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  .figures > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .cmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
  .cmp-row .lab { grid-column: 1 / -1; }
  .filters .note { margin-left: 0; }
  .proc.wide { grid-template-columns: minmax(0, 1fr); }
  .section-head { padding: 16px 16px 10px; }
  .game-row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; }
  .game-row .gr-date { flex-basis: 100%; display: flex; gap: 8px; }
  .game-row .gr-opp { flex: 1 1 0; min-width: auto; max-width: 100%; }
  .game-row .gr-res { margin-left: auto; }
  .game-row .gr-event, .game-row .gr-clips { flex-basis: 100%; }
  .gr-event { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 13px; }
  .sb-team { column-gap: 12px; }
  .sb-sub { margin-left: 0; }
  .sb-name { font-size: 26px; }
  .sb-score { font-size: 54px; }
  .tl-card { padding-inline: 16px; }
  .game-tabs { gap: 14px; margin-inline: -16px; padding-inline: 16px; }
  .game-tabs a { font-size: 15px; }
  .watch-none { padding: 16px; }
  .now-share { flex-basis: 100%; white-space: normal; line-height: 1.35; }
  .live-speed { padding: 10px 12px 12px 16px; }
  .boxscore th, .boxscore td { padding-inline: 12px; }
  .boxscore tbody th, .boxscore thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  .boxscore-wrap .boxscore tbody th { padding-left: 14px; }
  .boxscore .team-row, .mini-box .team-row { max-width: 9rem; font-size: 15px; white-space: normal; }
  .mini-box thead th { white-space: normal; }
  .boxscore tbody td { font-size: 20px; }
}
@media (max-width: 480px) {
  .brand span { display: none; }
}
@property --tabs-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tabs-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes tabs-cue {
  from { --tabs-l: 0px; --tabs-r: 40px; }
  12% { --tabs-l: 40px; }
  88% { --tabs-r: 40px; }
  to { --tabs-l: 40px; --tabs-r: 0px; }
}
@supports (animation-timeline: scroll(self inline)) {
  @media (max-width: 760px) {
    .game-tabs {
      -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--tabs-l), #000 calc(100% - var(--tabs-r)), transparent);
      mask-image: linear-gradient(to right, transparent, #000 var(--tabs-l), #000 calc(100% - var(--tabs-r)), transparent);
      animation: tabs-cue linear both; animation-timeline: scroll(self inline);
    }
  }
}
@media (max-width: 380px) {
  .game-tabs { gap: 12px; }
  .game-tabs a { font-size: 14px; }
}
@media (pointer: coarse) {
  .toggle, .btn, .seg button, .transport .btn { min-height: 44px; }
  .icon-btn, .icon-btn.sm, .play { width: 44px; height: 44px; }
  .tabs button { padding-block: 18px 16px; }
  .account summary, .account-menu a { min-height: 44px; }
  .brand { min-width: 44px; min-height: 44px; }
  .crumb-line { display: inline-flex; align-items: center; min-height: 44px; }
  .crumb-line { margin-bottom: 0; }
  .ptable .sort { min-height: 44px; margin-block: -10px; vertical-align: middle; }
  .sb-links { row-gap: 0; }
  .sb-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .team-facts a { padding-block: 13px; margin-block: -13px; }
}
.game-id h1 .vs { color: var(--muted); font-weight: 500; }
.game-id h1.long { font-size: calc(var(--h1) * .74); line-height: 1.08; }

.picker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-2); font-size: 13px; }
.picker label { color: var(--muted); font: 500 var(--label-size)/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.select { min-height: 32px; max-width: 100%; padding: 0 6px; border: 1px solid var(--field-line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: var(--w-ui) 13px/1 var(--font-ui); cursor: pointer; }
.select:hover { border-color: var(--ink-2); }
.select:disabled { opacity: .6; cursor: progress; }
.picker-msg { color: var(--muted); font-size: 12px; }
.picker-msg:empty { display: none; }
.period-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.period-check .badge { white-space: normal; }
.btn.sm { min-height: 30px; padding: 0 10px; font-size: 12px; }
.period-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; color: var(--ink-2); font-size: 14px; }
.game-head > .head-foot { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: -8px; }
.head-foot:not(:has(> :not([hidden]))) { display: none; }
.head-foot > .period-row { margin-top: 0; }
.clip-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.clip-nav .btn { gap: 4px; }
.clip-nav-at { color: var(--muted); font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.players-card { margin-top: 28px; padding: 18px 20px 14px; }
.players-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 8px; }
.players-head h2 { margin: 0; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.players-head .seg { max-width: 100%; }
.players-head .seg button { min-width: 0; padding-block: 6px; line-height: 1.25; white-space: normal; text-align: center; }
.ptable tbody th { position: static; z-index: auto; }
.gp-table tbody tr.grp, .gp-table tbody tr.grp:hover th { cursor: default; background: transparent; }
.gp-table tbody tr.grp th { padding: 18px 10px 6px; border-bottom: 1px solid var(--line-strong); }
.gp-table .who a { color: inherit; text-decoration: none; }
.gp-table tbody tr.closed { cursor: default; }
.gp-table tbody tr.closed:hover td { background: transparent; }
.pace-cell { display: inline-flex; align-items: center; gap: 8px; }
.pace-mark { display: block; flex: none; }
.pace-mark .track { stroke: var(--grid); stroke-width: 1; }
.pace-mark .tick { stroke: var(--muted); stroke-width: 1.5; }
.pace-mark .range { stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.pace-mark .dot { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.pace-mark .dot.light { fill: var(--team-light); stroke: var(--team-light-ring); }
.pace-mark .dot.dark { fill: var(--team-dark); stroke: var(--team-dark-ring); }
.empty-note { margin: 8px 0; color: var(--ink-2); }

.player-top { margin: 4px 0 18px; }
.player-id { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; }
.player-id h1 { margin: 0; font: 700 calc(var(--h1) * 2)/.9 var(--font-mono); letter-spacing: -0.04em; }
.player-id .badge { margin: 0 0 10px; white-space: normal; }
.player-role { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--ink-2); font: var(--w-ui) 18px/1.2 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); }
.player-role .team-row { color: var(--ink); font-size: 18px; }
.player-role .sep { color: var(--muted); }
.player-figs { margin: 6px 0 24px; }
.player-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.player-row.solo { grid-template-columns: minmax(0, 1fr); }
.heat-card, .pace-card { min-width: 0; padding: 18px 20px 16px; }
.heat-card h2, .pace-card h2 { margin: 0; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.heat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 10px; color: var(--ink-2); font: 500 12px/1.4 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.heat-head h2 { margin-right: auto; }
.heat-sw { width: 34px; height: 12px; border-radius: var(--tick);
  background: linear-gradient(90deg, transparent, var(--heat-1) 28%, var(--heat-2) 50%, var(--heat-3) 66%, var(--heat-4) 82%, var(--heat-5)); }
.ends-row { display: flex; justify-content: space-between; padding: 0 4px 4px; color: var(--muted); font: 500 var(--label-size)/1.3 var(--font-label); letter-spacing: var(--track); text-transform: var(--case); }
.heat-wrap canvas { display: block; width: 100%; height: auto; }
.zones { display: grid; margin: 10px 0 12px; }
.zone { display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; padding: 8px 4px 0; text-align: center; }
.zone.neutral { border-inline: 3px solid var(--rink-ink); }
.zone b { font: 600 26px/1.1 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.zone span { color: var(--ink-2); font: 500 var(--label-size)/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.zone small { color: var(--muted); font-size: 12px; }
.pace-big { display: flex; align-items: baseline; gap: 14px; margin: 12px 0 4px; }
.pace-big b { font: 600 48px/1 var(--font-mono); letter-spacing: -0.03em; }
.pace-big span { display: grid; gap: 2px; color: var(--ink-2); font-size: 15px; }
.pace-big small { color: var(--muted); font-size: 13px; }
.pace-facts { max-width: 62ch; margin: 8px 0 10px; color: var(--ink-2); font-size: 14px; }
.strip-cap { margin: 14px 0 0; color: var(--muted); font: 500 var(--label-size)/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.pace-strip { display: block; width: 100%; height: 120px; margin: 4px 0 8px; overflow: visible; }
.pace-strip text { font-family: var(--font-mono); }
.pace-strip .hit { cursor: pointer; }
.pace-strip a:focus { outline: none; }
.pace-strip a:focus-visible .hit { stroke: var(--accent-text); stroke-width: 2px; stroke-dasharray: 3 2; }
.clip-period { display: grid; justify-items: start; gap: 6px; }
.warn-text { color: var(--warn); }
@media (pointer: coarse) {
  .select, .btn.sm { min-height: 44px; }
}
@media (max-width: 1180px) {
  .player-row { grid-template-columns: minmax(0, 1fr); }
  .game-head > .head-foot { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 760px) {
  .player-id h1 { font-size: calc(var(--h1) * 1.4); }
  .players-card, .heat-card, .pace-card { padding-inline: 16px; }
  .zone b { font-size: 20px; }
  .pace-big b { font-size: 38px; }
}
@media (max-width: 640px) {
  .gp-table tr > :nth-child(3), .gp-table tr > :nth-child(4), .gp-table .gp-area { display: none; }
  .gp-table .pace-mark { display: none; }
  .gp-table th, .gp-table td { padding-inline: 4px; }
  .gp-table thead th { white-space: normal; vertical-align: bottom; font-size: 11px; }
  .gp-table td.n { font-size: 13px; }
  .gp-table .who b { font-size: 15px; }
}
@media (max-width: 560px) {
  .zones { grid-template-columns: 0 repeat(3, minmax(0, 1fr)) 0 !important; }
}

.sc-map-link { display: block; border-radius: var(--radius-xs); }
.sc-map-link:focus-visible { outline-offset: 3px; }
.sc-zones { margin: 8px 0 0; }
.sc-zones .zone { padding-top: 6px; }
.sc-zones .zone b { font-size: 20px; }
.sc-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; margin: 16px 0 0; }
.sc-figs > div:nth-child(3) { border-left: 0; padding-left: 0; }
.sc-figs b { font-size: 22px; }
.panel-analytics, .yg { display: grid; gap: 24px; }
.panel-analytics > *, .yg > * { min-width: 0; margin: 0; }
.yg-card { padding: 18px 20px 20px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.yg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.yg-head h2, .yg-plain h2 { margin: 0; font-size: var(--fs-18); letter-spacing: var(--track-s); text-transform: var(--case); }
.yg-act { display: flex; flex-wrap: wrap; gap: 8px; }
.yg-card h3 { margin: 0 0 4px; font-size: 15px; letter-spacing: var(--track-s); text-transform: var(--case); }
.yg-card h3 + .muted { margin: 0 0 10px; }
.yg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.yg-table th, .yg-table td { padding: 8px 10px; border-top: 1px solid var(--line); text-align: left; white-space: nowrap; }
.yg-table thead th { padding-top: 0; border-top: 0; color: var(--muted); font: 500 var(--label-size)/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.yg-table .n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.yg-table td small { color: var(--muted); font: inherit; font-size: 12px; }
.yg-table tbody th { font-weight: 500; white-space: normal; }
.yg-table tbody th a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.yg-table tbody th a:hover { text-decoration-color: var(--accent); }
.yg-table tbody th a span { color: var(--ink-2); }
.yg-table tr.this th { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
.yg-this { font-weight: var(--w-head); }
.yg-games-note { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.yg-games-note .spinner { width: 14px; height: 14px; margin: 0; }
.yg-hint { margin: 0; color: var(--ink-2); }
.yg-plain { display: grid; gap: 14px; }
.yg-plain h3 { margin: 8px 0 0; }
.yg-plain-games { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.yg-plain-games a { display: inline-block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }
.yg-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; color: var(--ink-2); }
.yg-empty p { flex: 1 1 22rem; margin: 0; }
.yg-empty .spinner { width: 16px; height: 16px; margin-right: 0; }
#watch-title:focus, #clips-title:focus, #players-title:focus { outline: none; }
.yp-as { display: grid; justify-items: start; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.yp-as-row { display: flex; gap: 8px; }
.yp-as .field-hint { max-width: 44rem; }
.yp-as .select { min-width: 6.5rem; min-height: 36px; font-size: 14px; }
.view-as {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  width: calc(100% - 80px); max-width: 1360px; margin: 24px auto -12px; padding: 12px 16px 12px 18px;
  border: 1px solid var(--line-strong); border-left: 4px solid var(--warn); border-radius: var(--radius-s); background: var(--warn-wash);
}
.view-as:focus { outline: none; }
.view-as-text { flex: 1 1 24rem; min-width: 0; }
.view-as h2 { margin: 0; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.view-as p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.view-as p span { color: var(--ink); }
.btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.btn[aria-disabled="true"]:hover { border-color: var(--line-strong); }
.btn.primary[aria-disabled="true"]:hover { background: var(--accent); border-color: var(--accent); }
.pclips .clip-periods { gap: 36px; }
.pclip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.pclip-grid:has(.stat-share) > .pclip { align-self: start; }
.pclip { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 16px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.pclip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pclip-head h4 { margin: 0; font: 600 16px/1.2 var(--font-mono); }
.pclip-when { color: var(--muted); font: 500 13px/1.2 var(--font-mono); white-space: nowrap; }
.pclip .sc-zones { margin: 0; }
.pclip .sc-zones .zone b { font-size: 16px; }
.pclip .sc-figs { gap: 10px 0; margin: 2px 0 0; }
.pclip .sc-figs b { font-size: 18px; }
.pclip-pace { margin: 0; color: var(--ink-2); font-size: 13px; }
.pclip-pace b { color: var(--ink); font: 600 14px/1 var(--font-mono); }
.pclip-none { margin: 0; color: var(--ink-2); }
.pclip-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.pclips-note { margin: 24px 0 0; }
.stat-share { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-2); }
.stat-share h3 { margin: 0; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.stat-share h3:focus { outline: none; }
.ss-preview { max-width: 22rem; }
.ss-preview .stat-card { padding: 12px 14px 14px; }
.ss-preview .sc-title { font-size: var(--fs-16); }
.ss-preview .sc-sub { font-size: 13px; }
.ss-preview .sc-zones { grid-template-columns: 0 repeat(3, minmax(0, 1fr)) 0 !important; }
.ss-preview .sc-zones .zone b { font-size: 15px; }
.ss-preview .sc-figs { gap: 10px 0; margin-top: 10px; }
.ss-preview .sc-figs > div { padding-right: 10px; }
.ss-preview .sc-figs > div + div { padding-left: 10px; }
.ss-preview .sc-figs > div:nth-child(3) { padding-left: 0; }
.ss-preview .sc-figs b { font-size: 16px; }
.ss-to { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-to legend { margin-bottom: 8px; padding: 0; }
.ss-choices { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.ss-choice {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); background: var(--surface); cursor: pointer; font: var(--w-ui) 14px/1.2 var(--font-ui);
  letter-spacing: var(--track-s); text-transform: var(--case);
}
.ss-choice:hover { border-color: var(--ink-2); }
.ss-choice:has(input:checked) { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.ss-choice input { margin: 0; accent-color: var(--accent); }
.ss-one { margin: 0; font-weight: 600; }
.ss-msg { display: grid; gap: 6px; }
.ss-msg .counter { justify-self: end; }
.ss-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.ss-foot .form-error { flex: 1 1 100%; }
.share-host-note .share-done, .yg-note .share-done { margin-top: 12px; }
.heat-card .stat-share { margin: 4px 0 18px; }
.heat-card .share-host-note .share-done { margin: 0 0 12px; }
.stat-card { padding: 18px 20px 20px; }
.post-grid > .stat-card { max-width: 44rem; }
.sc-title { margin: 0; font: var(--w-head) var(--fs-18)/1.25 var(--font-display); letter-spacing: var(--track-s); text-transform: var(--case); }
.sc-sub { margin: 4px 0 10px; color: var(--ink-2); font-size: 14px; }
.sc-sub:empty { display: none; }
.sc-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sc-thumb { display: block; overflow: hidden; border-radius: var(--radius-xs); background: var(--rink-out); }
.sc-thumb canvas { display: block; width: 100%; }
.sc-thumb.none { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--surface-2); color: var(--muted); font: 600 14px/1 var(--font-mono); }
.msg-card .msg-clip-line b { color: var(--ink); font-weight: 600; }
.msg-card .sc-line { flex-basis: 100%; }
@media (max-width: 760px) {
  .yg-card, .stat-card { padding: 16px 16px 18px; }
  .pclip { padding-inline: 14px; }
  .stat-share { padding: 14px; }
  .view-as { width: calc(100% - 32px); margin: 12px auto 0; padding: 12px 14px; }
}
@media (pointer: coarse) {
  .ss-choice { min-height: 44px; }
  .yp-as .select { min-height: 44px; }
}


:root:not([data-hosted="1"]) .nav [data-site] { display: none; }
.nav .count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font: 700 11px/1 var(--font-mono); letter-spacing: 0;
}
:root[data-mode="simple"] .topbar .nav .count { min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; }
.nav .count.rose { animation: count-rose 180ms ease-out; }
@keyframes count-rose { 45% { transform: scale(1.22); } }
@media (prefers-reduced-motion: reduce) { .nav .count.rose { animation: none; } }
@media (max-width: 480px) {
  :root[data-hosted="1"] .topbar { column-gap: 10px; }
  :root[data-hosted="1"] .nav a { font-size: calc(14px - 2px * var(--hud)); letter-spacing: var(--track-s); }
  .nav .count { min-width: 16px; height: 16px; margin-left: 3px; padding: 0 4px; }
  .account summary { gap: 4px; padding: 0 6px 0 8px; font-size: calc(13px - 1px * var(--hud)); }
}
@media (max-width: 360px) {
  :root[data-hosted="1"] .nav a { font-size: calc(13px - 2px * var(--hud)); }
}

.field { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: start; gap: 6px 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.field:first-child { border-top: 0; }
.field-label { color: var(--ink); font: var(--w-ui) 14px/1.3 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); }
.field > .field-label, .field > .info-title { padding-top: 7px; }
.field > .info-title { align-self: start; }
.field-main { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.field-main > .text-input, .field-main > .to-groups { justify-self: stretch; }
.field-hint { margin: 0; color: var(--muted); font-size: 13px; }
.field-error, .form-error { margin: 0; color: var(--bad); font-size: 14px; font-weight: 600; }
.form-error:empty { display: none; }
.text-input {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--field-line); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink); font: 400 15px/1.45 var(--font-body);
}
textarea.text-input { min-height: 72px; resize: vertical; }
.text-input:hover { border-color: var(--ink-2); }
.text-input::placeholder { color: var(--muted); opacity: 1; }
.text-input[aria-invalid="true"] { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.counter { color: var(--muted); font: 500 12px/1.4 var(--font-mono); white-space: nowrap; }
.counter.over { color: var(--bad); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.toggle.nobody { border-style: dashed; }
.btn[aria-pressed="true"] { background: var(--chip-on); border-color: var(--chip-on-line); color: var(--chip-on-ink); }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn.danger:hover { background: var(--bad-wash); }
.btn.danger.quiet { border-color: var(--line-strong); }
.btn.danger.quiet:hover { border-color: var(--bad); }
.confirm .btn.danger { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.confirm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px;
  border-radius: var(--radius-s); background: var(--bad-wash); color: var(--ink);
}
.confirm p { flex: 1 1 16rem; margin: 0; }
.badge.ask { color: var(--ink); background: var(--accent-wash); border-color: var(--accent); }
.share-done, .flash {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 16px 0 0; padding: 10px 14px;
  border-radius: var(--radius-s); background: var(--good-wash); color: var(--ink);
}
.share-done a { color: var(--ink); font-weight: 600; text-decoration-color: var(--ink-2); text-underline-offset: 3px; }
.share-done a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.flash { margin: -20px 0 20px; }
.when { color: var(--muted); font-size: 13px; white-space: nowrap; }

.viewer.full .share-open, .viewer.full .mark-tray { display: none; }
.video-pane { scroll-margin-top: calc(var(--bar-h) + 16px); }
.video-wrap canvas.marks { z-index: 3; }
.video-wrap.drawing canvas.marks { z-index: 5; pointer-events: auto; cursor: crosshair; touch-action: none; }
.watch-marks { position: absolute; inset: 0; pointer-events: none; }
.watch-marks canvas.marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.watch-stage.drawing canvas.marks { pointer-events: auto; cursor: crosshair; touch-action: none; }
.watch-marks .mark-text { pointer-events: auto; }
:is(.video-wrap, .watch-stage) .mark-text {
  position: absolute; z-index: 6; width: min(15rem, 70%); min-height: 36px; padding: 0 10px; transform: translate(-50%, -50%);
  border: 2px solid var(--video-accent); border-radius: var(--radius-xs); background: var(--stage-chip); color: var(--stage-ink);
  font: 700 16px/1.2 var(--font-display);
}
:is(.video-wrap, .watch-stage) .mark-text::placeholder { color: var(--stage-ink); opacity: .7; }
.mark-tray { display: grid; gap: 6px; padding: 10px 16px 12px 20px; border-top: 1px solid var(--line); container-type: inline-size; }
.tray-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tray-tools, .tray-swatches, .tray-freeze, .tray-edit { display: flex; align-items: center; gap: 4px; }
.tray-edit { margin-left: auto; }
.tray-freeze { gap: 8px; }
.mark-tray .tool {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); background: transparent; color: var(--ink-2); cursor: pointer;
  font: var(--w-ui) 12px/1 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); white-space: nowrap;
}
.mark-tray .tool svg { width: 15px; height: 15px; flex: none; }
.mark-tray .tool:hover { border-color: var(--ink-2); color: var(--ink); }
.mark-tray .tool[aria-pressed="true"] { background: var(--chip-on); border-color: var(--chip-on-line); color: var(--chip-on-ink); }
@container (max-width: 760px) {
  .mark-tray .tool { padding: 0 9px; }
  .mark-tray .tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.swatch { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.swatch i { width: 16px; height: 16px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 3px var(--sw-halo); }
.swatch.red { --sw: var(--mark-red); --sw-halo: var(--mark-halo); }
.swatch.green { --sw: var(--mark-green); --sw-halo: var(--mark-halo); }
.swatch.black { --sw: var(--mark-black); --sw-halo: var(--mark-halo-ink); }
.swatch.white { --sw: var(--mark-white); --sw-halo: var(--mark-halo); }
.swatch.black i { box-shadow: 0 0 0 3px var(--sw-halo), 0 0 0 4px var(--line-strong); }
.swatch:hover { background: var(--surface-2); }
.swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent-text); }
.tray-msg { margin: 0; color: var(--ink-2); font-size: 13px; }
.tray-msg:empty { display: none; }

.composer { margin-top: 20px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.composer-head h2:focus { outline: none; }
.composer-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 4px 20px; }
.composer-head h2 { margin: 0 auto 0 0; font-size: var(--fs-18); letter-spacing: var(--track-s); text-transform: var(--case); }
.composer-body { padding: 0 20px 4px; }
.share-moment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.share-range { color: var(--ink); font: 600 18px/1.2 var(--font-mono); letter-spacing: -0.01em; white-space: nowrap; }
.share-len { color: var(--muted); font: 500 13px/1.2 var(--font-mono); }
.share-moment-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-x {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 2px 0 10px; border: 1px solid var(--line-strong);
  border-radius: var(--pill); color: var(--ink); font: 500 13px/1 var(--font-ui);
}
.chip-x.out { border-style: dashed; border-color: var(--bad); }
.chip-x > button {
  display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--pill);
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.chip-x > button:hover { background: var(--surface-2); color: var(--ink); }
.chip-x > button svg { width: 12px; height: 12px; }
.chip-x > .chip-go { display: inline-flex; gap: 5px; padding: 0 6px; color: var(--ink); font: inherit; white-space: nowrap; }
.mark-dot { width: 11px; height: 11px; flex: none; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px var(--sw-halo); }
.mark-dot.red { --sw: var(--mark-red); --sw-halo: var(--mark-halo); }
.mark-dot.green { --sw: var(--mark-green); --sw-halo: var(--mark-halo); }
.mark-dot.black { --sw: var(--mark-black); --sw-halo: var(--mark-halo-ink); box-shadow: 0 0 0 2px var(--sw-halo), 0 0 0 3px var(--line-strong); }
.mark-dot.white { --sw: var(--mark-white); --sw-halo: var(--mark-halo); }
.to-groups { display: grid; gap: 10px; }
.to-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: start; gap: 4px 12px; }
.to-label { padding-top: 8px; color: var(--muted); font: 500 var(--label-size)/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.review-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.review-row .field-hint { flex: 1 1 18rem; }
.composer-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 20px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.composer-foot .form-error, .composer-foot .confirm { grid-column: 1 / -1; }
.ground-rule { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: 13px; }
.ground-rule svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
.ground-rule a { color: inherit; font-weight: 600; text-decoration-color: var(--ink-2); text-underline-offset: 3px; }
.ground-rule a:hover { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.composer-btns { display: flex; gap: 8px; }
.viewer + .share-done { margin-top: 16px; }

.notes-card { margin-top: 20px; }
.note-list { list-style: none; margin: 0; padding: 0 0 4px; }
.note { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; gap: 6px 16px; padding: 12px 20px; border-top: 1px solid var(--line); }
.note-range {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); background: transparent; color: var(--ink); font: 600 13px/1 var(--font-mono); cursor: pointer;
}
.note-range:hover { border-color: var(--ink-2); }
.note-main { display: grid; gap: 3px; min-width: 0; color: inherit; text-decoration: none; }
.note-main:hover .note-who b { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.note-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.note-who b { font-weight: 600; }
.note-body { color: var(--ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--muted); font-size: 13px; }
.note-empty { padding: 2px 20px 16px; color: var(--ink-2); }
.notes-remove { padding: 12px 20px 16px; border-top: 1px solid var(--line); }
.notes-status { margin: 0; padding: 0 20px; color: var(--ink-2); font-size: 14px; }
.notes-status:not(:empty) { padding-bottom: 16px; }
.notes-status.bad { color: var(--bad); font-weight: 600; }

.moment { overflow: hidden; clip-path: var(--cut-top); }
.moment-stage video { pointer-events: none; }
.stage-chip {
  position: absolute; z-index: 4; left: 12px; bottom: 12px; padding: 3px 8px; border-radius: var(--radius-xs);
  background: var(--stage-chip); color: var(--stage-ink); font: 600 12px/1 var(--font-mono); letter-spacing: var(--track-s); text-transform: var(--case);
}
.moment-missing { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; padding: 16px; text-align: center; color: var(--stage-ink); }
.moment-missing b { font: var(--w-head) 18px/1.3 var(--font-display); text-transform: var(--case); }
.mp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mp-rates { flex: none; }
.mp-bar { position: relative; flex: 1 1 auto; min-width: 48px; height: 6px; border-radius: var(--tick); background: var(--surface-3); }
.mp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--accent); }
.mp-ticks i { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--ink-2); }
.mp-ticks i.hold { width: 4px; margin-left: -2px; }
.mp-time { flex: none; min-width: 3.6em; color: var(--clock); font: 700 15px/1 var(--font-mono); text-align: right; }
.mp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 16px 14px; color: var(--ink-2); font-size: 14px; }
.mp-moment { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); }
.mp-moment b { font-weight: 600; }
.mp-spot {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 6px; border-radius: var(--radius-xs);
  background: var(--video-accent); color: var(--video-edge); box-shadow: 0 0 0 2px var(--video-edge);
  font: 700 12px/1 var(--font-mono); letter-spacing: var(--track-s);
}
.mp-foot .btn { margin-left: auto; }
.mp-foot .btn svg { width: 16px; height: 16px; }

.post-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); align-items: start; gap: 20px; }
.post-grid.text-only { grid-template-columns: minmax(0, 46rem); }
.post-grid > .moment { position: sticky; top: calc(var(--bar-h) + 16px); }
.post-side { display: grid; gap: 20px; min-width: 0; }
.post-card, .comments-card { padding: 20px 22px; }
.post-title { margin: 0; font-size: var(--fs-24); line-height: 1.2; letter-spacing: var(--track-head); text-transform: var(--case); overflow-wrap: anywhere; }
.post-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 8px 0 0; color: var(--ink-2); font: 500 14px/1.4 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.post-meta .when { font: inherit; color: var(--muted); }
.post-removed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 0; color: var(--ink-2); font-size: 14px; }
.post-review { margin-top: 16px; }
.review-ask { display: grid; justify-items: start; gap: 10px; padding: 14px 16px; border-radius: var(--radius-s); background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.review-ask p { margin: 0; }
.review-done, .review-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--ink-2); }
.review-done { flex-wrap: nowrap; align-items: baseline; }
.review-done:focus { outline: none; }
.post-body { margin: 16px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-body.post-cheer { font-size: 44px; line-height: 1.1; }
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.toggle.react { gap: 6px; min-height: 36px; padding: 0 12px; }
.toggle.react .emoji { font-size: 17px; line-height: 1; }
.toggle.react .n { min-width: 1ch; font: 600 13px/1 var(--font-mono); }
.toggle.react.static { cursor: default; }
.toggle.react.static:hover { border-color: var(--line-strong); color: var(--ink-2); }
.post-status { margin: 8px 0 0; color: var(--bad); font-size: 14px; font-weight: 600; }
.post-status:empty { display: none; }
.post-reads, .post-remove { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.post-reads h2 { margin: 0 0 2px; font-size: var(--fs-14); letter-spacing: var(--track-s); text-transform: var(--case); }
.post-reads p { margin: 0; }
.reads-sum { color: var(--ink-2); font-size: 14px; }
.reads-list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.reads-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.post-copy { margin: 16px 0 0; }
.comments-card h2 { margin: 0 0 4px; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.comments-card h2 .count, .post-reads h2 .count { color: var(--muted); font: 500 14px/1 var(--font-mono); }
.comments-card h2:focus { outline: none; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment { padding: 12px 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: 0; }
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.comment-head b { font-weight: 600; }
.comment-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment.removed .comment-body { color: var(--muted); }
.comment-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink-2); }
.comment-empty { margin: 4px 0 0; }
.comment-form { display: grid; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.comment-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.social-page > * { max-width: 60rem; }
.post-box { display: grid; gap: 8px; margin-bottom: 20px; padding: 16px 20px; }
.post-box textarea.text-input { height: 44px; min-height: 44px; }
.post-box textarea.text-input:focus, .post-box textarea.text-input.filled { height: 96px; }
.post-box-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.post-box-foot .field-hint { flex: 1 1 18rem; }
.row-list { list-style: none; margin: 0; padding: 0; }
.row-list > li + li { border-top: 1px solid var(--line); }
.post-row, .inbox-row { display: grid; align-items: start; color: inherit; text-decoration: none; }
.post-row { grid-template-columns: 15rem minmax(0, 1fr); gap: 12px 20px; padding: 18px 20px; }
.post-row.text { grid-template-columns: minmax(0, 1fr); }
.post-row:hover, .inbox-row:hover { background: var(--surface-2); }
.post-row:focus-visible, .inbox-row:focus-visible { outline-offset: -2px; }
.post-row:hover .row-who, .inbox-row:hover .row-who { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post-poster { border-radius: var(--radius-s); }
.post-poster .dur { right: 10px; bottom: 10px; }
.post-poster .spot-tag {
  position: absolute; z-index: 4; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 6px;
  border-radius: var(--radius-xs); background: var(--video-accent); color: var(--video-edge); box-shadow: 0 0 0 2px var(--video-edge);
  font: 700 12px/1 var(--font-mono); letter-spacing: var(--track-s);
}
.spot-tag i { width: 13px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }
.post-poster .marks-tag {
  position: absolute; z-index: 4; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px;
  border-radius: var(--radius-xs); background: var(--stage-chip); color: var(--stage-ink); font: 600 12px/1 var(--font-mono);
}
.marks-tag svg { width: 13px; height: 13px; }
.post-poster.small { border-radius: var(--radius-xs); }
.post-poster.small::after { display: none; }
.post-poster.small .spot-tag { left: 4px; top: 4px; padding: 2px 5px 2px 4px; font-size: 11px; box-shadow: 0 0 0 1.5px var(--video-edge); }
.post-poster.small .spot-tag i { width: 10px; height: 6px; border-width: 1.5px; }
.post-poster.small .dur { right: 4px; bottom: 4px; padding: 2px 5px; font-size: 11px; }
.row-body { display: grid; gap: 4px; min-width: 0; }
.row-body p { margin: 0; }
.row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.row-who { font: var(--w-head) 16px/1.3 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); }
.row-verb { color: var(--ink-2); }
.row-head .when { margin-left: auto; }
.row-to { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 13px; }
.row-text { margin-top: 4px !important; font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.row-text.clamp { -webkit-line-clamp: 2; color: var(--ink-2); font-size: 15px; }
.row-clip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 4px !important; color: var(--ink-2); font-size: 13px; }
.row-clip .mono { color: var(--ink); font-weight: 600; }
.row-game { margin-left: 8px; color: var(--muted); }
.row-game:empty { display: none; }
.row-counts, .row-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px !important; color: var(--ink-2); font-size: 14px; }
.row-meta { color: var(--muted); font-size: 13px; }
.inbox-row { grid-template-columns: 8px 7rem minmax(0, 1fr); gap: 4px 14px; padding: 14px 20px 14px 12px; }
.unread-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; }
.inbox-row.unread .unread-dot { background: var(--accent); }
.inbox-row.unread .row-who { font-weight: 800; }
.inbox-note { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--radius-xs); background: var(--surface-2); color: var(--muted); }
.inbox-note svg { width: 20px; height: 20px; }
.list-card { overflow: hidden; }
.list-foot { display: flex; justify-content: center; margin-top: 16px; }
.list-error { display: grid; justify-items: start; gap: 10px; padding: 16px 20px; }

.discuss { display: grid; gap: 20px; }
.discuss-wait { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-2); }
.suggest-head { padding: 16px 20px 6px; }
.suggest-head h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.suggest-head p { margin: 0; max-width: 72ch; }
.suggest-head > .info-title { margin: 0 0 4px; }
.suggest-head > .info-title > h2 { margin: 0; }
.suggest-card .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0 20px 16px calc(12px + 8px + 7rem + 28px); }
.flags-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 20px 10px; }
.flags-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.flags > .flags-head { padding: 16px 20px 10px; }
.flags-empty { margin: 0; padding: 0 20px 18px; color: var(--ink-2); }
.flags-counts { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.flags-n { color: var(--muted); font: 500 14px/1 var(--font-mono); letter-spacing: 0; }
.flags-new { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font: 700 11px/1 var(--font-mono); letter-spacing: 0; text-transform: none; }
.flags-list { display: grid; gap: 16px; margin: 0; padding: 4px 8px 12px; list-style: none; }
.flags-where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 12px 4px; color: var(--muted); font: 500 var(--label-size)/1.4 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.flags-where .mono { color: var(--ink); font: 600 13px/1.4 var(--font-mono); letter-spacing: 0; text-transform: none; }
.flags-posts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.flag { display: grid; border-radius: var(--radius-s); }
.flag:has(> .flag-btn[aria-current="true"]) { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.flag:has(> .flag-btn[aria-current="true"]) .flag-meta { color: var(--ink-2); }
.flag-btn { display: grid; gap: 4px; width: 100%; min-width: 0; padding: 8px 12px 2px; border: 0; border-radius: var(--radius-s); background: none; text-align: left; cursor: pointer; }
.flag-btn:not([aria-current="true"]):hover { background: var(--surface-2); }
.flag-btn:focus-visible { outline-offset: -2px; }
.flag-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.flag-who { font: var(--w-head) 14px/1.3 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); }
.flag.new .flag-who { font-weight: 800; }
.flag .unread-dot { margin: 0; background: var(--accent); }
.flag-text { overflow: hidden; color: var(--ink-2); font-size: 14px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.flag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--muted); font-size: 13px; }
.flag-open { justify-self: start; margin: 0 12px 6px; padding: 2px 0; color: var(--ink-2); font-size: 13px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.flag-open:hover { color: var(--ink); text-decoration-color: var(--accent); }
@media (pointer: coarse) { .flag-open { padding: 6px 0; } }
.flags-error { margin: 0; padding: 0 20px 16px; color: var(--ink-2); font-size: 14px; }

.group-new { margin-bottom: 20px; padding: 18px 20px 16px; }
.group-new > h2 { margin: 0 0 4px; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.group-form { display: grid; }
.group-form .field:first-of-type { border-top: 0; }
.group-form-btns { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.group-list { list-style: none; margin: 0; padding: 0; }
.group-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 14px 20px; border-top: 1px solid var(--line); }
.group-id { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.group-name { font: var(--w-head) 17px/1.25 var(--font-display); letter-spacing: var(--track-s); text-transform: var(--case); overflow-wrap: anywhere; }
.group-nums { color: var(--ink-2); font: 500 14px/1.5 var(--font-mono); white-space: pre-wrap; }
.group-act { display: flex; gap: 8px; }
.group-row > .group-form, .group-row > .confirm { flex: 1 1 100%; }
.group-row > .group-form .field { padding-block: 10px; }
.pos-letter { color: var(--muted); font: var(--w-ui) 11px/1 var(--font-ui); }
.toggle[aria-pressed="true"] .pos-letter { color: inherit; opacity: .8; }
.pos-trouble { margin: -8px 0 20px; }
.pos-trouble a { color: var(--ink); text-underline-offset: 3px; }
.pos-list { list-style: none; margin: 0; padding: 0; }
.pos-row { display: grid; grid-template-columns: 4.5rem auto minmax(0, 1fr); align-items: center; gap: 8px 16px; padding: 10px 20px; border-top: 1px solid var(--line); }
.pos-num { font: 600 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.pos-src { color: var(--muted); font-size: 13px; }
.pos-row > .field-error { grid-column: 2 / -1; }
.pos-seg[aria-busy="true"] button { cursor: progress; }
.pos-seg button[data-pos=""].on { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-2); color: var(--ink); }

.chat-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; padding: 14px 20px; color: inherit; text-decoration: none; }
.chat-row:hover { background: var(--surface-2); }
.chat-row:focus-visible { outline-offset: -2px; }
.chat-row:hover .row-who { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.chat-row.unread .row-who { font-weight: 800; }
.row-text.none { color: var(--muted); }
.chat-tile {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-s); clip-path: var(--cut-s);
  background: var(--surface-3); color: var(--ink); font: 700 17px/1 var(--font-mono); font-variant-numeric: tabular-nums;
}
.chat-tile svg { width: 20px; height: 20px; }
.chat-count {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-top: 1px; padding: 0 7px;
  border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font: 700 12px/1 var(--font-mono);
}
.chat-page > * { max-width: 48rem; }
.chat-head { margin: 8px 0 24px; }
.chat-title { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.chat-title > div { min-width: 0; }
.chat-title .chat-tile { width: 56px; height: 56px; font-size: 22px; }
.chat-title .chat-tile svg { width: 26px; height: 26px; }
.chat-head h1 { font-size: var(--h1); line-height: 1.05; overflow-wrap: anywhere; }
.chat-head p { margin-top: 6px; font-size: 15px; }
.chat-page .flash { margin: -8px 0 16px; }
.chat-top { display: flex; justify-content: center; padding: 14px 20px 2px; }
.chat-top[hidden] { display: none; }
.chat-log { list-style: none; margin: 0; padding: 0 0 6px; }
.msg { display: grid; gap: 6px; padding: 12px 20px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.msg + .msg { border-top: 1px solid var(--line); }
.msg.mine { box-shadow: inset 3px 0 0 var(--accent); }
.msg:focus-visible { outline-offset: -2px; }
.msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.msg-head .when { margin-left: auto; }
.msg-text { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-cheer { margin: 0; font-size: 32px; line-height: 1.15; }
.msg-clip {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: center; gap: 10px 14px; max-width: 32rem; padding: 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); color: inherit; text-decoration: none;
}
.msg-clip:hover { border-color: var(--ink-2); background: var(--surface-2); }
.msg-clip:hover .mono { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.msg-clip-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; color: var(--ink-2); font-size: 13px; }
.msg-clip-line .mono { color: var(--ink); font-weight: 600; }
.msg-clip-line .row-game { flex-basis: 100%; margin-left: 0; }
.msg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; color: var(--ink-2); font-size: 14px; }
.msg-reply { color: var(--ink-2); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.msg-reply:hover { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.msg-day, .msg-new {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px 4px;
  color: var(--muted); font: 500 var(--label-size)/1 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case);
}
.msg-day::before, .msg-day::after, .msg-new::before, .msg-new::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line-strong); }
.msg-day h2 { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.msg-new { color: var(--accent-text); font-weight: 700; }
.msg-new::before, .msg-new::after { background: var(--accent); }
.msg-empty { display: grid; justify-items: center; gap: 4px; padding: 36px 20px 30px; color: var(--ink-2); text-align: center; }
.msg-empty b { color: var(--ink); font: var(--w-head) 18px/1.3 var(--font-display); letter-spacing: var(--track-s); text-transform: var(--case); }
.chat-box { display: grid; gap: 8px; margin-top: 16px; padding: 16px 20px 18px; }
.chat-box-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; }
.family-home > * { max-width: 72rem; }
.family-chat { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; margin-bottom: 28px; padding: 18px 20px; }
.family-chat-main { display: grid; gap: 4px; min-width: 0; }
.family-chat-main p { margin: 0; }
.family-games { display: grid; gap: 24px; }
.family-open { margin: 0 0 0 auto; }
.family-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 20px 16px; margin: 0; padding: 2px 20px 20px; list-style: none; }
.family-clip { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.family-clip .poster { border-radius: var(--radius-s); }
.family-clip:hover .poster { box-shadow: 0 0 0 2px var(--ink-2); }
.family-clip:hover .family-clip-name { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.family-clip:focus-visible { outline-offset: 4px; }
.family-clip-name { color: var(--ink); font: 600 15px/1.2 var(--font-mono); }
.family-foot { display: flex; justify-content: center; margin-top: 28px; }
.cheer-card { display: grid; gap: 14px; margin-top: 20px; padding: 18px 20px 16px; }
.cheer-head h2 { margin: 0; font-size: var(--fs-18); letter-spacing: var(--track-s); text-transform: var(--case); }
.cheer-head p { margin: 4px 0 0; }
.cheer-row { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle.react.cheer { justify-content: center; min-width: 60px; min-height: 48px; padding: 0 14px; }
.toggle.react.cheer .emoji { font-size: 26px; }
.toggle.react.cheer[disabled] { opacity: .6; cursor: progress; }
.cheer-form { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.cheer-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.cheer-status { margin: 0; color: var(--ink-2); font-size: 14px; }
.cheer-status:empty { display: none; }
.cheer-status.bad { color: var(--bad); font-weight: 600; }
.toggle.react.cheer[aria-disabled="true"] { opacity: .6; cursor: default; }

.edited { color: var(--muted); font-size: 13px; white-space: nowrap; }
.post-meta .edited { font: inherit; }
.msg-act {
  padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-weight: 500; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.msg-act:hover { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.msg-note { margin: 0; }
.edit-form { display: grid; gap: 8px; max-width: 62ch; }
.edit-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.edit-foot .counter { margin-right: 4px; }
.post-words > .edit-form { margin-top: 16px; }
.comment .edit-form { margin-top: 6px; }
.post-remove { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.post-remove > .confirm, .comment-act > .confirm { flex: 1 1 100%; }
.post-remove > .move-box { flex: 1 1 100%; }
.move-box { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--accent-wash); color: var(--ink); }
.move-box > p { margin: 0; }
.move-to { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.move-to legend { margin-bottom: 6px; padding: 0; }
.move-choices { display: grid; gap: 6px; }
.move-choice {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); background: var(--surface); cursor: pointer;
}
.move-choice:hover { border-color: var(--ink-2); }
.move-choice:has(input:checked) { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.move-choice input { margin: 3px 0 0; accent-color: var(--accent); }
.move-choice > span { display: grid; gap: 2px; }
.move-hint { color: var(--ink-2); font-size: 13px; }
.move-btns { display: flex; flex-wrap: wrap; gap: 8px; }

.family-card { display: grid; gap: 14px; margin-top: 16px; padding: 18px 20px; }
.family-card h2, .family-card h3, .family-card h4 { margin: 0; }
.family-body { display: grid; gap: 16px; }
.family-number { display: grid; gap: 8px; justify-items: start; }
.family-number .field-hint { margin: 0; }
.family-status:empty { display: none; }
.family-status { margin: 0; }
.family-status.bad { color: var(--bad); }
.family-code { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--accent-wash); color: var(--ink); }
.family-code > p { margin: 0; }
.family-words { font-size: 26px; font-weight: 800; letter-spacing: .02em; overflow-wrap: anywhere; }
.family-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.family-list { display: grid; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; }
.family-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.family-list > li > .confirm { flex: 1 1 100%; }
.family-enter { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; width: 100%; }
.family-enter .field-label { flex: 1 1 100%; }
.family-enter .text-input { flex: 1 1 200px; min-width: 0; }
.family-admin { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.family-stop { display: grid; gap: 8px; justify-items: start; }
.family-stop > .field-hint { margin: 0; }
.family-list > li > .family-stop:has(> .confirm) { flex: 1 1 100%; }
.family-stops { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.family-stops > .field-hint { margin: 0; }
.family-stops .family-enter .text-input { flex: 0 1 6rem; }
@media (pointer: coarse) {
  .msg-act { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; padding-inline: 6px; margin-inline: -6px; }
}

@media (max-width: 1100px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .post-grid > .moment { position: static; }
}
@media (max-width: 760px) {
  .field { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .field > .field-label, .field > .info-title { padding-top: 0; }
  .composer-head { padding: 14px 12px 2px 16px; }
  .composer-body { padding-inline: 16px; }
  .composer-foot { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 16px; }
  .composer-btns { justify-content: flex-end; }
  .to-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .to-label { padding-top: 0; }
  .mark-tray { padding: 10px 12px; }
  .note { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .note-range { justify-self: start; }
  .note-empty, .notes-remove, .notes-status { padding-inline: 16px; }
  .post-card, .comments-card { padding: 18px 16px; }
  .post-title { font-size: var(--fs-21); }
  .mp-controls { padding: 10px 12px; }
  .mp-foot { padding: 10px 12px 12px; }
  .mp-foot .btn { margin-left: 0; }
  .post-box { padding: 14px 16px; }
  .post-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
  .inbox-row { grid-template-columns: 8px 5.5rem minmax(0, 1fr); gap: 4px 10px; padding: 12px 16px 12px 8px; }
  .suggest-card .row-actions { padding: 0 16px 14px calc(8px + 8px + 5.5rem + 20px); }
  .group-new { padding: 16px; }
  .group-row { padding: 14px 16px; }
  .pos-row { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; }
  .pos-src { grid-column: 2; grid-row: 1; text-align: right; }
  .pos-seg, .pos-pick { display: grid; width: 100%; }
  .pos-seg { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pos-pick { grid-template-columns: repeat(4, auto); }
  .pos-seg button, .pos-pick button { min-width: 0; padding-inline: 4px; line-height: 1.2; white-space: normal; text-align: center; }
  .pos-row > .field-error { grid-column: 1 / -1; }
  .chat-row { gap: 4px 12px; padding: 12px 16px; }
  .chat-title { gap: 12px; }
  .chat-title .chat-tile { width: 44px; height: 44px; font-size: 17px; }
  .chat-title .chat-tile svg { width: 20px; height: 20px; }
  .chat-head h1 { font-size: min(var(--h1), 8.5vw); }
  .msg, .msg-day, .msg-new, .chat-top { padding-inline: 16px; }
  .msg-clip { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .chat-box { padding: 14px 16px 16px; }
  .chat-box-foot { grid-template-columns: minmax(0, 1fr) auto; }
  .chat-box-foot .ground-rule { grid-column: 1 / -1; }
  .chat-box-foot .counter { justify-self: end; }
  .family-chat { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; }
  .family-chat > .btn { grid-column: 1 / -1; justify-content: center; }
  .family-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 2px 16px 16px; }
  .family-clip-name { font-size: 14px; }
  .cheer-card { padding: 16px; }
}
@media (pointer: coarse) {
  .mark-tray .tool, .chip-x, .note-range, .toggle.react, .text-input { min-height: 44px; }
  .toggle.react.cheer { min-height: 52px; }
  .msg-reply { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
  .mark-tray .tool, .tray-freeze .seg button, .composer .chips .toggle, .group-form .chips .toggle { min-width: 44px; justify-content: center; }
  :root[data-hosted="1"] .nav { padding-inline: 6px; margin-inline: -6px; }
  :root[data-hosted="1"] .nav a { padding-inline: 6px; margin-inline: -6px; }
  :root[data-hosted="1"] .nav a.active::after { left: 6px; right: 6px; }
  .swatch, .chip-x > button { width: 44px; min-width: 44px; height: 44px; }
  .chip-x > .chip-go { width: auto; }
  .comment-act .linkish { min-height: 44px; }
}


.label-box > * { border-top: 1px solid var(--line); }
.label-panel { display: grid; gap: 12px; padding: 14px 16px 16px 20px; }
.label-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; }
.tag-plate { display: inline-flex; justify-self: start; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--radius-s); background: var(--stage); }
.vtag {
  display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 7px; border: 2px solid transparent;
  border-radius: calc(var(--video-tag-radius) * 1px); font: 700 13px/1 var(--font-mono); white-space: nowrap;
}
.vtag.light { background: var(--video-light-tag); color: var(--video-tag-ink); }
.vtag.dark { background: var(--video-dark-tag); color: var(--video-dark-tag-ink); }
.vtag.waiting { background: var(--stage-chip); color: var(--stage-ink); border-style: dashed; box-shadow: 0 0 0 1px var(--video-edge); }
.vtag.waiting.light { border-color: var(--video-light); }
.vtag.waiting.dark { border-color: var(--video-dark); }
.vtag.official { background: var(--official); color: #fff; }
.vtag.waiting.official { border-color: var(--official); }
.vtag.bench, .vtag.waiting.bench { background: transparent; color: var(--stage-ink); border-color: var(--stage-ink); border-style: dashed; }
.tag-to { display: grid; color: var(--stage-ink); }
.tag-to svg { width: 14px; height: 14px; }
.label-id { min-width: 0; }
.label-id h3 { margin: 0; font-size: var(--fs-18); line-height: 1.2; letter-spacing: var(--track-s); text-transform: var(--case); }
.label-id h3:focus { outline: none; }
.label-team { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ink-2); font-size: 13px; }
.label-state { margin: 0; max-width: 72ch; color: var(--ink-2); font-size: 14px; }
.num-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.num-chip {
  min-width: 44px; min-height: 36px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: transparent; color: var(--ink); font: 600 14px/1 var(--font-mono); cursor: pointer;
}
.num-chip:hover { border-color: var(--ink-2); }
.num-chip[aria-pressed="true"] { background: var(--chip-on); border-color: var(--chip-on-line); color: var(--chip-on-ink); }
.num-chip.guess { background: var(--surface-2); border-color: var(--field-line); }
.num-chip[disabled] { opacity: .5; cursor: default; }
.label-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.label-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.label-field .field-label { font-size: 13px; }
.label-input { width: 5.5rem; min-height: 36px; padding: 4px 10px; font: 600 15px/1.2 var(--font-mono); }
.label-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.label-move { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.label-move .field-label { font-size: 13px; }
.label-yes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.label-split { display: grid; gap: 10px; }
.split-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.split-row .field-label { font-size: 13px; }
.split-act { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.split-row .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.split-at { color: var(--ink-2); font-size: 13px; }
.split-time { color: var(--ink); font: 600 13px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.split-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.split-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: 72ch; color: var(--ink-2); font-size: 14px; }
.split-line .badge { margin: 0; }
.label-status { margin: 0; color: var(--ink-2); font-size: 14px; }
.label-status:empty { margin-top: -12px; }
.label-status.bad { color: var(--bad); font-weight: 600; }
.waiting-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.wait-key { flex: none; width: 22px; height: 13px; margin-top: 3px; border: 1.5px dashed var(--ink-2); border-radius: var(--radius-xs); }
.label-box .waiting-note { padding: 10px 16px 12px 20px; }
.players-card .waiting-note { margin: 4px 0 6px; }
.waiting-note a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.waiting-note a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.viewer.full .label-box { display: none; }
.badge.recalc { border-style: dashed; border-color: var(--ink-2); color: var(--ink); }
.who .badge.recalc { margin-left: 8px; vertical-align: 2px; }
.detail-head .badge.recalc { align-self: center; }
.player-recalc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.player-id .player-recalc .badge { margin: 0; white-space: nowrap; }
.player-recalc a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.player-id .waiting-note { margin: 0 0 10px; font-size: 14px; }

.tab-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin: -4px 0 -4px 6px; padding: 0 5px; border-radius: 9px;
  background: var(--surface-3); color: var(--ink-2); font: 600 11px/1 var(--font-mono); vertical-align: 1px;
}
.tabs button.on .tab-count { color: var(--ink); }
.ut-intro { margin: 0 0 14px; max-width: 72ch; color: var(--ink-2); font-size: 14px; }
.ut-list { list-style: none; margin: 0; padding: 0; }
.ut-item { padding: 16px 0; border-top: 1px solid var(--line); }
.ut-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: min(100%, 624px); padding: 4px; border-radius: var(--radius-s); background: var(--stage); }
.ut-cell { aspect-ratio: 3 / 4; border-radius: var(--radius-xs); background-color: var(--stage-2); background-repeat: no-repeat; }
button.ut-cell { position: relative; display: block; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; color: inherit; font: inherit; cursor: pointer; }
button.ut-cell:focus-visible { outline: 2px solid var(--stage-ink); outline-offset: 1px; }
button.ut-cell[aria-pressed="false"]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--stage) 82%, transparent) 0 6px, color-mix(in srgb, var(--stage) 58%, transparent) 6px 12px);
}
.ut-tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 2px solid var(--stage-ink); border-radius: 50%; background: var(--stage-chip); box-shadow: 0 0 0 1px var(--stage); }
.ut-cell[aria-pressed="true"] .ut-tick { background: var(--stage-ink); }
.ut-cell[aria-pressed="true"] .ut-tick::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid var(--stage); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ut-cell[aria-disabled="true"] { cursor: default; }
.ut-cell[aria-disabled="true"] .ut-tick { display: none; }
.ut-num { position: absolute; left: 6px; bottom: 6px; }
@media (hover: hover) {
  button.ut-cell:not([aria-disabled="true"]):hover .ut-tick { box-shadow: 0 0 0 1px var(--stage), 0 0 0 4px color-mix(in srgb, var(--stage-ink) 40%, transparent); }
}
.ut-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: min(100%, 624px); margin-top: 10px; }
.ut-when { color: var(--ink-2); font: 500 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.ut-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ut-item:has(.ut-dock .label-panel:not([hidden])) .ut-label { display: none; }
.ut-dock .label-panel { max-width: 624px; margin-top: 14px; padding: 14px 0 0; border-top: 1px dashed var(--line-strong); scroll-margin-top: calc(var(--bar-h) + 16px); }
.ut-saved { margin: 14px 0 0; color: var(--ink-2); font-size: 14px; }
.ut-saved:empty { display: none; }
.ut-saved .btn { margin-left: 4px; vertical-align: baseline; }
.ut-checks { margin-top: 28px; }
.ut-checks-title { margin: 0 0 6px; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.ut-checks .ut-intro { margin-bottom: 10px; }
.ut-checks > .info-title { margin: 0 0 10px; }
.ut-checks > .info-title > .ut-checks-title { margin: 0; }
.ut-foot { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.ut-foot .ut-saved { margin: 0; }
.ut-foot:empty { display: none; }
.ut-done { margin: 0; max-width: 72ch; }
.ut-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }

.lab-card > h2 { margin: 0; padding: 16px 20px 0; font-size: var(--fs-16); letter-spacing: var(--track-s); text-transform: var(--case); }
.lab-call { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 8px 20px 0; }
.lab-call p, .lab-none { max-width: 72ch; margin: 0; color: var(--ink-2); }
.lab-none { margin: 6px 20px 0; padding-bottom: 18px; }
.lab-periods { padding: 4px 20px 12px; }
.lab-period h3 { margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; letter-spacing: var(--track); text-transform: var(--case); }
.lab-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.lab-clips a { display: flex; align-items: baseline; gap: 10px; min-height: 36px; padding: 9px 0 6px; color: var(--ink-2); font-size: 14px; text-decoration: none; }
.lab-clip { color: var(--ink); font: 600 14px/1.2 var(--font-mono); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.lab-clips a:hover .lab-clip { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
@media (pointer: coarse) { .lab-clips a { min-height: 44px; align-items: center; padding-block: 0; } }
@media (max-width: 760px) {
  .lab-card > h2, .lab-periods { padding-inline: 16px; }
  .lab-call, .lab-none { margin-inline: 16px; }
  .lab-clips { gap: 0 16px; }
}

.game-top + .flash { margin: -8px 0 24px; }
.flash > span:not(.st) { flex: 1 1 0; min-width: 0; }
.game-top ~ .waiting-note { margin: -8px 0 24px; }
.game-top + .flash + .waiting-note { margin-top: -12px; }

@media (max-width: 760px) {
  .label-panel { padding: 12px 12px 14px 16px; }
  .ut-dock .label-panel { padding: 12px 0 0; }
  .ut-acts { margin-left: 0; }
  .label-head { grid-template-columns: minmax(0, 1fr) auto; }
  .label-head .label-id { grid-column: 1 / -1; grid-row: 2; }
  .label-box .waiting-note { padding: 10px 12px 12px 16px; }
  .label-actions { margin-left: 0; }
}
@media (pointer: coarse) {
  .num-chip, .label-input { min-height: 44px; }
  .ut-acts .btn { min-height: 44px; }
}
@media (max-width: 520px) {
  .ut-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .pos-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.clip-periods { display: grid; gap: 44px; }
.period-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 18px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.period-head h3 { margin: 0; font-size: var(--fs-18); line-height: 1.2; letter-spacing: var(--track-s); text-transform: var(--case); }
.clip-gap { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: -10px 0; color: var(--ink-2); font: 500 var(--label-size)/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clip-gap::before { content: ""; flex: none; width: 20px; border-top: 1px solid var(--line-strong); }
.clip-gap::after { content: ""; flex: 1; border-top: 1px solid var(--line-strong); }
.clip-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.kind-open { color: var(--ink-2); font-size: 13px; }
.clip-pick > .kind-open { margin-left: auto; }
.kind-box { display: grid; flex: 1 1 100%; justify-items: start; gap: 6px; }
.kind-check { margin: 0; color: var(--ink-2); font-size: 13px; }
.kind-check .badge { margin-right: 4px; vertical-align: 1px; }
.badge.priority { color: var(--ink); border-color: var(--ink-2); white-space: normal; }
.kind-moved { display: flex; align-items: flex-start; gap: 10px; align-self: start; margin: 0; padding: 10px 14px; border-radius: var(--radius-s); background: var(--good-wash); color: var(--ink); font-size: 14px; }
.kind-moved .st { margin-top: 1px; }
.kind-moved .linkish { font-weight: 600; text-decoration-color: var(--ink-2); }
.kind-moved:focus { outline: none; }
.ref-card { margin-top: 28px; }
.ref-card .section-head .muted { max-width: 90ch; }
.ref-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px 28px; margin: 0; padding: 4px 20px 20px; list-style: none; }
.ref-row { display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: start; gap: 14px; }
.ref-row .poster { border-radius: var(--radius-s); }
.ref-row .poster::after { inset: 6px; }
.ref-row .poster .dur { right: 6px; bottom: 6px; padding: 2px 6px; font-size: 11px; }
.ref-body { display: grid; justify-items: start; gap: 4px; min-width: 0; color: var(--ink-2); font-size: 14px; }
.ref-body p { margin: 0; }
.ref-title { display: flex; justify-self: stretch; align-items: baseline; justify-content: space-between; gap: 8px; }
.ref-title b { color: var(--ink); font: 600 16px/1.2 var(--font-mono); }
.ref-kind b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .clip-periods { gap: 36px; }
  .ref-list { padding: 4px 16px 16px; }
  .ref-row { grid-template-columns: 112px minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .kind-open, .kind-moved .linkish { min-height: 44px; }
}

.watch-card { margin-bottom: 20px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.watch-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: max(240px, calc(100vh - 340px)); background: var(--stage); }
@media (orientation: landscape) and (max-height: 560px) {
  .watch-stage { max-height: calc(100vh - var(--bar-h)); max-height: calc(100dvh - var(--bar-h)); }
}
.watch-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--stage); }
.watch-stage.steady video { background: transparent; }
.watch-missing { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; padding: 16px; text-align: center; color: var(--stage-ink); }
.watch-missing b { font: var(--w-head) 18px/1.3 var(--font-display); text-transform: var(--case); }
.watch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.watch-btns { display: flex; gap: 8px; }
.watch-btns .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.watch-btns .btn[aria-disabled="true"]:hover { border-color: var(--line-strong); }
.watch-now { display: flex; flex: 1 1 18rem; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; margin: 0; color: var(--ink-2); font-size: 14px; }
.watch-bar { container-type: inline-size; }
:root[data-mode="simple"] .watch-bar > .comment-open { min-height: 52px; padding: 0 20px; font-size: 17px; }
:root[data-mode="simple"] .watch-bar > .comment-open svg { width: 18px; height: 18px; }
.watch-share-box { position: relative; display: inline-flex; }
.watch-said {
  position: absolute; z-index: 6; right: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(28rem, calc(100vw - 32px));
  padding: 6px 10px; border-radius: var(--radius-xs); background: var(--stage-chip); color: var(--stage-ink);
  font: 600 13px/1.35 var(--font-ui); opacity: 0; pointer-events: none; transition: opacity .15s;
}
.watch-said.on { opacity: 1; pointer-events: auto; }
.watch-said-url { font-family: var(--font-mono); font-weight: 500; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
:root[data-mode="simple"] .watch-share { min-height: 52px; padding: 0 20px; font-size: 17px; }
:root[data-mode="simple"] .watch-share svg { width: 18px; height: 18px; }
@container (max-width: 352px) {
  .watch-bar > .comment-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.watch-bar .watch-full { justify-content: center; min-width: 44px; padding: 0 10px; }
:root[data-mode="simple"] .watch-bar .watch-full { min-width: 52px; padding: 0 15px; }
.watch-bar .watch-full span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container (max-width: 480px) {
  .watch-bar .watch-share { justify-content: center; min-width: 44px; padding: 0 10px; }
  .watch-bar .watch-share span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :root[data-mode="simple"] .watch-bar .watch-share { min-width: 52px; padding: 0 15px; }
}
@container (max-width: 437px) {
  :root[data-mode="simple"] .watch-bar > .comment-open { padding: 0 12px; }
  :root[data-mode="simple"] .watch-bar > .comment-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.watch-clip { color: var(--ink); font: 600 17px/1.2 var(--font-mono); text-decoration: none; }
.watch-clip:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (pointer: coarse) {
  .watch-clip { position: relative; }
  :root:not([data-mode="simple"]) .watch-clip::before { content: ""; position: absolute; inset: -10px -4px; }
}
.watch-pos { margin-left: auto; color: var(--muted); font: 500 13px/1.2 var(--font-mono); white-space: nowrap; }
.watch-msg { flex-basis: 100%; color: var(--ink); }
.watch-msg:empty { display: none; }
.watch-strip { display: grid; gap: 6px; padding: 14px 20px 18px; }
.watch-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 4px 16px; }
.watch-row-name { color: var(--ink-2); font: 500 var(--label-size)/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.watch-segs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 30px; width: min(100%, max(calc(var(--share) * 100%), calc(var(--n) * 10px))); }
.watch-seg, .seg-key { --bar-ink: var(--field-line); --pick: 0 0 transparent; position: relative; border-radius: var(--tick); box-shadow: inset 0 0 0 1.5px var(--bar-ink), var(--pick); }
.watch-seg { flex: var(--len) 1 0; min-width: 8px; height: 20px; padding: 0; overflow: hidden; border: 0; background: none; cursor: pointer; transition: height .12s; }
.watch-seg.past { --bar-ink: var(--ink-2); }
.watch-seg.st-analysed, .seg-key.st-analysed { background: var(--bar-ink); }
.watch-seg.st-analysed::after, .seg-key.st-analysed::after { content: ""; position: absolute; top: calc(50% - 2px); left: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--surface); }
.watch-seg.st-running, .seg-key.st-running { background: repeating-linear-gradient(135deg, var(--bar-ink) 0 2px, transparent 2px 5px); }
.watch-seg.st-queued, .seg-key.st-queued { border: 1.5px dashed var(--bar-ink); box-shadow: var(--pick); }
.watch-seg.st-held, .seg-key.st-held {
  background: linear-gradient(90deg, transparent calc(50% - 2.25px), var(--bar-ink) 0 calc(50% - .75px), transparent 0 calc(50% + .75px),
    var(--bar-ink) 0 calc(50% + 2.25px), transparent 0) center / 100% 6px no-repeat;
}
.watch-seg:hover { height: 26px; }
.watch-seg[aria-current="true"] { height: 30px; box-shadow: inset 0 0 0 2px var(--accent), var(--pick); }
@property --pick-w { syntax: "<length>"; inherits: false; initial-value: 3px; }
.watch-seg.picked { --pick: 0 0 0 var(--pick-w, 3px) var(--accent); z-index: 1; animation: pick-ring .5s ease-in-out 2; }
@keyframes pick-ring { 50% { --pick-w: 6px; } }
.watch-seg[aria-current="true"] i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--accent); }
.seg-key { display: inline-block; width: 16px; height: 10px; }
.watch-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -6px 0 0; padding: 0 20px 14px; color: var(--ink-2); font: 500 12px/1.4 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.watch-note { margin: -6px 0 0; padding: 0 20px 16px; }
.watch-strip.mo .watch-seg { background: none; }
.watch-strip.mo .watch-seg::after, .watch-strip.mo .watch-seg > i { display: none; }
.watch-mo { position: absolute; top: 0; bottom: 0; min-width: 2px; background: var(--field-line); }
.watch-mo.past { background: var(--ink-2); }
.watch-mo.now { background: linear-gradient(to right, var(--accent) calc(var(--q, 0) * 100%), var(--field-line) 0); }
.seg-key.mo-on { background: var(--bar-ink); }
.watch-fig { color: var(--ink); font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; }
.watch-skip {
  position: absolute; z-index: 5; top: 16px; right: 16px; display: none; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 16px; border: 1px solid var(--stage-ink); border-radius: var(--radius-xs); background: var(--stage-chip);
  color: var(--stage-ink); font: var(--w-ui) 15px/1 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); cursor: pointer;
  transition: opacity .2s;
}
.watch-stage.stage-full .watch-skip:not([hidden]) {
  display: flex; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
}
.watch-skip:focus-visible { outline: 2px solid var(--stage-ink); outline-offset: 2px; }
.watch-skip svg { width: 16px; height: 16px; }
.watch-stage > .watch-tool { position: absolute; z-index: 5; top: 16px; left: 16px; transition: opacity .2s; }
.watch-stage.stage-full > .watch-tool { top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); }
.pop.watch-tool > summary .caret { display: none; }
.watch-tool .pop-label { display: inline-flex; align-items: center; gap: 8px; }
.watch-tool .tool-mark { display: grid; }
.watch-tool .tool-mark svg { width: 16px; height: 16px; }
.watch-stage > .watch-tool > summary {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--stage-ink); border-radius: var(--radius-xs); background: var(--stage-chip);
  color: var(--stage-ink); font: var(--w-ui) 15px/1 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case);
}
.watch-stage > .watch-tool > summary:hover, .watch-stage > .watch-tool[open] > summary { border-color: var(--stage-ink); background: var(--stage); }
.watch-stage > .watch-tool > summary:focus-visible { outline: 2px solid var(--stage-ink); outline-offset: 2px; }
.watch-stage.stage-full > .watch-tool > .pop-panel {
  max-height: calc(100vh - max(16px, env(safe-area-inset-top)) - max(4px, env(safe-area-inset-bottom)) - 134px);
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(4px, env(safe-area-inset-bottom)) - 134px);
}
.pb-idle > .watch-tool:not([open]):not(:has(> summary:focus-visible)) { opacity: 0; pointer-events: none; }
.watch-card:has(> .watch-stage > .watch-tool[open]) { clip-path: none; }
.watch-tags-panel { width: min(34rem, var(--pop-room)); }
.watch-tags-panel > .tags-card { margin: 0; padding: 8px 8px 6px; border: 0; background: none; clip-path: none; }
.tags-loading { margin: 0; padding: 8px; }
.tags-loading:has(+ .tags-card:not([hidden])) { display: none; }
.tags-head .tags-at { margin: 2px 0 0; color: var(--ink-2); font: 500 13px/1.3 var(--font-mono); }
@media (orientation: landscape) and (max-height: 560px) {
  .watch-stage > .watch-tool .watch-tags-panel { width: min(48rem, var(--pop-room)); }
  .watch-stage > .watch-tool .tag-rows { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: 24px; }
  .watch-stage > .watch-tool .tag-row { grid-column: span 2; }
}
.player-watch { margin: 0 0 10px; }
.watch-pane { overflow: hidden; clip-path: var(--cut-top); }
.watch-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 14px 20px 16px; }
.watch-foot p { flex: 1 1 24rem; max-width: 80ch; margin: 0; color: var(--ink-2); font-size: 14px; }
.watch-foot b { color: var(--ink); font-weight: 600; }
.watch-foot .pop-panel { top: auto; bottom: calc(100% + 6px); }
@media (min-width: 761px) {
  .watch-foot > p + * { margin-left: auto; }
}
.period-row .period-when { flex-basis: 100%; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .watch-bar { gap: 10px 16px; padding: 10px 16px; }
  .watch-strip { padding: 12px 16px 16px; }
  .watch-row { grid-template-columns: minmax(0, 1fr); }
  .watch-key, .watch-note { padding-inline: 16px; }
  .watch-foot { padding: 12px 16px 14px; }
}
@media (pointer: coarse) {
  .watch-segs { min-height: 44px; width: min(100%, max(calc(var(--share) * 100%), calc(var(--n) * 18px))); }
  .watch-seg, .watch-seg:hover { min-width: 16px; height: 34px; }
  .watch-seg[aria-current="true"] { height: 44px; }
}
@property --wl-a { syntax: "<number>"; inherits: true; initial-value: .5; }
:root {
  --wl-rail: 56px;
  --wl-w: clamp(340px, 28vw, 440px);
  --wl-fly: .4s;
  --wl-fold: .26s;
  --wl-ease: cubic-bezier(.2, .8, .2, 1);
  --wl-tick: var(--field-line);
}
.watch-split { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 20px; align-items: start; }
.watch-split > .watch-live { grid-column: -2; }
.watch-split > .watch-tl { grid-column: 1; min-width: 0; }
.watch-live { display: flex; flex-direction: column; margin-bottom: 20px; overflow: hidden; container-type: inline-size; }
@media (min-width: 1181px) {
  .watch-split:has(> .watch-live:not([hidden])) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; }
  .watch-split > .watch-live { grid-row: 1 / span 2; }
  .watch-split > .watch-live { align-self: stretch; width: var(--wl-rail); transition: width var(--wl-fold) var(--wl-ease); }
  .watch-split > .watch-live.open { width: var(--wl-w); transition-duration: var(--wl-fly); }
  .watch-split > .watch-live:is(.open, .closing) > * { flex: none; width: calc(var(--wl-w) - 2px); }
}
.wl-top { align-items: stretch; padding: 0; }
.wl-top h2 { display: flex; flex: 1; margin: 0; }
.wl-toggle {
  display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 10px 12px; width: 100%; min-height: 56px; padding: 10px 20px;
  border: 0; background: none; color: var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: left; cursor: pointer;
}
.wl-toggle:hover { background: var(--surface-2); }
.wl-toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.wl-cue {
  display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 36px; margin-left: auto; padding: 0 10px 0 14px;
  border: 1px solid var(--field-line); border-radius: var(--radius-s); color: var(--ink);
}
.wl-act { font: var(--w-ui) 13px/1 var(--font-ui); letter-spacing: var(--track-s); text-transform: var(--case); }
.wl-toggle .caret { display: grid; place-items: center; }
.wl-toggle .caret svg { width: 14px; height: 14px; transition: transform .15s, translate .15s; }
.wl-toggle .caret .c2 { display: none; }
.watch-live.open .wl-toggle .caret svg { transform: rotate(180deg); }
.wl-toggle:hover .wl-cue { border-color: var(--ink); }
.wl-toggle:hover .caret svg { translate: 0 2px; }
.watch-live.open .wl-toggle:hover .caret svg { translate: 0 -2px; }
.wl-kit { display: flex; flex: none; gap: 8px; }
.wl-tile, .wl-tile svg { display: block; width: 28px; height: 28px; }
.wl-tile .tl-bg { fill: var(--stage); }
.wl-tile .tl-edge { fill: none; stroke: var(--stage-ink); stroke-opacity: .16; }
.wl-tile .tl-cut { fill: none; stroke: var(--stage-ink); stroke-width: .75; stroke-linejoin: round; }
.wl-tile .tl-rink { fill: none; stroke: var(--stage-ink); stroke-width: 1.3; }
.wl-tile .tl-ax { fill: none; stroke: var(--stage-ink); stroke-opacity: .3; stroke-linecap: round; stroke-linejoin: round; }
.wl-tile :is(.tl-l, .tl-d) { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wl-tile .tl-l { stroke: var(--video-light); }
.wl-tile .tl-d { stroke: var(--video-dark); }
.wl-tile .tl-band { fill: var(--video-light); fill-opacity: .35; }
.watch-live:is(.open, .closing) .wl-kit { display: none; }
@container (max-width: 420px) {
  .wl-kit { gap: 6px; }
  .wl-tile, .wl-tile svg { width: 26px; height: 26px; }
}
.wl-lamp {
  --lamp: var(--ink-2); --lamp-tick: var(--surface);
  position: relative; flex: none; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid var(--lamp); border-radius: 50%;
}
.wl-lamp.st-analysed { background: var(--lamp); }
.wl-lamp.st-analysed::after {
  content: ""; position: absolute; left: 2.8px; top: .1px; box-sizing: border-box; width: 3.5px; height: 6.5px;
  border: solid var(--lamp-tick); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.wl-lamp.st-running { background: repeating-linear-gradient(135deg, var(--lamp) 0 2px, transparent 2px 4px); }
.wl-lamp.st-queued { border-style: dashed; }
.wl-lamp.st-held {
  background: linear-gradient(90deg, transparent calc(50% - 2px), var(--lamp) 0 calc(50% - .75px), transparent 0 calc(50% + .75px),
    var(--lamp) 0 calc(50% + 2px), transparent 0) center / 100% 6px no-repeat;
}
@media (forced-colors: active) { .wl-lamp { forced-color-adjust: none; --lamp: CanvasText; --lamp-tick: Canvas; } }
.watch-live:is(.open, .closing) > .wl-top { border-bottom: 1px solid var(--line); }
@media (min-width: 1181px) {
  .watch-split > .watch-live .wl-toggle .caret .c1 { display: none; }
  .watch-split > .watch-live .wl-toggle .caret .c2 { display: inline; }
  .watch-live:not(.open, .closing) > .wl-top { flex: 1; }
  .watch-live:not(.open, .closing) .wl-toggle { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding: 14px 0 18px; }
  .watch-live:not(.open, .closing) .wl-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .watch-live:not(.open, .closing) .wl-cue { order: -2; flex-direction: column; gap: 5px; width: 44px; min-height: 0; margin: 0; padding: 9px 0 8px; }
  .watch-live:not(.open, .closing) .caret { order: -1; }
  .watch-live:not(.open, .closing) .caret svg { width: 16px; height: 16px; transform: rotate(90deg); }
  .watch-live:not(.open, .closing) .wl-act { font-size: 11px; }
  .watch-live:not(.open, .closing) .wl-kit { order: -1; flex-direction: column; gap: 10px; }
  .watch-live:not(.open, .closing) :is(.wl-tile, .wl-tile svg) { width: 36px; height: 36px; }
  .watch-live:not(.open, .closing) .wl-lamp { margin-top: auto; }
  .watch-live:not(.open, .closing) .wl-toggle:hover .caret svg { translate: -2px 0; }
  .watch-live:is(.open, .closing) .wl-toggle .caret svg { transform: rotate(-90deg); }
  .watch-live.open .wl-toggle:hover .caret svg { translate: 2px 0; }
}
@media (prefers-reduced-motion: reduce) { .wl-toggle .caret svg { transition: none; } }
.wl-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.wl-part { min-width: 0; padding: 16px 20px 18px; }
.wl-part + .wl-part { border-top: 1px solid var(--line); }
.wl-head { display: flex; align-items: center; gap: 10px; min-height: 22px; margin-bottom: 12px; }
.wl-head h3 { margin: 0; font-size: 13px; line-height: 1.2; letter-spacing: var(--track); text-transform: var(--case); }
.wl-head::after {
  content: ""; flex: 1 1 16px; height: 7px;
  background: linear-gradient(var(--line-strong), var(--line-strong)) left center / 100% 1px no-repeat,
    linear-gradient(var(--wl-tick), var(--wl-tick)) right center / 1px 100% no-repeat;
}
.wl-gauge { margin: 0 0 16px; }
.wl-g-row { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; min-height: 24px; margin-bottom: 8px; }
.wl-g-team { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; min-width: 0; color: var(--ink-2); font: 500 var(--label-size)/1.2 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.wl-g-team + .wl-g-team { justify-content: flex-end; text-align: right; }
.wl-g-team b { color: var(--ink); font: 800 26px/.85 var(--font-hero); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.wl-meter {
  --wl-ga: var(--team-light); --wl-gb: var(--team-dark); --wl-ea: var(--team-light-edge); --wl-eb: var(--team-dark-edge);
  position: relative; height: 8px; border-radius: var(--tick);
  background: linear-gradient(90deg, var(--wl-ga) calc(var(--wl-a) * 100%), var(--wl-gb) 0); transition: --wl-a .15s linear;
}
.wl-meter[data-a="dark"] { --wl-ga: var(--team-dark); --wl-gb: var(--team-light); --wl-ea: var(--team-dark-edge); --wl-eb: var(--team-light-edge); }
.wl-meter::before, .wl-meter::after { content: ""; position: absolute; top: 0; bottom: 0; border-radius: inherit; pointer-events: none; }
.wl-meter::before { left: 0; right: calc((1 - var(--wl-a)) * 100%); box-shadow: inset 0 0 0 1px var(--wl-ea); }
.wl-meter::after { left: calc(var(--wl-a) * 100%); right: 0; box-shadow: inset 0 0 0 1px var(--wl-eb); }
.wl-meter.none { background: var(--surface-3); }
.wl-meter.none::before, .wl-meter.none::after { content: none; }
.wl-needle { position: absolute; z-index: 1; top: -4px; bottom: -4px; left: calc(var(--wl-a) * 100%); width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 0 1px var(--accent-edge); }
.wl-meter.none .wl-needle { display: none; }
.wl-scale {
  position: relative; height: 5px; margin-top: 6px;
  background: repeating-linear-gradient(90deg, var(--wl-tick) 0 1px, transparent 1px 10%),
    linear-gradient(var(--wl-tick), var(--wl-tick)) right / 1px 100% no-repeat;
}
.wl-scale::after { content: ""; position: absolute; top: 0; left: calc(50% - .5px); width: 1px; height: 9px; background: var(--ink-2); }
.wl-rink { position: relative; }
.wl-rink canvas { display: block; width: 100%; height: auto; }
.wl-wait { display: grid; place-items: center; aspect-ratio: 2.2; border-radius: var(--radius-s); background: var(--surface-2); color: var(--ink-2); font: 500 13px/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); font-variant-numeric: tabular-nums; }
.wl-rink::after, .wl-plot::after {
  --b: var(--wl-tick); --l: 9px;
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  background:
    linear-gradient(var(--b), var(--b)) left top / var(--l) 1px no-repeat, linear-gradient(var(--b), var(--b)) left top / 1px var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) right top / var(--l) 1px no-repeat, linear-gradient(var(--b), var(--b)) right top / 1px var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / var(--l) 1px no-repeat, linear-gradient(var(--b), var(--b)) left bottom / 1px var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / var(--l) 1px no-repeat, linear-gradient(var(--b), var(--b)) right bottom / 1px var(--l) no-repeat;
}
.wl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; color: var(--ink-2); font: 500 12px/1.4 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.wl-legend .ramp { width: 72px; max-width: 72px; }
.rink-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--ink-2); font: 500 12px/1.3 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.rink-end { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rink-end.left::before, .rink-end.right::after { content: ""; flex: none; border-block: 4px solid transparent; }
.rink-end.left::before { border-right: 6px solid currentColor; }
.rink-end.right::after { border-left: 6px solid currentColor; }
.jersey-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--ink); font: 500 12px/1.4 var(--font-label); letter-spacing: var(--track-s); text-transform: var(--case); }
.jersey-key:empty { display: none; }
.jersey-key + .wl-legend { margin-top: 8px; }
.jersey-key:not(:empty) + .wl-legend .team-dot, .rink-key:has(> .jersey-key) + .rink-legend .team-dot { display: none; }
.rink-key { padding: 10px 20px 0; border-top: 1px solid var(--line); }
.rink-key > .rink-ends { margin-top: 0; }
.rink-key > .jersey-key { margin-top: 8px; }
.rink-key:not([hidden]) + .rink-legend { padding-top: 10px; border-top: 0; }
.rink-why { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; }
.wl-video { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.wl-video h3 { margin: 0; font-size: 13px; line-height: 1.2; letter-spacing: var(--track); text-transform: var(--case); }
.wl-switches { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-foot { display: flex; min-width: 0; padding: 12px 20px 16px; border-top: 1px solid var(--line); }
@media (pointer: coarse) { .wl-switches .toggle, .wl-open { min-height: 44px; } }
.watch-tl > .tl-card { margin-top: 0; }
.watch-tl:not([hidden]) > .tl-card { animation: wl-rise .32s var(--wl-ease) .12s backwards; }
.wl-vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; min-height: 46px; margin-bottom: 12px; }
.wl-team { position: relative; display: grid; align-content: start; gap: 5px; min-width: 0; padding-left: 12px; }
.wl-vals .team-row { display: block; min-width: 0; color: var(--ink-2); font: 500 var(--label-size)/1.25 var(--font-label); overflow-wrap: anywhere; }
.wl-vals .team-row .bar { position: absolute; top: 1px; bottom: 1px; left: 0; width: 3px; height: auto; }
.wl-val { white-space: nowrap; }
.wl-num { color: var(--ink); font: 800 28px/.85 var(--font-hero); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.wl-team.none .wl-num { color: var(--muted); }
.wl-team.none .unit { visibility: hidden; }
.wl-plot { position: relative; min-height: 120px; }
.wl-plot svg { display: block; width: 100%; height: 120px; cursor: pointer; user-select: none; touch-action: pan-y; }
.wl-plot svg text { font-family: var(--font-mono); }
.wl-none { display: grid; place-items: center; height: 120px; margin: 0; color: var(--ink-2); font-size: 14px; }
.wl-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 18px 20px 20px; }
.wl-msg p { margin: 0; color: var(--ink-2); }
@container (min-width: 640px) {
  .wl-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .wl-ice { grid-row: span 2; }
  .wl-chart { border-left: 1px solid var(--line); }
  .wl-ice + .wl-chart { border-top: 0; }
  .wl-video, .wl-foot { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .wl-part { padding: 14px 16px 16px; }
  .wl-msg { padding: 14px 16px 16px; }
  .wl-video { padding: 12px 16px; }
  .wl-foot { padding: 12px 16px 14px; }
  .wl-toggle { gap: 10px; padding: 10px 16px; }
}
@keyframes wl-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes wl-fly-in { from { opacity: 0; transform: translateX(36px); } }
@keyframes wl-fly-out { to { opacity: 0; transform: translateX(36px); } }
.watch-live.open :is(.wl-msg, .wl-part, .wl-video, .wl-foot) { animation: wl-rise .32s var(--wl-ease) backwards; }
.watch-live.open .wl-ice + .wl-chart { animation-delay: .06s; }
.watch-live.open .wl-chart + .wl-chart { animation-delay: .12s; }
@media (min-width: 1181px) {
  .watch-live.open > .wl-top, .watch-live.open :is(.wl-msg, .wl-part, .wl-video, .wl-foot) { animation: wl-fly-in .44s var(--wl-ease) .03s backwards; }
  .watch-live.open :is(.wl-msg, .wl-ice) { animation-delay: .1s; }
  .watch-live.open .wl-ice + .wl-chart { animation-delay: .16s; }
  .watch-live.open .wl-chart + .wl-chart { animation-delay: .22s; }
  .watch-live.closing > * { animation: wl-fly-out var(--wl-fold) ease-in forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .watch-live :is(.wl-top, .wl-parts, .wl-msg, .wl-part, .wl-video, .wl-foot), .watch-tl > .tl-card { animation: none !important; }
  .watch-split > .watch-live, .wl-meter { transition: none; }
}
.watch-card.pinned:not(.cover) { clip-path: none; }
.watch-card.pinned:not(.cover) > .watch-stage { position: fixed; top: var(--pin-top); left: var(--pin-left); z-index: 15; width: var(--pin-w); box-shadow: var(--shadow-pop); }
.watch-card.pinned:not(.cover) > .watch-stage + * { margin-top: var(--pin-h); }
.watch-card > .watch-stage + * { transition-property: none; }

.tags-card { display: grid; gap: 14px; margin-top: 20px; padding: 18px 20px 16px; }
.tags-head h2 { margin: 0; font-size: var(--fs-18); letter-spacing: var(--track-s); text-transform: var(--case); }
.tags-head p { margin: 4px 0 0; max-width: 64ch; }
.tag-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 14px; }
.tag-row { display: grid; grid-column: 1 / -1; grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-columns: subgrid; align-items: center; gap: 8px 14px; }
.tag-kind { color: var(--ink); font-weight: 600; font-size: 14px; }
.tag-row .chips { gap: 8px; }
.toggle[aria-busy="true"] { cursor: progress; }
.toggle[aria-disabled="true"] { cursor: not-allowed; }
.toggle[aria-disabled="true"]:hover { border-color: var(--chip-on-line); }
.tag-lock { display: inline-flex; }
.tag-lock[hidden] { display: none; }
.tag-lock svg { width: 11px; height: 11px; }
.tag-hints { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.tag-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: var(--ink-2); font-size: 14px; }
.tags-status { margin: 0; color: var(--ink-2); font-size: 14px; }
.tags-status:empty { display: none; }
.clip-tagged { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.badge.tagged { color: var(--ink); background: var(--surface-3); border-color: transparent; font-weight: 600; }
@media (max-width: 760px) {
  .tags-card { padding: 16px 16px 14px; }
}

.simple-page { max-width: 46rem; padding: 28px 20px 72px; font-size: 18px; line-height: 1.45; }
.simple-page h2 { margin: 0 0 14px; font: var(--w-head) 24px/1.2 var(--font-display); letter-spacing: var(--track-s); text-transform: var(--case); }
.simple-page section + section { margin-top: 40px; }
.simple-head { display: grid; justify-items: start; gap: 12px; margin: 8px 0 28px; }
.simple-head h1 { margin: 0; font: var(--w-head) 34px/1.12 var(--font-display); letter-spacing: var(--track-head); text-transform: var(--case); overflow-wrap: anywhere; }
.simple-head p { margin: 0; color: var(--ink-2); }
.simple-back { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin: 0 0 0 -8px; padding: 0 8px; color: var(--ink); font: var(--w-ui) 17px/1 var(--font-ui); text-decoration: none; }
.simple-back svg { width: 20px; height: 20px; }
.simple-back:hover span { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.simple-note { margin: 0; color: var(--ink-2); }
.simple-note.bad b { color: var(--bad); }
.simple-wait { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-2); }
.simple-who { display: flex; flex-wrap: wrap; gap: 10px; }
.simple-num { min-width: 68px; min-height: 52px; padding: 0 18px; border: 2px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); font: 700 22px/1 var(--font-mono); clip-path: var(--cut-s); cursor: pointer; }
.simple-num:hover { border-color: var(--ink-2); }
.simple-num[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.simple-game-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.simple-game { display: grid; grid-template-columns: 112px minmax(0, 1fr) 56px; align-items: center; gap: 16px; min-height: 84px; padding: 12px 14px 12px 12px; border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; clip-path: var(--cut); }
.simple-game:hover { border-color: var(--ink-2); }
.simple-game:hover .sg-who { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sg-pic { aspect-ratio: 16 / 9; border-radius: var(--radius-s); background: var(--stage) center / cover no-repeat; }
.sg-text { display: grid; gap: 2px; min-width: 0; }
.sg-when { color: var(--ink-2); font-size: 16px; }
.sg-who { font: var(--w-head) 20px/1.25 var(--font-display); overflow-wrap: anywhere; }
.sg-result { font: 600 17px/1.3 var(--font-mono); }
.sg-go { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--play-radius); background: var(--accent); color: var(--on-accent); clip-path: var(--cut-s); }
.sg-go svg { width: 22px; height: 22px; margin-left: 3px; }
.simple-more { min-height: 52px; margin-top: 14px; padding: 0 22px; font-size: 17px; }
.simple-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 20px; }
.simple-section-head h2 { margin: 0; }
.simple-count { flex: 1 1 auto; margin: 0; color: var(--ink-2); }
.simple-play-all { min-height: 56px; padding: 0 26px; font-size: 19px; }
.simple-play-all svg { width: 18px; height: 18px; }
.simple-clip-group + .simple-clip-group { margin-top: 28px; }
.simple-clip-group h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; font: var(--w-head) 19px/1.3 var(--font-display); text-transform: var(--case); }
.simple-result { color: var(--ink-2); font: 500 16px/1.3 var(--font-mono); text-transform: none; }
.simple-clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 16px 12px; margin: 0; padding: 0; list-style: none; }
.simple-clip { display: grid; gap: 6px; color: var(--ink); text-decoration: none; }
.simple-clip .poster { border-radius: var(--radius-s); }
.simple-clip:hover .poster { box-shadow: 0 0 0 3px var(--ink-2); }
.simple-clip:focus-visible { outline-offset: 4px; }
.simple-clip-play { position: absolute; z-index: 4; left: 50%; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--stage-chip); color: var(--stage-ink); }
.simple-clip-play svg { width: 18px; height: 18px; margin-left: 3px; }
.simple-clip-name { color: var(--ink-2); font: 500 14px/1.2 var(--font-mono); }
:root[data-mode="simple"] .game-tabs a { min-height: 56px; font-size: 18px; }
:root[data-mode="simple"] .pick-label { font-size: 17px; }
:root[data-mode="simple"] .pick-chip { min-width: 64px; min-height: 52px; font-size: 20px; }
:root[data-mode="simple"] .watch-scope { font-size: 17px; }
:root[data-mode="simple"] .watch-scope .btn { min-height: 48px; font-size: 16px; }
:root[data-mode="simple"] .yg-plain .sc-facts b { font-size: 22px; }
:root[data-mode="simple"] .watch-key { display: none; }
:root[data-mode="simple"] .watch-btns .btn { min-height: 52px; padding: 0 20px; font-size: 17px; }
:root[data-mode="simple"] .watch-btns .btn svg { width: 18px; height: 18px; }
:root[data-mode="simple"] .watch-now { font-size: 16px; }
:root[data-mode="simple"] .watch-clip { display: inline-flex; align-items: center; min-height: 44px; }
:root[data-mode="simple"] .watch-segs { min-height: 44px; width: min(100%, max(calc(var(--share) * 100%), calc(var(--n) * 18px))); }
:root[data-mode="simple"] .watch-seg, :root[data-mode="simple"] .watch-seg:hover { min-width: 16px; height: 34px; }
:root[data-mode="simple"] .watch-seg[aria-current="true"] { height: 44px; }
.watch-only { margin-left: auto; }
.watch-show { margin-left: auto; }
.watch-show:not([hidden]) + .watch-only { margin-left: 0; }
@media (max-width: 760px) {
  .watch-card .section-head:has(> .watch-show:not([hidden])) { column-gap: 8px; }
  .watch-card .section-head:not(.watch-tools-apart):has(> .watch-show:not([hidden])):has(> .watch-only:not([hidden])) > h2 {
    flex-basis: 100%;
  }
  .watch-card .section-head.watch-tools-apart > .watch-only { margin-left: auto; }
}
.show-pop { display: grid; gap: 14px; width: min(21rem, var(--pop-room)); padding: 6px; }
.show-group { display: grid; gap: 8px; }
.show-group[hidden] { display: none; }
.show-label { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.show-pop .chips { gap: 8px; }
.show-pop .toggle .n { font: 600 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.show-pop .toggle .n:empty { display: none; }
@media (pointer: coarse) { .show-pop .toggle { min-height: 44px; } }
.rule-form { display: grid; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.rule-line { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
.rule-form .text-input.num { width: 5.5rem; min-height: 36px; padding: 6px 10px; font-variant-numeric: tabular-nums; }
.rule-form .rule-say { width: 100%; min-height: 36px; padding: 6px 10px; }
.rule-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.rule-words { display: inline-flex; align-items: center; gap: 4px; }
.rule-status { margin: 0; color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
:root[data-mode="simple"] .watch-only { min-height: 48px; padding: 0 18px; font-size: 16px; }
:root[data-mode="simple"] :is(.watch-sub, .watch-sub-room) { color: var(--ink-2); font-size: 16px; }
.watch-sub-box { display: inline-grid; min-width: 0; }
.watch-sub-box > * { grid-area: 1 / 1; }
.watch-sub-room { visibility: hidden; }
.watch-sub-room:empty { display: none; }
.watch-rings, .sc-rings { pointer-events: none; }
.watch-rings canvas, .sc-rings canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-where { margin: 0; }
.sc-res { font-family: var(--font-mono); }
.sc-sum { margin: -10px 0 22px; }
.sc-sum h2 { margin: 0 0 6px; color: var(--ink-2); font-size: 17px; }
.sc-facts { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; padding: 0; list-style: none; }
.sc-facts li { display: flex; align-items: baseline; gap: 8px; }
.sc-facts span { color: var(--ink-2); }
.sc-facts b { font: 700 24px/1.25 var(--font-mono); white-space: nowrap; }
.sc-player { overflow: hidden; clip-path: var(--cut-bottom); }
.sc-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: max(200px, calc(100vh - 300px)); background: var(--stage); cursor: pointer; }
.sc-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--stage); }
.sc-stage.steady video { background: transparent; }
@media (orientation: landscape) and (max-height: 560px) {
  .sc-stage { max-height: calc(100vh - var(--bar-h)); max-height: calc(100dvh - var(--bar-h)); }
}
.watch-stage.stage-full, .sc-stage.stage-full { max-height: none; aspect-ratio: auto; width: 100%; height: 100%; }
.sc-player.cover, .watch-card.cover {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0;
  clip-path: none; overflow: hidden; background: var(--stage); overscroll-behavior: contain; touch-action: none;
}
.sc-player.cover > :not(.sc-stage), .watch-card.cover > :not(.watch-stage) { display: none; }
.sc-player.cover > .sc-stage, .watch-card.cover > .watch-stage { flex: 1 1 auto; min-height: 0; }
body:has(.sc-player.cover, .watch-card.cover) { overflow: hidden; }
:root[data-mode="simple"] .watch-full { min-height: 52px; padding: 0 20px; font-size: 17px; }
:root[data-mode="simple"] .watch-full svg { width: 18px; height: 18px; }
.sc-bar { display: flex; align-items: center; gap: 14px; padding: 14px 20px 2px; }
.sc-seek { flex: 1; min-width: 0; height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.sc-time { color: var(--ink-2); font: 500 16px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-controls { display: flex; justify-content: center; padding: 6px 16px 14px; }
.sc-play { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border: 0; border-radius: var(--play-radius); background: var(--accent); color: var(--on-accent); clip-path: var(--cut-s); cursor: pointer; }
.sc-play:hover { background: var(--accent-hover); }
.sc-play svg { width: 28px; height: 28px; }
.sc-play[data-shows="play"] svg { margin-left: 4px; }
.sc-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 16px 18px; }
.sc-options .toggle, .sc-full { min-height: 48px; padding: 0 18px; font-size: 16px; }
.sc-full svg { width: 16px; height: 16px; }
.sc-status { margin: 0; padding: 0 20px 18px; text-align: center; color: var(--ink); }
.sc-status:empty { display: none; }
.sc-talk { display: grid; gap: 20px; margin-top: 24px; }
.simple-player .cheer-head h2 { font-size: 21px; }
.simple-player .cheer-head p, .simple-player .ground-rule { font-size: 16px; }
.simple-player .cheer-form textarea { font-size: 18px; }
.simple-player .cheer-form .btn { min-height: 48px; padding: 0 22px; font-size: 17px; }
.sc-said { padding: 18px 20px 20px; }
.sc-said h2 { font-size: 20px; }
.sc-said-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.sc-said-item { padding-left: 12px; border-left: 3px solid var(--line-strong); }
.sc-said-item.mine { border-left-color: var(--accent); }
.sc-said-who { margin: 0; color: var(--ink-2); font-size: 15px; }
.sc-said-who b { color: var(--ink); font-weight: 600; }
.sc-said-text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-said-cheer { margin: 2px 0 0; font-size: 34px; line-height: 1.15; }
.sc-said-replies { display: inline-block; margin-top: 4px; font-size: 16px; }
.sc-said-none { color: var(--ink-2); }
.sc-said-foot { margin: 18px 0 0; }
.account-mode-msg { margin: 0 8px 8px; color: var(--ink-2); font-size: 13px; }
.account-mode-msg:empty { display: none; }
@media (max-width: 480px) {
  .simple-page { padding: 18px 16px 56px; font-size: 17px; }
  .simple-head h1 { font-size: 28px; }
  .simple-game { grid-template-columns: 84px minmax(0, 1fr) 48px; gap: 12px; padding: 10px; }
  .sg-who { font-size: 18px; }
  .sg-go { width: 48px; height: 48px; }
  .sc-bar { padding: 12px 16px 0; }
  .sc-play { width: 68px; height: 68px; }
  .sc-facts b { font-size: 22px; }
}

.gd-card { margin-top: 24px; }
:is(.gd-card, .gd-form-card):has(details.pop[open]) { clip-path: none; }
.gd-head { align-items: center; }
.gd-count { font-size: 14px; }
.gd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.gd-say, .gd-trouble { margin: 0 20px 12px; }
.gd-off { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 20px 16px; padding: 10px 14px; border-radius: var(--radius-s); background: var(--warn-wash); color: var(--ink); }
.gd-off p { flex: 1 1 16rem; margin: 0; }
p.gd-off { margin: 0 0 20px; }
.gd-none { margin: 0; padding: 0 20px 18px; color: var(--ink-2); }
.gd-empty { margin-top: 24px; }
.gd-list { list-style: none; margin: 0; padding: 0; }
.gd-fold-head { padding: 12px 20px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; cursor: pointer; }
.gd-fold-head:hover { color: var(--ink); }
.gd-fold-head:focus-visible { outline-offset: -2px; }
.gd-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem minmax(12rem, auto); align-items: center; gap: 4px 16px; padding: 10px 20px; border-top: 1px solid var(--line); font-size: 14px; }
.gd-when { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-name { min-width: 0; font: 500 14px/1.3 var(--font-mono); overflow-wrap: anywhere; }
.gd-size { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.gd-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.gd-state progress.bar { width: 72px; }
.gd-row[data-state="failed"] .gd-state { color: var(--bad); }
.gd-queue .gd-row { grid-template-columns: minmax(0, 1fr) 5.5rem minmax(12rem, auto) auto; }
.gd-row-acts { display: flex; justify-content: flex-end; gap: 6px; }
.gd-why { grid-column: 1 / -1; font-size: 13px; }
.gd-why[hidden] { display: none; }
.gd-pick { display: grid; gap: 16px; margin-top: 0; padding: 20px; }
.gd-drop { display: grid; justify-items: center; gap: 10px; padding: 32px 20px; border: 2px dashed var(--line-strong); border-radius: var(--radius); color: var(--ink-2); text-align: center; }
.gd-drop b { color: var(--ink); font: var(--w-head) 18px/1.3 var(--font-display); letter-spacing: var(--track-s); text-transform: var(--case); }
.gd-drop.over { border-color: var(--accent); background: var(--accent-wash); }
.gd-sum { display: grid; gap: 8px; }
.gd-sum p, .gd-others { margin: 0; }
.gd-sum progress.bar { width: 100%; }
.gd-form-card { max-width: 46rem; }
.gd-form { display: grid; padding: 4px 20px 20px; }
.gd-when-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-when-row .text-input { width: auto; }
.text-input.gd-goals { width: 6.5rem; }
.gd-recorded { padding: 10px 0 0; }
.gd-form-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 16px; }
.gd-form-btns > [data-pop="more"] { margin-right: auto; }
.gd-head-acts:empty { display: none; }
.gd-offs { list-style: none; margin: 0; padding: 0 0 8px; }
.gd-off-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 20px; border-top: 1px solid var(--line); }
.gd-off-row a { color: var(--ink); }
@media (max-width: 640px) {
  .gd-row, .gd-queue .gd-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name size" "when state"; padding: 10px 16px; }
  .gd-queue .gd-row { grid-template-areas: "name size" "state acts" "why why"; }
  .gd-when { grid-area: when; }
  .gd-name { grid-area: name; }
  .gd-size { grid-area: size; }
  .gd-state { grid-area: state; }
  .gd-list:not(.gd-queue) .gd-state { justify-content: flex-end; }
  .gd-row-acts { grid-area: acts; }
  .gd-why { grid-area: why; }
  .gd-say, .gd-trouble, .gd-off { margin-inline: 16px; }
  .gd-none, .gd-pick, .gd-form, .gd-fold-head { padding-inline: 16px; }
  .gd-off-row { padding-inline: 16px; }
}