/*
 * The public website in Night Court · Red (master plan 0.7j; the design canvas's NC-Website and NC-System boards): the
 * home, Get in (/join), the leaderboards, a member's page (/p/<id>), your own (/me), and the Privacy Policy (/privacy) and
 * the Terms of Service (/terms). Load tokens.css first: the tokens
 * and the two self-hosted typefaces are the ones the Operations dashboard (dash.css) uses, so the two are one system.
 * Classes only: the CSP allows no inline style attribute. Red is a signal, never a wash. Every colour, size, tracking,
 * width and radius here is a token (tokens.css); the few lengths left are layout.
 */

/* ------------------------------------------------------------------ Base */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* No ground of its own: the page's (html's) shows, with the film grain over it and under the content */
  background: transparent;
  color: var(--text);
  font: var(--fs-text)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--red-text); text-decoration: none; transition: color var(--t-hover) var(--ease); }
a:hover { color: var(--red-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 2px; }
/* A link's ring gets soft corners; anything with corners of its own keeps them (the ring follows them) */
:where(a, summary):focus-visible { border-radius: var(--r1); }
::selection { background: var(--red-a35); color: var(--white); }
[hidden], .hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r2);
  background: var(--red); color: var(--white); font-weight: 700; transition: top var(--t-hover) var(--ease);
}
.skip-link:focus { top: 12px; color: var(--white); }
/* The page keeps the header's room (scroll-padding-top above); a section jumped to sits a little below it */
section[id], [id].anchor { scroll-margin-top: 4px; }
/* A status line given the focus after an action (Archive.keepFocus) is read, not drawn around */
.status-line:focus, .notice-banner:focus { outline: none; }

.wrap { width: 100%; max-width: 1168px; margin: 0 auto; padding: 0 24px; }
main { position: relative; flex: 1; }
/* The header is drawn by site.js: until it is, its room is kept, so nothing below it moves when it arrives. (Without
   JavaScript the static header in <noscript> takes the room itself.) */
html.js body:not(:has(> .site-header)) > main { margin-top: var(--header-h); }
.page { position: relative; isolation: isolate; padding-top: 56px; padding-bottom: var(--sp-section); }
/* The inner pages' head sits in a faint red haze (decorative) */
.page::before {
  content: ""; position: absolute; z-index: -1; top: calc(var(--header-h) * -1); right: 0; width: 72%; height: 560px; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 70% 30%, var(--red-a09), var(--red-a00) 70%);
}
/* ... over a band of the section backdrop (the Blender court light), full width behind the page head, fading out */
.page-band {
  position: absolute; left: 0; right: 0; top: 0; height: clamp(260px, 30vw, 460px); overflow: hidden; pointer-events: none;
  background-image: url('/assets/section-backdrop-1600x467.webp');
  background-image: image-set(url('/assets/section-backdrop-1600x467.avif') type('image/avif'), url('/assets/section-backdrop-1600x467.webp') type('image/webp'));
  background-size: cover; background-position: 50% 40%; opacity: 0.75;
  /* Its foot fades out to nothing (not to the ground's colour), so the film grain under it carries on without a seam */
  -webkit-mask-image: linear-gradient(180deg, var(--black) 45%, var(--black-a00) 100%);
  mask-image: linear-gradient(180deg, var(--black) 45%, var(--black-a00) 100%);
}
.page-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-a20) 30%, var(--bg-a55) 62%, var(--bg) 100%); }
@media (min-width: 1300px), (min-resolution: 1.5dppx) {
  .page-band { background-image: image-set(url('/assets/section-backdrop-2400x700.avif') type('image/avif'), url('/assets/section-backdrop-2400x700.webp') type('image/webp')); }
}

/* Without JavaScript: the parts it would fill say so once, and nothing reads "Loading" forever */
html.js .nojs-only { display: none !important; }
html:not(.js) .needs-js { display: none !important; }
/* Words that wait for an answer (Network Pass's "not open yet"): their room kept, never flashed before the answer */
html.js [data-pass-wait] { visibility: hidden; }

/* ------------------------------------------------------------------ Type */

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; text-wrap: balance; }
/* A paragraph's last line never holds one stray word (where the browser can) */
p, li, dd, figcaption, .step-text, .gate-text { text-wrap: pretty; }
.display { font-weight: 800; font-stretch: var(--wdth-display); text-transform: uppercase; letter-spacing: var(--track-display); line-height: 0.92; }
.page-title { font-size: var(--fs-display-page); font-weight: 800; font-stretch: var(--wdth-display); text-transform: uppercase; letter-spacing: var(--track-display); line-height: 0.98; overflow-wrap: break-word; }
.page-title span { color: var(--red-text); }
.section-title { font-size: var(--fs-display-section); font-weight: 800; font-stretch: var(--wdth-title); line-height: 1.1; }
.label-caps, .card-label {
  font-size: var(--fs-caption); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted);
}
.eyebrow {
  font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--red-text);
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); max-width: 600px; }
.muted { color: var(--muted); }
.soft { color: var(--text-2); }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.brass, .gold { color: var(--gold); }
.empty { color: var(--muted); }
.mt-s { margin-top: 12px; }
.mt { margin-top: 20px; }
.mt-l { margin-top: 32px; }
.section { margin-top: var(--sp-section); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: var(--sp-head); }
.section-head .aside { font-size: var(--fs-ui); color: var(--muted); }
.head-call { display: inline-flex; align-items: center; gap: 16px; }
.section-head:has(.head-call) { align-items: center; }
/* The archive's index (the site's signature): each section of a page numbered in the eyebrow's mono red, a hairline running
   on from the number to the edge, as the legal pages number their parts. Decorative: a screen reader hears the heading only. */
main { counter-reset: part; }
.section-head { position: relative; }
.section-head::before {
  content: counter(part, decimal-leading-zero); content: counter(part, decimal-leading-zero) / "";
  counter-increment: part; flex: 0 0 100%; margin-bottom: 6px;
  font: 500 var(--fs-caption)/1 var(--mono); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; color: var(--red-text);
}
/* ... and its hairline, drawn in from the number when the section rises into view (at once without motion) */
.section-head::after {
  content: ""; position: absolute; left: 4.5ch; right: 0; top: 6px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, var(--line), var(--line-soft)); transform-origin: left center;
  transition: transform 900ms var(--ease) 160ms;
}
.js .section-head.reveal:not(.in)::after { transform: scaleX(0); }
.page-head { position: relative; display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.page-head .lead { margin-top: 4px; }
.page-head .intro { font-size: var(--fs-body); max-width: 560px; }
.page-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

/* ------------------------------------------------------------------ Controls */

.button {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--tap); padding: 0 18px;
  border-radius: var(--r2); border: 1px solid var(--red); background: var(--red); color: var(--white);
  font-size: var(--fs-ui); font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.button:hover, .button:active { background: var(--red-press); border-color: var(--red-press); color: var(--white); text-decoration: none; }
.button:active { transform: translateY(1px) scale(0.985); }
/* The keyboard's ring: white around the red and gold calls (a red ring on red barely shows), red around the quiet ones */
.button:focus-visible { outline-offset: 3px; }
.button:not(.secondary):not(.ghost):not(.quiet):focus-visible { outline-color: var(--white); }
.button.secondary:active, .button.ghost:active { background: var(--s3); border-color: var(--line-hover); color: var(--text); }
.button.quiet:active { background: var(--s2); border-color: transparent; color: var(--text); }
.button.big { height: 54px; padding: 0 28px; border-radius: var(--r3); font-size: var(--fs-body); font-weight: 800; font-stretch: var(--wdth-title); letter-spacing: var(--track-button); text-transform: uppercase; }
.button.big.secondary, .button.big.ghost, .button.big.quiet { font-weight: 600; font-stretch: var(--wdth-normal); letter-spacing: var(--track-none); text-transform: none; padding: 0 24px; }
.button.secondary, .button.ghost { background: var(--s2); border-color: var(--line-strong); color: var(--text); }
.button.secondary:hover, .button.ghost:hover { background: var(--s3); border-color: var(--line-hover); color: var(--text); }
.hero .button.secondary { background: var(--s1-a60); }
.button.quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.button.quiet:hover { background: var(--s2); color: var(--text); }
.button.small { height: var(--tap); padding: 0 14px; font-size: var(--fs-small); }
.button:disabled, .button[aria-disabled="true"] { background: var(--s3); border-color: var(--s3); color: var(--faint); cursor: default; transform: none; }
/* The primary call's light sweep, once on hover (the system board's PLAY button) */
.button.sweep::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; pointer-events: none;
  background: linear-gradient(90deg, var(--white-a00), var(--white-a32), var(--white-a00));
  transform: translateX(-140%) skewX(-20deg);
}
.button.sweep:hover::after { animation: sweep 900ms var(--ease) 1; }
@keyframes sweep { to { transform: translateX(320%) skewX(-20deg); } }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* A link that stands on its own (not inside a sentence): a full tap target */
.link-tap { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
.link-tap.quiet { color: var(--text-2); }
.link-tap.quiet:hover { color: var(--text); }
.link-tap svg { margin-left: 6px; }

input[type="text"], input[type="search"], select, textarea {
  width: 100%; height: var(--tap); padding: 0 14px; border-radius: var(--r2);
  border: 1px solid var(--line-input); background: var(--bg); color: var(--text); font-size: var(--fs-body);
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red-text); box-shadow: 0 0 0 3px var(--red-a35); }
input[aria-invalid="true"] { border-color: var(--red-text); }
textarea { height: auto; min-height: 112px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
select { appearance: auto; }
label { display: block; margin-bottom: 8px; font-size: var(--fs-caption); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.field { margin-bottom: 16px; min-width: 0; }
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.row > .field { flex: 1 1 200px; }
.row > .field:last-child:has(> .button) { flex: 0 0 auto; }
.check {
  display: flex; align-items: center; gap: 12px; min-height: var(--tap); margin: 0; cursor: pointer;
  font-size: var(--fs-body); font-weight: 600; font-stretch: var(--wdth-normal); letter-spacing: var(--track-none); text-transform: none; color: var(--text);
}
.check input { width: 18px; height: 18px; accent-color: var(--red); flex: none; }

/* Chips and marks */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--s3); color: var(--text-2); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-chip); text-transform: uppercase; vertical-align: middle;
}
.chip.ok { background: var(--ok-wash); color: var(--ok); }
.chip.live, .chip.bad { background: var(--red-deep); color: var(--red-text); }
.chip.warn { background: var(--warn-wash); color: var(--warn); }
.chip.gold { background: var(--gold-deep); color: var(--gold); }
.chip svg { flex: none; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.chip .dot { width: 6px; height: 6px; }
.dot.ok { background: var(--ok); }
.dot.live, .dot.bad { background: var(--red-text); }
.dot.warn { background: var(--warn); }
.dot.gold { background: var(--gold); }
/* The strip's Network Pass only line: its dot stays beside the words when they wrap */
.strip-item.access { flex-wrap: nowrap; align-items: baseline; }
.strip-item.access .dot { transform: translateY(-1px); }
/* One living dot on a page (the status strip's): every other dot holds still */
.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.tier {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); vertical-align: middle; white-space: nowrap;
  background: var(--s3); color: var(--text-2); font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-chip); text-transform: uppercase;
}
.tier.network_pass { background: var(--gold-deep); color: var(--gold); }
.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 8px; border-radius: var(--r-pill); white-space: nowrap; vertical-align: middle;
  background: var(--s3); color: var(--text-2); font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-button); text-transform: uppercase;
}
.tag.good { background: var(--ok-wash); color: var(--ok); }
.tag.bad { background: var(--red-deep); color: var(--red-text); }
.tag.you { background: var(--red-deep); color: var(--red-text); }

/* Cards, panels, banners */
.card, .panel { background: var(--s1); border: 1px solid var(--edge); border-radius: var(--r3); padding: 24px; min-width: 0; }
.panel.flush { padding: 0; overflow: hidden; }
.panel > h3, .panel > header h3 { font-size: var(--fs-caption); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.grid { display: grid; gap: var(--sp-grid); align-items: start; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: stretch; }
/* A grid whose every part is hidden takes no room (its margin was an empty gap) */
.grid:not(:has(> :not([hidden]))) { display: none; }
.panel-stack { display: flex; flex-direction: column; }
.panel-foot { margin-top: auto; padding-top: 20px; }
.list { list-style: none; }
.list > li { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.list > li:first-child { border-top: 0; padding-top: 0; }
.list .when { color: var(--muted); font-size: var(--fs-small); font-family: var(--mono); margin-top: 4px; }
.scroll { overflow-x: auto; max-width: 100%; }
.notice-banner {
  position: relative; display: block; padding: 14px 16px 14px 48px; margin-bottom: 20px; border-radius: var(--r2);
  border: 1px solid var(--warn-line); background: var(--s1); color: var(--text); font-size: var(--fs-body); line-height: 1.5;
}
.notice-banner::before {
  content: "!"; position: absolute; left: 16px; top: 14px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.6px solid var(--warn); color: var(--warn); font: 700 var(--fs-label)/15px var(--sans); text-align: center;
}
.notice-banner.bad { border-color: var(--red-line); background: var(--red-ink); }
.notice-banner.bad::before { border-color: var(--red-text); color: var(--red-text); }
/* Network Pass open (site.js passOpen): the gold of the pass, a check instead of the warning mark. */
.notice-banner.open { border-color: var(--gold-edge); background: var(--gold-a08); }
.notice-banner.open::before { content: "\2713"; border-color: var(--gold); color: var(--gold); }
.notice-banner a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.notice-banner strong { color: var(--text); }
.alert-wrap { padding-top: 20px; }
/* /join while a sign-in waits for the Discord join: the invite is the page's one call, on its own line in the banner */
.join-wait-call { display: block; margin-top: 12px; }
.join-wait-call .button { text-decoration: none; }
.alert-wrap .notice-banner { margin-bottom: 0; }
.status-line { min-height: 22px; margin-top: 12px; font-size: var(--fs-ui); color: var(--text-2); }
.status-line:empty { min-height: 0; margin-top: 0; }
.status-line.good { color: var(--ok); }
.status-line.bad { color: var(--red-text); }

/* A disclosure (details.disclosure): a quiet line and a chevron that turns; what it holds rises in when opened */
.disclosure > summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; list-style: none;
  color: var(--text-2); font-size: var(--fs-small); font-weight: 600; transition: color var(--t-hover) var(--ease);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover, .disclosure[open] > summary { color: var(--text); }
.disclosure > summary::after {
  content: ""; width: 6px; height: 6px; margin: -3px 2px 0; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--t-panel) var(--ease);
}
.disclosure[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.disclosure > summary svg { flex: none; color: var(--muted); }
.disclosure[open] > :not(summary) { animation: rise var(--t-panel) var(--ease) both; }

/* Tabs: an underline in red, as the dashboard */
.tabs { position: relative; display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button:focus-visible { outline-offset: -2px; }
/* When the row runs past the edge (a phone), its end fades, so the boards beyond read as more to scroll to */
@media (max-width: 600px) {
  .tabs { -webkit-mask-image: linear-gradient(90deg, var(--black) calc(100% - 40px), var(--black-a00)); mask-image: linear-gradient(90deg, var(--black) calc(100% - 40px), var(--black-a00)); }
}
.tabs button {
  flex: none; height: var(--tap); padding: 0 14px; background: none; border: 0; border-radius: var(--r1) var(--r1) 0 0; color: var(--muted);
  font-size: var(--fs-body); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
.tabs button:hover { color: var(--text); background: var(--s1); }
.tabs button[aria-selected="true"] { color: var(--text); font-weight: 700; box-shadow: inset 0 -2px 0 var(--red); }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
th {
  text-align: left; padding: 12px 16px; white-space: nowrap; border-bottom: 1px solid var(--line);
  font-size: var(--fs-label); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
td { padding: 13px 16px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:first-child td { border-top: 0; }
tbody tr { transition: background-color var(--t-hover) var(--ease); }
tbody tr:hover td { background: var(--white-a02); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
th.num { font-family: var(--sans); }

/* ------------------------------------------------------------------ Header */

.site-header { position: sticky; top: 0; z-index: 50; isolation: isolate; view-transition-name: site-header; }
/* Its backing on a layer of its own. Over the home's hero it fades in with the scroll (motion.js sets --backing, 0 at the
   top to 1 by 160 px), without a blur there: the hero's loop plays under it, and the status strip already blurs it once. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bg-a84); border-bottom: 1px solid var(--line-soft);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  transition: opacity var(--t-panel) var(--ease);
}
.site-header.over::before { opacity: var(--backing, 0); background: var(--bg-a92); -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; }
.site-header.over.menu-open::before { opacity: 1; }
.scroll-line {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--red), var(--red-text)); transform-origin: left center; transform: scaleX(0);
}
.header-bar { position: relative; display: flex; align-items: center; gap: 36px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; min-height: var(--tap); color: var(--text); }
.brand:hover { color: var(--text); }
.brand-name { font-size: var(--fs-small); font-weight: 800; font-stretch: var(--wdth-display); letter-spacing: var(--track-caps); white-space: nowrap; }
/* The AN lockup (the kit's own spacing and wordmark), decorative: the link carries the name. It may narrow on a tiny
   screen (it keeps its shape, left-aligned) rather than push the menu button off the edge. */
.brand-lockup { display: block; height: 22px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.footer-brand .brand-lockup { height: 18px; }
img.mark { display: block; flex: none; }
.menu { flex: 1; min-width: 0; display: flex; align-items: center; gap: 20px; }
.nav { flex: 1; display: flex; align-items: center; gap: 22px; min-width: 0; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-2); font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: var(--r-pill); background: var(--line-hover);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--t-panel) var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"]::after { background: var(--red); transform: none; }
.account { display: flex; align-items: center; gap: 12px; flex: none; white-space: nowrap; font-size: var(--fs-ui); }
.account .button { height: var(--tap); }
.who-link { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--text); font-weight: 600; }
.who-link:hover { color: var(--text); }
.who-link:hover .who { text-decoration: underline; text-underline-offset: 3px; }
/* Your own page (/me): the same red mark under the link as the nav's current page */
.who-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: var(--r-pill); background: var(--red); }
.avatar {
  position: relative; overflow: hidden; width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--s3); color: var(--text); font-size: var(--fs-small); font-weight: 800;
}
/* The member's Discord avatar over the initial (site.js avatar), fading in once drawn. Its ring: gold for a Network Pass
   member, a line for everyone else (red only marks the page you are on). */
.avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--line-strong); pointer-events: none; }
.avatar.pass::after { box-shadow: inset 0 0 0 2px var(--gold); }
.avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-panel) var(--ease); }
/* Drawn: the photo shows and the initial under it goes, in the header chip and on the record's head alike (2026-10-13: the
   record's showed only the initial, its photo left at opacity 0) */
