diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b2c458..80ba619 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,34 @@
 # Changelog – helldivers-trainer
 
+## [2.0.0] – 2026-03-30
+
+### Added
+- **4 Practice modes**: Timed (configurable 15/30/45s, SVG ring timer), Endless (3 lives), Category Drill (progress bar), Speed Run (all stratagems, total time)
+- **Settings modal**: timer duration and difficulty (Easy/Normal/Hard) persisted in localStorage
+- **History view**: paginated session table with mode/category filters, SVG polyline score chart, best-time-per-stratagem table
+- **ELO rating system**: server-side ELO (K=32) calculated after every match; rank tiers PRIVATE → GENERAL
+- **Post-match result modal**: ELO delta display (`before → after +N`), round-by-round history
+- **Challenge modal**: incoming challenge shows challenger name and ELO; replaces toast notification
+- **Dashboard hero card**: ELO rank badge, rank icon, daily sequence preview arrows, mode column in recent sessions
+- **Leaderboard tabs**: Practice Score / ELO Rating / Speed Run with correct column headers per tab
+- **Mobile hamburger nav**: slide-in drawer with overlay backdrop, Esc key closes modals
+- **DB migration**: `elo` column on users, `mode` column on practice_sessions, `stratagem_stats` table
+- **Lobby redesign**: ELO + rank shown per player, 2-column layout (Online + Incoming Challenges)
+- View fade transitions on every view switch
+- Danger vignette flash at ≤5s timer remaining
+- Streak fire glow effect (streak ≥ 5), combo multiplier badge (×N, streak ≥ 2)
+- Keyboard shortcuts: `Esc` stops practice / closes modals, `Enter` starts practice
+- `aria-label` on all D-pad buttons, modals with `role="dialog"` and `aria-modal="true"`
+
+### Changed
+- Full CSS redesign (~700 → ~1200 lines): glassmorphism cards, new design tokens, SVG timer ring, skeleton shimmer, animated modals
+- Dashboard online list now shows ELO; lobby shows ELO + rank per player
+- WS `lobby-update` now sends `[{name, elo, rank}]` objects instead of plain usernames
+- WS `challenge-received` now includes challenger ELO
+- Practice leaderboard query joined with `users.elo` for rank badge display
+
+---
+
 ## [1.0.0] – 2026-03-30
 
 ### Added
diff --git a/public/app.js b/public/app.js
index 5e6ec3b..6fb7c28 100644
--- a/public/app.js
+++ b/public/app.js
@@ -795,5 +795,24 @@ function showToast(msg) {
   }, 3200);
 }
 
+// ── Static button bindings (replaces inline onclick – blocked by CSP script-src-attr) ──
+document.getElementById('btn-logout')          ?.addEventListener('click', logout);
+document.getElementById('btn-daily-challenge') ?.addEventListener('click', startDailyChallenge);
+document.getElementById('btn-start-practice')  ?.addEventListener('click', startPractice);
+document.getElementById('btn-stop-practice')   ?.addEventListener('click', stopPracticeUI);
+document.getElementById('match-ready-btn')     ?.addEventListener('click', setReady);
+document.getElementById('btn-leave-match')     ?.addEventListener('click', leaveMatch);
+document.getElementById('btn-create-user')     ?.addEventListener('click', createUser);
+
+// D-pad: practice and match both use data-dir buttons
+document.getElementById('practice-dpad')?.addEventListener('click', (e) => {
+  const dir = e.target.closest('[data-dir]')?.dataset.dir;
+  if (dir) dpadInput(dir);
+});
+document.getElementById('match-dpad')?.addEventListener('click', (e) => {
+  const dir = e.target.closest('[data-dir]')?.dataset.dir;
+  if (dir) dpadInput(dir);
+});
+
 // ── Init ──────────────────────────────────────────────────────────────────────
 document.addEventListener('DOMContentLoaded', checkAuth);
diff --git a/public/index.html b/public/index.html
index db7184c..4f97876 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,7 @@
     </div>
     <div class="nav-user">
       <span class="nav-username" id="nav-username"></span>
-      <button class="btn btn-muted btn-sm" onclick="logout()">Logout</button>
+      <button class="btn btn-muted btn-sm" id="btn-logout">Logout</button>
     </div>
   </nav>
 
@@ -122,7 +122,7 @@
           <div class="daily-best">
             Best time: <span id="dash-daily-best">—</span>
           </div>
-          <button class="btn btn-accent" onclick="startDailyChallenge()">Practice this stratagem</button>
+          <button class="btn btn-accent" id="btn-daily-challenge">Practice this stratagem</button>
         </div>
       </div>
 
@@ -161,7 +161,7 @@
     <!-- Idle (start screen) -->
     <div id="practice-idle" class="practice-idle">
       <div class="idle-hint">Select categories above, then start training</div>
-      <button class="btn btn-accent btn-lg" onclick="startPractice()">⚡ START TRAINING</button>
+      <button class="btn btn-accent btn-lg" id="btn-start-practice">⚡ START TRAINING</button>
     </div>
 
     <!-- Active training -->
@@ -189,21 +189,21 @@
       </div>
 
       <!-- D-Pad (mobile) -->
-      <div class="dpad">
+      <div class="dpad" id="practice-dpad">
         <div class="dpad-row">
-          <button class="dpad-btn dpad-up"    onclick="dpadInput('up')">↑</button>
+          <button class="dpad-btn dpad-up"    data-dir="up">↑</button>
         </div>
         <div class="dpad-row">
-          <button class="dpad-btn dpad-left"  onclick="dpadInput('left')">←</button>
+          <button class="dpad-btn dpad-left"  data-dir="left">←</button>
           <div class="dpad-center"></div>
-          <button class="dpad-btn dpad-right" onclick="dpadInput('right')">→</button>
+          <button class="dpad-btn dpad-right" data-dir="right">→</button>
         </div>
         <div class="dpad-row">
-          <button class="dpad-btn dpad-down"  onclick="dpadInput('down')">↓</button>
+          <button class="dpad-btn dpad-down"  data-dir="down">↓</button>
         </div>
       </div>
 
-      <button class="btn btn-muted" onclick="stopPracticeUI()">Stop Training</button>
+      <button class="btn btn-muted" id="btn-stop-practice">Stop Training</button>
     </div>
   </div>
 
@@ -257,24 +257,24 @@
         </div>
       </div>
       <!-- D-Pad (mobile) -->
-      <div class="dpad">
+      <div class="dpad" id="match-dpad">
         <div class="dpad-row">
-          <button class="dpad-btn dpad-up"    onclick="dpadInput('up')">↑</button>
+          <button class="dpad-btn dpad-up"    data-dir="up">↑</button>
         </div>
         <div class="dpad-row">
-          <button class="dpad-btn dpad-left"  onclick="dpadInput('left')">←</button>
+          <button class="dpad-btn dpad-left"  data-dir="left">←</button>
           <div class="dpad-center"></div>
-          <button class="dpad-btn dpad-right" onclick="dpadInput('right')">→</button>
+          <button class="dpad-btn dpad-right" data-dir="right">→</button>
         </div>
         <div class="dpad-row">
-          <button class="dpad-btn dpad-down"  onclick="dpadInput('down')">↓</button>
+          <button class="dpad-btn dpad-down"  data-dir="down">↓</button>
         </div>
       </div>
     </div>
 
     <div class="match-actions">
-      <button class="btn btn-accent hidden" id="match-ready-btn" onclick="setReady()">READY</button>
-      <button class="btn btn-muted btn-sm" onclick="leaveMatch()">Leave Match</button>
+      <button class="btn btn-accent hidden" id="match-ready-btn">READY</button>
+      <button class="btn btn-muted btn-sm" id="btn-leave-match">Leave Match</button>
     </div>
   </div>
 
@@ -325,7 +325,7 @@
           </select>
         </div>
         <p id="admin-error" class="error hidden"></p>
-        <button class="btn btn-accent" onclick="createUser()">Create User</button>
+        <button class="btn btn-accent" id="btn-create-user">Create User</button>
         <div id="new-pw-display" class="pw-display hidden"></div>
       </div>
 
