feat: major redesign — ELO system, 4 practice modes, history view, mobile nav

- 4 practice modes: Timed (SVG ring), Endless (3 lives), Category Drill, Speed Run
- Practice settings modal (timer duration, difficulty) with localStorage persistence
- History view: paginated table, SVG score chart, best-times-per-stratagem
- ELO rating system with server-side K=32 calculation and rank tiers PRIVATE–GENERAL
- Post-match result modal with ELO delta and round history
- Challenge modal showing challenger name + ELO (replaces toast)
- Dashboard hero card with ELO rank icon and daily sequence preview
- Leaderboard tabs: Practice Score / ELO / Speed Run
- Mobile hamburger nav drawer with slide-in animation
- DB migration: elo column, mode column, stratagem_stats table
- WS lobby-update now sends {name, elo, rank} objects
- View fade transitions, danger vignette at ≤5s, streak fire glow, combo badge
- Esc/Enter keyboard shortcuts for modals and practice

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);

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>