/* ============================================================
   TRACKMANIA INDONESIA — SITE STYLESHEET (Minimalist system)
   Single consolidated stylesheet for the whole site. Global rules
   (tokens, reset, nav, footer, card shell, shared components) are
   unscoped. Page-specific rules are scoped under a body class
   (e.g. body.page-about) since several pages reuse the same class
   names for different layouts — see the per-page sections below.

   Material language: flat surfaces, hairline borders, one accent
   color for state. No blur, no shadow, no gradient, no photo
   background, no border-radius (one deliberate exception — the
   About credits avatar, see body.page-about .credit .avatar), no
   hover motion (color change only). See DESIGN.md.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS, RESET, BASE
   ============================================================ */

:root{
    /* dark — the default theme */
    --bg:#0a0a0a;
    --surface:#161616;
    --text:#f2f2f2;
    --muted:#9a9a9a;
    --faint:#666666;
    --line:#262626;
    --line-strong:#3a3a3a;
    --tm-red:#CA2222; --tm-red-bright:#e23b3b;
    --gold:#e8c766;
    --tier-white:#dfe3e8; --tier-green:#46c96a; --tier-blue:#3d9bff; --tier-red:#e5484d; --tier-black:#8b8f96;
    --disp:'Exo 2',sans-serif; --mono:'JetBrains Mono',monospace;
    --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
    --photo-opacity:0.5; --photo-filter:none; --scrim-opacity:0.82;
}
:root[data-theme="light"]{
    --bg:#ffffff;
    --surface:#f7f7f7;
    --text:#111111;
    --muted:#6b6b6b;
    --faint:#a3a3a3;
    --line:#e6e6e6;
    --line-strong:#cfcfcf;
    --tm-red:#CA2222; --tm-red-bright:#9c1b1b;
    --gold:#a8790a;
    --tier-white:#7a828c; --tier-green:#2f9e56; --tier-blue:#1f7ae0; --tier-red:#d23a3f; --tier-black:#6b6b6b;
    --photo-opacity:0.30; --photo-filter:brightness(1.7) saturate(0.55); --scrim-opacity:0.9;
}

/* ── RESET & BASE ──
   body is transparent on purpose — the fixed .bg-photo/.bg-scrim layers
   below are what's actually visible behind everything. Nav, .card, and
   the footer all still paint their own solid var(--bg) fill on top, so
   the photo only ever shows through in true negative space (page
   margins beyond 820px, the gaps between stacked sections) — nothing
   that reads as a UI surface becomes translucent. */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--disp);background:transparent;color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;transition:color .15s;}
a{text-decoration:none;color:inherit;}

/* ── BACKGROUND PHOTO + SCRIM ──
   Restrained on purpose: the photo itself renders at low opacity, and
   a solid scrim in the current theme's --bg sits on top at high
   opacity, so the page still reads as "flat, one color" at a glance —
   the photo is ambient texture, not a backdrop competing with content.
   Light mode brightens/desaturates the photo (it's a dark, moody race
   shot) so it doesn't read as a muddy gray wash under a white scrim. */
.bg-photo{position:fixed;inset:0;z-index:-2;background:var(--bg) url('assets/img/bg.jpg') center/cover no-repeat;opacity:var(--photo-opacity);filter:var(--photo-filter);}
.bg-scrim{position:fixed;inset:0;z-index:-1;background:var(--bg);opacity:var(--scrim-opacity);}

/* ── NAV — flat, one hairline edge, no material of its own. ── */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);}
.nav-inner{margin:0 auto;padding:0 var(--sp-5);height:60px;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);}
.logo .wm{display:flex;flex-direction:column;line-height:1;gap:3px;}
.logo .wm .t{font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:-0.01em;}
.logo .wm .s{font-size:8px;font-weight:700;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase;}
.nav-links{display:flex;align-items:center;gap:var(--sp-2);}
.nav-links a{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);padding:8px 12px;transition:color .15s,background .15s;}
.nav-links a:hover{color:var(--text);background:var(--surface);}
.nav-links a.active{color:var(--text);}
.nav-links a.cta{color:#fff;background:var(--tm-red);}
.nav-links a.cta:hover{background:var(--tm-red-bright);color:#fff;}

/* ── THEME TOGGLE ──
   Plain bordered button, mono label. Same hover language as
   everything else — background tint only, no motion. */
/* Fixed width/height so swapping the emoji glyph (🌙/☀️) never shifts
   nav layout — a text label like "DARK"/"LIGHT" would resize with its
   content, an icon button shouldn't. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;flex-shrink:0;font-size:13px;line-height:1;border:1px solid var(--line-strong);background:none;padding:0;cursor:pointer;transition:border-color .15s,background .15s;}
.theme-toggle:hover{background:var(--surface);}

/* ── RECORDS DROPDOWN ──
   Desktop: CSS-only hover reveal (also opens on keyboard focus via
   :focus-within, no JS needed). Panel is a flat bordered box — same
   material as .card, not a separate "glass" treatment. */
.nav-drop{position:relative;}
.nav-drop-trigger{display:inline-flex;align-items:center;gap:5px;}
.nav-drop-trigger .caret{font-size:8px;transition:transform .15s;}
.nav-drop:hover .nav-drop-trigger .caret,.nav-drop:focus-within .nav-drop-trigger .caret{transform:rotate(180deg);}
.nav-drop-menu{
    position:absolute;top:100%;left:0;min-width:190px;
    display:none;padding-top:6px;z-index:60;
}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:block;}
.nav-drop-panel{
    display:flex;flex-direction:column;gap:1px;padding:6px;
    background:var(--bg);
    border:1px solid var(--line-strong);
}
.nav-drop-panel a{padding:10px 12px;font-size:10.5px;}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:4px;}
.nav-toggle span{width:20px;height:2px;background:var(--text);display:block;}
@media(max-width:640px){
    .nav-links{position:absolute;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .22s ease;}
    .nav-links.open{max-height:640px;}
    .nav-links a{padding:15px var(--sp-5);border-bottom:1px solid var(--line);}
    .nav-links a.cta{margin:var(--sp-3);padding:14px;text-align:center;border-bottom:0;}
    .nav-toggle{display:flex;}
    .theme-toggle{align-self:center;margin:0 0 var(--sp-3);}
    /* Records dropdown is always expanded on mobile (no hover) —
       the sub-links sit indented right under the trigger. */
    .nav-drop{position:static;}
    .nav-drop-trigger .caret{display:none;}
    .nav-drop-menu{position:static;display:block;padding-top:0;}
    .nav-drop-panel{background:transparent;border:0;padding:0;}
    .nav-drop-panel a{padding-left:calc(var(--sp-5) + 16px);font-size:10px;color:var(--faint);}
}

