:root{
  --dirt:#c98a3f;
  --sky:#2a9bd8;
  --amber:#ffb84d;
  --hot:#ff3b1f;
  --yellow:#ffd23f;
  --chrome:#d8dde3;
  --ink:#241505;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#000;font-family:'Rajdhani',sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}
#scene-container{position:fixed;inset:0}
.hidden{display:none!important}

/* ---------- Overlays / CRT panels ---------- */
#menu,#gameover{
  position:fixed;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%, rgba(42,155,216,0.35), rgba(20,10,0,0.85));
  padding:16px;
}
.crt{
  width:min(460px,94vw);
  background:linear-gradient(160deg,#1a2733,#0c1218);
  border:3px solid var(--chrome);
  border-radius:14px;
  box-shadow:0 0 0 4px #000, 0 18px 50px rgba(0,0,0,.7), inset 0 0 40px rgba(0,180,255,.06);
  padding:22px 22px 18px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.crt::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,0.03) 0 2px,transparent 2px 4px);
}

/* ---------- Title ---------- */
.title{
  font-family:'Black Ops One',cursive;
  font-size:clamp(30px,8vw,52px);
  line-height:.92;
  letter-spacing:1px;
  transform:skewX(-8deg);
  color:var(--yellow);
  text-shadow:0 2px 0 #b8860b, 0 4px 0 #7a5200, 3px 6px 8px rgba(0,0,0,.6);
}
.title span{
  color:var(--hot);
  text-shadow:0 2px 0 #8a1a0a,0 4px 0 #560f05,3px 6px 8px rgba(0,0,0,.6);
}
.subtitle{
  margin-top:8px;color:var(--chrome);letter-spacing:4px;font-weight:700;font-size:13px;
}

/* ---------- Rider tag ---------- */
.tagrow{margin:18px 0 8px;display:flex;align-items:center;justify-content:center;gap:10px}
.tagrow label{color:var(--amber);font-weight:700;letter-spacing:2px;font-size:14px}
#tagInput{
  width:130px;background:#05090d;border:2px solid var(--chrome);border-radius:6px;
  color:var(--yellow);font-family:'Black Ops One',cursive;font-size:16px;letter-spacing:2px;
  text-align:center;padding:6px 8px;text-transform:uppercase;
}
#tagInput:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 12px rgba(255,210,63,.5)}

/* ---------- Start button ---------- */
.startbtn{
  margin:14px auto 4px;display:block;width:80%;
  font-family:'Black Ops One',cursive;font-size:22px;letter-spacing:2px;
  color:#fff;background:linear-gradient(180deg,var(--hot),#a01206);
  border:3px solid #ffd7c0;border-radius:10px;padding:12px;cursor:pointer;
  text-shadow:0 2px 4px rgba(0,0,0,.5);
  box-shadow:0 6px 0 #5a0a02, 0 10px 18px rgba(0,0,0,.5);
  transition:transform .08s, box-shadow .08s;
  animation:pulse 1.1s ease-in-out infinite;
}
.startbtn:active{transform:translateY(4px);box-shadow:0 2px 0 #5a0a02}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}

/* ---------- Controls hint ---------- */
.controls-hint{
  margin:14px 4px 6px;color:#9fb8c9;font-size:12px;line-height:1.6;letter-spacing:.5px;
}
.controls-hint b{color:var(--yellow)}

/* ---------- Leaderboard ---------- */
#board{
  margin-top:14px;text-align:left;background:#05090d;border:2px solid #2a4050;border-radius:8px;
  padding:10px 12px;
}
.board-title{color:var(--amber);font-weight:700;letter-spacing:2px;font-size:13px;margin-bottom:6px;text-align:center}
#boardList{list-style:none;font-size:14px}
#boardList li{display:flex;align-items:center;gap:8px;padding:3px 4px;border-bottom:1px dashed #1b2a35;color:#cfe0ea}
#boardList li:last-child{border-bottom:none}
#boardList li.me{color:var(--yellow);font-weight:700;background:rgba(255,210,63,.08);border-radius:4px}
#boardList .rk{width:22px;color:var(--hot);font-weight:700;font-family:'Black Ops One',cursive}
#boardList .rt{flex:1;letter-spacing:1px}
#boardList .rs{font-weight:700}
#boardList .loading{justify-content:center;color:#5f7688;font-style:italic}

