:root {
  --glass: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.25);
  --accent: #00d2ff;
  --danger: #ff4757;
  --success: #2ed573;
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
body { background: #0f172a; overflow: hidden; font-family: 'Segoe UI', system-ui, sans-serif; }

#game-container { position: relative; width: 100vw; height: 100vh; }
canvas { display: block; width: 100%; height: 100%; }

#hud {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 20px; align-items: center; background: var(--glass);
  backdrop-filter: blur(10px); padding: 10px 20px; border-radius: 50px;
  border: 1px solid var(--glass-border); color: white; font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

#fuel-container { display: flex; align-items: center; gap: 8px; }
#fuel-bar { width: 80px; height: 8px; background: rgba(0,0,0,0.4); border-radius: 4px; overflow: hidden; }
#fuel-fill { width: 100%; height: 100%; background: linear-gradient(90deg, #f1c40f, #e67e22); transition: width 0.2s; }

#controls { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 30px; }
.ctrl-btn {
  width: 100px; height: 60px; border: none; border-radius: 30px; font-size: 18px; font-weight: bold;
  cursor: pointer; touch-action: manipulation; color: white; box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
#brake-btn { background: var(--danger); }
#gas-btn { background: var(--success); }

.glass-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--glass); backdrop-filter: blur(16px); border: 1px solid var(--glass-border);
  border-radius: 20px; padding: 30px; text-align: center; color: white; width: 90%; max-width: 400px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5); z-index: 10;
}
input { width: 100%; padding: 12px; margin: 8px 0; border: none; border-radius: 10px; background: rgba(0,0,0,0.3); color: white; }
button { width: 100%; padding: 12px; margin: 6px 0; border: none; border-radius: 10px; background: var(--accent); color: #0f172a; font-weight: bold; cursor: pointer; }
.hidden { display: none !important; }

@media (max-width: 768px) {
  #hud { gap: 10px; padding: 8px 15px; font-size: 14px; }
  .ctrl-btn { width: 90px; height: 55px; font-size: 16px; }
}