/* GoFree Surf Atlas. One stylesheet, no build step.
   Quiet plum/navy surfaces leave room for real surf maps and readable results.
   Magenta marks actions and selection; record and personal gap colours keep
   their in-game meanings. */

:root {
  --bg: #101124;
  --panel: #191a30;
  --panel-2: #21223c;
  --panel-3: #2b2c47;
  --line: #2a2b43;
  --line-2: #3e3f5b;
  --text: #f2f1f8;
  --text-2: #d0cde0;
  --text-3: #b8b6ce;
  --text-4: #9d9ab7;

  /* Subtle rank emphasis without competing with WR gold. */
  --band-1: rgba(184, 160, 220, .12);
  --band-2: rgba(184, 160, 220, .06);

  --brand: #d6409f;
  --brand-fill: #a82d82;
  --brand-light: #ed91ca;
  --field: #15162b;
  --brand-deep: #7a2a78;
  --brand-ink: #242039;
  --brand-soft: rgba(214, 64, 159, .16);
  --brand-gradient: linear-gradient(135deg, #242039, #402546 65%, #643253);
  --hairline: linear-gradient(to right, rgba(214,64,159,0) 5%, #d6409f 50%, rgba(214,64,159,0) 95%);

  --link: #ebb3d9;
  --focus: #ed91ca;
  --compare-a: #7fd0ff;
  --wr: #f5c542;
  --pb: #90ee90;
  --slower: #ff5a5a;

  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Barlow', system-ui, sans-serif;
  --num: 'Barlow', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;
  --radius: 6px;
}

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 16px/1.5 var(--font);
  font-variant-numeric: tabular-nums;
  background-color: var(--bg);
}
::selection { background: var(--brand); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { position: relative; z-index: 1; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.skip-link { position: absolute; top: .5rem; left: 1rem; z-index: 10; padding: .65rem 1rem; background: var(--panel-2); color: var(--text); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
#main-content { scroll-margin-top: 10rem; }

/* ---- Header ---- */
header.site {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.site-inner {
  display: grid; align-items: center; gap: 1.25rem;
  grid-template-columns: auto auto minmax(8rem, 1fr) auto auto;
  grid-template-areas: 'brand nav search social account';
  max-width: 1360px; margin: 0 auto; padding: 1rem 2rem;
}
header.site .brand { grid-area: brand; display: flex; align-items: center; min-width: 0; }
header.site .brand img { width: 165px; max-width: 100%; height: auto; display: block; }
header.site nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: .15rem; align-self: stretch; }
header.site nav a {
  display: flex; align-items: center; min-height: 2.5rem; color: var(--text-2); padding: .45rem .65rem;
  font: 500 .95rem/1.3 var(--font);
  border-bottom: 2px solid transparent;
}
header.site nav a:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--line-2); }
header.site nav a.active { color: #fff; border-bottom-color: var(--brand); }
header.site .site-search { grid-area: search; min-width: 0; }
header.site .account { grid-area: account; display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem .75rem; min-width: 0; max-width: 17rem; }
header.site .account .player { min-width: 0; max-width: 100%; }
header.site .account .name { max-width: 7rem; }
header.site .account .signout, header.site .account .activity { color: var(--text-3); font-size: .9rem; }
header.site .btn.steam { grid-area: account; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; font-weight: 600; white-space: nowrap; }
header.site .btn.steam:hover { border-color: var(--brand-light); }
header.site .social { grid-area: social; display: inline-flex; align-items: center; gap: .35rem; }
header.site .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius); 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; }
header.site .site-search input { width: 100%; min-width: 0; font-size: .95rem; }
header.site .site-menu-toggle { display: none; grid-area: menu; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }

@media (max-width: 1180px) {
  .site-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 'brand search account menu' 'nav nav nav nav' 'social social social social'; gap: 0 1rem; }
  header.site nav { gap: .5rem; margin-top: .5rem; }
  header.site .social { margin-top: .5rem; }
  header.site nav a { min-height: 44px; }
  header.site .site-menu-toggle:not([hidden]) { display: inline-flex; }
  header.site .site-menu-toggle:not([hidden])[aria-expanded='false'] ~ nav,
  header.site .site-menu-toggle:not([hidden])[aria-expanded='false'] ~ .social { display: none; }
}
@media (max-width: 720px) {
  .site-inner { padding: .75rem 1rem; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'brand account menu' 'search search search' 'nav nav nav' 'social social social'; gap: 0 .5rem; }
  header.site .brand img { width: 124px; }
  header.site .account { max-width: 8rem; gap: .25rem .5rem; }
  header.site .account .name { max-width: 3.5rem; }
  header.site .account .activity, header.site .account .signout { font-size: .8rem; }
  header.site .site-search { margin-top: .5rem; }
  header.site .site-search input { font-size: 1rem; }
  header.site .icon-btn { width: 44px; height: 44px; }
}

main { max-width: 1360px; margin: 0 auto; padding: 2rem 2rem 3rem; }

h1 { margin: 0 0 .5rem; font: 700 2.1rem/1.15 var(--display); letter-spacing: -.025em; }
h2 { margin: 0 0 .75rem; font: 600 1.2rem/1.3 var(--display); letter-spacing: -.01em; color: var(--text); }
h2 a.player .name { text-transform: none; letter-spacing: 0; font-size: 1.1rem; }
h2 .count { color: var(--text-4); font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: .5rem; font-family: var(--font); font-size: .9rem; }

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(--num); 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: var(--brand-light); }
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(--num); font-size: .95rem; 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(--num); 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: var(--field);
  border: 1px solid var(--line-2); border-radius: 6px; padding: .4rem .7rem;
}
input:focus, select:focus { border-color: var(--focus); 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-fill); border-color: var(--brand-fill); 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-fill); 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(--num); color: var(--text-3); padding: 0 .3rem; }

/* ---- Stat tiles ---- */
.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); }

/* 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(--num); 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(16, 17, 36, .85); 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(--num); color: var(--text); }

/* ---- Home: Surf Atlas ---- */
.home-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.home-hero h1 { font-size: clamp(1.65rem, 3vw, 2.1rem); margin: 0; }
.home-hero .title p { margin: .35rem 0 0; }
.home-hero .find { display: flex; gap: .5rem; flex: 1 1 22rem; max-width: 36rem; align-items: stretch; flex-wrap: wrap; }
.home-hero .find input { flex: 1 1 14rem; font-size: 1.1rem; padding: .65rem .9rem; }
.home-hero .find button { padding: .65rem 1.2rem; font-weight: 600; }
.home-hero .find .mine { padding: .65rem 1rem; color: var(--link); }

