/* Stuntboost Leaderboard: styles modelled on the game's own menus. */

/* Fonts: latin + latin-ext subsets; other scripts (CJK, Cyrillic) fall back to system fonts. */
@font-face { font-family: Lexend; font-weight: 400; font-display: swap; src: url(../fonts/lexend-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Lexend; font-weight: 400; font-display: swap; src: url(../fonts/lexend-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Lexend; font-weight: 700; font-display: swap; src: url(../fonts/lexend-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Lexend; font-weight: 700; font-display: swap; src: url(../fonts/lexend-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Lexend; font-weight: 900; font-display: swap; src: url(../fonts/lexend-latin-900-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Lexend; font-weight: 900; font-display: swap; src: url(../fonts/lexend-latin-ext-900-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Rubik Distressed"; font-display: swap; src: url(../fonts/rubik-distressed-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rubik Distressed"; font-display: swap; src: url(../fonts/rubik-distressed-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Permanent Marker"; font-display: swap; src: url(../fonts/permanent-marker-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: DSEG7; font-display: swap; src: url(../fonts/DSEG7Classic-BoldItalic.woff2) format("woff2"); }

:root {
  --ink: #0d0c12;
  --panel: rgba(0, 0, 0, .5);
  --panel-strong: rgba(0, 0, 0, .68);
  --lime: #e8f06a;
  --red: #c8341c;
  --amber: #f2a93b;
  --highlight: rgba(255, 255, 255, .93);
  --muted: #a9a6b3;
  --text: #fff;
}

* { box-sizing: border-box; }
/* Everything is sized in rem, so it all scales with this. Unchanged up to 1920px wide, then grows
   with the screen: about 1.33x at 2560px (1440p, or 4K at 150%) and 2x at 3840px (4K at 100%). */
html { background: var(--ink); color-scheme: dark; font-size: clamp(100%, calc(100% + (100vw - 120rem) / 120), 200%); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: Lexend, system-ui, sans-serif; font-size: 0.9375rem; line-height: 1.4; color: var(--text); }
a { color: inherit; }
a:hover { color: var(--lime); }
:focus-visible { outline: 0.1875rem solid var(--lime); outline-offset: 0.125rem; }
img { max-width: 100%; }
main { flex: 1; }

/* Background art: the page's image, blurred, under a dark gradient */
.page-bg { position: fixed; top: -0.75rem; left: -0.75rem; width: calc(100% + 1.5rem); height: calc(100% + 1.5rem); object-fit: cover; z-index: -3; filter: blur(0.3125rem) saturate(1.1); }
.page-leak { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; mix-blend-mode: screen; pointer-events: none; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(16, 14, 24, .55) 0, rgba(16, 14, 24, .93) 20rem); }
body.home::before { background: rgba(13, 12, 18, .7); }

/* Top bar and search */
.topbar { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 73.75rem; margin: 0 auto; padding: 0.625rem 1rem; }
.brand img { display: block; height: 2.5rem; width: auto; }
.topsearch { margin-left: auto; position: relative; width: min(16.25rem, 55vw); }
.search-box { position: relative; }
input[name=q], input[name=find] { width: 100%; background: var(--panel-strong); border: 0.125rem solid #444; border-radius: 0; color: #fff; padding: 0.4375rem 0.625rem; font: inherit; }
input:focus { border-color: var(--lime); outline: none; }
.suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; background: #16141f; border: 0.125rem solid #444; border-top: 0; }
.suggest[hidden] { display: none; }
.suggest a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.625rem; text-decoration: none; overflow-wrap: anywhere; }
.suggest a:hover, .suggest a:focus { background: rgba(232, 240, 106, .15); }
.suggest small { color: var(--muted); white-space: nowrap; }

/* Shared type */
.wrap { max-width: 73.75rem; margin: 0 auto; padding: 0.75rem 1rem 2rem; }
.skate { display: inline-block; font-family: "Rubik Distressed", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; transform: skewX(-12deg); }
.title { font-size: clamp(1.875rem, 6vw, 3rem); line-height: 1.05; margin: 0.25rem 0 0.375rem; text-shadow: 0.25rem 0.25rem 0 var(--red); overflow-wrap: anywhere; }
.h { font-size: 1.25rem; margin: 1.125rem 0 0.5rem; }
.crumb { font-size: 0.75rem; color: #bbb; letter-spacing: .12em; text-transform: uppercase; }
.crumb a { text-decoration: none; }
.crumb b { color: var(--lime); }
.stats { font-weight: 700; font-style: italic; color: #ddd; margin: 0 0 0.75rem; overflow-wrap: anywhere; }
.marker { font-family: "Permanent Marker", cursive; }
.lcd { font-family: DSEG7, Lexend, monospace; font-size: .95em; color: var(--lime); white-space: nowrap; }
.empty { color: var(--muted); font-style: italic; }
.code { color: var(--lime); font-weight: 900; font-style: italic; }
.first .code, .ev.wr .code { color: var(--red); }
.notice { background: var(--panel); padding: 0.75rem 0.875rem; border-left: 0.25rem solid var(--lime); }
.btn { display: inline-block; background: var(--lime); color: var(--ink); border: 0; padding: 0.4375rem 0.875rem; font: inherit; font-weight: 900; font-style: italic; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { background: #fff; color: var(--ink); }

/* Level page */
.two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.tools { display: flex; gap: 0.375rem; margin-bottom: 0.375rem; }
.lb { width: 100%; border-collapse: separate; border-spacing: 0 0.1875rem; }
.lb td { background: var(--panel); padding: 0.4375rem 0.625rem; }
.lb .p { width: 3.5em; font-weight: 900; font-style: italic; }
.lb .who { overflow-wrap: anywhere; }
.lb .who a { text-decoration: none; }
.lb .t { text-align: right; }
.lb .d { color: var(--muted); font-size: 0.75rem; text-align: right; white-space: nowrap; }
.lb tr.first td { background: var(--highlight); color: var(--ink); }
.lb tr.first .lcd { color: var(--red); }
.lb tr.first .d { color: #555; }
.lb tr.hl td { box-shadow: inset 0 0.125rem 0 var(--lime), inset 0 -0.125rem 0 var(--lime); }
img.medal { width: 1.375rem; height: 1.375rem; vertical-align: middle; }
img.medal.big { width: 2rem; height: 2rem; }
span.medal.none { display: inline-block; width: 1.375rem; height: 1.375rem; vertical-align: middle; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; margin-top: 0.625rem; font-weight: 700; font-style: italic; }
.pager a, .pager b, .pager .gap { padding: 0.25rem 0.5625rem; background: var(--panel); text-decoration: none; }
.pager b { background: var(--lime); color: var(--ink); }
.medals { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.medal-row { display: flex; gap: 0.625rem; align-items: center; background: var(--panel); padding: 0.5rem 0.75rem; border-bottom: 0.1875rem solid var(--ink); }
.medal-row .any { font-weight: 900; font-style: italic; color: var(--lime); }
.medal-row .sub { font-size: 0.75rem; font-style: italic; color: var(--muted); }
.graph { background: var(--panel); padding: 0.625rem; min-height: 11.25rem; }
.graph .uplot { font-family: Lexend, sans-serif; }
.graph .u-legend { color: var(--muted); font-size: 0.75rem; }

/* Home */
.hero { text-align: center; padding: 1.5rem 0 0.5rem; }
.hero .logo { width: min(32.5rem, 90%); height: auto; }
.hero .tag .fan { color: #fff; text-shadow: 0.125rem 0.125rem 0 var(--red); }
.hero .tag { display: inline-block; margin: 0; font-size: 1.25rem; color: var(--lime); transform: rotate(-2deg); }
.home-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.rooms { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
.room { position: relative; display: block; height: 7.5rem; overflow: hidden; border-bottom: 0.25rem solid var(--ink); filter: saturate(.75) brightness(.8); }
.room img { display: block; width: 100%; height: 100%; object-fit: cover; }
.room span { position: absolute; left: 0.5rem; bottom: 0.375rem; font-size: 0.9375rem; text-shadow: 0.125rem 0.125rem 0 #000; }
.room.on, .room:hover { filter: none; outline: 0.1875rem solid var(--lime); outline-offset: -0.1875rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: 0.5rem; margin-top: 0.625rem; }
.card { display: block; background: var(--panel); border-bottom: 0.1875rem solid var(--ink); text-decoration: none; }
.card img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.card .info { padding: 0.375rem 0.5625rem 0.5rem; font-size: 0.8125rem; }
.card .name { font-weight: 900; font-style: italic; }
.card .wr { display: flex; justify-content: space-between; gap: 0.375rem; margin-top: 0.125rem; color: #bbb; }
.card .wr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.off { opacity: .55; }
a.card:hover { outline: 0.125rem solid var(--lime); }
.feed { list-style: none; margin: 0; padding: 0; background: var(--panel); }
.ev { display: flex; gap: 0.5rem; align-items: center; padding: 0.4375rem 0.625rem; font-size: 0.8125rem; border-bottom: 0.125rem solid var(--ink); }
.ev .what { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ev .what a { text-decoration: none; }
.ev .player { font-weight: 700; }
.ev .on { color: var(--muted); }
.ev time { color: #888; font-size: 0.6875rem; white-space: nowrap; }
.ev.wr { background: var(--highlight); color: var(--ink); }
.ev.wr .lcd { color: var(--red); }
.ev.wr .on, .ev.wr time { color: #555; }
.badge { background: var(--red); color: #fff; padding: 0.125rem 0.375rem; font-size: 0.6875rem; font-weight: 900; font-style: italic; }

/* Player page */
.stats-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.st { display: flex; gap: 0.625rem; align-items: center; background: var(--panel); border-bottom: 0.1875rem solid var(--ink); padding: 0.5rem 0.875rem; }
.st .v { font-size: 1.375rem; line-height: 1.1; font-weight: 900; font-style: italic; }
.st .v small { font-size: 0.8125rem; color: var(--muted); }
.st .k { font-size: 0.6875rem; color: var(--muted); }
.st.first { background: var(--highlight); color: var(--ink); }
.st.first .k { color: #555; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.375rem; }
.tab { background: var(--panel); color: #bbb; padding: 0.3125rem 0.6875rem; font-size: 0.75rem; font-weight: 900; font-style: italic; text-transform: uppercase; text-decoration: none; }
.tab.on { background: var(--lime); color: var(--ink); }
.tab.sort { margin-left: auto; }
.prow { margin-bottom: 0.1875rem; }
.prow summary { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 6.875rem 1.625rem 5.625rem 4.375rem; gap: 0.625rem; align-items: center; background: var(--panel); padding: 0.3125rem 0.625rem 0.3125rem 0.3125rem; font-size: 0.875rem; list-style: none; cursor: pointer; }
.prow summary::-webkit-details-marker { display: none; }
.prow .thumb { display: block; width: 4rem; height: 1.875rem; object-fit: cover; }
.prow .nm, .prow .pl { font-weight: 900; font-style: italic; overflow-wrap: anywhere; }
.prow .pl small { color: var(--muted); font-weight: 400; }
.prow .lcd { text-align: right; }
.prow .gap { color: var(--muted); font-size: 0.75rem; text-align: right; }
.prow.first summary { background: var(--highlight); color: var(--ink); }
.prow.first .lcd { color: var(--red); }
.prow.first .pl small, .prow.first .gap { color: #555; }
.prow[open] summary { outline: 0.125rem solid var(--lime); outline-offset: -0.125rem; }
.expand { background: var(--panel-strong); padding: 0.625rem; }
.expand .cap { margin: 0 0 0.375rem; font-size: 0.75rem; color: var(--muted); }
.results { list-style: none; padding: 0; }
.results li { display: flex; justify-content: space-between; gap: 0.5rem; background: var(--panel); padding: 0.5rem 0.75rem; margin-bottom: 0.1875rem; overflow-wrap: anywhere; }
.results small { color: var(--muted); white-space: nowrap; }

/* Frame */
.stale { background: var(--red); color: #fff; text-align: center; padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 700; }
.footer { text-align: center; color: #888; font-size: 0.75rem; padding: 1.125rem 1rem 1.5rem; }

@media (max-width: 800px) {
  .two, .home-grid { grid-template-columns: minmax(0, 1fr); }
  .room { height: 4.5rem; }
  .room span { left: 0.25rem; font-size: 0.6875rem; }
}
@media (max-width: 560px) {
  .lb .d { display: none; }
  .prow summary { grid-template-columns: minmax(0, 1fr) auto 1.375rem auto; }
  .prow .thumb, .prow .gap { display: none; }
  .brand img { height: 1.875rem; }
  .tab.sort { margin-left: 0; }
}

/* Overall ranking */
.topnav a { font-weight: 900; font-style: italic; text-transform: uppercase; text-decoration: none; font-size: 0.8125rem; }
.lb th { text-align: left; font-size: 0.6875rem; font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 0 0.625rem; }
.lb .avg, .ev .avg { font-weight: 900; font-style: italic; text-align: right; white-space: nowrap; }
/* Headers line up with their columns but keep the header style. */
.lb th.avg, .lb th.d { text-align: right; font-size: 0.6875rem; font-weight: 700; font-style: normal; }
.ev .rank { font-weight: 900; font-style: italic; width: 1.8em; }
.more { margin: 0.5rem 0 0; }

/* Graphs: small charts open a large, zoomable view */
.graph { position: relative; }
.graph-zoomable .u-over { cursor: zoom-in; }
.graph-expand { position: absolute; top: 0.375rem; right: 0.375rem; z-index: 2; width: 1.875rem; height: 1.875rem; border: 0; background: var(--panel-strong); color: var(--lime); font: inherit; font-size: 1.125rem; line-height: 1; cursor: pointer; }
.graph-expand:hover, .graph-expand:focus-visible { background: var(--lime); color: var(--ink); }
body.modal-open { overflow: hidden; }
.graph-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(5, 4, 10, .82); }
.graph-modal-box { display: flex; flex-direction: column; width: min(87.5rem, 92vw); height: min(51.25rem, 82vh); background: #14121c; border-bottom: 0.25rem solid var(--ink); box-shadow: 0.375rem 0.375rem 0 var(--red); padding: 0.875rem 1rem 0.625rem; }
.graph-modal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; margin-bottom: 0.5rem; }
.graph-modal-head .h { margin: 0; font-size: 1.375rem; }
.graph-modal-hint { color: var(--muted); font-size: 0.75rem; font-style: italic; }
.graph-modal-controls { display: flex; gap: 0.375rem; margin-left: auto; }
.graph-modal-controls button { min-width: 2.375rem; height: 2.125rem; padding: 0 0.625rem; border: 0; background: var(--panel-strong); color: #fff; font: inherit; font-weight: 900; font-style: italic; cursor: pointer; }
.graph-modal-controls button:hover, .graph-modal-controls button:focus-visible { background: var(--lime); color: var(--ink); }
.graph-modal-chart { flex: 1; min-height: 0; }
.graph-modal-chart .u-over { cursor: crosshair; touch-action: none; }
.graph-modal-chart .uplot { font-family: Lexend, sans-serif; }
.graph-modal-chart .u-legend { color: var(--muted); font-size: 0.8125rem; }
@media (max-width: 560px) {
  .graph-modal { padding: 0.375rem; }
  .graph-modal-box { width: 100%; height: 88vh; padding: 0.625rem; }
  .graph-modal-hint { display: none; }
}
/* Announcement banner (set from /admin), directly under the top bar. */
.banner { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.5rem 2.75rem; font-size: 0.875rem; font-weight: 700; text-align: center; }
.banner p { margin: 0; }
.banner a { color: inherit; text-decoration: underline; }
.banner-info { background: var(--lime); color: var(--ink); }
.banner-warning { background: var(--amber); color: var(--ink); }
.banner-close { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 1.75rem; height: 1.75rem; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.banner-close:hover, .banner-close:focus-visible { background: rgba(0, 0, 0, .15); }
@media (max-width: 600px) { .banner { padding: 0.5rem 2.5rem 0.5rem 0.75rem; text-align: left; justify-content: flex-start; } }
/* Admin console */
.admin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.admin-head .title { margin-right: auto; }
.admin-range { margin: 0; }
.admin-section { margin: 1.5rem 0; }
.admin-section h3 { margin: 1rem 0 0.375rem; font-size: 0.9375rem; color: var(--muted); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 1.5rem; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--panel); font-size: 0.875rem; }
.admin-table th, .admin-table td { padding: 0.375rem 0.625rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .06); overflow-wrap: anywhere; }
.admin-table th { color: var(--muted); font-weight: 700; }
.admin-kv th { width: 16rem; }
.admin-table code { font-size: 0.8125rem; }
.admin-chart { position: relative; background: var(--panel); padding: 0.5rem; margin-top: 0.75rem; }
.admin-login, .admin-banner { display: grid; gap: 0.75rem; max-width: 40rem; background: var(--panel); padding: 1rem; }
.admin-login label, .admin-banner label { display: grid; gap: 0.25rem; }
.admin-banner fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; }
.admin-banner fieldset label, .admin-banner .admin-check { display: flex; align-items: center; gap: 0.375rem; }
.admin-banner textarea { font: inherit; padding: 0.4375rem 0.625rem; background: var(--panel-strong); color: var(--text); border: 0.125rem solid transparent; resize: vertical; }
.admin-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.admin-actions { display: flex; gap: 0.75rem; }
.btn-ghost { background: transparent; color: var(--text); outline: 0.125rem solid var(--muted); outline-offset: -0.125rem; }
.admin-state { display: inline-block; margin: 0 0 0.5rem; padding: 0.125rem 0.5rem; font-weight: 900; font-style: italic; background: var(--panel-strong); }
.state-live { background: var(--lime); color: var(--ink); }
.state-scheduled { background: var(--amber); color: var(--ink); }
.notice-bad { border-left-color: var(--red); }

/* Supporter badge */
.sbadge { display: inline-flex; width: 0.875em; height: 0.875em; margin-left: 0.3em; vertical-align: -0.1em; }
.sbadge svg { width: 100%; height: 100%; fill: currentColor; }
.sbadge-bronze { color: #d08a4a; }
.sbadge-silver { color: #c9d1db; }
.sbadge-gold { color: #f2c14e; }
.sbadge-teal { color: #3cc6b8; }
.sbadge-purple { color: #b18cf5; }
.sbadge-red { color: #ef5f57; }

/* Support and supporters pages */
.support-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.support-actions form { margin: 0; }
.support-find { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 1rem 0; }
.support-find input { font: inherit; padding: 0.375rem 0.5rem; }
.support-results li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.support-results form { margin: 0 0 0 auto; }
.support-signout { margin-top: 1.5rem; }
.supporter-list { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; list-style: none; padding: 0; }
.admin-section .bad { color: var(--red); }

/* Supporters: header link, home panel, player page lines */
.topnav { display: flex; gap: 1rem; }
.nav-support { color: var(--lime); white-space: nowrap; }
.nav-discord { display: inline-flex; align-items: center; gap: 0.3125rem; white-space: nowrap; }
.nav-discord svg { width: 1.25em; height: 1.25em; flex: none; }
@media (max-width: 560px) {
  /* The search fills what the links leave; on the narrowest phones it moves to its own row. */
  .topbar { gap: 0.5rem 0.75rem; flex-wrap: wrap; }
  .topnav { gap: 0.75rem; }
  .topsearch { flex: 1 1 8.5rem; width: auto; }
  .nav-discord span { display: none; }
}
.supporters-panel { background: var(--panel); padding: 0.625rem 0.75rem; font-size: 0.875rem; }
.supporters-panel p { margin: 0.25rem 0 0.625rem; }
.supporters-panel .supporter-list { margin: 0 0 0.625rem; }
.supporter-thanks { margin: 0 0 0.75rem; font-weight: 700; }
.support-nudge { margin: 1.5rem 0 0; color: var(--muted); font-size: 0.8125rem; }
.supporters-panel .player, .supporter-list .player { font-weight: 700; text-decoration: none; }
.sbadge-owner { color: var(--lime); }
.admin-owner { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0.5rem 0 0; }
.support-privacy { margin-top: 1.5rem; font-size: 0.8125rem; color: var(--muted); }
.privacy p { max-width: 46rem; }
/* Player page: recent records and average place */
.recent .imp { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.ev.wr .imp { color: #555; }
.places-graph { margin-bottom: 0.5rem; }
.sbadge-custom img { display: block; width: 100%; height: 100%; object-fit: contain; }
.admin-badge { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0.5rem 0 0; }
.admin-badge-preview { display: block; width: 1.5rem; height: 1.5rem; object-fit: contain; }
.admin-maps { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0 0 0.75rem; }
.admin-maps progress { width: 12rem; }
.admin-maps-status { flex-basis: 100%; margin: 0; }
.admin-map-preview { display: block; width: 4rem; height: 2.25rem; object-fit: cover; }
/* Custom maps */
.custom-help { margin: 0.75rem 0 0.25rem; max-width: 46rem; }
.custom-help code { background: var(--panel); padding: 0 0.25rem; overflow-wrap: anywhere; }
.custom-note { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.875rem; }
.map-card .map-noart { aspect-ratio: 16 / 9; background: var(--panel); }
.map-card .downloads { color: var(--muted); font-size: 0.75rem; }
.map-card .map-download { margin-top: 0.375rem; }
@media (max-width: 560px) { .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.map-card .wr { flex-wrap: wrap; }
.map-card .wr span { white-space: normal; overflow-wrap: anywhere; }
.map-card .updated { color: var(--muted); font-size: 0.75rem; }
.admin-map-update summary { cursor: pointer; }
.admin-map-update .admin-maps { margin-top: 0.5rem; }
.overall-options { gap: 0.375rem 1rem; margin-bottom: 0.75rem; }
.overall-options .opt-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.overall-options .tabs-label { color: var(--muted); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 0.25rem; }
@media (max-width: 560px) { .overall .lb .d.wrs { display: table-cell; } }
/* Read by screen readers and search engines, not shown */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Player comparison */
.compare .c1 { --pc: #e8f06a; }
.compare .c2 { --pc: #ffffff; }
.compare .c3 { --pc: #6ad8f0; }
.compare .c4 { --pc: #f06ab4; }
.cmp-start { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0; }
/* Favourite players */
.fav-form { margin: 0; }
.btn.fav-on { background: var(--highlight); color: var(--ink); }
.feed.favourites .avg { color: var(--muted); font-size: 0.75rem; }
/* Oldest records page */
.oldest .lb .lvl a { text-decoration: none; }
.oldest .lb .lvl .code { color: var(--muted); margin-right: 0.25rem; }
.oldest .lb tr.first .lvl .code { color: #555; }
@media (max-width: 560px) { .oldest .lb .d.age { display: table-cell; } }
.cmp-players { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.cmp-chip { display: inline-flex; align-items: center; gap: 0.375rem; background: var(--panel); border-left: 0.25rem solid var(--pc); padding: 0.3125rem 0.5rem; font-weight: 700; }
.cmp-remove { color: var(--muted); text-decoration: none; font-size: 1.125rem; line-height: 1; padding: 0 0.125rem; }
.cmp-remove:hover { color: var(--pc); }
.cmp-add { position: relative; flex: 1 1 12rem; max-width: 18rem; }
.cmp-add input:not([type=hidden]) { width: 100%; }
.cmp-summary { width: 100%; border-collapse: collapse; background: var(--panel); font-size: 0.875rem; margin-bottom: 0.5rem; }
.cmp-summary th, .cmp-summary td { padding: 0.375rem 0.5rem; text-align: right; }
.cmp-summary th[scope=row] { text-align: left; color: var(--muted); font-weight: 400; white-space: nowrap; }
.cmp-summary thead th { color: var(--pc); font-weight: 900; font-style: italic; overflow-wrap: anywhere; }
.cmp-summary tbody tr + tr { border-top: 1px solid rgba(255,255,255,.06); }
.cmp-summary .medal { width: 1rem; height: 1rem; vertical-align: -0.1875rem; }
.cmp-room { margin: 1rem 0 0.375rem; font-size: 1rem; }
.cmp-row { margin-bottom: 0.1875rem; }
.cmp-row summary { display: grid; gap: 0.5rem; align-items: center; background: var(--panel); padding: 0.375rem 0.625rem; font-size: 0.875rem; list-style: none; cursor: pointer; }
.cmp-row summary::-webkit-details-marker { display: none; }
.cmp-n2 .cmp-row summary { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
.cmp-n3 .cmp-row summary { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
.cmp-n4 .cmp-row summary { grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); }
.cmp-level { font-weight: 900; font-style: italic; text-decoration: none; overflow-wrap: anywhere; }
.cmp-cell { text-align: right; white-space: nowrap; }
.cmp-cell .lcd { color: #8f8c99; } /* dimmer than any player colour, so best times stand out (player 2 is white) */
.cmp-cell.best .lcd { color: var(--pc); }
.cmp-cell small { color: var(--muted); }
.cmp-cell .gap { display: block; color: var(--muted); font-size: 0.75rem; }
.cmp-cell.none { color: var(--muted); }
@media (max-width: 560px) {
  .cmp-level .nm { display: none; }
  .cmp-row summary { gap: 0.375rem; padding: 0.375rem 0.5rem; font-size: 0.75rem; }
  .cmp-n2 .cmp-row summary { grid-template-columns: 2.25rem repeat(2, minmax(0, 1fr)); }
  .cmp-n3 .cmp-row summary { grid-template-columns: 2.25rem repeat(3, minmax(0, 1fr)); }
  .cmp-n4 .cmp-row summary { grid-template-columns: 2.25rem repeat(4, minmax(0, 1fr)); }
  .cmp-cell small { display: block; }
  .cmp-summary { font-size: 0.75rem; }
  .cmp-summary th, .cmp-summary td { padding: 0.3125rem 0.25rem; }
}
/* Accounts */
/* Top right of the header, after the search: the usual place for an account. Upright text, so nothing is clipped. */
.nav-account { flex: none; max-width: 12rem; padding: 0.4375rem 0.75rem; background: var(--panel); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 0.8125rem; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-account:hover, .nav-account:focus-visible { border-color: var(--lime); color: var(--lime); }
.account .title { margin-bottom: 1.5rem; }
/* .skate headings are inline-block: keep "Your players" on its own line under the name. */
.account .skate.h { display: table; }
.account .claims { list-style: none; padding: 0; margin: 0 0 1rem; background: var(--panel); }
.account .claims li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; }
.account .claims li + li { border-top: 1px solid rgba(255,255,255,.06); }
.account .claims form { margin-left: auto; }
.account-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
/* A plain monospace font: the LCD font can't draw letters, and players must type the code exactly. */
.claim-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; font-size: 2rem; color: var(--lime); letter-spacing: 0.08em; background: var(--panel); padding: 0.5rem 1rem; display: inline-block; }
.claim-note { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--muted); }
@media (max-width: 560px) { .nav-account { margin-left: auto; max-width: 8rem; padding: 0.375rem 0.625rem; } }

/* Wiki: the official wiki, contents list beside it (above it on phones) */
.wiki-grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.wiki-toc { position: sticky; top: 0.75rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; background: var(--panel); padding: 0.25rem 0.875rem 0.75rem; font-size: 0.875rem; }
.wiki-toc .h { margin-top: 0.5rem; }
.wiki-toc ol { list-style: none; margin: 0; padding: 0; }
.wiki-toc li { margin: 0.25rem 0; }
.wiki-toc > ol > li > a { font-weight: 700; }
.wiki-toc ol ol { padding-left: 0.75rem; border-left: 0.125rem solid #444; margin: 0.25rem 0 0.375rem; }
.wiki-toc a { text-decoration: none; }
.wiki-body { max-width: 50rem; }
.wiki-body p, .wiki-body ul { margin: 0.25rem 0 0.625rem; }
.wiki-body ul { padding-left: 1.25rem; }
.wiki-body li { margin: 0.125rem 0; }
.wiki-body a { color: var(--lime); }
.wiki-body a:hover { color: #fff; }
.wiki-body code { background: var(--panel-strong); padding: 0 0.25rem; }
.wiki-sec { scroll-margin-top: 0.75rem; }
.wiki-sec h2, .wiki-sec h3, .wiki-sec h4 { scroll-margin-top: 0.75rem; }
.wiki-d0 { margin-bottom: 1.5rem; }
.wiki-d0 > .h { margin-top: 0.5rem; }
.wiki-d1 { background: var(--panel); padding: 0.5rem 0.875rem 0.25rem; margin: 0 0 0.375rem; border-left: 0.25rem solid var(--lime); }
.wiki-d1 > h3 { margin: 0.125rem 0 0.25rem; font-size: 1rem; font-weight: 900; font-style: italic; }
.wiki-d2 { padding: 0.25rem 0 0 0.75rem; margin: 0.25rem 0 0.5rem; border-left: 0.125rem solid #555; }
.wiki-d2 h4 { margin: 0 0 0.125rem; font-size: 0.9375rem; color: var(--lime); }
@media (max-width: 800px) {
  .wiki-grid { grid-template-columns: minmax(0, 1fr); }
  .wiki-toc { position: static; max-height: none; }
}