diff --git a/public/styles.css b/public/styles.css
index a9b4d52..0734003 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,26 +1,39 @@
 /* ── Custom properties ─────────────────────────────────────────────────────── */
 :root {
-  --bg:          #0d0d14;
-  --bg-surface:  #131325;
-  --bg-surface2: #1a1a2e;
+  --bg:          #0a0a10;
+  --bg-surface:  #0f0f1e;
+  --bg-surface2: #141428;
+  --bg-glass:    rgba(15, 15, 30, 0.85);
   --accent:      #ffe710;
-  --accent-dim:  rgba(255, 231, 16, 0.15);
+  --accent-dim:  rgba(255, 231, 16, 0.12);
+  --accent-glow: rgba(255, 231, 16, 0.4);
   --brand:       #41639c;
   --brand-dim:   rgba(65, 99, 156, 0.12);
+  --brand-light: #5a82c0;
   --danger:      #ff525d;
   --danger-dim:  rgba(255, 82, 93, 0.15);
   --success:     #4dff91;
-  --success-dim: rgba(77, 255, 145, 0.15);
-  --text:        #e0e0e0;
-  --text-muted:  #556;
-  --border:      rgba(65, 99, 156, 0.3);
+  --success-dim: rgba(77, 255, 145, 0.12);
+  --text:        #dde0f0;
+  --text-muted:  #4a5070;
+  --text-dim:    #7a86a8;
+  --border:      rgba(65, 99, 156, 0.22);
+  --border-accent: rgba(255, 231, 16, 0.28);
+
+  --gradient-accent: linear-gradient(135deg, #ffe710 0%, #ffb800 100%);
+  --gradient-bg:     linear-gradient(160deg, #0a0a10 0%, #0c0c1c 100%);
+  --shadow-card:     0 4px 28px rgba(0, 0, 0, 0.55);
+  --shadow-accent:   0 0 20px rgba(255, 231, 16, 0.35);
+  --shadow-glow:     0 0 40px rgba(255, 231, 16, 0.15);
 
   --font-heading: 'Rajdhani', 'Exo 2', sans-serif;
   --font-mono:    'Share Tech Mono', 'Courier New', monospace;
   --font-body:    'Exo 2', system-ui, sans-serif;
 
-  --radius: 4px;
+  --radius:     4px;
+  --radius-lg:  8px;
   --transition: 0.15s ease;
+  --trans-med:  0.25s ease;
 }
 
 /* ── Reset & base ──────────────────────────────────────────────────────────── */
@@ -42,9 +55,9 @@ body::before {
   position: fixed;
   inset: 0;
   background-image:
-    linear-gradient(rgba(65, 99, 156, 0.06) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(65, 99, 156, 0.06) 1px, transparent 1px);
-  background-size: 40px 40px;
+    linear-gradient(rgba(65, 99, 156, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(65, 99, 156, 0.05) 1px, transparent 1px);
+  background-size: 48px 48px;
   pointer-events: none;
   z-index: 0;
 }
@@ -58,8 +71,8 @@ body::after {
     0deg,
     transparent,
     transparent 3px,
-    rgba(0, 0, 0, 0.06) 3px,
-    rgba(0, 0, 0, 0.06) 4px
+    rgba(0, 0, 0, 0.05) 3px,
+    rgba(0, 0, 0, 0.05) 4px
   );
   pointer-events: none;
   z-index: 0;
@@ -67,13 +80,15 @@ body::after {
 
 /* ── Layout helpers ────────────────────────────────────────────────────────── */
 .hidden { display: none !important; }
+.muted  { color: var(--text-muted); font-size: 0.85rem; }
+.accent { color: var(--accent); }
 
 .view {
   position: relative;
   z-index: 1;
   min-height: calc(100vh - 56px);
-  padding: 24px 20px 48px;
-  max-width: 1100px;
+  padding: 28px 24px 64px;
+  max-width: 1140px;
   margin: 0 auto;
 }
 
@@ -83,6 +98,18 @@ body::after {
   justify-content: center;
   min-height: 100vh;
   padding: 20px;
+  position: relative;
+  z-index: 1;
+}
+
+/* View fade transition */
+.view-fade-in {
+  animation: viewFadeIn 0.18s ease forwards;
+}
+
+@keyframes viewFadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
 
 /* ── Navigation ────────────────────────────────────────────────────────────── */
@@ -95,9 +122,9 @@ body::after {
   gap: 16px;
   padding: 0 20px;
   height: 56px;
-  background: rgba(13, 13, 20, 0.92);
+  background: rgba(10, 10, 16, 0.94);
   border-bottom: 1px solid var(--border);
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(12px);
 }
 
 .nav-brand {
@@ -105,18 +132,19 @@ body::after {
   align-items: center;
   gap: 8px;
   font-family: var(--font-heading);
-  font-size: 1.1rem;
+  font-size: 1.05rem;
   font-weight: 700;
   color: var(--accent);
-  letter-spacing: 0.05em;
+  letter-spacing: 0.06em;
   white-space: nowrap;
+  text-shadow: 0 0 12px var(--accent-glow);
 }
 
-.nav-logo { font-size: 1.4rem; }
+.nav-logo { font-size: 1.3rem; }
 
 .nav-links {
   display: flex;
-  gap: 4px;
+  gap: 2px;
   flex: 1;
   justify-content: center;
 }
@@ -126,16 +154,17 @@ body::after {
   border: none;
   color: var(--text-muted);
   font-family: var(--font-heading);
-  font-size: 0.9rem;
+  font-size: 0.88rem;
   font-weight: 600;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.06em;
   padding: 6px 14px;
   border-radius: var(--radius);
   cursor: pointer;
   transition: color var(--transition), background var(--transition);
+  white-space: nowrap;
 }
 
-.nav-btn:hover { color: var(--text); background: var(--brand-dim); }
+.nav-btn:hover  { color: var(--text); background: var(--brand-dim); }
 .nav-btn.active { color: var(--accent); background: var(--accent-dim); }
 
 .nav-user {
@@ -148,28 +177,180 @@ body::after {
 
 .nav-username {
   font-family: var(--font-mono);
-  font-size: 0.85rem;
-  color: var(--brand);
+  font-size: 0.8rem;
+  color: var(--brand-light);
+}
+
+/* Hamburger (mobile only) */
+#nav-hamburger {
+  display: none;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 1.2rem;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--transition);
+  line-height: 1;
+}
+
+#nav-hamburger:hover { background: var(--brand-dim); border-color: var(--brand); }
+
+/* Mobile drawer */
+#nav-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 150;
+  backdrop-filter: blur(2px);
+}
+
+#nav-overlay.open { display: block; }
+
+#nav-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 260px;
+  background: var(--bg-surface);
+  border-right: 1px solid var(--border);
+  z-index: 160;
+  transform: translateX(-100%);
+  transition: transform 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0;
+}
+
+#nav-drawer.open { transform: translateX(0); }
+
+.drawer-header {
+  padding: 0 20px 20px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 8px;
+  font-family: var(--font-heading);
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: 0.08em;
+}
+
+.drawer-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-family: var(--font-heading);
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  padding: 13px 20px;
+  text-align: left;
+  cursor: pointer;
+  transition: all var(--transition);
+  width: 100%;
+  border-left: 3px solid transparent;
+}
+
+.drawer-btn:hover  { color: var(--text); background: var(--brand-dim); border-left-color: var(--brand); }
+.drawer-btn.active { color: var(--accent); background: var(--accent-dim); border-left-color: var(--accent); }
+
+.drawer-footer {
+  margin-top: auto;
+  padding: 16px 20px 0;
+  border-top: 1px solid var(--border);
 }
 
 /* ── Cards ─────────────────────────────────────────────────────────────────── */
 .card {
-  background: var(--bg-surface);
+  background: var(--bg-glass);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 20px;
+  border-radius: var(--radius-lg);
+  padding: 22px;
+  box-shadow: var(--shadow-card);
+  backdrop-filter: blur(8px);
+  transition: border-color var(--trans-med), box-shadow var(--trans-med);
 }
 
-.card-accent { border-color: rgba(255, 231, 16, 0.3); }
+.card:hover { border-color: rgba(65, 99, 156, 0.4); }
+
+.card-accent {
+  border-color: var(--border-accent);
+  box-shadow: var(--shadow-card), 0 0 20px rgba(255, 231, 16, 0.06);
+}
+
+.card-hero {
+  background: linear-gradient(135deg, rgba(65, 99, 156, 0.15) 0%, rgba(255, 231, 16, 0.04) 100%);
+  border-color: rgba(65, 99, 156, 0.35);
+  padding: 28px;
+}
 
 .card-title {
   font-family: var(--font-heading);
-  font-size: 0.8rem;
+  font-size: 0.72rem;
   font-weight: 700;
-  letter-spacing: 0.12em;
-  color: var(--brand);
-  margin-bottom: 16px;
+  letter-spacing: 0.14em;
+  color: var(--brand-light);
+  margin-bottom: 18px;
   text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-title::before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 12px;
+  background: var(--brand);
+  border-radius: 2px;
+}
+
+/* ── Badges ────────────────────────────────────────────────────────────────── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: 20px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.badge-admin   { background: var(--accent-dim);    color: var(--accent);   border: 1px solid rgba(255,231,16,0.25); }
+.badge-user    { background: var(--brand-dim);      color: var(--brand-light); border: 1px solid rgba(65,99,156,0.3); }
+.badge-warning { background: var(--danger-dim);     color: var(--danger);   border: 1px solid rgba(255,82,93,0.3); }
+.badge-success { background: var(--success-dim);    color: var(--success);  border: 1px solid rgba(77,255,145,0.25); }
+.badge-rank    { background: rgba(255,231,16,0.08); color: var(--accent);   border: 1px solid rgba(255,231,16,0.2); font-family: var(--font-heading); }
+
+/* ELO rank badges */
+.rank-private    { --rank-color: #7a86a8; }
+.rank-sergeant   { --rank-color: #5a82c0; }
+.rank-lieutenant { --rank-color: #4dff91; }
+.rank-captain    { --rank-color: #ffb800; }
+.rank-general    { --rank-color: #ffe710; }
+
+.rank-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-family: var(--font-heading);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  color: var(--rank-color, var(--text-dim));
+  background: rgba(255,255,255,0.04);
+  border: 1px solid color-mix(in srgb, var(--rank-color, #7a86a8) 30%, transparent);
 }
 
 /* ── Buttons ───────────────────────────────────────────────────────────────── */
@@ -178,7 +359,7 @@ body::after {
   align-items: center;
   justify-content: center;
   gap: 6px;
-  padding: 10px 20px;
+  padding: 10px 22px;
   border: 1px solid transparent;
   border-radius: var(--radius);
   font-family: var(--font-heading);
@@ -189,39 +370,212 @@ body::after {
   transition: all var(--transition);
   text-transform: uppercase;
   white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
 }
 
 .btn-accent {
-  background: var(--accent);
+  background: var(--gradient-accent);
   color: #000;
-  border-color: var(--accent);
+  border-color: transparent;
+}
+
+.btn-accent:hover {
+  box-shadow: var(--shadow-accent);
+  filter: brightness(1.08);
 }
-.btn-accent:hover { background: #fff066; box-shadow: 0 0 16px rgba(255,231,16,0.4); }
 
 .btn-muted {
   background: transparent;
   color: var(--text-muted);
   border-color: var(--border);
 }
-.btn-muted:hover { color: var(--text); border-color: var(--text-muted); }
+
+.btn-muted:hover { color: var(--text); border-color: var(--text-muted); background: rgba(255,255,255,0.03); }
 
 .btn-danger {
   background: var(--danger-dim);
   color: var(--danger);
-  border-color: rgba(255,82,93,0.4);
+  border-color: rgba(255,82,93,0.35);
 }
-.btn-danger:hover { background: rgba(255,82,93,0.25); }
 
-.btn-sm   { padding: 5px 12px; font-size: 0.8rem; }
-.btn-lg   { padding: 14px 32px; font-size: 1.1rem; }
-.btn-full { width: 100%; }
+.btn-danger:hover { background: rgba(255,82,93,0.22); border-color: var(--danger); }
+
+.btn-ghost {
+  background: transparent;
+  color: var(--brand-light);
+  border-color: transparent;
+}
+
+.btn-ghost:hover { background: var(--brand-dim); }
+
+.btn-sm    { padding: 5px 12px; font-size: 0.78rem; }
+.btn-lg    { padding: 15px 36px; font-size: 1.05rem; }
+.btn-full  { width: 100%; }
+.btn-icon  { padding: 8px; min-width: 36px; }
+
+/* Loading state */
+.btn-loading { pointer-events: none; opacity: 0.7; }
+.btn-loading::after {
+  content: '';
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  margin-left: 6px;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ── Progress bar ──────────────────────────────────────────────────────────── */
+.progress-bar {
+  height: 4px;
+  background: var(--bg-surface2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--gradient-accent);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.progress-fill-brand {
+  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 100%);
+}
+
+/* ── Skeleton loader ───────────────────────────────────────────────────────── */
+.skeleton {
+  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-surface2) 50%, var(--bg-surface) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s infinite;
+  border-radius: var(--radius);
+}
+
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.skeleton-text  { height: 14px; margin-bottom: 8px; }
+.skeleton-title { height: 24px; width: 60%; margin-bottom: 16px; }
+.skeleton-card  { height: 120px; }
+
+/* ── Modal ─────────────────────────────────────────────────────────────────── */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  backdrop-filter: blur(4px);
+  animation: fadeOverlay 0.15s ease;
+}
+
+@keyframes fadeOverlay {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.modal {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+  width: 100%;
+  max-width: 440px;
+  box-shadow: var(--shadow-card);
+  animation: modalSlide 0.18s ease;
+  position: relative;
+}
+
+.modal-wide { max-width: 600px; }
+
+@keyframes modalSlide {
+  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.modal-title {
+  font-family: var(--font-heading);
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+  text-transform: uppercase;
+}
+
+.modal-close {
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: var(--radius);
+  transition: color var(--transition);
+  line-height: 1;
+}
+
+.modal-close:hover { color: var(--text); }
+
+.modal-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 24px;
+  justify-content: flex-end;
+}
+
+/* ── Tooltip ───────────────────────────────────────────────────────────────── */
+[data-tooltip] { position: relative; }
+
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 4px 10px;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  color: var(--text);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 50;
+}
+
+[data-tooltip]:hover::after { opacity: 1; }
 
 /* ── Form elements ─────────────────────────────────────────────────────────── */
 .field { margin-bottom: 14px; }
 
 label {
   display: block;
-  font-size: 0.75rem;
+  font-size: 0.73rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -231,7 +585,9 @@ label {
 
 input[type="text"],
 input[type="password"],
-select {
+input[type="number"],
+select,
+textarea {
   width: 100%;
   background: var(--bg-surface2);
   border: 1px solid var(--border);
@@ -241,83 +597,147 @@ select {
   font-size: 1rem;
   padding: 10px 14px;
   outline: none;
-  transition: border-color var(--transition);
+  transition: border-color var(--transition), box-shadow var(--transition);
 }
 
-input:focus, select:focus { border-color: var(--accent); }
+input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
 select option { background: var(--bg-surface2); }
 
-.error {
-  color: var(--danger);
-  font-size: 0.85rem;
-  margin-bottom: 10px;
-}
+.error { color: var(--danger); font-size: 0.85rem; margin-bottom: 10px; }
 
 /* ── Login ─────────────────────────────────────────────────────────────────── */
 .login-box {
   width: 100%;
   max-width: 400px;
-  background: var(--bg-surface);
+  background: var(--bg-glass);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 36px 32px;
+  border-radius: var(--radius-lg);
+  padding: 40px 36px;
+  box-shadow: var(--shadow-card);
+  backdrop-filter: blur(16px);
 }
 
-.login-header { text-align: center; margin-bottom: 28px; }
+.login-header { text-align: center; margin-bottom: 32px; }
 
 .login-logo {
-  font-size: 3rem;
+  font-size: 3.2rem;
   line-height: 1;
   display: block;
-  margin-bottom: 8px;
-  filter: drop-shadow(0 0 12px rgba(255,231,16,0.6));
+  margin-bottom: 10px;
+  filter: drop-shadow(0 0 16px var(--accent-glow));
 }
 
 .login-header h1 {
   font-family: var(--font-heading);
-  font-size: 1.8rem;
+  font-size: 1.9rem;
   font-weight: 700;
-  letter-spacing: 0.15em;
+  letter-spacing: 0.16em;
   color: var(--accent);
-  text-shadow: 0 0 20px rgba(255,231,16,0.3);
+  text-shadow: 0 0 24px rgba(255,231,16,0.25);
 }
 
 .login-sub {
-  font-size: 0.7rem;
+  font-size: 0.68rem;
   letter-spacing: 0.1em;
   color: var(--text-muted);
-  margin-top: 4px;
+  margin-top: 6px;
 }
 
 /* ── Page headers ──────────────────────────────────────────────────────────── */
-.page-header { margin-bottom: 24px; }
+.page-header { margin-bottom: 28px; }
 
 .page-title {
   font-family: var(--font-heading);
-  font-size: 1.6rem;
+  font-size: 1.65rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   color: var(--accent);
   text-transform: uppercase;
+  text-shadow: 0 0 20px rgba(255,231,16,0.15);
 }
 
 .page-sub {
   font-size: 0.85rem;
   color: var(--text-muted);
+  margin-top: 5px;
+}
+
+/* ── Dashboard ─────────────────────────────────────────────────────────────── */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.dashboard-hero {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.hero-identity { display: flex; align-items: center; gap: 16px; }
+
+.hero-rank-icon {
+  font-size: 2.8rem;
+  filter: drop-shadow(0 0 10px var(--accent-glow));
+  line-height: 1;
+}
+
+.hero-name {
+  font-family: var(--font-heading);
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: 0.06em;
+  line-height: 1.1;
+}
+
+.hero-rank-name {
+  font-size: 0.78rem;
+  letter-spacing: 0.12em;
+  color: var(--text-dim);
+  text-transform: uppercase;
   margin-top: 4px;
 }
 
-/* ── Dashboard grid ────────────────────────────────────────────────────────── */
-.dashboard-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 16px;
+.hero-elo {
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  color: var(--text-dim);
+}
+
+.hero-elo span {
+  font-size: 1.4rem;
+  color: var(--accent);
+}
+
+.hero-stats {
+  display: flex;
+  gap: 24px;
+}
+
+.hero-stat-item { text-align: center; }
+.hero-stat-val {
+  font-family: var(--font-mono);
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.hero-stat-label {
+  font-size: 0.65rem;
+  letter-spacing: 0.1em;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  margin-top: 2px;
 }
 
 .stat-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 12px;
+  gap: 10px;
 }
 
 .stat-item {
@@ -325,28 +745,59 @@ select option { background: var(--bg-surface2); }
   padding: 12px 8px;
   background: var(--bg-surface2);
   border-radius: var(--radius);
+  border: 1px solid var(--border);
 }
 
 .stat-value {
   font-family: var(--font-mono);
-  font-size: 1.6rem;
+  font-size: 1.5rem;
   font-weight: 700;
   color: var(--text);
 }
 
 .stat-value.accent { color: var(--accent); }
-.stat-label { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; margin-top: 4px; }
+.stat-label { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; margin-top: 3px; }
+
+.stat-trend {
+  font-size: 0.72rem;
+  margin-left: 4px;
+}
+.stat-trend.up   { color: var(--success); }
+.stat-trend.down { color: var(--danger); }
 
 /* Daily challenge */
+.daily-stratagem { display: flex; flex-direction: column; gap: 8px; }
+
 .daily-name {
   font-family: var(--font-heading);
-  font-size: 1.3rem;
+  font-size: 1.2rem;
   font-weight: 700;
   color: var(--accent);
-  margin-bottom: 4px;
+  letter-spacing: 0.03em;
+}
+
+.daily-category { font-size: 0.78rem; color: var(--text-dim); }
+.daily-best { font-size: 0.82rem; color: var(--text-muted); }
+
+.daily-sequence-preview {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  margin: 4px 0;
+}
+
+.daily-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-size: 0.9rem;
+  color: var(--text-dim);
+  background: var(--bg-surface2);
 }
-.daily-category { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }
-.daily-best { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px; }
 
 /* Online list */
 .online-list { display: flex; flex-direction: column; gap: 8px; }
@@ -355,14 +806,15 @@ select option { background: var(--bg-surface2); }
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 8px 10px;
+  padding: 8px 12px;
   background: var(--bg-surface2);
   border-radius: var(--radius);
+  border: 1px solid var(--border);
 }
 
 .online-dot {
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
   background: var(--success);
   box-shadow: 0 0 6px var(--success);
@@ -373,38 +825,88 @@ select option { background: var(--bg-surface2); }
 .data-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 0.9rem;
+  font-size: 0.88rem;
 }
+
 .data-table th {
   text-align: left;
-  font-size: 0.7rem;
+  font-size: 0.68rem;
   letter-spacing: 0.1em;
   color: var(--text-muted);
   padding: 6px 8px;
   border-bottom: 1px solid var(--border);
   text-transform: uppercase;
 }
+
 .data-table td {
-  padding: 8px 8px;
-  border-bottom: 1px solid rgba(65, 99, 156, 0.1);
+  padding: 9px 8px;
+  border-bottom: 1px solid rgba(65, 99, 156, 0.08);
   font-family: var(--font-mono);
-  font-size: 0.85rem;
+  font-size: 0.84rem;
 }
+
+.data-table tbody tr:hover td { background: rgba(65, 99, 156, 0.06); }
 .data-table tr.row-me td { color: var(--accent); }
 .data-table .rank {
-  font-size: 1rem;
+  font-size: 0.95rem;
   color: var(--accent);
   font-weight: 700;
   text-align: center;
   width: 40px;
 }
-.muted { color: var(--text-muted); font-size: 0.85rem; }
 
 /* ── Practice mode ─────────────────────────────────────────────────────────── */
+.practice-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+/* Mode selector */
+.mode-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.mode-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 18px 14px;
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--trans-med);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mode-card:hover { border-color: var(--brand); background: var(--brand-dim); }
+.mode-card.active { border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 14px rgba(255,231,16,0.1); }
+
+.mode-icon { font-size: 1.8rem; line-height: 1; }
+
+.mode-name {
+  font-family: var(--font-heading);
+  font-size: 0.88rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: var(--text);
+  text-transform: uppercase;
+}
+
+.mode-desc { font-size: 0.73rem; color: var(--text-muted); line-height: 1.4; }
+
+/* Category filters */
 .category-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 7px;
   margin-bottom: 20px;
 }
 
@@ -415,26 +917,34 @@ select option { background: var(--bg-surface2); }
   border-radius: 20px;
   padding: 5px 14px;
   font-family: var(--font-body);
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   cursor: pointer;
   transition: all var(--transition);
 }
-.cat-btn.active {
-  background: var(--brand-dim);
-  border-color: var(--brand);
-  color: var(--text);
-}
-.cat-btn:hover { border-color: var(--text-muted); color: var(--text); }
 
-.practice-idle {
+.cat-btn.active { background: var(--brand-dim); border-color: var(--brand); color: var(--text); }
+.cat-btn:hover  { border-color: var(--text-muted); color: var(--text); }
+
+/* Idle / Settings row */
+.practice-setup {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 20px;
-  padding: 40px 20px;
+  gap: 24px;
+  padding: 32px 20px;
 }
-.idle-hint { color: var(--text-muted); font-size: 0.9rem; }
 
+.practice-start-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.idle-hint { color: var(--text-muted); font-size: 0.88rem; }
+
+/* Active practice */
 .practice-active {
   display: flex;
   flex-direction: column;
@@ -444,16 +954,16 @@ select option { background: var(--bg-surface2); }
 
 .stratagem-display {
   width: 100%;
-  max-width: 600px;
+  max-width: 620px;
   text-align: center;
 }
 
 .stratagem-category {
-  font-size: 0.75rem;
-  letter-spacing: 0.12em;
-  color: var(--brand);
+  font-size: 0.72rem;
+  letter-spacing: 0.14em;
+  color: var(--brand-light);
   text-transform: uppercase;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
 }
 
 .stratagem-name {
@@ -461,15 +971,16 @@ select option { background: var(--bg-surface2); }
   font-size: 2rem;
   font-weight: 700;
   color: var(--accent);
-  letter-spacing: 0.05em;
+  letter-spacing: 0.04em;
   margin-bottom: 20px;
-  text-shadow: 0 0 20px rgba(255,231,16,0.2);
+  text-shadow: 0 0 24px rgba(255,231,16,0.18);
+  min-height: 2.4em;
 }
 
 .practice-hint {
-  font-size: 0.75rem;
+  font-size: 0.72rem;
   color: var(--text-muted);
-  margin-top: 16px;
+  margin-top: 14px;
   letter-spacing: 0.08em;
 }
 
@@ -480,29 +991,35 @@ select option { background: var(--bg-surface2); }
   gap: 8px;
   justify-content: center;
   align-items: center;
-  min-height: 56px;
+  min-height: 58px;
 }
 
 .arrow-key {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 48px;
+  width: 50px;
+  height: 50px;
   border: 2px solid var(--border);
   border-radius: 6px;
   font-family: var(--font-mono);
   font-size: 1.3rem;
   color: var(--text-muted);
   background: var(--bg-surface2);
-  transition: all 0.12s ease;
+  transition: all 0.1s ease;
   user-select: none;
 }
 
 .arrow-key.active {
   border-color: var(--accent);
   color: var(--accent);
-  box-shadow: 0 0 12px rgba(255,231,16,0.35);
+  box-shadow: 0 0 14px rgba(255,231,16,0.4);
+  animation: pulse-key 0.9s ease infinite;
+}
+
+@keyframes pulse-key {
+  0%, 100% { box-shadow: 0 0 14px rgba(255,231,16,0.4); }
+  50%       { box-shadow: 0 0 22px rgba(255,231,16,0.6); }
 }
 
 .arrow-key.completed {
@@ -515,7 +1032,7 @@ select option { background: var(--bg-surface2); }
   border-color: var(--success);
   background: var(--success-dim);
   color: var(--success);
-  animation: pop 0.25s ease;
+  animation: pop 0.22s ease;
 }
 
 .arrow-key.flash-wrong {
@@ -526,7 +1043,7 @@ select option { background: var(--bg-surface2); }
 }
 
 @keyframes pop {
-  0%   { transform: scale(1.25); }
+  0%   { transform: scale(1.3); }
   100% { transform: scale(1); }
 }
 
@@ -541,16 +1058,51 @@ select option { background: var(--bg-surface2); }
 /* ── Practice HUD ──────────────────────────────────────────────────────────── */
 .practice-hud {
   display: flex;
-  gap: 24px;
+  gap: 28px;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
 }
 
-.hud-item { text-align: center; }
-.hud-label { font-size: 0.65rem; letter-spacing: 0.15em; color: var(--text-muted); text-transform: uppercase; }
-.hud-value { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; }
+.hud-item { text-align: center; min-width: 72px; }
+.hud-label { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 2px; }
+.hud-value { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; color: var(--text); }
 .hud-value.accent { color: var(--accent); }
 
+/* SVG Timer ring */
+.timer-ring-wrap {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+}
+
+.timer-ring-svg {
+  transform: rotate(-90deg);
+  width: 80px;
+  height: 80px;
+}
+
+.timer-ring-bg   { fill: none; stroke: var(--bg-surface2); stroke-width: 5; }
+.timer-ring-fill { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 0.3s ease; }
+.timer-ring-fill.danger { stroke: var(--danger); }
+
+.timer-ring-val {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--text);
+  transition: color var(--transition);
+}
+
+.timer-ring-val.danger { color: var(--danger); animation: pulse 0.8s infinite; }
+
+/* Classic timer fallback */
 .timer {
   font-family: var(--font-mono);
   font-size: 2.5rem;
@@ -562,63 +1114,111 @@ select option { background: var(--bg-surface2); }
 }
 
 .timer.timer-danger { color: var(--danger); animation: pulse 0.8s infinite; }
+.timer.flash-wrong { animation: shake 0.4s ease; }
 
 @keyframes pulse {
   0%, 100% { opacity: 1; }
   50%       { opacity: 0.5; }
 }
 
-.timer.flash-wrong { animation: shake 0.4s ease; }
-
-/* Container shake when wrong input in match mode */
 .flash-wrong-seq { animation: shake 0.35s ease; }
 
+/* Lives (Endless mode) */
+.lives-display { display: flex; gap: 6px; align-items: center; font-size: 1.4rem; }
+.life-icon.lost { opacity: 0.2; filter: grayscale(1); }
+
+/* Streak fire effect */
+.streak-fire .hud-value {
+  color: var(--accent);
+  text-shadow: 0 0 12px var(--accent-glow), 0 0 24px rgba(255,150,0,0.4);
+  animation: fireGlow 1s ease infinite alternate;
+}
+
+@keyframes fireGlow {
+  from { text-shadow: 0 0 12px var(--accent-glow), 0 0 24px rgba(255,150,0,0.3); }
+  to   { text-shadow: 0 0 20px var(--accent-glow), 0 0 40px rgba(255,150,0,0.5); }
+}
+
+/* Multiplier badge */
+.combo-badge {
+  display: inline-flex;
+  align-items: center;
+  background: var(--accent-dim);
+  border: 1px solid var(--border-accent);
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 20px;
+}
+
+/* Practice mode-specific HUD additions */
+.drill-progress { width: 100%; max-width: 500px; }
+.drill-label { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.1em; margin-bottom: 6px; text-transform: uppercase; display: flex; justify-content: space-between; }
+
+/* Vignette danger (≤5s) */
+.danger-vignette {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 5;
+  box-shadow: inset 0 0 80px rgba(255, 82, 93, 0.25);
+  animation: vignetteFlash 0.8s ease infinite;
+}
+
+@keyframes vignetteFlash {
+  0%, 100% { opacity: 0.8; }
+  50%       { opacity: 0.3; }
+}
+
 /* ── D-Pad ─────────────────────────────────────────────────────────────────── */
 .dpad {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
+  gap: 3px;
 }
 
 .dpad-row {
   display: flex;
-  gap: 4px;
+  gap: 3px;
   align-items: center;
 }
 
 .dpad-btn {
-  width: 56px;
-  height: 56px;
+  width: 58px;
+  height: 58px;
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   color: var(--text);
-  font-size: 1.4rem;
+  font-size: 1.3rem;
   cursor: pointer;
   transition: all var(--transition);
   font-family: var(--font-mono);
   display: flex;
   align-items: center;
   justify-content: center;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .dpad-btn:hover  { background: var(--brand-dim); border-color: var(--brand); }
-.dpad-btn:active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); transform: scale(0.92); }
+.dpad-btn:active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); transform: scale(0.9); }
 
 .dpad-center {
-  width: 56px;
-  height: 56px;
+  width: 58px;
+  height: 58px;
   background: var(--bg-surface2);
   border-radius: var(--radius);
 }
 
 /* ── Lobby ─────────────────────────────────────────────────────────────────── */
 .lobby-layout {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 16px;
-  max-width: 600px;
+  max-width: 900px;
 }
 
 .player-list { display: flex; flex-direction: column; gap: 10px; }
@@ -631,9 +1231,18 @@ select option { background: var(--bg-surface2); }
   background: var(--bg-surface2);
   border-radius: var(--radius);
   border: 1px solid var(--border);
+  transition: border-color var(--transition);
 }
 
-.player-name { flex: 1; font-family: var(--font-mono); }
+.lobby-player:hover { border-color: rgba(65, 99, 156, 0.5); }
+
+.player-name { flex: 1; font-family: var(--font-mono); font-size: 0.9rem; }
+
+.player-elo {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--text-dim);
+}
 
 .challenge-list { display: flex; flex-direction: column; gap: 10px; }
 
@@ -643,34 +1252,53 @@ select option { background: var(--bg-surface2); }
   gap: 10px;
   padding: 14px;
   background: var(--accent-dim);
-  border: 1px solid rgba(255,231,16,0.3);
-  border-radius: var(--radius);
+  border: 1px solid var(--border-accent);
+  border-radius: var(--radius-lg);
   flex-wrap: wrap;
+  animation: challengePulse 2s ease infinite;
+}
+
+@keyframes challengePulse {
+  0%, 100% { border-color: var(--border-accent); }
+  50%       { border-color: var(--accent); box-shadow: 0 0 12px rgba(255,231,16,0.15); }
 }
 
 .challenge-badge {
   position: fixed;
   top: 64px;
   right: 16px;
-  background: var(--accent);
+  background: var(--gradient-accent);
   color: #000;
   font-family: var(--font-heading);
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   font-weight: 700;
   padding: 6px 14px;
   border-radius: 20px;
   cursor: pointer;
   z-index: 200;
-  box-shadow: 0 0 12px rgba(255,231,16,0.5);
+  box-shadow: var(--shadow-accent);
   animation: pulse 1.5s infinite;
 }
 
+/* Lobby empty state */
+.lobby-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 32px 20px;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.lobby-empty-icon { font-size: 2.5rem; opacity: 0.4; }
+
 /* ── Match ─────────────────────────────────────────────────────────────────── */
 .match-header {
   position: relative;
   z-index: 1;
   text-align: center;
-  padding: 24px 20px 16px;
+  padding: 24px 20px 12px;
 }
 
 .match-status-text {
@@ -683,7 +1311,7 @@ select option { background: var(--bg-surface2); }
 }
 
 .match-category {
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   color: var(--text-muted);
   letter-spacing: 0.1em;
   margin-top: 4px;
@@ -697,20 +1325,27 @@ select option { background: var(--bg-surface2); }
   justify-content: center;
   gap: 32px;
   padding: 16px;
-  max-width: 600px;
-  margin: 0 auto 24px;
+  max-width: 520px;
+  margin: 0 auto 20px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  backdrop-filter: blur(8px);
 }
 
 .match-player { text-align: center; }
-.match-player-name { font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-muted); }
+.match-player-name { font-family: var(--font-mono); font-size: 0.88rem; color: var(--text-muted); }
+
 .match-wins {
   font-family: var(--font-mono);
   font-size: 3rem;
   font-weight: 700;
   color: var(--text);
+  line-height: 1.1;
 }
+
 .match-player.me .match-wins { color: var(--accent); }
-.match-vs { font-family: var(--font-heading); font-size: 1rem; color: var(--text-muted); }
+.match-vs { font-family: var(--font-heading); font-size: 1rem; color: var(--text-muted); padding: 0 8px; }
 
 .match-round-area {
   position: relative;
@@ -718,8 +1353,8 @@ select option { background: var(--bg-surface2); }
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 24px;
-  max-width: 700px;
+  gap: 20px;
+  max-width: 720px;
   margin: 0 auto;
   padding: 0 20px;
 }
@@ -732,8 +1367,9 @@ select option { background: var(--bg-surface2); }
 }
 
 .match-seq-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
+
 .match-seq-label {
-  font-size: 0.7rem;
+  font-size: 0.68rem;
   letter-spacing: 0.15em;
   font-weight: 700;
   color: var(--text-muted);
@@ -750,15 +1386,126 @@ select option { background: var(--bg-surface2); }
   padding: 16px;
 }
 
+/* ── Post-match result ─────────────────────────────────────────────────────── */
+.result-winner { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
+.result-winner.win  { color: var(--accent); text-shadow: var(--shadow-accent); }
+.result-winner.loss { color: var(--text-muted); }
+
+.elo-delta-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-family: var(--font-mono);
+  padding: 12px;
+  background: var(--bg-surface2);
+  border-radius: var(--radius);
+  margin: 8px 0;
+}
+
+.elo-delta-old { color: var(--text-muted); }
+.elo-delta-arrow { color: var(--text-dim); }
+.elo-delta-new  { color: var(--accent); font-size: 1.1rem; font-weight: 700; }
+.elo-delta-val.positive { color: var(--success); }
+.elo-delta-val.negative { color: var(--danger); }
+
+.round-history { display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto; margin: 8px 0; }
+.round-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  background: var(--bg-surface2);
+  border-radius: var(--radius);
+  font-size: 0.82rem;
+  font-family: var(--font-mono);
+}
+
+.round-row.won  { border-left: 3px solid var(--success); }
+.round-row.lost { border-left: 3px solid var(--danger); }
+
 /* ── Leaderboard ───────────────────────────────────────────────────────────── */