.home-feature { position: relative; isolation: isolate; overflow: hidden; min-height: 320px; display: flex; align-items: center; margin-top: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.feature-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.home-feature::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(16,17,36,.98), rgba(16,17,36,.88) 36%, rgba(16,17,36,.15) 78%); }
.feature-info { min-width: 0; width: min(100%, 36rem); padding: 2rem 2.25rem; }
.feature-label { margin: 0 0 .6rem; color: var(--text-2); font-size: .85rem; }
.feature-info h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin: 0; font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.15; letter-spacing: -.025em; overflow-wrap: anywhere; }
.feature-info h2 a { color: var(--text); min-width: 0; }
.feature-info .tier { font-size: .8rem; flex: none; }
.feature-description { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--text-2); margin: .75rem 0 0; }
.feature-description span { overflow-wrap: anywhere; }
.feature-facts { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 1.25rem 0; }
.feature-facts dt { color: var(--text-2); font-size: .8rem; }
.feature-facts dd { margin: .2rem 0 0; font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.feature-facts div:last-child dd .t { color: var(--wr); }
.feature-info > .btn { padding: .6rem 1.1rem; }
.image-unavailable { color: var(--text-4); font-size: .8rem; margin: .75rem 0 0; }
.home-feature.without-image::before, .home-feature.empty-feature::before { background: none; }
.home-feature.empty-feature { min-height: 220px; }

.home > .panel { margin-top: 2.5rem; }
/* On the home page the panels are open ruled sections on the chart, not
   boxes: a heading, a rule under it, then the rows. */
.home .panel, .player .panel, .map .panel, .players .panel, .records .panel, .activity .panel, .run .panel, .replay .panel { background: none; border: 0; border-radius: 0; overflow: visible; }
.home .panel > h2, .player .panel > h2, .map .panel > h2, .players .panel > h2, .activity .panel > h2, .run .panel > h2, .replay .panel > h2, .ruled > h2 { background: none; border-bottom: 1px solid var(--line-2); padding: 0 0 .5rem; margin-bottom: .25rem; display: flex; align-items: baseline; gap: .6rem; }
.home .panel > h2 .count, .player .panel > h2 .count, .map .panel > h2 .count, .players .panel > h2 .count, .run .panel > h2 .count, .replay .panel > h2 .count { margin-left: auto; }
.standings-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding-top: .75rem; }
.standings-group { min-width: 0; margin-top: 0; display: flex; flex-direction: column; align-items: flex-start; }
.standings-group h3 { margin: 0 0 .65rem; font-size: 1.1rem; font-weight: 600; }
.home .standings-group > .see-all { min-height: 44px; margin: auto 0 0; align-self: flex-start; }
.standings-group table, .standings-group > .empty { margin: 0 0 .75rem; }
@media (max-width: 1199px) { .standings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .standings-grid { grid-template-columns: minmax(0, 1fr); } }

.home .feed.with-images li { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: 'thumb who time' 'thumb meta meta'; padding: 1rem 0; gap: .35rem .85rem; animation: none; }
.home .feed-thumb { grid-area: thumb; align-self: center; width: 64px; height: 48px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.home .feed-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home .feed .who { grid-area: who; }
.home .feed .who .player { min-width: 0; max-width: 100%; }
.home .feed .who > .muted { font-size: .85rem; }
.home .feed .feed-map { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.home .feed .time-group { grid-area: time; }
.home .feed .t { font-size: 1.1rem; }
.home .feed .meta { grid-area: meta; gap: .5rem .75rem; font-size: .8rem; }
.home table.board { table-layout: fixed; }
.home table.board th.rank { width: 2.25rem; }
.home table.board th.r { width: 5.5rem; }
.home table.board tbody tr { animation: none; }
.home table.board .player-cell { min-width: 0; }
.home table.board a.player { max-width: 100%; white-space: normal; }
.home table.board .name { max-width: none; white-space: normal; overflow-wrap: anywhere; }
.home table.board td { padding-top: .7rem; padding-bottom: .7rem; }
.home .tab-foot { padding: .75rem 0 0; }

.home-map-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.home-map { min-width: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.home-map:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.home-map-link { display: block; color: var(--text); }
.home-map-link:hover { text-decoration: none; }
.home-map-link:hover .home-map-name { color: var(--link); }
.home-map-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--panel-2); color: var(--text-4); text-align: center; font-size: .8rem; }
.home-map-image > span { padding: .75rem; }
.home-map-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-map-name { display: flex; align-items: flex-start; gap: .4rem; padding: .75rem .75rem 0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.home-map-name .tier { flex: none; margin-left: auto; }
.home-map-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding: .4rem .75rem .75rem; }
.home-map-completions { grid-column: 1; color: var(--text-3); font-size: .85rem; margin: 0; }
.home-map-record { grid-column: 1; font-size: .85rem; }
.home-map-holder { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-4); margin-top: .15rem; }
.home-map-replay { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
@media (max-width: 1000px) {
  .home-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .home-hero .find { max-width: none; }
  .home-hero .find input { min-width: 0; flex-basis: 10rem; font-size: 1rem; }
  .home-feature { min-height: 0; padding-top: 160px; align-items: stretch; }
  .feature-image { height: 220px; object-position: center; }
  .home-feature::before { background: linear-gradient(0deg, var(--panel) 15%, var(--panel) calc(100% - 160px), transparent); }
  .feature-info { width: 100%; padding: 1.5rem; }
  .feature-info h2 { font-size: 1.8rem; }
  .feature-facts { gap: 1rem 1.5rem; }
  .home-feature.without-image, .home-feature.empty-feature { padding-top: 0; }
  .home .feed.with-images li { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: 'thumb who' 'thumb time' 'thumb meta'; gap: .4rem .75rem; }
  .home .feed-thumb { width: 48px; height: 48px; align-self: start; }
  .home .feed .time-group { justify-self: start; }
  .home-map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .home-map-info { grid-template-columns: minmax(0, 1fr); }
  .home-map-replay { grid-column: 1; grid-row: auto; }
}

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.feed li:last-child { border-bottom: 0; }
.feed .who { min-width: 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.feed .time-group { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; justify-self: end; }
.feed .t { font-family: var(--num); font-size: 1.25rem; font-weight: 600; letter-spacing: .01em; }
.feed .meta { grid-column: 1 / -1; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; color: var(--text-4); font-size: .9rem; }
.feed .meta .replay, .feed .meta .icon-btn { margin-left: auto; }
.feed .when { color: var(--text-3); font-size: .9rem; white-space: nowrap; }
.feed-map { display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-weight: 600; }
/* A time gap set like a chart sounding: italic, so it reads as a measured
   figure beside the plain time rather than as a second time. */
.feed li.newest { padding: 1.1rem 0 1.2rem; }
.feed li.newest .feed-map { font-size: 1.5rem; max-width: 22rem; font-family: var(--display); }
.feed li.newest .t { font-size: 2.1rem; }
.feed li.newest .meta { font-size: 1.05rem; }
table.board tr.b1 td.num, table.board tr.b1 a.player { font-weight: 700; font-size: 1.05rem; }
@keyframes settle { from { transform: translateY(8px); opacity: .55; } to { transform: none; opacity: 1; } }
.feed li, table.board tbody tr { animation: settle .45s cubic-bezier(.16, 1, .3, 1) both; }
.feed li:nth-child(2), table.board tbody tr:nth-child(2) { animation-delay: .04s; }
.feed li:nth-child(3), table.board tbody tr:nth-child(3) { animation-delay: .08s; }
.feed li:nth-child(4), table.board tbody tr:nth-child(4) { animation-delay: .12s; }
.feed li:nth-child(5), table.board tbody tr:nth-child(5) { animation-delay: .16s; }
.d.sounding { font-style: italic; font-weight: 500; font-size: .95em; }

table.board { border: 0; background: none; }
table.board th { background: none; border-bottom: 1px solid var(--line-2); padding: .4rem .65rem; }
table.board th.rank { text-align: right; }
table.board tbody tr.b1 td { background: var(--band-1); }
table.board tbody tr.b2 td { background: var(--band-2); }
table.board tbody tr:hover td { background: var(--panel-3); }
table.board td.rank { font-family: var(--num); font-weight: 600; color: var(--text-3); }
table.board tr.b1 td.rank { color: var(--text); }

table.index { border: 0; background: none; }
table.index th { background: none; border-bottom: 1px solid var(--line-2); }
.map-cell { display: flex; align-items: center; gap: .75rem; min-width: 12rem; }
.map-cell .thumb { width: 64px; height: 36px; flex: none; border-radius: 2px; overflow: hidden; background: var(--brand-gradient); display: block; }
.map-cell .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-cell .name { font-weight: 600; }
.map-cell .holder { display: none; font-size: .85rem; }
.map-cell .name-stack { display: flex; flex-direction: column; min-width: 0; }
td.rec .t { font-size: 1.02rem; font-weight: 600; }

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

/* ---- You strip (signed in) ---- */
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; padding: .8rem 0 0; }
.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: 700 clamp(1.6rem, 3.6vw, 2.1rem)/1.1 var(--num); font-variant-numeric: tabular-nums; margin: .15rem 0; }
.side-time .d { font-size: .55em; font-style: italic; font-weight: 500; }
.side-A { border-top: 2px solid var(--compare-a); }
.side-B { border-top: 2px solid var(--brand); }
section.compare .ledger { margin-top: .5rem; }
svg.chart { width: 100%; height: auto; display: block; font-family: var(--num); }
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(--compare-a); }
svg.chart text.v.b { fill: var(--brand-light); }
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(--compare-a); fill: var(--compare-a); }
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(--compare-a); }
svg.chart text.legend.b { fill: var(--brand-light); }
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 2px 0 0 var(--compare-a); }
tr.b-wins td:first-child { box-shadow: inset 2px 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; } }

