Polish UI/UX: loading veil, pause/touch refinement, best-lap celebration

- index.html: sunset-gradient loading veil covers the black canvas while
the three.js module resolves; faded out on the first animation frame.
- style.css: drop unloaded 'Racing Sans One' in favor of Orbitron, hide
keyboard hint on touch devices, scale HUD gauge/overlay on narrow
viewports so they no longer overlap the on-screen steering buttons,
subtle full-frame vignette, loading-veil sunset gradient + dots
keyframes, and the toastGoldIn keyframe used by new best-lap toast.
- js/game.js: fade loading veil out on first frame; backdrop blur on the
pause overlay; .pause-btn gets :active/focus-visible + hover lift;
.touch-btn gets tap-highlight removal, smoother transitions, brighter
.pressed state; showToast() gains a 'gold' variant used by the NEW
BEST LAP path for a scaled gold-glow celebration.

No gameplay/physics/logic changes.

index.html

@@ -22,5 +22,10 @@
   <canvas id="game"></canvas>
   <canvas id="minimap" width="160" height="160"></canvas>
   <div id="controls">WASD/ARROWS · SPACE drift · SHIFT nitro · C camera · G ghost · P/ESC pause · F fullscreen · R restart</div>
+  <div id="loading-veil" role="status" aria-live="polite">
+    <div class="lv-title">SUNSET RACING</div>
+    <div class="lv-sub">LOADING TRACK</div>
+    <div class="lv-dots"><span></span><span></span><span></span></div>
+  </div>
 </body>
 </html>

js/game.js

@@ -279,10 +279,12 @@ const pauseEl = document.createElement('div');
 pauseEl.id = 'pause-overlay';
 pauseEl.style.cssText = `
   position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(0,0,0,0.75);
+  background: rgba(0,0,0,0.72);
   display: none; align-items: center; justify-content: center;
   z-index: 400; pointer-events: auto;
   font-family: 'Orbitron', sans-serif;
+  backdrop-filter: blur(10px) saturate(120%);
+  -webkit-backdrop-filter: blur(10px) saturate(120%);
 `;
 pauseEl.innerHTML = `
   <div style="text-align:center; color:white;">
@@ -312,11 +314,25 @@ pauseStyle.textContent = `
     letter-spacing: 2px;
     cursor: pointer;
     min-width: 280px;
-    transition: all 0.15s;
+    text-transform: uppercase;
+    outline: none;
+    transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
   }
   .pause-btn:hover {
     background: rgba(255,34,0,0.3);
     border-color: #ff4422;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 18px rgba(255,34,0,0.25);
+  }
+  .pause-btn:active {
+    background: rgba(255,34,0,0.55);
+    border-color: #ff6644;
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(255,34,0,0.3);
+  }
+  .pause-btn:focus-visible {
+    border-color: #00eaff;
+    box-shadow: 0 0 0 3px rgba(0,234,255,0.25);
   }
 `;
 document.head.appendChild(pauseStyle);
@@ -367,22 +383,31 @@ if (isTouchDevice) {
       position: fixed;
       font-family: Orbitron, sans-serif;
       font-weight: 900;
-      font-size: 24px;
-      background: rgba(0,0,0,0.35);
-      color: white;
-      border: 2px solid rgba(255,255,255,0.4);
+      font-size: 26px;
+      background: rgba(0,0,0,0.38);
+      color: #fff;
+      border: 2px solid rgba(255,255,255,0.45);
       border-radius: 50%;
       width: 72px; height: 72px;
       display: flex; align-items: center; justify-content: center;
       z-index: 150;
       touch-action: manipulation;
       user-select: none; -webkit-user-select: none;
+      -webkit-tap-highlight-color: transparent;
       backdrop-filter: blur(6px);
       -webkit-backdrop-filter: blur(6px);
+      text-shadow: 0 2px 6px rgba(0,0,0,0.7);
+      box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
+      transition: transform 0.08s ease-out, background 0.08s ease-out, border-color 0.12s ease-out;
+    }
+    .touch-btn.wide { width: 96px; border-radius: 14px; font-size: 16px; letter-spacing: 2px; }
+    .touch-btn:active { background: rgba(255,34,0,0.5); transform: scale(0.94); }
+    .touch-btn.pressed {
+      background: rgba(255,34,0,0.65);
+      border-color: #ffb0a0;
+      transform: scale(0.92);
+      box-shadow: 0 0 22px rgba(255,68,34,0.6), inset 0 1px 0 rgba(255,255,255,0.15);
     }
-    .touch-btn.wide { width: 92px; border-radius: 12px; font-size: 18px; }
-    .touch-btn:active { background: rgba(255,34,0,0.5); }
-    .touch-btn.pressed { background: rgba(255,34,0,0.6); }
   `;
   document.head.appendChild(touchStyle);
 