-.leaderboard-table { max-width: 700px; }
+.leaderboard-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 20px;
+}
+
+.tab-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  font-family: var(--font-heading);
+  font-size: 0.82rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  padding: 6px 16px;
+  cursor: pointer;
+  transition: all var(--transition);
+  text-transform: uppercase;
+}
+
+.tab-btn:hover  { color: var(--text); border-color: var(--brand); }
+.tab-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
+
+/* ── History view ──────────────────────────────────────────────────────────── */
+.history-chart {
+  width: 100%;
+  height: 160px;
+  background: var(--bg-surface2);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  padding: 12px;
+  overflow: hidden;
+}
+
+.history-chart svg { width: 100%; height: 100%; }
+
+.history-filters {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+  align-items: center;
+}
+
+.history-filters select {
+  width: auto;
+  min-width: 120px;
+}
+
+.pagination {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+
+.page-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  border-radius: var(--radius);
+  padding: 4px 12px;
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.page-btn:hover  { border-color: var(--brand); color: var(--text); }
+.page-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
+.page-info { color: var(--text-muted); font-size: 0.82rem; }
 
 /* ── Admin ─────────────────────────────────────────────────────────────────── */
 .admin-layout {
   display: grid;
   grid-template-columns: 1fr 2fr;
   gap: 16px;
-  max-width: 800px;
+  max-width: 860px;
 }
 
 .admin-user-list { display: flex; flex-direction: column; gap: 8px; }
@@ -767,24 +1514,17 @@ select option { background: var(--bg-surface2); }
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 10px 12px;
+  padding: 10px 14px;
   background: var(--bg-surface2);
   border-radius: var(--radius);
+  border: 1px solid var(--border);
   flex-wrap: wrap;
+  transition: border-color var(--transition);
 }
 