/* ---- Map page: hero actions, time links, points, run page ---- */
a.tl { color: inherit; }
a.tl:hover { text-decoration: none; }
a.tl:hover .t { color: var(--link); text-decoration: underline; }
.points-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.seg.wrap { flex-wrap: wrap; margin-bottom: 1rem; }
.actions-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.head-actions { margin-left: auto; align-self: center; }

.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 ---- */
.replay-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--wr); padding: .35rem .75rem; border: 1px solid rgba(245,197,66,.5); border-radius: var(--radius); white-space: nowrap; }
.replay-link:hover { text-decoration: none; border-color: var(--wr); background: rgba(245,197,66,.08); }
.line .replay-link { padding: .1rem .5rem; font-size: .85em; }

/* ---- 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; }
.notice { background: var(--panel); border-left: 2px solid var(--line-2); color: var(--text-2); padding: .6rem .9rem; }
.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; }
  th, td { padding: .4rem .5rem; }
  .grid-2 { grid-template-columns: 1fr; }
  a.player .name { max-width: 10rem; }
}

/* ---- Replay saveloc line ---- */
.saveloc-box { padding-top: 1rem; border-top: 1px solid var(--line-2); }
.saveloc-box h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.saveloc-box p { margin: 0 0 .4rem; color: var(--text-3); }
.saveloc-box [hidden] { display: none; }
.saveloc-box .btn { min-height: 44px; margin: .25rem .5rem .5rem 0; }
.saveloc-box input { width: 100%; font-size: .85rem; color: var(--text-2); }

/* ---- Player and map pages: shared results and summary styling ---- */
.player section, .map section, .run section, .replay section { margin-top: 2.25rem; }

