:root{
--bg:#0a0a0f;
--road:#1a1a1f;
--accent:#ff3c3c;
--accent2:#ff8c00;
--gold:#ffd700;
--text:#f0f0f0;
--hud-bg:rgba(10,10,20,0.88);
--btn:#1e1e2e;
--btn-border:rgba(255,255,255,0.12);
--radius:12px;
--ctrl-h:90px;
--hud-h:54px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);}
#app{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:var(--bg);}

#gc{
  display:block;
  position:absolute;
  top:var(--hud-h);
  left:50%;
  transform:translateX(-50%);
  z-index:1;
  touch-action:none;
  image-rendering:auto;
  will-change:contents;
}

#hud{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:320px;height:var(--hud-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;z-index:20;
  background:var(--hud-bg);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,60,60,0.25);
  transition:opacity .3s;
}
#hud-left,#hud-right{display:flex;flex-direction:column;align-items:center;min-width:60px;}
.hud-label{font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;color:rgba(240,240,240,0.45);text-transform:uppercase;}
#score-val,#level-val{font-family:'Orbitron',monospace;font-size:20px;font-weight:700;color:var(--text);line-height:1;}
#pause-btn{background:none;border:1px solid var(--btn-border);color:var(--text);font-size:16px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
#pause-btn:active{background:rgba(255,255,255,0.1);}

#speed-bar-wrap{
  position:absolute;
  bottom:calc(var(--ctrl-h) + 4px);
  left:50%;transform:translateX(-50%);
  width:320px;
  display:flex;align-items:center;gap:8px;padding:0 14px;
  z-index:20;pointer-events:none;transition:opacity .3s;
}
#speed-bar{flex:1;height:4px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;position:relative;}
#speed-bar::after{content:'';position:absolute;top:0;left:0;height:100%;width:var(--spd,0%);background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:2px;transition:width .2s;}
#speed-label{font-family:'Orbitron',monospace;font-size:11px;color:rgba(240,240,240,0.5);min-width:28px;text-align:right;}

#controls{
  position:absolute;
  bottom:0;left:50%;transform:translateX(-50%);
  width:320px;height:var(--ctrl-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 8px 10px;
  z-index:20;gap:5px;
  background:rgba(8,8,16,0.75);
  border-top:1px solid rgba(255,255,255,0.06);
  transition:opacity .3s;
}
#controls button,#mid-btns button{
  flex:1;height:68px;
  background:var(--btn);
  border:1px solid var(--btn-border);
  color:var(--text);font-size:22px;
  border-radius:var(--radius);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .1s,transform .08s;
  -webkit-tap-highlight-color:transparent;
}
#btn-left,#btn-right{flex:0 0 66px;font-size:22px;}
#mid-btns{display:flex;flex:1;gap:5px;}
#mid-btns button{height:68px;font-size:18px;}
#btn-boost{background:rgba(255,140,0,0.18);border-color:rgba(255,140,0,0.3);}
#btn-horn{background:rgba(80,180,255,0.12);border-color:rgba(80,180,255,0.25);}
#btn-brake{background:rgba(255,40,40,0.15);border-color:rgba(255,40,40,0.3);}
#controls button:active,#mid-btns button:active{background:rgba(255,60,60,0.22);transform:scale(0.94);}
#btn-boost:active{background:rgba(255,140,0,0.38)!important;}
#btn-horn:active{background:rgba(80,180,255,0.3)!important;}
#btn-brake:active{background:rgba(255,40,40,0.38)!important;}