/* ── PAGE SHELL ──
   One consistent content width sitewide. .card is the section
   wrapper markup already used everywhere — redefined here as a
   hairline border with no fill (its background matches the page),
   so the boundary is a line, not a box. */
.nav-inner,.wrap,.foot{max-width:820px;}
.wrap{margin:0 auto;padding:var(--sp-5) var(--sp-5) 0;display:flex;flex-direction:column;gap:var(--sp-3);}
.card{background:var(--bg);border:1px solid var(--line);}

/* ── BREADCRUMB ── */
.crumb{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);padding:2px;flex-wrap:wrap;}
.crumb a{color:var(--muted);}
.crumb a:hover{color:var(--text);}
.crumb .here{color:var(--text);}

/* ── PAGE HEADER (base) ── */
.page-head .eyebrow{font-family:var(--mono);display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);}
.page-head .eyebrow::before{content:'';width:5px;height:5px;background:var(--tm-red);}
.page-head h1{font-size:clamp(26px,4vw,34px);font-weight:800;text-transform:uppercase;letter-spacing:-0.02em;line-height:1;}

/* ── EYEBROW BLOCK (base) ── */
.block{display:flex;flex-direction:column;}
.block-head{padding:var(--sp-5) var(--sp-6) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);}
.block-eyebrow{font-family:var(--mono);display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);}
.block-eyebrow .tick{width:5px;height:5px;background:var(--tm-red);flex-shrink:0;}

/* ── SECTION DIVIDER ── */
.sec{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-4) 2px var(--sp-2);}
.sec .lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);position:relative;padding-left:14px;}
.sec .lbl::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:5px;background:var(--tm-red);}
.sec .ln{flex:1;height:1px;background:var(--line);}

/* ── FOOTER ── */
.foot{margin:var(--sp-6) auto 0;padding:0 var(--sp-5) var(--sp-8);}
.foot-main{border-top:1px solid var(--line);padding-top:var(--sp-5);display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;}
.foot-brand{display:flex;flex-direction:column;gap:6px;}
.foot-brand .t{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:-0.01em;}
.foot-brand .s{font-size:10px;font-weight:600;color:var(--faint);letter-spacing:0.04em;}
.foot-links{display:flex;gap:var(--sp-4);flex-wrap:wrap;}
.foot-links a{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);}
.foot-links a:hover{color:var(--tm-red);}
.foot-legal{margin-top:var(--sp-5);font-size:9px;font-weight:600;letter-spacing:0.04em;line-height:1.7;color:var(--faint);text-transform:uppercase;}

/* ── PAGE-LOAD ENTRANCE ──
   Fade-only (no translateY) — kept minimal, opacity is a state
   change, not the nudge-style motion the hover language dropped. */
@keyframes fadeInUp{from{opacity:0;}to{opacity:1;}}
.wrap>*{animation:fadeInUp .3s ease-out both;}
.wrap>*:nth-child(1){animation-delay:.02s;}
.wrap>*:nth-child(2){animation-delay:.06s;}
.wrap>*:nth-child(3){animation-delay:.10s;}
.wrap>*:nth-child(4){animation-delay:.14s;}
.wrap>*:nth-child(5){animation-delay:.18s;}
.wrap>*:nth-child(6){animation-delay:.22s;}
.wrap>*:nth-child(7){animation-delay:.26s;}
.wrap>*:nth-child(n+8){animation-delay:.30s;}

