:root { --ink:#f4f1ea; --accent:#ffd84d; --brick:#b5552f; --bg:#1a2433; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--ink); font-family: -apple-system, "Helvetica Neue", Inter, system-ui, sans-serif; touch-action:none; overscroll-behavior:none; }
#c { position:fixed; inset:0; width:100%; height:100%; display:block; }
button { font: inherit; }

/* HUD */
#hud { position:fixed; inset:0; pointer-events:none; z-index:5; }
#hud-top { position:absolute; left:0; right:0; top:calc(10px + var(--safe-t)); display:flex; justify-content:space-between; align-items:flex-start; padding:0 14px; }
#hud-score { text-shadow:0 2px 8px rgba(0,0,0,.6); }
#hud-score .lbl { font-size:11px; letter-spacing:.2em; opacity:.75; }
#score-val { font-size:34px; font-weight:800; line-height:1; font-variant-numeric: tabular-nums; }
#best-val { font-size:12px; opacity:.7; margin-top:2px; }
#hud-loc { background:rgba(10,14,20,.55); padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600; letter-spacing:.02em; backdrop-filter: blur(6px); transition: transform .25s; }
#hud-loc.flash { transform: scale(1.12); background: rgba(181,85,47,.85); }
#hud-right { display:flex; gap:8px; pointer-events:auto; }
.pill { background:rgba(10,14,20,.55); color:var(--ink); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
body.touch .pill { min-width:52px; min-height:42px; padding:6px 14px; font-size:13px; }   /* thumb-sized */
/* SPECIAL (gold) + FLOW (green) meters, stacked under the score in both modes */
#meters { margin-top:6px; display:flex; flex-direction:column; gap:3px; width:118px; }
.meter { height:5px; border-radius:3px; background:rgba(0,0,0,.5); box-shadow:0 1px 3px rgba(0,0,0,.5); overflow:hidden; }
.meter > i { display:block; height:100%; width:0%; border-radius:3px; transition:width .12s linear; }
#m-special > i { background:#f0c33c; }
#m-flow > i { background:#2c9a58; }
#m-special.full { box-shadow:0 0 10px 2px rgba(240,195,60,.75); }
#m-special.full > i { background:#fff0b0; }
/* B-T-O-W-N tray */
#letters { margin-top:6px; display:flex; gap:5px; }
#letters b { font-size:13px; font-weight:900; letter-spacing:.06em; opacity:.5; text-shadow:0 1px 5px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.7); }
#letters b.got { opacity:1; color:var(--accent); }
/* 2-minute run clock */
#timer { position:absolute; left:50%; top:0; transform:translateX(-50%); font-size:30px; font-weight:900;
  font-variant-numeric:tabular-nums; text-shadow:0 2px 10px rgba(0,0,0,.8); opacity:0; transition:opacity .2s; }
#timer.on { opacity:1; }
#timer.low { color:#ff5a48; }
/* the clock takes the middle of the top bar, so the location pill steps down out of it */
body.run #hud-loc { margin-top:40px; }
@media (orientation: portrait) { body.run #hud-loc { top:calc(102px + var(--safe-t)); margin-top:0; } }
#combo { position:absolute; left:50%; top:18%; transform:translateX(-50%); text-align:center; opacity:0; transition:opacity .15s; text-shadow:0 2px 10px rgba(0,0,0,.7); max-width:90vw; }
#combo.on { opacity:1; }
#combo-tricks { font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#combo-tricks .plus { opacity:.5; margin:0 2px; }
#combo-tricks .live { color:var(--accent); }
#combo-total { font-size:26px; font-weight:900; color:var(--accent); margin-top:2px; transform-origin:center; }
#balance { position:absolute; left:50%; bottom:28%; width:180px; height:8px; margin-left:-90px; background:rgba(0,0,0,.45); border-radius:4px; opacity:0; transition:opacity .15s; }
#balance.on { opacity:1; }
#balance::before { content:""; position:absolute; left:50%; top:-4px; width:2px; height:16px; background:rgba(255,255,255,.6); }
#balance-knob { position:absolute; top:-5px; width:18px; height:18px; margin-left:-9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px rgba(0,0,0,.4); }
#charge { position:absolute; left:50%; bottom:24%; width:150px; height:10px; margin-left:-75px; background:rgba(0,0,0,.5); border-radius:5px; overflow:hidden; opacity:0; transition:opacity .12s; box-shadow:0 0 0 1px rgba(255,255,255,.18); }
#charge.on { opacity:1; }
#charge > i, #charge > b { position:absolute; top:0; bottom:0; }
#charge > i { left:0; background:linear-gradient(90deg,#ffd84d,#f0a832); border-radius:5px 0 0 5px; }
#charge > b { background:#3fae6c; box-shadow:0 0 8px rgba(63,174,108,.8); }
#popups .pop { position:absolute; transform:translate(-50%,-50%); font-weight:900; font-size:30px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.8); animation: popUp 2.6s ease-out forwards; white-space:nowrap; }
#popups .pop.stomp { color:#ffd84d; font-size:36px; letter-spacing:.06em; text-shadow:0 2px 12px rgba(0,0,0,.9), 0 0 26px rgba(255,216,77,.55); }
#popups .pop.bank { color:var(--accent); font-size:38px; }
#popups .pop.bail { color:#ff5a48; font-size:28px; }
#popups .pop.sk { color:#ffb347; font-size:20px; }
#popups .pop.wreck { color:#ff5a48; font-size:19px; text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 18px rgba(255,60,40,.5); }
#popups .pop.flow { color:#2c9a58; font-size:24px; letter-spacing:.3em; }
@keyframes popUp { 0% { opacity:0; transform:translate(-50%,-30%) scale(.6);} 9% { opacity:1; transform:translate(-50%,-50%) scale(1.1);} 80% { opacity:1; transform:translate(-50%,-70%) scale(1);} 100% { opacity:0; transform:translate(-50%,-110%) scale(1);} }

/* TRICK TAPE: running history of everything you land, top-left under the score block */
#tape { position:absolute; left:14px; top:max(200px, 27%); display:flex; flex-direction:column; gap:3px; max-width:44%; pointer-events:none; }
#tape .row { font-size:13px; font-weight:700; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.8);
  background:rgba(15,20,30,.45); border-left:3px solid var(--accent); padding:2px 8px; border-radius:4px;
  opacity:.92; transition:opacity .6s; animation: tapeIn .18s ease-out; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tape .row.gap { border-left-color:#ffd84d; }
#tape .row.bail { border-left-color:#ff5a48; color:#ff9c90; }
#tape .row.out { opacity:0; }
@keyframes tapeIn { from { transform:translateX(-14px); opacity:0; } }
#callout { position:absolute; left:50%; top:30%; transform:translate(-50%,0) scale(.9); background:rgba(181,85,47,.92); color:#fff; padding:10px 18px; border-radius:12px; text-align:center; opacity:0; transition: all .25s; box-shadow:0 8px 30px rgba(0,0,0,.4); }
#callout.on { opacity:1; transform:translate(-50%,0) scale(1); }
#callout .ct { font-weight:900; font-size:18px; letter-spacing:.02em; }
#callout .cs { font-size:12px; opacity:.9; margin-top:2px; }
#minimap { position:absolute; right:14px; bottom:calc(14px + var(--safe-b)); width:150px; height:150px; opacity:.95; }
#speed { position:absolute; left:14px; bottom:calc(14px + var(--safe-b)); font-size:12px; font-weight:700; opacity:.6; text-shadow:0 1px 4px #000; }

/* Touch controls */
#touch { position:fixed; inset:0; z-index:6; display:none; pointer-events:none; }
body.touch #touch { display:block; }
/* the score block now carries the two meters and the B-T-O-W-N tray under it, so the
   landscape minimap starts below all of that instead of on top of it */
body.touch #minimap { right:auto; left:14px; bottom:auto; top:calc(116px + var(--safe-t)); width:110px; height:110px; }
body.touch #speed { left:auto; right:14px; top:calc(64px + var(--safe-t)); bottom:auto; }
#stick-zone { position:absolute; left:0; top:30%; bottom:0; width:50%; pointer-events:auto; }
#stick-base { position:absolute; left:max(66px, 22%); top:60%; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); opacity:.5; transition:opacity .15s; }
#stick-zone.on #stick-base { opacity:1; }
#stick-knob { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:rgba(255,255,255,.7); box-shadow:0 4px 12px rgba(0,0,0,.4); }
#buttons { position:absolute; right:16px; bottom:calc(22px + var(--safe-b)); width:46%; height:48%; pointer-events:none; }
/* Flick pad (opt-in, pause menu): replaces the OLLIE/FLIP/SHOVE buttons with a SKATE-style
   flick surface on the right half. GRAB survives — grabs, manuals and grind flavours need it. */
#flick-zone { position:absolute; right:0; top:30%; bottom:0; width:46%; pointer-events:auto; display:none; }
body.touch.flick #flick-zone { display:block; }
body.touch.flick #b-ollie, body.touch.flick #b-flip, body.touch.flick #b-shove { display:none; }
body.touch.flick #b-grab { right:10px; bottom:auto; top:-64px; }
#flick-base { position:absolute; left:64%; top:56%; width:132px; height:132px; margin:-66px 0 0 -66px; border-radius:50%; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); opacity:.5; transition:opacity .15s; }
#flick-zone.on #flick-base { opacity:1; }
#flick-knob { position:absolute; left:50%; top:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; background:rgba(255,216,77,.75); box-shadow:0 4px 12px rgba(0,0,0,.4); }
.fl { position:absolute; font-size:9px; font-weight:800; letter-spacing:.08em; opacity:.75; color:#fff; transform:translate(-50%,-50%); pointer-events:none; }
.fl-n { left:50%; top:-12px; } .fl-s { left:50%; bottom:-22px; top:auto; }
.fl-nw { left:8px; top:6px; } .fl-ne { right:8px; left:auto; top:6px; transform:translate(50%,-50%); }
.fl-w { left:-16px; top:50%; } .fl-e { right:-16px; left:auto; top:50%; transform:translate(50%,-50%); }
body:not(.touch) #btn-flick { display:none; }

.tb { pointer-events:auto; position:absolute; border-radius:50%; border:2px solid rgba(255,255,255,.3); background:rgba(20,28,40,.55); color:#fff; font-weight:900; font-size:13px; letter-spacing:.04em; width:66px; height:66px; user-select:none; -webkit-user-select:none; backdrop-filter: blur(4px); }
.tb.down { background:rgba(255,216,77,.85); color:#222; transform:scale(.94); }
.tb.big { width:96px; height:96px; font-size:16px; right:8px; bottom:8px; background:rgba(181,85,47,.75); }
#b-flip { right:110px; bottom:30px; }
#b-shove { right:52px; bottom:112px; }
#b-grab { right:140px; bottom:104px; width:56px; height:56px; font-size:11px; }

/* Screens */
.screen { position:fixed; inset:0; z-index:10; display:none; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(12,18,28,.6), rgba(12,18,28,.9)); padding:20px; }
.screen.on { display:flex; }
.card { max-width:520px; width:100%; text-align:center; background:rgba(22,30,42,.92); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:28px 24px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.card.small { max-width:420px; }
.eyebrow { font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); }
h1 { font-size:44px; line-height:.95; margin:10px 0 8px; font-weight:900; letter-spacing:-.02em; }
h2 { margin:0 0 12px; }
.sub { opacity:.8; margin:0 0 18px; font-size:15px; line-height:1.4; }
.primary { background:var(--brick); color:#fff; border:0; border-radius:999px; padding:14px 36px; font-size:18px; font-weight:800; cursor:pointer; }
.primary:disabled { opacity:.5; }
.row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.row button { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:10px 16px; cursor:pointer; }
.how { margin-top:18px; font-size:13px; opacity:.8; line-height:1.6; }
.how b { color:var(--accent); font-weight:700; }
.how kbd { background:rgba(255,255,255,.12); border-radius:4px; padding:1px 6px; font-family:inherit; }
.loading { margin-top:14px; font-size:13px; opacity:.7; }
.fine { margin-top:18px; font-size:10px; opacity:.45; }
#stats { font-size:13px; opacity:.85; margin-bottom:14px; line-height:1.6; }
.spots { margin-top:16px; text-align:left; font-size:12px; columns:2; gap:16px; }
.spots div { padding:2px 0; opacity:.6; }
.spots div.hit { opacity:1; color:#8ee9a0; }
.spots div::before { content:"○ "; } .spots div.hit::before { content:"● "; }

/* title-screen mode choice */
.modes { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.primary.alt { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); }
.modenote { font-size:11px; opacity:.55; margin:10px 0 0; line-height:1.5; }
/* pause: spots and gaps side by side */
.panes { display:flex; gap:16px; }
.panes .pane { flex:1; min-width:0; }
.spots.one { columns:1; }
#gaps-count { opacity:.6; font-weight:400; letter-spacing:0; }
/* results overlay */
#res-score { font-size:44px; font-weight:900; margin:6px 0 10px; color:var(--accent); font-variant-numeric:tabular-nums; }
#res-stats { font-size:13px; opacity:.85; line-height:1.7; margin-bottom:8px; }

/* ---------------- leaderboard (fleet style) ---------------- */
.hidden { display:none !important; }
.lb { border-top:1px solid rgba(255,255,255,.12); margin-top:16px; padding-top:12px; text-align:left; }
.lb-tabs { display:flex; gap:8px; }
.lb-chip { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:var(--ink);
  font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px; cursor:pointer; }
.lb-chip.sel { background:var(--accent); color:#2b1706; border-color:var(--accent); }
.lb-status { font-size:12.5px; opacity:.65; margin:8px 0 4px; min-height:16px; }
#lbList { list-style:none; margin:4px 0; padding:0; }
#lbList li { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:8px; font-size:14.5px; }
#lbList li.me { background:rgba(255,216,77,.15); }
#lbList .rank { width:26px; text-align:center; }
#lbList .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#lbList .sc { font-weight:800; font-variant-numeric:tabular-nums; }
.lb-form { display:flex; gap:8px; margin:8px 0; }
.lb-form input { flex:1; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.2); border-radius:8px;
  color:var(--ink); padding:8px 10px; font-size:14px; }
.lb-rename { margin-top:6px; }

.fineprint { font-size:11px; line-height:1.5; opacity:.55; margin:-6px 0 18px; font-style:italic; }
.secttl { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); opacity:.85; margin:18px 0 6px; text-align:left; }
.chals { text-align:left; font-size:12px; }
.chals div { padding:3px 0; opacity:.65; }
.chals div.hit { opacity:1; color:#8ee9a0; }
.chals b { font-weight:700; display:block; }
.chals i { font-style:normal; opacity:.6; font-size:11px; }
#screen-pause .card { max-height:88vh; overflow-y:auto; }

/* First-play touch hint: fades out after the first ollie */
#hint { position:fixed; z-index:7; left:50%; bottom:calc(28px + var(--safe-b)); transform:translateX(-50%);
  background:rgba(10,14,20,.7); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:9px 16px;
  font-size:12px; letter-spacing:.01em; backdrop-filter:blur(6px); display:none; pointer-events:none;
  transition:opacity .5s; text-align:center; max-width:82vw; }
#hint b { color:var(--accent); }
body.touch.show-hint #hint { display:block; }
body.hint-out #hint { opacity:0; }
/* portrait: the trick buttons come up the screen, so the hint moves to the top, and the
   location pill drops to its own row instead of colliding with MAP / pause */
@media (orientation: portrait) {
  #hint { bottom:auto; top:calc(240px + var(--safe-t)); }
  #hud-loc { position:absolute; left:50%; top:calc(66px + var(--safe-t)); transform:translateX(-50%); max-width:86vw; }
  #hud-loc.flash { transform:translateX(-50%) scale(1.12); }
  body.touch #minimap { top:calc(168px + var(--safe-t)); }
}