@@ -423,10 +448,28 @@ toastEl.style.cssText = `
 `;
 document.body.appendChild(toastEl);
 let toastTimer = 0;
-function showToast(msg) {
+function showToast(msg, variant) {
   toastEl.textContent = msg;
   toastEl.style.opacity = '1';
-  toastTimer = 1.2;
+  // Reset any gold animation/class left over from a previous best-lap toast
+  toastEl.classList.remove('toast-gold');
+  // offset reflow so re-adding the class restarts the keyframes
+  void toastEl.offsetWidth;
+  if (variant === 'gold') {
+    toastEl.style.color = '#ffd700';
+    toastEl.style.fontSize = '42px';
+    toastEl.style.letterSpacing = '3px';
+    toastEl.style.textShadow = '0 0 36px rgba(255,215,0,0.9), 0 4px 14px rgba(0,0,0,0.9)';
+    toastEl.style.animation = 'toastGoldIn 2s ease-out forwards';
+    toastTimer = 2;
+  } else {
+    toastEl.style.color = '#fff';
+    toastEl.style.fontSize = '28px';
+    toastEl.style.letterSpacing = '0';
+    toastEl.style.textShadow = '0 0 20px rgba(255,255,255,0.6), 0 2px 8px rgba(0,0,0,0.9)';
+    toastEl.style.animation = 'none';
+    toastTimer = 1.2;
+  }
 }
 
 // ══ COUNTDOWN OVERLAY ══
@@ -1135,7 +1178,7 @@ function update() {
           const saved = saveGhost(currentLapSamples, lastLapTime);
           if (saved) ghostData = loadGhost();
         }
-        showToast(`NEW BEST LAP! ${formatRaceTime(lastLapTime)}`);
+        showToast(`NEW BEST LAP! ${formatRaceTime(lastLapTime)}`, 'gold');
       }
 
       // Reset for next lap
@@ -1401,10 +1444,22 @@ function update() {
   }
 }
 
+let loadingVeilHidden = false;
+function hideLoadingVeil() {
+  if (loadingVeilHidden) return;
+  const veil = document.getElementById('loading-veil');
+  if (!veil) { loadingVeilHidden = true; return; }
+  veil.classList.add('hidden');
+  // Remove from DOM after the fade-out transition so it can't steal clicks.
+  setTimeout(() => { veil.remove(); }, 700);
+  loadingVeilHidden = true;
+}
+
 function animate() {
   requestAnimationFrame(animate);
   update();
   renderer.render(scene, camera);
+  if (!loadingVeilHidden) hideLoadingVeil();
 }
 
 animate();

style.css

@@ -1,3 +1,10 @@
+/* ═══════════════════════════════════════════════════════
+ *  SUNSET RACING — base styles
+ *  Runtime UI (pause menu, touch buttons, toasts, attract
+ *  overlay, countdown) is styled by js/game.js via injected
+ *  <style> tags. This file holds the static surfaces only.
+ * ═══════════════════════════════════════════════════════ */
+
 * {
   margin: 0;
   padding: 0;
@@ -9,6 +16,22 @@ html, body {
   height: 100%;
   overflow: hidden;
   background: #000;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Subtle cinematic vignette — tightens the frame, adds depth
+   behind the HUD without affecting the 3D canvas brightness. */
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 100;
+  background: radial-gradient(
+    ellipse at center,
+    transparent 55%,
+    rgba(0, 0, 0, 0.38) 100%
+  );
 }
 
 #game {
@@ -17,23 +40,141 @@ html, body {
   height: 100%;
 }
 
-/* Canvas HUD handles its own positioning */
-#hud-canvas {
+/* HUD canvases are positioned by js/hud.js via cssText;
+   we only hint the browser about scaling. */
+#hud-canvas,
+#hud-overlay {
   image-rendering: auto;
 }
 