.avatar.has-photo, .record-avatar.has-photo { color: transparent; }
.has-photo > .avatar-photo { opacity: 1; }
.who { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.account .reach { color: var(--muted); font-size: var(--fs-small); }
/* What signing in agrees to: under the Sign in of the phone menu only (below); the desktop header stays one line */
.account .signin-legal { display: none; }
.menu-button {
  display: none; width: var(--tap); height: var(--tap); place-items: center; flex: none; margin-left: auto;
  border-radius: var(--r2); border: 1px solid var(--line); background: var(--s1); color: var(--text); cursor: pointer;
  transition: border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
.menu-button:hover { border-color: var(--line-strong); }
.menu-button .bars, .menu-button .bars::before, .menu-button .bars::after {
  display: block; width: 18px; height: 2px; border-radius: var(--r-pill); background: currentColor; content: "";
  transition: transform var(--t-panel) var(--ease), opacity var(--t-hover) var(--ease);
}
.menu-button .bars { position: relative; }
.menu-button .bars::before { position: absolute; top: -6px; left: 0; }
.menu-button .bars::after { position: absolute; top: 6px; left: 0; }
.menu-open .menu-button .bars { background: transparent; }
.menu-open .menu-button .bars::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-button .bars::after { transform: translateY(-6px) rotate(-45deg); }
/* The static header without JavaScript (<noscript>): the sections, wrapped when they must; no menu to open */
.site-header.static .header-bar { height: auto; min-height: var(--header-h); flex-wrap: wrap; gap: 4px 24px; padding-top: 8px; padding-bottom: 8px; }
.site-header.static .nav { flex-wrap: wrap; gap: 0 20px; }

/* ------------------------------------------------------------------ Footer */

.site-footer { position: relative; overflow: hidden; isolation: isolate; margin-top: 0; border-top: 1px solid var(--line-soft); background: var(--bg); }
/* The AN mark, large and barely there, closing every page (decorative) */
.site-footer::after {
  content: ""; position: absolute; z-index: -1; right: -48px; bottom: -72px; width: 460px; aspect-ratio: 646 / 480; pointer-events: none;
  background: linear-gradient(160deg, var(--white-a05), var(--white-a00) 75%);
  -webkit-mask: url('/assets/an-mark-on-dark.svg') center / contain no-repeat; mask: url('/assets/an-mark-on-dark.svg') center / contain no-repeat;
}
/* The brand, then Play, Community, About and Legal (Privacy and Terms, 2026-10-13); two by two on a phone */
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 36px; font-size: var(--fs-ui); }
/* The lockup's top on the columns' headings */
.footer-brand .brand { align-items: flex-start; }
/* The last line: the year and the name, and that we are no publisher's */
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 20px; padding-bottom: 28px;
  font-size: var(--fs-caption); color: var(--faint);
  /* Its hairline spans the content, not the gutters */
  background: linear-gradient(var(--line-soft), var(--line-soft)) no-repeat top center / calc(100% - 48px) 1px;
}
.footer-base .mono { letter-spacing: var(--track-none); }
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-brand .brand-name { font-size: var(--fs-caption); }
.footer-line { max-width: 400px; font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.footer-col { display: flex; flex-direction: column; gap: 0; }
.footer-col h2 { font-size: var(--fs-label); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.footer-col a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-2); align-self: flex-start; }
.footer-col a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color var(--t-hover) var(--ease), text-decoration-color var(--t-panel) var(--ease); }
.footer-col a:hover { color: var(--text); text-decoration-color: var(--line-hover); }
@media (min-width: 1041px) {
  .footer-col a { min-height: 32px; }
  .footer-grid { padding-bottom: 28px; }
}

/* ------------------------------------------------------------------ Home: the hero
 * The art is 16:9 (the AN right of centre, the left dark for the headline). The hero's height follows it (the width's 16:9
 * plus the header, *ours*: at least 640 px, at most the window or 1440 px, the art's own height), so the mark is never cut or
 * buried on a tall one; the art leans right (object-position 70 %) when it is cropped. Tall and portrait screens (a phone,
 * a tablet held upright) get the portrait art in a band at the top, the words below it. */

.hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: max(640px, min(100vh, 56.25vw + var(--header-h), 1440px)); border-bottom: 1px solid var(--line-soft);
  isolation: isolate; background: var(--black);
}
/* The home's hero runs under the header, which is see-through over it */
.home .hero { margin-top: calc(var(--header-h) * -1); padding-top: var(--header-h); }
.hero-stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; transform-origin: 50% 28%; }
.hero-media { position: absolute; inset: -18px; }
.hero-picture { position: absolute; inset: 0; }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-video { opacity: 0; transition: opacity 1200ms var(--ease); }
.video-on .hero-video { opacity: 1; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, var(--bg-a55) 50%, var(--bg-a00) 100%); }
.hero-shade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, var(--bg-a00), var(--bg)); }
.hero-dim { position: absolute; inset: 0; background: var(--black); opacity: 0; }
/* The film grain over the hero's art and ground (under its words): it keeps the loop's dark haze from showing 8-bit steps,
   and on a phone it runs on past the art's band, so the band ends without a seam */
.hero::after {
  content: ""; position: absolute; inset: -128px; z-index: -1; pointer-events: none;
  background: url('/assets/grain.png') repeat; opacity: 0.06; animation: grain 1.4s steps(1) infinite;
}
.hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: clamp(48px, 18vh - 40px, 220px); }
.hero h1 .line { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 .line-in { display: block; }
.hero-inner > * { max-width: 760px; }
.hero h1 { font-size: var(--fs-display-hero); }
.hero h1 .line { display: block; white-space: nowrap; }
.hero .lead { max-width: 560px; text-wrap: balance; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
/* A sign-in that failed lands on the home (Discord's sign-in ends there): its banner sits in the hero, above the words */
.hero-inner > .alert-wrap { width: 100%; max-width: 640px; padding-top: 0; }

/* The status strip: what NBA 2K20 is doing now, from GET /v1/live */
.strip-wrap { margin-top: auto; padding-top: 48px; padding-bottom: 28px; display: flex; align-items: stretch; gap: 12px; }
.strip-wrap .status-strip { flex: 1; min-width: 0; }
/* Pause motion: a quiet control beside the strip, in its glass */
.motion-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; min-height: 52px;
  border-radius: var(--r3); border: 1px solid var(--white-a07); background: var(--s1-a60); color: var(--text-2);
  font-size: var(--fs-small); font-weight: 600; cursor: pointer;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
.motion-toggle:hover { color: var(--text); border-color: var(--line-hover); }
.motion-toggle:active { transform: translateY(1px); }
.motion-toggle .motion-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.motion-toggle .motion-play, .motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.motion-toggle[aria-pressed="true"] .motion-play { display: block; }
/* Paused: every loop holds still (the hero's loop is paused in motion.js) */
html.motion-paused .hero::after, html.motion-paused .medallion-turn, html.motion-paused .medallion-shine::before,
html.motion-paused .dl-shine::before, html.motion-paused .pulse, html.motion-paused .dl-loading::after, html.motion-paused .np-loading::after {
  animation-play-state: paused;
}
/* Reduced motion already stills everything: the control is not needed */
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }
.status-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; min-height: 52px; padding: 14px 20px;
  border-radius: var(--r3); background: var(--s1-a60); border: 1px solid var(--white-a07); font-size: var(--fs-ui);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 24px 64px var(--black-a35), inset 0 1px 0 var(--white-a05);
}
.strip-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; transition: opacity var(--t-panel) var(--ease); }
.strip-item strong { font-weight: 700; white-space: nowrap; }
.strip-item .num { font-size: var(--fs-body); }
.strip-sep { width: 1px; height: 18px; background: var(--line); flex: none; }
.status-strip { position: relative; transition: border-color var(--t-hover) var(--ease); }
.status-strip:has(.strip-status:hover) { border-color: var(--line-hover); }
.strip-status { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.strip-status:hover { color: var(--text); }
.strip-status::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
.strip-status::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ------------------------------------------------------------------ The four steps: one component, the home and /join */

.step-cards { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-grid); }
.step-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: var(--sp-card);
  border-radius: var(--r3); background: var(--s1); border: 1px solid var(--edge);
  transition: border-color var(--t-hover) var(--ease), transform var(--t-panel) var(--ease);
}
.step-card:hover { border-color: var(--line); }
/* The steps' own look: a thin red line along the top, the picture and the number in red */
.step-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--red), var(--red-text));
}
.step-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: auto; padding-bottom: 14px; }
.step-visual {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--r3);
  background: var(--s2); border: 1px solid var(--red-edge); color: var(--red-text);
}
.step-visual svg { width: 24px; height: 24px; }
/* The step's number: small, in the eyebrow's mono red */
.step-card .step-num { font: 500 var(--fs-caption)/1 var(--mono); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; color: var(--red-text); }
.step-card .step-title { font-size: var(--fs-title-s); font-weight: 700; line-height: 1.3; }
.step-card .step-text { font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }
/* A link in a step's words ("Get the launcher") stays whole */
.step-card .step-text a { white-space: nowrap; }
/* Side by side (two or four a row), the cards share their rows (subgrid): every title sits right above its words and every
   text starts on one line, however many lines a neighbour's title or text takes; the picture and number fill the top. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 601px) {
    .step-cards { grid-template-rows: minmax(0, 1fr) auto auto; row-gap: 0; }
    .step-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; }
    .step-card .step-title { align-self: end; }
    .step-card .step-text { align-self: start; }
  }
  @media (min-width: 601px) and (max-width: 1100px) {
    .step-cards { grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr) auto auto; row-gap: 16px; }
  }
}

.how { position: relative; }

/* ------------------------------------------------------------------ Home: Games */

.home-section { padding-top: var(--sp-section); }
.page-end { padding-bottom: var(--sp-section); }
.games { position: relative; isolation: isolate; }
.backdrop { position: absolute; left: 0; right: 0; top: 0; height: clamp(300px, 34vw, 760px); z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop-art { position: absolute; left: 0; right: 0; top: -14%; bottom: -14%; }
.backdrop-art picture, .backdrop-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-a00) 22%, var(--bg-a00) 72%, var(--bg) 100%); }
/* Both its edges fade out to nothing, so the film grain around it carries on without a seam */
.backdrop {
  -webkit-mask-image: linear-gradient(180deg, var(--black-a00) 0%, var(--black) 24%, var(--black) 70%, var(--black-a00) 100%);
  mask-image: linear-gradient(180deg, var(--black-a00) 0%, var(--black) 24%, var(--black) 70%, var(--black-a00) 100%);
}

/* The game: its official cover in a portrait tile, tilting under the pointer, a light sweep on hover */
.game-card {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; padding: 24px;
  border-radius: var(--r4); background: var(--s1-a78); border: 1px solid var(--edge);
}
.game-cover {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r3); overflow: hidden; border: 1px solid var(--line); background: var(--bg);
  box-shadow: 0 28px 64px var(--black-a50); transition: transform var(--t-panel) var(--ease); will-change: transform;
}
.game-cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--red); }
.cover-picture { position: absolute; inset: 0; }
.game-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The kicker: a small tag at the cover's foot, over its smoke, clear of the game's own title at the top */
.cover-words { position: absolute; left: 12px; right: 12px; bottom: 16px; display: flex; }
.cover-kicker {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  background: var(--bg-a84); border: 1px solid var(--white-a16); box-shadow: 0 4px 12px var(--black-a35);
  font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.cover-kicker[data-state="online"] { color: var(--red-text); border-color: var(--red-edge); }
.cover-kicker[data-state="maintenance"] { color: var(--warn); border-color: var(--warn-edge); }
.cover-sweep {
  position: absolute; inset: 0; pointer-events: none; transform: translate3d(-120%, 0, 0);
  background: linear-gradient(105deg, var(--white-a00) 35%, var(--white-a16) 50%, var(--white-a00) 65%);
}
.game-card:hover .cover-sweep { animation: cover-sweep 1s var(--ease) 1; }
@keyframes cover-sweep { from { transform: translate3d(-120%, 0, 0); } to { transform: translate3d(120%, 0, 0); } }
.game-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.game-name-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.game-name { font-size: var(--fs-heading); font-weight: 800; font-stretch: var(--wdth-name); line-height: 1.2; }
.game-sub { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); }
.game-facts { list-style: none; display: grid; gap: 8px; width: 100%; max-width: 520px; margin: 6px 0 8px; padding: 14px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.game-facts li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: var(--fs-body); color: var(--text-2); }
.fact-label { font-size: var(--fs-label); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); padding-top: 2px; }

.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-grid); margin-top: var(--sp-grid); align-items: stretch; }
.live-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--r3); background: var(--s1); border: 1px solid var(--edge); min-width: 0; }
.live-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-height: 24px; }
.live-head h3 { font-size: var(--fs-caption); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.live-head .aside { font-size: var(--fs-small); color: var(--muted); }
#hoods { flex: 1; display: flex; flex-direction: column; }
.hoods { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; font-size: var(--fs-body); }
.hood { display: grid; grid-template-columns: 110px minmax(0, 1fr) 56px; align-items: center; gap: 14px; }
.hoods .hood-name { white-space: nowrap; }
.hoods .hood-name.venue { color: var(--text-2); }
.hoods .hood-count { font-family: var(--mono); text-align: right; color: var(--text-2); }
.bar { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--s3); overflow: hidden; }
.bar-fill { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--red); transform-origin: left center; transform: scaleX(0); transition: transform var(--t-page) var(--ease); }
.bar-fill.venue { background: var(--faint); }
.bar.no-cap { visibility: hidden; }
.live-note { font-size: var(--fs-small); color: var(--muted); }
.live-note + .live-note { margin-top: -8px; }
.live-empty { font-size: var(--fs-body); color: var(--muted); }

