:root{
  --ink:#0d0a14; --sunset:#ff5e62; --amber:#ffb347; --chrome:#d3dde8;
  --cyan:#22e0ff; --magenta:#ff2e88; --green:#5fd068; --dim:#9d8ab0;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;min-height:100%;background:var(--ink);
  font-family:'Arial Narrow',Arial,sans-serif;color:var(--chrome);
  touch-action:manipulation;user-select:none;-webkit-user-select:none;}
body{overflow-y:auto;overflow-x:hidden;}

#app{max-width:680px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;
  align-items:center;padding:10px 10px 40px;position:relative;}

h1.title{font-size:clamp(24px,7vw,40px);font-weight:900;letter-spacing:4px;margin:6px 0 2px;
  text-transform:uppercase;text-align:center;
  background:linear-gradient(180deg,#fff,var(--amber) 55%,var(--sunset));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
h1.title small{display:block;font-size:10px;letter-spacing:6px;color:var(--cyan);
  -webkit-text-fill-color:var(--cyan);margin-top:5px;}
h2{font-size:20px;letter-spacing:2px;margin:2px 0 6px;text-transform:uppercase;}
h3.sect{font-size:12px;letter-spacing:3px;color:var(--cyan);margin:18px 0 8px;
  text-transform:uppercase;border-top:1px solid rgba(255,255,255,.10);padding-top:12px;}

.screen{width:100%;text-align:center;
  background:linear-gradient(160deg,rgba(42,18,64,.92),rgba(13,10,20,.96));
  border:1px solid rgba(34,224,255,.22);border-radius:14px;padding:18px 16px 22px;margin-top:10px;}
.hidden{display:none !important;}

p.flavor{color:#c3b0d4;font-size:14px;line-height:1.55;margin:8px 4px 14px;}
p.meta{color:var(--dim);font-size:12px;margin:4px 0 12px;}
p.progress{font-size:13px;color:#c3b0d4;margin:6px 0 14px;}
.crumb{font-size:11px;letter-spacing:3px;color:var(--cyan);text-transform:uppercase;}
.dim{color:var(--dim);}
.cash{color:var(--amber);font-weight:800;}
.neg{color:var(--sunset);}

.btn{font-family:inherit;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  border:none;border-radius:10px;padding:13px 18px;font-size:14px;cursor:pointer;
  background:linear-gradient(180deg,var(--cyan),#0091a8);color:#04222a;
  box-shadow:0 4px 0 #005a68;transition:transform .05s;}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #005a68;}
.btn.secondary{background:linear-gradient(180deg,#8a5ea8,#5a3a72);
  box-shadow:0 4px 0 #3a2450;color:#f4e9ff;}
.btn.secondary:active{box-shadow:0 1px 0 #3a2450;}
.btn.ghost{background:none;box-shadow:none;border:1px solid rgba(255,255,255,.16);color:var(--dim);}
.btn.big{width:100%;padding:15px;font-size:16px;margin-top:10px;}
.btn.small{padding:7px 11px;font-size:11px;}
.btn:disabled{opacity:.32;cursor:default;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px;}

.legend{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;font-size:11px;
  color:var(--dim);margin-top:16px;}
.legend b{color:var(--amber);}

.panel{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:12px;margin:12px 0;text-align:left;}
.panelhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.statrow{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim);margin:4px 0;}
.statrow>span:first-child{width:76px;}
.statbar{flex:1;height:6px;background:rgba(0,0,0,.5);border-radius:3px;overflow:hidden;}
.statbar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta));}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-top:8px;
  padding-top:8px;border-top:1px solid rgba(255,255,255,.06);}
.tag{display:inline-block;background:var(--amber);color:#3a1f00;font-weight:800;font-size:10px;
  padding:2px 6px;border-radius:4px;margin-left:4px;}

.bikes{display:flex;flex-direction:column;gap:8px;text-align:left;}
.bike{background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:10px;}
.bike.owned{border-color:rgba(34,224,255,.5);}
.bikehead{display:flex;align-items:baseline;gap:8px;}
.bikehead .cls{font-size:10px;letter-spacing:2px;color:var(--cyan);text-transform:uppercase;}
.bikehead .price{margin-left:auto;color:var(--amber);font-weight:800;font-size:12px;}
.bike .blurb{font-size:11px;color:var(--dim);margin:4px 0 6px;}
.bikestats{display:flex;flex-wrap:wrap;gap:6px;font-size:10px;color:var(--dim);margin-bottom:8px;}
.bikestats span{background:rgba(255,255,255,.05);padding:2px 5px;border-radius:4px;}
.bikestats .nit{background:var(--cyan);color:#04222a;font-weight:800;}
.parts{display:flex;flex-direction:column;gap:6px;text-align:left;}
.part{display:flex;align-items:center;gap:8px;font-size:12px;
  background:rgba(0,0,0,.22);border-radius:8px;padding:8px 10px;}
.part .btn{margin-left:auto;}

.regionblock{text-align:left;margin:14px 0;}
.regionblock h3{font-size:13px;letter-spacing:3px;margin:0 0 2px;text-transform:uppercase;}
table.routes{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px;}
table.routes td{padding:5px 4px;border-bottom:1px solid rgba(255,255,255,.06);}
table.routes tr.done td{color:var(--green);}
.routegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;margin-top:6px;}
.routebtn{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.09);border-radius:8px;
  padding:9px 10px;color:var(--chrome);font-family:inherit;font-size:12px;cursor:pointer;text-align:left;}
.routebtn:hover{border-color:rgba(34,224,255,.5);}
.routebtn .dim{font-size:10px;}
.routebtn .best{font-size:10px;color:var(--amber);}
.statstrip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:11px;
  color:var(--dim);margin:8px 0 4px;}
.statstrip b{color:var(--chrome);}

.rider{display:flex;gap:10px;text-align:left;background:rgba(0,0,0,.24);
  border-radius:9px;padding:10px;margin-bottom:7px;}
.rider .swatch{width:6px;border-radius:3px;flex:0 0 6px;}
.rider .mood{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-left:8px;}
.rider .mood.hostile{color:var(--sunset);}
.rider .bio{font-size:11px;color:#bfb0d0;margin-top:3px;line-height:1.45;}
.rider .talk{font-size:11px;color:var(--dim);font-style:italic;margin-top:4px;}

.lines{margin:10px 0;text-align:left;}
.resultRow{display:flex;justify-content:space-between;font-size:13px;padding:7px 2px;
  border-bottom:1px solid rgba(255,255,255,.07);}
.resultRow b{color:var(--amber);}
.resultRow.total{border-bottom:none;border-top:1px solid rgba(255,255,255,.18);margin-top:4px;
  font-size:15px;}
p.talk{font-size:12px;color:var(--dim);font-style:italic;margin:10px 0 0;}

/* ================= racing: full screen ================= */
#screen-game{width:100%;position:relative;}
#canvas,#hud{width:100%;height:auto;display:block;border-radius:12px;background:#000;}
#canvas{border:2px solid rgba(34,224,255,.24);}
/* The HUD is a 2-D overlay so it works identically over Canvas-2D and WebGL. */
#hud{position:absolute;inset:0;border:2px solid transparent;pointer-events:none;
     background:transparent;}

body.racing{overflow:hidden;}
body.racing #app{max-width:none;padding:0;}
body.racing h1.title{display:none;}
body.racing #screen-game{position:fixed;inset:0;width:100vw;height:100vh;}
body.racing #canvas,body.racing #hud{width:100%;height:100%;border:none;border-radius:0;}
body.racing #hud{position:absolute;inset:0;}

#controls{position:absolute;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;align-items:flex-end;padding:0 16px;gap:6px;z-index:5;}
.ctrlBtn{width:58px;height:58px;border-radius:14px;font-weight:900;color:#fff;
  background:linear-gradient(180deg,rgba(58,42,74,.85),rgba(36,23,48,.85));
  border:1px solid rgba(34,224,255,.3);box-shadow:0 4px 0 rgba(21,12,30,.8);font-size:18px;}
.ctrlBtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(21,12,30,.8);}
.ctrlBtn.gas{background:linear-gradient(180deg,#1fae5e,#0f6b38);font-size:11px;}
.ctrlBtn.brake{background:linear-gradient(180deg,#c93636,#7a1f1f);font-size:11px;}
.ctrlBtn.punch{background:linear-gradient(180deg,#ff2e88,#a5185a);font-size:10px;}
.ctrlBtn.kick{background:linear-gradient(180deg,#ffb347,#c47c1a);font-size:10px;color:#3a1f00;}
.row{display:flex;gap:6px;}
.col{display:flex;flex-direction:column;gap:6px;}
#screen-game:not(.hidden) #controls{display:flex;}

/* Touch controls are noise on a desktop; keyboard is the real input there. */
@media (hover:hover) and (pointer:fine){
  #controls{opacity:0;pointer-events:none;}
}

/* ================= pause / control reference ================= */
/* The only control listing used to be a small legend on the main menu, so once
   a race began there was no way to discover what any key did. */
#pause{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(6,4,12,.82);backdrop-filter:blur(3px);}
#pause.hidden{display:none !important;}
.pausebox{width:min(420px,92vw);max-height:88vh;overflow-y:auto;text-align:center;
  background:linear-gradient(160deg,rgba(42,18,64,.96),rgba(13,10,20,.98));
  border:1px solid rgba(34,224,255,.30);border-radius:14px;padding:18px 18px 20px;}
.pausebox h2{margin:0 0 12px;}
.keys{display:grid;grid-template-columns:1fr;gap:3px;margin:0 0 16px;text-align:left;}
.keyrow{display:flex;align-items:center;gap:8px;font-size:12px;color:#c3b0d4;
  padding:5px 8px;border-radius:6px;background:rgba(0,0,0,.24);}
.keyrow b{display:inline-block;min-width:34px;text-align:center;font-size:11px;font-weight:800;
  color:#04222a;background:var(--chrome);border-radius:4px;padding:2px 5px;}
.keyrow span{color:#bfb0d0;}
/* Nitro is called out because "which button is boost?" was the actual question. */
.keyrow.hot{background:rgba(34,224,255,.13);border:1px solid rgba(34,224,255,.35);}
.keyrow.hot b{background:var(--cyan);}
.keyrow.hot span{color:var(--cyan);font-weight:700;}

#btn-pause{position:absolute;top:10px;right:10px;z-index:6;width:38px;height:38px;
  border-radius:10px;font-size:15px;line-height:1;cursor:pointer;color:var(--chrome);
  background:rgba(13,10,20,.62);border:1px solid rgba(255,255,255,.18);}
#btn-pause:hover{border-color:rgba(34,224,255,.55);}
#screen-game.hidden ~ #btn-pause,#screen-game.hidden #btn-pause{display:none;}

/* nitro / weapon / wheelie buttons — previously absent entirely */
.ctrlBtn.nitro{background:linear-gradient(180deg,#22e0ff,#0091a8);color:#04222a;font-size:10px;
  position:relative;}
.ctrlBtn.nitro:disabled{opacity:.35;}
.ctrlBtn.nitro i{position:absolute;top:3px;right:5px;font-style:normal;font-size:11px;
  font-weight:900;color:#04222a;}
.ctrlBtn.weapon{background:linear-gradient(180deg,#a06bff,#5a2ea8);font-size:10px;}
.ctrlBtn.wheelie{background:linear-gradient(180deg,#5a5a6e,#33333f);font-size:9px;}