* { 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); }
/* driving controls: sized to the screen width (smaller on narrow phones, never larger than before less ~12%)
   and kept inside the safe area (rounded corners, notches), so nothing is cut off at the edges */
:root { --steer: min(104px, 26vw); --go: min(90px, 23vw); --ctl-edge: 12px; --ctl-gap: 10px;
        --ctl-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
#btnLeft  { left: calc(var(--ctl-edge) + env(safe-area-inset-left, 0px)); bottom: var(--ctl-bottom);
            width: var(--steer); height: var(--steer); font-size: calc(var(--steer) * 0.34); }
#btnRight { left: calc(var(--ctl-edge) + env(safe-area-inset-left, 0px) + var(--steer) + var(--ctl-gap)); bottom: var(--ctl-bottom);
            width: var(--steer); height: var(--steer); font-size: calc(var(--steer) * 0.34); }
#btnAccel { right: calc(var(--ctl-edge) + env(safe-area-inset-right, 0px)); bottom: var(--ctl-bottom); width: var(--go); height: var(--go);
            background: rgba(76,155,82,0.8); font-family: 'Saira Extra Condensed', Impact, sans-serif; font-weight: 800;
            font-size: calc(var(--go) * 0.36); letter-spacing: 1px; }
#btnBrake { right: calc(var(--ctl-edge) + env(safe-area-inset-right, 0px) + (var(--go) - 54px) / 2);
            bottom: calc(var(--ctl-bottom) + var(--go) + 14px); width: 54px; height: 54px;
            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: calc(var(--ctl-edge) + env(safe-area-inset-right, 0px) + (var(--go) - 58px) / 2); bottom: calc(var(--ctl-bottom) + var(--go) + 82px); 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;
}