@keyframes fadeInSm{from{opacity:0;}to{opacity:1;}}
.rank,.mcell,.maprow{animation:fadeInSm .3s ease-out both;}
.rank:nth-child(1),.mcell:nth-child(1),.maprow:nth-child(1){animation-delay:.14s;}
.rank:nth-child(2),.mcell:nth-child(2),.maprow:nth-child(2){animation-delay:.17s;}
.rank:nth-child(3),.mcell:nth-child(3),.maprow:nth-child(3){animation-delay:.20s;}
.rank:nth-child(4),.mcell:nth-child(4),.maprow:nth-child(4){animation-delay:.23s;}
.rank:nth-child(5),.mcell:nth-child(5),.maprow:nth-child(5){animation-delay:.26s;}
.rank:nth-child(n+6),.mcell:nth-child(n+6),.maprow:nth-child(n+6){animation-delay:.29s;}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ── TOP 5 LEADERBOARD ROWS ──
   Used identically on Track of the Day and the single-map board. */
.lb-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--line);}
.lb-head .eyebrow{font-family:var(--mono);display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);}
.lb-head .eyebrow::before{content:'';width:5px;height:5px;background:var(--tm-red);}

.rank{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--line);border-left:3px solid transparent;transition:background .14s,border-color .14s;}
.rank:last-child{border-bottom:0;}
.rank:hover{background:var(--surface);}
/* Records' rows are real links (map board / TOTD); TOTD's and the map
   board's own rows are static data (not clickable) — so the stronger
   "you can click this" cue (the border reveal) is scoped to the actual
   <a> tag rather than the class, to avoid implying clickability where
   there isn't any. */
