refactor: migrate from vanilla JS to Next.js 16 with Tailwind CSS

- Replace vanilla HTML/CSS/JS with Next.js App Router + React components
- Game logic (champion-data, game-engine, classic-mode) moved to lib/
- UI split into modular components (game-board, champion-search, guess-grid, etc.)
- Add Tailwind CSS v4 with CSS variables for theming
- Immutable state updates, fetch deduplication, next/image for CDN images
- champions.json moved from assets/ to public/

web/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+
+:root {
+  --color-bg: #1a1a2e;
+  --color-surface: #16213e;
+  --color-surface-hover: #1a2745;
+  --color-text: #e0e0e0;
+  --color-text-muted: #8a8a9a;
+  --color-correct: #4ecb71;
+  --color-partial: #f4b35e;
+  --color-wrong: #d85b5b;
+  --color-header: #2a2a4a;
+  --color-input-bg: #0f3460;
+  --color-input-border: #533483;
+  --color-accent: #533483;
+  --cell-size: 90px;
+}
+
+body {
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
+  min-height: 100vh;
+}
+
+/* Guess grid layout */
+.guess-row {
+  display: grid;
+  grid-template-columns: 130px repeat(7, var(--cell-size));
+  gap: 4px;
+  margin-bottom: 4px;
+  min-width: fit-content;
+}
+
+.guess-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 8px 4px;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  min-height: 56px;
+  word-break: break-word;
+  animation: cellReveal 0.3s ease forwards;
+  opacity: 0;
+}
+
+.header-row {
+  margin-bottom: 8px;
+}
+
+.header-cell {
+  background: var(--color-header);
+  color: var(--color-text-muted);
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 1;
+  animation: none;
+}
+
+.champion-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-start;
+  padding-left: 8px;
+  background: var(--color-surface);
+}
+
+.cell-correct {
+  background: var(--color-correct);
+  color: #1a1a2e;
+}
+
+.cell-partial {
+  background: var(--color-partial);
+  color: #1a1a2e;
+}
+
+.cell-wrong {
+  background: var(--color-wrong);
+  color: #fff;
+}
+
+@keyframes cellReveal {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  :root {
+    --cell-size: 72px;
+  }
+  .guess-row {
+    grid-template-columns: 100px repeat(7, var(--cell-size));
+  }
+  .guess-cell {
+    font-size: 0.7rem;
+    min-height: 48px;
+    padding: 6px 2px;
+  }
+}
+
+@media (max-width: 480px) {
+  :root {
+    --cell-size: 60px;
+  }
+  .guess-row {
+    grid-template-columns: 80px repeat(7, var(--cell-size));
+  }
+}