/* Events: the day and hour in a fixed column (AM / PM under the hour on a phone); numbers in mono, words in the text face */
.event-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.event-row {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r3); background: var(--bg-deep); border: 1px solid var(--edge);
}
.event-row.first { background: var(--s2); border-color: var(--line); }
.event-when { width: 80px; flex: none; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.event-day { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-chip); text-transform: uppercase; color: var(--muted); }
.event-row.first .event-day, .event-row.is-live .event-day { color: var(--red-text); }
.event-row.is-paused .event-day { color: var(--warn); }
.event-hour { font-family: var(--mono); font-size: var(--fs-title); line-height: 1.1; white-space: nowrap; }
.event-ampm { font-family: var(--sans); font-size: var(--fs-caption); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.event-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.event-name { font-size: var(--fs-large); font-weight: 700; overflow-wrap: anywhere; }
.event-line { font-size: var(--fs-ui); color: var(--muted); }
.event-line .range { white-space: nowrap; }
.event-count { font-size: var(--fs-ui); color: var(--text-2); white-space: nowrap; }
.event-count .num { color: var(--text); }

/* More games later: a quiet dashed card (it holds still) */
.more-games {
  position: relative; display: flex; align-items: center; gap: 16px; margin-top: var(--sp-grid); padding: 16px 20px;
  border-radius: var(--r3); background: var(--deep-a80); border: 1px dashed var(--line-strong);
}
.more-tile { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: var(--r3); border: 1px dashed var(--line-strong); color: var(--muted); }
.more-words { display: flex; flex-direction: column; gap: 4px; }
.more-title { font-size: var(--fs-title-s); font-weight: 700; color: var(--text-2); }
.more-text { font-size: var(--fs-body); color: var(--muted); }

/* ------------------------------------------------------------------ Network Pass: the gist only (owner, 2026-10-12):
   no price, no amounts, no multipliers; what it includes is in the launcher */

.pass-card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: center;
  padding: 36px 40px; border-radius: var(--r4); border: 1px solid var(--gold-edge);
  background: radial-gradient(ellipse 70% 90% at 85% 10%, var(--gold-a08), var(--gold-a00) 60%), var(--s1);
}
.pass-words { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pass-words h2 { font-size: var(--fs-display-pass); line-height: 1; }
.pass-words .lead { font-size: var(--fs-text); }
.pass-words .soft { font-size: var(--fs-ui); }
.pass-status { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; font-size: var(--fs-small); color: var(--muted); }
.pass-side { display: grid; place-items: center; min-width: 0; padding-right: 12px; }
/* Three perk tiles in a row under the words: the third ("and more") lighter */
.perks { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.perk { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r3); background: var(--s2); border: 1px solid var(--edge); font-size: var(--fs-large); font-weight: 700; }
.perk-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r2); background: var(--gold-deep); color: var(--gold); }
.perk.more { background: transparent; border-style: dashed; border-color: var(--gold-edge); color: var(--text-2); font-weight: 600; }
.perk.more .perk-icon { background: transparent; }
/* The medallion turns slowly and catches the light once a turn (one living thing in the card) */
.medallion { width: 176px; height: 176px; }
.medallion-turn { position: relative; width: 100%; height: 100%; animation: turn 12s ease-in-out infinite; }
.medallion-turn img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 16px 32px var(--gold-a16)); }
.medallion-shine {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask: url('/assets/network-pass-medallion-512.webp') center / 100% 100% no-repeat;
  mask: url('/assets/network-pass-medallion-512.webp') center / 100% 100% no-repeat;
}
.medallion-shine::before {
  content: ""; position: absolute; inset: 0; transform: translate3d(-130%, 0, 0); animation: shine 12s var(--ease) infinite;
  background: linear-gradient(115deg, var(--white-a00) 32%, var(--white-a55) 48%, var(--white-a00) 62%);
}
@keyframes turn { 0%, 100% { transform: perspective(600px) rotateY(-16deg); } 50% { transform: perspective(600px) rotateY(16deg); } }
@keyframes shine { 0%, 40% { transform: translate3d(-130%, 0, 0); } 56%, 100% { transform: translate3d(130%, 0, 0); } }

/* ------------------------------------------------------------------ News: the notices Operations publish, a compact list */

.news { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); }
.notice { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.notice time { grid-row: 1 / span 2; padding-top: 3px; font-family: var(--mono); font-size: var(--fs-caption); color: var(--muted); }
.notice h3 { font-size: var(--fs-large); font-weight: 700; line-height: 1.35; }
.notice-body { max-width: 720px; color: var(--text-2); font-size: var(--fs-body); }
.notice-body p + p { margin-top: 6px; }
.news > .empty, .news > .muted { padding: 18px 0; }

/* ------------------------------------------------------------------ Get in (/join) */

.steps { list-style: none; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-grid); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.plan h2 { font-size: var(--fs-heading); font-weight: 800; font-stretch: var(--wdth-title); line-height: 1.1; }
.plan .chip { align-self: flex-start; }
.plan.pass { border-color: var(--gold-edge); }
.plan.pass h2 span { color: var(--gold); }
.plan .notice-banner { margin-bottom: 0; }
/* The plan's last part (the Network Pass call, or why it is not open) sits at the card's foot */
.plan .plan-foot { margin-top: auto; }
.plan-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding-top: 8px; }
.plan-cta .muted { font-size: var(--fs-small); }
/* Network Pass's plan: its three tiles one above the other, as the Member plan's list */
.plan .plan-perks { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 4px 0 2px; }
.plan .plan-perks .perk { font-size: var(--fs-body); padding: 12px 14px; }
.plan p { color: var(--text-2); }
.plan p.muted { color: var(--muted); font-size: var(--fs-ui); }
/* What every member gets: plain words, no numbers */
.gets { list-style: none; display: flex; flex-direction: column; margin-top: 4px; }
.gets li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.gets li:first-child { border-top: 0; }
.gets .get-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r2); background: var(--s2); color: var(--red-text); }
.gets .get-title { font-weight: 700; }
.need-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.need-list li { position: relative; padding-left: 26px; color: var(--text-2); }
.need-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 10px; height: 2px; border-radius: var(--r-pill); background: var(--red); }
.ask-list { list-style: none; }
.ask-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 16px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.ask-list li > .muted:not(.desk-way) { grid-column: 1; font-size: var(--fs-ui); }
.ask-list li > :is(a, .desk-way) { grid-column: 2; grid-row: 1; }
.ask-list li:has(> .muted:not(.desk-way)) > :is(a, .desk-way) { grid-row: 1 / span 2; }
.ask-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: var(--fs-ui); }
.ask-list li:first-child { border-top: 0; padding-top: 0; }
.ask-list strong { font-weight: 700; }
/* A Discord channel's name never breaks across lines */
.chan { white-space: nowrap; }

/* ------------------------------------------------------------------ Leaderboards */

.board-note { margin-bottom: 12px; font-size: var(--fs-ui); }
.board-note:empty { display: none; }
.board td.rank { width: 72px; font-family: var(--mono); color: var(--muted); }
.board .rank-mark { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--r-pill); }
/* The top three: a ringed rank in gold, silver and bronze, the name a little larger */
.board tr.top td.rank .rank-mark { font-weight: 600; background: var(--s2); }
.board tr.top-1 td.rank .rank-mark { color: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold); background: var(--gold-deep); }
.board tr.top-2 td.rank .rank-mark { color: var(--medal-silver); box-shadow: inset 0 0 0 1.5px var(--medal-silver); }
.board tr.top-3 td.rank .rank-mark { color: var(--medal-bronze); box-shadow: inset 0 0 0 1.5px var(--medal-bronze); }
.board tr.top td.who-cell a { font-size: var(--fs-large); }
.board td { padding-top: 3px; padding-bottom: 3px; }
/* A member's name is a full tap target (44 px tall), its row no taller than before */
.board td a { color: var(--text); font-weight: 600; }
.board td.who-cell a { display: inline-block; max-width: 100%; line-height: var(--tap); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board td a:hover { color: var(--red-text); }
.board td.num { color: var(--text); white-space: nowrap; }
.board .empty, .board td.muted { padding: 24px 16px; }
.board .tier-inline { display: none; }
.board .rung { color: var(--muted); font-family: var(--sans); font-size: var(--fs-small); }
/* Your own row */
.board tr.you td { background: var(--red-a07); }
.board tr.you td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.board td.who-cell { min-width: 0; }
/* Win %: the members under the game's 10 games come after the others (VIP STATS ranks them below), under a quiet label */
.board tr.group-label td { padding: 14px 16px 6px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); }
.board tr.under td.num { color: var(--muted); }
.board .tier-inline .tag { margin-left: 0; }
.board .tag-wide { margin-left: 10px; }
/* The event boards (leaderboards.js; the audit of 2026-10-14): the picker above the board, no tier column (the game's own
   board has none), a player with no member page named in plain text, Operations marked "no prize" */
.board-pick { max-width: 420px; margin-bottom: 12px; }
.board.events th.tier-col, .board.events td.tier-cell { display: none; }
.board td.who-cell .board-name { display: inline-block; max-width: 100%; line-height: var(--tap); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }

/* ------------------------------------------------------------------ The rank ladder (master plan 0.7m B; the ranks plan, Task 4) */
/* The six tiers in their own metals (tokens.css; the Machined Medallion board's palette), never red: a tier sets --ladder (its
   name), --ladder-wash and --ladder-edge (its chip), and every ladder part reads those. The emblems are the direction A art:
   the hand-fitted vector cuts at 16 and 24 px, the renders at 48 and 96 (2x from the next export), drawn at whole pixels. */
.ladder-bronze { --ladder: var(--ladder-bronze); --ladder-wash: var(--ladder-bronze-wash); --ladder-edge: var(--ladder-bronze-edge); }
.ladder-silver { --ladder: var(--ladder-silver); --ladder-wash: var(--ladder-silver-wash); --ladder-edge: var(--ladder-silver-edge); }
.ladder-gold { --ladder: var(--ladder-gold); --ladder-wash: var(--ladder-gold-wash); --ladder-edge: var(--ladder-gold-edge); }
.ladder-platinum { --ladder: var(--ladder-platinum); --ladder-wash: var(--ladder-platinum-wash); --ladder-edge: var(--ladder-platinum-edge); }
.ladder-diamond { --ladder: var(--ladder-diamond); --ladder-wash: var(--ladder-diamond-wash); --ladder-edge: var(--ladder-diamond-edge); }
.ladder-champion { --ladder: var(--ladder-champion); --ladder-wash: var(--ladder-champion-wash); --ladder-edge: var(--ladder-champion-edge); }
.emblem { flex: none; object-fit: contain; }
.emblem-16 { width: 16px; height: 16px; }
.emblem-24 { width: 24px; height: 24px; }
.emblem-48 { width: 48px; height: 48px; }
.emblem-96 { width: 96px; height: 96px; }

/* The ladder chip beside the tier badge (a member's page): the medallion set on a pill of the tier's metal, its rim just past
   the pill's edge, the standing in the tier badge's caps */
.ladder-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px 0 1px; border-radius: var(--r-pill); vertical-align: middle; white-space: nowrap;
  background: var(--ladder-wash); box-shadow: inset 0 0 0 1px var(--ladder-edge); color: var(--ladder);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-chip); text-transform: uppercase; line-height: 1;
}
.ladder-chip .emblem { margin: -1px 0; }
.record-who .ladder-chip { margin-left: 6px; position: relative; top: -3px; }

/* The Rank tile: the first of the record's tiles, the row's whole width. The medallion, the season and the standing on the
   left in the tier's metal (a faint wash of it behind the medallion), this season's facts on the right */
.stats .ladder-stat {
  grid-column: 1 / -1; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 4px 18px;
  background: radial-gradient(ellipse 260px 140% at 42px 50%, var(--ladder-wash), var(--black-a00) 70%), var(--s1);
  border-color: var(--ladder-edge);
}
.ladder-stat-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat .value.ladder-stat-name {
  font-family: var(--sans); font-size: var(--fs-title); font-weight: 800; font-stretch: var(--wdth-title); letter-spacing: var(--track-display);
  text-transform: uppercase; line-height: 1.05; white-space: normal; color: var(--ladder);
}
.ladder-stat-sub { font-size: var(--fs-small); color: var(--muted); }
.ladder-facts { display: flex; gap: 8px 32px; flex-wrap: wrap; justify-content: flex-end; }
.ladder-fact { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ladder-fact dt { font-size: var(--fs-label); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.ladder-fact dd { font-family: var(--mono); font-size: var(--fs-title-s); font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.ladder-fact dd.words { font-family: var(--sans); font-size: var(--fs-large); font-weight: 700; }

/* The Rank board: the tier column is the rank (the emblem, then the standing in its metal); the top three carry their
   medallion at 48 px, their position ring as every board's. The emblem and the standing move beside and under the name on a
   phone (below), where the tier column folds away. */
.board.ladder td.tier-cell { white-space: nowrap; }
.ladder-cell { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; color: var(--ladder); }
.ladder-name { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-chip); text-transform: uppercase; color: var(--ladder); white-space: nowrap; }
.board.ladder tr.top .ladder-cell { gap: 12px; }
.board.ladder tr.top .ladder-cell .ladder-name { font-size: var(--fs-ui); font-weight: 800; font-stretch: var(--wdth-title); letter-spacing: var(--track-button); }
.board.ladder tr.top td { padding-top: 6px; padding-bottom: 6px; }
.board.ladder .ladder-who, .board.ladder .ladder-who-text { display: contents; }
.board .ladder-who-emblem { display: none; }
.board.ladder .tier-inline .ladder-name { line-height: 20px; }
.board.ladder.ladder-none thead { display: none; }
/* The viewer's own row below the rows shown (ranks design 6: "the member's own row"): a quiet gap, then their row */
.board.ladder tr.ladder-gap td { padding: 0 16px; height: 28px; text-align: center; color: var(--muted); }
.board.ladder .ladder-gap-mark { font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.4em; }
/* A hidden Champion among the top three ("Hidden member", no link) at the top three's name size */
.board.ladder tr.top td.who-cell .hidden-name { font-size: var(--fs-large); }

/* The season line above the board: the season in the display caps, its last day, and the ladder's six emblems low to high */
.ladder-season { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.ladder-season-text { font-size: var(--fs-ui); color: var(--muted); }
.ladder-season-name { font-weight: 800; font-stretch: var(--wdth-title); letter-spacing: var(--track-button); text-transform: uppercase; color: var(--text); }
.ladder-season-sep { color: var(--faint); }
.ladder-strip { display: inline-flex; align-items: center; gap: 6px; }
.ladder-step { display: inline-flex; }

/* Nobody on the board yet (ranks off, or on and nobody has played): the six medallions rising from Bronze to Champion, the call */
.board td.ladder-empty { padding: 48px 20px 52px; text-align: center; }
.ladder-empty .ladder-steps { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin-bottom: 24px; }
/* Each a step higher and a little brighter than the one before: the climb the call asks for */
.ladder-empty .ladder-step:nth-child(1) { opacity: 0.6; }
.ladder-empty .ladder-step:nth-child(2) { opacity: 0.68; margin-bottom: 6px; }
.ladder-empty .ladder-step:nth-child(3) { opacity: 0.76; margin-bottom: 12px; }
.ladder-empty .ladder-step:nth-child(4) { opacity: 0.84; margin-bottom: 18px; }
.ladder-empty .ladder-step:nth-child(5) { opacity: 0.92; margin-bottom: 24px; }
.ladder-empty .ladder-step:nth-child(6) { margin-bottom: 30px; }
.ladder-empty-title { font-size: var(--fs-display-gate); font-weight: 800; font-stretch: var(--wdth-title); line-height: 1.15; color: var(--text); text-wrap: balance; }
.ladder-empty-text { margin-top: 8px; font-size: var(--fs-body); color: var(--text-2); }

/* A phone: the Rank tile's facts on their own line under the standing; on the board, the medallion beside the name and the
   standing under it; the season line's emblems at their 16 px cut; the empty board's six a little smaller, still one row */
@media (max-width: 600px) {
  .stats .ladder-stat { grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; }
  .stat .value.ladder-stat-name { font-size: var(--fs-title-s); }
  .ladder-facts { grid-column: 1 / -1; justify-content: flex-start; gap: 8px 24px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
  .ladder-fact { gap: 4px; }
  .ladder-fact dd, .ladder-fact dd.words { font-size: var(--fs-body); }
  .board.ladder .ladder-who { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
  .board.ladder .ladder-who-text { display: block; min-width: 0; }
  .board.ladder .ladder-who-emblem { display: block; }
  /* The standing and its tags (Wizard, You) take a second line rather than run past the column ("Diamond III" and a tag
     beside a 48 px medallion) */
  .board.ladder .tier-inline { flex-wrap: wrap; row-gap: 4px; }
  .board.ladder .tier-inline .ladder-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  /* A name is never cut on the Rank board (the rank boards audit of 2026-10-26): a long one takes a second line beside the
     medallion, still a full tap target */
  .board.ladder td.who-cell a, .board.ladder td.who-cell .hidden-name {
    display: flex; align-items: center; min-height: var(--tap); line-height: 1.25; white-space: normal; overflow-wrap: anywhere; text-overflow: clip;
  }
  .board.ladder tr.top td.who-cell .hidden-name { font-size: var(--fs-body); }
  .board.ladder tr.top td.who-cell { padding-top: 8px; padding-bottom: 10px; }
  .ladder-strip { gap: 6px; }
  .ladder-strip .emblem { width: 16px; height: 16px; }
  .board td.ladder-empty { padding: 36px 12px 40px; }
  .ladder-empty .ladder-steps { gap: 6px; margin-bottom: 20px; }
  .ladder-empty .emblem-48 { width: 40px; height: 40px; }
}

/* ------------------------------------------------------------------ Member pages (/me, /p/<id>) */

/* The sign-in prompt, one for every page that needs a sign-in (the leaderboards, /me, /p/<id>) */
.gate { max-width: 560px; margin: 24px auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 28px; }
.gate p { color: var(--text-2); }
.gate .gate-title, .gate h2 { font-size: var(--fs-display-gate); font-weight: 800; font-stretch: var(--wdth-title); line-height: 1.15; text-transform: none; letter-spacing: var(--track-none); }
.gate .gate-note { color: var(--muted); font-size: var(--fs-ui); }
.board-gate { margin-top: 8px; }
/* What signing in agrees to (2026-10-13, with the Privacy Policy and the Terms of Service): one quiet line under a Sign in
   with Discord (/join's call, the sign-in prompt, the phone menu), its two links underlined in the line's own tint */
.signin-legal { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.signin-legal a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-hover); text-underline-offset: 3px; }
.signin-legal a:hover { color: var(--text); text-decoration-color: currentColor; }
.gate .signin-legal { max-width: 400px; color: var(--muted); }
.gate .gate-note + .signin-legal { margin-top: -8px; }
.section-label { margin: 32px 0 12px; }
.section-label + .panel { margin-top: 0; }
.page-eyebrow { margin-bottom: 16px; }
.record-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.record-avatar {
  position: relative; overflow: hidden; width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--s3); font-size: var(--fs-stat); font-weight: 800; font-stretch: var(--wdth-name);
}
.record-avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--line-strong); pointer-events: none; }
.record-avatar.pass::after { box-shadow: inset 0 0 0 3px var(--gold); }
.record-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.record-who h1, .record-who h2 { font-size: var(--fs-display-name); font-weight: 800; font-stretch: var(--wdth-name); line-height: 1.1; overflow-wrap: anywhere; }
.record-who .tier { margin-left: 4px; position: relative; top: -3px; }
.record-who h1 .tag, .record-who h2 .tag { margin-left: 6px; position: relative; top: -3px; }
.record-who p { color: var(--muted); font-size: var(--fs-body); overflow-wrap: anywhere; }
.record-who p.record-earn { color: var(--text-2); }
/* The Discord @username under the name (owner 2026-10-13): the mono face, a long one wraps inside the column */
.record-who p.record-discord { font-family: var(--mono); font-size: var(--fs-small); color: var(--text-2); overflow-wrap: anywhere; }
/* The record's head with the member's banner (record.js): the picture and the name at the left, the banner as the game shows it
   at the right, centred on them; below 1100 px the banner takes its own row under the name. */
.record-head.has-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 520px); align-items: center; gap: 16px 24px; }
.record-head.has-banner .idb { justify-self: end; }
/* The player identity's banner as players see it in game (the owner, 2026-11-03: "The banners must look like 2K made them,
   using the v5 designs I approved"; site.js identityBanner): the state's whole v5 panel, the rank disc in its seat, the bounty
   mark in its socket and the game's words, each at v5's place (art/renders/identity/src/v5_surfaces.py, geometry.json: in % of
   the banner, the words' sizes in % of its width; the same numbers in dash.css and the launcher's style.css). The words are
   Archivo at its narrowest (wdth 62), the heavy condensed caps of the game's panel, the gamertag slanted as the game slants it. */