a.rank:hover{border-left-color:var(--line-strong);}
a.rank.first:hover{border-left-color:var(--tm-red-bright);}
.rank .pos{font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:-0.02em;color:var(--faint);text-align:center;font-variant-numeric:tabular-nums;}
.rank .who{display:flex;flex-direction:column;gap:4px;min-width:0;}
.rank .who .nm{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:-0.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rank .who .dt{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:0.04em;}
.rank .times{display:flex;flex-direction:column;gap:4px;text-align:right;}
.rank .times .tm{font-family:var(--mono);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;}
.rank .times .delta{font-family:var(--mono);font-size:11px;color:var(--tm-red-bright);font-variant-numeric:tabular-nums;}
.rank.first{border-left-color:var(--tm-red);background:var(--surface);}
.rank.first .pos{color:var(--tm-red-bright);}
.rank.first .times .tm{color:var(--tm-red-bright);font-size:16px;}
.rank.first .lead-tag{display:inline-block;margin-left:8px;font-size:8px;font-weight:700;letter-spacing:0.12em;color:#fff;background:var(--tm-red);padding:2px 6px;text-transform:uppercase;vertical-align:middle;}
/* Leader name shown in place of a time (Records Center rows) — same
   slot as .times .tm, styled like a name (not mono/tabular) since
   that's what it is. */
.rank .times .nm{font-weight:700;font-size:14px;text-transform:uppercase;color:var(--muted);}
.rank.first .times .nm{color:var(--tm-red-bright);}
.rank.empty{opacity:0.6;}

/* ── LOADING SKELETON ── */
.rank.skel .pos{background:var(--surface);height:20px;width:20px;}
.skel-bar{display:inline-block;height:12px;background:linear-gradient(90deg, var(--surface) 25%, var(--line-strong) 50%, var(--surface) 75%);background-size:200% 100%;animation:skel-shimmer 1.5s infinite;width:120px;}
.skel-bar.sm{width:80px;height:9px;}
@keyframes skel-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ── MAP SUMMARY ROW ──
   Identifies a map + its current leader — NOT a ranking. Use .rank
   when several people are genuinely ranked against each other for
   one map (TOTD, the map board); use .maprow when the row's job is
   "here's a map/season and who's currently leading it" (Shorts,
   Records — including Records' Track of the Day and Seasonal rows). */
.maplist{display:flex;flex-direction:column;}
.maprow{
    display:grid;grid-template-columns:56px 1fr auto auto;align-items:center;gap:var(--sp-4);
    padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--line);
    border-left:3px solid transparent;transition:background .14s,border-color .14s;
}
.maprow:last-child{border-bottom:0;}
.maprow:hover{background:var(--surface);}
a.maprow:hover{border-left-color:var(--tm-red);}
a.maprow:hover .num{color:var(--tm-red-bright);}
.maprow .num{font-family:var(--mono);font-weight:700;font-size:20px;color:var(--muted);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.maprow .info{display:flex;flex-direction:column;gap:4px;min-width:0;}
.maprow .info .nm{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:-0.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.maprow .info .by{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:0.04em;}
.maprow .leader{text-align:right;display:flex;flex-direction:column;gap:4px;}
.maprow .leader .who{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text);}
.maprow .leader .tm{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;}
.maprow .go{font-family:var(--mono);color:var(--faint);font-size:15px;transition:color .15s;}
a.maprow:hover .go{color:var(--tm-red);}
@media(max-width:560px){
    .maprow{grid-template-columns:44px 1fr auto;}
    .maprow .leader{display:none;}
}

/* .maprow.photo — a map/season's own thumbnail sits behind the row,
   under a gradient that fades from fully-opaque var(--bg) on the left
   to fully transparent by the 96% mark, then stays clear the rest of
   the way. Two background-image layers (gradient, then the photo — set
   per-row, either inline via JS at render time or via a modifier class
   like .season-photo below), no pseudo-element needed. Because the
   gradient fades to the *actual* theme background — not a fixed color
   — the text over it stays plain theme-aware var(--text)/var(--faint),
   exactly like every other .maprow: where the overlay is ~opaque
   (left, where .info sits) it reads as a completely normal row.
   Global, not page-scoped — used on Records, Shorts, Seasonal, and the
   map-leaderboard detail view, anywhere a real thumbnail is available. */
.maprow.photo{background-size:cover;background-position:center;background-repeat:no-repeat;}
.maprow.photo:hover{background-color:transparent;}
.maprow.season-photo{background-image:linear-gradient(to right, var(--bg) 0%, transparent 96%), url('assets/img/seasonal.jpg');}
/* .leader/.go sit past the gradient's 96% mark, where the photo shows
   through with no opaque ground behind them — an arbitrary image can be
   light or dark there, so unlike .info there's no single text color
   that's guaranteed to read. Outline the name with var(--bg) instead of
   a fixed black/white — it auto-inverts per theme (dark bg outlines
   light text, light bg outlines dark text), so it holds up against any
   photo. The arrow gets a permanent (not just hover) red for the same
   reason: var(--faint) can vanish into a light patch of photo. */
.maprow.photo .leader .who{text-shadow:-1.5px -1.5px 0 var(--bg),1.5px -1.5px 0 var(--bg),-1.5px 1.5px 0 var(--bg),1.5px 1.5px 0 var(--bg),0 0 6px var(--bg);}
.maprow.photo .go{color:var(--tm-red);}
.maprow.photo:hover .go{color:var(--tm-red-bright);}

/* ── SECRET TIME / PENDING PATTERN ──
   One dashed-border pattern used for anything "not real yet" —
   a withheld Weekly Shorts time, or (see PAGE: tournaments below)
   an unannounced tournament. Same visual language both places. */
.tm.secret{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);border:1px dashed var(--line-strong);padding:5px 9px;display:inline-block;}
.lb-head .reveal-note{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:0.04em;text-transform:uppercase;}
.rank.first .who .nm{white-space:normal;overflow:visible;text-overflow:clip;}

/* ============================================================
   PAGE: index  (body.page-index)
   ============================================================ */

body.page-index .hero{position:relative;overflow:hidden;border:1px solid var(--line);min-height:clamp(260px,36vw,340px);}
body.page-index .slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;}
body.page-index .slide.on{opacity:1;}
body.page-index .slide .bg,body.page-index .slide .shade{display:none;}
/* All three slides carry a real photo (.photo, see below) — each one
   its own image, never reused across slides, since a repeated photo on
   a page users sit and watch autoplay would read as a mistake, not a
   choice. */
body.page-index .slide.photo .bg{display:block;position:absolute;inset:0;background-size:cover;background-position:center;}
body.page-index .slide.photo .shade{display:block;position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.05) 100%);}
body.page-index .slide .bg.ph1{background-image:url('assets/img/TMIDG02.jpg');}
body.page-index .slide .bg.ph2{background-image:url('assets/img/TMIDG03.jpg');}
body.page-index .slide .bg.ph3{background-image:url('assets/img/TMIDG01.jpg');}
body.page-index .slide .cap{position:relative;height:100%;padding:var(--sp-8) var(--sp-6);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-3);}
body.page-index .slide .cap .eyebrow{font-family:var(--mono);display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);}
body.page-index .slide .cap .eyebrow::before{content:'';width:16px;height:2px;background:var(--tm-red);}
body.page-index .slide .cap h2{font-size:clamp(24px,4.6vw,38px);font-weight:800;text-transform:uppercase;letter-spacing:-0.02em;line-height:0.98;max-width:18ch;}
body.page-index .slide .cap p{font-size:14px;font-weight:500;color:var(--muted);max-width:52ch;line-height:1.45;}
/* Photo slides fix their text to light, regardless of site theme — a
   photo needs consistent contrast against its own scrim, not whatever
   --text/--muted happen to resolve to in light mode. */