.credit{margin-top:12px;font-size:11px;color:#6f8798;letter-spacing:1px}
.credit a{color:var(--amber);text-decoration:none}
.credit a:hover{text-decoration:underline}

/* ---------- Game over ---------- */
.go-title{font-family:'Black Ops One',cursive;font-size:34px;color:var(--hot);transform:skewX(-6deg);text-shadow:0 3px 0 #560f05}
.go-score{margin-top:10px;font-size:26px;color:var(--yellow);font-weight:700;letter-spacing:2px}
.go-score span{font-family:'Black Ops One',cursive}
.go-sub{margin:6px 0 4px;color:#9fb8c9;font-size:13px;letter-spacing:1px}
.chip.wide{margin:8px auto 0;display:block;width:60%}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
#hud .label{color:#fff;font-weight:700;letter-spacing:2px;font-size:11px;text-shadow:0 1px 3px #000}
#hud .label.small{font-size:9px;opacity:.85}
#hud .big{font-family:'Black Ops One',cursive;font-size:30px;color:var(--yellow);line-height:1;text-shadow:0 2px 4px #000,0 0 8px rgba(255,210,63,.4)}
#hud .med{font-family:'Black Ops One',cursive;font-size:22px;color:#fff;text-shadow:0 2px 4px #000}

#hud-top-left{position:absolute;top:12px;left:14px}
#hud-top-center{position:absolute;top:12px;left:50%;transform:translateX(-50%);text-align:center}
#hud-top-right{position:absolute;top:12px;right:12px;display:flex;gap:8px;pointer-events:auto}

.chip{
  pointer-events:auto;
  background:rgba(10,20,28,.75);border:2px solid var(--chrome);color:#fff;
  font-family:'Rajdhani';font-weight:700;letter-spacing:1px;font-size:13px;
  border-radius:8px;padding:6px 12px;cursor:pointer;min-width:44px;
}
.chip:active{transform:translateY(2px)}
.chip.off{opacity:.55;border-color:#556}

/* speedo */
#speedo{
  position:absolute;bottom:14px;right:14px;
  background:linear-gradient(160deg,rgba(10,20,28,.85),rgba(4,9,13,.9));
  border:3px solid var(--chrome);border-radius:12px;
  padding:8px 14px 10px;text-align:center;
  box-shadow:0 0 0 3px #000, inset 0 0 18px rgba(255,210,63,.08);
}
#airbar{width:90px;height:8px;background:#05090d;border:1px solid #2a4050;border-radius:5px;margin:6px auto 2px;overflow:hidden;position:relative}
#airfill{position:absolute;bottom:0;left:0;right:0;height:0%;background:linear-gradient(0deg,var(--amber),var(--hot));transition:height .08s}

/* popups */
#popups{position:absolute;top:32%;left:0;right:0;text-align:center;pointer-events:none}
.popup{
  display:inline-block;margin:2px auto;padding:4px 0;width:100%;
  font-family:'Black Ops One',cursive;font-size:clamp(22px,6vw,40px);
  color:var(--yellow);text-shadow:0 3px 6px #000,0 0 14px rgba(255,59,31,.5);
  transform:skewX(-6deg);
  animation:pop .35s cubic-bezier(.2,1.6,.4,1), fade .3s ease-in 0.8s forwards;
}
.popup.crash{color:var(--hot)}
.popup.flip{color:#4fd6ff}
.popup.big{color:#ff8a00}
.popup.nice{color:#9fffa0;font-size:clamp(18px,4vw,28px)}
@keyframes pop{from{transform:scale(0.3) skewX(-6deg);opacity:0}to{transform:scale(1) skewX(-6deg);opacity:1}}
@keyframes fade{to{opacity:0;transform:scale(1.2) skewX(-6deg)}}

/* ---------- touch controls ---------- */
#touch{position:absolute;bottom:0;left:0;right:0;display:none;justify-content:space-between;padding:16px;pointer-events:none}
.tpad{display:flex;gap:12px;pointer-events:auto}
.tbtn{
  width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.25),rgba(10,20,28,.8));
  border:3px solid var(--chrome);color:#fff;font-family:'Rajdhani';font-weight:700;
  font-size:20px;cursor:pointer;
}
.tbtn.big{width:88px;height:88px;background:radial-gradient(circle at 40% 35%,rgba(255,120,60,.5),rgba(120,20,5,.85));border-color:#ffd7c0}
.tbtn:active{filter:brightness(1.4)}
.tpad.right{flex-direction:column-reverse;align-items:flex-end}
.tpad.left{align-items:flex-end}

@media (hover:none) and (pointer:coarse){ #touch{display:flex} }
@media (max-width:520px){
  #speedo{bottom:auto;top:56px;right:10px;padding:6px 10px 8px}
  #airbar{width:70px}
}
#auth-status{position:fixed;bottom:4px;left:6px;color:#5f7688;font-size:10px;z-index:5}