*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #000; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
#c { display: block; width: 100vw; height: 100vh; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }

#hud-tl {
  position: absolute; top: 20px; left: 20px;
  color: #fff; line-height: 1;
}
#speed-val { font-size: 48px; font-weight: 700; font-variant-numeric: tabular-nums; }
#speed-unit { font-size: 13px; color: #aaa; margin-top: 2px; }
#speed-limit-row { font-size: 13px; color: #4ade80; margin-top: 6px; }
#speed-limit-row.over { color: #f87171; }

#hud-tc {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; min-width: 200px;
}
#pts-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #888; }
#pts-bar-wrap { width: 180px; height: 10px; background: #1e2028; border-radius: 5px; overflow: hidden; }
#pts-bar { height: 100%; width: 100%; background: #4a9eff; border-radius: 5px; transition: width 0.4s, background 0.4s; }
#pts-bar.warn { background: #f87171; }
#pts-val { font-size: 12px; color: #aaa; }

#hud-tr { position: absolute; top: 20px; right: 20px; }
#minimap { border: 2px solid rgba(255,255,255,0.15); border-radius: 8px; display: block; }

#zone-label {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.6); color: #ffd700; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; padding: 6px 18px; border-radius: 20px;
  opacity: 0; transition: opacity 0.5s;
}
#zone-label.visible { opacity: 1; }

#fine-container { position: absolute; bottom: 100px; right: 30px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

.fine-popup {
  background: rgba(80,0,0,0.85); color: #f87171; font-size: 13px; font-weight: 700;
  padding: 6px 14px; border-radius: 20px; border-left: 3px solid #f87171;
  animation: floatUp 2.5s ease-out forwards;
}
.fine-popup.good { background: rgba(0,60,20,0.85); color: #4ade80; border-left-color: #4ade80; }

@keyframes floatUp {
  0%   { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(-30px); }
  100% { opacity: 0; transform: translateY(-50px); }
}

/* Overlays */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.overlay.hidden { display: none; }

.card {
  background: #1c1e26; border: 1px solid #2e3044; border-radius: 16px;
  padding: 40px 48px; text-align: center; max-width: 400px; width: 90%;
}
.card h1 { font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px; }
.card .tagline { font-size: 14px; color: #888; margin-bottom: 28px; }

#color-picker { display: flex; gap: 12px; justify-content: center; margin-bottom: 28px; }
.swatch {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; pointer-events: all;
  border: 3px solid transparent; transition: border-color 0.2s, transform 0.15s;
}
.swatch.selected { border-color: #fff; transform: scale(1.15); }

.card .prompt { font-size: 14px; color: #666; }
.card kbd { background: #2e3044; color: #aaa; padding: 2px 8px; border-radius: 4px; font-family: inherit; font-size: 13px; }

.start-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.btn-primary, .btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 20px; border-radius: 10px; border: none;
  font-size: 15px; font-weight: 700; cursor: pointer; pointer-events: all;
  transition: transform 0.1s, opacity 0.2s;
}
.btn-primary:hover, .btn-secondary:hover { transform: scale(1.02); }
.btn-primary:active, .btn-secondary:active { transform: scale(0.98); }
.btn-primary  { background: #4a9eff; color: #fff; }
.btn-secondary { background: #2e3044; color: #aaa; border: 1px solid #3a3e56; }
.btn-key {
  background: rgba(0,0,0,0.25); color: inherit; padding: 2px 8px;
  border-radius: 5px; font-size: 12px; font-family: monospace;
}

#free-roam-badge {
  display: none; font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: #ffd700; background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.3);
  padding: 3px 10px; border-radius: 20px; margin-top: 2px;
}
#free-roam-badge.visible { display: block; }

#stats { margin: 20px 0; color: #aaa; font-size: 14px; line-height: 2; }
#stats strong { color: #fff; }