:root{
  --sand:#d8b96b;
  --dirt:#8a5a2b;
  --orange:#ff5a1f;
  --yellow:#ffcf1f;
  --sky:#4a90d9;
  --ink:#1a1206;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;background:#000;font-family:'Racing Sans One',sans-serif;user-select:none;-webkit-user-select:none;touch-action:none;}
#scene-container{position:fixed;inset:0;}

/* ---------- Overlays ---------- */
.overlay{
  position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(circle at 50% 30%, rgba(74,144,217,.55), rgba(26,18,6,.92));
}
.hidden{display:none !important;}

.checker-strip{
  width:100%;height:22px;
  background-image:
    linear-gradient(45deg,#111 25%,transparent 25%),
    linear-gradient(-45deg,#111 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#111 75%),
    linear-gradient(-45deg,transparent 75%,#111 75%);
  background-size:22px 22px;background-color:#fff;
  background-position:0 0,0 11px,11px -11px,-11px 0;
  opacity:.9;
}

.title{
  font-family:'Anton',sans-serif;font-size:clamp(48px,11vw,120px);line-height:.85;
  color:var(--yellow);text-align:center;letter-spacing:2px;
  text-shadow:5px 5px 0 var(--orange), 9px 9px 0 rgba(0,0,0,.6);
  transform:skewX(-6deg);
  animation:drop .6s cubic-bezier(.2,1.5,.4,1);
}
.title span{color:var(--orange);text-shadow:5px 5px 0 var(--yellow),9px 9px 0 rgba(0,0,0,.6);}
@keyframes drop{from{transform:translateY(-60px) skewX(-6deg);opacity:0;}to{transform:translateY(0) skewX(-6deg);opacity:1;}}
.subtitle{font-family:'JetBrains Mono',monospace;color:#fff;letter-spacing:3px;font-size:13px;text-shadow:2px 2px 0 #000;}

.menu-buttons{display:flex;flex-direction:column;gap:10px;width:min(280px,80vw);}
.btn{
  font-family:'Anton',sans-serif;font-size:24px;letter-spacing:2px;
  padding:12px 20px;border:none;cursor:pointer;color:#fff;
  background:#333;border-bottom:5px solid #000;border-radius:6px;
  transition:transform .1s, background .2s;text-shadow:2px 2px 0 #000;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(2px);border-bottom-width:2px;}
.btn.primary{background:linear-gradient(#ff7a3f,var(--orange));border-bottom-color:#9c3200;}
.btn.ghost{background:transparent;border:2px solid #fff;border-bottom-width:2px;font-size:18px;}

.rough-select{display:flex;gap:6px;align-items:center;font-family:'JetBrains Mono',monospace;color:#fff;font-size:12px;flex-wrap:wrap;justify-content:center;}
.rough-btn{font-family:'JetBrains Mono',monospace;font-weight:700;padding:6px 12px;border:2px solid #fff;background:rgba(0,0,0,.4);color:#fff;cursor:pointer;border-radius:4px;}
.rough-btn.active{background:var(--yellow);color:#000;}
.tip{font-family:'JetBrains Mono',monospace;color:var(--yellow);font-size:11px;opacity:.85;}
.remix{color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px;text-decoration:underline;opacity:.8;}
.remix:hover{opacity:1;}

.modal{
  background:linear-gradient(#3a2a12,#1a1206);border:3px solid var(--yellow);
  border-radius:12px;padding:28px 32px;text-align:center;max-width:90vw;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.modal h2{font-family:'Anton',sans-serif;color:var(--yellow);font-size:34px;letter-spacing:2px;text-shadow:3px 3px 0 var(--orange);}
.modal ul{list-style:none;text-align:left;font-family:'JetBrains Mono',monospace;color:#fff;font-size:14px;line-height:1.9;}
.modal ul b{color:var(--yellow);}
.mobile-note{font-family:'JetBrains Mono',monospace;color:#aaa;font-size:11px;}
.stat{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;color:#fff;font-size:16px;border-bottom:1px dashed rgba(255,255,255,.2);padding:6px 0;min-width:220px;}
.stat b{color:var(--yellow);font-size:20px;}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;}
.hud-corner{position:absolute;display:flex;flex-direction:column;gap:6px;}
.top-left{top:14px;left:14px;}
.top-right{top:14px;right:14px;align-items:flex-end;}

.speedo{
  font-family:'JetBrains Mono',monospace;font-weight:700;
  background:rgba(10,6,0,.7);border:2px solid var(--orange);border-radius:8px;
  padding:6px 14px;color:var(--yellow);font-size:42px;line-height:1;
  text-shadow:0 0 12px rgba(255,207,31,.7);display:flex;align-items:baseline;gap:6px;
}
.speedo .unit{font-size:14px;color:#fff;}
.boost-track{width:140px;height:10px;background:rgba(0,0,0,.6);border:1px solid #000;border-radius:5px;overflow:hidden;}
#boost-bar{height:100%;background:linear-gradient(90deg,#ff3,#f60);width:60%;transition:width .1s;}

.timer-box{background:rgba(10,6,0,.7);border:2px solid #fff;border-radius:8px;padding:5px 12px;text-align:center;min-width:110px;}
.timer-box.small{min-width:80px;padding:3px 10px;}
.timer-label{font-family:'JetBrains Mono',monospace;font-size:10px;color:#aaa;letter-spacing:2px;}
.timer-box div:last-child, #lap-time{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--yellow);font-size:26px;}
.timer-box.small div:last-child{font-size:16px;}

.hud-top-center{position:absolute;top:14px;left:50%;transform:translateX(-50%);text-align:center;}
.madness-label{font-family:'Anton',sans-serif;color:var(--orange);letter-spacing:3px;font-size:15px;text-shadow:2px 2px 0 #000;}
.madness-track{width:min(50vw,340px);height:14px;background:rgba(0,0,0,.6);border:2px solid var(--orange);border-radius:8px;overflow:hidden;margin-top:2px;}
#madness-bar{height:100%;width:0;background:linear-gradient(90deg,#ff0,#f60,#f00);transition:width .15s;}

.air-info{
  position:absolute;top:22%;left:50%;transform:translateX(-50%);
  font-family:'Anton',sans-serif;color:#fff;font-size:28px;letter-spacing:2px;
  text-shadow:3px 3px 0 var(--orange),0 0 18px rgba(255,120,0,.8);
}
.score-pop{
  position:absolute;top:38%;left:50%;transform:translateX(-50%);opacity:0;
  font-family:'Anton',sans-serif;color:var(--yellow);font-size:34px;letter-spacing:2px;
  text-shadow:3px 3px 0 #000;white-space:nowrap;
}
@keyframes pop{0%{opacity:0;transform:translate(-50%,10px) scale(.7);}20%{opacity:1;transform:translate(-50%,0) scale(1.1);}80%{opacity:1;}100%{opacity:0;transform:translate(-50%,-30px) scale(1);}}

.madness-banner{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  font-family:'Anton',sans-serif;font-size:clamp(50px,12vw,130px);
  color:var(--yellow);text-shadow:6px 6px 0 var(--orange),0 0 40px #f60;
  letter-spacing:4px;
}
@keyframes madflash{0%{transform:translate(-50%,-50%) scale(0) rotate(-8deg);opacity:0;}30%{transform:translate(-50%,-50%) scale(1.2) rotate(3deg);opacity:1;}70%{transform:translate(-50%,-50%) scale(1) rotate(-2deg);opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3);}}

.wipeout{
  position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);
  font-family:'Anton',sans-serif;font-size:clamp(50px,13vw,140px);
  color:#fff;text-shadow:5px 5px 0 #c00,0 0 30px #f00;letter-spacing:3px;
  animation:wobble .5s infinite alternate;
}
@keyframes wobble{from{transform:translate(-50%,-50%) rotate(-8deg) scale(1);}to{transform:translate(-50%,-50%) rotate(-4deg) scale(1.06);}}
@keyframes shake{0%,100%{transform:translate(0,0);}25%{transform:translate(-8px,4px);}50%{transform:translate(6px,-6px);}75%{transform:translate(-4px,-3px);}}

/* ---------- topbar ---------- */
#topbar{position:fixed;top:14px;right:14px;z-index:9;}
/* moved timer to right; pause bottom-left instead to avoid overlap */
#topbar{top:auto;bottom:14px;right:auto;left:14px;}
#pause-toggle{
  pointer-events:auto;font-family:'JetBrains Mono',monospace;font-weight:700;
  background:rgba(10,6,0,.7);border:2px solid #fff;color:#fff;border-radius:8px;
  padding:8px 14px;font-size:16px;cursor:pointer;
}

/* ---------- touch controls ---------- */
#touch{position:fixed;inset:0;z-index:8;pointer-events:none;}
.pad{position:absolute;bottom:20px;display:flex;gap:12px;pointer-events:none;}
.pad.left{left:20px;}
.pad.right{right:20px;flex-wrap:wrap;width:180px;justify-content:flex-end;}
.tbtn{
  pointer-events:auto;font-family:'Anton',sans-serif;font-size:20px;
  width:70px;height:70px;border-radius:50%;border:3px solid #fff;color:#fff;
  background:rgba(0,0,0,.5);cursor:pointer;
}
.tbtn.gas{background:rgba(0,180,60,.55);width:84px;height:84px;font-size:22px;}
.tbtn.brake{background:rgba(200,40,40,.55);}
.tbtn.jump{background:rgba(255,180,20,.55);color:#000;}
.tbtn:active{transform:scale(.92);}

@media (max-width:600px){
  .speedo{font-size:32px;}
  .boost-track{width:110px;}
  .timer-box{min-width:90px;}
}