/* ============================================================================================
   style.css - the look of every screen. Markup lives in index.html (ui-templates.js stamps its <template>s).
   The sections below are marked "=== NAME ===" (search for "===" to jump between them). The file grew over time, so
   one component can have rules in several sections: LATER rules win over earlier ones at equal strength, so
   edit the last matching rule or move rules together deliberately. Never reorder rules blindly.
   Elements are found by id/class; JavaScript only toggles classes, [hidden] and data-* attributes.
   ============================================================================================ */
/* === Page base, header, footer, timer, course card, overlay (index.html: header, #course, #timer, #records, #crosshair, #speed, footer, #overlay) === */
:root{font-family:Arial,Helvetica,sans-serif;color:#eef3f4;background:#10171b;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{display:block}header,footer,#course,#timer,#records,#speed,#crosshair{position:fixed;z-index:2;pointer-events:none}header{top:30px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center}.brand{display:block}.brand img{height:34px;display:block}.status{font-size:10px;letter-spacing:2px}.status i{display:inline-block;width:6px;height:6px;background:#80e8d1;border-radius:50%;margin-right:9px}.status span{color:#899ba2;margin-left:25px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:3px;color:#80e8d1}#course{top:125px;left:36px}h2{font-size:23px;margin:10px 0}#course p{font-size:12px;color:#9aaab2}#timer{top:6px;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}#timer strong{display:block;font-size:44px;letter-spacing:-2px;font-variant-numeric:tabular-nums;margin:6px 0 0}#records{top:124px;right:36px;text-align:right;white-space:nowrap}#records div{font-size:9px;letter-spacing:2px;color:#8e9fa7;margin:3px 0}#records b{color:#e3eeed;margin-left:12px;font-size:13px;letter-spacing:0;font-variant-numeric:tabular-nums}#records .rec-wr{margin-left:12px}#records .rec-wr u{text-decoration:none;color:#ffd24a;font-size:13px;letter-spacing:0;font-variant-numeric:tabular-nums}#records .rec-wr i{font-style:normal;font-weight:700;font-size:12px;letter-spacing:0;margin-left:6px;font-variant-numeric:tabular-nums}#records i.slower{color:#ff5a5a}#records i.faster{color:#5be36b}#records i.tied{color:#ffd24a}#records .wr-plain{display:none}#records .at-wr .rec-pb,body.hud-editing.hud-records-wr #records .rec-pb{color:#ffd24a;text-shadow:0 0 8px #ffb40088}#records.mode-w .rec-s,#records:not(.mode-w) .rec-w{opacity:.45}#records i.wr-badge{margin:0;padding:1px 6px;border-radius:2px;background:#ffd24a;color:#1a1300;font-size:9px;letter-spacing:2px}#crosshair{top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;color:#fff9}#speed{bottom:80px;left:50%;transform:translateX(-50%);text-align:center}#speed strong{font-size:58px;font-variant-numeric:tabular-nums;letter-spacing:-3px}#speed>span{font-size:10px;color:#9fb4b9;margin-left:12px;letter-spacing:2px}.speed-track{width:190px;height:3px;background:#ffffff20;margin-top:8px}#speed-fill{background:#80e8d1;height:100%;width:0}footer{bottom:25px;left:36px;right:36px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#95a6ad}kbd{font-family:inherit;font-size:10px;color:#d1dcdf;border:1px solid #70808855;padding:5px 7px;margin:0 7px 0 15px}kbd:first-child{margin-left:0}footer b{color:#80e8d1;font-size:9px;font-weight:400;margin-right:14px}#overlay{position:fixed;inset:0;z-index:3;background:linear-gradient(90deg,#0c151cf7 0%,#0c151ced 40%,#0c151c55 100%);display:flex;align-items:center;padding:110px 8vw 65px}#overlay.hidden{display:none}main{max-width:620px}.hero-logo{max-width:min(560px,86vw);height:auto;display:block;margin:0 0 26px}button{border:0;background:#80e8d1;color:#102424;padding:21px 24px;font-size:12px;font-weight:800;letter-spacing:2px;width:320px;margin:20px 0;cursor:pointer;text-align:left}button:hover{background:#a4ffe9}button span{float:right;font-size:18px}.settings{width:320px;margin:3px 0 24px}label{font-size:9px;letter-spacing:1px;color:#adbac0;display:flex;align-items:center;gap:10px}input{width:100px;accent-color:#80e8d1}output{width:20px}.note{font-size:11px;line-height:1.8;color:#91a3af}aside{position:absolute;right:6vw;bottom:14%;text-align:right}aside>span{font-size:10px;letter-spacing:3px;color:#80e8d1}aside small{display:block;margin-top:10px;font-size:10px;color:#91a3af}#error{color:#ffb08e;font-size:12px}@media(max-width:800px){aside,.status,footer>span:last-child{display:none}#overlay{padding-left:7vw}#timer strong{font-size:30px}header{top:20px}#course{top:110px}#records{top:110px}}

/* Keep decorative copy from covering controls at intermediate window sizes. */
#overlay main{position:relative;z-index:1}#overlay aside{pointer-events:none}#overlay{overflow-y:auto}button:disabled{opacity:.65;cursor:wait}#error{max-width:520px;overflow-wrap:anywhere}@media(max-height:850px){#overlay{align-items:flex-start;padding-top:90px}}

/* === Menu tabs and the map controls inside them (#overlay .menu-tabs, .tab-bar, .tab-panel) === */
.map-controls{max-width:440px;display:grid;gap:10px;margin:12px 0}.map-controls label{justify-content:space-between;gap:15px}.map-controls select{max-width:280px;padding:8px;background:#20333c;border:1px solid #567078;color:#e0f2ed}.map-controls input{width:260px;font-size:11px}.map-controls p{font-size:11px;line-height:1.5;color:#a4bcbf;margin:2px 0}#startup-status{font-size:11px;margin:8px 0}#overlay main{padding-bottom:30px}#overlay{align-items:flex-start;padding-top:85px}.settings{margin-bottom:12px}
.menu-tabs{max-width:440px;margin:16px 0}
.tab-bar{display:flex;gap:2px;margin-bottom:14px}
.tab-btn{width:auto;flex:1;margin:0;padding:10px 8px;font-size:10px;letter-spacing:1px;background:#1a2a32;color:#7d94a0;border:1px solid #35505a;text-align:center}
.tab-btn.active{background:#20333c;color:#80e8d1;border-color:#80e8d1}
#leaderboard-panel .lb-chips .lb-check{font-weight:800;letter-spacing:2px;display:inline-flex;flex:0 0 auto;width:auto;align-items:center;gap:6px;cursor:pointer}
#leaderboard-panel .lb-chips .lb-check input{width:auto;flex:none;margin:0;accent-color:#0a1116}
.tab-panel[hidden]{display:none}
.tab-panel .control-panel{margin-top:0}
/* === HUD: FPS counter, player list, run notices, CGaz canvas, replay bar === */
#fps{position:fixed;top:82px;right:36px;z-index:2;font:12px monospace;color:#80e8d1;pointer-events:none}
#player-list{position:fixed;top:250px;right:36px;z-index:2;pointer-events:none;background:#0c151cb0;border:1px solid #35505a;padding:8px 12px;min-width:120px}
#player-list[hidden]{display:none}
.player-list-header{font-size:9px;letter-spacing:1px;color:#80e8d1;margin-bottom:6px}
.player-row{display:flex;align-items:center;gap:8px;font-size:11px;color:#eef3f4;margin:3px 0}
.player-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.player-id{color:#fff}
#rec-indicator{position:fixed;top:30px;left:50%;transform:translateX(-50%);z-index:2;font:12px monospace;color:#ff6b6b;pointer-events:none;letter-spacing:1px}
#explore-indicator{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:2;font:12px monospace;color:#c084fc;pointer-events:none;letter-spacing:1px}
#cgaz-canvas{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
#cgaz-indicator{position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:2;font:12px monospace;color:#5eead4;pointer-events:none;letter-spacing:1px}
#taint-indicator{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:2;font:12px monospace;color:#ffb08e;pointer-events:none;letter-spacing:1px}
#replay-panel[hidden]{display:none}#replay-panel{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:10px;padding:10px 16px;background:#0c151cf0;border:1px solid #49616d}
#replay-panel button{width:auto;margin:0;padding:9px 14px;font-size:10px}
#replay-panel span{font-size:11px;color:#a4bcbf;font-variant-numeric:tabular-nums;white-space:nowrap}
#replay-scrub{width:260px;accent-color:#80e8d1}#liquid-overlay{position:fixed;inset:0;pointer-events:none;z-index:1}#mp-connect{position:relative;width:100%;padding:20px 28px;margin:22px 0 4px;font-size:22px;font-weight:900;letter-spacing:.25em;text-align:center;color:#fff;background:linear-gradient(180deg,#3fae68,#23733f);border:2px solid #80e8d1;border-radius:6px;text-shadow:0 2px 4px #0008;box-shadow:0 0 18px #80e8d166,inset 0 1px 0 #ffffff40;cursor:pointer;transition:transform .12s,filter .12s}#mp-connect:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.15)}#mp-connect:active{transform:scale(.98)}#mp-connect::after{content:"";position:absolute;inset:-6px;border-radius:9px;box-shadow:0 0 22px 4px #80e8d1;opacity:0;animation:mp-connect-pulse 1.8s ease-in-out infinite;pointer-events:none}@keyframes mp-connect-pulse{50%{opacity:.7}}#mp-connect.disconnect{background:linear-gradient(180deg,#a04444,#6a2828);border-color:#e88080}#mp-connect.disconnect::after{animation:none}#mp-connect.disconnect{display:none}#overlay #mp-disconnect-big{color:#fff;background:linear-gradient(180deg,#a04444,#6a2828);box-shadow:0 0 0 1px #e88080,0 6px 24px #e8808033;text-shadow:0 2px 4px #0008}#overlay #mp-disconnect-big:hover{filter:brightness(1.15);transform:translateY(-1px)}#mp-preview{margin:6px 0}#mp-preview .mp-player-row{padding:2px 0}.control-panel{max-width:520px;margin-top:18px;padding:14px;border:1px solid #49616d;background:#13232be8}.control-panel summary{cursor:pointer;color:#80e8d1;font-size:13px}.control-panel label{display:flex;justify-content:space-between;margin:14px 0}.control-panel input{width:120px}
/* === Settings panel: sliders, sections, groups, keybinds (.settings-section, .settings-group, .bind-*) === */
.slider-pair{display:flex;align-items:center;gap:8px}
.slider-pair input[type=number]{width:64px}
.slider-pair input[type=range]{width:110px;accent-color:#80e8d1}.control-panel input[type=file]{width:260px}.control-panel input[type=checkbox]{width:auto}.control-panel input[type=number]{color:#eef3f4;background:#263a45;border:1px solid #617a88;padding:6px}.control-panel p{font-size:11px;line-height:1.6;color:#adbac0}.control-panel pre{white-space:pre-wrap;max-height:180px;overflow:auto;font-size:11px}.bind-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;align-items:center;margin-top:14px;font-size:12px}.bind-grid button{width:100%;margin:0;padding:9px;font-size:10px;letter-spacing:0}.settings-section>button{width:auto;padding:10px;margin:10px 0;font-size:10px}
.settings-section{margin-bottom:22px}.settings-section:last-child{margin-bottom:0}
#display-section label{align-items:center;gap:14px}
.setting-name small{display:block;margin-top:3px;font-size:10px;line-height:1.45;color:#7f939b}
.settings-group{margin-top:16px}.settings-group>summary{font-size:11px;letter-spacing:1px;color:#adbac0;text-transform:uppercase;cursor:pointer}.settings-group[open]>summary{color:#80e8d1}
.settings-group-body{margin:2px 0 0 4px;padding-left:12px;border-left:1px solid #35505a}.settings-group-body label{margin:12px 0}
.settings-tip{margin:12px 0;font-size:10px;line-height:1.45;color:#7f939b}
.settings-section h4{font-size:11px;letter-spacing:1.5px;color:#80e8d1;text-transform:uppercase;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid #35505a}
.bind-cell{display:flex;gap:4px}.bind-grid .bind-add{width:auto;flex:0 0 28px;padding:9px 0}.bind-category{margin-top:14px}.bind-category summary{font-size:11px;letter-spacing:1px;color:#adbac0;text-transform:uppercase;cursor:pointer}.bind-category .bind-grid{margin-top:8px}
/* === Chat: feed, system lines, chat log (#chat-console), input box (#chat-input-wrap) === */
/* Chat fonts (assets/fonts: the complete, unmodified Google Fonts files, SIL OFL, see OFL-*.txt): the same glyphs on every OS, incl. kaomoji like ( ͡°ﻩ⌒ ͡°).
   index.html preloads all three at start (~1.7 MB, browser-cached afterwards). Arimo has Arial's metrics, so the swap from Arial moves nothing. */
@font-face{font-family:'Qrazy Arimo';src:url(assets/fonts/Arimo.ttf) format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:'Qrazy Arabic';src:url(assets/fonts/NotoSansArabic.ttf) format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Qrazy Symbols';src:url(assets/fonts/NotoSansSymbols.ttf) format('truetype');font-weight:100 900;font-display:swap}
/* Console font: JetBrains Mono (187 kB, OFL-JetBrainsMono.txt), not preloaded: the console requests it when first opened (console-controller.js). Characters it lacks (combining marks, Arabic, arc) come from the three faces above. */
@font-face{font-family:'Qrazy Mono';src:url(assets/fonts/JetBrainsMono.ttf) format('truetype');font-weight:100 800;font-display:swap}
.chat-funny-hint{color:#8ea0a8;font-weight:normal;font-size:.85em;text-shadow:none}
.chat-line:not(.chat-table),#chat-input-wrap input{font-family:'Qrazy Arimo','Qrazy Arabic','Qrazy Symbols',Arial,Helvetica,sans-serif}
#chat-history{position:fixed;left:36px;bottom:90px;z-index:4;width:640px;max-width:min(640px,calc(50vw - 170px));max-height:440px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;pointer-events:none;background:#0c151ccc;padding:6px 10px}
#chat-history[hidden]{display:none}
#chat-feed{position:fixed;left:36px;bottom:90px;z-index:2;display:flex;flex-direction:column;gap:2px;pointer-events:none;max-width:560px;user-select:none}
.chat-name{color:#fff}.chat-text{color:#3f3}.chat-text-team{color:#3ff}
#mp-spectate{width:auto;padding:9px 14px;font-size:10px;margin:2px 0}
.chat-line{font-size:16px;font-weight:bold;line-height:1.4;color:#eef3f4;text-shadow:0 1px 3px #000c;word-break:break-word}
.chat-system{color:#8ea0a8;font-style:italic}
.chat-line.race-results{color:#fff}
.chat-line.chat-heading{color:#eef3f4;font-size:18px;font-style:normal;margin-top:8px;padding-bottom:5px;border-bottom:1px solid #8ea0a880}
.chat-help-entry{margin-top:8px;font-style:normal}
.chat-help-command{color:#eef3f4}
.chat-repeated{opacity:.6;font-style:italic}
.chat-help-description{padding-left:14px;font-size:14px;font-weight:normal}
.chat-result-hint{color:#8ea0a8;font-size:13px}
.chat-results{display:inline;color:#8ea0a8;font-size:13px}
.chat-results summary{display:list-item;cursor:pointer;width:fit-content}
.chat-results .chat-system{padding-left:14px;font-size:13px;font-weight:normal}
.chat-line.chat-table,.chat-results .chat-system.chat-table{font-family:Consolas,'Courier New',monospace;font-style:normal;white-space:pre;font-size:14px}
/* the on-screen box cuts a too-wide table with an ellipsis; the chat log (scrollable) shows it whole */
#chat-feed .chat-line.chat-table{overflow:hidden;text-overflow:ellipsis}
#chat-console{position:fixed;left:36px;bottom:90px;z-index:4;width:420px;max-height:280px;background:#0c151cf0;border:1px solid #49616d;padding:10px 12px;display:flex;flex-direction:column}
#chat-console[hidden]{display:none}
#chat-console .chat-console-close{position:absolute;top:4px;right:6px;width:auto;margin:0}
.chat-console-header{font-size:10px;letter-spacing:1px;color:#80e8d1;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.chat-console-close{background:none;border:0;color:#80e8d1;font-size:16px;line-height:1;padding:0 4px;cursor:pointer}.chat-console-close:hover{color:#fff}
.chat-console-log{overflow-anchor:none;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.chat-console-log .chat-line{text-shadow:none}
#chat-input-wrap[hidden]{display:none}
#chat-input-wrap{position:fixed;left:36px;bottom:55px;z-index:5;display:flex;align-items:center;gap:8px;background:#0c151cf0;border:1px solid #80e8d1;padding:8px 12px}
#chat-input-wrap span{font-size:10px;letter-spacing:1px;color:#80e8d1}
#chat-input-wrap input{width:480px;font-size:16px;background:transparent;border:0;color:#eef3f4;accent-color:#80e8d1}
#chat-input-wrap input:focus{outline:none}
html.dev-chatfont .chat-line:not(.chat-table),html.dev-chatfont #chat-input-wrap input{font-family:var(--chat-font)}   /* /dev_chatfont (localhost): font trial for the chat box */

/* === Map/course picker (.course-picker, .course-row) and download progress === */
.course-picker{max-width:none;border:1px solid #567078;background:#20333c}
.course-picker-head{display:grid;grid-template-columns:1fr repeat(6,30px) 30px;gap:8px;padding:7px 10px;font-size:9px;letter-spacing:1px;color:#80e8d1;border-bottom:1px solid #567078}
#course-list,.course-list{max-height:220px;overflow-y:auto}
#mp-vote{margin:8px 0;padding:8px 10px;border:1px solid #80e8d1;background:#1c3a3a}#mp-vote p{margin:0 0 6px}#mp-vote button,#mp-callvote{width:auto;padding:9px 14px;font-size:10px;margin:2px 6px 2px 0}.mp-vote-head{margin:14px 0 6px;color:#80e8d1;font-size:11px;letter-spacing:1px}.mp-vote-head span{color:#9fb4b9;letter-spacing:0}
.course-row{display:grid;grid-template-columns:1fr repeat(6,30px) 30px;gap:8px;padding:7px 10px;align-items:center;font-size:11px;color:#c9d8db;border-bottom:1px solid #33474f;cursor:pointer;margin:0}
.course-row:last-child{border-bottom:0}
.course-row:hover{background:#27404a}
.course-row.selected{background:#1c3a3a;color:#80e8d1}
.course-row input{display:none}
.course-status{text-align:center}
.course-status.yes{color:#80e8d1}
.course-status.no{color:#ff8f70}
#download-progress{width:440px;height:6px;accent-color:#80e8d1;margin:4px 0}
#download-progress[hidden]{display:none}

/* === Demo mode (#demo-menu, body.demo-mode) === */
/* Demo mode: while a recording is open the overlay shows only the demo menu and the Settings tab. */
#demo-menu[hidden]{display:none}
#demo-menu{margin:0 0 14px;padding:14px 16px;border:1px solid #35505a;background:#0c151cd0}
#demo-menu h2{margin:4px 0}#demo-menu p{margin:2px 0 10px;color:#91a3af;font-size:12px}
#demo-menu .demo-buttons{display:flex;gap:8px;flex-wrap:wrap}#demo-menu .demo-buttons button{width:auto;flex:1;margin:0}
#demo-menu .demo-note{margin:10px 0 0;font-size:11px}
body.demo-mode #weapons-warning{display:none} /* demos: which physics mode the map needs is irrelevant while watching */
body.demo-mode #play,body.demo-mode #error,body.demo-mode #overlay .note,body.demo-mode .tab-btn[data-tab="local"],body.demo-mode .tab-btn[data-tab="mp"]{display:none}

/* === HUD: vitals, powerups, pickup message, checkpoint split (#vitals, #powerups, #pickup-message, #cp-split) === */
#vitals{position:fixed;bottom:80px;right:24px;z-index:2;font:13px monospace;color:#eef3f4;letter-spacing:1px;pointer-events:none;text-shadow:0 0 4px #000}
#powerups{position:fixed;top:40%;right:24px;z-index:2;font:bold 14px monospace;color:#ffd166;pointer-events:none;letter-spacing:2px;text-align:right;white-space:pre;line-height:1.6;text-shadow:0 0 6px #000}
#pickup-message{--pk-color:#80e8d1;--pk-size:20px;position:fixed;top:calc(50% + 12vh + 44px);left:50%;transform:translateX(-50%);z-index:2;font:bold var(--pk-size) Arial,sans-serif;color:var(--pk-color);pointer-events:none;letter-spacing:1px;text-align:center;white-space:pre-line;max-width:70vw;padding:.3em .9em;text-shadow:0 0 3px #000}
#pickup-message[data-style=band]{background:linear-gradient(90deg,transparent,#0c151cd0 18%,#0c151cd0 82%,transparent);border-top:1px solid color-mix(in srgb,var(--pk-color) 35%,transparent);border-bottom:1px solid color-mix(in srgb,var(--pk-color) 35%,transparent)}
#pickup-message[data-style=box]{background:#0c151cd0;border:1px solid var(--pk-color);box-shadow:0 0 8px color-mix(in srgb,var(--pk-color) 45%,transparent)}
#pickup-message.pk-glow{text-shadow:0 0 3px #000,0 0 10px color-mix(in srgb,var(--pk-color) 45%,transparent)}
#pickup-message.pk-upper{text-transform:uppercase}
#pickup-message.pk-in[data-anim=pop]{animation:pickup-pop .22s ease-out}
#pickup-message.pk-in[data-anim=slide]{animation:pickup-slide .25s ease-out}
@keyframes pickup-pop{from{opacity:0;transform:translateX(-50%) scale(1.25)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes pickup-slide{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
#powerups[hidden],#pickup-message[hidden],#cp-split[hidden]{display:none}
#cp-split{--pk-size:22px;position:fixed;top:calc(50% + 12vh + 88px);left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;text-align:center;font:bold var(--pk-size) Arial,sans-serif;padding:.2em .9em;text-shadow:0 0 3px #000;white-space:nowrap}
#cp-split small{display:block;font-size:.55em;color:#ccc;letter-spacing:1px}#cp-split i{display:block;font-size:.5em;font-style:normal;color:#aaa}
#cp-split[data-style=band]{background:linear-gradient(90deg,transparent,#0c151cd0 18%,#0c151cd0 82%,transparent)}
#cp-split[data-style=box]{background:#0c151cd0;border:1px solid #ffffff30;border-radius:4px}
#cp-split.pk-glow b{text-shadow:0 0 3px #000,0 0 12px currentColor}
#cp-split.pk-in[data-anim=pop]{animation:pickup-pop .22s ease-out}#cp-split.pk-in[data-anim=slide]{animation:pickup-slide .25s ease-out}
/* === Leaderboard panel (#leaderboard-panel) === */
#leaderboard-panel{position:absolute;right:3vw;top:85px;bottom:65px;width:min(640px,44vw);overflow-y:auto;overflow-x:hidden;padding:14px;background:#0a1116f0;border:1px solid #2c4550;border-left:3px solid #80e8d1;font-size:12px}
#leaderboard-panel th.lb-sort{cursor:pointer;user-select:none;white-space:nowrap}#leaderboard-panel th.lb-sort:hover{color:#80e8d1}
#leaderboard-panel a.lb-name{color:inherit;text-decoration:none}#leaderboard-panel a.lb-name:hover{color:#80e8d1;text-decoration:underline}
#leaderboard-panel .lb-maprow{display:flex;gap:6px;align-items:center;margin:2px 0 10px}#leaderboard-panel .lb-maprow[hidden]{display:none}#leaderboard-panel .lb-maprow .lb-map{flex:1;margin:0;min-width:0}#leaderboard-panel .lb-play.lb-play-board{align-self:stretch;flex:none;width:auto;padding:2px 8px;letter-spacing:1px;white-space:nowrap}
#leaderboard-panel .lb-pager{display:flex;justify-content:center;align-items:center;gap:12px;margin:10px 0 2px;font-size:10px;letter-spacing:1px;color:#7d94a0}#leaderboard-panel .lb-pg{width:auto;margin:0;padding:4px 10px;font-size:9px;background:#1a2a32;color:#80e8d1;border:1px solid #35505a}#leaderboard-panel .lb-pg:disabled{opacity:.35;cursor:default}
#leaderboard-panel .lb-avatar{display:block;width:64px;height:64px;margin:0 0 8px;border:1px solid #2c4550;background:#13232b}#leaderboard-panel .lb-pstats{display:flex;gap:4px;margin:0 0 10px}#leaderboard-panel .lb-pstats span{flex:1;padding:6px 4px;text-align:center;background:#13232b;border:1px solid #2c4550;font-size:8px;letter-spacing:1px;color:#7d94a0}#leaderboard-panel .lb-pstats b{display:block;font-size:16px;letter-spacing:0;color:#80e8d1;font-variant-numeric:tabular-nums}
#leaderboard-panel .lb-play{width:min-content;margin:0;padding:2px 5px;letter-spacing:.5px;font-size:9px;line-height:1.15;white-space:normal;text-align:center;filter:brightness(.72)}#leaderboard-panel .lb-play:hover{filter:none}#leaderboard-panel td:has(>.lb-play){width:1%;padding-left:2px;padding-right:2px}#leaderboard-panel td>.lb-play{letter-spacing:0;padding:2px 4px;display:block;margin:0 auto}#leaderboard-panel td>.lb-play+.lb-play{margin-top:4px}#leaderboard-panel td:has(>.lb-play){text-align:center}
#leaderboard-panel .lb-map,#leaderboard-panel .lb-player{width:100%;margin:2px 0 10px;padding:8px;background:#20333c;border:1px solid #567078;color:#e0f2ed}
#leaderboard-panel .tab-bar{margin-bottom:8px}
/* View tabs = primary navigation: large underlined tabs over a divider. */
#leaderboard-panel .lb-view{gap:0;margin:4px 0 12px;border-bottom:1px solid #35505a}
#leaderboard-panel .lb-view .tab-btn{padding:10px 6px 8px;font-size:11px;font-weight:bold;letter-spacing:2px;white-space:nowrap;background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-1px;color:#6b8290}
#leaderboard-panel .lb-view .tab-btn:hover{color:#b8d4cc}
#leaderboard-panel .lb-view .tab-btn.active{background:none;color:#80e8d1;border-bottom-color:#80e8d1}
/* Physics / mode = secondary filters: small labelled chips. */
#leaderboard-panel .lb-chips{align-items:center;gap:4px;margin-bottom:5px}
#leaderboard-panel .lb-chips::before{content:attr(data-label);width:62px;flex:none;font-size:8px;letter-spacing:2px;color:#5d7480}
#leaderboard-panel .lb-chips .tab-btn{flex:0 1 auto;padding:4px 10px;font-size:9px;border-radius:10px;background:#111c22;border-color:#2c4550}
#leaderboard-panel .lb-chips .tab-btn.active{background:#80e8d1;color:#0a1116;border-color:#80e8d1}
#leaderboard-panel .lb-weapon{margin-bottom:10px}
#leaderboard-panel table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
#leaderboard-panel th{text-align:left;font-size:9px;letter-spacing:1px;color:#80e8d1;padding:4px 6px;position:sticky;top:-14px;background:#0a1116}
#leaderboard-panel :is(td,th).lb-col-time,#leaderboard-panel th[data-sort=elapsed]{padding-left:12px;padding-right:12px;white-space:nowrap}/* Time column ~20% wider than the 6px default; never wraps (Recent WRs rows carry marks after the time) */
#leaderboard-panel td:has(>.lb-mapname){overflow-wrap:anywhere;width:100%}/* the map column takes the width the other columns don't need */#leaderboard-panel td{padding:5px 6px;border-top:1px solid #1d2f38;color:#c9d8dc}
#leaderboard-panel tbody tr[data-id]{cursor:pointer}
#leaderboard-panel tr.sel td{background:#20333c;color:#fff}#leaderboard-panel tr.me td:nth-child(2){color:#80e8d1;font-weight:700}
/* Narrow window / browser zoom: keep the leaderboard, park it right of the menu and let the overlay scroll sideways; a fixed note explains why. */
@media(max-width:1100px){#overlay{overflow-x:auto}#leaderboard-panel{right:auto;left:640px;width:480px;min-height:400px}#overlay::after{content:"Window too narrow: scroll right for the leaderboard, or press Ctrl+0 to reset zoom / make the window larger.";position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:30;max-width:calc(100vw - 32px);padding:6px 12px;background:#2a1f0ef0;border:1px solid #e8b060;color:#e8b060;font-size:11px;text-align:center;pointer-events:none}body.demo-mode #overlay::after{content:none}}
body.demo-mode #leaderboard-panel{display:none}

#leaderboard-panel .lb-title{margin:0 0 4px;font-size:13px;letter-spacing:3px;color:#80e8d1}#leaderboard-panel .lb-sub{margin:0 0 12px;font-size:10px;color:#91a3af;line-height:1.4}
#leaderboard-panel .lb-head{display:flex;justify-content:space-between;align-items:center}#leaderboard-panel .lb-refresh{width:auto;margin:0;padding:6px 10px;font-size:9px;background:#1a2a32;color:#80e8d1;border:1px solid #35505a}#leaderboard-panel .lb-refresh:disabled{opacity:.5;cursor:default}#leaderboard-panel .lb-mine{margin:0 0 10px;padding:6px;border:1px solid #80e8d1;background:#13232b}#leaderboard-panel .lb-mine-title{font-size:9px;letter-spacing:2px;color:#80e8d1;margin-bottom:2px}
#leaderboard-panel .lb-time{cursor:help}#leaderboard-panel .lb-cptip{position:absolute;z-index:20;pointer-events:none;background:#0d1a20;border:1px solid #2c4550;padding:6px 8px;font-variant-numeric:tabular-nums;white-space:nowrap}#leaderboard-panel .lb-cptip[hidden]{display:none}#leaderboard-panel .lb-cptip table{width:auto}#leaderboard-panel .lb-cptip td{padding:1px 6px}#leaderboard-panel .lb-cptip i{font-style:normal;color:#91a3af}#leaderboard-panel .lb-cptip .slow{color:#e06060}#leaderboard-panel .lb-cptip .fast{color:#60d070}#leaderboard-panel .lb-cptip-title{margin-bottom:3px}#leaderboard-panel .lb-unv{color:#e8b060;cursor:help}#leaderboard-panel .lb-old{color:#6f8790;font-size:.75em;cursor:help}#leaderboard-panel .lb-splits{margin-top:10px;padding:8px;border:1px solid #2c4550;display:flex;flex-wrap:wrap;gap:4px 14px;font-variant-numeric:tabular-nums}#leaderboard-panel .lb-splits .lb-mine-title{flex:0 0 100%}#leaderboard-panel .lb-splits i{font-style:normal;color:#91a3af}

/* === Ghost line, map filter, jump speeds (#jumpspeed) === */
.ghost-picker{margin-top:12px}.ghost-show{display:flex;align-items:center;justify-content:flex-end;gap:6px}#ghost-list{max-height:180px;overflow-y:auto}
.ghost-line{display:flex;align-items:center;gap:10px;margin:10px 0}.ghost-line[hidden]{display:none}.ghost-line select{flex:1;min-width:0}
.ghost-checks{display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 8px;flex:none} /* GHOST and PATH LINE: two tight rows with their checkboxes in one column, as tall as the list beside them */
.ghost-checks label{display:contents}
.map-controls .ghost-line{justify-content:flex-start;gap:8px}.map-controls .ghost-line input{width:auto;margin:0}.map-controls .ghost-line select{flex:0 1 auto;max-width:280px}
.map-filter-line{display:flex;align-items:center;gap:10px;max-width:520px}.map-filter-line .map-filter{flex:1;min-width:0}.map-filter-count{color:#9fb8b2;font-size:11px;white-space:nowrap}
.map-filter{width:100%;max-width:440px;margin:8px 0;padding:8px;background:#20333c;border:1px solid #567078;color:#e0f2ed;font-size:11px}#leaderboard-panel .lb-filter{max-width:none;margin:2px 0 6px}
.course-count{text-align:center;color:#9fb4b9;font-variant-numeric:tabular-nums}.course-count.mine{color:#5fd35f}.course-picker-head span:not(:first-child){text-align:center}

/* === HUD layout: vitals, weapon bar, powerups, notices (later rules override the earlier ones above) === */
#jumpspeed{position:fixed;left:50%;bottom:50px;transform:translateX(-50%);z-index:2;pointer-events:none;display:flex;gap:14px;font-size:13px;font-variant-numeric:tabular-nums;color:#9fb4b9;white-space:nowrap}#jumpspeed[hidden]{display:none}#jumpspeed .up{color:#80e8d1}#jumpspeed .latest{color:#fff;font-weight:700}

.course-picker-head{padding-right:calc(10px + var(--sbw,0px))}
.course-picker-head span[data-sort]{cursor:pointer;user-select:none}.course-picker-head span[data-dir="1"]::after{content:" ▲"}.course-picker-head span[data-dir="-1"]::after{content:" ▼"}

.ghost-select.ghost-problem,.ghost-select option.ghost-problem{color:#ff6b5e}
.ghost-select option:not(.ghost-problem){color:#eef3f4}
.map-controls .course-row{gap:8px;justify-content:normal} /* .map-controls label would otherwise give rows a 15px gap and space-between, misaligning them with the header */
.small-button{width:auto;margin:0;padding:6px 12px;font-size:10px;letter-spacing:1px}
#notices{position:fixed;top:92px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}#notices>div{position:static!important;transform:none!important}
header{right:auto}
#chat-feed{width:640px;max-width:none;height:440px;overflow:hidden;justify-content:flex-end}#chat-console{width:640px;height:440px;max-height:none}#chat-input-wrap input{width:580px}.chat-console-log{flex:1;min-height:0}
#vitals{bottom:24px;right:24px;font:bold 22px Arial,sans-serif;letter-spacing:0;display:flex;gap:18px;align-items:center}
#vitals.vt-vertical{flex-direction:column;align-items:flex-start;gap:6px}
.vt-item{display:flex;align-items:center;gap:6px}.vt-icon svg{display:block;filter:drop-shadow(0 0 3px #000)}
.vt-label{font-size:10px;letter-spacing:2px;color:#9fb4b9}.vt-num{min-width:2.2em;font-variant-numeric:tabular-nums}
.vt-bar{position:relative;width:90px;height:6px;background:#ffffff22;display:inline-block}.vt-bar i,.vt-bar b{position:absolute;left:0;top:0;height:100%;display:block}.vt-bar b{background:#fff8}
#weapon-bar{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none;display:flex;gap:4px;font:bold 13px Arial,sans-serif;text-shadow:0 0 3px #000}
#weapon-bar.wb-vertical{flex-direction:column}#weapon-bar[hidden]{display:none}
.wb-item{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 5px;background:#0c151c80;border:1px solid transparent;color:#eef3f4}
.wb-item.held{border-color:var(--wc);background:#0c151cd0;box-shadow:0 0 8px color-mix(in srgb,var(--wc) 45%,transparent)}
.wb-item.low .wb-ammo{color:#ffb347}.wb-item.empty{opacity:.45}.wb-item.empty .wb-ammo{color:#ff4d4d}
.wb-icon svg{display:block}.wb-short{color:var(--wc);min-width:1.6em}.wb-ammo{min-width:2em;font-variant-numeric:tabular-nums}.wb-name{font-weight:400;font-size:11px;color:#c9d6da}
.wb-compact{gap:1px!important;font-size:11px!important}.wb-compact .wb-item{padding:1px 4px;gap:3px}
footer{right:auto;gap:40px}
#powerups{white-space:normal;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font:bold 14px Arial,sans-serif}
#powerups.pu-horizontal{flex-direction:row;align-items:center;gap:14px}
.pu-item{display:flex;align-items:center;gap:7px;color:#eef3f4}.pu-icon svg{display:block;filter:drop-shadow(0 0 4px var(--pc))}
.pu-time{font-variant-numeric:tabular-nums;min-width:3em;text-align:right}
.pu-bar{position:relative;width:70px;height:5px;background:#ffffff22;display:inline-block}.pu-bar i{position:absolute;left:0;top:0;height:100%}
.ghost-watch-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-4px 0 10px;font-size:11px;letter-spacing:1px;color:#adbac0}.ghost-watch-line .ghost-watch{flex:0 0 auto;width:auto;margin:0;padding:3px 8px;font-size:11px;letter-spacing:.5px;white-space:nowrap}
.ghost-watch-line .ghost-watch:disabled{opacity:.4;cursor:not-allowed}.ghost-watch-line[hidden]{display:none}

/* === Discord link, hero logo, view angle, slick notice === */
#discord-link{display:flex;width:fit-content;align-items:center;gap:8px;margin-top:14px;padding:8px 14px;background:#5865f2;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.05em;border-radius:4px}
#discord-link:hover{background:#4752c4}
/* Logo as a centred backdrop between the menu (left) and the right-side panel; everything draws over it. */
#overlay .hero-logo{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(900px,70vw);max-width:none;margin:0;z-index:-1;opacity:.35;pointer-events:none}
#player-list{top:320px}
/* === HUD: minimap (#minimap), drawn by minimap.js; shown by cg_minimap, in HUD setup only while "Minimap" is ticked in the preview box === */
#minimap{position:fixed;bottom:150px;right:36px;width:400px;height:400px;z-index:2;pointer-events:none;background:rgba(8,14,18,.35);border:1px solid rgba(255,255,255,.25);overflow:hidden}
#minimap[hidden]{display:none}
body.hud-editing #minimap{display:none!important}
body.hud-editing.hud-minimap-preview #minimap{display:block!important}
/* === HUD: local clock (#clock), off by default; look set by data-style === */
#clock{--clk-color:#80e8d1;position:fixed;top:8px;right:36px;z-index:2;pointer-events:none;display:flex;align-items:center;gap:8px;font:16px monospace;color:var(--clk-color);text-shadow:0 0 3px #000;background:var(--clk-bg,transparent);padding:.25em .6em}
#clock[data-box=on]{border:1px solid var(--clk-color);box-shadow:0 0 8px color-mix(in srgb,var(--clk-color) 45%,transparent)}
#clock[data-glow=on]{font-family:"Courier New",monospace;font-weight:bold;letter-spacing:.12em;text-shadow:0 0 4px var(--clk-color),0 0 12px var(--clk-color)}
#clock[data-glow=on] .clock-face{filter:drop-shadow(0 0 4px var(--clk-color))}
#clock .clock-face{width:48px;height:48px;flex:none}
#view-angle{position:fixed;top:calc(50% + 12vh);left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;font:12px monospace;color:#9fb4b9;text-shadow:0 0 3px #000}
#slick-notice{position:fixed;top:calc(50% + 12vh + 22px);left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;font:bold 12px Arial,sans-serif;letter-spacing:2px;color:#7fd8ff;text-shadow:0 0 4px #000}#slick-notice[hidden]{display:none}
/* === Menu card polish: tabs, PLAY button, Settings top, config import === */
/* Left menu polish: one framed card matching the leaderboard panel (same bg, border, accent edge), underline tabs
   like the leaderboard views, flat sections inside instead of boxes-in-boxes, and a PLAY button that reads as the main action.
   The card background sits on .menu-tabs (not main) so the faded hero logo stays behind it. */
#overlay .menu-tabs{max-width:520px;margin:0 0 16px;padding:4px 18px 18px;background:#0a1116f0;border:1px solid #2c4550;border-left:3px solid #80e8d1;box-shadow:0 10px 40px #0008}
.menu-tabs>.tab-bar{gap:0;margin:0 -18px 16px;padding:0 12px;border-bottom:1px solid #2c4550}
.menu-tabs>.tab-bar>.tab-btn{padding:14px 6px 11px;font-size:11px;font-weight:bold;letter-spacing:2px;white-space:nowrap;background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-1px;color:#6b8290;transition:color .15s,border-color .15s}
.menu-tabs>.tab-bar>.tab-btn:hover{background:none;color:#b8d4cc;border-bottom-color:#35505a}
.menu-tabs>.tab-bar>.tab-btn.active{color:#80e8d1;border-bottom-color:#80e8d1}
.menu-tabs .tab-panel .control-panel{max-width:none;padding:0;border:none;background:none}
.menu-tabs .tab-panel{animation:menu-fade .18s ease-out}
@keyframes menu-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Inner toggles (physics / weapon mode etc.) become a compact segmented control. */
.menu-tabs .tab-panel .tab-bar{gap:0;border:1px solid #35505a;border-radius:4px;overflow:hidden}
.menu-tabs .tab-panel .tab-btn{border:none;border-right:1px solid #35505a;background:#111c22;transition:background .15s,color .15s}
.menu-tabs .tab-panel .tab-btn:last-child{border-right:none}
.menu-tabs .tab-panel .tab-btn:hover{background:#1a2a32;color:#b8d4cc}
.menu-tabs .tab-panel .tab-btn.active{background:#80e8d1;color:#0a1116}
.account-main-buttons{display:flex;gap:8px}.account-main-buttons button{flex:1}
.control-panel button.steam-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;box-sizing:border-box;padding:14px 16px;background:#000;color:#fff;border:1px solid #2a2a2a;border-radius:10px;font-size:16px;letter-spacing:0;text-transform:none}.control-panel button.steam-btn:hover:not(:disabled){background:#111;border-color:#444}.control-panel button.steam-btn svg{flex:none}.control-panel button.steam-btn[hidden],.account-or[hidden]{display:none} /* display:flex above would otherwise beat the hidden attribute */
.account-steam-hint{margin:6px 0 0;color:#7d94a0;font-size:11px}
.account-or{display:flex;align-items:center;gap:10px;margin:10px 0;color:#7d94a0;font-size:11px;letter-spacing:2px}.account-or::before,.account-or::after{content:"";flex:1;height:1px;background:#2c4550}
.menu-tabs input:focus-visible,.menu-tabs select:focus-visible,.menu-tabs button:focus-visible{outline:2px solid #80e8d1;outline-offset:1px}
.menu-tabs select,.menu-tabs input[type=text],.menu-tabs input[type=password],.menu-tabs input[type=number]{border-radius:3px}
/* PLAY: full card width, lifts on hover, arrow nudges. */
#overlay #play,#overlay #spectate,#overlay #mp-disconnect-big{width:100%;max-width:520px;margin:0 0 12px;padding:20px 24px;font-size:14px;letter-spacing:3px;border-radius:3px;box-shadow:0 0 0 1px #80e8d1,0 6px 24px #80e8d133;transition:background .15s,box-shadow .15s,transform .15s}
#overlay #play:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 0 1px #a4ffe9,0 8px 32px #80e8d155}
#overlay #play span,#overlay #spectate span{transition:transform .15s}#overlay #play:hover span,#overlay #spectate:hover span{transform:translate(3px,-3px)}
body.spec-free :is(#speed,#ql-speedo-corner,#ql-speedo-center){visibility:hidden!important}
#overlay #demo-menu{max-width:520px}
/* Settings tab top: sensitivity + HUD SETUP as one "quick settings" block, the button a full-width outline twin of PLAY. */
.menu-tabs .settings{width:auto;margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid #2c4550}
#hud-setup{width:100%;margin:12px 0 0;padding:12px 16px;font-size:11px;letter-spacing:2px;background:none;color:#80e8d1;border:1px solid #35505a;border-radius:3px;transition:border-color .15s,background .15s}
#hud-setup:hover{background:#80e8d114;border-color:#80e8d1}
#hud-setup span{font-size:14px}
/* Import QL config is moved to the top of the Settings tab, outside .control-panel: give it the same label/text styling. */
.menu-tabs .tab-panel>.settings-section label{display:flex;justify-content:space-between;align-items:center;margin:14px 0}
.menu-tabs .tab-panel>.settings-section input[type=file]{width:260px}
.menu-tabs .tab-panel>.settings-section p{font-size:11px;line-height:1.6;color:#adbac0}
/* Import QL config: same outline button as HUD SETUP, grouped with it in the quick-settings block. */
.menu-tabs .cfg-import{margin:0}
#cfg-import-btn,#cfg-export-btn{width:100%;margin:0 0 12px;padding:12px 16px;font-size:11px;letter-spacing:2px;background:none;color:#80e8d1;border:1px solid #35505a;border-radius:3px;transition:border-color .15s,background .15s}
#cfg-import-btn:hover,#cfg-export-btn:hover{background:#80e8d114;border-color:#80e8d1}
#cfg-import-btn span,#cfg-export-btn span{font-size:14px}
.menu-tabs .cfg-import .cfg-report:empty{display:none}
.cfg-import input[type=checkbox]{width:auto}
/* === Speedometer styles and the route-viewer legend (#route-legend) === */
/* cg_speedometer (ql-speedometer.js): QL's styles 1-3 in QL's 640x480 units (1 unit = 100vh/480); 4 = our #speed. */
body:not(.hud-editing):not([data-speedometer="4"]) #speed{display:none!important}body.hud-editing:is([data-speedometer="1"],[data-speedometer="2"],[data-speedometer="3"]) #speed{display:none!important}body.hud-editing[data-speedometer="0"] #speed{opacity:.3}body.hud-editing :is(#ql-speedo-corner,#ql-speedo-center).hud-target{cursor:pointer}body.hud-editing #ql-speedo-corner.hud-target{outline-offset:-3px}
#ql-speedo-corner,#ql-speedo-center{position:fixed;z-index:2;pointer-events:none;color:#fff;font-size:2.5vh;line-height:1.2;font-variant-numeric:tabular-nums;text-shadow:1px 1px 0 #000}#ql-speedo-corner[hidden],#ql-speedo-center[hidden]{display:none}
#ql-speedo-corner{right:0;bottom:0;text-align:right}#ql-speedo-corner canvas{width:10vh;height:10vh;image-rendering:pixelated}
#ql-speedo-center{left:50%;top:calc(50% + 4vh);transform:translateX(-50%);text-align:center}#ql-speedo-center canvas{width:10vh;height:3.33vh;margin:0 auto;image-rendering:pixelated}#ql-speedo-center:not(.graph) canvas{display:none}
#leaderboard-panel .lb-route-status{margin:-4px 0 10px;font-size:10px;color:#a4bcbf}#leaderboard-panel .lb-route-status:empty,#leaderboard-panel .lb-route-status[hidden]{display:none}
#leaderboard-panel .lb-rt{width:1%;text-align:center}#leaderboard-panel th.lb-rt .lb-routes-go:disabled{opacity:.45;cursor:default}
body.route-view :is(#speed,#ql-speedo-corner,#ql-speedo-center,#jumpspeed,#crosshair,#vitals,#weapon-bar,#powerups,#pickup-message,#cp-split,#view-angle,#slick-notice,#notices,#cgaz-canvas,#cgaz-box,#ghost-state,#run-state,#hud-banner,#start-speed,#records,#chat-feed,#player-list,#course,header,footer,#replay-divergence){display:none!important}#leaderboard-panel td.lb-rt input{margin:0;accent-color:#80e8d1;cursor:pointer}#leaderboard-panel td.lb-rt input:disabled{cursor:not-allowed;opacity:.35}
#route-legend{position:fixed;top:12px;left:12px;z-index:4;display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:280px;padding:8px;background:#0c151cd9;border:1px solid #49616d;font-size:11px;color:#a4bcbf}
#route-legend .rl-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;letter-spacing:.1em}
#route-legend button{width:auto;margin:0;font-size:10px}#route-legend .rl-mode{padding:3px 6px}
#route-legend .rl-run{display:flex;align-items:center;gap:6px;padding:3px 6px;color:#e0f2ed;font-variant-numeric:tabular-nums}
#route-legend .rl-run i{flex:none;width:10px;height:10px}#route-legend .rl-ups{flex:none;min-width:62px;text-align:right;color:#a4bcbf}
#route-legend .rl-hint{margin:6px 0 0;font-size:10px;line-height:1.4}#route-legend .rl-mouse{margin-bottom:4px;font-size:10px;letter-spacing:.06em;color:#80e8d1}#route-legend .rl-mouse.free{color:#ffd23f}
#route-legend .rl-toggles{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}#route-legend .rl-toggles button{padding:3px 8px;background:#111c22;color:#a4bcbf;border:1px solid #2c4550}#route-legend .rl-toggles button:not(:disabled):hover{background:#1c2c34;color:#e0f2ed}#route-legend .rl-toggles button.on{background:#80e8d1;color:#0a1116;border-color:#80e8d1}#route-legend .rl-toggles button:disabled{opacity:.4;cursor:default}
#route-legend .rl-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#route-legend .rl-time em{font-style:normal;color:#a4bcbf}
#route-legend .rl-scale{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:10px}#route-legend .rl-scale b{flex:1;height:6px;background:linear-gradient(90deg,hsl(238,100%,50%),hsl(119,100%,50%),hsl(59,100%,50%),hsl(0,100%,50%))}
#route-legend .rl-note{margin:4px 0 0;font-size:10px;color:#e8b060}
/* === Banners (#hud-banner, #peer-record), update popup, map-info popup, start-speed === */
#hud-banner{position:fixed;top:calc(50% - 12vh);left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;font:bold 16px Arial,sans-serif;letter-spacing:2px;color:#ff5a3c;text-shadow:0 0 4px #000;white-space:nowrap;transition:opacity .6s}
#hud-banner[hidden],#peer-record[hidden]{display:none}#hud-banner.fade{opacity:0}#spec-label{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;font:bold 24px Arial,sans-serif;letter-spacing:1px;color:#fff;text-shadow:0 0 4px #000;white-space:nowrap}#start-speed{position:fixed;top:calc(50% - 12vh - 40px);left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;text-align:center;font:bold 16px Arial,sans-serif;color:#fff;letter-spacing:1px;text-shadow:0 0 4px #000;white-space:nowrap;transition:opacity .6s}#start-speed.fade{opacity:0}body.hud-editing #start-speed{opacity:1}#start-speed small{display:block;font-size:13px;color:#ccc}#start-speed b{display:block;font-size:30px}#start-speed u{text-decoration:none;font-size:13px;margin-left:4px;opacity:.8}#start-speed i{display:block;font-style:normal;font-size:14px}
#start-speed.anim-pop{animation:start-pop .35s ease-out}#start-speed.anim-slide{animation:start-slide .35s ease-out}
@keyframes start-pop{0%{scale:.4;opacity:0}60%{scale:1.15;opacity:1}100%{scale:1}}@keyframes start-slide{0%{translate:0 20px;opacity:0}100%{translate:0 0;opacity:1}}dialog.choice-dialog{border:1px solid #80e8d1;background:#13232b;color:#c9d8db;padding:16px 18px;max-width:360px}dialog.choice-dialog::backdrop{background:#0008}dialog.choice-dialog p{margin:0 0 12px}dialog.choice-dialog button{width:auto;padding:9px 14px;font-size:10px;margin:2px 6px 2px 0}.tab-btn:disabled{opacity:.4;cursor:not-allowed}
#mp-players{max-width:440px;margin:8px 0;border:1px solid #567078;background:#20333c}.mp-player-row{display:flex;align-items:center;gap:8px;padding:5px 10px;border-bottom:1px solid #33474f;font-size:11px}.mp-player-row:last-child{border-bottom:0}.mp-player-name{flex:1}.mp-player-row button{width:auto;padding:5px 9px;font-size:9px;margin:0}
#hud-banner.pb{color:#80e8d1;font-size:22px}#hud-banner.vote{color:#ffd24a;font-size:20px}#hud-banner.wr{color:#ffd24a;font-size:26px;text-shadow:0 0 4px #000,0 0 14px #ffb400}
#build-info.outdated{color:#ffb08e}
#update-popup{position:fixed;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 32px));padding:30px 32px 22px;background:#0c151c;border:1px solid #80e8d1;box-shadow:0 0 0 100vmax #000a}#update-popup[hidden]{display:none}#update-popup p{font-size:13px;line-height:1.7;color:#adbac0}#update-popup kbd{margin:0 2px}#update-popup button{width:100%;margin:10px 0 0}#update-popup button.secondary{background:transparent;color:#adbac0;border:1px solid #70808855}#update-popup button.secondary:hover{color:#eef3f4;border-color:#adbac0}
#mapinfo-popup{position:fixed;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow-y:auto;padding:26px 30px 20px;background:#0c151c;border:1px solid #80e8d1}#mapinfo-popup[hidden]{display:none}
#mapinfo-popup h2{margin:8px 0 2px;font-size:22px;overflow-wrap:anywhere}#mapinfo-popup .mapinfo-title{margin:0;font-size:13px;color:#adbac0;overflow-wrap:anywhere}
#mapinfo-popup dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:16px 0 0;font-size:13px;line-height:1.5}#mapinfo-popup dt{padding-top:2px;font-size:10px;font-weight:700;letter-spacing:2px;color:#80e8d1;text-transform:uppercase}#mapinfo-popup dd{margin:0;color:#eef3f4}
#mapinfo-popup button{width:100%;margin:18px 0 0}
#mapinfo-popup .mapinfo-links{display:flex;flex-direction:column;gap:4px}#mapinfo-popup .mapinfo-links a{color:#80e8d1;text-decoration:underline}
#route-legend .rl-follow{flex:none;padding:1px 6px;font-size:11px;background:#111c22;color:#a4bcbf;border:1px solid #2c4550}#route-legend .rl-follow:hover{background:#1c2c34;color:#e0f2ed}#route-legend .rl-follow.on{background:#80e8d1;color:#0a1116;border-color:#80e8d1}
/* Two lines per run: colour, name and POV, then time and speed under the name */
#route-legend .rl-run{flex-wrap:wrap;row-gap:2px}#route-legend .rl-run .rl-br{flex-basis:100%;height:0}#route-legend .rl-run .rl-time{flex:1;margin-left:16px}
#route-legend .rl-title{margin-bottom:6px;color:#e0f2ed;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* === Replay speed popup, leaderboard filters, vote HUD, menu map header, chat preview, peer records === */
#replay-speed-wrap{position:relative;display:inline-block}
#replay-speed{min-width:3.5em}
#replay-speed-pop{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(10,12,16,.92);border:1px solid rgba(255,255,255,.2);border-radius:4px;white-space:nowrap}
#replay-speed-pop[hidden]{display:none}
#replay-speed-slider{width:140px}
#replay-speed-val{min-width:3em;text-align:right;font-variant-numeric:tabular-nums}
#leaderboard-panel .lb-filters{display:flex;align-items:center;gap:8px}#leaderboard-panel .lb-filter-rows{flex:1;min-width:0}#leaderboard-panel .lb-count{flex:none;font-size:13px;color:#a9bcc5;text-align:right;white-space:pre-line;line-height:1.5}
#leaderboard-panel .lb-head{flex-wrap:wrap;gap:6px}
#leaderboard-panel .lb-head-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
#leaderboard-panel .lb-category{width:auto;margin:0;padding:6px 10px;background:#1a2a32;border:1px solid #567078;border-radius:3px;color:#c4d9dc;font-size:9px;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer}
#leaderboard-panel .lb-category:hover{background:#20333c;border-color:#80e8d1;color:#80e8d1}
#leaderboard-panel .lb-category:focus-visible{outline:2px solid #80e8d1;outline-offset:2px}
#leaderboard-panel .lb-category[aria-pressed="true"]{border-color:#80e8d1}
#leaderboard-panel .lb-profile-row{display:flex;align-items:center;gap:8px;font-size:9px;color:#a9bcc5}
#leaderboard-panel .lb-profile{flex:1;min-width:0;padding:8px;background:#20333c;border:1px solid #567078;color:#e0f2ed}
#leaderboard-panel .lb-profile-note{font-size:11px;line-height:1.5;color:#a9bcc5;margin:6px 0 10px}
#leaderboard-panel .lb-enter-mode{width:auto;flex:none;margin:0;padding:6px 9px;font-size:10px;letter-spacing:0}
#leaderboard-panel .lb-play-board[hidden]{display:none}
#leaderboard-panel .lb-profile-row[hidden],#leaderboard-panel .lb-profile-note[hidden],#leaderboard-panel .lb-filter-rows[hidden]{display:none}
#vote-hud{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;font:bold 18px Arial,sans-serif;letter-spacing:1px;color:#ffd93d;background:#0c151cd0;border:1px solid #ffd93d88;padding:7px 16px;white-space:nowrap;text-shadow:0 0 3px #000}#vote-hud[hidden]{display:none}
body.mp-connected #chat-feed{z-index:4}.mp-ping{min-width:44px;text-align:right;color:#9fb4b9;font-variant-numeric:tabular-nums}#mp-chat{width:auto;padding:9px 14px;font-size:10px;margin:2px 0}
#menu-map{margin:0 0 4px}#menu-map h2{font-size:30px;letter-spacing:1px;margin:6px 0 0;overflow-wrap:anywhere}
#chat-preview{position:absolute;left:0;bottom:calc(100% + 4px);max-width:100%;font-size:16px;color:#eef3f4;background:#0c151cf0;border:1px solid #80e8d155;padding:4px 12px;white-space:pre;overflow:hidden}#chat-preview[hidden]{display:none}
#peer-record{position:fixed;top:calc(50% - 12vh - 110px);left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;text-align:center;font-family:Arial,sans-serif;text-shadow:0 0 4px #000;white-space:nowrap;transition:opacity .6s;color:#fff}
#peer-record.fade{opacity:0}#peer-record .pr-name{font:bold 14px Arial,sans-serif;letter-spacing:1px}
#peer-record .pr-delta{font:bold 13px Arial,sans-serif;letter-spacing:1px}#peer-record .pr-delta.faster{color:#5be36b}#peer-record .pr-delta.slower{color:#ff6b6b}#hud-banner .hb-delta.faster{color:#5be36b}#hud-banner .hb-delta.slower{color:#ff6b6b}
#peer-record .pr-kind{font:bold italic 18px Georgia,serif;letter-spacing:3px;color:#80e8d1}#peer-record.wr .pr-kind{color:#ffd24a;text-shadow:0 0 4px #000,0 0 10px #ffb400}
#peer-record .pr-board{font:bold 11px Arial,sans-serif;letter-spacing:2px;color:#cfd8dc}
body.route-view #peer-record{display:none!important}
.ql-preview{margin:-6px 0 10px auto;padding:3px 8px;font-size:14px;font-weight:bold;background:#0c151cf0;border:1px solid #80e8d155;color:#eef3f4;white-space:pre;overflow:hidden;width:max-content;max-width:100%}.ql-preview[hidden]{display:none}
/* Top-centre stack: spectator name, vote box and the notices (REC/EXPLORE/CGaz) share one spot; push the lower ones down when the upper ones show. A position set in HUD setup (inline style) still wins. */
body.has-spec #vote-hud{top:48px}
body.has-spec #notices,body.has-vote #notices{top:134px}
body.has-spec.has-vote #notices{top:174px}
body.has-spec #timer,body.has-vote #timer{top:48px}
body.has-spec.has-vote #timer{top:88px}
/* === Stacking and layout adjustments (spectator/vote/notices, narrow chat, powerups) === */
/* Chat lines stop before the centred speedometer on narrow windows (laptop scaling / browser zoom). */
#chat-feed{max-width:min(560px,calc(50vw - 170px))}
/* Powerups stay at 40% height but drop below the player list when a full server makes it reach that far (--pl-bottom set by main.js). A HUD-setup position still wins (!important). */
#powerups{top:max(40%,calc(var(--pl-bottom,0px) + 12px))}
/* === Mouse-capture retry, shared-link loading, trigger legend, disconnect dialog === */
#capture-retry{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;background:rgba(0,0,0,.82);color:#fff;text-align:center;cursor:pointer}
#capture-retry[hidden]{display:none}
.capture-retry-title{font:bold 42px sans-serif;letter-spacing:2px}
.capture-retry-text{max-width:560px;font:16px sans-serif;color:#ccc;line-height:1.4}
.capture-retry-hint{font:12px monospace;color:#888}
#mp-connect-live{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:20;width:auto;padding:9px 14px;font-size:10px}
/* Shared HQ links have their own loading surface, outside account/menu navigation. */
.shared-link-loading { position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:#091218; color:#c3d8dc; padding:24px; text-align:center; }
.shared-link-loading[hidden] { display:none; }
.shared-link-loading progress { width:min(420px,80vw); height:18px; accent-color:#79e3ca; }
#trigger-legend { position:fixed; left:12px; top:12px; z-index:12; padding:6px 10px; background:rgba(0,0,0,.72); border-radius:4px; font:12px Arial,sans-serif; pointer-events:none; }
#trigger-legend span { display:block; margin:2px 0; }
#trigger-legend[hidden] { display:none; }
dialog.mp-disconnected-dialog{box-sizing:border-box;width:540px;max-width:calc(100vw - 32px);padding:36px;text-align:center;border:2px solid #ffbd70;box-shadow:0 0 60px #000a;font-size:22px;line-height:1.5}dialog.mp-disconnected-dialog::backdrop{background:#000c}dialog.mp-disconnected-dialog p{white-space:pre-line;margin-bottom:24px}dialog.mp-disconnected-dialog button{min-width:120px;padding:14px 24px;font-size:16px}

/* === Movement keys HUD (#input-cmds) === */
/* cg_drawInputCmds (input-cmds.js): each key appears around the crosshair ONLY while held (forward above, back below, left/right beside it, jump NE, crouch SE).
   --ic-c colour and --ic-d distance come from the HUD editor (inputCmdsCss). Selected by [data-key], never `span`: the editor wraps its preview in a span. */
#input-cmds{--ic-c:#8fe0ff;--ic-d:52px;--ic-o:0px;position:fixed;top:50%;left:50%;width:calc(var(--ic-d)*1.8 + 56px);height:calc(var(--ic-d)*2 + 24px);transform:translate(-50%,-50%);z-index:2;pointer-events:none;font:bold 13px monospace;text-shadow:0 0 3px #000,0 0 6px #000}
#input-cmds[hidden]{display:none}
#input-cmds [data-key]{position:absolute;display:none;transform:translate(-50%,-50%);padding:1px 5px;color:var(--ic-c);border:1px solid transparent}
#input-cmds [data-key].on{display:block}#input-cmds svg{display:block}
#input-cmds [data-key=fwd]{left:calc(50% - var(--ic-o));top:calc(50% - var(--ic-d))}#input-cmds [data-key=back]{left:calc(50% - var(--ic-o));top:calc(50% + var(--ic-d))}#input-cmds [data-key=left]{left:calc(50% - var(--ic-o) - var(--ic-d));top:50%}#input-cmds [data-key=right]{left:calc(50% - var(--ic-o) + var(--ic-d));top:50%}
#input-cmds [data-key=jump]{left:calc(50% - var(--ic-o) + var(--ic-d)*.9);top:calc(50% - var(--ic-d)*.9)}#input-cmds [data-key=crouch]{left:calc(50% - var(--ic-o) + var(--ic-d)*.9);top:calc(50% + var(--ic-d)*.9)}

.clan-tag{font-size:.78em;opacity:.85}.clan-tag.official{text-decoration:underline;text-decoration-color:#eef3f4;text-decoration-thickness:1.5px;text-underline-offset:2px}
/* === Console (#qconsole) === */
/* QL-style console (game-console.js): full width, anchored at the top, slides down over every screen. --con-height / --con-opacity come from the con_height / con_opacity cvars; opacity is the background only, text stays solid. */
#qconsole{position:fixed;top:0;left:0;right:0;z-index:4;height:calc(var(--con-height,.5)*100vh);display:flex;flex-direction:column;background:rgba(8,14,18,var(--con-opacity,.9));border-bottom:1px solid #80e8d1;color:#eef3f4;font:14px/1.35 'Qrazy Mono','Qrazy Arimo','Qrazy Arabic','Qrazy Symbols',Consolas,'Courier New',monospace;font-variant-ligatures:none;transform:translateY(-100%);visibility:hidden;transition:transform .18s ease-out,visibility 0s linear .18s;user-select:text;-webkit-user-select:text}
@supports (height:1dvh){#qconsole{height:calc(var(--con-height,.5)*100dvh)}}
#qconsole.open{transform:none;visibility:visible;transition:transform .18s ease-out,visibility 0s}
@media (prefers-reduced-motion:reduce){#qconsole,#qconsole.open{transition:none}}
#qconsole .qcon-log{overflow-anchor:none;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:8px 14px;outline:none;cursor:text}
#qconsole .qcon-log>:first-child{margin-top:auto}
#qconsole .chat-line{font:calc(14px*var(--con-scale,1))/1.35 'Qrazy Mono','Qrazy Arimo','Qrazy Arabic','Qrazy Symbols',Consolas,'Courier New',monospace;font-weight:normal;text-shadow:none;white-space:pre-wrap}
#qconsole .chat-system{font-style:normal;color:#d3dee2}
#qconsole .chat-line.race-results{color:#fff}
/* console only: pure ^4 blue and ^0 black are nearly invisible on the dark background; lift them, keeping every code distinct from the others */
#qconsole [style*="rgb(0, 0, 255)"]{color:#5f86ff!important}#qconsole [style*="rgb(0, 0, 0)"]{color:#7d8a92!important}
#qconsole .chat-line.chat-heading{font-size:calc(15px*var(--con-scale,1));font-weight:bold}
#qconsole .qcon-echo{color:#80e8d1}#qconsole .qcon-error{color:#ff8a7a}
#qconsole .qcon-hint{padding:2px 14px;color:#b9c8ce;white-space:pre-wrap}#qconsole .qcon-hint[hidden]{display:none}
#qconsole .qcon-bar{position:relative;display:flex;align-items:center;gap:8px;padding:6px 14px;border-top:1px solid #80e8d155}
#qconsole .qcon-prompt{color:#80e8d1}
#qconsole .qcon-input{flex:1;width:auto;min-width:0;font:inherit;font-size:calc(15px*var(--con-scale,1));background:transparent;border:0;color:#eef3f4;accent-color:#80e8d1}#qconsole .qcon-input:focus{outline:none}
#qconsole .qcon-close{width:auto;margin:0;padding:0 8px;background:none;color:#80e8d1;font-size:20px;line-height:1;letter-spacing:0}#qconsole .qcon-close:hover{background:none;color:#fff}
#qcon-preview{position:absolute;left:14px;bottom:calc(100% + 4px);max-width:calc(100% - 28px);font-size:calc(15px*var(--con-scale,1));color:#eef3f4;background:#0c151cf0;border:1px solid #80e8d155;padding:4px 12px;white-space:pre;overflow:hidden}#qcon-preview[hidden]{display:none}
body.console-open #chat-feed{visibility:hidden}
/* === Appearance tab === */
.appearance-controls{margin-top:12px}.appearance-controls h4{color:#80e8d1;margin:8px 0 16px}.appearance-controls .settings-group{margin-top:18px}.appearance-preview{margin:16px 0;padding:14px;border:1px solid #49616d;background:#13232b;border-radius:5px}.appearance-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.appearance-preview-head h4{margin:0;color:#80e8d1}.appearance-preview label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;margin:12px 0}.appearance-preview label input{max-width:180px}.appearance-views{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:11px;color:#adbac0;margin:16px 0 8px}.appearance-canvas{width:100%;height:220px;overflow:hidden;border:1px solid #33474f;border-radius:4px}.appearance-canvas canvas{width:100%;height:100%;display:block}.appearance-held{margin-top:14px;font-size:12px}.appearance-weapons{display:flex;flex-wrap:nowrap;gap:4px;margin-top:6px;overflow-x:auto}.appearance-weapons button{display:flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;min-width:0;margin:0;padding:4px;line-height:0;border:1px solid #49616d;border-radius:4px;background:#172d37;color:#adbac0;cursor:pointer}.appearance-weapons button[aria-pressed=true]{border-color:#80e8d1;background:#294b50;color:white}.appearance-weapons svg{width:18px;height:18px;flex:none}.appearance-model label[hidden],.appearance-dick-controls label[hidden]{display:none}.appearance-dick-controls{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}.appearance-dick-controls label{gap:8px}.appearance-preview p{font-size:11px;color:#adbac0;line-height:1.6}.appearance-controls input[type=color]{height:30px;width:70px;padding:2px}.tab-bar{flex-wrap:wrap}

.appearance-canvas{touch-action:none;cursor:grab}.appearance-canvas:active{cursor:grabbing}
/* Styles that used to be set inline from main.js */
#gpu-warning{color:#ffb08e;font-size:12px;line-height:1.5;max-width:420px}
#weapons-warning{color:#ff5a3c;font-weight:bold;margin:6px 0}
/* HUD setup (hud-editor.js) */
body.hud-editing #overlay{visibility:hidden}
body.hud-editing .hud-target{z-index:1001!important;pointer-events:auto!important;outline:1px dashed #80e8d1a0;outline-offset:3px;cursor:move;user-select:none;min-width:40px;min-height:16px}
body.hud-editing .hud-target[hidden]{display:block!important}
body.hud-editing .hud-target:empty::after{content:attr(data-hud-label);font:11px monospace;color:#80e8d1;opacity:.8}
body.hud-editing .hud-target.hud-selected{outline:2px solid #ffd166;outline-offset:0}
#hud-editor-layer{position:fixed;inset:0;z-index:1000}
#records .pv-y,body.hud-editing.hud-records-wr #records .pv-n{display:none}body.hud-editing.hud-records-wr #records .pv-y{display:inline}
#hud-editor-layer.grid{background-image:linear-gradient(90deg,transparent calc(50% - 1px),#80e8d180 calc(50% - 1px),#80e8d180 calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(transparent calc(50% - 1px),#80e8d180 calc(50% - 1px),#80e8d180 calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(#ffffff59 1px,transparent 1px),linear-gradient(90deg,#ffffff59 1px,transparent 1px);background-size:100% 100%,100% 100%,40px 40px,40px 40px;background-position:0 0,0 0,calc(50% + 20px) calc(50% + 20px),calc(50% + 20px) calc(50% + 20px)}
body.hud-editing:not(.hud-chat-writing) :is(#chat-console,#chat-input-wrap).hud-target{display:none!important}
body.hud-editing.hud-chat-writing #chat-feed.hud-target{display:none!important}
body.hud-editing.hud-chat-writing :is(#chat-console,#chat-input-wrap).hud-target{display:flex!important}
body.hud-editing #notices>[hidden]{display:block!important}
body.hud-editing #notices>:empty::after{content:'NOTICE';font:12px monospace;opacity:.7}
#hud-frame{position:fixed;z-index:1003;pointer-events:none}
/* Content is centered within both stock and user-sized HUD boxes. */
#timer,#start-speed,#cp-split,#speed{display:grid;align-content:center;justify-content:center;justify-items:center;text-align:center}
body.hud-editing :is(#timer,#start-speed,#cp-split,#speed){display:grid!important}
#speed{grid-template-columns:1fr max-content 1fr}
#speed #velocity{grid-column:2;grid-row:1}
#speed>span{grid-column:3;grid-row:1;justify-self:start;align-self:center}
#speed .speed-track{grid-column:1/-1;justify-self:center}
body.hud-editing #crosshair{min-width:0;min-height:0;cursor:pointer}
#crosshair{line-height:0}
body.hud-editing #crosshair{z-index:1002!important} /* stays clickable on top of the movement-keys box that surrounds it */
.hud-handle{position:absolute;width:12px;height:12px;background:#ffd166;border:1px solid #000;pointer-events:auto}
.hud-handle[data-d=nw]{left:-8px;top:-8px;cursor:nwse-resize}.hud-handle[data-d=n]{left:calc(50% - 5px);top:-8px;cursor:ns-resize}.hud-handle[data-d=ne]{right:-8px;top:-8px;cursor:nesw-resize}.hud-handle[data-d=e]{right:-8px;top:calc(50% - 5px);cursor:ew-resize}.hud-handle[data-d=se]{right:-8px;bottom:-8px;cursor:nwse-resize}.hud-handle[data-d=s]{left:calc(50% - 5px);bottom:-8px;cursor:ns-resize}.hud-handle[data-d=sw]{left:-8px;bottom:-8px;cursor:nesw-resize}.hud-handle[data-d=w]{left:-8px;top:calc(50% - 5px);cursor:ew-resize}
#hud-editor-panel details{margin:8px 0;border:1px solid #35505a;padding:4px 8px}
#hud-editor-panel summary{cursor:pointer;color:#9aaab2;font-size:11px;letter-spacing:1px}
body:not(.hud-editing) .hud-dummy{display:none}
body.hud-editing :is(#chat-feed,#chat-console .chat-console-log)>:not(.hud-dummy){display:none!important}
#hud-editor-panel h3{cursor:move;user-select:none}
body.hud-editing.hud-cgaz-preview #cgaz-box{display:block}
body.hud-editing.hud-cgaz-preview #cgaz-canvas{display:block!important;z-index:1001!important}
/* Default spot = top-right, just left of the default right-hand HUD column (fps, clock, records, players, powerups, vitals sit within 280px of the edge); the side button flips it to the free band on the left, between the map name (#course) and the default chat box (bottom 90px + 440px). */
#hud-confirm{position:fixed;inset:0;z-index:1003;display:flex;align-items:center;justify-content:center;background:#0008}
#hud-confirm[hidden]{display:none}
#hud-confirm .hud-confirm-box{background:#0c151cf4;border:1px solid #49616d;padding:16px 20px;font:13px Arial,sans-serif;color:#eef3f4;max-width:360px}
#hud-confirm h4{margin:0 0 6px;font-size:13px;letter-spacing:2px;color:#80e8d1}
#hud-confirm p{margin:0 0 12px;color:#9aaab2}
#hud-confirm .row{display:flex;gap:6px;flex-wrap:wrap}
#hud-confirm button{font-size:11px;padding:5px 9px;margin:0;width:auto;letter-spacing:1px}
#hud-editor-panel{position:fixed;top:20px;right:280px;z-index:1002;width:270px;max-height:calc(100vh - 40px);overflow:auto;background:#0c151cf4;border:1px solid #49616d;padding:12px 14px;font:12px Arial,sans-serif;color:#eef3f4}
#hud-editor-panel.left{right:auto;left:20px;top:150px;max-height:max(240px,calc(100vh - 150px - 90px - 440px - 12px))}
#hud-editor-panel h3{margin:0 0 8px;font-size:12px;letter-spacing:2px;color:#80e8d1;display:flex;justify-content:space-between}
#hud-editor-panel label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:6px 0}
#hud-editor-panel input[type=range]{width:120px}
#hud-editor-panel input[type=number]{width:64px}
#hud-editor-panel select{width:100%}
#hud-editor-panel .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
#hud-editor-panel button{font-size:11px;padding:4px 8px;margin:0;width:auto;letter-spacing:1px}
#hud-editor-panel .actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
#hud-editor-panel .hint{color:#9aaab2;font-size:11px;margin:6px 0}
#hud-editor-panel hr{border:0;border-top:1px solid #35505a;margin:10px 0}
#overlay>main>.settings[hidden]{display:none}
#race-challenge,#race-panel{position:fixed;right:18px;top:110px;z-index:120;background:rgba(10,18,24,.94);border:1px solid #80e8d1;border-radius:6px;padding:12px;max-width:340px;max-height:60vh;overflow:auto;color:#ddd;font:14px sans-serif;pointer-events:auto}
#race-challenge[hidden],#race-panel[hidden]{display:none}
#race-challenge strong,#race-panel strong{display:block;margin-bottom:8px;color:#80e8d1}
#race-challenge div,#race-panel div{padding:3px 0;overflow-wrap:anywhere}
#race-challenge button,#race-panel button{width:auto;margin:8px 8px 0 0;padding:6px 14px}
#race-results{position:fixed;top:20vh;left:50%;transform:translateX(-50%);text-align:left;white-space:normal;z-index:121;pointer-events:none;max-width:90vw;padding:16px 22px;background:rgba(10,18,24,.35);border:none;border-radius:4px;color:#ddd;font:bold 18px Arial,sans-serif;text-shadow:0 0 4px #000}
#race-results[hidden]{display:none}#race-results strong{display:block;margin-bottom:8px;color:#80e8d1;font-size:20px;letter-spacing:2px}#race-results div{display:grid;grid-template-columns:3ch 1.5em minmax(0,1fr);gap:6px;align-items:baseline;padding:2px 0}#race-results .race-rank{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}#race-results .me{color:#ffd24a}
#race-score{position:fixed;top:90px;left:50%;transform:translateX(-50%);z-index:8;pointer-events:none;max-width:90vw;padding:6px 12px;background:#0c151ce8;color:#80e8d1;font:bold 16px Arial,sans-serif;text-align:center}
#race-score[hidden]{display:none}
body.hud-editing:not(.hud-race-results-preview) #race-results{display:none!important}
#paused-notice{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:130;pointer-events:none;font:bold 64px Arial,sans-serif;color:#ff2020;text-shadow:0 0 8px #000,0 0 2px #000}
#paused-notice[hidden]{display:none}
#mp-loading{position:fixed;inset:0;z-index:140;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(0,0,0,.85);font:bold 32px Arial,sans-serif;color:#fff}
#mp-loading[hidden]{display:none}#mp-loading-bar{width:320px}
#paused-notice{text-align:center}#paused-notice .paused-hint{font:bold 16px Arial,sans-serif;color:#fff;margin-top:6px}
/* With chat/console open the big text gives way to a small "Game is paused" line above the chat window / under the console (HUD setup: paused.compact) */
.paused-small{display:none;position:absolute;left:0;font:14px Arial,sans-serif;color:#fff;padding:6px 8px;pointer-events:none;white-space:nowrap}
#chat-console .paused-small{bottom:100%;margin-bottom:4px;background:#0c151cf0}#qconsole .paused-small{top:100%;margin-top:4px;background:rgba(8,14,18,var(--con-opacity,.9))}
body.pz-chat #paused-notice,body.pz-console #paused-notice{display:none}
body.pz-chat #chat-console .paused-small,body.pz-console #qconsole .paused-small{display:block}
body.hud-editing:not(.hud-paused-preview) #paused-notice{display:none!important}
body.hud-editing.hud-paused-compact #chat-console .paused-small{display:block}

/* Custom sprays (account page) */
.account-sprays .spray-slots{display:flex;gap:12px;flex-wrap:wrap}
.account-sprays .spray-slot{display:flex;flex-direction:column;align-items:center;gap:6px;width:92px}
.account-sprays .spray-slot img{width:64px;height:64px;object-fit:contain;background:rgba(255,255,255,.06);border-radius:4px}
.account-sprays .spray-report:empty{display:none}
.account-sprays .spray-slot{position:relative;width:auto}
.account-sprays .spray-pick{width:72px;height:72px;padding:4px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);border-radius:4px;cursor:pointer}
.account-sprays .spray-pick.spray-empty{border-style:dashed;background:transparent}
.account-sprays .spray-pick.spray-empty::before{content:'+';font-size:28px;line-height:1;opacity:.5}
.account-sprays .spray-pick img{width:100%;height:100%;object-fit:contain}
.account-sprays .spray-pick img[hidden]{display:none}
.account-sprays .spray-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;padding:0;border-radius:50%;line-height:18px;font-size:14px;cursor:pointer}
.account-sprays .spray-remove[hidden]{display:none}
/* Personal map notes (map-notes-client.js): a small pencil next to the map name; lit when a note exists, its text is the tooltip. */
.map-note{display:inline-block;width:auto;margin:0 0 0 6px;padding:0 4px;background:transparent;border:1px solid transparent;border-radius:3px;color:#567078;font-size:11px;line-height:16px;cursor:pointer;flex:none;letter-spacing:0}
.map-note:hover{color:#80e8d1;border-color:#567078}
.map-note.has-note{color:#ffd24a;border-color:#6b5a1e;background:#2a2610}
.lb-map-note{margin:2px 0 10px;align-self:stretch;padding:0 8px;font-size:14px}
.map-note-popup{position:fixed;z-index:100000;width:min(320px,calc(100vw - 16px));padding:10px;background:#16262d;border:1px solid #80e8d1;box-shadow:0 6px 24px #000a;color:#e0f2ed;font-size:12px}
.map-note-popup textarea{width:100%;box-sizing:border-box;margin:6px 0;padding:6px;background:#20333c;border:1px solid #567078;color:#e0f2ed;font:inherit;resize:vertical}
.map-note-popup .map-note-msg{min-height:14px;color:#ff9a8a}.map-note-actions{display:flex;gap:6px}.map-note-popup .map-note-actions button{flex:1 1 0;min-width:0;width:auto;margin:0;padding:6px 4px;font-size:10px;letter-spacing:1px;box-sizing:border-box}
#leaderboard-panel .lb-pstats i.lb-delta{display:inline-block;font-style:normal;font-size:12px;letter-spacing:0;margin:0 0 0 5px;white-space:nowrap;font-variant-numeric:tabular-nums}#leaderboard-panel .lb-pstats i.lb-up{color:#5fdc78}#leaderboard-panel .lb-pstats i.lb-down{color:#ff6b6b}
#leaderboard-panel .lb-pstats i.lb-delta em.lb-arrow{font-style:normal;font-size:6px;vertical-align:middle}