-.user-name { flex: 1; font-family: var(--font-mono); }
+.admin-user-row:hover { border-color: rgba(65, 99, 156, 0.4); }
 
-.user-role {
-  font-size: 0.7rem;
-  padding: 2px 8px;
-  border-radius: 20px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-}
-.badge-admin { background: var(--accent-dim); color: var(--accent); }
-.badge-user  { background: var(--brand-dim);  color: var(--brand); }
-.badge-warning { background: var(--danger-dim); color: var(--danger); font-size: 0.7rem; padding: 2px 8px; border-radius: 20px; }
+.user-name { flex: 1; font-family: var(--font-mono); font-size: 0.88rem; }
 
 .pw-display {
   margin-top: 12px;
@@ -794,10 +1534,50 @@ select option { background: var(--bg-surface2); }
   border-radius: var(--radius);
   font-family: var(--font-mono);
   color: var(--accent);
-  font-size: 0.9rem;
+  font-size: 0.88rem;
   word-break: break-all;
 }
 
+/* ── Settings modal content ────────────────────────────────────────────────── */
+.settings-section { margin-bottom: 22px; }
+
+.settings-label {
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin-bottom: 10px;
+  display: block;
+}
+
+.settings-options {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.settings-option {
+  flex: 1;
+  min-width: 70px;
+  background: var(--bg-surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  font-family: var(--font-heading);
+  font-size: 0.82rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  padding: 8px 12px;
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--transition);
+  text-transform: uppercase;
+}
+
+.settings-option:hover  { border-color: var(--brand); color: var(--text); }
+.settings-option.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
+
 /* ── Toast notifications ───────────────────────────────────────────────────── */
 #toast-container {
   position: fixed;
@@ -813,29 +1593,69 @@ select option { background: var(--bg-surface2); }
 .toast {
   background: var(--bg-surface);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
+  border-radius: var(--radius-lg);
   padding: 10px 16px;
-  font-size: 0.9rem;
+  font-size: 0.88rem;
   opacity: 0;
   transform: translateX(20px);
-  transition: all 0.25s ease;
-  max-width: 320px;
+  transition: all 0.22s ease;
+  max-width: 300px;
   pointer-events: auto;
+  box-shadow: var(--shadow-card);
 }
 
 .toast.show { opacity: 1; transform: translateX(0); }
+.toast.toast-success { border-color: rgba(77,255,145,0.3); }
+.toast.toast-danger  { border-color: rgba(255,82,93,0.3); }
+
+/* ── Divider ───────────────────────────────────────────────────────────────── */
+.divider {
+  height: 1px;
+  background: var(--border);
+  margin: 16px 0;
+}
 
 /* ── Responsive ────────────────────────────────────────────────────────────── */
-@media (max-width: 600px) {
+@media (max-width: 1024px) {
+  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
+  .mode-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 768px) {
   .nav-links { display: none; }
+  #nav-hamburger { display: flex; }
+
+  .view { padding: 20px 14px 48px; }
+
   .dashboard-grid { grid-template-columns: 1fr; }
+  .dashboard-hero { flex-direction: column; gap: 16px; }
+  .hero-stats { justify-content: center; }
+
+  .lobby-layout { grid-template-columns: 1fr; }
   .admin-layout { grid-template-columns: 1fr; }
   .match-sequences { grid-template-columns: 1fr; gap: 12px; }
-  .stratagem-name { font-size: 1.4rem; }
-  .arrow-key { width: 40px; height: 40px; font-size: 1.1rem; }
-  .match-scoreboard { gap: 16px; }
-  .match-wins { font-size: 2rem; }
-  .match-status-text { font-size: 1.3rem; }
+  .mode-grid { grid-template-columns: repeat(2, 1fr); }
+
+  .stratagem-name { font-size: 1.5rem; }
+  .arrow-key { width: 42px; height: 42px; font-size: 1.1rem; }
+  .match-scoreboard { gap: 16px; padding: 12px; }
+  .match-wins { font-size: 2.2rem; }
+  .match-status-text { font-size: 1.4rem; }
   .practice-hud { gap: 16px; }
   .timer { font-size: 2rem; }
+  .leaderboard-tabs { flex-wrap: wrap; }
+}
+
+@media (max-width: 480px) {
+  .mode-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
+  .mode-card { padding: 14px 10px; }
+  .mode-icon { font-size: 1.4rem; }
+  .hero-stats { gap: 16px; }
+  .practice-hud { gap: 10px; }
+  .arrow-key { width: 38px; height: 38px; font-size: 1rem; }
+  .dpad-btn { width: 52px; height: 52px; }
+  .dpad-center { width: 52px; height: 52px; }
+  .page-title { font-size: 1.3rem; }
+  .match-wins { font-size: 1.8rem; }
+  .match-status-text { font-size: 1.2rem; }
 }
diff --git a/server.js b/server.js
index 3f9e973..1e3e2d6 100644
--- a/server.js
+++ b/server.js
@@ -127,10 +127,35 @@ function initDB() {
       loser_rounds  INTEGER NOT NULL,
       created_at    TEXT NOT NULL
     );
+    CREATE TABLE IF NOT EXISTS stratagem_stats (
+      username    TEXT NOT NULL,
+      stratagem   TEXT NOT NULL,
+      attempts    INTEGER DEFAULT 0,
+      completions INTEGER DEFAULT 0,
+      best_time   INTEGER DEFAULT NULL,
+      PRIMARY KEY (username, stratagem)
+    );
     CREATE INDEX IF NOT EXISTS idx_ps_user ON practice_sessions(username);
     CREATE INDEX IF NOT EXISTS idx_m_winner ON matches(winner);
     CREATE INDEX IF NOT EXISTS idx_m_loser  ON matches(loser);
   `);
+
+  // Schema migrations (user_version tracks applied version)
+  const version = db.pragma('user_version', { simple: true });
+
+  if (version < 1) {
+    // Add elo column to users if missing
+    const cols = db.pragma('table_info(users)').map(c => c.name);
+    if (!cols.includes('elo')) {
+      db.exec('ALTER TABLE users ADD COLUMN elo INTEGER DEFAULT 1000');
+    }
+    // Add mode column to practice_sessions if missing
+    const psCols = db.pragma('table_info(practice_sessions)').map(c => c.name);
+    if (!psCols.includes('mode')) {
+      db.exec("ALTER TABLE practice_sessions ADD COLUMN mode TEXT DEFAULT 'timed'");
+    }
+    db.pragma('user_version = 1');
+  }
 }
 
 async function initUsers() {
@@ -143,13 +168,33 @@ async function initUsers() {
     if (!exists) {
       const tempPw = crypto.randomBytes(6).toString('hex');
       const hash   = await bcrypt.hash(tempPw, 12);
-      db.prepare('INSERT INTO users (username, hash, role, mustChange) VALUES (?, ?, ?, 1)')
+      db.prepare('INSERT INTO users (username, hash, role, mustChange, elo) VALUES (?, ?, ?, 1, 1000)')
         .run(username, hash, role);
       console.log(`[INIT] Created user '${username}' – temp password: ${tempPw}`);
     }
   }
 }
 
+// ── ELO calculation ───────────────────────────────────────────────────────────
+function calcElo(winnerElo, loserElo, k = 32) {
+  const expected = 1 / (1 + 10 ** ((loserElo - winnerElo) / 400));
+  const delta    = Math.round(k * (1 - expected));
+  return {
+    winner: Math.max(0, winnerElo + delta),
+    loser:  Math.max(0, loserElo  - delta),
+    delta,
+  };
+}
+
+// ── ELO rank label ─────────────────────────────────────────────────────────────
+function eloRank(elo) {
+  if (elo >= 1700) return 'GENERAL';
+  if (elo >= 1500) return 'CAPTAIN';
+  if (elo >= 1300) return 'LIEUTENANT';
+  if (elo >= 1100) return 'SERGEANT';
+  return 'PRIVATE';
+}
+
 // ── Session secret ────────────────────────────────────────────────────────────
 function getSessionSecret() {
   const file = path.join(DATA_DIR, '.session-secret');
@@ -313,6 +358,7 @@ function getLeaderboard() {
   lbCache = db.prepare(`
     SELECT
       u.username,
+      COALESCE(u.elo, 1000)       AS elo,
       COALESCE(ps.sessions, 0)    AS sessions,
       COALESCE(ps.totalScore, 0)  AS totalScore,
       COALESCE(ps.fastestTime, 0) AS fastestTime,
@@ -351,27 +397,37 @@ app.get('/api/dashboard', requireAuth, (req, res) => {
     FROM matches WHERE winner = ? OR loser = ?
   `).get(u, u, u);
 
-  const lb    = getLeaderboard();
+  const lb      = getLeaderboard();
   const rankIdx = lb.findIndex(r => r.username === u);
-  const rank  = rankIdx >= 0 ? { position: rankIdx + 1 } : null;
+  const rank    = rankIdx >= 0 ? { position: rankIdx + 1 } : null;
 
   const recent = db.prepare(`
-    SELECT stratagem, category, score, time_ms, created_at
+    SELECT stratagem, category, score, time_ms, mode, created_at
     FROM practice_sessions WHERE username = ?
     ORDER BY created_at DESC LIMIT 5
   `).all(u);
 
-  const dayOfYear   = Math.floor((new Date() - new Date(new Date().getFullYear(), 0, 0)) / 86_400_000);
-  const dailyStrat  = STRATAGEMS[dayOfYear % STRATAGEMS.length];
-  const dailyBest   = db.prepare(`
+  const dayOfYear  = Math.floor((new Date() - new Date(new Date().getFullYear(), 0, 0)) / 86_400_000);
+  const dailyStrat = STRATAGEMS[dayOfYear % STRATAGEMS.length];
+  const dailyBest  = db.prepare(`
     SELECT MIN(time_ms) AS bestTime FROM practice_sessions
     WHERE stratagem = ? AND username = ?
   `).get(dailyStrat.name, u);
 
+  const userRow = db.prepare('SELECT elo FROM users WHERE username = ?').get(u);
+  const elo     = userRow?.elo ?? 1000;
+
+  const onlineWithElo = [...userSockets.keys()].map(name => {
+    const row = db.prepare('SELECT elo FROM users WHERE username = ?').get(name);
+    return { name, elo: row?.elo ?? 1000, rank: eloRank(row?.elo ?? 1000) };
+  });
+
   res.json({
     stats:    { ...stats, ...matchStats },
     rank,
-    online:   [...userSockets.keys()],
+    elo,
+    eloRank:  eloRank(elo),
+    online:   onlineWithElo,
     recent,
     daily:    { stratagem: dailyStrat, bestTime: dailyBest?.bestTime ?? null },
   });
@@ -379,15 +435,27 @@ app.get('/api/dashboard', requireAuth, (req, res) => {
 
 // ── Scores ────────────────────────────────────────────────────────────────────
 app.post('/api/scores/practice', requireAuth, (req, res) => {
-  const { stratagem, category, time_ms, score } = req.body || {};
-  if (!VALID_NAMES.has(stratagem))                           return res.status(400).json({ error: 'Invalid stratagem' });
-  if (typeof time_ms !== 'number' || time_ms <= 0 || time_ms > 31_000) return res.status(400).json({ error: 'Invalid time' });
-  if (typeof score   !== 'number' || score   <  0 || score   > 15_000) return res.status(400).json({ error: 'Invalid score' });
+  const { stratagem, category, time_ms, score, mode } = req.body || {};
+  if (!VALID_NAMES.has(stratagem))                                          return res.status(400).json({ error: 'Invalid stratagem' });
+  if (typeof time_ms !== 'number' || time_ms <= 0 || time_ms > 600_000)    return res.status(400).json({ error: 'Invalid time' });
+  if (typeof score   !== 'number' || score   <  0 || score   > 50_000)     return res.status(400).json({ error: 'Invalid score' });
+
+  const safeMode = ['timed','endless','drill','speedrun'].includes(mode) ? mode : 'timed';
 
   db.prepare(`
-    INSERT INTO practice_sessions (username, stratagem, category, time_ms, score, created_at)
-    VALUES (?, ?, ?, ?, ?, ?)
-  `).run(req.session.user, stratagem, category || '', time_ms, score, new Date().toISOString());
+    INSERT INTO practice_sessions (username, stratagem, category, time_ms, score, mode, created_at)
+    VALUES (?, ?, ?, ?, ?, ?, ?)
+  `).run(req.session.user, stratagem, category || '', time_ms, score, safeMode, new Date().toISOString());
+
+  // Update stratagem_stats (upsert)
+  db.prepare(`
+    INSERT INTO stratagem_stats (username, stratagem, attempts, completions, best_time)
+    VALUES (?, ?, 1, 1, ?)
+    ON CONFLICT(username, stratagem) DO UPDATE SET
+      attempts    = attempts + 1,
+      completions = completions + 1,
+      best_time   = CASE WHEN best_time IS NULL OR ? < best_time THEN ? ELSE best_time END
+  `).run(req.session.user, stratagem, time_ms, time_ms, time_ms);
 
   invalidateLB();
   res.json({ ok: true });
@@ -397,10 +465,27 @@ app.get('/api/scores/leaderboard', requireAuth, (req, res) => {
   res.json(getLeaderboard());
 });
 
+app.get('/api/scores/leaderboard/elo', requireAuth, (req, res) => {
+  const rows = db.prepare(`
+    SELECT username, elo, role FROM users ORDER BY elo DESC LIMIT 20
+  `).all();
+  res.json(rows.map(r => ({ ...r, rank: eloRank(r.elo) })));
+});
+
+app.get('/api/scores/leaderboard/speedrun', requireAuth, (req, res) => {
+  // Speedrun: sum of all time_ms per user where mode = 'speedrun', order by total time ASC
+  const rows = db.prepare(`
+    SELECT username, SUM(time_ms) AS totalTime, COUNT(*) AS stratagems
+    FROM practice_sessions WHERE mode = 'speedrun'
+    GROUP BY username ORDER BY totalTime ASC LIMIT 20
+  `).all();
+  res.json(rows);
+});
+
 app.get('/api/scores/me', requireAuth, (req, res) => {
   const u = req.session.user;
   const practice = db.prepare(`
-    SELECT stratagem, category, score, time_ms, created_at
+    SELECT stratagem, category, score, time_ms, mode, created_at
     FROM practice_sessions WHERE username = ?
     ORDER BY created_at DESC LIMIT 50
   `).all(u);
@@ -411,6 +496,41 @@ app.get('/api/scores/me', requireAuth, (req, res) => {
   res.json({ practice, matches });
 });
 
+// ── History (paginated) ────────────────────────────────────────────────────────
+app.get('/api/history', requireAuth, (req, res) => {
+  const u     = req.session.user;
+  const page  = Math.max(1, parseInt(req.query.page)  || 1);
+  const limit = Math.min(50, Math.max(1, parseInt(req.query.limit) || 10));
+  const mode  = req.query.mode  || '';
+  const cat   = req.query.cat   || '';
+  const offset = (page - 1) * limit;
+
+  let where = 'WHERE username = ?';
+  const params = [u];
+  if (mode) { where += ' AND mode = ?'; params.push(mode); }
+  if (cat)  { where += ' AND category = ?'; params.push(cat); }
+
+  const total = db.prepare(`SELECT COUNT(*) AS n FROM practice_sessions ${where}`).get(...params).n;
+  const rows  = db.prepare(`
+    SELECT stratagem, category, score, time_ms, mode, created_at
+    FROM practice_sessions ${where}
+    ORDER BY created_at DESC LIMIT ? OFFSET ?
+  `).all(...params, limit, offset);
+
+  res.json({ rows, total, page, pages: Math.ceil(total / limit) });
+});
+
+// ── Stratagem stats ────────────────────────────────────────────────────────────
+app.get('/api/stats/stratagems', requireAuth, (req, res) => {
+  const u = req.session.user;
+  const rows = db.prepare(`
+    SELECT stratagem, attempts, completions, best_time
+    FROM stratagem_stats WHERE username = ?
+    ORDER BY best_time ASC NULLS LAST
+  `).all(u);
+  res.json(rows);
+});
+
 // ── Stratagems API (authenticated) ────────────────────────────────────────────
 // Stratagem sequences are served via API – not as a public static file.
 app.get('/api/stratagems', requireAuth, (req, res) => {
@@ -441,7 +561,10 @@ async function main() {
   }
 
   function broadcastLobbyUpdate() {
-    const online = [...userSockets.keys()];
+    const online = [...userSockets.keys()].map(name => {
+      const row = db.prepare('SELECT elo FROM users WHERE username = ?').get(name);
+      return { name, elo: row?.elo ?? 1000, rank: eloRank(row?.elo ?? 1000) };
+    });
     wss.clients.forEach(ws => {
       if (ws.readyState !== WebSocket.OPEN || !ws.userId) return;
       const incoming = [...pendingChallenges.entries()]
@@ -470,15 +593,37 @@ async function main() {
     room.matchScores[winnerId]++;
     const matchScores = { ...room.matchScores };
 
+    // Track round history for post-match screen
+    if (!room.roundHistory) room.roundHistory = [];
+    room.roundHistory.push({ round: room.roundHistory.length + 1, winner: winnerId });
+
     broadcastToRoom(room, 'round-complete', { winner: winnerId, matchScores });
 
     if (room.matchScores[winnerId] >= 5) {
-      broadcastToRoom(room, 'match-end', { winner: winnerId, matchScores });
+      // Calculate ELO delta
+      const wRow = db.prepare('SELECT elo FROM users WHERE username = ?').get(winnerId);
+      const lRow = db.prepare('SELECT elo FROM users WHERE username = ?').get(loser.userId);
+      const eloResult = calcElo(wRow?.elo ?? 1000, lRow?.elo ?? 1000);
+
+      db.prepare('UPDATE users SET elo = ? WHERE username = ?').run(eloResult.winner, winnerId);
+      db.prepare('UPDATE users SET elo = ? WHERE username = ?').run(eloResult.loser,  loser.userId);
+
       db.prepare(`
         INSERT INTO matches (winner, loser, winner_rounds, loser_rounds, created_at)
         VALUES (?, ?, ?, ?, ?)
       `).run(winnerId, loser.userId, room.matchScores[winnerId], room.matchScores[loser.userId], new Date().toISOString());
+
       invalidateLB();
+
+      broadcastToRoom(room, 'match-end', {
+        winner: winnerId,
+        matchScores,
+        roundHistory: room.roundHistory,
+        eloChanges: {
+          [winnerId]:    { old: wRow?.elo ?? 1000, new: eloResult.winner, delta: +eloResult.delta },
+          [loser.userId]: { old: lRow?.elo ?? 1000, new: eloResult.loser,  delta: -eloResult.delta },
+        },
+      });
       rooms.delete(room.roomId);
     } else {
       room.state = 'waiting';
@@ -501,7 +646,8 @@ async function main() {
         const { targetUser } = payload;
         if (!userSockets.has(targetUser) || targetUser === userId) return;
         pendingChallenges.set(userId, targetUser);
-        send(userSockets.get(targetUser), 'challenge-received', { from: userId });
+        const challengerElo = db.prepare('SELECT elo FROM users WHERE username = ?').get(userId)?.elo ?? 1000;
+        send(userSockets.get(targetUser), 'challenge-received', { from: userId, elo: challengerElo });
         broadcastLobbyUpdate();
         break;
       }