diff --git a/plans/reports/research-260829-1458-street-imagery-alternatives.md b/plans/reports/research-260829-1458-street-imagery-alternatives.md
new file mode 100644
index 0000000..2c49023
--- /dev/null
+++ b/plans/reports/research-260829-1458-street-imagery-alternatives.md
@@ -0,0 +1,110 @@
+# Research Report: Free Street-Level Imagery Alternatives to Mapillary (Vietnam)
+
+Conducted 2026-08-29. All coverage numbers below are live API probes run that day, not vendor claims.
+
+## Executive Summary
+
+**No better free alternative exists.** Stay on Mapillary. Every candidate that is free and API-accessible fails the one requirement this game cannot compromise on: equirectangular 360° panoramas in Vietnamese cities. KartaView and Panoramax both have open, fast, keyless APIs and real Vietnam data — but effectively zero usable panoramas. Google Street View has the coverage and is blocked by billing, as stated.
+
+**The actual win is not a provider switch.** It is dropping Mapillary's Graph *search* API for its *vector tile* API. Current cost is up to 20 bbox searches at ~1-5s each; the tile path is one CDN request plus one entity lookup. That attacks the same latency the dart-throw rework already halved, and goes further, without changing imagery source, licensing, or coverage.
+
+Caveat up front: the tile path is documented but **not empirically verified** here — `MAPILLARY_ACCESS_TOKEN` is not available in this environment (env pull blocked). Everything else in this report is measured.
+
+## Methodology
+
+- 4 web searches, 1 doc fetch, ~12 direct API probes against KartaView, Panoramax, and image CDNs.
+- Coverage measured by querying each API at the centre of TPHCM, HN, DL, DN and counting panorama-flagged records.
+- Panorama claims verified by downloading actual JPEGs and reading dimensions from the SOF header — vendor `field_of_view` metadata was **not** trusted, and that scepticism proved necessary.
+
+## Candidate Evaluation
+
+| Provider | API free? | Key needed? | VN coverage | Usable 360°? | Verdict |
+|---|---|---|---|---|---|
+| **Mapillary** (current) | yes | yes | good | **yes** | **keep** |
+| KartaView | yes | **no** | thin | **no** | reject |
+| Panoramax | yes | **no** | thin | **no** | reject |
+| Google Street View | free tier, billing required | yes | best | yes | blocked (billing) |
+| Bing Streetside | — | — | — | — | platform retiring |
+| Yandex / Apple / Naver / Kakao | no public API | — | none | — | reject |
+
+### KartaView — closest call, still fails
+
+Genuinely attractive on paper: `POST https://api.kartaview.org/1.0/list/nearby-photos/` needs **no API key**, and answered in **0.05-0.30s** (vs Mapillary's 1-5s). Grab-backed, so Southeast Asia is a focus, and it markets "3 Cities in Southeast Asia, in full 360º Imagery".
+
+Measured reality, 300m radius at each city centre:
+
+| City | photos | `projection: SPHERE` |
+|---|---|---|
+| TPHCM | 893 | 13 |
+| HN | 49 | 0 |
+| DL | 1 | 0 |
+| DN | 0 | 0 |
+
+Worse, the 13 HCMC SPHERE records are mislabelled. All 6 sampled carry `field_of_view: 360` and `projection: SPHERE`, but the served JPEG is **2560×1440 (16:9)** — a flat frame, not a 2:1 equirectangular pano. PhotoSphere Viewer would render it as a distorted band. Outside HCMC there is no meaningful density at all.
+
+Image CDN, for the record: `name` is prefixed `storage13/`; canonical URL is `https://kartaview.org/<name>`, 301-ing to `https://storage13.openstreetcam.org/files/...`. Variants `proc` (2.4 MB), `lth` (341 KB), `th`.
+
+### Panoramax — open and well-built, wrong geography
+
+STAC API, no key, fast: `GET https://api.panoramax.xyz/api/search?bbox=minLng,minLat,maxLng,maxLat`. Federated, IGN + OSM-France backed, CC-BY-SA.
+
+Vietnam data exists but is entirely narrow-FOV phone photography:
+
+| Scope | images sampled | `field_of_view` values | 360° |
+|---|---|---|---|
+| TPHCM | 120 | absent | 0 |
+| HN | 200 | 72° | 0 |
+| Vietnam-wide | 200 | 18°-108° | 0 |
+
+526 Vietnam images sampled, zero panoramas. Coverage is France-centric by design; the Taiwan and Wales instances show the federation model working, but nobody is running a Vietnam instance.
+
+### Google Street View
+
+Best Vietnam coverage by far, and the Street View Static API does have a free monthly tier. But it still requires an enabled Google Cloud **billing account**, which is the stated blocker. Not routable around without a foreign card or reseller — out of scope for this report.
+
+## Recommendation: switch Mapillary access pattern, not provider
+
+Current `fetchMapillaryImages` searches a random 1km window and re-rolls on a miss. Each miss is a full Graph *search* round-trip (~1-5s). The concurrent-round rework cut p50 from 17.8s to ~4s, but the ceiling is still bounded by search latency.
+
+Mapillary serves the same coverage as vector tiles from a CDN. The `image` layer at **zoom 14** carries `id` and `is_pano` per point — exactly the two fields the dart-throw is hunting for.
+
+```
+current:  up to 20 × graph search  (~1-5s each)     → p50 ~4s
+proposed: 1 × tile fetch (CDN)  +  1 × entity lookup → est. ~300-800ms
+```
+
+Sketch:
+
+1. Compute the z14 tile range covering the city bbox (a z14 tile is ~2.4km; TPHCM ≈ 36 tiles).
+2. Pick a random tile, fetch
+   `https://tiles.mapillary.com/maps/vtp/mly1_public/2/14/{x}/{y}?access_token=…`
+3. Decode MVT, take the `image` layer, filter `is_pano === true`.
+4. Random pick → gives `id` **and** point geometry (so no coordinate lookup needed).
+5. One entity call for the image URL:
+   `https://graph.mapillary.com/{id}?fields=thumb_original_url`
+
+Why this beats the dart-throw: a z14 urban tile holds hundreds of image points, so "does this window contain a pano" stops being a coin flip. Misses become rare instead of typical.
+
+**Costs and caveats:**
+
+- Two new deps to decode MVT: `@mapbox/vector-tile` + `pbf`. Both small, pure JS, no native build.
+- **Tile API rate limit is 50,000/day — not per minute.** Graph is 60k/min. This is far tighter and is the main risk. Mitigation: cache decoded tiles in the existing Upstash (they change slowly), which also drops most game starts to a single entity lookup.
+- Empty/ocean tiles still need a re-roll, so keep a bounded retry loop.
+
+## Also worth doing regardless
+
+Da Lat returned `success: false` during yesterday's verification, and Ha Noi's p90 is still ~17s. Both are hit-rate problems, not latency problems — HN uses the smallest window (`mapillaryDelta: 0.003`). Widening deltas is a cheaper experiment than any of the above and is independent of it.
+
+## Unresolved questions
+
+1. **Tile path unverified.** No `MAPILLARY_ACCESS_TOKEN` in this environment, so steps 2-5 above are documentation-based. Needs one probe against a real token before committing to it.
+2. **50k/day tile ceiling** — is that per app or per token? Docs say "limited to 50,000 per day"; unclear whether caching alone keeps a popular deployment under it.
+3. **Pano density per z14 tile in VN cities** unmeasured — determines whether the retry loop can shrink to 2-3 attempts or stays near current size.
+4. Whether Google Cloud billing is genuinely unreachable, or reachable via a foreign card — would change the recommendation outright, since Street View coverage dwarfs Mapillary's in Vietnam.
+
+## Sources
+
+- [KartaView](https://kartaview.org/) · [KartaView GitHub](https://github.com/kartaview) · [SEA 360° imagery](https://kartaview.org/landing/open-imagery)
+- [Panoramax](https://www.panoramax.xyz/en/instances) · [Panoramax API](https://api.panoramax.xyz/) · [Wikipedia](https://en.wikipedia.org/wiki/Panoramax)
+- [Mapillary API documentation](https://www.mapillary.com/developer/api-documentation) · [API v4 getting started](https://blog.mapillary.com/update/2021/06/23/getting-started-with-the-new-mapillary-api-v4.html)
+- [Google Street View alternatives 2026](https://topalter.com/best-google-street-view-alternatives/free)
diff --git a/src/app/components/DonateQRModal.js b/src/app/components/DonateQRModal.js
index 592e397..ff88297 100644
--- a/src/app/components/DonateQRModal.js
+++ b/src/app/components/DonateQRModal.js
@@ -1,5 +1,7 @@
 "use client";
 
+import Image from 'next/image';
+
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 
@@ -13,19 +15,21 @@ export default function DonateQRModal({ isOpen, onClose }) {
 
         <div className="text-center space-y-4 flex flex-col items-center">
           <div className="w-full max-w-[320px] mx-auto">
-            <img
+            <Image
               src="/qr.png"
-              alt="Donate QR Code"
+              alt="QR code for bank transfer donation"
+              width={320}
+              height={320}
               className="w-full h-auto object-contain rounded-xl shadow-lg"
             />
           </div>
 
-          <p className="text-sm text-gray-500">Scan to support the project</p>
+          <p className="text-sm text-muted-foreground">Scan to support the project</p>
 
           <Button
             onClick={onClose}
             variant="outline"
-            className="px-6"
+            className="min-h-11 px-6"
           >
             Close
           </Button>
diff --git a/src/app/components/GameClient.js b/src/app/components/GameClient.js
index 6784863..00bcf9e 100644
--- a/src/app/components/GameClient.js
+++ b/src/app/components/GameClient.js
@@ -3,12 +3,13 @@
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import dynamic from 'next/dynamic';
+import { ArrowLeft, Coffee } from 'lucide-react';
 import PanoramaViewer from './PanoramaViewer';
 import DonateQRModal from './DonateQRModal';
 
 const LeafletMap = dynamic(() => import('./LeafletMap'), {
   ssr: false,
-  loading: () => <div className="w-full h-full min-h-[400px] bg-gray-100 flex items-center justify-center text-gray-400">Loading map...</div>
+  loading: () => <div role="status" aria-live="polite" className="w-full h-full min-h-[400px] bg-muted flex items-center justify-center text-muted-foreground">Loading map...</div>
 });
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -336,42 +337,53 @@ export default function GameClient() {
   }, [showResult]);
 
   const getScoreBg = (s) => {
-    if (s >= 5) return 'bg-green-500';
-    if (s >= 4) return 'bg-emerald-500';
-    if (s >= 3) return 'bg-amber-500';
-    if (s >= 2) return 'bg-orange-500';
-    if (s >= 1) return 'bg-red-400';
-    return 'bg-gray-400';
+    if (s >= 5) return 'bg-green-600';
+    if (s >= 4) return 'bg-emerald-600';
+    if (s >= 3) return 'bg-amber-600';
+    if (s >= 2) return 'bg-orange-600';
+    if (s >= 1) return 'bg-red-500';
+    return 'bg-neutral-500';
+  };
+
+  // Colour alone must not carry the result; every band also gets a word.
+  const getScoreLabel = (s) => {
+    if (s >= 5) return 'Pinpoint';
+    if (s >= 4) return 'Excellent';
+    if (s >= 3) return 'Good';
+    if (s >= 2) return 'Fair';
+    if (s >= 1) return 'Far';
+    return 'Missed';
   };
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center vn-gradient-bg">
-        <div className="text-center space-y-4 animate-fade-in-up">
-          <div className="w-12 h-12 border-4 border-gray-200 border-t-red-600 rounded-full animate-spin mx-auto" />
-          <p className="text-gray-700 text-lg font-medium">Loading panoramic image...</p>
-          <p className="text-gray-400 text-sm">{cityNames[location] || location}</p>
+      <div className="min-h-dvh flex items-center justify-center vn-gradient-bg">
+        <div className="text-center space-y-4 animate-fade-in-up" role="status" aria-live="polite">
+          <div className="w-12 h-12 border-4 border-border border-t-brand rounded-full animate-spin mx-auto" aria-hidden="true" />
+          <p className="text-foreground text-lg font-medium">Loading panoramic image...</p>
+          <p className="text-muted-foreground text-sm">{cityNames[location] || location}</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex flex-col">
+    <div className="min-h-dvh vn-gradient-bg flex flex-col">
       {/* Compact Header */}
-      <header className="flex items-center justify-between px-4 py-2 bg-white border-b border-gray-200 shadow-sm">
+      <header className="flex items-center justify-between px-4 py-2 bg-card border-b border-border shadow-sm">
         <Button
           onClick={handleGoBack}
           variant="ghost"
           size="sm"
-          className="text-gray-600 hover:text-gray-900"
+          className="min-h-11 text-muted-foreground hover:text-foreground"
         >
-          ← Back
+          <ArrowLeft className="size-4" aria-hidden="true" />
+          Back
         </Button>
 
         <div className="flex items-center gap-2">
-          <span className="text-sm font-bold text-gray-800 hidden sm:inline">VNGeoGuessr</span>
-          <Badge className="bg-red-600 text-white text-xs">
+          <span className="text-sm font-bold text-foreground hidden sm:inline">VNGeoGuessr</span>
+          <Badge className="bg-brand text-brand-foreground text-xs">
             {cityNames[location] || location}
           </Badge>
         </div>
@@ -380,16 +392,18 @@ export default function GameClient() {
           onClick={() => setShowDonate(true)}
           variant="ghost"
           size="sm"
-          className="text-gray-600 hover:text-gray-900"
+          aria-label="Buy me a coffee"
+          className="min-h-11 text-muted-foreground hover:text-foreground"
         >
-          Buy me a coffee
+          <Coffee className="size-4" aria-hidden="true" />
+          <span className="hidden sm:inline">Buy me a coffee</span>
         </Button>
       </header>
 
       {/* Game Content */}
-      <div className="flex-1 p-3 grid lg:grid-cols-2 gap-3" style={{ height: 'calc(100vh - 52px)' }}>
+      <div className="flex-1 p-3 grid lg:grid-cols-2 gap-3 lg:h-[calc(100dvh-52px)]">
         {/* Panorama Viewer */}
-        <div className="bg-gray-900 rounded-lg overflow-hidden">
+        <div className="bg-neutral-900 rounded-lg overflow-hidden min-h-[45dvh] lg:min-h-0">
           {imageData ? (
             <PanoramaViewer
               key={imageData.id}
@@ -398,15 +412,15 @@ export default function GameClient() {
               onError={handlePanoramaError}
             />
           ) : (
-            <div className="w-full h-full min-h-[400px] flex items-center justify-center">
-              <p className="text-gray-400">Loading panorama...</p>
+            <div className="w-full h-full min-h-[400px] flex items-center justify-center" role="status" aria-live="polite">
+              <p className="text-neutral-300">Loading panorama...</p>
             </div>
           )}
         </div>
 
         {/* Map and Controls */}
         <div className="flex flex-col gap-3">
-          <div className="bg-white rounded-lg overflow-hidden flex-1 shadow-sm border border-gray-200">
+          <div className="bg-card rounded-lg overflow-hidden flex-1 shadow-sm border border-border">
             <LeafletMap
               center={mapCenter}
               bbox={CITIES[location]?.bbox}
@@ -419,7 +433,7 @@ export default function GameClient() {
             <Button
               onClick={handleSubmitGuess}
               disabled={!guessCoordinates || loading}
-              className="flex-1 py-4 text-base font-bold bg-red-600 hover:bg-red-700 text-white"
+              className="flex-1 min-h-12 py-4 text-base font-bold bg-brand text-brand-foreground hover:bg-brand-hover"
               size="lg"
             >
               {loading ? 'Processing...' : guessCoordinates ? 'Submit Guess' : 'Click the map first'}
@@ -428,7 +442,7 @@ export default function GameClient() {
               onClick={handleSkipGuess}
               disabled={loading}
               variant="outline"
-              className="py-4 px-5 text-base font-medium"
+              className="min-h-12 py-4 px-5 text-base font-medium"
               size="lg"
             >
               Skip
@@ -444,35 +458,40 @@ export default function GameClient() {
             <DialogTitle className="text-center text-2xl font-bold">Round Result</DialogTitle>
           </DialogHeader>
 
-          <div className="text-center space-y-4 animate-fade-in-up">
+          <div className="text-center space-y-4 animate-fade-in-up" role="status" aria-live="polite">
             {/* Score circle */}
-            <div className={`inline-flex items-center justify-center w-20 h-20 rounded-full text-white text-3xl font-extrabold ${getScoreBg(score)}`}>
-              {score}
+            <div className="flex flex-col items-center gap-2">
+              <div className={`inline-flex items-center justify-center w-20 h-20 rounded-full text-white text-3xl font-extrabold ${getScoreBg(score)}`}>
+                {score}
+              </div>
+              <span className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+                {getScoreLabel(score)}
+              </span>
             </div>
 
             <div>
-              <Badge variant="outline" className="text-lg font-semibold text-blue-600 px-3 py-1">
+              <Badge variant="outline" className="text-lg font-semibold px-3 py-1 tabular-nums">
                 {formatDistance(distance)} away
               </Badge>
             </div>
 
-            <p className="text-gray-600 text-sm">{getResultMessage(score, distance)}</p>
+            <p className="text-muted-foreground text-sm">{getResultMessage(score, distance)}</p>
 
             {/* Leaderboard ranks */}
             {(globalScore !== null || cityScore !== null) && (
               <div className="grid grid-cols-2 gap-2 text-sm">
                 {cityScore !== null && (
-                  <div className="bg-blue-50 rounded-lg p-2">
-                    <p className="font-semibold text-blue-700">{cityNames[location]}</p>
-                    <p className="text-blue-600">Total: {cityScore}</p>
-                    {cityRank && <p className="text-blue-400 text-xs">Rank #{cityRank}</p>}
+                  <div className="bg-brand-subtle text-brand-subtle-foreground rounded-lg p-2">
+                    <p className="font-semibold">{cityNames[location]}</p>
+                    <p className="tabular-nums">Total: {cityScore}</p>
+                    {cityRank && <p className="text-xs opacity-80 tabular-nums">Rank #{cityRank}</p>}
                   </div>
                 )}
                 {globalScore !== null && (
-                  <div className="bg-purple-50 rounded-lg p-2">
-                    <p className="font-semibold text-purple-700">Global</p>
-                    <p className="text-purple-600">Total: {globalScore}</p>
-                    {globalRank && <p className="text-purple-400 text-xs">Rank #{globalRank}</p>}
+                  <div className="bg-muted text-foreground rounded-lg p-2">
+                    <p className="font-semibold">Global</p>
+                    <p className="tabular-nums">Total: {globalScore}</p>
+                    {globalRank && <p className="text-xs text-muted-foreground tabular-nums">Rank #{globalRank}</p>}
                   </div>
                 )}
               </div>
@@ -481,38 +500,38 @@ export default function GameClient() {
             {(globalDistanceRank !== null || cityDistanceRank !== null) && (
               <div className="grid grid-cols-2 gap-2 text-xs">
                 {cityDistanceRank !== null && (
-                  <div className="bg-gray-50 rounded-lg p-2">
-                    <p className="font-medium text-gray-700">{cityNames[location]} Distance</p>
-                    <p className="text-gray-500">Rank #{cityDistanceRank}</p>
+                  <div className="bg-muted rounded-lg p-2">
+                    <p className="font-medium text-foreground">{cityNames[location]} Distance</p>
+                    <p className="text-muted-foreground tabular-nums">Rank #{cityDistanceRank}</p>
                   </div>
                 )}
                 {globalDistanceRank !== null && (
-                  <div className="bg-gray-50 rounded-lg p-2">
-                    <p className="font-medium text-gray-700">Global Distance</p>
-                    <p className="text-gray-500">Rank #{globalDistanceRank}</p>
+                  <div className="bg-muted rounded-lg p-2">
+                    <p className="font-medium text-foreground">Global Distance</p>
+                    <p className="text-muted-foreground tabular-nums">Rank #{globalDistanceRank}</p>
                   </div>
                 )}
               </div>
             )}
 
             {leaderboardMessage && (
-              <p className="text-sm text-green-600 font-medium">{leaderboardMessage}</p>
+              <p className="text-sm text-green-700 dark:text-green-400 font-medium">{leaderboardMessage}</p>
             )}
 
-            <p className="text-xs text-gray-400">
+            <p className="text-xs text-muted-foreground">
               {username || 'Anonymous'} • {cityNames[location] || location}
             </p>
           </div>
 
           {/* Result Map */}
-          <div className="rounded-lg overflow-hidden border border-gray-200">
+          <div className="rounded-lg overflow-hidden border border-border">
             <div
               ref={resultMapRef}
               key={`map-${sessionId}`}
-              className="h-52 w-full bg-gray-100"
+              className="h-52 w-full bg-muted"
               style={{ minHeight: '208px' }}
             />
-            <div className="flex justify-between text-xs text-gray-400 px-3 py-1.5 bg-gray-50">
+            <div className="flex justify-between text-xs text-muted-foreground px-3 py-1.5 bg-muted/50 tabular-nums">
               {exactLocation && (
                 <span>Actual: {exactLocation.lat.toFixed(4)}, {exactLocation.lng.toFixed(4)}</span>
               )}
@@ -527,7 +546,7 @@ export default function GameClient() {
             <Button
               onClick={handleNextRound}
               size="lg"
-              className="flex-1 bg-red-600 hover:bg-red-700 text-white font-bold"
+              className="flex-1 min-h-12 bg-brand text-brand-foreground hover:bg-brand-hover font-bold"
             >
               Next Round
             </Button>
@@ -535,7 +554,7 @@ export default function GameClient() {
               onClick={handleGoBack}
               variant="outline"
               size="lg"
-              className="flex-1"
+              className="flex-1 min-h-12"
             >
               Menu
             </Button>
diff --git a/src/app/components/LeaderboardList.js b/src/app/components/LeaderboardList.js
index f5aad3f..d5c1964 100644
--- a/src/app/components/LeaderboardList.js
+++ b/src/app/components/LeaderboardList.js
@@ -1,24 +1,27 @@
 "use client";
 
+import { Medal } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Skeleton } from '@/components/ui/skeleton';
 import { formatDistance, getDistanceColor } from '../../lib/game';
 
 function getScoreColor(score) {
-  if (score >= 50) return 'text-purple-600';
-  if (score >= 25) return 'text-green-600';
-  if (score >= 15) return 'text-blue-600';
-  if (score >= 10) return 'text-yellow-600';
-  if (score >= 5) return 'text-orange-600';
-  return 'text-red-600';
+  if (score >= 50) return 'text-purple-700 dark:text-purple-300';
+  if (score >= 25) return 'text-green-700 dark:text-green-300';
+  if (score >= 15) return 'text-blue-700 dark:text-blue-300';
+  if (score >= 10) return 'text-yellow-700 dark:text-yellow-300';
+  if (score >= 5) return 'text-orange-700 dark:text-orange-300';
+  return 'text-red-700 dark:text-red-300';
 }
 
-function getRankIcon(rank) {
+// Medal tint for the podium. The rank number stays visible alongside it, so the
+// placing never depends on reading the colour or an emoji glyph.
+function getMedalClass(rank) {
   switch (rank) {
-    case 1: return '🥇';
-    case 2: return '🥈';
-    case 3: return '🥉';
-    default: return `#${rank}`;
+    case 1: return 'text-amber-500';
+    case 2: return 'text-slate-400';
+    case 3: return 'text-orange-700 dark:text-orange-400';
+    default: return '';
   }
 }
 
@@ -29,7 +32,7 @@ export default function LeaderboardList({ data, loading, currentUsername, type }
     return (
       <div className="space-y-2">
         {[...Array(8)].map((_, i) => (
-          <div key={i} className="flex items-center justify-between p-3 rounded-lg bg-gray-100">
+          <div key={i} className="flex items-center justify-between p-3 rounded-lg bg-muted">
             <div className="flex items-center gap-3">
               <Skeleton className="h-7 w-10" />
               <Skeleton className="h-4 w-20" />
@@ -44,8 +47,8 @@ export default function LeaderboardList({ data, loading, currentUsername, type }
   if (data.length === 0) {
     return (
       <div className="text-center py-10">
-        <p className="text-gray-500 text-base">No {isDistance ? 'records' : 'scores'} yet!</p>
-        <p className="text-gray-400 text-sm mt-1">Be the first to play!</p>
+        <p className="text-foreground text-base">No {isDistance ? 'records' : 'scores'} yet!</p>
+        <p className="text-muted-foreground text-sm mt-1">Be the first to play!</p>
       </div>
     );
   }
@@ -61,31 +64,34 @@ export default function LeaderboardList({ data, loading, currentUsername, type }
             key={key}
             className={`flex items-center justify-between p-3 rounded-lg transition-all ${
               isUser
-                ? 'bg-amber-50 border-2 border-amber-400 shadow-md'
+                ? 'bg-amber-100/70 dark:bg-amber-950/40 border-2 border-amber-500 shadow-md'
                 : entry.rank <= 3
-                  ? 'bg-red-50/50 border border-red-100'
-                  : 'bg-gray-50 hover:bg-gray-100'
+                  ? 'bg-brand-subtle/40 border border-brand/20'
+                  : 'bg-muted/50 hover:bg-muted'
             }`}
           >
             <div className="flex items-center gap-3">
-              <div className="text-lg font-bold w-10 text-center">
-                {getRankIcon(entry.rank)}
+              <div className="flex items-center gap-1 w-14 shrink-0">
+                {entry.rank <= 3 && (
+                  <Medal className={`size-4 shrink-0 ${getMedalClass(entry.rank)}`} aria-hidden="true" />
+                )}
+                <span className="text-base font-bold tabular-nums">#{entry.rank}</span>
               </div>
               <div>
-                <div className={`font-semibold ${isUser ? 'text-amber-800' : 'text-gray-800'}`}>
+                <div className={`font-semibold ${isUser ? 'text-amber-900 dark:text-amber-200' : 'text-foreground'}`}>
                   {entry.username}
                   {isUser && (
-                    <Badge className="ml-2 bg-amber-500 text-white text-xs">YOU</Badge>
+                    <Badge className="ml-2 bg-amber-700 text-white text-xs">YOU</Badge>
                   )}
                 </div>
                 {isDistance && entry.timestamp && (
-                  <div className="text-xs text-gray-400">
+                  <div className="text-xs text-muted-foreground">
                     {new Date(entry.timestamp).toLocaleDateString()}
                   </div>
                 )}
               </div>
             </div>
-            <Badge variant="secondary" className={`text-lg font-bold ${
+            <Badge variant="secondary" className={`text-lg font-bold tabular-nums ${
               isDistance ? getDistanceColor(entry.distance) : getScoreColor(entry.score)
             }`}>
               {isDistance ? formatDistance(entry.distance) : entry.score}
diff --git a/src/app/components/LeafletMap.js b/src/app/components/LeafletMap.js
index ac13b3f..31cdec3 100644
--- a/src/app/components/LeafletMap.js
+++ b/src/app/components/LeafletMap.js
@@ -124,7 +124,7 @@ export default function LeafletMap({
   return (
     <div 
       ref={mapRef} 
-      className={`bg-gray-200 rounded-lg overflow-hidden ${className}`}
+      className={`bg-muted rounded-lg overflow-hidden ${className}`}
     />
   );
 }
\ No newline at end of file
diff --git a/src/app/components/PanoramaViewer.js b/src/app/components/PanoramaViewer.js
index 185ca26..cdcd401 100644
--- a/src/app/components/PanoramaViewer.js
+++ b/src/app/components/PanoramaViewer.js
@@ -32,7 +32,7 @@ function PanoramaViewer({ imageUrl, onReady, onError }) {
       if (!imageUrl) {
         // Show loading or error state
         containerRef.current.innerHTML = `
-          <div style="width:100%; height:100%; display:flex; justify-content:center; align-items:center; color: white; text-align: center;">
+          <div role="status" aria-live="polite" style="width:100%; height:100%; display:flex; justify-content:center; align-items:center; color: white; text-align: center;">
             <div>Loading panoramic image...</div>
           </div>
         `;
@@ -140,7 +140,7 @@ function PanoramaViewer({ imageUrl, onReady, onError }) {
   return (
     <div 
       ref={containerRef} 
-      className="w-full h-full min-h-[400px] bg-gray-900 rounded-lg overflow-hidden"
+      className="w-full h-full min-h-[400px] bg-neutral-900 rounded-lg overflow-hidden"
     />
   );
 }
diff --git a/src/app/components/UsernameModal.js b/src/app/components/UsernameModal.js
index d4d565f..b1cd485 100644
--- a/src/app/components/UsernameModal.js
+++ b/src/app/components/UsernameModal.js
@@ -60,7 +60,9 @@ export default function UsernameModal({ isOpen, onSubmit, onClose }) {
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="username" className="text-sm font-medium">Username</Label>
+            <Label htmlFor="username" className="text-sm font-medium">
+              Username <span className="text-destructive" aria-hidden="true">*</span>
+            </Label>
             <Input
               id="username"
               value={username}
@@ -68,10 +70,17 @@ export default function UsernameModal({ isOpen, onSubmit, onClose }) {
               placeholder="Your username"
               maxLength={20}
               autoFocus
-              className="h-10"
+              required
+              autoComplete="username"
+              aria-describedby="username-help"
+              aria-invalid={error ? true : undefined}
+              className="h-11"
             />
+            <p id="username-help" className="text-xs text-muted-foreground">
+              2-20 characters. Letters, numbers, hyphens and underscores.
+            </p>
             {error && (
-              <Alert variant="destructive" className="py-2">
+              <Alert variant="destructive" className="py-2" role="alert" aria-live="assertive">
                 <AlertDescription className="text-xs">{error}</AlertDescription>
               </Alert>
             )}
@@ -82,20 +91,20 @@ export default function UsernameModal({ isOpen, onSubmit, onClose }) {
               type="button"
               variant="ghost"
               onClick={onClose}
-              className="flex-1"
+              className="flex-1 min-h-11"
             >
               Skip
             </Button>
             <Button
               type="submit"
-              className="flex-1 bg-red-600 hover:bg-red-700 text-white"
+              className="flex-1 min-h-11 bg-brand text-brand-foreground hover:bg-brand-hover"
             >
               Start Playing
             </Button>
           </div>
         </form>
 
-        <p className="text-xs text-gray-400 text-center">
+        <p className="text-xs text-muted-foreground text-center">
           Displayed on the leaderboard
         </p>
       </DialogContent>
diff --git a/src/app/game/page.js b/src/app/game/page.js
index 2344f75..44d1527 100644
--- a/src/app/game/page.js
+++ b/src/app/game/page.js
@@ -5,10 +5,10 @@ import GameClient from '../components/GameClient';
 
 function GameLoadingFallback() {
   return (
-    <div className="min-h-screen flex items-center justify-center vn-gradient-bg">
-      <div className="text-center space-y-4 animate-fade-in-up">
-        <div className="w-12 h-12 border-4 border-gray-200 border-t-red-600 rounded-full animate-spin mx-auto" />
-        <p className="text-gray-700 text-lg font-medium">Loading game...</p>
+    <div className="min-h-dvh flex items-center justify-center vn-gradient-bg">
+      <div role="status" aria-live="polite" className="text-center space-y-4 animate-fade-in-up">
+        <div className="w-12 h-12 border-4 border-border border-t-brand rounded-full animate-spin mx-auto" aria-hidden="true" />
+        <p className="text-foreground text-lg font-medium">Loading game...</p>
       </div>
     </div>
   );
diff --git a/src/app/globals.css b/src/app/globals.css
index dbc66a4..73e5d42 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -43,6 +43,12 @@
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  --color-brand: var(--brand);
+  --color-brand-hover: var(--brand-hover);
+  --color-brand-foreground: var(--brand-foreground);
+  --color-brand-subtle: var(--brand-subtle);
+  --color-brand-subtle-foreground: var(--brand-subtle-foreground);
+  --color-surface: var(--surface);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -62,7 +68,7 @@
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(0.54 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
@@ -137,16 +143,56 @@
   z-index: 9999 !important;
 }
 
-/* Vietnamese brand colors */
+/* Vietnamese flag palette. Kept as the brand identity; --brand is the token
+   every component should reference rather than a raw red utility class. */
 :root {
   --vn-red: #da251d;
   --vn-red-dark: #c41e3a;
   --vn-gold: #ffd700;
+
+  --brand: var(--vn-red);
+  --brand-hover: var(--vn-red-dark);
+  --brand-foreground: #ffffff;
+  --brand-subtle: oklch(0.962 0.028 22);
+  --brand-subtle-foreground: oklch(0.45 0.19 27);
+  /* Page background, one step off --background so cards read as raised. */
+  --surface: oklch(0.977 0.002 250);
+}
+
+/* Dark palette. Red is lightened and desaturated rather than inverted, so it
+   stays legible on dark surfaces instead of vibrating against them. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.75 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 12%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+
+    --brand: oklch(0.68 0.18 27);
+    --brand-hover: oklch(0.74 0.17 27);
+    --brand-foreground: oklch(0.145 0 0);
+    --brand-subtle: oklch(0.28 0.06 27);
+    --brand-subtle-foreground: oklch(0.86 0.11 27);
+    --surface: oklch(0.115 0 0);
+  }
 }
 
-/* Soft clean background */
 .vn-gradient-bg {
-  background: #f8f9fb;
+  background: var(--surface);
 }
 
 /* Spinner animation for loading */
@@ -184,7 +230,7 @@
   top: 0;
   bottom: 0;
   width: 3px;
-  background: var(--vn-red);
+  background: var(--brand);
   border-radius: 3px 0 0 3px;
   opacity: 0;
   transition: opacity 0.2s ease;
diff --git a/src/app/layout.js b/src/app/layout.js
index 92ec641..e82c68d 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -18,6 +18,16 @@ export const metadata = {
   description: "GeoGuessr for VietNam",
 };
 
+// light dark lets the OS preference drive native controls, scrollbars and form
+// widgets, matching the token palette in globals.css.
+export const viewport = {
+  colorScheme: "light dark",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#f8f9fb" },
+    { media: "(prefers-color-scheme: dark)", color: "#0d0d0d" },
+  ],
+};
+
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
diff --git a/src/app/page.js b/src/app/page.js
index b2ecf16..7ad20f0 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { ArrowRight, Trophy, Coffee, Wrench } from "lucide-react";
 import React, { useState, useEffect, useRef } from "react";
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -97,19 +98,19 @@ export default function Home() {
   const renderTabContent = (locationKey) => (
     <div className="flex gap-3">
       <div className="flex flex-col space-y-2 min-w-[100px]">
-        <div className="text-[10px] font-medium text-gray-400 uppercase tracking-wider px-2">Type</div>
+        <div className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider px-2">Type</div>
         {['score', 'distance'].map(type => (
-          <button
+          <Button
             key={type}
             onClick={() => setActiveTypeTab(type)}
-            className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors capitalize ${
-              activeTypeTab === type
-                ? 'bg-red-600 text-white shadow-md'
-                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+            variant={activeTypeTab === type ? 'default' : 'secondary'}
+            aria-pressed={activeTypeTab === type}
+            className={`min-h-11 justify-start capitalize ${
+              activeTypeTab === type ? 'bg-brand text-brand-foreground hover:bg-brand-hover' : ''
             }`}
           >
             {type}
-          </button>
+          </Button>
         ))}
       </div>
       <div className="flex-1">
@@ -124,31 +125,33 @@ export default function Home() {
   );
 
   return (
-    <div className="min-h-screen vn-gradient-bg">
-      <div className="min-h-screen">
+    <div className="min-h-dvh vn-gradient-bg">
+      <div className="min-h-dvh">
         <div className="container mx-auto px-4 py-6 max-w-5xl">
           {/* Header */}
           <header className="flex justify-between items-center mb-10">
-            <Link href="/" className="text-2xl font-bold text-gray-900 tracking-wider">
+            <Link href="/" className="text-2xl font-bold text-foreground tracking-wider">
               VNGeoGuessr
             </Link>
             <div className="flex items-center gap-3">
               {username && (
-                <span className="text-gray-500 text-sm hidden sm:inline">
-                  Playing as <span className="font-semibold text-red-600">{username}</span>
+                <span className="text-muted-foreground text-sm hidden sm:inline">
+                  Playing as <span className="font-semibold text-brand">{username}</span>
                 </span>
               )}
               <Button
                 onClick={handleLeaderboardClick}
                 variant="outline"
-                className="transition-all"
+                className="min-h-11 transition-all"
               >
+                <Trophy className="size-4" aria-hidden="true" />
                 Leaderboard
               </Button>
               <Button
                 onClick={() => setShowDonateModal(true)}
-                className="bg-red-600 hover:bg-red-700 text-white transition-all"
+                className="min-h-11 bg-brand text-brand-foreground hover:bg-brand-hover transition-all"
               >
+                <Coffee className="size-4" aria-hidden="true" />
                 Buy me a coffee
               </Button>
             </div>
@@ -156,34 +159,34 @@ export default function Home() {
 
           {/* Hero */}
           <div className="text-center mb-12 animate-fade-in-up">
-            <h1 className="text-5xl sm:text-6xl font-extrabold text-gray-900 mb-3 tracking-tight">
+            <h1 className="text-5xl sm:text-6xl font-extrabold text-foreground mb-3 tracking-tight">
               Guess the Location
             </h1>
-            <p className="text-lg text-gray-500 max-w-lg mx-auto">
+            <p className="text-lg text-muted-foreground max-w-lg mx-auto">
               Explore Vietnamese streets and test your geography skills across iconic cities.
             </p>
           </div>
 
           <div className="grid lg:grid-cols-5 gap-6 max-w-5xl mx-auto">
             {/* How to Play */}
-            <Card className="lg:col-span-2 bg-white border border-gray-200 shadow-sm">
+            <Card className="lg:col-span-2 bg-card border-border shadow-sm">
               <CardHeader className="pb-3">
-                <CardTitle className="text-xl font-bold text-gray-900">How to Play</CardTitle>
+                <CardTitle className="text-xl font-bold text-card-foreground">How to Play</CardTitle>
               </CardHeader>
               <CardContent>
                 <div className="space-y-4">
                   {STEP_LABELS.map((label, i) => (
                     <div key={i} className="flex items-start gap-3">
-                      <div className="w-8 h-8 rounded-full bg-red-50 text-red-600 flex items-center justify-center text-sm font-bold shrink-0">
+                      <div className="w-8 h-8 rounded-full bg-brand-subtle text-brand-subtle-foreground flex items-center justify-center text-sm font-bold shrink-0">
                         {i + 1}
                       </div>
-                      <p className="text-gray-600 text-sm leading-relaxed pt-1">{label}</p>
+                      <p className="text-muted-foreground text-sm leading-relaxed pt-1">{label}</p>
                     </div>
                   ))}
                 </div>
-                <div className="mt-6 pt-4 border-t border-gray-100">
-                  <p className="text-gray-400 text-xs mb-2 uppercase tracking-wider font-medium">Scoring</p>
-                  <div className="grid grid-cols-2 gap-1 text-xs text-gray-500">
+                <div className="mt-6 pt-4 border-t border-border">
+                  <p className="text-muted-foreground text-xs mb-2 uppercase tracking-wider font-medium">Scoring</p>
+                  <div className="grid grid-cols-2 gap-1 text-xs text-muted-foreground">
                     <span>0-50m = 5 pts</span>
                     <span>50-100m = 4 pts</span>
                     <span>100-200m = 3 pts</span>
@@ -196,9 +199,9 @@ export default function Home() {
             </Card>
 
             {/* City Selection */}
-            <Card className="lg:col-span-3 bg-white border border-gray-200 shadow-sm">
+            <Card className="lg:col-span-3 bg-card border-border shadow-sm">
               <CardHeader className="pb-3">
-                <CardTitle className="text-xl font-bold text-gray-900 text-center">Select a City</CardTitle>
+                <CardTitle className="text-xl font-bold text-card-foreground text-center">Select a City</CardTitle>
               </CardHeader>
               <CardContent>
                 <div className="grid gap-3">
@@ -206,16 +209,15 @@ export default function Home() {
                     <Link
                       key={city.code}
                       href={`/game?location=${city.code}`}
-                      className="city-card-accent block p-4 rounded-lg bg-gray-50 hover:bg-gray-100 border border-gray-200 hover:border-gray-300 transition-all duration-200 group"
+                      className="city-card-accent flex min-h-14 items-center justify-between p-4 rounded-lg bg-muted/40 hover:bg-muted border border-border hover:border-brand/40 transition-colors duration-200 group focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
                     >
-                      <div className="flex items-center justify-between">
-                        <span className="text-gray-800 font-semibold text-lg group-hover:text-red-600 transition-colors">
-                          {city.name}
-                        </span>
-                        <span className="text-gray-300 group-hover:text-gray-500 transition-colors text-xl">
-                          →
-                        </span>
-                      </div>
+                      <span className="text-foreground font-semibold text-lg group-hover:text-brand transition-colors">
+                        {city.name}
+                      </span>
+                      <ArrowRight
+                        className="size-5 text-muted-foreground group-hover:text-brand transition-colors"
+                        aria-hidden="true"
+                      />
                     </Link>
                   ))}
                 </div>
@@ -234,7 +236,7 @@ export default function Home() {
               <DialogTitle className="text-2xl text-center font-bold">Leaderboards</DialogTitle>
             </DialogHeader>
             <Tabs value={activeLocationTab} onValueChange={setActiveLocationTab} className="w-full">
-              <TabsList className="grid w-full grid-cols-5">
+              <TabsList className="grid w-full" style={{ gridTemplateColumns: `repeat(${cities.length + 1}, minmax(0, 1fr))` }}>
                 <TabsTrigger value="global">Global</TabsTrigger>
                 {cities.map(city => (
                   <TabsTrigger key={city.code} value={city.code}>{city.code}</TabsTrigger>
@@ -255,10 +257,11 @@ export default function Home() {
         {/* Debug Button */}
         <Button
           asChild
-          className="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-white hover:bg-gray-100 text-gray-500 border border-gray-200 shadow-sm transition-all duration-200 z-50"
+          variant="outline"
+          className="fixed bottom-6 right-6 size-12 rounded-full bg-card text-muted-foreground shadow-sm transition-colors duration-200 z-50"
         >
-          <Link href="/debug" className="flex items-center justify-center">
-            <span className="text-lg">🔧</span>
+          <Link href="/debug" aria-label="Open debug tools" className="flex items-center justify-center">
+            <Wrench className="size-5" aria-hidden="true" />
           </Link>
         </Button>
       </div>
diff --git a/src/lib/game.js b/src/lib/game.js
index 5b92dea..14427b2 100644
--- a/src/lib/game.js
+++ b/src/lib/game.js
@@ -135,11 +135,11 @@ export function getAccumulatedScoreMessage(newScore, totalScore) {
 
 // Get distance color for leaderboard display
 export function getDistanceColor(distance) {
-  if (distance <= 50) return 'text-green-600';
-  if (distance <= 100) return 'text-blue-600';
-  if (distance <= 200) return 'text-yellow-600';
-  if (distance <= 500) return 'text-orange-600';
-  return 'text-red-600';
+  if (distance <= 50) return 'text-green-700 dark:text-green-300';
+  if (distance <= 100) return 'text-blue-700 dark:text-blue-300';
+  if (distance <= 200) return 'text-yellow-700 dark:text-yellow-300';
+  if (distance <= 500) return 'text-orange-700 dark:text-orange-300';
+  return 'text-red-700 dark:text-red-300';
 }
 
 // Get random location within city bbox