.idb { position: relative; container-type: inline-size; display: block; width: 100%; max-width: 560px; aspect-ratio: 1200 / 505; margin: 0; user-select: none; -webkit-user-select: none; }
.idb > img { position: absolute; display: block; max-width: none; pointer-events: none; }
.idb .idb-base { inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1.6cqw 3.4cqw rgb(0 0 0 / 0.6)); }
.idb .idb-rank { left: 65.702%; top: 37.235%; width: 13.335%; height: 31.746%; }
.idb .idb-bounty { left: 83.213%; top: 42.262%; width: 6.765%; height: 16.071%; }
.idb-word {
  position: absolute; transform: translate(-50%, -50%); padding-left: var(--track, 0); font-family: var(--sans); font-weight: 700;
  font-stretch: 62%; font-style: normal; line-height: 1; letter-spacing: var(--track, 0); color: #FFFFFF; white-space: nowrap;
  text-transform: uppercase; text-shadow: 0.13cqw 0.18cqw 0.2cqw rgb(0 0 0 / 0.8); pointer-events: none;
}
.idb-name { --track: 0.134cqw; left: 51.002%; top: 31.746%; font-size: calc(4.383cqw * var(--fit, 1)); font-weight: 800; transform: translate(-50%, -50%) skewX(-10.2deg); }
.idb-pos { left: 88.419%; top: 30.159%; font-size: 3.571cqw; }
.idb-ovr-label { --track: 0.089cqw; left: 88.419%; top: 66.667%; font-size: 1.818cqw; color: #C8CCD4; }
.idb-ovr { left: 88.419%; top: 74.074%; font-size: 3.897cqw; }
.idb-arch { --track: 0.111cqw; left: 52.339%; top: 73.545%; font-size: calc(2.468cqw * var(--fit, 1)); }
/* What the member's Legend level unlocks (master plan 0.7m K 51), under the record's numbers: its banner, then what is coming
   in the launcher rank page's "coming soon" chip (dashed, never a button) */
.legend-unlocks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; }
.legend-unlocks-label { font-weight: 700; color: var(--text-2); margin-right: 2px; }
.unlock-chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--s2); border: 1px solid var(--edge); color: var(--text-2); font-size: var(--fs-small); line-height: 1.3;
}
.unlock-chip.is-soon { background: transparent; border-style: dashed; border-color: var(--line); color: var(--muted); }
/* A small line under a record number: the rep's Legend level (Legend II .. V) */
.stat .sub { font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-2); }
/* The record's six numbers never break (owner, 2026-10-13: "the whole number isnt in one line"). Each tile is a size
   container; every number in the row takes the size at which the row's longest one (record.js sets --stat-chars, its
   characters; 13 until then: 2,000,000,000, the most VC the record holds) fills its tile. Geist Mono's figures, commas,
   points and % are 0.6 em wide; 0.62 leaves a little room (*ours*). At most --fs-stat, at least --fs-ui: six across, three
   below 1101 px, two below 761, one below 360 keep 13 characters at 14 px or more down to 280 px. */
.stats { --stat-chars: 13; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.stat { container-type: inline-size; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--r3); background: var(--s1); border: 1px solid var(--edge); min-width: 0; }
.stat .label { font-size: var(--fs-label); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.stat .value {
  font-family: var(--mono); font-size: clamp(var(--fs-ui), calc(100cqi / (var(--stat-chars) * 0.62)), var(--fs-stat)); font-weight: 500;
  line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; align-items: start; }
.record-grid .list > li { font-size: var(--fs-body); }
.record-grid .list .muted { font-size: var(--fs-small); margin-top: 2px; }
/* What a record does not have yet, in one quiet line (not a box each) */
.record-empty { margin-top: 16px; padding: 14px 18px; border-radius: var(--r3); border: 1px dashed var(--line); color: var(--muted); font-size: var(--fs-ui); }
/* No park record yet (master plan 0.7k, the owner's profile answers 2026-10-13): the account's three numbers, three
   across where the six are six, then two, then one (the media rules below), never stretched over six columns. */
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Under the record's numbers, in quiet lines: where the park record comes from, the other VIP STATS columns played, and
   the network's own count of every mode, labelled for what it is (*ours*). */
.record-notes { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
/* The record's last 10 and streak (owner 2026-10-17: the games VIP STATS counted), oldest to newest */
.last-ten { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.last-ten-label { font: 500 var(--fs-caption)/1 var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); }
.last-ten-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.result-chip { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font: 600 12px/1 var(--mono); }
.result-chip.win { background: var(--ok-wash); color: var(--ok); }
.result-chip.loss { background: var(--red-deep); color: var(--red-text); }
.last-ten-streak { font: 600 var(--fs-ui)/1 var(--mono); font-variant-numeric: tabular-nums; }
.last-ten-streak.win { color: var(--ok); }
.last-ten-streak.loss { color: var(--red-text); }
.matches td.num .tag { margin-right: 6px; }
.matches td { font-size: var(--fs-ui); }
.matches .when-cell { white-space: nowrap; }

/* Get in on /me: Discord, Steam, Network Player, the launcher (master plan 0.7c). Done: one line, the steps folded. */
.get-in { margin-top: 24px; margin-bottom: 8px; padding: 28px; }
.get-in-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.get-in-head h1, .get-in-head h2 { font-size: var(--fs-stat); font-weight: 800; font-stretch: var(--wdth-title); }
.get-in.done { padding: 4px 20px; }
.get-in.done .get-in-head { display: none; }
.get-in-fold > summary {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; cursor: pointer; list-style: none; color: var(--text-2); font-size: var(--fs-ui);
}
.get-in-fold > summary::-webkit-details-marker { display: none; }
.get-in-fold > summary .tick { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ok-wash); color: var(--ok); font-size: var(--fs-caption); font-weight: 800; }
.get-in-fold > summary strong { color: var(--text); }
.get-in-fold > summary a { font-weight: 600; white-space: nowrap; }
.get-in-fold > summary .fold-more { flex: none; display: inline-flex; align-items: center; gap: 10px; margin-left: auto; color: var(--muted); font-size: var(--fs-small); }
.get-in-fold > summary:hover .fold-more { color: var(--text-2); }
/* The same chevron as every other fold */
.get-in-fold > summary .fold-more::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--t-panel) var(--ease);
}
.get-in-fold[open] > summary .fold-more::after { margin-top: 3px; transform: rotate(-135deg); }
.get-in-fold[open] > .progress-steps { margin: 8px 0 20px; }
.progress-steps { list-style: none; display: flex; flex-direction: column; }
.progress-steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 16px; padding-bottom: 22px; }
.progress-steps li:last-child { padding-bottom: 0; }
.progress-steps li::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; border-radius: var(--r-pill); background: var(--line); }
.progress-steps li:last-child::before { display: none; }
.progress-steps li.done::before { background: var(--ok-a40); }
.progress-steps .mark {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--fs-small); color: var(--muted);
}
.progress-steps li.current .mark { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-a18); color: var(--text); }
.progress-steps li.done .mark { background: var(--ok-wash); border-color: var(--ok-a50); color: var(--ok); font-family: var(--sans); font-size: var(--fs-text); font-weight: 800; }
.progress-steps .title { padding-top: 6px; font-size: var(--fs-large); font-weight: 700; }
.progress-steps li p { color: var(--muted); font-size: var(--fs-ui); }
.progress-steps li p.mt-s { margin-top: 12px; }
.confirm-card {
  margin-bottom: 22px; padding: 20px 22px; border-radius: var(--r3); background: var(--s2); border: 1px solid var(--line-strong);
  box-shadow: inset 3px 0 0 var(--red); animation: rise var(--t-panel) var(--ease) both;
}
.confirm-card p { color: var(--text-2); }
.confirm-card p strong { color: var(--text); }
.confirm-card .muted { color: var(--muted); font-size: var(--fs-ui); }
.weekly-card { border-color: var(--gold-edge); }
.weekly-card .weekly-status { font-size: var(--fs-title-s); font-weight: 700; }
.weekly-card .weekly-status .num { color: var(--gold); }
.notes .when, .results .when { font-family: var(--mono); }
.results { list-style: none; margin-top: 8px; }
.results > li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: var(--tap); padding: 4px 0; border-top: 1px solid var(--line-soft); }
.results > li:first-child { border-top: 0; }
.results a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text); font-weight: 600; }
.results a:hover { color: var(--red-text); }
.results .tag { margin-left: 0; }
.links-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 16px; padding: 6px 0; }
.links-list > li:first-child { padding-top: 0; }
.links-list > li > .muted:not(.desk-way) { grid-column: 1; font-size: var(--fs-ui); }
.links-list > li > :is(a, .desk-way) { grid-column: 2; grid-row: 1; }
.links-list > li:has(> .muted:not(.desk-way)) > :is(a, .desk-way) { grid-row: 1 / span 2; }
#member-extras > .section { margin-top: 24px; }
#member-extras > .section:first-child { margin-top: 32px; }
#search .field { margin-bottom: 0; }
/* Another member's page: reporting them, folded behind a quiet line */
.report-fold { margin-top: 40px; border-top: 1px solid var(--line-soft); }
.report-fold > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); cursor: pointer; list-style: none; color: var(--muted); font-size: var(--fs-ui); font-weight: 600;
}
.report-fold > summary::-webkit-details-marker { display: none; }
.report-fold > summary:hover { color: var(--text-2); }
.report-fold > summary svg { transition: transform var(--t-panel) var(--ease); }
.report-fold[open] > summary svg { transform: rotate(90deg); }
.report-form { margin-top: 8px; max-width: 640px; }
.report-form .muted { font-size: var(--fs-ui); margin-bottom: 16px; }

/* ------------------------------------------------------------------ Immersion (master plan 0.7j, 2026-10-12)
 * Only transform and opacity move. motion.js drives the scroll parts; the intro runs once a session (boot.js: html.intro).
 * Timings and distances marked *ours* in motion.js; here: the intro (1.2 s in all), reveals 640 ms over 18 px.
 */

/* Film grain under the content (the ground and the gaps between parts; a still 128 px noise tile, no bigger than the window)
   and a vignette over the page. The hero's own grain (.hero::after) is the one that moves: it steps between six places, each a
   part of a tile away (no filters; that layer is the hero plus a tile each side). */
.grain, .vignette { position: fixed; pointer-events: none; }
.vignette { inset: 0; z-index: 80; background: radial-gradient(ellipse 120% 95% at 50% 38%, var(--black-a00) 58%, var(--black-a35) 100%); }
.grain { inset: 0; z-index: -1; background: url('/assets/grain.png') repeat; opacity: 0.06; }
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 17% { transform: translate3d(-48px, 32px, 0); } 33% { transform: translate3d(40px, -72px, 0); }
  50% { transform: translate3d(-88px, -24px, 0); } 67% { transform: translate3d(64px, 56px, 0); } 83% { transform: translate3d(-24px, 88px, 0); }
}

/* Reveal on scroll (motion.js adds .reveal, then .in once it is seen) */
.js .reveal {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity 640ms var(--ease) var(--reveal-delay, 0ms), transform 640ms var(--ease) var(--reveal-delay, 0ms), border-color var(--t-hover) var(--ease);
}
.js .reveal.in, .js .reveal:focus-within { opacity: 1; transform: none; }

/* The intro, once a session: the scene fades up from black, the headline rises through its lines, the eyebrow types in,
   the rest fades in; all done by 1.18 s */
/* The scene fades up from black; it starts barely there, not gone, so its poster counts at the first paint (LCP) */
.intro .hero-stage { animation: stage-in 900ms var(--ease) both; }
.intro .site-header { animation: intro-fade 520ms var(--ease) 180ms both; }
.intro .hero .line-in { animation: intro-line 640ms cubic-bezier(.2, 0, 0, 1) 220ms both; }
.intro .hero .line + .line .line-in { animation-delay: 310ms; }
.intro .hero .eyebrow:not(.typing) { animation: intro-fade 1ms linear 1400ms both; }
.intro .hero .eyebrow .ch { animation: intro-char 1ms steps(1) both; animation-delay: calc(120ms + var(--i, 0) * 14ms); }
/* The lead starts barely there, not gone: it is the page's largest text at the first paint (LCP), so the browser counts it
   then, while the eye sees it fade up */
