Minimap mobile scaling, countdown pop-in, reduced-motion a11y

- style.css: scale #minimap to 0.62x on max-width:640px so it no longer
overlaps the right-cluster touch buttons; add countdownPop keyframe
and prefers-reduced-motion support.
- js/game.js: add setCountdown() helper that restarts the pop keyframe
on each digit change so 3->2->1->GO! punches into view.

js/game.js

@@ -486,6 +486,19 @@ countdownEl.style.cssText = `
 `;
 document.body.appendChild(countdownEl);
 
+let _lastCountdownText = '';
+function setCountdown(text, color) {
+  countdownEl.style.opacity = '1';
+  countdownEl.style.color = color;
+  if (_lastCountdownText === text) return; // same digit — don't retrigger
+  _lastCountdownText = text;
+  countdownEl.textContent = text;
+  // Restart the pop keyframe by toggling the animation property.
+  countdownEl.style.animation = 'none';
+  void countdownEl.offsetWidth; // force reflow
+  countdownEl.style.animation = 'countdownPop 0.55s cubic-bezier(0.2, 1.2, 0.4, 1) forwards';
+}
+
 // ══ RESULTS OVERLAY ══
 const resultsEl = document.createElement('div');
 resultsEl.id = 'results-overlay';
@@ -1021,23 +1034,15 @@ function update() {
   if (raceState === 'countdown') {
     const countdownElapsed = elapsed - countdownStartTime;
 
-    // Show 3, 2, 1, GO
+    // Show 3, 2, 1, GO (each digit pops in via countdownPop keyframe)
     if (countdownElapsed < 1) {
-      countdownEl.textContent = '3';
-      countdownEl.style.color = '#ff3333';
-      countdownEl.style.opacity = '1';
+      setCountdown('3', '#ff3333');
     } else if (countdownElapsed < 2) {
-      countdownEl.textContent = '2';
-      countdownEl.style.color = '#ffaa00';
-      countdownEl.style.opacity = '1';
+      setCountdown('2', '#ffaa00');
     } else if (countdownElapsed < 3) {
-      countdownEl.textContent = '1';
-      countdownEl.style.color = '#00ff66';
-      countdownEl.style.opacity = '1';
+      setCountdown('1', '#00ff66');
     } else if (countdownElapsed < 3.8) {
-      countdownEl.textContent = 'GO!';
-      countdownEl.style.color = '#ffffff';
-      countdownEl.style.opacity = '1';
+      setCountdown('GO!', '#ffffff');
     } else {
       countdownEl.style.opacity = '0';
     }

style.css

@@ -87,8 +87,11 @@ body::after {
   }
 }
 
-/* Scale the bottom-left HUD gauge down on phones so it no longer
-   overlaps the on-screen steering buttons. */
+/* Scale the HUD gauge, top overlay, and minimap down on phones so
+   they no longer overlap the on-screen steering / pedal / nitro
+   touch buttons. The minimap is bottom-right at 180×180 and the
+   right-cluster touch buttons live right: 24-212px × bottom: 100-252px,
+   so without this rule they collide directly. */
 @media (max-width: 640px) {
   #hud-canvas {
     transform: scale(0.68);
@@ -98,6 +101,11 @@ body::after {
     transform: scale(0.85);
     transform-origin: top left;
   }
+  #minimap {
+    transform: scale(0.62);
+    transform-origin: bottom right;
+    opacity: 0.7;
+  }
 }
 
 /* ═══════════════════════════════════════════════════════
@@ -178,3 +186,38 @@ body::after {
   85%  { opacity: 1; }
   100% { opacity: 0; }
 }
+
+/* ═══════════════════════════════════════════════════════
+ *  Countdown pop-in — applied via inline animation from
+ *  js/game.js each time the countdown digit changes so the
+ *  "3 → 2 → 1 → GO!" beats actually punch into view instead
+ *  of just color-swapping. The transform is compounded with
+ *  the existing `translate(-50%, -50%)` set on countdownEl.
+ * ═══════════════════════════════════════════════════════ */
+@keyframes countdownPop {
+  0%   { transform: translate(-50%, -50%) scale(0.35); opacity: 0; filter: blur(6px); }
+  35%  { transform: translate(-50%, -50%) scale(1.18); opacity: 1; filter: blur(0); }
+  55%  { transform: translate(-50%, -50%) scale(0.96); opacity: 1; }
+  100% { transform: translate(-50%, -50%) scale(1.00); opacity: 1; }
+}
+
+/* ═══════════════════════════════════════════════════════
+ *  Accessibility: honor the user's "reduce motion" OS pref.
+ *  We keep state transitions (fades) but strip the bouncy
+ *  keyframes and vignette pulse so motion-sensitive players
+ *  still get a usable, polished HUD.
+ * ═══════════════════════════════════════════════════════ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.08s !important;
+  }
+  #loading-veil .lv-dots span {
+    animation: none !important;
+    opacity: 0.7 !important;
+    transform: none !important;
+  }
+}