/* The menus share the reference's cream / indigo / coral / mint palette.
   Gameplay keeps its existing pixel HUD. No full-screen blur or extra canvas. */
:root {
  --ui-ink:#16182f; --ui-panel:#232641; --ui-mint:#64ffca;
  --ui-coral:#ff706a; --ui-cream:#fff4d8; --ui-muted:#b7bad5;
  --ui-font:'Bahnschrift','Arial Narrow','Segoe UI',sans-serif;
  --ui-display:Impact,'Arial Narrow','Bahnschrift',sans-serif;
}
.ui-sr-only { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.ui-icon { display:block;width:1.6em;height:1.6em;fill:currentColor;flex-shrink:0; }
#menu { inset:0;z-index:4;pointer-events:none;color:var(--ui-cream);font-family:var(--ui-font);
  background:linear-gradient(90deg,transparent 50%,#14183216 75%,#14183242); }
#menu.hidden { display:none; }
#menu *,#charbuilder *,#menu-gen * { box-sizing:border-box; }
#menu [hidden] { display:none!important; }
#menu-title { position:absolute;left:2.2vw;top:2vh;width:53vw;max-width:880px;pointer-events:none; }
#menu-logo { display:block;width:100%;height:auto;max-height:31vh;object-fit:contain;
  object-position:left top;filter:drop-shadow(0 6px 0 #19203925); }
#menu-box { --board-pad:clamp(16px,1.6vw,28px);
  position:absolute;right:3.4vw;top:50%;width:35.8vw;max-width:570px;min-width:330px;
  padding:var(--board-pad);border:5px solid #485178;border-radius:30px;
  background:linear-gradient(115deg,#303453,#1a1d36 68%);
  box-shadow:inset 3px 3px 0 #727ba05c,inset -5px -5px 0 #111329,8px 12px 0 #14162bc9,0 22px 40px #080c2438;
  transform:translateY(-41%) rotate(-1.4deg);pointer-events:auto;isolation:isolate;
  max-height:80vh; }
.m-roof { position:absolute;width:calc(100% + 8px);height:auto;left:-4px;bottom:calc(100% - 19px);
  z-index:-1;pointer-events:none;overflow:visible; }
.m-page { display:flex;flex-direction:column;gap:clamp(10px,1.4vh,16px);min-height:0; }
#menu button { -webkit-tap-highlight-color:transparent;cursor:pointer;color:inherit;
  font-family:var(--ui-font);font-weight:750;letter-spacing:.025em;touch-action:manipulation; }
#menu button:focus-visible { outline:3px solid var(--ui-cream);outline-offset:5px; }
#menu button:disabled { opacity:.45;cursor:not-allowed; }
.ui-button { display:flex;align-items:center;justify-content:center;gap:.6em;
  min-height:44px;padding:12px 14px;border:3px solid #505879;border-radius:15px;
  background:linear-gradient(135deg,#343954,#242741);color:var(--ui-cream);
  box-shadow:inset 1px 2px 0 #a4acc72b,inset -2px -3px 0 #171a32,0 3px 0 #101328;
  transition:transform .12s,border-color .12s,background .12s; }
#menu .ui-button:hover { border-color:#8994be;background:linear-gradient(135deg,#424964,#2a2e4f);transform:translateY(-2px); }
#menu button:active { transform:translateY(2px); }
#menu .ui-primary { --icon-cutout:#65ffcc;color:#111b30;border:4px solid #b3ffe5;
  background:linear-gradient(125deg,#94ffdc,#4df6c2 75%,#35d9b8);
  box-shadow:inset 0 4px 0 #e1fff36b,inset -4px -5px 0 #168c8873,0 5px 0 #137a7d,0 0 22px #43ffcd28; }
#menu .ui-primary:hover { background:linear-gradient(125deg,#b1ffe5,#68ffd0);border-color:#f0fff9; }
#m-start { min-height:clamp(85px,13vh,152px);justify-content:space-between;
  padding:15px 22px;border-radius:23px;font:italic clamp(40px,4.5vw,76px)/1 var(--ui-display);letter-spacing:.015em; }
#m-start > :first-child .ui-icon { width:.9em;height:.9em; }
#m-start > :last-child .ui-icon { width:.55em;height:.55em; }
#m-modes { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,15px); }
#menu .m-mode { --icon-cutout:#2b2e48;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;min-height:clamp(98px,15vh,165px);padding:16px 3px 12px;
  border:3px solid #515b82;border-radius:19px;background:linear-gradient(120deg,#32364e,#25273f);
  box-shadow:inset 2px 3px 0 #8a96ba33,inset -2px -3px 0 #171a30,0 4px 0 #13162a;
  font:clamp(15px,1.55vw,26px)/1.1 var(--ui-display);letter-spacing:.02em;
  transition:transform .12s,border-color .12s; }
.m-mode .ui-icon { width:clamp(38px,4.1vw,64px);height:clamp(38px,4.1vw,64px); }
#menu .m-mode:hover { border-color:#adb8d7;transform:translateY(-2px); }
#menu .m-mode.sel { --icon-cutout:#fb746d;background:linear-gradient(125deg,#ff9684,#ff706d 65%,#e45160);
  border-color:#ffe5c7;box-shadow:inset 3px 4px 0 #ffd4b68c,inset -3px -4px 0 #b530554f,0 4px 0 #892847,0 0 17px #ff63685c; }
.m-rule { height:2px;background:linear-gradient(90deg,#9680a170,#5a668970);flex-shrink:0; }
.m-selection-row { display:flex;align-items:stretch;gap:10px; }
#menu .m-route-link,#menu .m-players-link { border:0;background:transparent;box-shadow:none;
  display:flex;align-items:center;padding:4px 0;text-align:left;min-width:0; }
#menu .m-route-link { flex:1;justify-content:space-between;gap:10px; }
.m-route-link > span:first-child { min-width:0; }
.m-route-link small { display:block;font-size:10px;letter-spacing:.12em;color:#bbb9d1;margin-bottom:5px; }
.m-route-link b { display:block;font-size:clamp(13px,1.25vw,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.m-route-link .ui-icon { width:17px;height:21px;color:var(--ui-mint); }
#menu .m-players-link { padding-left:13px;border-left:1px solid #586181;gap:7px;font-size:12px;white-space:nowrap; }
.m-players-link .ui-icon { width:18px;height:18px;color:#c2bed9; }
#menu .m-generator { justify-content:flex-start;font-size:clamp(13px,1.15vw,18px);padding:10px 13px;min-height:54px;
  border-width:2px;border-color:#596187;background:linear-gradient(115deg,#3b405f,#292d49); }
.m-generator > span:nth-child(2) { flex:1;text-align:left; }
.m-generator small { display:block;color:#c1c0d5;font-size:11px;letter-spacing:0;font-weight:400;margin-top:3px; }
.m-generator > :last-child .ui-icon { width:18px;height:18px; }
.m-bottom-row { display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:10px; }
#menu .m-bottom-row button { min-height:65px;padding:10px 7px;gap:7px;font:clamp(14px,1.3vw,21px)/1.15 var(--ui-display);letter-spacing:.015em; }
.m-bottom-row .ui-icon { width:25px;height:25px; }
#menu .m-tutorial-link { align-self:center;border:0;background:none;padding:3px 8px;
  font-size:11px;color:#c7c4d7;font-weight:500; }
.m-tutorial-link span { color:var(--ui-mint);margin-left:5px; }
#menu .m-tutorial-link:hover { color:white; }

/* Submenus keep the same sign; only the inner face changes. */
#menu:not([data-page="home"]) #menu-box { transform:translateY(-46%);max-height:86vh; }
.m-subpage { max-height:calc(82vh - var(--board-pad)*2); }
.m-subhead { display:flex;align-items:center;gap:12px;flex-shrink:0;padding-bottom:10px;border-bottom:2px solid #525a7a; }
#menu .m-subhead button { border:2px solid #626c92;border-radius:12px;background:#353b58;padding:6px; }
.m-subhead .ui-icon { width:22px;height:22px; }
.m-subhead small { font-size:10px;letter-spacing:.12em;color:var(--ui-mint); }
.m-subhead h2 { font:clamp(23px,2vw,32px)/1.1 var(--ui-display);margin:4px 0 0;letter-spacing:.035em;color:var(--ui-cream); }
.m-player-row { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0; }
.m-player-row b { font-size:12px; }.m-player-row small { display:block;font-size:10px;color:var(--ui-muted);margin-top:4px; }
#m-players { display:flex;gap:5px; }
#menu .m-player { border:2px solid #535f82;border-radius:10px;background:#2d344f;
  width:34px;height:38px;font-size:16px; }
#menu .m-player.sel { background:var(--ui-coral);border-color:#ffddca;color:#fff; }
#m-tracks { display:grid;grid-template-columns:1fr;gap:10px;overflow:auto;padding:3px 6px 6px 3px;min-height:0; }
#menu .m-track { position:relative;border:2px solid #525c7d;border-radius:13px;background:#292e49;
  text-align:left;padding:12px 34px 12px 13px;letter-spacing:0; }
.m-track b { display:block;font-size:15px;color:var(--ui-cream); }
.m-track small { display:block;margin-top:4px;color:#bdc4dc;font-size:11px;font-weight:400; }
.m-track > span { display:block;margin-top:7px;color:#98d8d0;font-size:10px;font-weight:400; }
.m-track-check { position:absolute;right:12px;top:12px;font-style:normal;color:#7d89a3; }
#menu .m-track.sel { border-color:var(--ui-mint);background:linear-gradient(120deg,#2e494f,#253749); }
.m-track.sel .m-track-check { color:var(--ui-mint); }
#menu .m-track:hover { border-color:#b1bedf; }
#menu .m-done { min-height:52px;font-size:15px;flex-shrink:0;padding:12px 8px; }
#menu .m-route-generator { min-height:42px;padding:8px;font-size:12px;flex-shrink:0;justify-content:center; }
.m-settings-scroll { overflow:auto;min-height:0;padding:2px 6px 2px 2px; }
.m-setting-sound { display:flex;align-items:center;gap:12px;margin:5px 0 24px;font-size:14px; }
#menu #m-sound { margin-left:auto;display:flex;align-items:center;gap:12px;background:#1f3e45;border:2px solid #5ce7bd;border-radius:30px;padding:6px 8px 6px 15px;color:var(--ui-mint);font-size:12px; }
#m-sound i { width:20px;height:20px;border-radius:50%;background:var(--ui-mint); }
#menu #m-sound[aria-checked="false"] { border-color:#68718e;background:#30344a;color:#c2c5d6; }
#m-sound[aria-checked="false"] i { background:#a4abc5; }
.m-setting-block { margin:0 0 23px; }
.m-setting-block h3 { margin:0 0 10px;font-size:12px;letter-spacing:.12em;color:#f2dccf; }
.m-setting-block p { margin:10px 0 0;color:var(--ui-muted);font-size:11px;line-height:1.65; }
.m-quality { display:grid;grid-template-columns:repeat(4,1fr);gap:7px; }
#menu .m-quality button { font-size:10px;padding:10px 4px;min-height:40px;border-width:2px;border-radius:10px; }
#menu .m-quality button.sel { border-color:var(--ui-mint);background:#2c494f; }
.m-key-guide { display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:11px;color:var(--ui-muted); }
.m-key-guide kbd { display:inline-block;padding:4px 6px;background:#3d4360;border:1px solid #737b9c;border-radius:5px;
  color:var(--ui-cream);font:600 10px var(--ui-font);margin-right:4px; }
#m-board-row { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
#menu #m-board-row button { font-size:10px;padding:10px 5px;min-height:40px;border-width:2px;border-radius:10px; }
#m-board-row #m-board { grid-column:1/-1; }
#menu ::-webkit-scrollbar { width:5px; }
#menu ::-webkit-scrollbar-thumb { background:#687594;border-radius:5px; }
#menu ::-webkit-scrollbar-track { background:#171c32;border-radius:5px; }

/* Preserve board-test's shared option controls without the old pixel cabinet. */
#bt-aopts .m-opt { padding:7px;border:1px solid #69799f;background:#303b58;color:#fff3de;border-radius:5px; }
#bt-aopts .m-opt.sel { background:#4aa98e; }

/* Narrow screens deliberately stack hero above the compact menu. */
@media (max-width:899px),(max-aspect-ratio:6/5) {
  #menu { background:linear-gradient(transparent 33%,#1b1e321f 55%,#1b1e3266); }
  #menu-title { left:4vw;top:1.5vh;width:min(78vw,610px);max-width:none; }
  #menu-logo { max-height:23vh; }
  #menu-box { --board-pad:15px;left:50%;right:auto;top:auto;bottom:2.5vh;width:min(88vw,500px);min-width:0;
    max-height:49vh;transform:translateX(-50%);border-width:4px;border-radius:23px; }
  .m-roof { max-height:60px; }
  .m-page { gap:9px; }
  #m-start { min-height:68px;font-size:43px;padding:9px 17px;border-radius:16px; }
  #menu .m-mode { min-height:76px;padding:8px 3px;gap:4px;font-size:17px;border-radius:13px; }
  .m-mode .ui-icon { width:34px;height:34px; }
  .m-route-link b { font-size:13px; }.m-route-link small { font-size:8px;margin-bottom:3px; }
  #menu .m-generator { min-height:40px;padding:6px 11px;font-size:13px;border-radius:10px; }
  .m-generator small { display:none; }
  #menu .m-bottom-row button { min-height:44px;font-size:16px;border-radius:11px; }
  .m-bottom-row .ui-icon { width:22px;height:22px; }
  .m-rule { height:1px; }.m-tutorial-link { font-size:10px; }
  #menu:not([data-page="home"]) #menu-box { top:auto;bottom:3vh;max-height:72vh;transform:translateX(-50%); }
  .m-subpage { max-height:calc(72vh - 38px); }
}
@media (max-height:700px) and (min-aspect-ratio:6/5) {
  #menu-box { --board-pad:13px;top:52%;width:36vw;min-width:300px;max-height:84vh;transform:translateY(-44%) rotate(-1deg); }
  .m-page { gap:8px; }#m-start { min-height:72px;font-size:44px;padding:10px 15px; }
  #menu .m-mode { min-height:86px;padding:8px 3px;gap:5px;font-size:17px; }
  .m-mode .ui-icon { width:36px;height:36px; }
  #menu .m-generator { min-height:40px;padding:7px 10px; }
  .m-generator small { display:none; }#menu .m-bottom-row button { min-height:46px;font-size:15px; }
  .m-subpage { max-height:calc(80vh - 30px); }
}
/* Phone in landscape (~390 px tall): no roof, centred, everything smaller,
   and the box scrolls rather than running off the bottom of the screen. */
@media (max-height:460px) and (min-aspect-ratio:6/5) {
  /* Side by side again (the narrow-screen block above stacks them). */
  #menu { background:linear-gradient(90deg,transparent 45%,#14183230 75%,#14183260); }
  #menu-title { left:3vw;top:3vh;width:44vw; }
  #menu-box,#menu:not([data-page="home"]) #menu-box { --board-pad:10px;left:auto;right:3vw;top:50%;bottom:auto;
    width:46vw;min-width:320px;max-height:calc(100vh - 16px);transform:translateY(-50%) rotate(-.8deg);
    border-width:4px;border-radius:20px;overflow-y:auto; }
  .m-roof { display:none; }
  #menu-logo { max-height:26vh; }
  .m-page { gap:6px; }
  #m-start { min-height:50px;font-size:32px;padding:6px 14px;border-radius:16px; }
  #menu .m-mode { min-height:58px;padding:5px 3px;gap:3px;font-size:14px;border-radius:14px; }
  .m-mode .ui-icon { width:26px;height:26px; }
  #menu .m-generator { min-height:38px;padding:5px 10px; }
  #menu .m-bottom-row button { min-height:40px;font-size:13px; }
  .m-subpage { max-height:calc(100vh - 36px); }
  .m-setting-block { margin-bottom:14px; }
}
@media (max-width:480px) {
  #menu-box { width:92vw;bottom:2vh;--board-pad:12px;max-height:53vh; }
  #menu-title { width:91vw;left:3vw; }
  .m-page { gap:8px; }#m-start { min-height:61px;font-size:38px; }
  #menu .m-mode { min-height:67px;font-size:15px; }.m-mode .ui-icon { width:30px;height:30px; }
  #menu .m-bottom-row button { font-size:14px;gap:6px;min-height:41px;padding:6px; }
  .m-bottom-row .ui-icon { width:20px;height:20px; }
  .m-players-link span:last-child { font-size:10px; }
  .m-player-row { gap:7px; }.m-player-row small { max-width:115px; }
  #menu .m-player { width:30px; }
}
@media (prefers-reduced-motion:reduce) {
  #menu button { transition:none!important; }
}

/* --- RANGLIJST (leaders-ui.js) ---------------------------------------- */
.lbo-modes,.lbo-tracks { display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0; }
#menu .lbo-chip { border:2px solid #525c7d;border-radius:10px;background:#292e49;padding:6px 10px;
  font:12px/1.1 var(--ui-font);font-weight:750;letter-spacing:.04em;color:var(--ui-muted); }
#menu .lbo-chip.sel { border-color:var(--ui-mint);background:#2c494f;color:var(--ui-cream); }
#menu .lbo-track { font-size:11px; }
.lbo-list { list-style:none;margin:0;padding:3px 6px 3px 3px;overflow:auto;min-height:60px;flex:1 1 auto;
  display:flex;flex-direction:column;gap:5px; }
.lbo-row { display:grid;grid-template-columns:2.4em 1fr auto auto;align-items:center;gap:8px;
  padding:6px 8px;border-radius:10px;background:#262a44;border:2px solid #3b4263;font-size:13px; }
.lbo-row.me { border-color:var(--ui-mint);background:#24413f; }
.lbo-rank { font:15px/1 var(--ui-display);color:var(--ui-muted); }
.lbo-row.top1 .lbo-rank { color:#ffd24a; } .lbo-row.top2 .lbo-rank { color:#d8dcef; } .lbo-row.top3 .lbo-rank { color:#e09a5e; }
.lbo-name { color:var(--ui-cream);font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.lbo-time { font:15px/1 var(--ui-display);letter-spacing:.03em;color:var(--ui-cream); }
#menu .lbo-ghost { border:2px solid #626c92;border-radius:8px;background:#353b58;padding:4px 8px;font-size:10px;letter-spacing:.06em; }
.lbo-status { margin:0;min-height:1.2em;font-size:11px;color:var(--ui-muted); }
.lbo-actions { display:grid;grid-template-columns:1.6fr 1fr;gap:8px;flex-shrink:0; }
#menu .lbo-actions button { min-height:48px;font:clamp(13px,1.15vw,18px)/1.1 var(--ui-display);letter-spacing:.02em; }
#lbo-race-label { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* --- ACCOUNT ------------------------------------------------------------ */
.acc-form,.acc-in { display:flex;flex-direction:column;gap:9px; }
.acc-tabs { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
#menu .acc-tabs button { border:2px solid #525c7d;border-radius:10px;background:#292e49;padding:8px;
  font-size:12px;letter-spacing:.06em;color:var(--ui-muted); }
#menu .acc-tabs button.sel { border-color:var(--ui-mint);background:#2c494f;color:var(--ui-cream); }
.acc-form label { display:flex;flex-direction:column;gap:4px;font-size:10px;letter-spacing:.12em;color:#f2dccf; }
.acc-form input { font:15px var(--ui-font);padding:10px 12px;border-radius:10px;border:2px solid #525c7d;
  background:#171a30;color:var(--ui-cream);user-select:text;-webkit-user-select:text; }
.acc-form input:focus { outline:none;border-color:var(--ui-mint); }
#menu .acc-link { background:none;border:0;padding:2px;color:var(--ui-muted);font-size:11px;text-decoration:underline;align-self:flex-start; }
.acc-in p { margin:0;color:var(--ui-muted);font-size:12px; }
.acc-in b { font:24px/1.1 var(--ui-display);color:var(--ui-cream); }
.acc-in small { color:var(--ui-muted);font-size:11px; }
.acc-in .acc-note { line-height:1.5;margin:6px 0; }
.acc-status { margin:4px 0 0;min-height:1.2em;font-size:12px;color:var(--ui-mint); }
.acc-status.bad { color:var(--ui-coral); }