:root{
  --neon-pink:#ff2b5e;
  --neon-yellow:#ffdd2b;
  --neon-cyan:#2bd7ff;
  --ink:#1a0f2e;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; background:#1a0f2e; }
body{
  font-family:'Space Grotesk',sans-serif;
  color:#fff;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
#game-wrap{ position:fixed; inset:0; }
canvas{ display:block; width:100%; height:100%; touch-action:none; }
.hidden{ display:none !important; }

/* ---------- HUD ---------- */
#hud{ position:absolute; inset:0; pointer-events:none; }
#hud-dist,#hud-score{
  position:absolute; top:14px;
  font-family:'Bungee',sans-serif; font-size:30px;
  text-shadow:0 3px 0 rgba(0,0,0,.5), 0 0 14px rgba(255,221,43,.4);
  letter-spacing:1px;
}
#hud-dist{ left:16px; color:var(--neon-cyan); }
#hud-score{ right:16px; color:var(--neon-yellow); }
#hud-dist .unit,#hud-score .unit{ font-size:14px; opacity:.7; margin-left:3px; }
#hud-trick{
  position:absolute; top:56px; left:50%; transform:translateX(-50%);
  font-family:'Bungee',sans-serif; font-size:22px; color:var(--neon-pink);
  text-shadow:0 2px 0 rgba(0,0,0,.6);
}
#speed-bar{
  position:absolute; left:16px; bottom:16px; width:150px; height:12px;
  background:rgba(0,0,0,.4); border:2px solid rgba(255,255,255,.4);
  border-radius:8px; overflow:hidden;
}
#speed-fill{ height:100%; width:0%;
  background:linear-gradient(90deg,var(--neon-cyan),var(--neon-yellow),var(--neon-pink));
  transition:width .12s linear; }
#mute-btn{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  pointer-events:auto; background:rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.35);
  color:#fff; font-size:20px; width:44px; height:44px; border-radius:50%;
  cursor:pointer;
}

/* ---------- Touch controls ---------- */
#touch-controls{ position:absolute; inset:auto 0 0 0; bottom:0;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:18px; pointer-events:none; }
.tbtn{
  pointer-events:auto; background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.4); color:#fff;
  font-family:'Bungee',sans-serif; font-size:16px;
  width:72px; height:72px; border-radius:50%; margin:0 5px;
  backdrop-filter:blur(4px); cursor:pointer;
}
.tbtn.gas{ background:rgba(255,43,94,.4); border-color:var(--neon-pink); width:84px; height:84px; }
#t-brake{ font-size:11px; }

/* ---------- Overlays ---------- */
.overlay{
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:20px; text-align:center;
  background:radial-gradient(circle at 50% 30%, rgba(42,26,82,.55), rgba(26,15,46,.9));
}
.title{
  font-family:'Bungee',sans-serif; font-size:clamp(40px,11vw,84px);
  line-height:.9; letter-spacing:2px;
  color:var(--neon-yellow);
  text-shadow:0 5px 0 var(--neon-pink), 0 8px 0 rgba(0,0,0,.4), 0 0 30px rgba(255,43,94,.6);
  animation:pop .6s cubic-bezier(.2,1.4,.4,1) both;
}
.title span{ color:var(--neon-cyan); }
#tagline{ font-size:18px; font-weight:700; color:#fff; opacity:.9;
  animation:pop .6s .1s both; }
.best-line{ font-size:15px; opacity:.85; }
.best-line b{ color:var(--neon-yellow); }

#name-input{
  width:min(280px,80vw); padding:12px 16px; text-align:center;
  font-family:'Bungee',sans-serif; font-size:16px; letter-spacing:2px;
  background:rgba(0,0,0,.4); border:2px solid rgba(255,255,255,.35);
  border-radius:10px; color:#fff; text-transform:uppercase;
}
#name-input:focus{ outline:none; border-color:var(--neon-cyan); }
#name-input::placeholder{ color:rgba(255,255,255,.4); }

.big-btn{
  font-family:'Bungee',sans-serif; font-size:clamp(14px,4vw,20px);
  padding:16px 28px; border:none; border-radius:14px; cursor:pointer;
  background:var(--neon-pink); color:#fff;
  box-shadow:0 6px 0 #a10f36, 0 0 24px rgba(255,43,94,.5);
  transition:transform .1s, box-shadow .1s;
  animation:pulse 1.4s ease-in-out infinite;
}
.big-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 #a10f36; }
.big-btn.alt{ background:var(--neon-cyan); color:var(--ink);
  box-shadow:0 6px 0 #0e7ea1, 0 0 24px rgba(43,215,255,.5); animation:none; }
.big-btn:disabled{ opacity:.5; animation:none; cursor:default; }

.pov-note{ font-family:'Bungee',sans-serif; font-size:13px; letter-spacing:1px;
  color:var(--neon-cyan); text-shadow:0 2px 0 rgba(0,0,0,.4);
  animation:pulse 1.6s ease-in-out infinite; }
.controls-hint{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  font-size:12px; opacity:.75; font-weight:700; }
.controls-hint span{ background:rgba(0,0,0,.3); padding:5px 10px; border-radius:6px; }

/* Leaderboard */
#leaderboard{ margin-top:6px; width:min(320px,88vw);
  background:rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.2);
  border-radius:12px; padding:12px 14px; }
#leaderboard h3{ font-family:'Bungee',sans-serif; font-size:14px;
  color:var(--neon-yellow); margin-bottom:8px; letter-spacing:1px; }
#lb-list{ list-style:none; font-size:13px; }
#lb-list li{ display:flex; align-items:center; gap:8px; padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.08); }
.lb-rank{ font-family:'Bungee',sans-serif; color:var(--neon-pink); width:22px; }
.lb-name{ flex:1; text-align:left; font-weight:700; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-score{ color:var(--neon-yellow); font-weight:700; }
.lb-loading,.lb-empty{ opacity:.6; justify-content:center; }

/* Game over */
.wipeout{ font-family:'Bungee',sans-serif; font-size:clamp(34px,9vw,64px);
  color:var(--neon-pink);
  text-shadow:0 4px 0 rgba(0,0,0,.5), 0 0 24px rgba(255,43,94,.7);
  animation:shakein .5s both; }
#over-stats{ display:flex; flex-direction:column; gap:6px;
  background:rgba(0,0,0,.35); padding:16px 26px; border-radius:12px;
  border:2px solid rgba(255,255,255,.2); }
.stat{ display:flex; justify-content:space-between; gap:30px;
  font-size:16px; font-weight:700; }
.stat span{ opacity:.7; }
.stat b{ font-family:'Bungee',sans-serif; color:var(--neon-cyan); }
.stat.small{ font-size:12px; } .stat.small b{ color:var(--neon-yellow); font-size:12px; }
#new-best{ font-family:'Bungee',sans-serif; color:var(--neon-yellow); font-size:22px;
  animation:pop .5s both, pulse 1s infinite; }
#submit-msg{ font-size:13px; opacity:.85; min-height:16px; }

/* Footer */
#footer{ position:absolute; bottom:6px; right:10px; z-index:20; font-size:11px; }
#footer a{ color:rgba(255,255,255,.55); text-decoration:none; }
#footer a:hover{ color:var(--neon-yellow); }

/* Animations */
@keyframes pop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }
@keyframes shakein{ 0%{ transform:translateX(-12px);} 25%{transform:translateX(10px);}
  50%{transform:translateX(-6px);} 75%{transform:translateX(4px);} 100%{transform:translateX(0);} }

@media (max-height:520px){
  #leaderboard{ display:none; }
  .controls-hint{ display:none; }
}