/* ---- Comparison picker ---- */
.compare-landing { max-width: 64rem; }
.compare-intro { max-width: 46rem; margin: 0 0 1.5rem; color: var(--text-2); }
.compare-form { padding: 1.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.compare-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.compare-field { min-width: 0; }
.compare-field label { display: block; margin-bottom: .5rem; font-weight: 600; }
.compare-field label span { font-weight: 400; font-size: .9rem; }
.compare-player-a label { border-left: 3px solid var(--compare-a); padding-left: .6rem; }
.compare-player-b label { border-left: 3px solid var(--brand); padding-left: .6rem; }
.compare-field input { width: 100%; min-width: 0; min-height: 44px; }
.compare-field p { margin: .5rem 0 0; font-size: .9rem; color: var(--text-3); }
.compare-map { grid-column: 1 / -1; }
.compare-submit { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1.25rem; }
.compare-submit button, .compare-submit a { display: inline-flex; align-items: center; min-height: 44px; }
.compare-error { margin-top: 1.25rem; padding: .75rem 1rem; border-left: 3px solid var(--slower); background: var(--bg); overflow-wrap: anywhere; }
.compare-error p { margin: .25rem 0 0; color: var(--text-2); }
.compare-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.compare-guide section { border-top: 1px solid var(--line); padding-top: 1rem; }
.compare-guide h2 { margin: 0 0 .5rem; }
.compare-guide p { margin: 0; color: var(--text-3); }
@media (max-width: 720px) {
  .compare-form { padding: .9rem; }
  .compare-fields, .compare-guide { grid-template-columns: minmax(0, 1fr); }
}
.player .panel > .body, .map .panel > .body, .run .panel > .body, .replay .panel > .body { padding: 1rem 0 0; }
.player table, .map table, .run table { border: 0; background: none; }
.player th, .map th, .run th { background: none; border-bottom: 1px solid var(--line-2); }
.player .tab-foot, .map .tab-foot { padding: .6rem 0 0; }
.player .board-nav, .map .board-nav, .map .panel > .body.tight .tablist { padding: 0 0 .75rem; }
.player .table-wrap, .map .table-wrap, .run .table-wrap { margin-top: .25rem; }
.player .d, .map .d, .run .d { font-style: italic; font-weight: 500; }
table.times tr.b1 td { background: var(--band-1); }
table.times tr.b2 td { background: var(--band-2); }
table.times tbody tr:hover td { background: var(--panel-3); }
table.times tr.wr-row:hover td { background: rgba(245,197,66,.12); }
.player .tabs > .tablist { flex-wrap: wrap; gap: .25rem .5rem; }
.player .tabs > .tablist label { display: inline-flex; align-items: center; min-height: 44px; font: 500 .95rem/1.3 var(--font); padding: .6rem .75rem; white-space: nowrap; }
.player #records .tabs > input:nth-of-type(1):focus-visible ~ .tablist label:nth-of-type(1),
.player #records .tabs > input:nth-of-type(2):focus-visible ~ .tablist label:nth-of-type(2),
.player #records .tabs > input:nth-of-type(3):focus-visible ~ .tablist label:nth-of-type(3),
.player #records .tabs > input:nth-of-type(4):focus-visible ~ .tablist label:nth-of-type(4),
.player #records .tabs > input:nth-of-type(5):focus-visible ~ .tablist label:nth-of-type(5),
.player #records .tabs > input:nth-of-type(6):focus-visible ~ .tablist label:nth-of-type(6) { outline: 2px solid var(--focus); outline-offset: -3px; }

.player-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: .5rem; font-size: .9rem; }
.profile-summary { padding: 1.75rem 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.player-head { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; }
.player-head > .avatar { width: 80px; height: 80px; }
.player-head > .avatar.ph { color: var(--text-4); background: var(--panel-2); opacity: 1; }
.player-head .who { min-width: 0; }
.player-head .who h1 { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: 0; font-size: clamp(1.9rem, 4vw, 2.6rem); overflow-wrap: anywhere; }
.player-name { min-width: 0; }
.player-head .who .sub { display: flex; align-items: center; gap: .35rem 1rem; flex-wrap: wrap; color: var(--text-3); margin-top: .5rem; font-size: .9rem; }
.player-head .who .sub > span { overflow-wrap: anywhere; }
.player-head .head-actions { margin-left: 0; }
.player-head .head-actions .btn { min-height: 44px; display: inline-flex; align-items: center; }

/* Rank and points stay prominent; the track is a relative position, not a chart. */
.player .standing { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem 2rem; padding: 1.25rem 0 0; margin-top: 1.5rem; border-top: 1px solid var(--line-2); }
.standing .rank-fig { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.standing .big { font: 700 clamp(2.6rem, 7vw, 4rem)/1 var(--display); letter-spacing: .005em; }
.standing .big.unranked { color: var(--text-3); }
.standing .of { color: var(--text-3); font-size: 1.1rem; }
.standing .pts { color: var(--text-3); font-size: 1.05rem; text-align: right; }
.standing .pts b { font: 700 1.9rem/1 var(--display); color: var(--text); margin-right: .2rem; }
.nearby-rank { margin-top: 1.25rem; border-top: 1px solid var(--line-2); padding-top: 1rem; }
.nearby-rank h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.nearby-rank ul { list-style: none; padding: 0; margin: 0; }
.nearby-rank li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto auto; gap: .4rem 1rem; align-items: baseline; padding: .4rem 0; }
.nearby-rank li > * { min-width: 0; overflow-wrap: anywhere; }
.nearby-rank .nearby-empty { grid-column: 2 / -1; }
.nearby-rank p { margin-bottom: 0; }
@media (max-width: 720px) {
  .nearby-rank li { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .nearby-rank li > :nth-child(n+3) { grid-column: 2; }
}
.records-rss { min-height: 44px; display: inline-flex; align-items: center; }
.rankbar { grid-column: 1 / -1; margin-top: .6rem; }
.rank-track { position: relative; height: 6px; border-radius: 3px; background: var(--panel-3); }
.rank-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--brand-fill); }
.rank-track b { position: absolute; top: -3px; width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; background: var(--brand-light); }
.rankbar .cap { display: flex; justify-content: space-between; margin-top: .35rem; font-size: .82rem; color: var(--text-3); font-family: var(--num); }

