* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, sans-serif; }
#game-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #ffdf9e 0%, #e98a3c 55%, #8a4a1d 100%);
  z-index: 20;
}
.panel {
  background: #fff8ec; border: 3px solid #2b2118; border-radius: 18px;
  padding: 28px 34px; max-width: 560px; width: 92%; text-align: center;
  color: #3a2b1c; box-shadow: 0 18px 40px rgba(60,30,0,.35);
}
.panel h1 { font-size: clamp(30px, 7vw, 52px); letter-spacing: 2px; color: #d1402a; }
.panel h1.won { color: #2f9e44; }
.tag { margin: 6px 0 14px; font-weight: 600; color: #8a5a2b; }
.howto { list-style: none; text-align: left; display: inline-block; margin-bottom: 16px; }
.howto li { margin: 5px 0; font-size: 15px; }
.howto b { color: #d1402a; }
.tiny { margin-top: 10px; font-size: 12px; color: #8a5a2b; }
button {
  font: inherit; font-weight: 800; font-size: 18px; cursor: pointer;
  background: linear-gradient(#ff9f2e, #ff6a3d); color: #fff8ec;
  border: 2px solid #2b2118; border-radius: 12px; padding: 12px 26px;
  box-shadow: 0 4px 0 #2b2118;
}
button:active { transform: translateY(2px); box-shadow: 0 2px 0 #2b2118; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.hud-row { display: flex; gap: 10px; padding: 10px; }
.hud-row-bottom { position: absolute; bottom: 0; left: 0; right: 0; align-items: flex-end; }
.hud-box {
  background: rgba(43, 33, 24, 0.72); color: #ffe9c4; border: 2px solid #ffd23e;
  border-radius: 10px; padding: 6px 12px; font-weight: 700; font-size: 15px;
}
#minimap { background: rgba(43, 33, 24, 0.6); border: 2px solid #ffd23e; border-radius: 10px; }
#countdown {
  position: absolute; top: 34%; left: 0; right: 0; text-align: center;
  font-size: clamp(60px, 16vw, 140px); font-weight: 900; color: #fff8ec;
  text-shadow: 0 0 18px #ff6a3d, 0 6px 0 #2b2118; opacity: 0; transition: opacity .15s;
}
#touch-controls {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: none; pointer-events: none;
}
#touch-controls.visible { display: block; }
.tbtn {
  position: absolute; bottom: 16px; width: 74px; height: 74px; border-radius: 50%;
  font-size: 15px; font-weight: 800; pointer-events: auto; touch-action: none;
}
.tb-left { left: 16px; } .tb-right { left: 104px; }
.tb-brake { right: 104px; background: linear-gradient(#ff5c5c, #c92a2a); }
.tb-gas { right: 16px; background: linear-gradient(#7ed957, #2f9e44); }
@media (max-width: 640px) {
  .hud-box { font-size: 12px; padding: 4px 8px; }
  #minimap { width: 78px; height: 78px; }
  .tb-left { bottom: 96px; } .tb-right { bottom: 96px; }
}