.screen{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s;}
.screen.active{visibility:visible;opacity:1;}
.screen-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 20px;max-height:100vh;overflow-y:auto;}
#road-preview{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0px,transparent 48px,rgba(255,255,255,0.03) 48px,rgba(255,255,255,0.03) 50px),var(--road);animation:roadScroll .8s linear infinite;z-index:1;}
@keyframes roadScroll{from{background-position:0 0;}to{background-position:0 50px;}}
#screen-home{background:linear-gradient(170deg,#0d0d18 0%,#0a0a0f 60%,#150510 100%);}
#logo{font-family:'Orbitron',monospace;font-size:36px;font-weight:900;color:#fff;letter-spacing:2px;text-align:center;line-height:1.1;text-shadow:0 0 40px rgba(255,60,60,0.6);}
#logo span{display:block;color:var(--accent);font-size:42px;text-shadow:0 0 30px var(--accent),0 0 60px rgba(255,60,60,0.4);}
#best-display{display:flex;flex-direction:column;align-items:center;gap:2px;}
#best-display .lbl{font-family:'Rajdhani',sans-serif;font-size:11px;letter-spacing:3px;color:rgba(240,240,240,0.4);text-transform:uppercase;}
#best-score{font-family:'Orbitron',monospace;font-size:28px;color:var(--gold);text-shadow:0 0 20px rgba(255,215,0,0.4);}
.big-btn{font-family:'Orbitron',monospace;font-size:16px;font-weight:700;letter-spacing:3px;color:#fff;background:var(--accent);border:none;padding:15px 44px;border-radius:var(--radius);cursor:pointer;min-width:190px;text-align:center;position:relative;overflow:hidden;transition:transform .1s,box-shadow .15s;box-shadow:0 4px 20px rgba(255,60,60,0.4);}
.big-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.1) 0%,transparent 100%);}
.big-btn:active{transform:scale(0.97);box-shadow:0 2px 10px rgba(255,60,60,0.3);}
.small-btn{font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;color:rgba(240,240,240,0.6);background:none;border:1px solid var(--btn-border);padding:10px 24px;border-radius:var(--radius);cursor:pointer;min-width:160px;transition:border-color .15s,color .15s;}
.small-btn:active{border-color:rgba(255,255,255,0.3);color:#fff;}
#screen-pause,#screen-gameover,#screen-settings{background:rgba(8,8,15,0.94);backdrop-filter:blur(10px);}
.overlay-title{font-family:'Orbitron',monospace;font-size:34px;font-weight:900;color:#fff;letter-spacing:4px;text-shadow:0 0 30px rgba(255,60,60,0.5);}
#go-score-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;}
.go-stat{display:flex;justify-content:space-between;align-items:baseline;width:220px;border-bottom:1px solid rgba(255,255,255,0.07);padding-bottom:8px;}
.go-stat .lbl{font-family:'Rajdhani',sans-serif;font-size:13px;letter-spacing:3px;color:rgba(240,240,240,0.4);text-transform:uppercase;}
.go-stat span:last-child{font-family:'Orbitron',monospace;font-size:22px;color:var(--text);}
#go-best{color:var(--gold);}
#new-best-badge{font-family:'Orbitron',monospace;font-size:14px;color:var(--gold);background:rgba(255,215,0,0.1);border:1px solid rgba(255,215,0,0.3);padding:8px 20px;border-radius:8px;letter-spacing:2px;}

#level-up-toast,#horn-toast,#boost-toast{
  position:absolute;top:30%;left:50%;
  transform:translateX(-50%) translateY(-20px);
  z-index:40;font-family:'Orbitron',monospace;font-size:20px;font-weight:700;letter-spacing:4px;color:#fff;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  padding:10px 26px;border-radius:var(--radius);
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;
}
#horn-toast{background:linear-gradient(135deg,#3299ff,#7055ff);top:40%;}
#boost-toast{background:linear-gradient(135deg,#ff8c00,#ffcc00);top:35%;color:#000;}
#level-up-toast.show,#horn-toast.show,#boost-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#gyro-hint{position:absolute;top:calc(var(--hud-h)+8px);left:50%;transform:translateX(-50%);z-index:25;font-family:'Rajdhani',sans-serif;font-size:13px;letter-spacing:2px;color:rgba(255,255,255,0.5);background:rgba(0,0,0,0.5);padding:4px 12px;border-radius:8px;pointer-events:none;}

.settings-panel{width:300px;gap:10px;}
.setting-row{display:flex;justify-content:space-between;align-items:center;width:100%;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.06);}
.setting-label{font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;color:rgba(240,240,240,0.75);letter-spacing:1px;}
.toggle-btn{font-family:'Orbitron',monospace;font-size:11px;font-weight:700;letter-spacing:1px;padding:6px 14px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s;border:none;}
.toggle-btn.on{background:var(--accent);color:#fff;}
.toggle-btn.off{background:#2a2a3a;color:rgba(240,240,240,0.4);}
.slider-wrap{display:flex;align-items:center;gap:8px;}
.slider-wrap input[type=range]{width:90px;accent-color:var(--accent);cursor:pointer;}
#sens-val{font-family:'Orbitron',monospace;font-size:12px;color:var(--text);min-width:16px;text-align:center;}

body.night-mode{filter:brightness(0.5) saturate(0.7) hue-rotate(200deg);}

@keyframes shake{
  0%,100%{transform:translateX(-50%);}
  20%{transform:translateX(calc(-50% - 6px));}
  40%{transform:translateX(calc(-50% + 6px));}
  60%{transform:translateX(calc(-50% - 4px));}
  80%{transform:translateX(calc(-50% + 4px));}
}
.shake{animation:shake .35s ease;}