-/* minimap styles handled in js/minimap.js */
-
+/* Keyboard hint strip at the bottom of the screen. */
 #controls {
   position: fixed;
-  bottom: 10px;
+  bottom: 12px;
   left: 50%;
   transform: translateX(-50%);
-  font-family: 'Racing Sans One', 'Impact', 'Arial Black', sans-serif;
-  font-size: 13px;
+  font-family: 'Orbitron', sans-serif;
+  font-weight: 700;
+  font-size: 12px;
   color: #fff;
-  opacity: 0.35;
-  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+  opacity: 0.45;
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
   pointer-events: none;
-  letter-spacing: 2px;
+  letter-spacing: 3px;
+  white-space: nowrap;
+  text-transform: uppercase;
+  z-index: 140;
+  transition: opacity 0.3s ease;
+}
+
+#controls:hover { opacity: 0.75; }
+
+/* Hide the keyboard hint when running on a touch device — the
+   on-screen touch buttons serve as the control reference there,
+   and the hint string otherwise collides with them. */
+@media (hover: none) and (pointer: coarse) {
+  #controls { display: none; }
+}
+
+/* On narrow viewports the hint wraps messily; shrink it. */
+@media (max-width: 720px) {
+  #controls {
+    font-size: 10px;
+    letter-spacing: 2px;
+    white-space: normal;
+    max-width: 92vw;
+    text-align: center;
+  }
+}
+
+/* Scale the bottom-left HUD gauge down on phones so it no longer
+   overlaps the on-screen steering buttons. */
+@media (max-width: 640px) {
+  #hud-canvas {
+    transform: scale(0.68);
+    transform-origin: bottom left;
+  }
+  #hud-overlay {
+    transform: scale(0.85);
+    transform-origin: top left;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════
+ *  Loading veil — shown while game.js initializes
+ *  (three.js modules, scenery generation). Faded out on
+ *  the first animation frame by js/game.js.
+ * ═══════════════════════════════════════════════════════ */
+#loading-veil {
+  position: fixed;
+  inset: 0;
+  z-index: 900;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  pointer-events: auto;
+  background:
+    radial-gradient(ellipse at 50% 120%, #ff6a3d 0%, #8a1e3c 32%, #2a0a2a 62%, #050510 100%);
+  font-family: 'Orbitron', sans-serif;
+  color: #fff;
+  opacity: 1;
+  transition: opacity 0.6s ease-out;
+}
+
+#loading-veil.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#loading-veil .lv-title {
+  font-weight: 900;
+  font-size: clamp(32px, 9vw, 68px);
+  letter-spacing: clamp(4px, 1vw, 10px);
+  text-shadow:
+    0 0 40px rgba(255, 160, 80, 0.8),
+    0 4px 24px rgba(0, 0, 0, 0.9);
+  text-align: center;
+}
+
+#loading-veil .lv-sub {
+  font-weight: 700;
+  font-size: clamp(11px, 2vw, 14px);
+  letter-spacing: 4px;
+  color: rgba(255, 255, 255, 0.82);
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
+}
+
+#loading-veil .lv-dots {
+  display: flex;
+  gap: 10px;
+}
+#loading-veil .lv-dots span {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
+  animation: lvDot 1.1s ease-in-out infinite;
+}
+#loading-veil .lv-dots span:nth-child(2) { animation-delay: 0.15s; }
+#loading-veil .lv-dots span:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes lvDot {
+  0%, 100% { transform: translateY(0); opacity: 0.35; }
+  50%      { transform: translateY(-8px); opacity: 1; }
+}
+
+/* ═══════════════════════════════════════════════════════
+ *  Gold-toast keyframe for the "NEW BEST LAP!" celebration.
+ *  The toast element gets the .toast-gold class applied in
+ *  js/game.js, which pulls this animation in.
+ * ═══════════════════════════════════════════════════════ */
+@keyframes toastGoldIn {
+  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
+  22%  { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
+  40%  { transform: translate(-50%, -50%) scale(1.00); opacity: 1; }
+  85%  { opacity: 1; }
+  100% { opacity: 0; }
 }