body.page-index .slide.photo .cap,body.page-index .slide.photo .cap .eyebrow{color:#fff;}
body.page-index .slide.photo .cap .eyebrow::before{background:var(--tm-red-bright);}
body.page-index .slide.photo .cap p{color:#dcdcdc;}
body.page-index .slide .cap .go{margin-top:var(--sp-3);align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:12px 20px;background:var(--tm-red);color:#fff;transition:background .15s,gap .15s;}
body.page-index .slide .cap .go:hover{background:var(--tm-red-bright);gap:12px;}
body.page-index .dots{position:absolute;bottom:var(--sp-5);right:var(--sp-6);display:flex;gap:7px;z-index:5;}
body.page-index .dots i{width:26px;height:3px;background:var(--line-strong);cursor:pointer;transition:background .25s;}
body.page-index .dots i.on{background:var(--tm-red);}
body.page-index .slide.gold .cap .eyebrow{color:var(--gold);}
body.page-index .slide.gold .cap .eyebrow::before{background:var(--gold);}
body.page-index .block-title{font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;line-height:1;}
body.page-index .block-sub{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0.03em;}
/* Solid-neutral chip treatment (no added color, real border weight) so
   these read as buttons instead of blending into the card as a plain
   list — same skin as .tourn-links a on tournaments.html. */
body.page-index .block-links{display:grid;gap:8px;padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line);}
body.page-index .cells-3{grid-template-columns:1fr 1fr 1fr;}
body.page-index .cells-4{grid-template-columns:repeat(4,1fr);}
body.page-index .cell{padding:var(--sp-4) var(--sp-5);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);background:var(--surface);border:1px solid var(--line-strong);transition:background .15s,border-color .15s;min-height:60px;}
body.page-index .cell .l{display:flex;flex-direction:column;gap:5px;min-width:0;}
body.page-index .cell .name{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:-0.005em;}
body.page-index .cell .val{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0.03em;}
body.page-index .cell .go{font-family:var(--mono);color:var(--faint);font-size:14px;transition:color .15s;flex-shrink:0;}
body.page-index .cell:hover{background:var(--line-strong);border-color:var(--tm-red);}
body.page-index .cell:hover .go{color:var(--tm-red);}
@media(max-width:640px){
    body.page-index .cells-3, body.page-index .cells-4{grid-template-columns:1fr;}
}
body.page-index .funnight{border:1px solid var(--line);display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5) var(--sp-6);flex-wrap:wrap;transition:background .15s;}
body.page-index a.funnight:hover{background:var(--surface);}
body.page-index .funnight .fn-icon{width:44px;height:44px;flex-shrink:0;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px;color:var(--tm-red-bright);}
body.page-index .funnight .fn-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
body.page-index .funnight .fn-body .t{font-weight:700;font-size:15px;text-transform:uppercase;}
body.page-index .funnight .fn-body .s{font-size:12px;color:var(--muted);font-weight:500;}
body.page-index .funnight .fn-when{font-family:var(--mono);font-size:12px;color:var(--text);font-weight:500;text-align:right;}
body.page-index .funnight .fn-when b{color:var(--tm-red-bright);font-weight:700;}
body.page-index .fn-when .live-pulse{color:var(--tm-red-bright);font-weight:700;animation:fn-live-pulse 1.4s ease-in-out infinite;}
@keyframes fn-live-pulse{0%,100%{opacity:1;}50%{opacity:0.45;}}
@media(max-width:520px){
    body.page-index .funnight .fn-when{text-align:left;width:100%;}
}

/* ============================================================
   PAGE: tournaments  (body.page-tournaments)
   ============================================================ */

body.page-tournaments .page-head{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);}
body.page-tournaments .page-head .sub{font-family:var(--mono);font-size:12px;color:var(--muted);}
body.page-tournaments .tourn{display:flex;flex-direction:column;overflow:hidden;background:var(--bg);border:1px solid var(--line);}
body.page-tournaments .tourn-head{display:flex;gap:var(--sp-5);padding:var(--sp-5) var(--sp-6);align-items:center;}
body.page-tournaments .tourn .badge{
    flex-shrink:0;width:56px;height:56px;border:1px solid var(--line-strong);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-weight:700;font-size:20px;color:var(--muted);
}
body.page-tournaments .tourn .h-body{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;}
body.page-tournaments .tourn .status{font-family:var(--mono);display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
body.page-tournaments .tourn .status .dot{width:7px;height:7px;background:var(--faint);}
body.page-tournaments .tourn .nm{font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;line-height:1;}
body.page-tournaments .tourn .desc{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:0.03em;}
body.page-tournaments .tourn .h-right{flex-shrink:0;display:flex;gap:var(--sp-5);}
body.page-tournaments .tourn .h-right .stat{text-align:right;display:flex;flex-direction:column;gap:5px;}
body.page-tournaments .tourn .h-right .lbl{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);}
body.page-tournaments .tourn .h-right .val{font-family:var(--mono);font-size:14px;font-weight:700;}
/* Solid-neutral chip treatment (no added color, real border weight) so
   these read as buttons instead of blending into the card as a plain
   list — same skin as .block-links .cell on index.html. */
