:root {
  --night: #0c1715; --deep: #070d0c; --ink: #f4ecdc; --muted: #a9b3a6; --accent: #ff6a3d; --teal: #7fd1b9; --gold: #ffd166;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html, body { margin: 0; height: 100%; background: var(--deep); color: var(--ink); font-family: var(--body); overflow: hidden; overscroll-behavior: none; }
/* iPad/iPhone: Safari ignores user-scalable=no, so 'manipulation' above stops double-tap zoom; no long-press text selection or callout either */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
#stage { position: fixed; inset: 0; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { display: inline-block; min-width: 1.7em; padding: .1em .45em; border: 1px solid rgba(244,236,220,.35); border-bottom-width: 2px; border-radius: 5px; background: rgba(244,236,220,.08); font: 700 .85em var(--body); text-align: center; }

/* ------- top bar */
#topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: max(12px, env(safe-area-inset-top)) 16px 0; z-index: 30; pointer-events: none; }
#topbar > * { pointer-events: auto; }
.back { color: var(--ink); text-decoration: none; font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .75; padding: 8px 10px; border-radius: 8px; background: rgba(7,13,12,.35); backdrop-filter: blur(6px); }
.back:hover { opacity: 1; }
.tb-r { display: flex; gap: 8px; }
.tb-r button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(244,236,220,.2); background: rgba(7,13,12,.45); backdrop-filter: blur(6px); font-size: 15px; line-height: 1; }
.tb-r button:hover { border-color: var(--accent); }

/* ------- HUD */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; font-family: var(--display); text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.lbl { font: 700 11px var(--body); letter-spacing: .22em; opacity: .75; }
.hud-tl { position: absolute; top: 58px; left: max(18px, env(safe-area-inset-left)); }
.time { font-size: clamp(38px, 6vw, 62px); font-weight: 900; line-height: .95; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.delta { font: 700 17px var(--body); height: 22px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.delta.ahead { color: var(--teal); } .delta.behind { color: var(--accent); }
.hud-tr { position: absolute; top: 50px; right: max(18px, env(safe-area-inset-right)); text-align: right; }
.speed span { font-size: clamp(54px, 8vw, 86px); font-weight: 900; line-height: .9; color: var(--accent); font-variant-numeric: tabular-nums; }
.speed small { display: block; font: 700 11px var(--body); letter-spacing: .24em; opacity: .75; margin-top: 2px; }
.hud-tc { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: min(34vw, 340px); }
.prog { height: 4px; border-radius: 2px; background: rgba(244,236,220,.22); overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--accent)); }
.hud-bl { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); width: min(36vw, 250px); }
.flow { height: 9px; border-radius: 5px; margin-top: 6px; background: rgba(0,0,0,.45); border: 1px solid rgba(244,236,220,.2); overflow: hidden; }
.flow i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--gold) 60%, var(--accent)); box-shadow: 0 0 14px var(--accent); transition: width .1s linear; }
.score { margin-top: 8px; font: 700 14px var(--body); opacity: .9; } .score small { letter-spacing: .2em; opacity: .7; margin-right: 6px; font-size: 10px; } .score b { font-family: var(--display); font-size: 24px; font-weight: 900; }
#minimap { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 120px; height: 120px; opacity: .85; }
#popups { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; }
.pop { font-size: clamp(22px, 3.4vw, 34px); font-weight: 900; letter-spacing: .06em; color: var(--gold); animation: pop 1.5s ease-out forwards; white-space: nowrap; }
.pop small { font: 700 .55em var(--body); color: var(--teal); margin-left: 8px; letter-spacing: .1em; }
@keyframes pop { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 12% { opacity: 1; transform: translateY(0) scale(1.08); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
#tip { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); font: 500 15px var(--body); color: var(--ink); background: rgba(7,13,12,.55); backdrop-filter: blur(6px); padding: 8px 14px; border-radius: 10px; opacity: 0; transition: opacity .4s; text-shadow: none; max-width: 90vw; text-align: center; }
#tip.on { opacity: 1; }

#split { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); z-index: 12; font: 900 clamp(26px, 4vw, 44px) var(--display); letter-spacing: .08em; animation: pop 2.2s ease-out forwards; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
#countdown { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; font: 900 clamp(110px, 24vw, 260px) var(--display); color: var(--ink); text-shadow: 0 0 40px rgba(255,106,61,.8), 0 4px 30px rgba(0,0,0,.6); pointer-events: none; }
#countdown span { animation: cd .9s ease-out forwards; }
@keyframes cd { 0% { opacity: 0; transform: scale(1.7); } 25% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.9); } }
#crash { position: absolute; inset: 0; z-index: 12; display: grid; place-content: center; text-align: center; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255,60,30,.0) 30%, rgba(180,30,10,.4) 100%); }
#crash b { font: 900 clamp(60px, 12vw, 130px) var(--display); letter-spacing: .08em; color: var(--ink); text-shadow: 0 0 40px rgba(255,60,30,.9); animation: cd 1.6s ease-out forwards; }
#crash span { font: 700 16px var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
#debug { position: absolute; left: 10px; bottom: 150px; z-index: 40; font: 12px ui-monospace, Menlo, monospace; background: rgba(0,0,0,.6); padding: 6px 8px; border-radius: 6px; white-space: pre; }