.intro .hero .lead { animation: lead-in 460ms var(--ease) 440ms both; }
.intro .hero-actions > * { animation: intro-fade 420ms var(--ease) 640ms both; }
.intro .hero-actions > * + * { animation-delay: 700ms; }
.intro .strip-wrap { animation: rise 420ms var(--ease) 760ms both; }
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stage-in { from { opacity: 0.01; } to { opacity: 1; } }
@keyframes intro-line { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }
@keyframes intro-char { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes lead-in { from { opacity: 0.01; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
/* pre-wrap, not pre: while it types in, a narrow screen still wraps it where the plain words wrap (the audit of 2026-10-14) */
.eyebrow .ch { white-space: pre-wrap; }

/* Page changes: a cross-fade where the browser can (the header stays), a short fade-in where it cannot. (A cross-fade the
   browser skips, say the window changed size on the way, is caught in boot.js, so it never shows as an error.) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms var(--ease-exit) both vt-out; }
::view-transition-new(root) { animation: 280ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@keyframes page-in { from { opacity: 0.01; } to { opacity: 1; } }
@supports not (view-transition-name: none) {
  .js main { animation: page-in 280ms var(--ease) both; }
}

/* ------------------------------------------------------------------ Narrower screens */

/* The signed-in name beside the avatar folds away below 1400 px (1240 before Launcher joined the sections, 2026-10-14; the
   avatar stays, and the link keeps the name for a screen reader); the full header fits from 1041 px with Dashboard and
   Sign out */
@media (min-width: 1041px) and (max-width: 1399px) {
  /* Seven sections with Launcher (owner, 2026-10-14): a little less room between them here, so the header keeps one line */
  .nav { gap: 14px; }
  .who { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* The narrowest one-line header: the lockup a little smaller and the sections closer, so Status and a staff member's Dashboard fit */
@media (min-width: 1041px) and (max-width: 1240px) {
  .header-bar { gap: 20px; }
  .menu { gap: 14px; }
  .nav { gap: 12px; }
  .site-header .brand-lockup { height: 18px; }
}
/* ... and signed in below 1100 px, closer still: nine sections since Clans joined them (2026-11-11), Dashboard the ninth */
@media (min-width: 1041px) and (max-width: 1099px) {
  .site-header:has(.who-link) .header-bar { gap: 16px; }
  .site-header:has(.who-link) .menu { gap: 12px; }
  .site-header:has(.who-link) .nav { gap: 10px; }
}
/* 1400 to 1599 px: the name shows, a little shorter, and the sections a little closer (Launcher joined them, 2026-10-14) */
@media (min-width: 1400px) and (max-width: 1599px) {
  .nav { gap: 18px; }
  .who { max-width: 130px; }
}
/* ... signed in, the name and Sign out need the room the signed-out header leaves. From 1400 px up, not only to 1599 px: the
   header's row is 1120 px wide from 1216 px on, so a wider window gives it no more room; and the name at most 100 px (130
   before Clans joined the sections, 2026-11-11) */
@media (min-width: 1400px) {
  .site-header:has(.who-link) .header-bar { gap: 24px; }
  .site-header:has(.who-link) .menu { gap: 14px; }
  .site-header:has(.who-link) .nav { gap: 12px; }
  .site-header:has(.who-link) .brand-lockup { height: 18px; }
  .site-header:has(.who-link) .who { max-width: 100px; }
}
@media (max-width: 1100px) {
  .step-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The banner under the name, at the head's left, its own size kept */
  .record-head.has-banner { grid-template-columns: auto minmax(0, 1fr); }
  .record-head.has-banner .idb { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 1040px) {
  :root { --header-h: 64px; }
  .header-bar { gap: 12px; }
  .menu-button { display: grid; }
  .menu {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 20px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px var(--black-a50);
  }
  .menu-open .menu { display: flex; animation: drop var(--t-panel) var(--ease) both; }
  /* The page behind the open menu dims (a click there lands on the page, not the header, so it still closes the menu) */
  body::after { content: ""; position: fixed; inset: 0; z-index: 45; background: var(--bg-a70); opacity: 0; pointer-events: none; transition: opacity var(--t-panel) var(--ease); }
  body:has(> .site-header.menu-open)::after { opacity: 1; pointer-events: auto; }
  @keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { min-height: 52px; padding: 0 2px; font-size: var(--fs-text); border-bottom: 1px solid var(--line-soft); }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--red); padding-left: 14px; }
  .nav a::after, .nav a[aria-current="page"]::after { display: none; }
  .nav a { transition: color var(--t-hover) var(--ease), padding-left var(--t-panel) var(--ease); }
  .account { padding-top: 16px; flex-wrap: wrap; white-space: normal; }
  .account > .button:only-child, .account > .button:has(+ .signin-legal) { width: 100%; }
  .account .signin-legal { display: block; flex-basis: 100%; text-align: center; }
  .account .who-link { flex: 1; min-width: 0; }
  .site-header.static .menu { display: flex; position: static; flex-direction: row; flex-wrap: wrap; padding: 0; background: none; border: 0; box-shadow: none; }
  .site-header.static .nav { flex-direction: row; }
  .site-header.static .nav a { min-height: var(--tap); border: 0; font-size: var(--fs-ui); }
  .section-title { font-size: var(--fs-heading); }
  .hero { min-height: max(600px, min(100vh, 56.25vw + var(--header-h), 1440px)); }
  .live-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .pass-card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 24px; }
  .pass-side { justify-items: start; padding: 0; order: -1; }
}
/* A phone: the three perks as one list in one frame (three tall tiles took a screen) */
@media (max-width: 600px) {
  .perks { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--edge); border-radius: var(--r3); background: var(--s2); overflow: hidden; }
  .perks .perk { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; border: 0; border-radius: 0; background: none; font-size: var(--fs-body); }
  .perks .perk + .perk { border-top: 1px solid var(--edge); }
  .perks .perk.more { border-style: solid; color: var(--text-2); }
}

/* Tall and portrait screens: the portrait art (the AN in its upper half) in a band at the top, the words below it. The
   band's height (*ours*): 82 % of the width, at most 56 % of the window, at least 280 px. */
@media (max-width: 760px), (max-aspect-ratio: 4/5) and (max-width: 1100px) {
  .hero { --band: clamp(280px, min(82vw, 56vh), 640px); min-height: 0; background: var(--bg); }
  .hero-stage { bottom: auto; height: var(--band); }
  .hero-media { inset: 0; }
  .hero-poster { object-position: 50% 62%; }
  .hero-video { display: none; }
  .hero-shade { background: linear-gradient(180deg, var(--bg-a55) 0%, var(--bg-a00) 24%, var(--bg-a00) 58%, var(--bg-a70) 82%, var(--bg) 100%); }
  .hero-shade::after { display: none; }
  .hero-inner { padding-top: calc(var(--band) - var(--header-h) - 36px); gap: 20px; }
  .hero-inner > * { max-width: 640px; }
  /* The control in the strip's corner, never a stray button under it */
  .strip-wrap { position: relative; padding-top: 32px; display: block; }
  .motion-toggle { position: absolute; z-index: 1; right: 28px; top: 36px; width: var(--tap); min-height: var(--tap); border-color: transparent; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 760px) {
  :root { --sp-section: 56px; }
  .game-card { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 18px; }
  .game-facts { grid-column: 1 / -1; }
  .hero .lead { font-size: var(--fs-large); }
  .status-strip { flex-direction: column; align-items: flex-start; gap: 10px; }
  .strip-status { margin-left: 0; }
  .strip-sep { display: none; }
  .strip-item { flex-wrap: wrap; row-gap: 2px; }
  .stats, .stats.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-section { padding-top: var(--sp-section); }
  .section { margin-top: var(--sp-section); }
  .notice { grid-template-columns: minmax(0, 1fr); }
  .notice time { grid-row: auto; padding-top: 0; order: -1; }
}
@media (max-width: 600px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .footer-base { background-size: calc(100% - 32px) 1px; }
  .menu { padding: 8px 16px 20px; }
  .page { padding-top: 36px; padding-bottom: 64px; }
  .page-cta .button.big { flex: 1 1 auto; }
  .step-cards { grid-template-columns: minmax(0, 1fr); }
  .live-card, .card, .panel, .get-in { padding: 20px; }
  .stat { padding: 14px; }
  .get-in.done { padding: 4px 16px; }
  .panel.flush { padding: 0; }
  .step-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; min-height: 0; padding: 18px; }
  .step-head { display: contents; }
  .step-visual { grid-row: span 2; }
  .step-card .step-num { position: absolute; right: 18px; top: 22px; }
  /* The title keeps clear of the number in the corner */
  .step-card .step-title { padding-right: 32px; }
  .event-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; padding: 12px; align-items: start; }
  .event-when { width: 64px; grid-row: span 2; padding-top: 2px; }
  .event-hour { font-size: var(--fs-large); }
  .event-ampm { display: block; }
  .event-count { grid-column: 2; }
  .page-end { padding-bottom: 56px; }
  .hood { grid-template-columns: 84px minmax(0, 1fr) 44px; gap: 12px; }
  .more-games { align-items: flex-start; }
  .game-card { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
  .game-body { display: contents; }
  .game-body > .game-name-line { grid-column: 2; align-self: center; flex-direction: column; align-items: flex-start; gap: 8px; }
  .game-body > .game-sub { grid-column: 1 / -1; }
  .game-body > .game-facts, .game-body > p:last-child { grid-column: 1 / -1; }
  .game-body > p:last-child .button { width: 100%; }
  /* The 112 px tile: the tag smaller, so "Maintenance" still fits inside it */
  .cover-words { left: 8px; right: 8px; bottom: 12px; }
  .cover-kicker { height: 18px; padding: 0 6px; letter-spacing: var(--track-chip); }
  .game-name { font-size: var(--fs-name-s); }
  .game-facts li { grid-template-columns: 84px minmax(0, 1fr); }
  .medallion { width: 132px; height: 132px; }
  .vignette { background: radial-gradient(ellipse 140% 100% at 50% 40%, var(--black-a00) 62%, var(--black-a28) 100%); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  th, td { padding-left: 10px; padding-right: 10px; }
  /* The leaderboards on a phone: fixed columns, so a long name ends in an ellipsis instead of pushing the value off */
  .board { table-layout: fixed; }
  /* An empty board on a phone: its words, no column heads over nothing */
  .board:has(td.empty) thead { display: none; }
  .board th:first-child, .board td.rank { width: 52px; }
  .board th.num, .board td.num { width: 34%; }
  .board td.who-cell { overflow: hidden; }
  .board td.who-cell { padding-top: 6px; padding-bottom: 8px; }
  .board td.who-cell a { display: block; }
  .board tr.top td.who-cell a { font-size: var(--fs-body); }
  .board th.tier-col, .board td.tier-cell, .board .tag-wide { display: none; }
  .board .tier-inline { display: flex; gap: 6px; margin-top: -4px; }
  .board .tier-inline .tier { height: 20px; }
  .board td.num { white-space: normal; }
  .board .rung { display: block; font-size: var(--fs-caption); margin-top: 2px; }
  .board .rung-sep { display: none; }
  /* A name with no link (a hidden member, a player with no member page) on one line too; an event's score heading fits */
  .board td.who-cell .hidden-name, .board td.who-cell .board-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .board.events th.num { letter-spacing: 0.04em; white-space: normal; line-height: 1.3; }
  /* A member's matches on a phone: the region column folds away (the rows keep When, Result and the three numbers) */
  .matches .region-col { display: none; }
  .matches th, .matches td { padding-left: 8px; padding-right: 8px; }
  .tabs button { padding: 0 10px; font-size: var(--fs-ui); }
  .lead { font-size: var(--fs-large); }
  .plan { padding: 22px; }
  .record-avatar { width: 52px; height: 52px; font-size: var(--fs-title); }
}
/* A very small screen: the lockup narrower, so the menu button stays on the screen */
@media (max-width: 359px) {
  .brand-lockup { height: 17px; }
  .hero-actions .button.big { padding: 0 20px; }
  /* The record's numbers one tile a row, so the longest stays whole and readable */
  .stats, .stats.three { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stat { gap: 6px; padding: 12px 14px; }
  /* The big calls keep their words whole (the audit of 2026-10-14): tighter, then a second line if they still do not fit */
  .button.big { padding: 0 16px; letter-spacing: 0.04em; white-space: normal; height: auto; min-height: 54px; line-height: 1.2; text-align: center; }
  .np-buy.panel { padding: 24px 16px; }
  .dl-button { white-space: nowrap; padding: 0 14px; gap: 10px; font-size: var(--fs-ui); letter-spacing: 0.06em; }
  .dl-gate { padding: 18px; }
  .dl-gate .button.big { white-space: nowrap; padding: 0 12px; font-size: var(--fs-ui); letter-spacing: 0.06em; }
  /* A call inside the Get in steps keeps its words on the screen: a second line before it runs off */
  .progress-steps .button { white-space: normal; height: auto; min-height: var(--tap); padding: 10px 16px; line-height: 1.25; text-align: center; }
}
/* The narrowest phones (280 px; the audit of 2026-10-14): a page title's longest word stays whole, a board's chips fit */
@media (max-width: 299px) {
  .page-title { font-size: 20px; }
  .board .tier-inline { flex-wrap: wrap; row-gap: 4px; }
  .board .tier-inline .tier, .board .tier-inline .tag { padding: 0 6px; letter-spacing: 0.04em; }
  .board th:first-child, .board td.rank { width: 44px; }
  /* The launcher's calls: a second line rather than words past the button's edge */
  .dl-button, .dl-gate .button.big { white-space: normal; }
}

/* ------------------------------------------------------------------ Reduced motion: no loops, no slides; the page still works */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  .pulse, .grain, .hero::after, .medallion, .medallion-turn, .medallion-shine::before { animation: none !important; }
  .js .reveal { transform: none !important; transition: opacity 240ms linear !important; }
  @view-transition { navigation: none; }
  .hero-stage, .hero-media, [data-parallax], [data-tilt] { transform: none !important; }
}

/* ------------------------------------------------------------------ Player bounties (master plan 0.7d item 2, 2026-10-13) */
/* The bounty on a member's page, your own bounties on /me, and Most Wanted's hidden names. The pot in Night Red, numbers in
   Geist Mono (.num). */

.bounty-card { margin-top: 24px; }
.bounty-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 8px; }
.bounty-head h3 { font-size: var(--fs-caption); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.bounty-pot { font-size: var(--fs-title-s); font-weight: 700; color: var(--text); }
.bounty-pot .num { color: var(--red-text); }
.bounty-pot .muted { font-size: var(--fs-ui); font-weight: 500; }
.bounty-pot.none { font-size: var(--fs-body); font-weight: 600; color: var(--text-2); }
.bounty-yours { margin-top: 12px; font-size: var(--fs-ui); color: var(--text-2); }
.bounty-form { margin-top: 18px; }
.bounty-form .field { margin-bottom: 0; }
.bounty-balance { margin-top: 10px; font-size: var(--fs-ui); }
.bounty-balance .num { color: var(--text); }
.bounty-confirm { margin-top: 18px; margin-bottom: 0; }
.bounty-lists { gap: 24px; }
.bounty-sub { margin-bottom: 10px; font-size: var(--fs-caption); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.bounty-sub .num { text-transform: none; letter-spacing: 0; }
.bounty-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.bounty-row a { color: var(--text); font-weight: 600; }
.bounty-row a:hover { color: var(--red-text); }
.bounty-row .tag { margin-left: 4px; }
.bounty-amount { font-weight: 600; color: var(--text); }
.bounty-amount.good { color: var(--ok); }
.tag.bounty-status.open { background: var(--red-deep); color: var(--red-text); }
.tag.bounty-status.claimed { background: var(--ok-wash); color: var(--ok); }
.hidden-name { color: var(--muted); font-weight: 600; }
.board td.who-cell .hidden-name { display: inline-block; max-width: 100%; line-height: var(--tap); vertical-align: middle; }

/* ------------------------------------------------------------------ Clans (/clans and /clans/<TAG>; the owner, 2026-11-11, master plan 0.7u)
 * A clan's mark is its color (--clan, set from the record through the CSSOM: only ever a #rrggbb, clans.js paint) with its tag in
 * the display face, and its approved logo over a dark tile once the picture has drawn. A light color gets dark words (.on-light).
 * Red stays the site's signal: a clan's own color is only ever its mark and the thin edge of its card. The Clan Battle board is the
 * leaderboards' table (.board), its rows a clan each; on a phone the won-lost and the difference fold under the name.
 */
.clan-section + .clan-section { margin-top: var(--sp-section); }
.eyebrow-link { color: inherit; padding: 12px 0; }
.eyebrow-link:hover { color: var(--red-hover); text-decoration: underline; text-underline-offset: 3px; }

.clan-mark {
  --clan: var(--s3); --mark: 48px; --k: 0.3;
  position: relative; flex: none; display: grid; place-items: center; overflow: hidden;
  width: var(--mark); height: var(--mark); border-radius: var(--r2);
  background: var(--clan); color: var(--white); box-shadow: inset 0 0 0 1px var(--white-a16);
}
.clan-mark.on-light { color: var(--bg); box-shadow: inset 0 0 0 1px var(--black-a28); }
.clan-mark-tag {
  font-size: calc(var(--mark) * var(--k)); font-weight: 800; font-stretch: var(--wdth-display); letter-spacing: 0.02em; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
}
.clan-mark.len-2 { --k: 0.4; }
.clan-mark.len-3 { --k: 0.31; }
.clan-mark.len-4 { --k: 0.25; }
.clan-mark-24 { --mark: 24px; border-radius: 6px; }
.clan-mark-32 { --mark: 32px; border-radius: var(--r2); }
.clan-mark-56 { --mark: 56px; border-radius: var(--r3); }
.clan-mark-96 { --mark: 96px; border-radius: var(--r4); }
.clan-mark-24 .clan-mark-tag, .clan-mark-32 .clan-mark-tag { letter-spacing: 0; }
/* The approved logo: over a dark tile ringed in the clan's color, faded in once drawn; the tag under it goes */
.clan-mark-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity var(--t-panel) var(--ease); }
.clan-mark.has-logo { background: var(--bg-deep); box-shadow: inset 0 0 0 2px var(--clan); }
.clan-mark.has-logo .clan-mark-logo { opacity: 1; }
.clan-mark.has-logo .clan-mark-tag { visibility: hidden; }
/* "[OWL]": the tag beside a name, as the game writes it on the name plate */
.clan-tag { font-family: var(--mono); font-size: 0.82em; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.load-error { padding: 4px 0; }

/* The Clan Battle: its head (status, name, when, how long), the board, how it counts */
.battle-card { padding: 0; overflow: hidden; }
.battle-card[data-status="live"] { border-color: var(--red-line); box-shadow: inset 0 2px 0 var(--red); }
.battle-head { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 18px; border-bottom: 1px solid var(--line-soft); }
.battle-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.battle-name { font-size: var(--fs-title); font-weight: 800; font-stretch: var(--wdth-title); }
.battle-when { font-family: var(--mono); font-size: var(--fs-ui); color: var(--text); }
.battle-meta { font-size: var(--fs-small); color: var(--muted); }
.battle-meta .num { color: var(--text-2); }
.battle-count { white-space: nowrap; }
.battle-note { margin: 0; padding: 14px 24px 18px; border-top: 1px solid var(--line-soft); color: var(--muted); }
.battle-back { padding: 0 24px 20px; }
.battle-none { padding: 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.battle-none-title { font-size: var(--fs-title-s); font-weight: 700; color: var(--text); }
.battle-none .battle-back { padding: 8px 0 0; }
.clan-board td { padding-top: 8px; padding-bottom: 8px; }
.clan-board td.who-cell { width: 100%; }
.clan-who-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.clan-who-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clan-line { display: flex; align-items: baseline; gap: 0 8px; min-width: 0; }
.board.clan-board td.who-cell a.clan-name { line-height: 1.3; padding: 4px 0; min-width: 0; }
.clan-sub { font-size: var(--fs-small); color: var(--muted); }
.clan-sub-phone { display: none; }
.clan-board td.col-wl, .clan-board td.col-diff { color: var(--text-2); }
.clan-board td.col-points { font-weight: 600; }

/* Clan of the Week: the gold of a title, one card a holder (two on a tie) */
.clan-week-list { display: grid; gap: 12px; margin-bottom: 16px; }
.clan-week {
  display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: var(--r3); color: var(--text);
  border: 1px solid var(--gold-edge); background: linear-gradient(100deg, var(--gold-a16), var(--gold-a00) 70%), var(--s1);
  transition: border-color var(--t-hover) var(--ease);
}
.clan-week:hover { border-color: var(--gold); color: var(--text); }
.clan-week-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.clan-week-label { font: 500 var(--fs-caption)/1 var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--gold); }
.clan-week-name { font-size: var(--fs-title); font-weight: 800; font-stretch: var(--wdth-title); line-height: 1.2; overflow-wrap: anywhere; }
.clan-week-line { font-size: var(--fs-ui); color: var(--text-2); }

/* Past battles: each one's top three, newest first */
.past-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: stretch; }
.past-battle { display: flex; flex-direction: column; }
.past-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.panel > header.past-head h3 { margin-bottom: 0; color: var(--text-2); }
.past-top { list-style: none; }
.past-row { display: grid; grid-template-columns: 30px 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.past-row:first-child { border-top: 0; }
.past-row .rank-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-pill); font: 600 var(--fs-small)/1 var(--mono); color: var(--muted); background: var(--s2); }
.past-row.top-1 .rank-mark { color: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold); background: var(--gold-deep); }
.past-row.top-2 .rank-mark { color: var(--medal-silver); box-shadow: inset 0 0 0 1.5px var(--medal-silver); }
.past-row.top-3 .rank-mark { color: var(--medal-bronze); box-shadow: inset 0 0 0 1.5px var(--medal-bronze); }
.past-name { min-width: 0; display: flex; align-items: baseline; gap: 0 8px; }
.past-name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.past-name a:hover { color: var(--red-text); }
.past-points { font-size: var(--fs-small); color: var(--text-2); white-space: nowrap; }
.past-empty { font-size: var(--fs-ui); }
.past-foot { margin-top: auto; padding-top: 14px; }

/* Every clan: a card each, its color along its left edge */
.clan-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.clan-grid > li { min-width: 0; }
.clan-card {
  --clan: var(--line); position: relative; display: flex; align-items: center; gap: 16px; height: 100%; min-height: 84px; padding: 16px 18px 16px 20px;
  border-radius: var(--r3); background: var(--s1); border: 1px solid var(--edge); color: var(--text); overflow: hidden;
  transition: border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
.clan-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--clan); }
.clan-card:hover { border-color: var(--line-hover); background: var(--s2); color: var(--text); }
.clan-card-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.clan-card-name { display: flex; align-items: baseline; gap: 0 8px; min-width: 0; }
.clan-card-title { min-width: 0; font-size: var(--fs-large); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-card-line { font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.clan-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.clan-card.inactive .clan-mark { filter: saturate(0.4); opacity: 0.7; }
.clan-none p + p { margin-top: 4px; }

/* A clan's page: the head (its mark, name and tag, the facts), the banners, its record and its members */
.clan-head { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.clan-head-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.clan-head-name { font-size: var(--fs-display-name); font-weight: 800; font-stretch: var(--wdth-name); line-height: 1.1; overflow-wrap: anywhere; }
.clan-head-tag { font-size: 0.6em; vertical-align: 0.12em; }
.clan-head-facts { color: var(--muted); font-size: var(--fs-body); overflow-wrap: anywhere; }
.clan-head-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.clan-banner { max-width: 760px; }
.clan-banner + .clan-section, .clan-head + .clan-section { margin-top: 40px; }
.stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.clan-roster td.who-cell { width: 55%; }
.clan-roster .role-inline { display: none; }
.clan-roster .tag { margin-left: 0; }
.tag.role-leader { background: var(--gold-deep); color: var(--gold); }
.tag.role-officer { background: var(--s3); color: var(--text); }
.role-plain { font-size: var(--fs-ui); color: var(--muted); }
.clan-roster td.col-joined { font-size: var(--fs-ui); color: var(--text-2); }
.clan-more { margin-top: 24px; }

@media (max-width: 760px) {
  .stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .clan-board th.col-wl, .clan-board td.col-wl, .clan-board th.col-diff, .clan-board td.col-diff { display: none; }
  .clan-board .clan-sub-phone { display: inline; }
  .clan-board th.num.col-points, .clan-board td.col-points { width: 76px; }
  .clan-board .clan-mark-32 { --mark: 24px; border-radius: 6px; }
  .clan-who-row { gap: 10px; }
  .board.clan-board td.who-cell a.clan-name { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .battle-head { padding: 18px 16px 16px; }
  .battle-note { padding: 12px 16px 16px; }
  .battle-back { padding: 0 16px 16px; }
  .clan-week { padding: 16px; gap: 14px; }
  .clan-week .clan-mark-56 { --mark: 48px; }
  .clan-week-name { font-size: var(--fs-title-s); }
  .clan-card { padding: 14px 14px 14px 18px; gap: 14px; }
  .clan-head { gap: 16px; }
  .clan-head .clan-mark-96 { --mark: 64px; border-radius: var(--r3); }
  .clan-roster th.col-role, .clan-roster td.col-role { display: none; }
  .clan-roster .role-inline { display: flex; margin-top: -6px; }
  .clan-roster td.who-cell { width: auto; }
  .clan-roster th.num.col-joined, .clan-roster td.col-joined { width: 40%; }
}
@media (max-width: 359px) {
  .stats.four { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .past-row { grid-template-columns: 28px 24px minmax(0, 1fr); }
  .past-points { grid-column: 3; margin-top: -6px; }
}

/* ------------------------------------------------------------------ Privacy and Terms (2026-10-13)
 * The Privacy Policy (/privacy) and the Terms of Service (/terms) (owner: "a privacy and terms policy page"; master plan
 * 0.7k): long text at a reading measure (*ours*: 68 characters, 17 px on 1.7), each part numbered as in "On this page".
 * From 1041 px "On this page" is a column beside the text that stays in view while it scrolls (legal.js marks the part being
 * read); below that, a box above the text. A part jumped to lands under the sticky header, level with that column's top.
 */
.legal-updated { font-size: var(--fs-small); color: var(--muted); }
.legal-updated time { color: var(--text-2); }
.legal {
  counter-reset: legal-part; display: grid; grid-template-columns: minmax(0, 68ch) minmax(200px, 248px); column-gap: 48px;
  justify-content: space-between; align-items: start; font-size: var(--fs-large); line-height: 1.7; color: var(--text-2);
}
/* The text in the first column (a row per part); "On this page" beside it, over every row (*ours*: 40, past any count of parts) */
.legal > section { grid-column: 1; min-width: 0; counter-increment: legal-part; overflow-wrap: break-word; scroll-margin-top: 16px; }
.legal > section + section { margin-top: 48px; }
.legal-toc {
  grid-column: 2; grid-row: 1 / span 40; position: sticky; top: calc(var(--header-h) + 32px);
  max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; overscroll-behavior: contain;
  /* Room for a link's focus ring inside the scrolling box */
  margin: -4px; padding: 4px; font-size: var(--fs-ui); line-height: 1.4;
}
.legal-toc h2 {
  margin-bottom: 12px; font-size: var(--fs-label); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--muted);
}
.legal-toc ol { list-style: none; counter-reset: legal-toc; border-left: 1px solid var(--line); }
.legal-toc li { counter-increment: legal-toc; break-inside: avoid; }
.legal-toc a { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 7px 0 7px 16px; color: var(--muted); }
/* The part's number, as above its heading; a screen reader has the list's own numbering, so it is not read twice */
.legal-toc a::before {
  content: counter(legal-toc, decimal-leading-zero); content: counter(legal-toc, decimal-leading-zero) / "";
  flex: none; font-family: var(--mono); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; color: var(--muted);
  transition: color var(--t-hover) var(--ease);
}
.legal-toc a:hover { color: var(--text); }
.legal-toc a[aria-current="true"] { color: var(--text); }
.legal-toc a[aria-current="true"]::before { color: var(--red-text); }
.legal-toc a[aria-current="true"]::after {
  content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; border-radius: var(--r-pill); background: var(--red);
}
/* Each part: its number in the eyebrow's mono red, then its heading */
.legal > section > h2 { font-size: var(--fs-title); font-weight: 800; font-stretch: var(--wdth-name); line-height: 1.2; color: var(--text); }
.legal > section > h2::before {
  content: counter(legal-part, decimal-leading-zero); content: counter(legal-part, decimal-leading-zero) / "";
  display: block; margin-bottom: 10px; font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500;
  letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; color: var(--red-text);
}
.legal > section > * + * { margin-top: 16px; }
.legal > section > h3 { margin-top: 28px; font-size: var(--fs-title-s); font-weight: 700; line-height: 1.3; color: var(--text); }
.legal > section > h3 + * { margin-top: 10px; }
.legal > section ul, .legal > section ol { padding-left: 1.4em; }
.legal > section li + li, .legal > section li > ul, .legal > section li > ol { margin-top: 8px; }
.legal > section li { padding-left: 4px; }
.legal > section li::marker { color: var(--muted); }
.legal > section ol > li::marker { font-family: var(--mono); font-size: var(--fs-ui); }
.legal > section strong { font-weight: 700; color: var(--text); }
.legal > section a {
  color: var(--red-text); text-decoration: underline; text-decoration-color: var(--red-a35); text-decoration-thickness: 1px;
  text-underline-offset: 3px; transition: color var(--t-hover) var(--ease), text-decoration-color var(--t-hover) var(--ease);
}
.legal > section a:hover { color: var(--red-hover); text-decoration-color: currentColor; }
/* A data list (what is kept, why, for how long): a quiet framed table whose words wrap, never wider than the text */
.legal > section table {
  border-collapse: separate; border-spacing: 0; border: 1px solid var(--edge); border-radius: var(--r3); background: var(--s1);
  font-size: var(--fs-body); line-height: 1.5;
}
.legal > section caption { caption-side: top; padding-bottom: 10px; text-align: left; font-size: var(--fs-small); color: var(--muted); }
.legal > section th { white-space: normal; vertical-align: bottom; }
.legal > section td { vertical-align: top; color: var(--text-2); }
.legal > section td:first-child { color: var(--text); }
.legal > section td a { overflow-wrap: anywhere; }
/* A row's own heading (th scope="row") reads as its first cell, not as a column's caps label */
.legal > section tbody th {
  vertical-align: top; border-bottom: 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-body); font-weight: 600;
  font-stretch: var(--wdth-normal); letter-spacing: var(--track-none); text-transform: none; color: var(--text);
}
.legal > section tbody tr:first-child > * { border-top: 0; }
.legal > section tbody tr:hover td { background: none; }

/* Below 1041 px: one column at the reading measure, "On this page" a box above the text (two columns of links while there
   is room, one on a phone) */
@media (max-width: 1040px) {
  .legal { display: block; max-width: 68ch; }
  .legal > section { scroll-margin-top: 4px; }
  .legal-toc {
    position: static; max-height: none; overflow: visible; margin: 0 0 48px; padding: 20px 22px;
    border: 1px solid var(--edge); border-radius: var(--r3); background: var(--s1);
  }
  .legal-toc ol { border-left: 0; columns: 2; column-gap: 32px; }
  .legal-toc a { padding-left: 0; }
  /* The box is not in view while the text is read: no part marked in it */
  .legal-toc a[aria-current="true"] { color: var(--muted); }
  .legal-toc a[aria-current="true"]::before { color: var(--muted); }
  .legal-toc a[aria-current="true"]::after { display: none; }
  .legal-toc a:hover { color: var(--text); }
}
@media (max-width: 600px) {
  .legal { font-size: var(--fs-text); line-height: 1.65; }
  .legal-toc { margin-bottom: 40px; padding: 16px 18px; }
  .legal-toc ol { columns: 1; }
  .legal-toc a { padding: 8px 0; }
  .legal > section + section { margin-top: 40px; }
}

/* The questions page (/faq, 2026-10-18): the legal pages' layout, each question a heading with its answer under it; the way
   in after the last part */
.faq-next { margin-top: var(--sp-section); }

/* Network Pass on the member's own page (/me; me.js drawPass): the gold edge of the public pass card, a quiet head. */
.pass-panel {
  border-color: var(--gold-edge);
  background: radial-gradient(ellipse 60% 120% at 92% 0%, var(--gold-a08), var(--gold-a00) 60%), var(--s1);
}
.pass-panel { position: relative; overflow: hidden; }
.pass-panel-medal { display: none; }
@media (min-width: 900px) {
  .pass-panel { padding-right: 200px; }
  .pass-panel-medal {
    display: block; position: absolute; right: 40px; top: 50%; width: auto; height: min(120px, calc(100% - 32px)); transform: translateY(-50%);
    filter: drop-shadow(0 16px 32px var(--gold-a16)); pointer-events: none;
  }
}
.me-pass:has(> #weekly:not([hidden])) .pass-panel { padding-right: var(--sp-card); }
.me-pass:has(> #weekly:not([hidden])) .pass-panel-medal { display: none; }
.pass-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pass-panel-head h3 { margin: 0; }
.pass-panel-head .pass-star { color: var(--gold); flex: none; }
.pass-panel .lead { max-width: 62ch; }
.pass-price strong { font-weight: 700; font-size: var(--fs-text); font-variant-numeric: tabular-nums; color: var(--text); }
.pass-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pass-legal { max-width: 62ch; font-size: var(--fs-small); line-height: 1.5; }
.pass-legal a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-hover); text-underline-offset: 3px; }
.pass-legal a:hover { color: var(--text); text-decoration-color: currentColor; }
/* A pass that ended, and a payment still clearing, said above everything else on the card (the audit of 2026-10-14) */
.pass-ended { margin-bottom: 10px; font-weight: 600; color: var(--text); }
.pass-pending { max-width: 62ch; color: var(--text-2); }
.pass-pending strong { color: var(--text); }

/* ------------------------------------------------------------------ The launcher's page (/launcher; owner, 2026-10-13: its own
   page, a good-looking button, the download only for a signed-in member with Steam linked). The words and the button on the
   left, the app's tile on the right (it tilts under the pointer; a light crosses it now and then, masked to its shape). */

.dl-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px 56px; align-items: center; }
.dl-words { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dl-box { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 132px; }
.dl-box .notice-banner { margin-bottom: 0; max-width: 560px; }
.dl-loading { padding-top: 18px; }
/* Waiting for the answer: the call's own shape, a light passing over it (its words are still there for a screen reader) */
.dl-loading, .np-loading {
  position: relative; overflow: hidden; width: min(100%, 300px); height: 64px; padding: 0; border-radius: var(--r3);
  background: var(--s1); border: 1px solid var(--edge); color: transparent; user-select: none;
}
.np-loading { width: min(100%, 340px); height: 54px; margin: 0 auto; }
.dl-loading::after, .np-loading::after {
  content: ""; position: absolute; inset: 0; transform: translate3d(-100%, 0, 0); animation: shimmer 1.4s var(--ease) infinite;
  background: linear-gradient(90deg, var(--white-a00), var(--white-a05), var(--white-a00));
}
@keyframes shimmer { to { transform: translate3d(100%, 0, 0); } }
/* A new state rises in where the old one was (the download, Network Pass's card), never a jump */
.dl-box[data-state] > *, #np-buy-body[data-state] > * { animation: rise var(--t-panel) var(--ease) both; }
/* The download: the big red call, taller than the site's other calls, a halo that warms under the pointer */
.dl-cta { position: relative; display: flex; isolation: isolate; }
.dl-box[data-state="ready"] .dl-cta::before {
  content: ""; position: absolute; inset: -14px -18px; z-index: -1; border-radius: var(--r4); pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 60%, var(--red-a35), var(--red-a00) 70%);
  opacity: 0.6; transition: opacity var(--t-panel) var(--ease);
}
.dl-box[data-state="ready"] .dl-cta:hover::before { opacity: 1; }
.dl-button { height: 64px; padding: 0 34px 0 28px; gap: 12px; font-size: var(--fs-text); box-shadow: 0 12px 32px var(--red-a22), inset 0 1px 0 var(--white-a16); }
.dl-button svg { flex: none; transition: transform var(--t-hover) var(--ease); }
.dl-button:hover svg { transform: translateY(2px); }
.dl-button:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.dl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-small); color: var(--muted); }
.dl-meta .mono { color: var(--text-2); }
.dl-sep { color: var(--faint); }
/* Once pressed: one line where the button is, a green tick before it */
.dl-note { display: none; align-items: center; gap: 10px; font-size: var(--fs-ui); color: var(--text-2); }
.dl-note.started { display: inline-flex; animation: rise var(--t-panel) var(--ease) both; }
.dl-note svg { width: 18px; height: 18px; flex: none; color: var(--ok); }
.dl-note strong { color: var(--text); }
/* Under the download, two folds between hairlines: Windows' warning, and the file's checksum */
.dl-more { width: 100%; max-width: 480px; border-top: 1px solid var(--line-soft); }
.dl-more .disclosure { border-bottom: 1px solid var(--line-soft); }
.dl-more .disclosure > summary { width: 100%; }
.dl-more .disclosure > summary::after { margin-left: auto; }
.dl-more .disclosure > summary svg { width: 16px; height: 16px; }
.dl-warn-body, .dl-hash-body { display: flex; flex-direction: column; gap: 8px; padding: 0 0 16px 26px; font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); }
/* A Windows button's name, set like a key */
.dl-key {
  display: inline-block; padding: 1px 7px; margin: 0 1px; border-radius: var(--r1); border: 1px solid var(--line-strong); border-bottom-width: 2px;
  background: var(--s2); font: 600 var(--fs-caption)/1.5 var(--sans); color: var(--text); white-space: nowrap;
}
.dl-hash-label { font-size: var(--fs-label); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.dl-hash code {
  display: block; padding: 10px 12px; border-radius: var(--r2); background: var(--s1); border: 1px solid var(--edge);
  font-size: var(--fs-caption); line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; word-break: break-all; user-select: all;
}
/* Before the download: one card with what it needs (done, next, to do), one call and one quiet line */
.dl-gate {
  display: flex; flex-direction: column; gap: 16px; width: min(100%, 440px); padding: 22px;
  border-radius: var(--r3); background: var(--s1-a78); border: 1px solid var(--edge);
}
.dl-lock { font-size: var(--fs-caption); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.dl-gate .dl-cta, .dl-gate .dl-cta .button { width: 100%; }
.dl-gate .signin-legal, .dl-gate .dl-small { margin: -4px 0 0; }
.dl-checks { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.dl-checks li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body); color: var(--muted); }
.dl-check { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.6px solid var(--line-strong); }
.dl-check svg { width: 14px; height: 14px; }
.dl-checks li[data-state="done"] { color: var(--text-2); }
.dl-checks li[data-state="done"] .dl-check { background: var(--ok-wash); border-color: var(--ok-a50); color: var(--ok); }
.dl-checks li[data-state="current"] { color: var(--text); font-weight: 600; }
.dl-checks li[data-state="current"] .dl-check { border-color: var(--red-text); box-shadow: 0 0 0 4px var(--red-a18); }
.dl-small { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
/* The app's tile */
.dl-art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 16px 0; }
.dl-glow { position: absolute; left: 6%; right: 6%; top: 0; bottom: 18%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--red-a18), var(--red-a00)); }
.dl-tile { position: relative; width: clamp(180px, 20vw, 272px); aspect-ratio: 1; transition: transform var(--t-panel) var(--ease); will-change: transform; }
.dl-tile img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 32px 48px var(--black-a50)); }
.dl-shine {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask: url('/assets/an-app-icon-512.png') center / 100% 100% no-repeat;
  mask: url('/assets/an-app-icon-512.png') center / 100% 100% no-repeat;
}
.dl-shine::before {
  content: ""; position: absolute; inset: 0; transform: translate3d(-130%, 0, 0); animation: shine 10s var(--ease) infinite;
  background: linear-gradient(115deg, var(--white-a00) 32%, var(--white-a16) 48%, var(--white-a00) 62%);
}
.dl-plate {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--s1-a78); border: 1px solid var(--edge); font-size: var(--fs-small); font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.dl-plate .mono { font-weight: 400; color: var(--muted); }
#install .step-cards { margin-top: 4px; }