body.page-tournaments .tourn-links{display:grid;grid-template-columns:1fr;gap:8px;padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line);}
body.page-tournaments .tourn-links a{padding:var(--sp-4) var(--sp-5);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);background:var(--surface);border:1px solid var(--line-strong);transition:background .14s,border-color .14s;min-height:56px;}
body.page-tournaments .tourn-links a:hover{background:var(--line-strong);border-color:var(--tm-red);}
body.page-tournaments .tourn-links .name{font-weight:700;font-size:13px;text-transform:uppercase;}
body.page-tournaments .tourn-links .val{font-size:10px;font-weight:600;color:var(--muted);}
body.page-tournaments .tourn-links .go{font-family:var(--mono);color:var(--faint);font-size:14px;transition:color .15s;}
body.page-tournaments .tourn-links a:hover .go{color:var(--tm-red);}
body.page-tournaments .tourn-links a .l{display:flex;flex-direction:column;gap:4px;min-width:0;}
@media(min-width:601px){
    body.page-tournaments .tourn-links{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:600px){
    body.page-tournaments .tourn-head{flex-wrap:wrap;}
    body.page-tournaments .tourn .h-right{width:100%;justify-content:space-between;border-top:1px solid var(--line);padding-top:var(--sp-4);}
    body.page-tournaments .tourn .h-right .stat{text-align:left;}
}
/* State is marked entirely through content — badge border/color, status
   text/dot color, the pulsing dot — never the card's own border. An
   earlier version colored/dashed/faded the left or whole border per
   state; that made the border itself uneven width-for-width between
   sides (a 3px accent vs the normal 1px hairline) or opacity between
   cards, which read as a bug ("different/missing right side outline")
   rather than a signal. Every .tourn card now keeps the exact same
   plain 1px solid var(--line) border, full stop — .soon's dashed
   pending pattern lives on .badge only, not the card. */
body.page-tournaments .tourn.live .badge{border-color:var(--tm-red);color:var(--tm-red-bright);}
body.page-tournaments .tourn.live .status{color:var(--tm-red-bright);}
body.page-tournaments .tourn.live .status .dot{background:var(--tm-red-bright);box-shadow:0 0 0 0 var(--tm-red-bright);animation:ping 1.6s infinite;}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(226,59,59,.5)}70%{box-shadow:0 0 0 8px rgba(226,59,59,0)}100%{box-shadow:0 0 0 0 rgba(226,59,59,0)}}
body.page-tournaments .tourn.past .tourn-head{opacity:0.85;}
body.page-tournaments .tourn.past .badge{color:var(--faint);}
body.page-tournaments .tourn.past .h-right .val{color:var(--gold);}
body.page-tournaments .tourn.past .status .dot{background:var(--faint);}
/* "Coming soon" reuses the same dashed pending pattern as a secret
   time — one visual language for "not real yet," not two. */
body.page-tournaments .tourn.soon .badge{color:var(--faint);border-style:dashed;}
body.page-tournaments .tourn.soon .nm{color:var(--muted);}
body.page-tournaments .tourn.soon .status .dot{background:var(--tm-red);}
body.page-tournaments .tourn.soon .tourn-head{opacity:0.9;}

/* ============================================================
   PAGE: tournament-info  (body.page-tournament-info)
   ============================================================ */

body.page-tournament-info .page-head{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);}
body.page-tournament-info .page-head .sub{font-family:var(--mono);font-size:12px;color:var(--muted);}
/* The one deliberate "needs a visible edge" panel on this page — a
   plain surface fill + accent left-border, not a glow. */
body.page-tournament-info .prize{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5) var(--sp-6);flex-wrap:wrap;
    background:var(--surface);border:1px solid var(--line-strong);border-left:3px solid var(--tm-red);}
body.page-tournament-info .prize .p-icon{width:44px;height:44px;flex-shrink:0;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px;color:var(--gold);}
body.page-tournament-info .prize .p-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
body.page-tournament-info .prize .p-body .t{font-weight:700;font-size:15px;text-transform:uppercase;}
body.page-tournament-info .prize .p-body .s{font-size:12px;color:var(--muted);font-weight:500;}
body.page-tournament-info .prize .p-val{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--gold);text-align:right;}
@media(max-width:520px){
    body.page-tournament-info .prize .p-val{text-align:left;width:100%;}
}
body.page-tournament-info .block-title{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;line-height:1;}
body.page-tournament-info .block-body{padding:0 var(--sp-6) var(--sp-6);}
body.page-tournament-info .block-body p{font-size:14px;line-height:1.6;color:var(--muted);max-width:64ch;}
body.page-tournament-info .block-body p + p{margin-top:var(--sp-3);}
body.page-tournament-info .facts{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);}
body.page-tournament-info .fact{padding:var(--sp-4) var(--sp-5);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px;}
body.page-tournament-info .fact:last-child{border-right:0;}
body.page-tournament-info .fact .lbl{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);}
body.page-tournament-info .fact .val{font-family:var(--mono);font-size:14px;font-weight:700;}
@media(max-width:560px){
    body.page-tournament-info .facts{grid-template-columns:1fr;}
    body.page-tournament-info .fact{border-right:0;border-bottom:1px solid var(--line);}
    body.page-tournament-info .fact:last-child{border-bottom:0;}
}
body.page-tournament-info .backrow{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);}
body.page-tournament-info .backrow a{padding:var(--sp-5) var(--sp-6);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);border-bottom:1px solid var(--line);transition:background .15s;}
body.page-tournament-info .backrow a:last-child{border-bottom:0;}
body.page-tournament-info .backrow a:hover{background:var(--surface);}
body.page-tournament-info .backrow .name{font-weight:700;font-size:15px;text-transform:uppercase;}
body.page-tournament-info .backrow .go{font-family:var(--mono);color:var(--faint);transition:color .15s;}
body.page-tournament-info .backrow a:hover .go{color:var(--tm-red-bright);}
@media(min-width:601px){
    body.page-tournament-info .backrow{grid-template-columns:repeat(4,1fr);}
    body.page-tournament-info .backrow a{border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
    body.page-tournament-info .backrow a:nth-child(4n){border-right:0;}
    body.page-tournament-info .backrow a:last-child{grid-column:1 / -1;border-right:0;border-bottom:0;}
}

/* ============================================================
   PAGE: about  (body.page-about)
   ============================================================ */

/* No card fill here — the "no card is the default" rule (DESIGN.md
   §3) applies directly: heading, copy, hairline underneath. */
body.page-about .intro{padding:var(--sp-8) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4);border-bottom:1px solid var(--line);}
body.page-about .intro .eyebrow{font-family:var(--mono);display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);}
body.page-about .intro .eyebrow::before{content:'';width:16px;height:2px;background:var(--tm-red);}
body.page-about .intro h1{font-size:clamp(28px,5vw,40px);font-weight:800;text-transform:uppercase;letter-spacing:-0.02em;line-height:1;}
body.page-about .intro p{font-size:15px;line-height:1.6;color:var(--muted);max-width:60ch;}
body.page-about .intro p b{color:var(--text);font-weight:700;}
body.page-about .block-title{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;line-height:1;}
body.page-about .block-body{padding:0 var(--sp-6) var(--sp-6);}
body.page-about .block-body p{font-size:14px;line-height:1.6;color:var(--muted);max-width:60ch;}
body.page-about .credits{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);}
body.page-about .credit{padding:var(--sp-5) var(--sp-6);border-right:1px solid var(--line);display:flex;align-items:center;gap:var(--sp-3);}
body.page-about .credit:last-child{border-right:0;}
/* One deliberate border-radius exception, sitewide — see DESIGN.md §1. */
body.page-about .credit .avatar{width:48px;height:48px;flex-shrink:0;border-radius:50%;object-fit:cover;border:1px solid var(--line-strong);background:var(--surface);}
body.page-about .credit .c-text{display:flex;flex-direction:column;gap:5px;min-width:0;}
body.page-about .credit .role{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);}
body.page-about .credit .who{font-weight:700;font-size:15px;text-transform:uppercase;}
@media(max-width:520px){
    body.page-about .credits{grid-template-columns:1fr;}
    body.page-about .credit{border-right:0;border-bottom:1px solid var(--line);}
    body.page-about .credit:last-child{border-bottom:0;}
}