.profile-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; margin-top: 2rem; }
.profile-overview > section { min-width: 0; margin-top: 0; }
.profile-overview .ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; margin-bottom: 0; }
.player .ledger dt { font-size: .85rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.player .ledger dd { overflow-wrap: anywhere; }
.player .ledger.lead dd:not(.sub) { font-size: 1.9rem; }
.player .tiers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 2rem; }
.player .tierrow { grid-template-columns: auto minmax(0, 1fr) auto; }
.player .tierrow .n { max-width: 12rem; white-space: normal; overflow-wrap: anywhere; text-align: right; }
.player .tierrow .tiersub { flex-wrap: wrap; }
.player > #records, .player > #compare, .player > #profile-tiers { scroll-margin-top: 6rem; }
.player #records .tab-foot { flex-wrap: wrap; gap: .75rem; }
.player .profile-map { display: flex; align-items: center; gap: .65rem; min-width: 12rem; }
.profile-map-art { display: block; flex: none; width: 48px; height: 36px; border-radius: 4px; overflow: hidden; background: var(--panel-2); }
.profile-map-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-map-name { min-width: 0; max-width: 18rem; white-space: normal; overflow-wrap: anywhere; }
.player > .empty { overflow-wrap: anywhere; }
@media (max-width: 1000px) { .profile-overview { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .profile-summary { padding: 1.25rem; }
  .player-head { grid-template-columns: 60px minmax(0, 1fr); gap: 1rem; }
  .player-head > .avatar { width: 60px; height: 60px; }
  .player-head .who h1 { font-size: 1.7rem; }
  .player-head .who .sub { font-size: .85rem; }
  .player-head .head-actions { grid-column: 1 / -1; }
  .profile-achievements .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player > #records, .player > #compare, .player > #profile-tiers { scroll-margin-top: 8rem; }
}

/* Ledger: ruled figures, no tiles. */
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 1.75rem; margin: 0 0 1.25rem; }
.ledger > div { border-top: 1px solid var(--line); padding: .55rem 0 .7rem; min-width: 0; }
.ledger dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.ledger dd { margin: 0; }
.ledger dd:not(.sub) { font: 600 1.5rem/1.15 var(--num); font-variant-numeric: tabular-nums; }
.ledger.lead dd:not(.sub) { font-size: 2rem; font-weight: 700; }
.ledger dd.sub { color: var(--text-4); font-size: .85rem; }
.ledger > div.wr dd:not(.sub) { color: var(--wr); }
.ledger .delta { font-size: .6em; font-weight: 700; margin-left: .3rem; vertical-align: .2em; }
.ledger .delta.up { color: var(--pb); }
.ledger .delta.down { color: var(--slower); }
/* Activity compares visits with open ledgers and a thumbnail-led completion list. */
.activity-context { max-width: 70ch; margin-bottom: 1.75rem; }
.activity-context p { margin: .4rem 0; }
.activity-standing { padding: 1.25rem 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.activity h2 { font-size: 1.2rem; margin: 0 0 .75rem; }
.activity .ledger, .activity .ledger.lead { margin-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.activity .ledger dt { font-size: .85rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.activity .ledger dd { overflow-wrap: anywhere; }
.activity-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin: 2rem 0; }
.activity-overview > section { min-width: 0; }
.activity .table-wrap { max-width: 100%; }
.activity table { min-width: 680px; background: none; border: 0; }
.activity th { text-transform: none; letter-spacing: 0; background: none; }
.activity td:first-child { min-width: 14rem; max-width: 25rem; white-space: normal; }
.activity .profile-map { display: flex; align-items: center; gap: .65rem; min-height: 44px; }
.activity-empty { padding: 1rem 0; }
.activity-empty p { color: var(--text-3); margin: 0 0 1rem; }
.activity .btn { min-height: 44px; }
@media (max-width: 720px) {
  .activity-standing { padding: 1rem; }
  .activity-overview { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
/* Record history stays an open ledger, with real map artwork as its anchor. */
.records .record-history { margin-top: 1.5rem; }
.record-history-head { border-bottom: 1px solid var(--line-2); padding-bottom: .75rem; }
.record-history-head h2 { margin: 0; font-size: 1.2rem; }
.record-history-head p { margin: .3rem 0 0; font-size: .9rem; }
.records .feed.with-images li { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: 'thumb who time' 'thumb meta meta'; gap: .5rem 1rem; padding: 1.25rem 0; animation: none; }
.records .feed-thumb { grid-area: thumb; align-self: center; width: 96px; height: 64px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.records .feed-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.records .feed .who { grid-area: who; }
.records .feed .who .player { min-width: 0; max-width: 100%; }
.records .feed .who > .muted { font-size: .9rem; }
.records .feed .feed-map { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.records .feed .time-group { grid-area: time; }
.records .feed .meta { grid-area: meta; gap: .5rem 1rem; }
.records .feed .sounding { color: var(--text-3); font-style: normal; }
.records .feed .icon-btn { width: 44px; height: 44px; }
.records .tab-foot { padding: 1rem 0 0; flex-wrap: wrap; gap: .75rem; }
.records .pager.compact { margin: 0; }
@media (max-width: 720px) {
  .records .feed.with-images li { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: 'thumb who' 'thumb time' 'meta meta'; gap: .6rem .75rem; }
  .records .feed-thumb { width: 48px; height: 48px; align-self: start; }
  .records .feed .time-group { justify-self: start; flex-wrap: wrap; white-space: normal; }
}

/* Tier ladder: rows you can follow to the maps still to do. */
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 2.25rem; }
.tierrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .15rem .7rem; font-size: .9rem; padding: .55rem 0; border-bottom: 1px solid var(--line); color: inherit; }
a.tierrow:hover { text-decoration: none; background: var(--band-2); }
a.tierrow:hover .n { color: var(--text); }
.tierrow .bar { height: 6px; background: var(--panel-3); border-radius: 1px; overflow: hidden; }
.tierrow .bar i { display: block; height: 100%; background: var(--brand-fill); }
.tierrow.done .bar i { background: var(--text-4); }
.tierrow .n { color: var(--text-3); font-family: var(--num); font-size: .85rem; white-space: nowrap; }
.tierrow .tiersub { grid-column: 2 / -1; display: flex; gap: .75rem; font-family: var(--num); font-size: .78rem; color: var(--text-4); }

/* Map detail: real map artwork and an immediately readable record summary. */
.map-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: .5rem; font-size: .9rem; }
.map > .empty { overflow-wrap: anywhere; }
.map-head { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 280px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.map-head::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(16,17,36,.98), rgba(16,17,36,.8) 45%, rgba(16,17,36,.12)); }
.map-banner { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.map-title { min-width: 0; width: 100%; padding: 2rem; }
.map-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: 0; font-size: clamp(2rem, 4.2vw, 3rem); overflow-wrap: anywhere; }
.map-name { min-width: 0; }
.map-head h1 .tier { font-size: .9rem; flex: none; }
.map-head .facts { display: flex; gap: .5rem 1.25rem; flex-wrap: wrap; margin-top: 1rem; color: var(--text-2); }
.map-head .facts > span { overflow-wrap: anywhere; }
.map-head .facts b { color: var(--text); }
.map-head .tag { background: var(--bg); color: var(--text-2); }
.map-head.without-image { min-height: 180px; }
.map-head.without-image::before { background: none; }
.list-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--line); }
.map > section.record { padding: 1.5rem 2rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); align-items: center; gap: 1.5rem; }
.map .record .rec-wr, .map .record .rec-you { flex: 1 1 15rem; min-width: 0; }
.map .record .rec-you { padding-left: 1.5rem; }
.map .record .rec-label { font: 500 .85rem/1.4 var(--font); text-transform: none; letter-spacing: 0; }
.map .record .you-label { color: var(--brand-light); }
.map .record .rec-time { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.2; overflow-wrap: anywhere; }
.map .record .rec-by .player { min-width: 0; max-width: 100%; }
.map .record .rec-by .name { max-width: 12rem; }
.map .record .rec-actions { flex: 0 1 auto; }
.map .record .rec-actions > a { min-height: 44px; display: inline-flex; align-items: center; }
.map .panel > h2 { flex-wrap: wrap; row-gap: .5rem; }
.map .panel > h2 .count { margin-left: 0; }
.map .panel > h2 .see-all { margin-left: auto; }
.map-sections { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 0; margin-top: 1rem; border-bottom: 1px solid var(--line); }
.map-sections a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; color: var(--text-2); font-size: .92rem; font-weight: 600; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 999px; }
.map-sections a:hover { color: var(--text); border-color: var(--brand); text-decoration: none; }
.map > section[id], .map > #compare { scroll-margin-top: 6rem; }
.map .board-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.map .stepper { flex-wrap: wrap; max-width: 100%; }
.map .points-grid > div { min-width: 0; padding: .5rem 0; }
.map .points-grid .stat-label { font-size: .85rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.map section.record, .run section.record, .replay section.record { margin-top: 1.75rem; }
.record { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; align-items: flex-end; }
.record > .rec-actions { margin-left: auto; }
.rec-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.rec-label.you-label { color: var(--brand); }
.rec-time { display: block; font: 700 clamp(2.2rem, 5.5vw, 3.1rem)/1.05 var(--num); font-variant-numeric: tabular-nums; margin: .15rem 0 .25rem; color: var(--text); }
.rec-wr .rec-time, .rec-wr .rec-time .t { color: var(--wr); }
.rec-time .d { font-size: .5em; color: var(--text-3); }
.rec-time .d.faster { color: var(--pb); }
.rec-time .d.slower { color: var(--slower); }
.rec-time .chip { font-size: .3em; }
a.rec-time:hover { text-decoration: none; }
a.rec-time:hover .t { text-decoration: underline; text-underline-offset: 4px; }
.rec-by { display: flex; align-items: center; gap: .3rem .6rem; flex-wrap: wrap; font-size: .95rem; }
.rec-you, .rec-ref { padding-left: 2.25rem; border-left: 1px solid var(--line-2); }
.rec-ref .rec-time, .replay .rec-time { font-size: clamp(1.7rem, 3.8vw, 2.2rem); }
/* Run detail keeps map context compact and the exact run time prominent. */
.run { min-width: 0; overflow-wrap: anywhere; }
.run-return { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: .75rem; }
.run-head { display: flex; align-items: center; gap: 1.5rem; }
.run-art { flex: 0 0 240px; aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--panel); border-radius: var(--radius); overflow: hidden; color: var(--text-3); font-size: .9rem; }
.run-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.run-identity { min-width: 0; }
.run-identity h1 { margin-bottom: .5rem; }
.run-identity p { margin: .35rem 0 0; }
.run-player { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; }
.run .player, .run .player .name { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.run-player .player { flex: 1 1 12rem; }
.run > section.record { padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); align-items: flex-start; }
.run .record > div { min-width: 0; }
.run .rec-label { font-size: .9rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.run .rec-time { line-height: 1.2; }
.run .rec-time .d { display: block; font-size: 1rem; }
.run .rec-actions { flex: 1 1 100%; border-top: 1px solid var(--line); padding-top: 1rem; }
.run .rec-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.run .rec-actions p { flex-basis: 100%; margin: 0; }
.run-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.run-details > section { min-width: 0; }
.run .ledger { grid-template-columns: minmax(0, 1fr); margin-top: .5rem; }
.run .ledger dt { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.run .splits { min-width: 660px; }
.run .splits th { text-transform: none; letter-spacing: 0; }
.run .splits a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 720px) {
  .run-head { align-items: stretch; flex-direction: column; gap: 1rem; }
  .run-art { flex-basis: auto; width: 100%; max-height: 200px; }
  .run-details { grid-template-columns: minmax(0, 1fr); }
  .run > section.record { padding: 1rem; align-items: stretch; }
}
/* Replay surroundings: the viewer, playback controls and HUD keep their own styles. */
.replay-return { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: .5rem; }
.replay-head h1 { overflow-wrap: anywhere; }
.replay-head p { margin: .4rem 0 0; }
.replay-selection { margin-top: 1.25rem; padding: .75rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.replay .kinds { margin: 0; }
.replay .seg { flex-wrap: wrap; max-width: 100%; }
.replay .seg a { min-height: 44px; display: inline-flex; align-items: center; }
.replay .stepper .step, .replay .stepper select { min-height: 44px; }
.replay > section.record { padding: 1.25rem; margin-bottom: 1.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); align-items: flex-start; }
.replay .record > div { min-width: 0; flex: 1 1 15rem; }
.replay .rec-label { font-size: .9rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.replay .rec-time { line-height: 1.2; overflow-wrap: anywhere; }
.replay .rec-time .d { display: inline-block; }
.replay .rec-by { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; overflow-wrap: anywhere; }
.replay .rec-by .player { min-width: 0; max-width: 100%; }
.replay .rec-by .name { white-space: normal; overflow-wrap: anywhere; }
.replay .notice { overflow-wrap: anywhere; }
.replay-help { margin-top: 1rem; }
.replay-help h2 { margin: 0; font-size: 1.2rem; }
.replay-help p { margin: .4rem 0 .75rem; }
.replay-help ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; list-style: none; padding: 0; margin: 0; }
.replay-help li { color: var(--text-3); }
.replay-help kbd { display: inline-block; padding: .1rem .4rem; margin-right: .35rem; border: 1px solid var(--line-2); border-radius: 4px; color: var(--text); font: 500 .9rem var(--font); }
.replay .panel > h2 { flex-wrap: wrap; }
.replay .panel > h2 .count { overflow-wrap: anywhere; }
.replay .empty { overflow-wrap: anywhere; }
.replay .empty .btn { min-height: 44px; margin: .5rem .5rem 0 0; }
@media (max-width: 720px) {
  .replay .record > div { flex-basis: auto; }
  .replay-help ul { grid-template-columns: minmax(0, 1fr); }
}
.rec-you p { margin: .4rem 0 0; }
.rec-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.points-grid .stat-value { font-family: var(--num); }

@media (max-width: 720px) {
  .player .standing { grid-template-columns: 1fr; }
  .standing .pts { text-align: left; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
  .ledger.lead { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .9rem; }
  .ledger.lead dd:not(.sub) { font-size: 1.6rem; }
  .player td.time .d, .map td.time .d { display: block; text-align: right; }
  .map-head.has-image { padding-top: 150px; min-height: 0; }
  .map-head.has-image .map-banner { height: 230px; object-position: center; }
  .map-head.has-image::before { background: linear-gradient(0deg, var(--panel) 15%, var(--panel) calc(100% - 150px), transparent); }
  .map-title { padding: 1.25rem; }
  .map-head h1 { font-size: 1.8rem; }
  .map-head .facts { font-size: .9rem; gap: .5rem 1rem; }
  .map > section.record { padding: 1.25rem; align-items: stretch; }
  .map .record .rec-wr, .map .record .rec-you { flex-basis: auto; }
  .map .record .rec-you { padding-left: 0; }
  .map .record .rec-actions > a { justify-content: center; }
  .map-sections { gap: .4rem; }
  .map > section[id], .map > #compare { scroll-margin-top: 8rem; }
  .record { flex-direction: column; align-items: stretch; }
  .record > .rec-actions { margin-left: 0; }
  .rec-you, .rec-ref { padding-left: 0; border-left: 0; padding-top: 1rem; border-top: 1px solid var(--line-2); }
  .tiers { grid-template-columns: 1fr; }
}

/* ---- List pages (maps, players) ---- */
.list-head { position: relative; align-items: flex-end; padding-bottom: 1.3rem; margin-bottom: 1.25rem; }
.list-head h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.maps table, .players table { border: 0; background: none; }
.maps th, .players th { background: none; border-bottom: 1px solid var(--line-2); }
.maps tbody tr:hover td, .players tbody tr:hover td { background: var(--panel-3); }
.players section { margin-top: 2.5rem; }
.players .panel table { border: 0; }
table.players tr.b1 td { background: var(--band-1); }
table.players tr.b2 td { background: var(--band-2); }
table.players tr.b1 td.num, table.players tr.b1 a.player { font-weight: 700; }
table.players td.num { font-size: .95rem; }
table.maps td.time .t { font-weight: 600; }
table.maps.full th, table.maps.full td { padding-left: .55rem; padding-right: .55rem; }
table.maps.full td:nth-child(3) { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
table.maps.full td.player-cell { min-width: 0; }
table.maps.full td.player-cell a.player .name { max-width: 11rem; }
.players .panel table { max-width: 38rem; }
.list-foot { display: flex; justify-content: flex-end; align-items: center; padding: .6rem 0; }
/* Country standings retain all figures within the table's own scroll region. */
.countries-intro { max-width: 48rem; margin: 0 0 1.5rem; }
.countries table { min-width: 42rem; }
.countries th a { display: inline-flex; align-items: center; min-height: 44px; }
.countries .country-identity { display: flex; align-items: center; gap: .65rem; min-width: 10rem; }
.countries .country-identity > span { max-width: 24rem; white-space: normal; overflow-wrap: anywhere; }
.countries .flag { flex-shrink: 0; }
.countries-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; padding-top: 1rem; }
.countries-foot p, .countries-foot .pager { margin: 0; }
.countries-empty { padding: 1.5rem 0; border-top: 1px solid var(--line-2); }
.countries-empty h2 { margin: 0; }
/* Keep every sortable column available inside a keyboard-scrollable region. */
.maps .table-wrap, .players .table-wrap { max-width: 100%; }
.maps th, .players th { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.maps .filters, .players .filters { padding: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); gap: 1rem; }
.list-search { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; min-width: 0; }
.list-search label { color: var(--text-2); font-weight: 500; }
.list-search input { min-width: 0; width: 20rem; max-width: 100%; }
.maps .list-search { width: 100%; }
.list-filter-options { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; width: 100%; }
.filter-label { color: var(--text-3); margin-right: .25rem; align-self: center; }
.maps .tier-filter { align-items: center; }
.maps .tier-filter a { opacity: 1; padding: .4rem; border: 1px solid transparent; border-radius: var(--radius); }
.maps .tier-filter a.active { border-color: var(--focus); background: var(--brand-soft); }
.list-map { display: flex; align-items: center; gap: .65rem; min-width: 13rem; }
.list-map > span:last-child { min-width: 0; max-width: 22rem; white-space: normal; overflow-wrap: anywhere; }
.map-catalogue { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1rem; padding: 0; margin: 1.5rem 0; list-style: none; }
.catalogue-card { min-width: 0; border-bottom: 1px solid var(--line); }
.catalogue-shot { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--panel-2); border-radius: var(--radius); overflow: hidden; color: var(--text-3); font-size: .85rem; }
.catalogue-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.catalogue-shot .tier { position: absolute; top: .6rem; right: .6rem; }
.catalogue-card .info { padding: .8rem 0; }
.catalogue-card .name { display: block; font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.catalogue-card .line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem .75rem; margin-top: .5rem; font-size: .85rem; color: var(--text-3); }
.catalogue-card .line > span { min-width: 0; overflow-wrap: anywhere; }
.catalogue-card .t { color: var(--text); font-weight: 600; }
@media (max-width: 1000px) {
  .map-catalogue { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .map-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .maps .filters, .players .filters { padding: .75rem; }
  .list-search { width: 100%; }
  .list-search label { flex-basis: 100%; }
  .list-search input { flex: 1; width: 0; }
  .list-filter-options .spacer { display: none; }
  .list-filter-options .seg { flex: none; }
  .maps .tier-filter { gap: .1rem; }
  table.maps.full th, table.maps.full td, table.players th, table.players td { padding-left: .5rem; padding-right: .5rem; }
}

/* ---- Full map, stage, checkpoint and bonus leaderboards ---- */
article.board { min-width: 0; }
.board-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: .5rem; }
.board-context { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; color: var(--text-2); }
.board-context > a { min-width: 0; overflow-wrap: anywhere; font-size: 1.2rem; font-weight: 600; }
article.board .page-head { flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .5rem; }
article.board .page-head h1 { overflow-wrap: anywhere; }
.board-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.board-controls nav { min-width: 0; max-width: 100%; }
.board-controls .stepper { flex-wrap: wrap; }
.board-controls .step, .board-controls select, .board-controls .replay-link { min-height: 44px; }
.board-controls .step { min-width: 44px; }
.board-controls .replay-link { display: inline-flex; align-items: center; }
.board-note { max-width: 48rem; margin: 1.25rem 0 .75rem; }
article.board .table-wrap { position: relative; max-width: 100%; }
article.board table { min-width: 48rem; border: 0; background: none; }
article.board th { background: none; text-transform: none; letter-spacing: 0; font-size: .85rem; }
article.board a.player { min-height: 44px; }
article.board a.player .name { max-width: 24rem; white-space: normal; overflow-wrap: anywhere; }
article.board .icon-btn { width: 44px; height: 44px; }
.board-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; padding-top: 1rem; }
.board-foot p, .board-foot .pager { margin: 0; }
.board-foot .pager { flex-wrap: wrap; gap: .75rem; }
.board-foot .btn { min-height: 44px; }
.board-empty { padding: 1.5rem 0; border-top: 1px solid var(--line-2); }
.board-empty h2 { margin: 0; }
.board-empty .btn { min-height: 44px; }