/* A tablet or a phone: one column, the tile small above the words; on a phone the button spans the column */
@media (max-width: 900px) {
  .dl-hero { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dl-art { order: -1; align-items: flex-start; padding: 0; }
  .dl-tile { width: 96px; }
  .dl-glow, .dl-plate { display: none; }
}
@media (max-width: 600px) {
  .dl-cta, .dl-button { width: 100%; }
  .dl-box .button.big { width: 100%; }
  /* The longest call (Link Steam on your profile) stays inside its card on a phone */
  .dl-gate { padding: 18px; }
  .dl-gate .button.big { padding: 0 12px; font-size: var(--fs-ui); letter-spacing: 0.06em; }
  /* The halo stays inside the column (the page's gutter is narrower than its reach) */
  .dl-box[data-state="ready"] .dl-cta::before { inset: -12px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-shine::before { animation: none !important; }
}

/* The not-found page (web/404.html; owner, 2026-10-13: our own page for an address that is not on the site). The big
   outlined 404 sits behind the words on the right; on a phone it goes above them. */
.nf { position: relative; display: grid; justify-items: start; align-content: center; gap: 14px; min-height: 52vh; padding: 48px 0 24px; }
.nf > :not(.nf-code) { position: relative; z-index: 1; }
.nf-code {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0;
  font: 700 clamp(120px, 20vw, 240px)/0.85 var(--mono); letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong); pointer-events: none; user-select: none;
}
.nf .lead { max-width: 520px; }
.nf .button-row { margin-top: 14px; }
@media (max-width: 760px) {
  .nf { min-height: 0; padding-top: 24px; }
  .nf-code { position: static; transform: none; font-size: 96px; margin-bottom: 4px; }
}
/* On a phone: home across the width, the two other ways side by side under it (never a ragged two and one) */
@media (max-width: 600px) {
  .nf .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .nf .button-row > :first-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ Network Pass's call and page (/networkpass; owner,
   2026-10-14: "a nice looking button ... making the network pass purchase more formal and professional"). The pass's
   gold, never Night Red: dark text on gold (9.9:1), a light sweep on hover, the medallion beside the price. */

.button.gold { background: var(--gold); border-color: var(--gold); color: var(--bg); box-shadow: 0 10px 28px var(--gold-a16), inset 0 1px 0 var(--white-a32); }
.button.gold:hover, .button.gold:active { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--bg); }
.button.gold:focus-visible { outline: 2px solid var(--gold-hover); outline-offset: 3px; }
.pass-cta { margin-top: 6px; }