/* ============================================================
   PAGE: totd  (body.page-totd)
   ============================================================ */

body.page-totd .totd-hero{border:1px solid var(--line);padding:var(--sp-8) var(--sp-6);}
body.page-totd .totd-hero.photo{background-size:cover;background-position:center;background-repeat:no-repeat;}
body.page-totd .totd-hero .content{display:flex;flex-direction:column;gap:var(--sp-3);}
body.page-totd .totd-hero .datechip{font-family:var(--mono);display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);}
body.page-totd .totd-hero .datechip::before{content:'';width:16px;height:2px;background:var(--tm-red);}
body.page-totd .totd-hero h1{font-size:clamp(24px,4.5vw,36px);font-weight:800;text-transform:uppercase;letter-spacing:-0.02em;line-height:0.98;max-width:20ch;}
body.page-totd .totd-hero .by{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:0.04em;}
body.page-totd .totd-hero .author-medal{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-2);font-family:var(--mono);font-size:12px;color:var(--gold);}
body.page-totd .totd-hero .author-medal .diamond{width:9px;height:9px;background:var(--gold);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}

/* ============================================================
   PAGE: shorts  (body.page-shorts)
   ============================================================ */

body.page-shorts .page-head{padding:var(--sp-6);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;}
body.page-shorts .page-head .l{display:flex;flex-direction:column;gap:var(--sp-3);}
body.page-shorts .page-head .meta{font-family:var(--mono);font-size:12px;color:var(--muted);}
body.page-shorts .page-head .week{text-align:right;display:flex;flex-direction:column;gap:5px;}
body.page-shorts .page-head .week .lbl{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);}
body.page-shorts .page-head .week .val{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text);}
@media(max-width:520px){
    body.page-shorts .page-head .week{text-align:left;}
}
body.page-shorts .maplist{display:flex;flex-direction:column;}

/* ============================================================
   PAGE: seasonal  (body.page-seasonal)
   Tier is marked by a small dot + colored number/border, never a
   filled cell background — keeps "color marks state" to one rule
   sitewide instead of a second, grid-only exception.
   ============================================================ */

body.page-seasonal .page-head{padding:var(--sp-6);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;}
body.page-seasonal .page-head .l{display:flex;flex-direction:column;gap:var(--sp-3);}
body.page-seasonal .page-head .meta{font-family:var(--mono);font-size:12px;color:var(--muted);}
body.page-seasonal .page-head .season{text-align:right;display:flex;flex-direction:column;gap:5px;}
body.page-seasonal .page-head .season .lbl{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);}
body.page-seasonal .page-head .season .val{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text);}
@media(max-width:520px){
    body.page-seasonal .page-head .season{text-align:left;}
}
body.page-seasonal .band{--sw:var(--tier);}
body.page-seasonal .band-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--line);}
body.page-seasonal .band-head .sw{width:12px;height:12px;background:var(--sw);flex-shrink:0;}
body.page-seasonal .band-head .tier{font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:-0.005em;}
body.page-seasonal .band-head .rng{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:0.04em;}
body.page-seasonal .band-head .diff{font-family:var(--mono);margin-left:auto;font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--tier);border:1px solid currentColor;padding:4px 9px;}
body.page-seasonal .band-grid{display:grid;grid-template-columns:repeat(5,1fr);}
body.page-seasonal .mcell{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4) var(--sp-4) var(--sp-5);
    border-right:1px solid var(--line);border-left:3px solid transparent;
    transition:background .14s,border-color .14s;min-height:100px;}
