* { margin: 0; padding: 0; box-sizing: border-box;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html, body { height: 100%; }
body { background: #1a1a2e; overflow: hidden; touch-action: none; }
canvas { display: block; }

#hud {
  position: fixed; top: 10px; left: 10px; z-index: 4;
  color: #fff; font-family: monospace; font-size: 13px;
  background: rgba(0,0,0,0.6); padding: 10px 14px; border-radius: 6px;
  display: flex; flex-direction: column; gap: 4px; min-width: 150px;
  pointer-events: none;
}
#hud .big { font-size: 20px; font-weight: bold; }
#hud .warn { color: #ff6b6b; font-weight: bold; min-height: 15px; }

#minimap {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: rgba(0,0,0,0.35); border-radius: 6px;
  pointer-events: none;
}

#gearBtn {
  position: fixed; top: 94px; right: 10px; z-index: 6;
  width: 42px; height: 42px; border: none; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
#panel {
  position: fixed; top: 142px; right: 10px; z-index: 51;
  display: none; flex-direction: column; gap: 6px;
  font-family: monospace; font-size: 12px;
  max-height: calc(100vh - 140px); overflow-y: auto;
  padding-right: 2px; -webkit-overflow-scrolling: touch;
}
#panel.open { display: flex; }
#panel button {
  background: rgba(0,0,0,0.6); color: #fff; border: 1px solid #555;
  border-radius: 6px; padding: 8px 12px; font-family: monospace; font-size: 12px;
}
#panel button:active { background: #333; }
#panel label {
  background: rgba(0,0,0,0.6); color: #fff; border-radius: 6px;
  padding: 6px 10px; display: flex; justify-content: space-between; gap: 8px; align-items: center;
}
#panel input[type=range] { width: 90px; }

#status {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: monospace; font-size: 16px; background: #1a1a2e; z-index: 10;
}

/* race end: controls fade away as the player crosses the line */
body.raceover .ctl { opacity: 0 !important; pointer-events: none !important; }
.ctl {
  transition: opacity 0.35s ease;
  position: fixed; border: none; border-radius: 50%; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.92); font-family: -apple-system, system-ui, sans-serif; font-weight: 700;
  background: rgba(55,55,60,0.48);
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.ctl.held { filter: brightness(1.4); transform: scale(0.94); }
#btnLeft  { left: 14px;  bottom: calc(24px + env(safe-area-inset-bottom)); width: 120px; height: 120px; font-size: 40px; }
#btnRight { left: 148px; bottom: calc(24px + env(safe-area-inset-bottom)); width: 120px; height: 120px; font-size: 40px; }
#btnAccel { right: 14px; bottom: calc(24px + env(safe-area-inset-bottom)); width: 102px; height: 102px;
            background: rgba(76,155,82,0.8); font-size: 13px; letter-spacing: 0.4px; }
#btnBrake { right: 36px; bottom: calc(140px + env(safe-area-inset-bottom)); width: 58px; height: 58px;
            background: rgba(190,76,76,0.8); font-size: 9px;
            opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
#btnBrake.show { opacity: 1; pointer-events: auto; }
#camBtn   { right: 36px; bottom: calc(212px + env(safe-area-inset-bottom)); width: 58px; height: 40px;
            border-radius: 20px; padding: 0; }
#camBtn svg { width: 24px; height: 24px; display: block; margin: auto; }

#stats {
  position: fixed; left: 14px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 4;
  color: #7fff7f; font-family: monospace; font-size: 11px; line-height: 1.5;
  background: rgba(0,0,0,0.55); padding: 6px 9px; border-radius: 6px;
  pointer-events: none; display: none; white-space: pre;
}

.hbar {
  width: 100%; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,0.18); overflow: hidden; margin: 2px 0;
}
#healthFill {
  height: 100%; width: 100%; background: #5cb85c; border-radius: 4px;
  transition: width 0.25s ease, background 0.4s ease;
}