.np-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px 48px; align-items: stretch; }
.np-words { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.np-page .page-title span { color: var(--gold); }
.np-benefits { width: 100%; }
.np-group { margin: 16px 0 8px; font: 500 var(--fs-caption)/1 var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--gold); }
.np-list { list-style: none; border-top: 1px solid var(--line-soft); }
.np-list li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.np-list strong { font-weight: 700; }
.np-list span { color: var(--text-2); font-size: var(--fs-body); }
.np-note { font-size: var(--fs-ui); }
.np-buy {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 32px 28px;
  border-color: var(--gold-edge); background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--gold-a16), var(--gold-a00) 65%), var(--s1);
}
.np-medal { width: 132px; height: 132px; }
.np-buy-title { font-size: var(--fs-title); font-weight: 800; font-stretch: var(--wdth-title); }
#np-buy-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.np-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.np-money { font-size: var(--fs-heading); font-weight: 800; font-stretch: var(--wdth-title); letter-spacing: var(--track-display); color: var(--text); font-variant-numeric: tabular-nums; }
.np-per { color: var(--text-2); font-size: var(--fs-body); }
.np-text { color: var(--text-2); max-width: 40ch; }
.np-have { display: flex; align-items: center; gap: 8px; font-size: var(--fs-large); }
.np-star { color: var(--gold); }
.np-ended { color: var(--text); font-weight: 600; }
/* A payment Stripe is retrying: the one thing to act on, in the warning's colour */
.np-state.warn, .pass-warn { color: var(--warn); }
.np-cta { width: 100%; max-width: 340px; }
.np-small { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); max-width: 44ch; }
.np-small a, .np-legal a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-hover); text-underline-offset: 3px; }
.np-side { display: flex; flex-direction: column; gap: var(--sp-grid); min-width: 0; }
.np-side .np-buy { flex: 1; }
.np-how { list-style: none; display: flex; flex-direction: column; gap: 14px; padding: var(--sp-card); border: 1px solid var(--edge); border-radius: var(--r3); background: var(--s1); }
.np-how li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; align-items: center; }
.np-how-icon { grid-row: span 2; }
/* A card title here, not the panels' caps label (.panel > h3) */
.np-how h3 { margin: 0; font-size: var(--fs-text); font-weight: 700; font-stretch: var(--wdth-normal); letter-spacing: var(--track-none); text-transform: none; color: var(--text); }
.np-how p { color: var(--muted); font-size: var(--fs-ui); }
.np-how-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r2); background: var(--gold-deep); color: var(--gold); }
.np-legal { padding: 0 2px; font-size: var(--fs-small); }