body.page-seasonal .band-grid .mcell:nth-child(5n){border-right:0;}
body.page-seasonal .mcell:hover{background:var(--surface);border-left-color:var(--tier);}
body.page-seasonal .mcell .n{font-family:var(--mono);font-weight:700;font-size:20px;line-height:1;letter-spacing:-0.02em;color:var(--tier);}
body.page-seasonal .mcell .holder{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:-0.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.page-seasonal .mcell .tm{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:auto;}
body.page-seasonal .mcell.empty .holder{color:var(--faint);font-weight:600;}
body.page-seasonal .mcell.empty .tm{color:var(--faint);}
/* Map photo fills the whole cell (no solid-ground escape like .maprow.photo
   has), so text is fixed to light regardless of theme — same reasoning as
   the homepage carousel's photo slides. Placed after .empty above so it
   wins the tie on cells that are both .empty and .photo. */
body.page-seasonal .mcell.photo{background-size:cover;background-position:center;background-repeat:no-repeat;}
body.page-seasonal .mcell.photo:hover{background-color:transparent;}
body.page-seasonal .mcell.photo .holder,body.page-seasonal .mcell.photo .tm{color:#fff;}
@media(max-width:680px){
    body.page-seasonal .band-grid{grid-template-columns:repeat(3,1fr);}
    body.page-seasonal .band-grid .mcell{border-bottom:1px solid var(--line);}
    body.page-seasonal .band-grid .mcell:nth-child(5n){border-right:1px solid var(--line);}
    body.page-seasonal .band-grid .mcell:nth-child(3n){border-right:0;}
    body.page-seasonal .band-grid .mcell:nth-last-child(-n+2){border-bottom:0;}
}
@media(max-width:440px){
    body.page-seasonal .band-grid{grid-template-columns:repeat(2,1fr);}
    body.page-seasonal .band-grid .mcell:nth-child(3n){border-right:1px solid var(--line);}
    body.page-seasonal .band-grid .mcell:nth-child(2n){border-right:0;}
    body.page-seasonal .band-grid .mcell:nth-last-child(-n+2){border-bottom:1px solid var(--line);}
    body.page-seasonal .band-grid .mcell:nth-last-child(-n+1){border-bottom:0;}
}

/* ============================================================
   PAGE: map-leaderboard  (body.page-map-leaderboard)
   ============================================================ */

body.page-map-leaderboard .map-hero{border:1px solid var(--line);padding:var(--sp-8) var(--sp-6);}
body.page-map-leaderboard .map-hero.photo{background-size:cover;background-position:center;background-repeat:no-repeat;}
body.page-map-leaderboard .map-hero .content{display:flex;flex-direction:column;gap:var(--sp-3);}
body.page-map-leaderboard .map-hero .eyebrow{font-family:var(--mono);display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);}
body.page-map-leaderboard .map-hero .eyebrow::before{content:'';width:16px;height:2px;background:var(--tm-red);}
body.page-map-leaderboard .map-hero h1{font-size:clamp(24px,4.5vw,36px);font-weight:800;text-transform:uppercase;letter-spacing:-0.02em;line-height:0.98;max-width:20ch;}
body.page-map-leaderboard .map-hero .by{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:0.04em;}
body.page-map-leaderboard .map-hero .author-medal{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-2);font-family:var(--mono);font-size:12px;color:var(--gold);}
body.page-map-leaderboard .map-hero .author-medal .diamond{width:9px;height:9px;background:var(--gold);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
body.page-map-leaderboard .lb-empty{padding:var(--sp-8) var(--sp-6);display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center;}
body.page-map-leaderboard .lb-empty .mark{width:40px;height:40px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:20px;color:var(--faint);}
body.page-map-leaderboard .lb-empty .t{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:0.02em;}
body.page-map-leaderboard .lb-empty .s{font-size:12px;color:var(--muted);max-width:34ch;line-height:1.5;}

/* ============================================================
   PAGE: records  (body.page-records)
   ============================================================ */

body.page-records .page-head{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);}
body.page-records .page-head .sub{font-family:var(--mono);font-size:12px;color:var(--muted);}
/* Records drops .maprow's .num column sitewide — a hub row identifies
   itself by name (Weekly Short 01, Summer 2026, …), so an index number
   adds nothing, and it's what forced TOTD's single entry into a fake
   "TD" position badge before. See the comment in records.html.
   Also drops .leader entirely (not just at mobile width, unlike
   Shorts' own page) — this hub links out to each board rather than
   showing who's leading, so the API doesn't need to resolve a
   current-leader name for every row on every page that links to one.
   Same column count at every width, so no separate mobile override. */
body.page-records .maprow{grid-template-columns:1fr auto;}