/* GoFree stats. One stylesheet, no build step.
   Structure and palette follow go-free.info (black under a blurred cover photo,
   #222 panels, white text, deepskyblue links); the primary accent is the
   logo's own indigo -> purple -> magenta. Record/PB/slower colours are the ones
   chat uses, so a player recognises them. */

:root {
  --bg: #000;
  --panel: #222;
  --panel-2: #2a2a2a;
  --panel-3: #323232;
  --line: #333;
  --line-2: #3d3d3d;
  --text: #f0f0f0;
  --text-2: #ccc;
  --text-3: #999;
  --text-4: #666;

  --brand: #9b3480;
  --brand-deep: #5a2168;
  --brand-ink: #26244a;
  --brand-soft: rgba(155, 52, 128, .18);
  --brand-gradient: linear-gradient(135deg, #26244a, #5a2168 55%, #9b3480);
  --hairline: linear-gradient(to right, rgba(155,52,128,0) 5%, #9b3480 50%, rgba(155,52,128,0) 95%);

  --link: #00bfff;
  --wr: #f5c542;
  --pb: #90ee90;
  --slower: #ff4040;

  --font: 'Source Sans Pro', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 16px/1.45 var(--font);
  background: var(--bg);
}

/* The main site's cover treatment: a fixed photo, heavily blurred, then an
   indigo wash so the magenta accent sits on a cool ground. */
.cover {
  position: fixed; inset: 0; z-index: 0;
  background: url('/static/gfbg.jpg') center / cover no-repeat;
  filter: blur(60px) brightness(.9);
  transform: scale(1.1);
}
.cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38,36,74,.55), rgba(0,0,0,.75));
}
.page { position: relative; z-index: 1; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Header ---- */
header.site {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .6rem 1.5rem;
  background: rgba(17,17,17,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
header.site .brand { display: flex; align-items: center; }
header.site .brand img { height: 40px; width: auto; display: block; }
header.site nav { display: flex; gap: .25rem; }
header.site nav a {
  color: var(--text-2); padding: .45rem .8rem; border-radius: 6px;
  font-weight: 600; letter-spacing: .01em;
}
header.site nav a:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
header.site nav a.active { color: #fff; background: var(--brand-soft); box-shadow: inset 0 -2px 0 var(--brand); }
header.site .site-search { margin-left: auto; min-width: 0; }
header.site .account { display: inline-flex; align-items: center; gap: .75rem; flex: none; }
header.site .account .signout, header.site .account .activity { color: var(--text-3); font-size: .85rem; }
header.site .btn.steam { display: inline-flex; align-items: center; gap: .5rem; background: #171a21; border-color: #2a475e; color: #c7d5e0; font-weight: 600; white-space: nowrap; flex: none; }
header.site .btn.steam:hover { border-color: #66c0f4; color: #fff; }
.steam-logo { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 60% 40%, #fff 0 18%, #1b2838 19% 100%); flex: none; }
header.site .social { display: inline-flex; align-items: center; gap: .35rem; flex: none; }
header.site .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px; color: var(--text-2);
}
header.site .icon-btn:hover { color: #fff; background: var(--panel-2); text-decoration: none; }
header.site .icon-btn.discord:hover { color: #5865f2; }
header.site .icon-btn.youtube:hover { color: #ff0000; }
/* The search box is the one thing allowed to shrink below its own natural
   width - a fixed 15rem plus nav plus the sign-in button don't all fit
   between the mobile and desktop breakpoints (~800px), and without this the
   sign-in button was the one being squeezed, wrapping its own text. */
header.site .site-search input { width: 15rem; max-width: 40vw; min-width: 4rem; }

main { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }

h1 { margin: 0 0 .5rem; font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; }
h2 { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
h2 a.player .name { text-transform: none; letter-spacing: 0; font-size: 1.1rem; }
h2 .count { color: var(--text-4); font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: .35rem; }

section { margin-top: 1.75rem; }
hr.brand { border: 0; height: 1px; background: var(--hairline); margin: 1.5rem 0; }

.muted { color: var(--text-3); }
.mono { font-family: var(--mono); font-size: .9rem; }
.empty { color: var(--text-4); font-style: italic; }

.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1, .page-head p { margin: 0; }

/* ---- Panels ---- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.panel > h2 { margin: 0; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.panel > .body { padding: 1rem; }
/* A card grid in a panel that a .grid-2 row has stretched taller than its own
   content: the cards can't absorb the slack themselves (.card .shot is locked
   to 16/9, so a taller card just pools empty space under its own text), so the
   body takes it and centres the grid in it. Whatever is left over then reads
   as padding above and below rather than a hole between the last row and the
   footer. */
.panel > .body.fill { flex: 1; }
.panel > .body.fill > .cards { height: 100%; align-content: center; }
/* Pins the footer to the bottom when a grid row stretches this panel taller
   than its own content (two side-by-side panels of different shapes, e.g.
   a text feed next to a card grid) - everything above just stacks as usual. */
.panel > .tab-foot { margin-top: auto; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel table { border: 0; border-radius: 0; }
th, td { padding: .42rem .75rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
th { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); background: var(--panel-2); }
th a { color: inherit; }
th a:hover { color: var(--text); text-decoration: none; }
th.sorted a { color: #d66bb8; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-2); }
th.r { text-align: right; }
th.c { text-align: center; }
table.compact th, table.compact td { padding: .55rem .65rem; }

td.rank { color: var(--text-4); width: 3rem; text-align: right; font-variant-numeric: tabular-nums; }
td.num, td.time, td.speed { font-family: var(--mono); font-size: .92rem; text-align: right; font-variant-numeric: tabular-nums; }
td.num .of { color: var(--text-4); }
td.date { color: var(--text-3); font-size: .9rem; }
td.actions { text-align: right; font-size: .85rem; white-space: nowrap; }
td.actions a { color: var(--text-3); }
td.actions a:hover { color: var(--link); }
td.actions a + a { margin-left: .6rem; }

/* Fixed-size symbol buttons (replayButton/compareButton, cell.ts) - same
   footprint regardless of label, so an action cell never changes a row's
   height or wraps onto a second line. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 5px; vertical-align: middle;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text-2);
  font-size: .85rem; line-height: 1; text-decoration: none;
}
.icon-btn:hover { border-color: var(--brand); color: var(--text); text-decoration: none; }
.icon-btn.replay { color: var(--wr); border-color: rgba(245, 197, 66, .35); }
.icon-btn.replay:hover { border-color: var(--wr); }
td.actions .icon-btn + .icon-btn { margin-left: .35rem; }

/* Time and speed: the value, then a muted inline diff - the !wr menu layout. */
.t { color: var(--text); }
.d { color: var(--text-4); font-size: .85em; }
.d.faster { color: var(--pb); }
.d.slower { color: var(--slower); }
.unit { color: var(--text-4); font-size: .8em; }
tr.wr-row td { background: rgba(245,197,66,.06); }
tr.wr-row td.time .t { color: var(--wr); }

.chip {
  display: inline-block; font-family: var(--font); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; line-height: 1;
  padding: .25em .5em; border-radius: 4px; vertical-align: middle;
}
.chip.wr { background: var(--wr); color: #111; }
.chip.skill { color: var(--c, var(--text-2)); border: 1px solid var(--c, var(--line-2)); background: rgba(0,0,0,.25); }
.tag { display: inline-block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 3px; padding: 0 .35rem; vertical-align: middle; }

.tier {
  display: inline-block; min-width: 2.2em; text-align: center;
  font-family: var(--mono); font-size: .78rem; font-weight: 700; line-height: 1;
  padding: .3em .35em; border-radius: 4px; border: 1px solid transparent;
}
.tier.none { color: var(--text-4); background: transparent; }
td.tier-cell { text-align: center; }
tr.unranked td:first-child a { color: var(--text-3); }

/* ---- Players: avatar + flag + name ---- */
a.player { display: inline-flex; align-items: center; gap: .5rem; color: var(--link); }
a.player .name { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; background: var(--panel-3); }
.avatar.lg { width: 96px; height: 96px; border-radius: 12px; }
.avatar.ph { display: inline-block; background: var(--brand-gradient); opacity: .3; }
td.player-cell { min-width: 12rem; }

/* ---- Inputs ---- */
input[type="search"], input[type="text"], select, button, .btn {
  font: inherit; color: var(--text); background: #171717;
  border: 1px solid var(--line-2); border-radius: 6px; padding: .4rem .7rem;
}
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
button, .btn { background: var(--panel-2); cursor: pointer; display: inline-block; text-decoration: none; }
button:hover, .btn:hover { border-color: var(--brand); text-decoration: none; }
button.primary, .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.filters .clear { color: var(--text-3); margin-left: .25rem; }
.filters .spacer { flex: 1; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; max-width: 100%; }
.seg a { padding: .4rem .7rem; color: var(--text-2); }
.seg a:hover { text-decoration: none; background: var(--panel-2); }
.seg a.active { background: var(--brand); color: #fff; }
.tier-filter { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.tier-filter a { text-decoration: none; opacity: .55; }
.tier-filter a.active, .tier-filter a:hover { opacity: 1; }

.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.pager.compact { justify-content: flex-start; gap: .35rem; margin-top: 0; }
.pager.compact a, .pager.compact .off {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem;
  padding: 0 .4rem; border: 1px solid var(--line-2); border-radius: 5px; color: var(--text-2);
}
.pager.compact a:hover { border-color: var(--brand); color: var(--text); text-decoration: none; }
.pager.compact .off { opacity: .35; }
.pager.compact .n { font-family: var(--mono); color: var(--text-3); padding: 0 .3rem; }

/* ---- Map hero ---- */
.hero {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 260px; background: var(--brand-gradient);
  border: 1px solid var(--line);
}
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.85)); }
.hero .hero-body { position: relative; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; }
.hero.noimg, .hero.noimg .hero-body { min-height: 150px; }
.hero h1 { display: flex; align-items: center; gap: .6rem; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.hero .facts { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .4rem; color: var(--text-2); }
.hero .facts b { color: var(--text); }

/* ---- Stat tiles ---- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; margin: 1rem 0; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; border-top: 2px solid var(--brand-deep); }
.stat-value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.stat-sub { text-transform: none; letter-spacing: 0; color: var(--text-4); }

/* ---- Player header ---- */
.player-head { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.player-head .who h1 { display: flex; align-items: center; gap: .6rem; margin: 0; }
.player-head .who .sub { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; color: var(--text-3); margin-top: .25rem; }
.rankline { font-size: 1.05rem; }
.rankline b { font-size: 1.3rem; }

/* Per-tier completion bars */
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem .9rem; }
.tierrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; font-size: .9rem; }
.tierrow .bar { height: 8px; background: var(--panel-3); border-radius: 4px; overflow: hidden; }
.tierrow .bar i { display: block; height: 100%; background: var(--brand-gradient); }
.tierrow .n { color: var(--text-3); font-family: var(--mono); font-size: .82rem; white-space: nowrap; }
.tierrow .tiersub { grid-column: 2 / -1; display: flex; gap: .75rem; font-family: var(--mono); font-size: .78rem; color: var(--text-4); }
.rankbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; font-size: .9rem; margin: .5rem 0 1rem; max-width: 420px; }
.rankbar .bar { height: 8px; background: var(--panel-3); border-radius: 4px; overflow: hidden; }
.rankbar .bar i { display: block; height: 100%; background: var(--brand-gradient); }
.rankbar .n { color: var(--text-3); font-family: var(--mono); font-size: .82rem; white-space: nowrap; }

/* CSS-only tabs: radio inputs, labels as tabs, panels shown by :checked. */
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tabs > .tablist { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tabs > .tablist label { padding: .45rem .7rem; cursor: pointer; color: var(--text-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs > .tablist label:hover { color: var(--text); }
.tabs > section.tabpanel { display: none; margin-top: 0; }
.tabs > input:nth-of-type(1):checked ~ .tablist label:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ .tablist label:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ .tablist label:nth-of-type(3),
.tabs > input:nth-of-type(4):checked ~ .tablist label:nth-of-type(4),
.tabs > input:nth-of-type(5):checked ~ .tablist label:nth-of-type(5),
.tabs > input:nth-of-type(6):checked ~ .tablist label:nth-of-type(6),
.tabs > input:nth-of-type(7):checked ~ .tablist label:nth-of-type(7),
.tabs > input:nth-of-type(8):checked ~ .tablist label:nth-of-type(8),
.tabs > input:nth-of-type(9):checked ~ .tablist label:nth-of-type(9),
.tabs > input:nth-of-type(10):checked ~ .tablist label:nth-of-type(10),
.tabs > input:nth-of-type(11):checked ~ .tablist label:nth-of-type(11),
.tabs > input:nth-of-type(12):checked ~ .tablist label:nth-of-type(12),
.tabs > input:nth-of-type(13):checked ~ .tablist label:nth-of-type(13),
.tabs > input:nth-of-type(14):checked ~ .tablist label:nth-of-type(14),
.tabs > input:nth-of-type(15):checked ~ .tablist label:nth-of-type(15),
.tabs > input:nth-of-type(16):checked ~ .tablist label:nth-of-type(16),
.tabs > input:nth-of-type(17):checked ~ .tablist label:nth-of-type(17),
.tabs > input:nth-of-type(18):checked ~ .tablist label:nth-of-type(18),
.tabs > input:nth-of-type(19):checked ~ .tablist label:nth-of-type(19),
.tabs > input:nth-of-type(20):checked ~ .tablist label:nth-of-type(20),
.tabs > input:nth-of-type(21):checked ~ .tablist label:nth-of-type(21),
.tabs > input:nth-of-type(22):checked ~ .tablist label:nth-of-type(22),
.tabs > input:nth-of-type(23):checked ~ .tablist label:nth-of-type(23),
.tabs > input:nth-of-type(24):checked ~ .tablist label:nth-of-type(24),
.tabs > input:nth-of-type(25):checked ~ .tablist label:nth-of-type(25),
.tabs > input:nth-of-type(26):checked ~ .tablist label:nth-of-type(26),
.tabs > input:nth-of-type(27):checked ~ .tablist label:nth-of-type(27),
.tabs > input:nth-of-type(28):checked ~ .tablist label:nth-of-type(28),
.tabs > input:nth-of-type(29):checked ~ .tablist label:nth-of-type(29),
.tabs > input:nth-of-type(30):checked ~ .tablist label:nth-of-type(30),
.tabs > input:nth-of-type(31):checked ~ .tablist label:nth-of-type(31),
.tabs > input:nth-of-type(32):checked ~ .tablist label:nth-of-type(32),
.tabs > input:nth-of-type(33):checked ~ .tablist label:nth-of-type(33),
.tabs > input:nth-of-type(34):checked ~ .tablist label:nth-of-type(34),
.tabs > input:nth-of-type(35):checked ~ .tablist label:nth-of-type(35),
.tabs > input:nth-of-type(36):checked ~ .tablist label:nth-of-type(36),
.tabs > input:nth-of-type(37):checked ~ .tablist label:nth-of-type(37),
.tabs > input:nth-of-type(38):checked ~ .tablist label:nth-of-type(38),
.tabs > input:nth-of-type(39):checked ~ .tablist label:nth-of-type(39),
.tabs > input:nth-of-type(40):checked ~ .tablist label:nth-of-type(40),
.tabs > input:nth-of-type(41):checked ~ .tablist label:nth-of-type(41),
.tabs > input:nth-of-type(42):checked ~ .tablist label:nth-of-type(42),
.tabs > input:nth-of-type(43):checked ~ .tablist label:nth-of-type(43),
.tabs > input:nth-of-type(44):checked ~ .tablist label:nth-of-type(44),
.tabs > input:nth-of-type(45):checked ~ .tablist label:nth-of-type(45),
.tabs > input:nth-of-type(46):checked ~ .tablist label:nth-of-type(46),
.tabs > input:nth-of-type(47):checked ~ .tablist label:nth-of-type(47),
.tabs > input:nth-of-type(48):checked ~ .tablist label:nth-of-type(48),
.tabs > input:nth-of-type(49):checked ~ .tablist label:nth-of-type(49),
.tabs > input:nth-of-type(50):checked ~ .tablist label:nth-of-type(50),
.tabs > input:nth-of-type(51):checked ~ .tablist label:nth-of-type(51),
.tabs > input:nth-of-type(52):checked ~ .tablist label:nth-of-type(52),
.tabs > input:nth-of-type(53):checked ~ .tablist label:nth-of-type(53),
.tabs > input:nth-of-type(54):checked ~ .tablist label:nth-of-type(54),
.tabs > input:nth-of-type(55):checked ~ .tablist label:nth-of-type(55),
.tabs > input:nth-of-type(56):checked ~ .tablist label:nth-of-type(56),
.tabs > input:nth-of-type(57):checked ~ .tablist label:nth-of-type(57),
.tabs > input:nth-of-type(58):checked ~ .tablist label:nth-of-type(58),
.tabs > input:nth-of-type(59):checked ~ .tablist label:nth-of-type(59),
.tabs > input:nth-of-type(60):checked ~ .tablist label:nth-of-type(60),
.tabs > input:nth-of-type(61):checked ~ .tablist label:nth-of-type(61),
.tabs > input:nth-of-type(62):checked ~ .tablist label:nth-of-type(62),
.tabs > input:nth-of-type(63):checked ~ .tablist label:nth-of-type(63),
.tabs > input:nth-of-type(64):checked ~ .tablist label:nth-of-type(64),
.tabs > input:nth-of-type(65):checked ~ .tablist label:nth-of-type(65),
.tabs > input:nth-of-type(66):checked ~ .tablist label:nth-of-type(66),
.tabs > input:nth-of-type(67):checked ~ .tablist label:nth-of-type(67),
.tabs > input:nth-of-type(68):checked ~ .tablist label:nth-of-type(68),
.tabs > input:nth-of-type(69):checked ~ .tablist label:nth-of-type(69),
.tabs > input:nth-of-type(70):checked ~ .tablist label:nth-of-type(70),
.tabs > input:nth-of-type(71):checked ~ .tablist label:nth-of-type(71),
.tabs > input:nth-of-type(72):checked ~ .tablist label:nth-of-type(72),
.tabs > input:nth-of-type(73):checked ~ .tablist label:nth-of-type(73),
.tabs > input:nth-of-type(74):checked ~ .tablist label:nth-of-type(74),
.tabs > input:nth-of-type(75):checked ~ .tablist label:nth-of-type(75),
.tabs > input:nth-of-type(76):checked ~ .tablist label:nth-of-type(76),
.tabs > input:nth-of-type(77):checked ~ .tablist label:nth-of-type(77),
.tabs > input:nth-of-type(78):checked ~ .tablist label:nth-of-type(78),
.tabs > input:nth-of-type(79):checked ~ .tablist label:nth-of-type(79),
.tabs > input:nth-of-type(80):checked ~ .tablist label:nth-of-type(80),
.tabs > input:nth-of-type(81):checked ~ .tablist label:nth-of-type(81),
.tabs > input:nth-of-type(82):checked ~ .tablist label:nth-of-type(82),
.tabs > input:nth-of-type(83):checked ~ .tablist label:nth-of-type(83),
.tabs > input:nth-of-type(84):checked ~ .tablist label:nth-of-type(84),
.tabs > input:nth-of-type(85):checked ~ .tablist label:nth-of-type(85),
.tabs > input:nth-of-type(86):checked ~ .tablist label:nth-of-type(86),
.tabs > input:nth-of-type(87):checked ~ .tablist label:nth-of-type(87),
.tabs > input:nth-of-type(88):checked ~ .tablist label:nth-of-type(88),
.tabs > input:nth-of-type(89):checked ~ .tablist label:nth-of-type(89),
.tabs > input:nth-of-type(90):checked ~ .tablist label:nth-of-type(90),
.tabs > input:nth-of-type(91):checked ~ .tablist label:nth-of-type(91),
.tabs > input:nth-of-type(92):checked ~ .tablist label:nth-of-type(92),
.tabs > input:nth-of-type(93):checked ~ .tablist label:nth-of-type(93),
.tabs > input:nth-of-type(94):checked ~ .tablist label:nth-of-type(94),
.tabs > input:nth-of-type(95):checked ~ .tablist label:nth-of-type(95),
.tabs > input:nth-of-type(96):checked ~ .tablist label:nth-of-type(96),
.tabs > input:nth-of-type(97):checked ~ .tablist label:nth-of-type(97),
.tabs > input:nth-of-type(98):checked ~ .tablist label:nth-of-type(98),
.tabs > input:nth-of-type(99):checked ~ .tablist label:nth-of-type(99),
.tabs > input:nth-of-type(100):checked ~ .tablist label:nth-of-type(100),
.tabs > input:nth-of-type(101):checked ~ .tablist label:nth-of-type(101),
.tabs > input:nth-of-type(102):checked ~ .tablist label:nth-of-type(102),
.tabs > input:nth-of-type(103):checked ~ .tablist label:nth-of-type(103),
.tabs > input:nth-of-type(104):checked ~ .tablist label:nth-of-type(104),
.tabs > input:nth-of-type(105):checked ~ .tablist label:nth-of-type(105),
.tabs > input:nth-of-type(106):checked ~ .tablist label:nth-of-type(106),
.tabs > input:nth-of-type(107):checked ~ .tablist label:nth-of-type(107),
.tabs > input:nth-of-type(108):checked ~ .tablist label:nth-of-type(108),
.tabs > input:nth-of-type(109):checked ~ .tablist label:nth-of-type(109),
.tabs > input:nth-of-type(110):checked ~ .tablist label:nth-of-type(110),
.tabs > input:nth-of-type(111):checked ~ .tablist label:nth-of-type(111),
.tabs > input:nth-of-type(112):checked ~ .tablist label:nth-of-type(112),
.tabs > input:nth-of-type(113):checked ~ .tablist label:nth-of-type(113),
.tabs > input:nth-of-type(114):checked ~ .tablist label:nth-of-type(114),
.tabs > input:nth-of-type(115):checked ~ .tablist label:nth-of-type(115),
.tabs > input:nth-of-type(116):checked ~ .tablist label:nth-of-type(116),
.tabs > input:nth-of-type(117):checked ~ .tablist label:nth-of-type(117),
.tabs > input:nth-of-type(118):checked ~ .tablist label:nth-of-type(118),
.tabs > input:nth-of-type(119):checked ~ .tablist label:nth-of-type(119),
.tabs > input:nth-of-type(120):checked ~ .tablist label:nth-of-type(120),
.tabs > input:nth-of-type(121):checked ~ .tablist label:nth-of-type(121),
.tabs > input:nth-of-type(122):checked ~ .tablist label:nth-of-type(122),
.tabs > input:nth-of-type(123):checked ~ .tablist label:nth-of-type(123),
.tabs > input:nth-of-type(124):checked ~ .tablist label:nth-of-type(124),
.tabs > input:nth-of-type(125):checked ~ .tablist label:nth-of-type(125),
.tabs > input:nth-of-type(126):checked ~ .tablist label:nth-of-type(126),
.tabs > input:nth-of-type(127):checked ~ .tablist label:nth-of-type(127),
.tabs > input:nth-of-type(128):checked ~ .tablist label:nth-of-type(128),
.tabs > input:nth-of-type(129):checked ~ .tablist label:nth-of-type(129),
.tabs > input:nth-of-type(130):checked ~ .tablist label:nth-of-type(130),
.tabs > input:nth-of-type(131):checked ~ .tablist label:nth-of-type(131),
.tabs > input:nth-of-type(132):checked ~ .tablist label:nth-of-type(132),
.tabs > input:nth-of-type(133):checked ~ .tablist label:nth-of-type(133),
.tabs > input:nth-of-type(134):checked ~ .tablist label:nth-of-type(134),
.tabs > input:nth-of-type(135):checked ~ .tablist label:nth-of-type(135),
.tabs > input:nth-of-type(136):checked ~ .tablist label:nth-of-type(136),
.tabs > input:nth-of-type(137):checked ~ .tablist label:nth-of-type(137),
.tabs > input:nth-of-type(138):checked ~ .tablist label:nth-of-type(138),
.tabs > input:nth-of-type(139):checked ~ .tablist label:nth-of-type(139),
.tabs > input:nth-of-type(140):checked ~ .tablist label:nth-of-type(140),
.tabs > input:nth-of-type(141):checked ~ .tablist label:nth-of-type(141),
.tabs > input:nth-of-type(142):checked ~ .tablist label:nth-of-type(142),
.tabs > input:nth-of-type(143):checked ~ .tablist label:nth-of-type(143),
.tabs > input:nth-of-type(144):checked ~ .tablist label:nth-of-type(144),
.tabs > input:nth-of-type(145):checked ~ .tablist label:nth-of-type(145),
.tabs > input:nth-of-type(146):checked ~ .tablist label:nth-of-type(146),
.tabs > input:nth-of-type(147):checked ~ .tablist label:nth-of-type(147),
.tabs > input:nth-of-type(148):checked ~ .tablist label:nth-of-type(148),
.tabs > input:nth-of-type(149):checked ~ .tablist label:nth-of-type(149),
.tabs > input:nth-of-type(150):checked ~ .tablist label:nth-of-type(150),
.tabs > input:nth-of-type(151):checked ~ .tablist label:nth-of-type(151),
.tabs > input:nth-of-type(152):checked ~ .tablist label:nth-of-type(152),
.tabs > input:nth-of-type(153):checked ~ .tablist label:nth-of-type(153),
.tabs > input:nth-of-type(154):checked ~ .tablist label:nth-of-type(154),
.tabs > input:nth-of-type(155):checked ~ .tablist label:nth-of-type(155),
.tabs > input:nth-of-type(156):checked ~ .tablist label:nth-of-type(156),
.tabs > input:nth-of-type(157):checked ~ .tablist label:nth-of-type(157),
.tabs > input:nth-of-type(158):checked ~ .tablist label:nth-of-type(158),
.tabs > input:nth-of-type(159):checked ~ .tablist label:nth-of-type(159),
.tabs > input:nth-of-type(160):checked ~ .tablist label:nth-of-type(160) { color: #fff; border-bottom-color: var(--brand); }
.tabs > input:nth-of-type(1):checked ~ section:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ section:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ section:nth-of-type(3),
.tabs > input:nth-of-type(4):checked ~ section:nth-of-type(4),
.tabs > input:nth-of-type(5):checked ~ section:nth-of-type(5),
.tabs > input:nth-of-type(6):checked ~ section:nth-of-type(6),
.tabs > input:nth-of-type(7):checked ~ section:nth-of-type(7),
.tabs > input:nth-of-type(8):checked ~ section:nth-of-type(8),
.tabs > input:nth-of-type(9):checked ~ section:nth-of-type(9),
.tabs > input:nth-of-type(10):checked ~ section:nth-of-type(10),
.tabs > input:nth-of-type(11):checked ~ section:nth-of-type(11),
.tabs > input:nth-of-type(12):checked ~ section:nth-of-type(12),
.tabs > input:nth-of-type(13):checked ~ section:nth-of-type(13),
.tabs > input:nth-of-type(14):checked ~ section:nth-of-type(14),
.tabs > input:nth-of-type(15):checked ~ section:nth-of-type(15),
.tabs > input:nth-of-type(16):checked ~ section:nth-of-type(16),
.tabs > input:nth-of-type(17):checked ~ section:nth-of-type(17),
.tabs > input:nth-of-type(18):checked ~ section:nth-of-type(18),
.tabs > input:nth-of-type(19):checked ~ section:nth-of-type(19),
.tabs > input:nth-of-type(20):checked ~ section:nth-of-type(20),
.tabs > input:nth-of-type(21):checked ~ section:nth-of-type(21),
.tabs > input:nth-of-type(22):checked ~ section:nth-of-type(22),
.tabs > input:nth-of-type(23):checked ~ section:nth-of-type(23),
.tabs > input:nth-of-type(24):checked ~ section:nth-of-type(24),
.tabs > input:nth-of-type(25):checked ~ section:nth-of-type(25),
.tabs > input:nth-of-type(26):checked ~ section:nth-of-type(26),
.tabs > input:nth-of-type(27):checked ~ section:nth-of-type(27),
.tabs > input:nth-of-type(28):checked ~ section:nth-of-type(28),
.tabs > input:nth-of-type(29):checked ~ section:nth-of-type(29),
.tabs > input:nth-of-type(30):checked ~ section:nth-of-type(30),
.tabs > input:nth-of-type(31):checked ~ section:nth-of-type(31),
.tabs > input:nth-of-type(32):checked ~ section:nth-of-type(32),
.tabs > input:nth-of-type(33):checked ~ section:nth-of-type(33),
.tabs > input:nth-of-type(34):checked ~ section:nth-of-type(34),
.tabs > input:nth-of-type(35):checked ~ section:nth-of-type(35),
.tabs > input:nth-of-type(36):checked ~ section:nth-of-type(36),
.tabs > input:nth-of-type(37):checked ~ section:nth-of-type(37),
.tabs > input:nth-of-type(38):checked ~ section:nth-of-type(38),
.tabs > input:nth-of-type(39):checked ~ section:nth-of-type(39),
.tabs > input:nth-of-type(40):checked ~ section:nth-of-type(40),
.tabs > input:nth-of-type(41):checked ~ section:nth-of-type(41),
.tabs > input:nth-of-type(42):checked ~ section:nth-of-type(42),
.tabs > input:nth-of-type(43):checked ~ section:nth-of-type(43),
.tabs > input:nth-of-type(44):checked ~ section:nth-of-type(44),
.tabs > input:nth-of-type(45):checked ~ section:nth-of-type(45),
.tabs > input:nth-of-type(46):checked ~ section:nth-of-type(46),
.tabs > input:nth-of-type(47):checked ~ section:nth-of-type(47),
.tabs > input:nth-of-type(48):checked ~ section:nth-of-type(48),
.tabs > input:nth-of-type(49):checked ~ section:nth-of-type(49),
.tabs > input:nth-of-type(50):checked ~ section:nth-of-type(50),
.tabs > input:nth-of-type(51):checked ~ section:nth-of-type(51),
.tabs > input:nth-of-type(52):checked ~ section:nth-of-type(52),
.tabs > input:nth-of-type(53):checked ~ section:nth-of-type(53),
.tabs > input:nth-of-type(54):checked ~ section:nth-of-type(54),
.tabs > input:nth-of-type(55):checked ~ section:nth-of-type(55),
.tabs > input:nth-of-type(56):checked ~ section:nth-of-type(56),
.tabs > input:nth-of-type(57):checked ~ section:nth-of-type(57),
.tabs > input:nth-of-type(58):checked ~ section:nth-of-type(58),
.tabs > input:nth-of-type(59):checked ~ section:nth-of-type(59),
.tabs > input:nth-of-type(60):checked ~ section:nth-of-type(60),
.tabs > input:nth-of-type(61):checked ~ section:nth-of-type(61),
.tabs > input:nth-of-type(62):checked ~ section:nth-of-type(62),
.tabs > input:nth-of-type(63):checked ~ section:nth-of-type(63),
.tabs > input:nth-of-type(64):checked ~ section:nth-of-type(64),
.tabs > input:nth-of-type(65):checked ~ section:nth-of-type(65),
.tabs > input:nth-of-type(66):checked ~ section:nth-of-type(66),
.tabs > input:nth-of-type(67):checked ~ section:nth-of-type(67),
.tabs > input:nth-of-type(68):checked ~ section:nth-of-type(68),
.tabs > input:nth-of-type(69):checked ~ section:nth-of-type(69),
.tabs > input:nth-of-type(70):checked ~ section:nth-of-type(70),
.tabs > input:nth-of-type(71):checked ~ section:nth-of-type(71),
.tabs > input:nth-of-type(72):checked ~ section:nth-of-type(72),
.tabs > input:nth-of-type(73):checked ~ section:nth-of-type(73),
.tabs > input:nth-of-type(74):checked ~ section:nth-of-type(74),
.tabs > input:nth-of-type(75):checked ~ section:nth-of-type(75),
.tabs > input:nth-of-type(76):checked ~ section:nth-of-type(76),
.tabs > input:nth-of-type(77):checked ~ section:nth-of-type(77),
.tabs > input:nth-of-type(78):checked ~ section:nth-of-type(78),
.tabs > input:nth-of-type(79):checked ~ section:nth-of-type(79),
.tabs > input:nth-of-type(80):checked ~ section:nth-of-type(80),
.tabs > input:nth-of-type(81):checked ~ section:nth-of-type(81),
.tabs > input:nth-of-type(82):checked ~ section:nth-of-type(82),
.tabs > input:nth-of-type(83):checked ~ section:nth-of-type(83),
.tabs > input:nth-of-type(84):checked ~ section:nth-of-type(84),
.tabs > input:nth-of-type(85):checked ~ section:nth-of-type(85),
.tabs > input:nth-of-type(86):checked ~ section:nth-of-type(86),
.tabs > input:nth-of-type(87):checked ~ section:nth-of-type(87),
.tabs > input:nth-of-type(88):checked ~ section:nth-of-type(88),
.tabs > input:nth-of-type(89):checked ~ section:nth-of-type(89),
.tabs > input:nth-of-type(90):checked ~ section:nth-of-type(90),
.tabs > input:nth-of-type(91):checked ~ section:nth-of-type(91),
.tabs > input:nth-of-type(92):checked ~ section:nth-of-type(92),
.tabs > input:nth-of-type(93):checked ~ section:nth-of-type(93),
.tabs > input:nth-of-type(94):checked ~ section:nth-of-type(94),
.tabs > input:nth-of-type(95):checked ~ section:nth-of-type(95),
.tabs > input:nth-of-type(96):checked ~ section:nth-of-type(96),
.tabs > input:nth-of-type(97):checked ~ section:nth-of-type(97),
.tabs > input:nth-of-type(98):checked ~ section:nth-of-type(98),
.tabs > input:nth-of-type(99):checked ~ section:nth-of-type(99),
.tabs > input:nth-of-type(100):checked ~ section:nth-of-type(100),
.tabs > input:nth-of-type(101):checked ~ section:nth-of-type(101),
.tabs > input:nth-of-type(102):checked ~ section:nth-of-type(102),
.tabs > input:nth-of-type(103):checked ~ section:nth-of-type(103),
.tabs > input:nth-of-type(104):checked ~ section:nth-of-type(104),
.tabs > input:nth-of-type(105):checked ~ section:nth-of-type(105),
.tabs > input:nth-of-type(106):checked ~ section:nth-of-type(106),
.tabs > input:nth-of-type(107):checked ~ section:nth-of-type(107),
.tabs > input:nth-of-type(108):checked ~ section:nth-of-type(108),
.tabs > input:nth-of-type(109):checked ~ section:nth-of-type(109),
.tabs > input:nth-of-type(110):checked ~ section:nth-of-type(110),
.tabs > input:nth-of-type(111):checked ~ section:nth-of-type(111),
.tabs > input:nth-of-type(112):checked ~ section:nth-of-type(112),
.tabs > input:nth-of-type(113):checked ~ section:nth-of-type(113),
.tabs > input:nth-of-type(114):checked ~ section:nth-of-type(114),
.tabs > input:nth-of-type(115):checked ~ section:nth-of-type(115),
.tabs > input:nth-of-type(116):checked ~ section:nth-of-type(116),
.tabs > input:nth-of-type(117):checked ~ section:nth-of-type(117),
.tabs > input:nth-of-type(118):checked ~ section:nth-of-type(118),
.tabs > input:nth-of-type(119):checked ~ section:nth-of-type(119),
.tabs > input:nth-of-type(120):checked ~ section:nth-of-type(120),
.tabs > input:nth-of-type(121):checked ~ section:nth-of-type(121),
.tabs > input:nth-of-type(122):checked ~ section:nth-of-type(122),
.tabs > input:nth-of-type(123):checked ~ section:nth-of-type(123),
.tabs > input:nth-of-type(124):checked ~ section:nth-of-type(124),
.tabs > input:nth-of-type(125):checked ~ section:nth-of-type(125),
.tabs > input:nth-of-type(126):checked ~ section:nth-of-type(126),
.tabs > input:nth-of-type(127):checked ~ section:nth-of-type(127),
.tabs > input:nth-of-type(128):checked ~ section:nth-of-type(128),
.tabs > input:nth-of-type(129):checked ~ section:nth-of-type(129),
.tabs > input:nth-of-type(130):checked ~ section:nth-of-type(130),
.tabs > input:nth-of-type(131):checked ~ section:nth-of-type(131),
.tabs > input:nth-of-type(132):checked ~ section:nth-of-type(132),
.tabs > input:nth-of-type(133):checked ~ section:nth-of-type(133),
.tabs > input:nth-of-type(134):checked ~ section:nth-of-type(134),
.tabs > input:nth-of-type(135):checked ~ section:nth-of-type(135),
.tabs > input:nth-of-type(136):checked ~ section:nth-of-type(136),
.tabs > input:nth-of-type(137):checked ~ section:nth-of-type(137),
.tabs > input:nth-of-type(138):checked ~ section:nth-of-type(138),
.tabs > input:nth-of-type(139):checked ~ section:nth-of-type(139),
.tabs > input:nth-of-type(140):checked ~ section:nth-of-type(140),
.tabs > input:nth-of-type(141):checked ~ section:nth-of-type(141),
.tabs > input:nth-of-type(142):checked ~ section:nth-of-type(142),
.tabs > input:nth-of-type(143):checked ~ section:nth-of-type(143),
.tabs > input:nth-of-type(144):checked ~ section:nth-of-type(144),
.tabs > input:nth-of-type(145):checked ~ section:nth-of-type(145),
.tabs > input:nth-of-type(146):checked ~ section:nth-of-type(146),
.tabs > input:nth-of-type(147):checked ~ section:nth-of-type(147),
.tabs > input:nth-of-type(148):checked ~ section:nth-of-type(148),
.tabs > input:nth-of-type(149):checked ~ section:nth-of-type(149),
.tabs > input:nth-of-type(150):checked ~ section:nth-of-type(150),
.tabs > input:nth-of-type(151):checked ~ section:nth-of-type(151),
.tabs > input:nth-of-type(152):checked ~ section:nth-of-type(152),
.tabs > input:nth-of-type(153):checked ~ section:nth-of-type(153),
.tabs > input:nth-of-type(154):checked ~ section:nth-of-type(154),
.tabs > input:nth-of-type(155):checked ~ section:nth-of-type(155),
.tabs > input:nth-of-type(156):checked ~ section:nth-of-type(156),
.tabs > input:nth-of-type(157):checked ~ section:nth-of-type(157),
.tabs > input:nth-of-type(158):checked ~ section:nth-of-type(158),
.tabs > input:nth-of-type(159):checked ~ section:nth-of-type(159),
.tabs > input:nth-of-type(160):checked ~ section:nth-of-type(160) { display: block; }
.tabs > .tablist { flex-wrap: wrap; }

/* ---- Stepper: ‹ Stage [12 v] of 69 › ---- */
.stepper { display: inline-flex; align-items: center; gap: .5rem; }
.stepper .lead { font-weight: 600; color: var(--text-2); }
.stepper .of { color: var(--text-3); }
.stepper select { font-family: var(--mono); font-weight: 600; padding: .3rem .4rem .3rem .6rem; min-width: 4.2rem; }
.stepper .step {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-2); color: var(--text-2);
  font-size: 1.25rem; line-height: 1; cursor: pointer; margin: 0; user-select: none;
}
.stepper .step:hover { border-color: var(--brand); color: var(--text); text-decoration: none; }
.stepper .step.off { opacity: .3; cursor: default; }
.tabs.bare > .tablist { display: none; }
.board-nav { padding: 0 1rem .75rem; }
.kinds { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: .25rem 0 .75rem; }

/* ---- Map cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
/* The home page's featured strip sits at half page width (paired with the
   feed) rather than full width, so it needs a smaller minimum to still lay
   out as a grid instead of collapsing to one column per row. */
.cards.compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; }
.cards.compact .info { padding: .45rem .55rem; }
.cards.compact .name { font-size: .9rem; }
.cards.compact .line { font-size: .78rem; }
.card { display: block; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--text); transition: transform .12s, border-color .12s; }
.card:hover { border-color: var(--brand); }
.card:has(.shot:hover, .info:hover) { transform: translateY(-2px); }
.card .shot, .card .info { display: block; color: inherit; }
.card .shot:hover, .card .info:hover { text-decoration: none; }
.card .shot { aspect-ratio: 16 / 9; background: var(--brand-gradient); position: relative; }
.card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .shot .tier { position: absolute; top: .5rem; left: .5rem; }
.card .icon-btn.corner { position: absolute; top: .5rem; right: .5rem; background: rgba(20,20,20,.75); backdrop-filter: blur(2px); }
.card .info { padding: .6rem .8rem; }
.card .name { font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .line { display: flex; justify-content: space-between; gap: .5rem; color: var(--text-3); font-size: .88rem; margin-top: .2rem; }
.card .line .t { font-family: var(--mono); color: var(--text); }

/* ---- Home ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.75rem; }
/* Grid rows already stretch to the tallest cell; flow that stretch down into
   the wrapper div and then the panel itself, so two side-by-side panels of
   different shapes (a text feed next to a card grid) end up the same height
   instead of the shorter one's border stopping short. */
.grid-2 > div { display: flex; }
.grid-2 > div > section { margin-top: 0; flex: 1; }
/* A feed row (avatar, name, "set a new WR on", map, time, chip, date) needs
   ~550px to lay out on one line - halving anything narrower than ~1100px
   forces it to wrap mid-row, so this collapses well above the general
   720px mobile breakpoint below. */
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }
.feed { list-style: none; margin: 0; padding: 0; }
/* Same vertical padding as table.compact (above), so a feed row and a
   compact-table row - the two shapes stacked side by side on the home page -
   come out the same height and the two columns line up row for row. */
.feed li { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.feed li:last-child { border-bottom: 0; }
.when-group { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
/* Time, WR chip and the gap to the record it beat travel together: as bare
   flex children of .feed li each would wrap on its own, and the delta ended
   up stranded at the far left of its own line (the when-group's margin-left
   having pushed everything else right). */
.feed .time-group { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.feed .when { color: var(--text-4); font-size: .85rem; white-space: nowrap; }
.feed-map { display: inline-block; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.feed .t { font-family: var(--mono); font-size: .92rem; }

.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.columns section { margin-top: 0; }

/* ---- You strip (signed in) ---- */
.you { display: flex; align-items: center; gap: .9rem; margin: 1rem 0 0; padding: .6rem 1rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--link); border-radius: var(--radius); font-family: var(--mono); }
.you-label { font-family: var(--font); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--link); }
p.you { font-family: var(--font); }
tr.me-row td:first-child { box-shadow: inset 3px 0 0 var(--link); }
section.compare { margin-top: 1.25rem; }
section.compare > h2 { margin-bottom: .6rem; }

/* ---- Compare ---- */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.versus .vs { color: var(--text-4); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.side { display: flex; align-items: center; gap: .9rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.side-B { flex-direction: row-reverse; text-align: right; }
.side-B .side-name { justify-content: flex-end; }
.side-name { display: flex; align-items: center; gap: .4rem; font-size: 1.15rem; font-weight: 700; }
.side-time { font-family: var(--mono); font-size: 1.3rem; margin: .15rem 0; }
.side-A { border-top: 2px solid var(--link); }
.side-B { border-top: 2px solid var(--brand); }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }
.charts section { margin-top: 0; }
svg.chart { width: 100%; height: auto; display: block; font-family: var(--mono); }
svg.chart .axis { stroke: var(--line-2); stroke-width: 1; }
svg.chart rect.behind { fill: var(--slower); opacity: .8; }
svg.chart rect.ahead { fill: var(--pb); opacity: .8; }
svg.chart rect.even { fill: var(--text-4); }
svg.chart text.v { fill: var(--text-2); font-size: 11px; }
svg.chart text.v.a { fill: var(--link); }
svg.chart text.v.b { fill: #d66bb8; }
svg.chart text.l { fill: var(--text-3); font-size: 11px; font-family: var(--font); }
svg.chart path { fill: none; stroke-width: 2; }
svg.chart path.a, svg.chart circle.a { stroke: var(--link); fill: var(--link); }
svg.chart path.a { fill: none; }
svg.chart path.b, svg.chart circle.b { stroke: var(--brand); fill: var(--brand); }
svg.chart path.b { fill: none; }
svg.chart text.legend { font-size: 11px; font-family: var(--font); font-weight: 700; }
svg.chart text.legend.a { fill: var(--link); }
svg.chart text.legend.b { fill: #d66bb8; }
form.stack { display: grid; gap: .6rem; }
form.stack label { display: grid; gap: .25rem; color: var(--text-2); font-size: .9rem; }
form.stack input { width: 100%; }
form.stack button { justify-self: start; }
.error { color: var(--slower); }
.small { font-size: .85rem; }
tr.a-wins td:first-child { box-shadow: inset 3px 0 0 var(--link); }
tr.b-wins td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
@media (max-width: 720px) { .versus { grid-template-columns: 1fr; } .versus .vs { text-align: center; } .side-B { flex-direction: row; text-align: left; } .charts { grid-template-columns: 1fr; } }

/* ---- Map page: hero actions, time links, points, run page ---- */
.hero .hero-actions { display: flex; gap: .6rem; align-items: center; margin-top: .8rem; }
.hero .hero-actions .replay-link { font-weight: 700; color: var(--wr); padding: .4rem .7rem; border: 1px solid rgba(245,197,66,.5); border-radius: 6px; }
a.tl { color: inherit; }
a.tl:hover { text-decoration: none; }
a.tl:hover .t { color: var(--link); text-decoration: underline; }
h2 .more { float: right; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .9rem; }
.points-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.seg.wrap { flex-wrap: wrap; margin-bottom: 1rem; }
.run-time { font-family: var(--mono); font-size: 2rem; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: .5rem 0; }
.run-time .muted { font-family: var(--font); font-size: 1rem; }
.actions-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.head-actions { margin-left: auto; align-self: center; }
.you .btn { margin-left: auto; font-family: var(--font); }

.rows-control { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .25rem 0 .75rem; color: var(--text-3); font-size: .9rem; }
.panel > .body.tight { padding: .5rem 0 0; }
.panel > .body.tight .tablist { padding: 0 1rem; }
.tab-foot { display: flex; justify-content: space-between; align-items: center; padding: .5rem .8rem; color: var(--text-3); font-size: .9rem; border-top: 1px solid var(--line); }

/* ---- Replay links ---- */
.hero .facts .replay-link { font-weight: 700; color: var(--wr); }
td.actions .replay-link { color: var(--wr); }

/* ---- Replay viewer ---- */
.replay #viewer { position: relative; width: 100%; height: calc(100vh - 340px); min-height: 380px; background: #000; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.replay-meta { color: var(--text-2); }
.notice { background: rgba(245,197,66,.1); border: 1px solid rgba(245,197,66,.35); color: var(--text); padding: .6rem .9rem; border-radius: 6px; }
.map-viewer .hud { position: absolute; left: 12px; top: 12px; font-family: var(--mono); color: #fff; text-shadow: 0 1px 2px #000; pointer-events: none; }
.map-viewer .hud .big { font-size: 1.6rem; font-weight: 700; }
.map-viewer .hud .keys { margin-top: .3rem; letter-spacing: .15em; color: #9aa; }
.map-viewer .hud .keys b { color: #fff; }
.map-viewer .hud .split { margin-top: .2rem; font-weight: 700; opacity: 0; transition: opacity .2s ease; }
.map-viewer .hud .split.visible { opacity: 1; }
.map-viewer .hud .split.faster { color: var(--pb); }
.map-viewer .hud .split.slower { color: var(--slower); }
.map-viewer .loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ccc; font-family: var(--font); pointer-events: none; }

/* ---- Splits ---- */
table.splits tfoot td { background: var(--panel-2); font-weight: 600; border-top: 1px solid var(--line-2); }

@media (max-width: 720px) {
  main { padding: 1rem; }
  header.site { padding: .5rem 1rem; gap: .75rem; flex-wrap: wrap; }
  header.site .site-search { margin-left: 0; flex-basis: 100%; }
  header.site .site-search input { width: 100%; max-width: none; }
  th, td { padding: .4rem .5rem; }
  .grid-2 { grid-template-columns: 1fr; }
  .hero, .hero .hero-body { min-height: 180px; }
  a.player .name { max-width: 10rem; }
}

/* ---- Replay saveloc line ---- */
.saveloc-box { margin: .25rem 0 1rem; }
.saveloc-box p { margin: 0 0 .4rem; color: var(--text-3); }
.saveloc-box input { width: 100%; font-size: .85rem; color: var(--text-2); }