/* ---- Combined search ---- */
.search-form { padding: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.search-form p { margin: .65rem 0 0; color: var(--text-3); font-size: .9rem; }
.search-form input, .search-form button { min-height: 44px; }
.search-summary { color: var(--text-3); overflow-wrap: anywhere; }
.search-summary strong { color: var(--text-2); }
.search-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.search-results section { min-width: 0; margin-top: 1rem; }
.search-result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; border-bottom: 1px solid var(--line-2); }
.search-result-head h2 { margin: 0; }
.search-result-head > a { display: inline-flex; align-items: center; min-height: 44px; }
.search-empty { padding: 1rem 0; color: var(--text-3); }
.search-results table { table-layout: fixed; border: 0; background: none; }
.search-results th { background: none; text-transform: none; letter-spacing: 0; }
.search-results th:last-child { width: 7rem; }
.search-results td { white-space: normal; }
.search-results td.player-cell { min-width: 0; }
.search-results a.player, .search-map { display: flex; align-items: center; gap: .65rem; min-height: 44px; }
.search-results a.player .name, .search-map > span:last-child { min-width: 0; max-width: none; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .search-results { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@media (max-width: 720px) {
  .search-form { padding: .75rem; }
  .search-results th:last-child { width: 6rem; }
}

/* The "see all" control that ends a section heading. */
.see-all { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: .4rem; flex: none; min-height: 36px; padding: .35rem .8rem; color: var(--text-2); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 999px; font: 600 .82rem/1.2 var(--font); white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.see-all svg { color: var(--link); transition: transform .15s; }
.see-all:hover { text-decoration: none; color: var(--text); border-color: var(--brand); background: var(--panel-3); }
.see-all:hover svg { transform: translateX(2px); }
h2 .count + .see-all { margin-left: .9rem; }
@media (prefers-reduced-motion: reduce) { .see-all, .see-all svg { transition: none; } .see-all:hover svg { transform: none; } }

/* "Back to ..." links above a page heading: a quiet pill with a chevron,
   one look for every detail page. */
.map-back, .board-back, .replay-return, .run-return { gap: .4rem; padding: 0 .85rem 0 .65rem; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); font-size: .88rem; font-weight: 600; transition: color .15s, border-color .15s; }
.map-back::before, .board-back::before, .replay-return::before, .run-return::before { content: ''; width: .45em; height: .45em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: .1rem; }
.map-back:hover, .board-back:hover, .replay-return:hover, .run-return:hover { text-decoration: none; color: var(--text); border-color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .map-back, .board-back, .replay-return, .run-return { transition: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Map WR history: tighter numbers, a gold "still holding" figure. */
.history td.held { text-align: right; font-family: var(--num); color: var(--text-2); white-space: nowrap; }
.history td.held .held-now { color: var(--wr); font-weight: 700; }
.history td.time .d.faster { font-weight: 600; }
.history td.actions { width: 3rem; }

/* ---- Touch, motion, busy ---- */
section[aria-busy='true'] { opacity: .55; transition: opacity .15s; }
@media (pointer: coarse) {
  .icon-btn { width: 2.5rem; height: 2.5rem; }
  .pager.compact a, .pager.compact .off { min-width: 2.6rem; height: 2.6rem; }
  .seg a { padding: .65rem .9rem; }
}
@media (max-width: 720px) { .map-cell .thumb { display: none; } .map-cell { min-width: 0; } .map-cell .holder { display: block; } table.index td.rec, table.index th:nth-child(3), table.index th:nth-child(5), table.index td.actions { display: none; } .feed li { grid-template-columns: minmax(0, 1fr); } .feed .time-group { justify-self: start; } .home-hero .find .mine { flex: 1 1 100%; text-align: center; } main { padding: 1rem; } .feed-map { max-width: 9rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .card:has(.shot:hover, .info:hover) { transform: none; } }

/* ---- Servers ----
   One row per mode, EU and US side by side: both regions run the same
   setups, so a player picks the mode and then the nearer region. */
.servers { --mode-col: 11rem; }
.servers-intro { max-width: 46rem; margin: 0 0 1.5rem; }
.servers .region-head, .servers .mode-row { display: grid; grid-template-columns: var(--mode-col) minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; }
.servers .region-head { padding: .75rem 0; background: var(--bg); border-bottom: 1px solid var(--line-2); }
.servers .region { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-weight: 600; color: var(--text-2); }
.servers .region .flag { height: .9em; }
.servers .region .count { margin-left: auto; color: var(--text-3); font-size: .9rem; font-weight: 400; }
.servers .mode .num { color: var(--brand-light); margin-right: .2rem; }
.servers .mode .group { display: block; margin-top: .35rem; font: 400 .9rem/1.3 var(--font); color: var(--text-3); }
.servers .mode-row { padding: 1.25rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.servers .mode-row:last-child { border-bottom: 0; }
.servers .mode { margin: 0; font-size: 1.05rem; line-height: 1.4; font-weight: 600; color: var(--text-2); }
.srv { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .9rem; align-items: start; min-width: 0; }
.srv.none { display: block; color: var(--text-3); }
.srv .plate { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--panel); border: 1px solid var(--line-2); }
.srv .plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srv .plate-empty { padding: .4rem; color: var(--text-4); font-size: .8rem; text-align: center; }
.srv .info { min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.srv .sid { font-weight: 600; font-size: .9rem; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.srv .sid .flag { height: .8em; }
.srv .server-region { display: none; color: var(--text-3); font-weight: 400; }
.srv .what { min-width: 0; }
.srv .map { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; color: var(--text-2); font-weight: 600; overflow-wrap: anywhere; }
.srv .map a { min-width: 0; overflow-wrap: anywhere; }
.srv .foot { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; }
.srv .count { display: flex; flex: 1 1 6rem; flex-direction: column; gap: .4rem; }
.srv .count .n { font-family: var(--num); font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.srv .count .of { color: var(--text-3); font-size: .85rem; font-weight: 400; }
.srv .gauge { height: 3px; max-width: 7rem; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.srv .gauge > span { display: block; height: 100%; background: var(--brand); }
.srv .connect { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; white-space: nowrap; padding: .4rem .8rem; font-size: .9rem; margin-left: auto; }
.servers-empty { padding: 1.5rem 0; border-top: 1px solid var(--line-2); }
.servers-empty h2 { margin: 0; }
@media (max-width: 1100px) {
  .servers { --mode-col: 9rem; }
  .srv { grid-template-columns: 5rem minmax(0, 1fr); gap: .75rem; }
}
@media (max-width: 900px) {
  .servers .region-head { display: none; }
  .servers .mode-row { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .srv { grid-template-columns: 7rem minmax(0, 1fr); }
  .srv .server-region { display: inline; }
  .srv.none { display: none; }
}
@media (max-width: 480px) {
  .srv { grid-template-columns: 5rem minmax(0, 1fr); gap: .65rem; }
}
.home-hero .live a { color: var(--text-2); }
.home-hero .live .dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--pb); margin-right: .4rem; vertical-align: .05em; }

.profile-tabs { display:flex; flex-wrap:wrap; gap:1rem; padding:1rem; border-bottom:1px solid var(--border); }
.profile-tabs a[aria-current="page"] { font-weight:700; text-decoration:underline; text-underline-offset:.4rem; }

/* Surf style is page context, kept visible below the shared navigation. */
.style-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:1360px; margin:0 auto; padding:.65rem 2rem; border-bottom:1px solid var(--line); }
.style-picker { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin:0; }
.style-picker label { color:var(--text-2); font-weight:500; }
.style-picker select { min-height:44px; max-width:100%; padding:.5rem 2rem .5rem .7rem; background:var(--panel); color:var(--text); border:1px solid var(--line-2); border-radius:6px; font:inherit; }
.style-picker .btn { min-height:44px; }
.style-picker select:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
@media (max-width:600px) { .style-bar { align-items:flex-start; } .style-bar > span { display:none; } }

@media (max-width:720px) { .style-bar { padding-inline:1rem; } }