@media (max-width: 900px) {
  /* One column, the call before the list: the head, the buy card, every benefit, how it works */
  .np-hero { display: flex; flex-direction: column; gap: 16px; }
  .np-words { display: contents; }
  .np-words > * { align-self: flex-start; }
  .np-side { display: contents; }
  .np-buy { order: 1; }
  .np-benefits { order: 2; }
  .np-note { order: 3; }
  .np-how { order: 4; margin-top: 16px; }
  .np-legal { order: 5; }
}
@media (max-width: 600px) {
  .np-list li { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .np-medal .medallion-turn, .np-medal .medallion-shine::before { animation: none !important; }
}

/* ------------------------------------------------------------------ The game's own page (/games/nba-2k20; the search pass,
   2026-10-18): the page head beside our cover tile (the home's Games card), the status strip, what is back, the four steps,
   what you need and a few questions. The site's own parts; only their arrangement is new. */

.game-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: center; }
.game-hero .page-head { margin-bottom: 0; }
.game-hero-art { position: relative; width: 264px; margin-right: 24px; }
/* A faint red light behind the tile (decorative), as behind the launcher's */
.game-hero-art::before {
  content: ""; position: absolute; inset: -14% -36%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--red-a18), var(--red-a00));
}
/* Where the page sits: Home / Games / NBA 2K20, in the eyebrow's mono caps; the page itself in red */
.crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px;
  font: 500 var(--fs-caption)/1 var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase;
}
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/"; content: "/" / ""; color: var(--faint); }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current="page"] { color: var(--red-text); }
.game-strip { margin-top: 40px; }
/* What is back: four cards, a red mark, a title and a line each */
.game-back { list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.game-back > li, .game-qa > .panel { display: flex; flex-direction: column; gap: 8px; }
/* A card title here, not the panels' caps label (.panel > h3) */
.game-back h3, .game-qa h3 {
  margin: 0; font-size: var(--fs-title-s); font-weight: 700; font-stretch: var(--wdth-normal); letter-spacing: var(--track-none);
  text-transform: none; line-height: 1.3; color: var(--text);
}
.game-back p, .game-qa p { color: var(--muted); font-size: var(--fs-body); }
.game-icon {
  width: 40px; height: 40px; margin-bottom: 8px; display: grid; place-items: center; flex: none;
  border-radius: var(--r2); background: var(--s2); border: 1px solid var(--red-edge); color: var(--red-text);
}
.game-qa { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.game-next { margin-top: var(--sp-section); }
@media (max-width: 1040px) {
  .game-back { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A tablet or a phone: one column, the tile small above the words (the home's phone tile) */
@media (max-width: 900px) {
  .game-hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .game-hero-art { order: -1; width: 112px; margin: 0 0 24px; }
  .game-hero-art::before { display: none; }
  .game-hero-art .cover-words { left: 8px; right: 8px; bottom: 12px; }
  .game-hero-art .cover-kicker { height: 18px; padding: 0 6px; letter-spacing: var(--track-chip); }
  .game-qa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .game-back { grid-template-columns: minmax(0, 1fr); }
  .game-strip { margin-top: 28px; }
}

/* The how-to video (the outreach pass, 2026-10-18; api/tools/videos.js writes it into the game's page when one is
   featured): a 16:9 card in the game cover's frame (its edge, its shadow, the light that crosses it on hover) with the
   steps' red line along its top, our own poster and one play button; YouTube's player takes its place once pressed
   (game.js). Beside it, as high as it: its running time large and outlined at the top (the steps' numerals), its title and
   its one sentence at the foot on a hairline; on a tablet or a phone, the title and the sentence under it. */
.watch { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px 48px; align-items: stretch; }
/* A faint red light behind the card (decorative), as behind the cover tile */
.watch::before {
  content: ""; position: absolute; z-index: -1; left: -8%; top: -18%; width: 72%; height: 136%; pointer-events: none;
  background: radial-gradient(closest-side, var(--red-a09), var(--red-a00));
}
.video {
  position: relative; isolation: isolate; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r3);
  background: var(--black); border: 1px solid var(--line); box-shadow: 0 28px 64px var(--black-a50);
}
/* The ring around the whole card (the button inside it would be clipped by the card's edge) */
.video:has(> .video-play:focus-visible) { outline: 2px solid var(--white); outline-offset: 4px; }
.video-play {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit;
  background: none; color: var(--white); cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.video-play:focus-visible { outline: none; }
.video-play::before {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--red), var(--red-text));
}
.video-play::after {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; transform: translate3d(-120%, 0, 0);
  background: linear-gradient(105deg, var(--white-a00) 35%, var(--white-a16) 50%, var(--white-a00) 65%);
}
.video-play:hover::after { animation: cover-sweep 1s var(--ease) 1; }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-page) var(--ease); }
.video-play:hover .video-poster { transform: scale(1.025); }
/* The poster's edges a little darker, so the button and the time read on any picture */
.video-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 75% at 50% 50%, var(--bg-a00) 45%, var(--bg-a55) 100%), linear-gradient(180deg, var(--bg-a00) 62%, var(--bg-a55) 100%);
}
.video-button {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center;
  border-radius: 50%; background: var(--bg-a70); border: 1px solid var(--white-a32); color: var(--white); box-shadow: 0 12px 32px var(--black-a50);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  transition: transform var(--t-panel) var(--ease), background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), box-shadow var(--t-panel) var(--ease);
}
.video-button svg { width: 30px; height: 30px; margin-left: 3px; }
.video-play:hover .video-button, .video-play:focus-visible .video-button {
  background: var(--red); border-color: var(--red); transform: scale(1.06); box-shadow: 0 14px 40px var(--red-a35);
}
.video-play:active .video-button { background: var(--red-press); border-color: var(--red-press); transform: scale(0.97); }
.video-time {
  position: absolute; z-index: 1; right: 12px; bottom: 12px; padding: 5px 8px; border-radius: var(--r1); background: var(--bg-a84);
  font: 500 var(--fs-caption)/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.watch-words { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.watch-time { display: none; }
.watch-title { font-size: var(--fs-title); font-weight: 800; font-stretch: var(--wdth-title); line-height: 1.2; }
.watch-words p { max-width: 44ch; color: var(--muted); font-size: var(--fs-text); }
@media (max-width: 900px) {
  .watch { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .watch::before { display: none; }
  .watch-words { gap: 6px; }
}
@media (max-width: 600px) {
  .video-button { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .video-button svg { width: 26px; height: 26px; }
  .video-time { right: 10px; bottom: 10px; }
  .watch-title { font-size: var(--fs-title-s); }
}

/* ------------------------------------------------------------------ The status page (/status; owner, 2026-10-19: a player's
   launcher said "Can't connect to Archive Network" and the raw /v1/status read "like print": "an actual status page for
   that"). The summary first (a light, one sentence, when it last checked and Check again), then four cards (this PC's
   connection, the servers, who can play, the launcher), each game in its own row, and what to try when the launcher can't
   connect. A state is always a word on a chip; its colour (the chip, the card's top line, the light) only repeats it. The one
   living thing is the light's ring while everything is up (none under reduced motion or Pause motion). */

.st-summary {
  --st-tint: var(--white-a02);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 28px; padding: 28px 32px;
  border-radius: var(--r4); background: radial-gradient(ellipse 42% 150% at 0% 50%, var(--st-tint), var(--white-a00) 72%), var(--s1);
  transition: border-color var(--t-panel) var(--ease);
}
.st-summary[data-tone="ok"] { --st-tint: var(--ok-wash); }
.st-summary[data-tone="warn"] { --st-tint: var(--warn-wash); border-color: var(--warn-line); }
.st-summary[data-tone="bad"] { --st-tint: var(--red-a09); border-color: var(--red-line); }
/* The light: a word's sign, never the word (the headline beside it says the state) */
.st-orb {
  position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--s2); border: 1px solid var(--line-strong); color: var(--muted);
  transition: color var(--t-panel) var(--ease), border-color var(--t-panel) var(--ease), background-color var(--t-panel) var(--ease);
}
.st-orb svg { display: none; width: 28px; height: 28px; }
.st-summary[data-tone="checking"] .st-i-checking, .st-summary[data-tone="ok"] .st-i-ok,
.st-summary[data-tone="warn"] .st-i-warn, .st-summary[data-tone="bad"] .st-i-bad { display: block; }
.st-summary[data-tone="ok"] .st-orb { background: var(--ok-wash); border-color: var(--ok-a50); color: var(--ok); }
.st-summary[data-tone="warn"] .st-orb { background: var(--warn-wash); border-color: var(--warn-edge); color: var(--warn); }
.st-summary[data-tone="bad"] .st-orb { background: var(--red-deep); border-color: var(--red-edge); color: var(--red-text); }
/* The page's one living thing (one on a page, as the home's dot): while everything is up, a ring breathes out from the light */
.st-orb::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; pointer-events: none;
}
.st-summary[data-tone="ok"] .st-orb::after { animation: st-ring 2.8s var(--ease) infinite; }
@keyframes st-ring { from { opacity: 0.5; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
/* Checking: the arc turns */
.st-summary[data-tone="checking"] .st-i-checking { animation: st-turn 900ms linear infinite; }
@keyframes st-turn { to { transform: rotate(360deg); } }
.st-words { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.st-said { display: flex; flex-direction: column; gap: 6px; }
.st-headline { font-size: var(--fs-display-name); font-weight: 800; font-stretch: var(--wdth-name); line-height: 1.1; overflow-wrap: break-word; }
.st-detail { max-width: 60ch; font-size: var(--fs-text); color: var(--text-2); }
.st-fix-link { margin-bottom: -10px; }
.st-check { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.st-time { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.st-time time { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
.st-again svg { flex: none; }
.st-again.turning svg { animation: st-turn 800ms linear infinite; }

/* The four cards: the panels' caps label, the state's chip, one line; the state's colour along the top (the steps' line) */
.st-grid { list-style: none; margin-top: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.st-card, .st-game { position: relative; overflow: hidden; }
.st-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.st-card > h3 { margin-bottom: 0; }
.st-card::before, .st-game::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); transition: background-color var(--t-panel) var(--ease);
}
.st-card[data-tone="ok"]::before, .st-game[data-tone="ok"]::before { background: var(--ok); }
.st-card[data-tone="warn"]::before, .st-game[data-tone="warn"]::before { background: var(--warn); }
.st-card[data-tone="bad"]::before, .st-game[data-tone="bad"]::before { background: var(--red); }
.st-card[data-tone="gold"]::before, .st-game[data-tone="gold"]::before { background: var(--gold); }
.st-chip-row { display: flex; }
.st-text { font-size: var(--fs-body); color: var(--text-2); }
/* The owner's or Operations' message, as they wrote it, under the card's line */
.st-note {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 12px; border-radius: var(--r2);
  background: var(--bg-deep); border: 1px solid var(--edge); box-shadow: inset 2px 0 0 var(--warn);
  font-size: var(--fs-ui); line-height: 1.5; color: var(--text); overflow-wrap: anywhere; white-space: pre-line;
}
.st-card[data-tone="bad"] .st-note { box-shadow: inset 2px 0 0 var(--red-text); }
.st-note-by { font-size: var(--fs-label); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); white-space: normal; }
.st-card > .link-tap { margin-top: auto; margin-bottom: -10px; }

/* Each game: its cover's tile (the title and the face, art/official), its name and regions, its state at the end */
.st-games { list-style: none; }
.st-game { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; }
.st-tile { position: relative; width: 64px; height: 64px; overflow: hidden; border-radius: var(--r2); border: 1px solid var(--line); background: var(--black); }
.st-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.st-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--red); }
.st-game-words { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.st-game-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.st-game-name { font-size: var(--fs-title); font-weight: 800; font-stretch: var(--wdth-name); line-height: 1.2; }
.st-game-name a { display: inline-flex; align-items: center; min-height: var(--tap); margin: -10px 0; color: var(--text); }
.st-game-name a:hover { color: var(--red-text); }
.st-game-sub { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); }
.st-regions { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.st-region {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--bg-deep); border: 1px solid var(--line); font-size: var(--fs-small); font-weight: 600; color: var(--text-2);
}
.st-region svg { flex: none; color: var(--muted); }
.st-game-state { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 320px; text-align: right; }

/* What to try: three steps (the steps' picture in red, the number above the title), Still stuck beside them */
.st-fix-lead { margin: -4px 0 20px; font-size: var(--fs-text); color: var(--text-2); }
.st-fix { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.st-steps { list-style: none; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.st-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 20px; align-items: start; }
.st-step-visual {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r3);
  background: var(--s2); border: 1px solid var(--red-edge); color: var(--red-text);
}
.st-step-visual svg { width: 26px; height: 26px; }
.st-step-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-step-num { font: 500 var(--fs-caption)/1 var(--mono); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; color: var(--red-text); }
.st-step h3 { font-size: var(--fs-title-s); font-weight: 700; line-height: 1.3; }
.st-step p { font-size: var(--fs-body); color: var(--muted); }
.st-step p strong { font-weight: 600; color: var(--text); }
/* The folder, set as typed (on a narrow screen it wraps after a backslash, never inside a name), and its Copy */
.st-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 4px; }
.st-path-label { font-size: var(--fs-label); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.st-path code {
  min-width: 0; padding: 7px 12px; border-radius: var(--r2); background: var(--bg-deep); border: 1px solid var(--edge);
  font: var(--fs-small)/1.5 var(--mono); color: var(--text); overflow-wrap: break-word; user-select: all;
}
.st-path .st-copy { height: 36px; min-height: 36px; padding: 0 12px; color: var(--text-2); }
.st-path .st-copy svg { flex: none; }
/* Windows' own names, set like keys, in the order they are pressed; a line that wraps starts with its arrow */
.st-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.st-keys .dl-key { margin: 0; }
.st-key-sep { color: var(--faint); }
.st-stuck .ask-list strong .chan { color: var(--text); }
.st-tell { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); color: var(--muted); }

@media (max-width: 1040px) {
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .st-fix { grid-template-columns: minmax(0, 1fr); }
}
/* A tablet or a phone: the time and Check again under the words, on a hairline */
@media (max-width: 760px) {
  .st-summary { grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; padding: 24px; }
  .st-check {
    grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    padding-top: 16px; border-top: 1px solid var(--line-soft); text-align: left;
  }
}
@media (max-width: 600px) {
  .st-summary { align-items: start; padding: 20px; }
  /* The time, then Check again across the card: one tap target the width of the thumb's reach */
  .st-check { flex-direction: column; align-items: stretch; }
  .st-again { width: 100%; }
  .st-orb { width: 48px; height: 48px; }
  .st-orb svg { width: 22px; height: 22px; }
  .st-headline { font-size: var(--fs-name-s); }
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .st-game { grid-template-columns: 56px minmax(0, 1fr); align-items: start; }
  .st-tile { width: 56px; height: 56px; }
  .st-game-state { grid-column: 1 / -1; align-items: flex-start; max-width: none; text-align: left; }
  .st-step { grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; }
  .st-step-visual { width: 44px; height: 44px; }
  .st-step-visual svg { width: 22px; height: 22px; }
}
html.motion-paused .st-orb::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .st-orb::after, .st-i-checking, .st-again svg { animation: none !important; }
}

/* ------------------------------------------------------------------ The Archive Creator Program, /creators and /me/creator (the owner, 2026-10-31) */

.creator-stack { display: flex; flex-direction: column; gap: 16px; }
.creator-stack > .notice-banner { margin-bottom: 0; }
.creator-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-grid); }
.creator-col { display: flex; flex-direction: column; gap: var(--sp-grid); min-width: 0; }
.creator-col > :last-child { flex: 1; }
@media (max-width: 900px) {
  .creator-cols { grid-template-columns: minmax(0, 1fr); }
}
#creator-link .check { margin-bottom: 0; }
#creator-link .link-tap { display: inline-flex; }

/* The count: the one number that matters, and the way to the next reward. */
.creator-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 16px 40px; align-items: end;
  padding: 28px; border: 1px solid var(--line); border-radius: var(--r3);
  background: linear-gradient(120deg, var(--red-deep) 0%, var(--s1) 46%, var(--s1) 100%);
}
.creator-hero::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--red);
}
.creator-count { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.creator-count .number {
  font-family: var(--mono); font-size: clamp(56px, 9vw, 92px); font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}
.creator-count .caption { font-size: var(--fs-caption); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.creator-count .aside { font-size: var(--fs-small); color: var(--muted); }
.creator-next { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.creator-next .next-title { font-size: var(--fs-title-s); font-weight: 700; color: var(--text); }
.creator-next .next-what { font-size: var(--fs-body); color: var(--text-2); }
.creator-meter { display: block; width: 100%; height: 8px; border: 0; border-radius: var(--r-pill); overflow: hidden; background: var(--s3); appearance: none; -webkit-appearance: none; }
.creator-meter::-webkit-progress-bar { background: var(--s3); border-radius: var(--r-pill); }
.creator-meter::-webkit-progress-value { background: var(--red); border-radius: var(--r-pill); }
.creator-meter::-moz-progress-bar { background: var(--red); border-radius: var(--r-pill); }

/* The link and the code, each with its copy button. */
.creator-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.creator-link-row:first-of-type { border-top: 0; padding-top: 4px; }
.creator-link-row .what { grid-column: 1 / -1; font-size: var(--fs-label); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.creator-link-row .value { min-width: 0; font-family: var(--mono); font-size: var(--fs-body); color: var(--text); overflow-wrap: anywhere; }

/* The funnel: what happened to everyone who came through the link. */
.creator-funnel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; background: var(--line); }
.creator-funnel .tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--s1); min-width: 0; }
.creator-funnel .tile .n { font-family: var(--mono); font-size: var(--fs-stat); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.creator-funnel .tile .what { font-size: var(--fs-small); color: var(--muted); }
.creator-funnel .tile.key .n { color: var(--red-text); }

/* Lists: a player, a video, a reward: what it is, then why, in words. */
.creator-list { list-style: none; }
.creator-list > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); align-items: start; }
.creator-list > li:first-child { border-top: 0; padding-top: 4px; }
.creator-list .name { min-width: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.creator-list .why { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--text-2); }
.creator-list .sub { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--muted); font-family: var(--mono); }
.creator-list .amount { font-family: var(--mono); font-size: var(--fs-ui); color: var(--text); text-align: right; }
.creator-list .amount.back { color: var(--muted); text-decoration: line-through; }
.creator-empty { color: var(--muted); font-size: var(--fs-ui); }
.tag.wait { background: var(--warn-wash); color: var(--warn); }

/* What can be earned, signed in only. */
.creator-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.creator-table th, .creator-table td { padding: 10px 8px; text-align: left; border-top: 1px solid var(--line-soft); vertical-align: top; }
.creator-table th:first-child, .creator-table td.n { width: 200px; padding-left: 0; }
.creator-table thead th { white-space: nowrap; }
.creator-table thead th { border-top: 0; font-size: var(--fs-label); font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.creator-table td.n { font-family: var(--mono); color: var(--text); white-space: nowrap; }
.creator-table tr.reached td { color: var(--muted); }
.creator-table tr.reached td.n::after { content: " \2713"; color: var(--ok); }
.creator-rules { padding: 0 0 8px 1.2em; font-size: var(--fs-ui); color: var(--text-2); }
.creator-rules li + li { margin-top: 6px; }
.creator-rules li::marker { color: var(--muted); }
/* What is one click away under a list or a table: a quiet fold on a hairline */
.creator-more { margin-top: 16px; border-top: 1px solid var(--line-soft); }
.creator-more > summary { width: 100%; }
.creator-more > summary::after { margin-left: auto; }

.creator-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.creator-form .field { flex: 1 1 240px; margin-bottom: 0; }

/* The public page's three steps: the site's step cards, three across; one a row on a small screen. */
@media (min-width: 761px) {
  .step-cards.creator-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto auto; }
}
@media (min-width: 601px) and (max-width: 760px) {
  .step-cards.creator-steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--sp-grid); }
}

.creator-invite-note code { font-family: var(--mono); color: var(--text); }

@media (max-width: 1040px) {
  .creator-funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .creator-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .creator-steps { grid-template-columns: minmax(0, 1fr); }
  .creator-list .amount { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 420px) {
  .creator-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-funnel .tile { padding: 14px 12px; }
  .creator-link-row { grid-template-columns: minmax(0, 1fr); }
  .creator-link-row .button { justify-self: start; }
  .creator-table th, .creator-table td { padding: 8px 4px; }
  .creator-table th:first-child, .creator-table td.n { width: 112px; padding-left: 0; }
}