/* ------- overlays and cards */
.overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
#menu { background: linear-gradient(90deg, rgba(7,13,12,.82) 0%, rgba(7,13,12,.5) 42%, rgba(7,13,12,0) 70%); place-items: center start; }
#loading { background: radial-gradient(ellipse at 50% 60%, #3a1d3a 0%, var(--deep) 70%); z-index: 50; }
#pause, #finish, #nogl { background: rgba(7,13,12,.62); backdrop-filter: blur(8px); }
.menu-card, .load-card { width: min(100%, 540px); padding: clamp(10px, 4vw, 40px); }
.menu-card.small { width: min(100%, 340px); text-align: center; background: rgba(12,23,21,.85); border: 1px solid rgba(244,236,220,.14); border-radius: 18px; }
#finish .menu-card { text-align: center; background: rgba(12,23,21,.86); border: 1px solid rgba(244,236,220,.14); border-radius: 20px; }
.logo { font: 700 11px var(--body); letter-spacing: .32em; color: var(--teal); }
h1 { margin: 6px 0 2px; font: 900 clamp(60px, 10vw, 112px)/.84 var(--display); padding-right: .08em; letter-spacing: .01em; background: linear-gradient(180deg, #fff1c8, var(--accent) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 24px rgba(255,106,61,.35)); }
h2 { margin: 6px 0 14px; font: 900 clamp(44px, 9vw, 72px)/.95 var(--display); }
.tracks { display: flex; gap: 8px; margin: 14px 0 12px; }
.trk { flex: 1 1 0; min-width: 0; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: var(--ink); background: rgba(244,236,220,.06); border: 1px solid rgba(244,236,220,.14); font: inherit; transition: background .15s, border-color .15s; }
.trk:hover, .trk:focus-visible { background: rgba(244,236,220,.12); border-color: rgba(244,236,220,.3); }
.trk.on { cursor: default; background: rgba(255,106,61,.16); border-color: var(--accent); }
.trk b { display: block; font: 900 22px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.trk small { display: block; margin-top: 4px; font: 500 12px/1.3 var(--body); opacity: .75; }
.trk i { display: block; margin-top: 6px; font: 700 10px var(--body); font-style: normal; letter-spacing: .16em; color: var(--gold); }
.riders-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.riders-row .lbl { font: 700 11px var(--body); letter-spacing: .18em; color: var(--muted); }
.riders { display: flex; gap: 6px; flex-wrap: wrap; }
.rdr { display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border-radius: 999px; cursor: pointer; color: var(--ink); background: rgba(244,236,220,.06); border: 1px solid rgba(244,236,220,.14); font: 700 13px var(--body); transition: background .15s, border-color .15s; }
.rdr:hover, .rdr:focus-visible { background: rgba(244,236,220,.12); border-color: rgba(244,236,220,.3); }
.rdr.on { background: rgba(255,106,61,.16); border-color: var(--accent); }
.rdr i { width: 22px; height: 22px; border-radius: 50%; flex: none; background: linear-gradient(180deg, var(--h) 0 52%, var(--a) 52% 60%, var(--j) 60%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.sub { font: 700 13px var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.stats { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; } #finish .stats { justify-content: center; }
.stats > div { flex: 1 1 70px; padding: 8px 10px; border-radius: 10px; background: rgba(244,236,220,.07); border: 1px solid rgba(244,236,220,.1); text-align: left; }
.stats b { display: block; font: 900 26px/1 var(--display); } .stats small { font: 700 10px var(--body); letter-spacing: .18em; opacity: .7; }
.best { min-height: 22px; font: 700 14px var(--body); color: var(--gold); margin-bottom: 10px; letter-spacing: .04em; }
.cta, .ghost { display: block; width: 100%; border-radius: 12px; padding: 14px 18px; font: 900 22px var(--display); letter-spacing: .14em; text-align: center; text-decoration: none; margin-top: 10px; }
.cta { border: 0; color: #1b0f0a; background: linear-gradient(180deg, #ff8a5c, var(--accent)); box-shadow: 0 8px 30px rgba(255,106,61,.4), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .12s, box-shadow .12s; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(255,106,61,.55), inset 0 1px 0 rgba(255,255,255,.4); }
.ghost { background: rgba(244,236,220,.06); border: 1px solid rgba(244,236,220,.22); font-size: 17px; } .ghost:hover { border-color: var(--teal); }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 18px 0 8px; font: 500 13px var(--body); color: var(--muted); }
.controls span { margin-left: 8px; } .controls div:nth-child(2) { grid-column: 1 / -1; order: 3; }
.how { font: 400 13px/1.5 var(--body); color: var(--muted); margin: 10px 0; }
.how b { color: var(--accent); }
.link { color: var(--teal); font: 700 12px var(--body); letter-spacing: .08em; text-decoration: none; } .link:hover { text-decoration: underline; }
.medal { display: inline-block; font: 900 22px var(--display); letter-spacing: .24em; padding: 4px 16px; border-radius: 999px; border: 2px solid currentColor; margin-bottom: 8px; }
.medal.gold { color: var(--gold); } .medal.silver { color: #cfd6d4; } .medal.bronze { color: #d98a54; } .medal.none { color: var(--muted); }
.bar { height: 6px; border-radius: 3px; background: rgba(244,236,220,.14); overflow: hidden; margin: 18px 0 10px; } .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--accent)); transition: width .2s; }
#load-msg { font: 700 12px var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ------- online leaderboard: menu panel and finish screen */
.board-card { position: absolute; right: clamp(16px, 3vw, 44px); top: 50%; translate: 0 -50%; width: 300px; max-height: calc(100% - 120px); overflow-y: auto; padding: 18px 18px 14px; border-radius: 18px; background: rgba(12,23,21,.78); border: 1px solid rgba(244,236,220,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.board-track { font: 900 26px/1 var(--display); letter-spacing: .02em; margin: 4px 0 12px; }
.board-rows { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.board-rows li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: baseline; padding: 6px 4px; border-top: 1px solid rgba(244,236,220,.08); font: 500 14px var(--body); }
.board-rows li:first-child { border-top: 0; }
.board-rows li i { font: 900 16px var(--display); font-style: normal; color: var(--muted); }
.board-rows li:nth-child(1) i { color: var(--gold); } .board-rows li:nth-child(2) i { color: #cfd6d4; } .board-rows li:nth-child(3) i { color: #d98a54; }
.board-rows li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-rows li b { font: 700 15px var(--display); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.board-rows li.me { background: rgba(255,106,61,.16); border-radius: 8px; border-top-color: transparent; }
.board-rows li.me span::after { content: " · you"; color: var(--accent); font-weight: 700; }
.board-rows li.empty { display: block; color: var(--muted); padding: 10px 4px; }
.board-you { margin-top: 10px; font: 700 11px var(--body); letter-spacing: .14em; color: var(--muted); min-height: 14px; }
.ghost.record { font-size: 15px; padding: 10px 12px; margin-top: 12px; }
.ghost.record.on { border-color: var(--teal); color: var(--teal); background: rgba(127,209,185,.1); }
.post { margin: 4px 0 10px; padding: 12px 14px; border-radius: 12px; background: rgba(244,236,220,.06); border: 1px solid rgba(244,236,220,.12); }
.post-h { font: 700 11px var(--body); letter-spacing: .2em; color: var(--teal); margin-bottom: 8px; }
.post-form { display: flex; gap: 8px; }
.post-form input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(244,236,220,.25); background: rgba(7,13,12,.6); color: var(--ink); font: 500 16px var(--body); }
.post-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.post-go { padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer; font: 900 18px var(--display); letter-spacing: .12em; color: #1b0f0a; background: linear-gradient(180deg, #ff8a5c, var(--accent)); }
.post-note { margin-top: 8px; font: 400 12px/1.4 var(--body); color: var(--muted); }
.post-err { margin-top: 8px; font: 700 13px var(--body); color: var(--accent); }
.post-rank { font: 900 24px/1.1 var(--display); letter-spacing: .06em; color: var(--gold); }
.post-rank.record { font-size: 30px; background: linear-gradient(180deg, #fff1c8, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.post-link { border: 0; padding: 0; background: none; color: var(--teal); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 1100px) {
  #menu { grid-template-columns: 1fr; grid-auto-rows: max-content; align-content: start; }
  .board-card { position: static; translate: none; width: auto; max-width: 540px; max-height: none; overflow: visible; margin: 0 clamp(10px, 4vw, 40px) 24px; }
}

/* ------- touch */
#touch { position: absolute; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; justify-content: space-between; padding: 0 max(14px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-bottom)); pointer-events: none; }
.tgroup { display: flex; gap: 12px; pointer-events: auto; }
#touch button { width: min(84px, 20vw); height: min(84px, 20vw); border-radius: 50%; border: 2px solid rgba(244,236,220,.4); background: rgba(7,13,12,.45); backdrop-filter: blur(4px); color: var(--ink); font: 900 15px var(--display); letter-spacing: .1em; touch-action: none; user-select: none; -webkit-user-select: none; }
#touch button.down { background: rgba(255,106,61,.6); border-color: var(--accent); }
.touch-on .hud-bl { bottom: 118px; } .touch-on #minimap { bottom: 118px; width: 90px; height: 90px; }

@media (max-width: 700px) {
  #menu { background: linear-gradient(180deg, rgba(7,13,12,.78), rgba(7,13,12,.55)); place-items: center; }
  .controls { display: none; }
  .hud-tl { top: 54px; } .time { font-size: 36px; }
  .speed span { font-size: 48px; }
  #minimap { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pop, #crash b, #countdown span { animation-duration: .01s; } }

.clean #hud, .clean #topbar, .clean #tip, .clean #touch, .clean #split { display: none !important; }