diff --git a/docs/css-comparison/01-tailwind.html b/docs/css-comparison/01-tailwind.html
new file mode 100644
index 0000000..4de170e
--- /dev/null
+++ b/docs/css-comparison/01-tailwind.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wizard RPG – Tailwind CSS</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwindcss.config = {
+      theme: {
+        extend: {
+          colors: { wizard: { purple: '#7c3aed', gold: '#f59e0b', dark: '#1e1b4b' } }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="bg-wizard-dark text-gray-100 min-h-screen">
+
+  <!-- Navigation -->
+  <nav class="bg-indigo-900/80 border-b border-indigo-700 px-6 py-3 flex items-center justify-between">
+    <span class="text-xl font-bold text-wizard-gold">🧙 Wizard Academy RPG</span>
+    <div class="flex gap-4 text-sm">
+      <a href="#" class="hover:text-wizard-gold transition">Dashboard</a>
+      <a href="#" class="hover:text-wizard-gold transition">Spells</a>
+      <a href="#" class="hover:text-wizard-gold transition">Battle</a>
+      <a href="#" class="hover:text-wizard-gold transition">Leaderboard</a>
+    </div>
+    <span class="bg-wizard-purple text-white px-3 py-1 rounded-full text-xs">Level 12</span>
+  </nav>
+
+  <!-- Hero -->
+  <section class="text-center py-12 bg-gradient-to-b from-indigo-900 to-wizard-dark">
+    <h1 class="text-4xl font-bold mb-2">Welcome, Archmage!</h1>
+    <p class="text-indigo-300 max-w-xl mx-auto">Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
+    <div class="mt-6 flex justify-center gap-3">
+      <button class="bg-wizard-purple hover:bg-purple-600 text-white px-6 py-2 rounded-lg font-semibold transition">Start Duel</button>
+      <button class="border border-wizard-gold text-wizard-gold hover:bg-wizard-gold hover:text-black px-6 py-2 rounded-lg font-semibold transition">Brew Potion</button>
+    </div>
+  </section>
+
+  <!-- Character Cards -->
+  <section class="max-w-5xl mx-auto py-10 px-4">
+    <h2 class="text-2xl font-bold mb-6">Your Party</h2>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div class="bg-indigo-900/50 border border-indigo-700 rounded-xl p-5">
+        <div class="flex items-center gap-3 mb-3">
+          <div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-xl">🧙</div>
+          <div>
+            <h3 class="font-bold">Eldrin the Wise</h3>
+            <span class="text-xs text-indigo-400">Fire Mage · Lvl 12</span>
+          </div>
+        </div>
+        <div class="space-y-2 text-sm">
+          <div><span class="text-gray-400">HP</span> <div class="bg-gray-700 rounded-full h-2 mt-1"><div class="bg-green-500 h-2 rounded-full" style="width:85%"></div></div></div>
+          <div><span class="text-gray-400">Mana</span> <div class="bg-gray-700 rounded-full h-2 mt-1"><div class="bg-blue-500 h-2 rounded-full" style="width:60%"></div></div></div>
+        </div>
+        <div class="mt-3 flex gap-2">
+          <span class="bg-red-900/50 text-red-300 text-xs px-2 py-0.5 rounded">🔥 Fire</span>
+          <span class="bg-yellow-900/50 text-yellow-300 text-xs px-2 py-0.5 rounded">⚡ Lightning</span>
+        </div>
+      </div>
+      <div class="bg-indigo-900/50 border border-indigo-700 rounded-xl p-5">
+        <div class="flex items-center gap-3 mb-3">
+          <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-xl">🧝</div>
+          <div>
+            <h3 class="font-bold">Lyra Frostweaver</h3>
+            <span class="text-xs text-indigo-400">Ice Sorceress · Lvl 10</span>
+          </div>
+        </div>
+        <div class="space-y-2 text-sm">
+          <div><span class="text-gray-400">HP</span> <div class="bg-gray-700 rounded-full h-2 mt-1"><div class="bg-green-500 h-2 rounded-full" style="width:70%"></div></div></div>
+          <div><span class="text-gray-400">Mana</span> <div class="bg-gray-700 rounded-full h-2 mt-1"><div class="bg-blue-500 h-2 rounded-full" style="width:90%"></div></div></div>
+        </div>
+        <div class="mt-3 flex gap-2">
+          <span class="bg-cyan-900/50 text-cyan-300 text-xs px-2 py-0.5 rounded">❄️ Ice</span>
+          <span class="bg-purple-900/50 text-purple-300 text-xs px-2 py-0.5 rounded">✨ Arcane</span>
+        </div>
+      </div>
+      <div class="bg-indigo-900/50 border border-indigo-700 rounded-xl p-5">
+        <div class="flex items-center gap-3 mb-3">
+          <div class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center text-xl">🧌</div>
+          <div>
+            <h3 class="font-bold">Thorin Earthshaker</h3>
+            <span class="text-xs text-indigo-400">Earth Druid · Lvl 8</span>
+          </div>
+        </div>
+        <div class="space-y-2 text-sm">
+          <div><span class="text-gray-400">HP</span> <div class="bg-gray-700 rounded-full h-2 mt-1"><div class="bg-green-500 h-2 rounded-full" style="width:95%"></div></div></div>
+          <div><span class="text-gray-400">Mana</span> <div class="bg-gray-700 rounded-full h-2 mt-1"><div class="bg-blue-500 h-2 rounded-full" style="width:40%"></div></div></div>
+        </div>
+        <div class="mt-3 flex gap-2">
+          <span class="bg-green-900/50 text-green-300 text-xs px-2 py-0.5 rounded">🌿 Earth</span>
+          <span class="bg-amber-900/50 text-amber-300 text-xs px-2 py-0.5 rounded">🛡️ Defense</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Spell Table -->
+  <section class="max-w-5xl mx-auto py-6 px-4">
+    <h2 class="text-2xl font-bold mb-4">Known Spells</h2>
+    <div class="overflow-x-auto">
+      <table class="w-full text-sm text-left">
+        <thead class="bg-indigo-900/60 text-indigo-300 uppercase text-xs">
+          <tr><th class="px-4 py-3">Spell</th><th class="px-4 py-3">Element</th><th class="px-4 py-3">Power</th><th class="px-4 py-3">Mana Cost</th><th class="px-4 py-3">Action</th></tr>
+        </thead>
+        <tbody class="divide-y divide-indigo-800">
+          <tr class="hover:bg-indigo-900/30"><td class="px-4 py-3">Fireball</td><td class="px-4 py-3">🔥 Fire</td><td class="px-4 py-3">45</td><td class="px-4 py-3">30</td><td class="px-4 py-3"><button class="text-wizard-gold hover:underline text-xs">Cast</button></td></tr>
+          <tr class="hover:bg-indigo-900/30"><td class="px-4 py-3">Frost Nova</td><td class="px-4 py-3">❄️ Ice</td><td class="px-4 py-3">35</td><td class="px-4 py-3">25</td><td class="px-4 py-3"><button class="text-wizard-gold hover:underline text-xs">Cast</button></td></tr>
+          <tr class="hover:bg-indigo-900/30"><td class="px-4 py-3">Lightning Bolt</td><td class="px-4 py-3">⚡ Lightning</td><td class="px-4 py-3">55</td><td class="px-4 py-3">40</td><td class="px-4 py-3"><button class="text-wizard-gold hover:underline text-xs">Cast</button></td></tr>
+          <tr class="hover:bg-indigo-900/30"><td class="px-4 py-3">Earthquake</td><td class="px-4 py-3">🌿 Earth</td><td class="px-4 py-3">60</td><td class="px-4 py-3">50</td><td class="px-4 py-3"><button class="text-wizard-gold hover:underline text-xs">Cast</button></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- Login Form -->
+  <section class="max-w-md mx-auto py-10 px-4">
+    <h2 class="text-2xl font-bold mb-4 text-center">Sign In to Academy</h2>
+    <form class="bg-indigo-900/40 border border-indigo-700 rounded-xl p-6 space-y-4">
+      <div>
+        <label class="block text-sm text-indigo-300 mb-1">Email</label>
+        <input type="email" placeholder="wizard@academy.com" class="w-full bg-indigo-950 border border-indigo-700 rounded-lg px-4 py-2 text-white placeholder-indigo-500 focus:ring-2 focus:ring-wizard-purple focus:outline-none">
+      </div>
+      <div>
+        <label class="block text-sm text-indigo-300 mb-1">Password</label>
+        <input type="password" placeholder="••••••••" class="w-full bg-indigo-950 border border-indigo-700 rounded-lg px-4 py-2 text-white placeholder-indigo-500 focus:ring-2 focus:ring-wizard-purple focus:outline-none">
+      </div>
+      <div class="flex items-center gap-2">
+        <input type="checkbox" class="rounded border-indigo-700 bg-indigo-950 text-wizard-purple">
+        <label class="text-sm text-indigo-300">Remember me</label>
+      </div>
+      <button type="submit" class="w-full bg-wizard-purple hover:bg-purple-600 text-white py-2 rounded-lg font-semibold transition">Enter the Academy</button>
+    </form>
+  </section>
+
+  <!-- Footer -->
+  <footer class="text-center py-6 text-indigo-500 text-sm border-t border-indigo-800">
+    <p>Wizard Academy RPG · Styled with <strong>Tailwind CSS v4</strong> · Utility-first CSS framework</p>
+  </footer>
+</body>
+</html>
diff --git a/docs/css-comparison/02-bootstrap.html b/docs/css-comparison/02-bootstrap.html
new file mode 100644
index 0000000..e451878
--- /dev/null
+++ b/docs/css-comparison/02-bootstrap.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wizard RPG – Bootstrap 5</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <style>
+    body { background: #1a1a2e; color: #e0e0e0; }
+    .navbar { background: #16213e !important; }
+    .card { background: #16213e; border-color: #0f3460; }
+    .table { color: #e0e0e0; }
+    .form-control { background: #0f3460; border-color: #533483; color: #fff; }
+    .form-control::placeholder { color: #888; }
+    .form-control:focus { background: #0f3460; color: #fff; border-color: #e94560; box-shadow: 0 0 0 .25rem rgba(233,69,96,.25); }
+    .btn-wizard { background: #533483; border-color: #533483; color: #fff; }
+    .btn-wizard:hover { background: #e94560; border-color: #e94560; color: #fff; }
+    .btn-outline-gold { border-color: #f0a500; color: #f0a500; }
+    .btn-outline-gold:hover { background: #f0a500; color: #000; }
+    .badge-fire { background: #dc3545; }
+    .badge-ice { background: #0dcaf0; color: #000; }
+    .badge-lightning { background: #ffc107; color: #000; }
+    .badge-earth { background: #198754; }
+    .progress { background: #0f3460; height: 8px; }
+    .text-gold { color: #f0a500 !important; }
+    .hero-section { background: linear-gradient(to bottom, #16213e, #1a1a2e); }
+    .table-dark-custom { --bs-table-bg: #16213e; --bs-table-border-color: #0f3460; }
+  </style>
+</head>
+<body>
+
+  <!-- Navigation -->
+  <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-secondary">
+    <div class="container">
+      <a class="navbar-brand text-gold fw-bold" href="#">🧙 Wizard Academy RPG</a>
+      <div class="navbar-nav ms-auto gap-3">
+        <a class="nav-link" href="#">Dashboard</a>
+        <a class="nav-link" href="#">Spells</a>
+        <a class="nav-link" href="#">Battle</a>
+        <a class="nav-link" href="#">Leaderboard</a>
+      </div>
+      <span class="badge bg-primary ms-3">Level 12</span>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="hero-section text-center py-5">
+    <div class="container">
+      <h1 class="display-4 fw-bold">Welcome, Archmage!</h1>
+      <p class="lead text-secondary mx-auto" style="max-width:600px">Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
+      <div class="mt-4">
+        <button class="btn btn-wizard btn-lg me-2">Start Duel</button>
+        <button class="btn btn-outline-gold btn-lg">Brew Potion</button>
+      </div>
+    </div>
+  </section>
+
+  <!-- Character Cards -->
+  <section class="container py-5">
+    <h2 class="fw-bold mb-4">Your Party</h2>
+    <div class="row g-4">
+      <div class="col-md-4">
+        <div class="card p-4">
+          <div class="d-flex align-items-center gap-3 mb-3">
+            <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center" style="width:48px;height:48px;font-size:1.3rem">🧙</div>
+            <div>
+              <h5 class="mb-0 fw-bold">Eldrin the Wise</h5>
+              <small class="text-secondary">Fire Mage · Lvl 12</small>
+            </div>
+          </div>
+          <div class="mb-2"><small class="text-secondary">HP</small><div class="progress mt-1"><div class="progress-bar bg-success" style="width:85%"></div></div></div>
+          <div class="mb-3"><small class="text-secondary">Mana</small><div class="progress mt-1"><div class="progress-bar bg-info" style="width:60%"></div></div></div>
+          <div><span class="badge badge-fire me-1">🔥 Fire</span><span class="badge badge-lightning">⚡ Lightning</span></div>
+        </div>
+      </div>
+      <div class="col-md-4">
+        <div class="card p-4">
+          <div class="d-flex align-items-center gap-3 mb-3">
+            <div class="rounded-circle bg-info d-flex align-items-center justify-content-center" style="width:48px;height:48px;font-size:1.3rem">🧝</div>
+            <div>
+              <h5 class="mb-0 fw-bold">Lyra Frostweaver</h5>
+              <small class="text-secondary">Ice Sorceress · Lvl 10</small>
+            </div>
+          </div>
+          <div class="mb-2"><small class="text-secondary">HP</small><div class="progress mt-1"><div class="progress-bar bg-success" style="width:70%"></div></div></div>
+          <div class="mb-3"><small class="text-secondary">Mana</small><div class="progress mt-1"><div class="progress-bar bg-info" style="width:90%"></div></div></div>
+          <div><span class="badge badge-ice me-1">❄️ Ice</span><span class="badge bg-secondary">✨ Arcane</span></div>
+        </div>
+      </div>
+      <div class="col-md-4">
+        <div class="card p-4">
+          <div class="d-flex align-items-center gap-3 mb-3">
+            <div class="rounded-circle bg-success d-flex align-items-center justify-content-center" style="width:48px;height:48px;font-size:1.3rem">🧌</div>
+            <div>
+              <h5 class="mb-0 fw-bold">Thorin Earthshaker</h5>
+              <small class="text-secondary">Earth Druid · Lvl 8</small>
+            </div>
+          </div>
+          <div class="mb-2"><small class="text-secondary">HP</small><div class="progress mt-1"><div class="progress-bar bg-success" style="width:95%"></div></div></div>
+          <div class="mb-3"><small class="text-secondary">Mana</small><div class="progress mt-1"><div class="progress-bar bg-info" style="width:40%"></div></div></div>
+          <div><span class="badge badge-earth me-1">🌿 Earth</span><span class="badge bg-warning text-dark">🛡️ Defense</span></div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Spell Table -->
+  <section class="container py-3">
+    <h2 class="fw-bold mb-4">Known Spells</h2>
+    <div class="table-responsive">
+      <table class="table table-dark-custom table-hover">
+        <thead><tr><th>Spell</th><th>Element</th><th>Power</th><th>Mana Cost</th><th>Action</th></tr></thead>
+        <tbody>
+          <tr><td>Fireball</td><td>🔥 Fire</td><td>45</td><td>30</td><td><button class="btn btn-sm btn-outline-gold">Cast</button></td></tr>
+          <tr><td>Frost Nova</td><td>❄️ Ice</td><td>35</td><td>25</td><td><button class="btn btn-sm btn-outline-gold">Cast</button></td></tr>
+          <tr><td>Lightning Bolt</td><td>⚡ Lightning</td><td>55</td><td>40</td><td><button class="btn btn-sm btn-outline-gold">Cast</button></td></tr>
+          <tr><td>Earthquake</td><td>🌿 Earth</td><td>60</td><td>50</td><td><button class="btn btn-sm btn-outline-gold">Cast</button></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- Login Form -->
+  <section class="container py-5" style="max-width:450px">
+    <h2 class="fw-bold mb-4 text-center">Sign In to Academy</h2>
+    <div class="card p-4">
+      <form>
+        <div class="mb-3">
+          <label class="form-label text-secondary">Email</label>
+          <input type="email" class="form-control" placeholder="wizard@academy.com">
+        </div>
+        <div class="mb-3">
+          <label class="form-label text-secondary">Password</label>
+          <input type="password" class="form-control" placeholder="••••••••">
+        </div>
+        <div class="form-check mb-3">
+          <input type="checkbox" class="form-check-input">
+          <label class="form-check-label text-secondary">Remember me</label>
+        </div>
+        <button type="submit" class="btn btn-wizard w-100">Enter the Academy</button>
+      </form>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="text-center py-4 text-secondary border-top border-secondary">
+    <p>Wizard Academy RPG · Styled with <strong>Bootstrap 5</strong> · The most popular CSS framework</p>
+  </footer>
+
+</body>
+</html>
diff --git a/docs/css-comparison/03-bulma.html b/docs/css-comparison/03-bulma.html
new file mode 100644
index 0000000..474e0ca
--- /dev/null
+++ b/docs/css-comparison/03-bulma.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wizard RPG – Bulma</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
+  <style>
+    :root {
+      --bulma-body-background-color: #1a1a2e;
+      --bulma-body-color: #e0e0e0;
+      --bulma-scheme-main: #1a1a2e;
+    }
+    body { background: #1a1a2e; color: #e0e0e0; }
+    .navbar { background: #16213e !important; }
+    .navbar-item, .navbar-link { color: #ccc !important; }
+    .navbar-item:hover { color: #f0a500 !important; background: transparent !important; }
+    .box { background: #16213e; border: 1px solid #0f3460; }
+    .hero-body { background: linear-gradient(to bottom, #16213e, #1a1a2e); }
+    .title, .subtitle { color: #e0e0e0 !important; }
+    .input, .select select { background: #0f3460 !important; border-color: #533483 !important; color: #fff !important; }
+    .input::placeholder { color: #888 !important; }
+    .label { color: #aaa !important; }
+    .table { background: #16213e !important; color: #e0e0e0 !important; }
+    .table thead td, .table thead th { color: #aaa !important; border-color: #0f3460 !important; }
+    .table td, .table th { border-color: #0f3460 !important; }
+    .progress { background: #0f3460; }
+    .text-gold { color: #f0a500; }
+    .footer { background: #16213e !important; }
+  </style>
+</head>
+<body>
+
+  <!-- Navigation -->
+  <nav class="navbar is-dark" role="navigation">
+    <div class="navbar-brand">
+      <a class="navbar-item text-gold" href="#"><strong>🧙 Wizard Academy RPG</strong></a>
+    </div>
+    <div class="navbar-menu">
+      <div class="navbar-end">
+        <a class="navbar-item" href="#">Dashboard</a>
+        <a class="navbar-item" href="#">Spells</a>
+        <a class="navbar-item" href="#">Battle</a>
+        <a class="navbar-item" href="#">Leaderboard</a>
+        <div class="navbar-item"><span class="tag is-primary is-rounded">Level 12</span></div>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="hero is-medium">
+    <div class="hero-body has-text-centered">
+      <p class="title is-2">Welcome, Archmage!</p>
+      <p class="subtitle is-5" style="color:#888 !important; max-width:600px; margin:0 auto;">Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
+      <div class="buttons is-centered mt-4">
+        <button class="button is-primary is-medium">Start Duel</button>
+        <button class="button is-outlined is-warning is-medium">Brew Potion</button>
+      </div>
+    </div>
+  </section>
+
+  <!-- Character Cards -->
+  <section class="section">
+    <div class="container">
+      <h2 class="title is-3">Your Party</h2>
+      <div class="columns">
+        <div class="column is-4">
+          <div class="box">
+            <div class="media">
+              <div class="media-left">
+                <figure class="image is-48x48"><div style="width:48px;height:48px;border-radius:50%;background:#6366f1;display:flex;align-items:center;justify-content:center;font-size:1.3rem">🧙</div></figure>
+              </div>
+              <div class="media-content">
+                <p class="title is-5">Eldrin the Wise</p>
+                <p class="subtitle is-7" style="color:#888 !important">Fire Mage · Lvl 12</p>
+              </div>
+            </div>
+            <div class="content">
+              <p style="color:#888;font-size:0.85rem">HP</p>
+              <progress class="progress is-success is-small" value="85" max="100">85%</progress>
+              <p style="color:#888;font-size:0.85rem">Mana</p>
+              <progress class="progress is-info is-small" value="60" max="100">60%</progress>
+              <div class="tags mt-2">
+                <span class="tag is-danger is-light">🔥 Fire</span>
+                <span class="tag is-warning is-light">⚡ Lightning</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="column is-4">
+          <div class="box">
+            <div class="media">
+              <div class="media-left">
+                <figure class="image is-48x48"><div style="width:48px;height:48px;border-radius:50%;background:#0ea5e9;display:flex;align-items:center;justify-content:center;font-size:1.3rem">🧝</div></figure>
+              </div>
+              <div class="media-content">
+                <p class="title is-5">Lyra Frostweaver</p>
+                <p class="subtitle is-7" style="color:#888 !important">Ice Sorceress · Lvl 10</p>
+              </div>
+            </div>
+            <div class="content">
+              <p style="color:#888;font-size:0.85rem">HP</p>
+              <progress class="progress is-success is-small" value="70" max="100">70%</progress>
+              <p style="color:#888;font-size:0.85rem">Mana</p>
+              <progress class="progress is-info is-small" value="90" max="100">90%</progress>
+              <div class="tags mt-2">
+                <span class="tag is-info is-light">❄️ Ice</span>
+                <span class="tag is-link is-light">✨ Arcane</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="column is-4">
+          <div class="box">
+            <div class="media">
+              <div class="media-left">
+                <figure class="image is-48x48"><div style="width:48px;height:48px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;font-size:1.3rem">🧌</div></figure>
+              </div>
+              <div class="media-content">
+                <p class="title is-5">Thorin Earthshaker</p>
+                <p class="subtitle is-7" style="color:#888 !important">Earth Druid · Lvl 8</p>
+              </div>
+            </div>
+            <div class="content">
+              <p style="color:#888;font-size:0.85rem">HP</p>
+              <progress class="progress is-success is-small" value="95" max="100">95%</progress>
+              <p style="color:#888;font-size:0.85rem">Mana</p>
+              <progress class="progress is-info is-small" value="40" max="100">40%</progress>
+              <div class="tags mt-2">
+                <span class="tag is-success is-light">🌿 Earth</span>
+                <span class="tag is-warning is-light">🛡️ Defense</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Spell Table -->
+  <section class="section pt-0">
+    <div class="container">
+      <h2 class="title is-3">Known Spells</h2>
+      <div class="table-container">
+        <table class="table is-fullwidth is-hoverable">
+          <thead><tr><th>Spell</th><th>Element</th><th>Power</th><th>Mana Cost</th><th>Action</th></tr></thead>
+          <tbody>
+            <tr><td>Fireball</td><td>🔥 Fire</td><td>45</td><td>30</td><td><button class="button is-small is-warning is-outlined">Cast</button></td></tr>
+            <tr><td>Frost Nova</td><td>❄️ Ice</td><td>35</td><td>25</td><td><button class="button is-small is-warning is-outlined">Cast</button></td></tr>
+            <tr><td>Lightning Bolt</td><td>⚡ Lightning</td><td>55</td><td>40</td><td><button class="button is-small is-warning is-outlined">Cast</button></td></tr>
+            <tr><td>Earthquake</td><td>🌿 Earth</td><td>60</td><td>50</td><td><button class="button is-small is-warning is-outlined">Cast</button></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </section>
+
+  <!-- Login Form -->
+  <section class="section">
+    <div class="container" style="max-width:450px">
+      <h2 class="title is-3 has-text-centered">Sign In to Academy</h2>
+      <div class="box">
+        <div class="field">
+          <label class="label">Email</label>
+          <div class="control"><input class="input" type="email" placeholder="wizard@academy.com"></div>
+        </div>
+        <div class="field">
+          <label class="label">Password</label>
+          <div class="control"><input class="input" type="password" placeholder="••••••••"></div>
+        </div>
+        <div class="field">
+          <label class="checkbox"><input type="checkbox"> <span style="color:#888">Remember me</span></label>
+        </div>
+        <button class="button is-primary is-fullwidth">Enter the Academy</button>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="footer has-text-centered" style="color:#888">
+    <p>Wizard Academy RPG · Styled with <strong style="color:#ccc">Bulma</strong> · Modern CSS framework based on Flexbox</p>
+  </footer>
+
+</body>
+</html>
diff --git a/docs/css-comparison/04-daisyui.html b/docs/css-comparison/04-daisyui.html
new file mode 100644
index 0000000..f2c6777
--- /dev/null
+++ b/docs/css-comparison/04-daisyui.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="night">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wizard RPG – DaisyUI</title>
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.24/dist/full.min.css" rel="stylesheet" type="text/css">
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="min-h-screen bg-base-100">
+
+  <!-- Navigation -->
+  <div class="navbar bg-base-200 border-b border-base-300">
+    <div class="flex-1">
+      <a class="btn btn-ghost text-xl text-warning">🧙 Wizard Academy RPG</a>
+    </div>
+    <div class="flex-none gap-2">
+      <ul class="menu menu-horizontal px-1">
+        <li><a>Dashboard</a></li>
+        <li><a>Spells</a></li>
+        <li><a>Battle</a></li>
+        <li><a>Leaderboard</a></li>
+      </ul>
+      <div class="badge badge-primary">Level 12</div>
+    </div>
+  </div>
+
+  <!-- Hero -->
+  <div class="hero bg-gradient-to-b from-base-200 to-base-100 py-16">
+    <div class="hero-content text-center">
+      <div class="max-w-xl">
+        <h1 class="text-4xl font-bold">Welcome, Archmage!</h1>
+        <p class="py-4 opacity-60">Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
+        <div class="flex gap-3 justify-center">
+          <button class="btn btn-primary">Start Duel</button>
+          <button class="btn btn-outline btn-warning">Brew Potion</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Character Cards -->
+  <section class="max-w-5xl mx-auto py-10 px-4">
+    <h2 class="text-2xl font-bold mb-6">Your Party</h2>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div class="card bg-base-200 shadow-xl">
+        <div class="card-body">
+          <div class="flex items-center gap-3">
+            <div class="avatar placeholder">
+              <div class="bg-primary text-primary-content w-12 rounded-full"><span class="text-xl">🧙</span></div>
+            </div>
+            <div>
+              <h3 class="card-title text-base">Eldrin the Wise</h3>
+              <p class="text-xs opacity-50">Fire Mage · Lvl 12</p>
+            </div>
+          </div>
+          <div class="mt-3 space-y-2">
+            <div><span class="text-xs opacity-50">HP</span><progress class="progress progress-success w-full" value="85" max="100"></progress></div>
+            <div><span class="text-xs opacity-50">Mana</span><progress class="progress progress-info w-full" value="60" max="100"></progress></div>
+          </div>
+          <div class="card-actions mt-2">
+            <div class="badge badge-error badge-outline">🔥 Fire</div>
+            <div class="badge badge-warning badge-outline">⚡ Lightning</div>
+          </div>
+        </div>
+      </div>
+      <div class="card bg-base-200 shadow-xl">
+        <div class="card-body">
+          <div class="flex items-center gap-3">
+            <div class="avatar placeholder">
+              <div class="bg-info text-info-content w-12 rounded-full"><span class="text-xl">🧝</span></div>
+            </div>
+            <div>
+              <h3 class="card-title text-base">Lyra Frostweaver</h3>
+              <p class="text-xs opacity-50">Ice Sorceress · Lvl 10</p>
+            </div>
+          </div>
+          <div class="mt-3 space-y-2">
+            <div><span class="text-xs opacity-50">HP</span><progress class="progress progress-success w-full" value="70" max="100"></progress></div>
+            <div><span class="text-xs opacity-50">Mana</span><progress class="progress progress-info w-full" value="90" max="100"></progress></div>
+          </div>
+          <div class="card-actions mt-2">
+            <div class="badge badge-info badge-outline">❄️ Ice</div>
+            <div class="badge badge-secondary badge-outline">✨ Arcane</div>
+          </div>
+        </div>
+      </div>
+      <div class="card bg-base-200 shadow-xl">
+        <div class="card-body">
+          <div class="flex items-center gap-3">
+            <div class="avatar placeholder">
+              <div class="bg-success text-success-content w-12 rounded-full"><span class="text-xl">🧌</span></div>
+            </div>
+            <div>
+              <h3 class="card-title text-base">Thorin Earthshaker</h3>
+              <p class="text-xs opacity-50">Earth Druid · Lvl 8</p>
+            </div>
+          </div>
+          <div class="mt-3 space-y-2">
+            <div><span class="text-xs opacity-50">HP</span><progress class="progress progress-success w-full" value="95" max="100"></progress></div>
+            <div><span class="text-xs opacity-50">Mana</span><progress class="progress progress-info w-full" value="40" max="100"></progress></div>
+          </div>
+          <div class="card-actions mt-2">
+            <div class="badge badge-success badge-outline">🌿 Earth</div>
+            <div class="badge badge-warning badge-outline">🛡️ Defense</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Spell Table -->
+  <section class="max-w-5xl mx-auto py-4 px-4">
+    <h2 class="text-2xl font-bold mb-4">Known Spells</h2>
+    <div class="overflow-x-auto">
+      <table class="table table-zebra">
+        <thead><tr><th>Spell</th><th>Element</th><th>Power</th><th>Mana Cost</th><th>Action</th></tr></thead>
+        <tbody>
+          <tr><td>Fireball</td><td>🔥 Fire</td><td>45</td><td>30</td><td><button class="btn btn-xs btn-outline btn-warning">Cast</button></td></tr>
+          <tr><td>Frost Nova</td><td>❄️ Ice</td><td>35</td><td>25</td><td><button class="btn btn-xs btn-outline btn-warning">Cast</button></td></tr>
+          <tr><td>Lightning Bolt</td><td>⚡ Lightning</td><td>55</td><td>40</td><td><button class="btn btn-xs btn-outline btn-warning">Cast</button></td></tr>
+          <tr><td>Earthquake</td><td>🌿 Earth</td><td>60</td><td>50</td><td><button class="btn btn-xs btn-outline btn-warning">Cast</button></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- Login Form -->
+  <section class="max-w-md mx-auto py-10 px-4">
+    <h2 class="text-2xl font-bold mb-4 text-center">Sign In to Academy</h2>
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <div class="form-control">
+          <label class="label"><span class="label-text">Email</span></label>
+          <input type="email" placeholder="wizard@academy.com" class="input input-bordered">
+        </div>
+        <div class="form-control">
+          <label class="label"><span class="label-text">Password</span></label>
+          <input type="password" placeholder="••••••••" class="input input-bordered">
+        </div>
+        <div class="form-control">
+          <label class="label cursor-pointer justify-start gap-2">
+            <input type="checkbox" class="checkbox checkbox-sm">
+            <span class="label-text">Remember me</span>
+          </label>
+        </div>
+        <button class="btn btn-primary w-full mt-2">Enter the Academy</button>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="footer footer-center py-6 bg-base-200 text-base-content border-t border-base-300">
+    <p class="opacity-50">Wizard Academy RPG · Styled with <strong>DaisyUI 4</strong> · Tailwind CSS component library</p>
+  </footer>
+
+</body>
+</html>
diff --git a/docs/css-comparison/05-pico.html b/docs/css-comparison/05-pico.html
new file mode 100644
index 0000000..0a358eb
--- /dev/null
+++ b/docs/css-comparison/05-pico.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wizard RPG – Pico CSS</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.violet.min.css">
+  <style>
+    :root { --pico-border-radius: 0.75rem; }
+    body { padding: 0; }
+    nav { background: var(--pico-card-background-color); border-bottom: 1px solid var(--pico-muted-border-color); padding: 0.5rem 1rem; }
+    .hero { text-align: center; padding: 3rem 1rem; }
+    .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
+    .character-card { padding: 1.25rem; }
+    .avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
+    .avatar-purple { background: #7c3aed; }
+    .avatar-blue { background: #0ea5e9; }
+    .avatar-green { background: #22c55e; }
+    .flex-row { display: flex; align-items: center; gap: 0.75rem; }
+    .tag { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; margin-right: 0.25rem; }
+    .tag-fire { background: rgba(220,38,38,0.2); color: #fca5a5; }
+    .tag-ice { background: rgba(14,165,233,0.2); color: #7dd3fc; }
+    .tag-lightning { background: rgba(234,179,8,0.2); color: #fde68a; }
+    .tag-earth { background: rgba(34,197,94,0.2); color: #86efac; }
+    .tag-arcane { background: rgba(168,85,247,0.2); color: #d8b4fe; }
+    .tag-defense { background: rgba(245,158,11,0.2); color: #fcd34d; }
+    .text-gold { color: #f0a500; }
+    .text-muted { color: var(--pico-muted-color); }
+    .text-center { text-align: center; }
+    progress { margin: 0.25rem 0; height: 0.5rem; }
+    footer { text-align: center; padding: 1.5rem; border-top: 1px solid var(--pico-muted-border-color); }
+    .form-section { max-width: 450px; margin: 0 auto; }
+  </style>
+</head>
+<body>
+
+  <!-- Navigation -->
+  <nav>
+    <ul>
+      <li><strong class="text-gold">🧙 Wizard Academy RPG</strong></li>
+    </ul>
+    <ul>
+      <li><a href="#">Dashboard</a></li>
+      <li><a href="#">Spells</a></li>
+      <li><a href="#">Battle</a></li>
+      <li><a href="#">Leaderboard</a></li>
+      <li><kbd>Level 12</kbd></li>
+    </ul>
+  </nav>
+
+  <main class="container">
+
+    <!-- Hero -->
+    <section class="hero">
+      <h1>Welcome, Archmage!</h1>
+      <p class="text-muted">Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
+      <div>
+        <button>Start Duel</button>
+        <button class="outline">Brew Potion</button>
+      </div>
+    </section>
+
+    <!-- Character Cards -->
+    <section>
+      <h2>Your Party</h2>
+      <div class="grid-3">
+        <article class="character-card">
+          <div class="flex-row">
+            <div class="avatar avatar-purple">🧙</div>
+            <div><strong>Eldrin the Wise</strong><br><small class="text-muted">Fire Mage · Lvl 12</small></div>
+          </div>
+          <p class="text-muted" style="margin-top:0.75rem;margin-bottom:0.1rem;font-size:0.85rem">HP</p>
+          <progress value="85" max="100"></progress>
+          <p class="text-muted" style="margin-bottom:0.1rem;font-size:0.85rem">Mana</p>
+          <progress value="60" max="100"></progress>
+          <div style="margin-top:0.5rem"><span class="tag tag-fire">🔥 Fire</span><span class="tag tag-lightning">⚡ Lightning</span></div>
+        </article>
+        <article class="character-card">
+          <div class="flex-row">
+            <div class="avatar avatar-blue">🧝</div>
+            <div><strong>Lyra Frostweaver</strong><br><small class="text-muted">Ice Sorceress · Lvl 10</small></div>
+          </div>
+          <p class="text-muted" style="margin-top:0.75rem;margin-bottom:0.1rem;font-size:0.85rem">HP</p>
+          <progress value="70" max="100"></progress>
+          <p class="text-muted" style="margin-bottom:0.1rem;font-size:0.85rem">Mana</p>
+          <progress value="90" max="100"></progress>
+          <div style="margin-top:0.5rem"><span class="tag tag-ice">❄️ Ice</span><span class="tag tag-arcane">✨ Arcane</span></div>
+        </article>
+        <article class="character-card">
+          <div class="flex-row">
+            <div class="avatar avatar-green">🧌</div>
+            <div><strong>Thorin Earthshaker</strong><br><small class="text-muted">Earth Druid · Lvl 8</small></div>
+          </div>
+          <p class="text-muted" style="margin-top:0.75rem;margin-bottom:0.1rem;font-size:0.85rem">HP</p>
+          <progress value="95" max="100"></progress>
+          <p class="text-muted" style="margin-bottom:0.1rem;font-size:0.85rem">Mana</p>
+          <progress value="40" max="100"></progress>
+          <div style="margin-top:0.5rem"><span class="tag tag-earth">🌿 Earth</span><span class="tag tag-defense">🛡️ Defense</span></div>
+        </article>
+      </div>
+    </section>
+
+    <!-- Spell Table -->
+    <section>
+      <h2>Known Spells</h2>
+      <div class="overflow-auto">
+        <table>
+          <thead><tr><th>Spell</th><th>Element</th><th>Power</th><th>Mana Cost</th><th>Action</th></tr></thead>
+          <tbody>
+            <tr><td>Fireball</td><td>🔥 Fire</td><td>45</td><td>30</td><td><a href="#" role="button" class="outline secondary" style="padding:0.25rem 0.75rem;font-size:0.8rem">Cast</a></td></tr>
+            <tr><td>Frost Nova</td><td>❄️ Ice</td><td>35</td><td>25</td><td><a href="#" role="button" class="outline secondary" style="padding:0.25rem 0.75rem;font-size:0.8rem">Cast</a></td></tr>
+            <tr><td>Lightning Bolt</td><td>⚡ Lightning</td><td>55</td><td>40</td><td><a href="#" role="button" class="outline secondary" style="padding:0.25rem 0.75rem;font-size:0.8rem">Cast</a></td></tr>
+            <tr><td>Earthquake</td><td>🌿 Earth</td><td>60</td><td>50</td><td><a href="#" role="button" class="outline secondary" style="padding:0.25rem 0.75rem;font-size:0.8rem">Cast</a></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- Login Form -->
+    <section class="form-section">
+      <h2 class="text-center">Sign In to Academy</h2>
+      <article>
+        <form>
+          <label>Email
+            <input type="email" placeholder="wizard@academy.com">
+          </label>
+          <label>Password
+            <input type="password" placeholder="••••••••">
+          </label>
+          <label>
+            <input type="checkbox" role="switch"> Remember me
+          </label>
+          <button type="submit">Enter the Academy</button>
+        </form>
+      </article>
+    </section>
+
+  </main>
+
+  <!-- Footer -->
+  <footer>
+    <p class="text-muted">Wizard Academy RPG · Styled with <strong>Pico CSS v2</strong> · Minimal, semantic, classless-first CSS</p>
+  </footer>
+
+</body>
+</html>
diff --git a/docs/css-comparison/06-nes-css.html b/docs/css-comparison/06-nes-css.html
new file mode 100644
index 0000000..b8f1af0
--- /dev/null
+++ b/docs/css-comparison/06-nes-css.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wizard RPG – NES.css (Retro 8-bit)</title>
+  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+  <link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet">
+  <style>
+    * { font-family: 'Press Start 2P', cursive; }
+    body { background: #212529; color: #e0e0e0; padding: 0; margin: 0; font-size: 12px; }
+    .nes-container { background: #2d2d44; border-color: #5a5a8a; color: #e0e0e0; }
+    .nes-container.is-dark { background: #1a1a2e; }
+    .nes-container.with-title > .title { background: #212529; color: #f0a500; }
+    nav { background: #1a1a2e; padding: 16px 24px; border-bottom: 4px solid #5a5a8a; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
+    nav a { color: #ccc; text-decoration: none; font-size: 10px; margin: 0 8px; }
+    nav a:hover { color: #f0a500; }
+    .text-gold { color: #f0a500; }
+    .hero { text-align: center; padding: 40px 20px; background: linear-gradient(to bottom, #1a1a2e, #212529); }
+    .hero h1 { font-size: 20px; margin-bottom: 12px; }
+    .hero p { font-size: 10px; color: #888; max-width: 500px; margin: 0 auto 20px; line-height: 1.8; }
+    .main-content { max-width: 900px; margin: 0 auto; padding: 20px; }
+    .party-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
+    .avatar-circle { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 3px solid #5a5a8a; }
+    .flex-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+    .stat-label { font-size: 8px; color: #888; margin-bottom: 2px; }
+    .nes-progress { height: 16px; margin-bottom: 8px; }
+    .spell-tag { display: inline-block; font-size: 8px; margin-right: 4px; padding: 2px 6px; border: 2px solid; }
+    .spell-tag.fire { border-color: #dc3545; color: #fca5a5; }
+    .spell-tag.ice { border-color: #0dcaf0; color: #7dd3fc; }
+    .spell-tag.lightning { border-color: #ffc107; color: #fde68a; }
+    .spell-tag.earth { border-color: #198754; color: #86efac; }
+    .spell-tag.arcane { border-color: #a855f7; color: #d8b4fe; }
+    .spell-tag.defense { border-color: #f59e0b; color: #fcd34d; }
+    table { width: 100%; border-collapse: collapse; font-size: 10px; margin-bottom: 16px; }
+    th, td { padding: 8px 12px; text-align: left; border-bottom: 2px solid #5a5a8a; }
+    th { color: #888; font-size: 8px; text-transform: uppercase; }
+    .form-section { max-width: 450px; margin: 0 auto; }
+    input[type="email"], input[type="password"] { background: #1a1a2e; border: 3px solid #5a5a8a; color: #fff; padding: 8px; width: 100%; box-sizing: border-box; font-family: 'Press Start 2P', cursive; font-size: 10px; margin-bottom: 12px; }
+    input[type="email"]::placeholder, input[type="password"]::placeholder { color: #666; }
+    label.form-label { font-size: 9px; color: #888; display: block; margin-bottom: 4px; }
+    footer { text-align: center; padding: 20px; border-top: 4px solid #5a5a8a; font-size: 9px; color: #888; }
+  </style>
+</head>
+<body>
+
+  <!-- Navigation -->
+  <nav>
+    <span class="text-gold" style="font-size:14px">🧙 Wizard Academy</span>
+    <div>
+      <a href="#">Dashboard</a>
+      <a href="#">Spells</a>
+      <a href="#">Battle</a>
+      <a href="#">Leaderboard</a>
+      <span class="nes-badge" style="margin-left:8px"><span class="is-primary" style="font-size:8px">LVL 12</span></span>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="hero">
+    <i class="nes-icon is-large star"></i>
+    <h1>Welcome, Archmage!</h1>
+    <p>Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
+    <div>
+      <button type="button" class="nes-btn is-primary">Start Duel</button>
+      <button type="button" class="nes-btn is-warning">Brew Potion</button>
+    </div>
+  </section>
+
+  <!-- Main Content -->
+  <div class="main-content">
+
+    <!-- Character Cards -->
+    <section>
+      <h2 style="font-size:14px; margin-bottom:16px;">Your Party</h2>
+      <div class="party-grid">
+        <div class="nes-container is-dark">
+          <div class="flex-row">
+            <div class="avatar-circle">🧙</div>
+            <div><strong>Eldrin the Wise</strong><br><span style="font-size:8px;color:#888">Fire Mage · Lvl 12</span></div>
+          </div>
+          <p class="stat-label">HP</p>
+          <progress class="nes-progress is-success" value="85" max="100"></progress>
+          <p class="stat-label">Mana</p>
+          <progress class="nes-progress is-primary" value="60" max="100"></progress>
+          <div><span class="spell-tag fire">🔥 Fire</span><span class="spell-tag lightning">⚡ Lightning</span></div>
+        </div>
+        <div class="nes-container is-dark">
+          <div class="flex-row">
+            <div class="avatar-circle">🧝</div>
+            <div><strong>Lyra Frostweaver</strong><br><span style="font-size:8px;color:#888">Ice Sorceress · Lvl 10</span></div>
+          </div>
+          <p class="stat-label">HP</p>
+          <progress class="nes-progress is-success" value="70" max="100"></progress>
+          <p class="stat-label">Mana</p>
+          <progress class="nes-progress is-primary" value="90" max="100"></progress>
+          <div><span class="spell-tag ice">❄️ Ice</span><span class="spell-tag arcane">✨ Arcane</span></div>
+        </div>
+        <div class="nes-container is-dark">
+          <div class="flex-row">
+            <div class="avatar-circle">🧌</div>
+            <div><strong>Thorin Earthshaker</strong><br><span style="font-size:8px;color:#888">Earth Druid · Lvl 8</span></div>
+          </div>
+          <p class="stat-label">HP</p>
+          <progress class="nes-progress is-success" value="95" max="100"></progress>
+          <p class="stat-label">Mana</p>
+          <progress class="nes-progress is-primary" value="40" max="100"></progress>
+          <div><span class="spell-tag earth">🌿 Earth</span><span class="spell-tag defense">🛡️ Defense</span></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Spell Table -->
+    <section>
+      <h2 style="font-size:14px; margin-bottom:16px;">Known Spells</h2>
+      <div class="nes-container is-dark" style="overflow-x:auto">
+        <table>
+          <thead><tr><th>Spell</th><th>Element</th><th>Power</th><th>Mana</th><th>Action</th></tr></thead>
+          <tbody>
+            <tr><td>Fireball</td><td>🔥 Fire</td><td>45</td><td>30</td><td><button class="nes-btn is-warning" style="font-size:8px;padding:2px 8px">Cast</button></td></tr>
+            <tr><td>Frost Nova</td><td>❄️ Ice</td><td>35</td><td>25</td><td><button class="nes-btn is-warning" style="font-size:8px;padding:2px 8px">Cast</button></td></tr>
+            <tr><td>Lightning Bolt</td><td>⚡ Zap</td><td>55</td><td>40</td><td><button class="nes-btn is-warning" style="font-size:8px;padding:2px 8px">Cast</button></td></tr>
+            <tr><td>Earthquake</td><td>🌿 Earth</td><td>60</td><td>50</td><td><button class="nes-btn is-warning" style="font-size:8px;padding:2px 8px">Cast</button></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- Login Form -->
+    <section class="form-section" style="margin-top:24px">
+      <h2 style="font-size:14px; margin-bottom:16px; text-align:center;">Sign In to Academy</h2>
+      <div class="nes-container is-dark">
+        <form>
+          <label class="form-label">Email</label>
+          <input type="email" placeholder="wizard@academy.com">
+          <label class="form-label">Password</label>
+          <input type="password" placeholder="********">
+          <label style="font-size:9px;color:#888">
+            <input type="checkbox" class="nes-checkbox is-dark" checked><span>Remember me</span>
+          </label>
+          <br><br>
+          <button type="submit" class="nes-btn is-primary" style="width:100%">Enter the Academy</button>
+        </form>
+      </div>
+    </section>
+
+  </div>
+
+  <!-- Footer -->
+  <footer>
+    <p>Wizard Academy RPG · Styled with <strong class="text-gold">NES.css</strong> · Retro 8-bit CSS framework · Perfect for RPG games!</p>
+  </footer>
+
+</body>
+</html>
diff --git a/docs/css-comparison/07-water-css.html b/docs/css-comparison/07-water-css.html
new file mode 100644
index 0000000..ad67c7f
--- /dev/null
+++ b/docs/css-comparison/07-water-css.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wizard RPG – Water.css (Classless)</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">
+  <style>
+    body { max-width: 900px; margin: 0 auto; padding: 0 1rem; }
+    .hero { text-align: center; padding: 2rem 0; border-bottom: 1px solid var(--border); }
+    .party-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
+    .card { border: 1px solid var(--border); border-radius: 6px; padding: 1rem; }
+    .flex-row { display: flex; align-items: center; gap: 0.75rem; }
+    .avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
+    .avatar-purple { background: #7c3aed; }
+    .avatar-blue { background: #0ea5e9; }
+    .avatar-green { background: #22c55e; }
+    .tag { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.75rem; margin-right: 0.25rem; }
+    .tag-fire { background: rgba(220,38,38,0.2); color: #fca5a5; }
+    .tag-ice { background: rgba(14,165,233,0.2); color: #7dd3fc; }
+    .tag-lightning { background: rgba(234,179,8,0.2); color: #fde68a; }
+    .tag-earth { background: rgba(34,197,94,0.2); color: #86efac; }
+    .tag-arcane { background: rgba(168,85,247,0.2); color: #d8b4fe; }
+    .tag-defense { background: rgba(245,158,11,0.2); color: #fcd34d; }
+    .btn-group { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
+    .btn-outline { background: transparent; border: 2px solid #f0a500; color: #f0a500; }
+    progress { width: 100%; height: 6px; margin: 0.25rem 0; }
+    small { opacity: 0.6; }
+    .form-section { max-width: 400px; margin: 2rem auto; }
+    .form-section .card { padding: 1.5rem; }
+    footer { text-align: center; margin-top: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--border); opacity: 0.7; font-size: 0.85rem; }
+    nav { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 0.5rem; }
+    nav a { margin: 0 0.5rem; text-decoration: none; font-size: 0.9rem; }
+    .text-gold { color: #f0a500; }
+    .badge { display: inline-block; background: var(--button-base); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
+  </style>
+</head>
+<body>
+
+  <!-- Navigation -->
+  <nav>
+    <strong class="text-gold">🧙 Wizard Academy RPG</strong>
+    <div>
+      <a href="#">Dashboard</a>
+      <a href="#">Spells</a>
+      <a href="#">Battle</a>
+      <a href="#">Leaderboard</a>
+      <span class="badge">Level 12</span>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="hero">
+    <h1>Welcome, Archmage!</h1>
+    <p>Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
+    <div class="btn-group">
+      <button>Start Duel</button>
+      <button class="btn-outline">Brew Potion</button>
+    </div>
+  </section>
+
+  <!-- Character Cards -->
+  <section>
+    <h2>Your Party</h2>
+    <div class="party-grid">
+      <div class="card">
+        <div class="flex-row">
+          <div class="avatar avatar-purple">🧙</div>
+          <div><strong>Eldrin the Wise</strong><br><small>Fire Mage · Lvl 12</small></div>
+        </div>
+        <p><small>HP</small></p>
+        <progress value="85" max="100"></progress>
+        <p><small>Mana</small></p>
+        <progress value="60" max="100"></progress>
+        <div style="margin-top:0.5rem"><span class="tag tag-fire">🔥 Fire</span><span class="tag tag-lightning">⚡ Lightning</span></div>
+      </div>
+      <div class="card">
+        <div class="flex-row">
+          <div class="avatar avatar-blue">🧝</div>
+          <div><strong>Lyra Frostweaver</strong><br><small>Ice Sorceress · Lvl 10</small></div>
+        </div>
+        <p><small>HP</small></p>
+        <progress value="70" max="100"></progress>
+        <p><small>Mana</small></p>
+        <progress value="90" max="100"></progress>
+        <div style="margin-top:0.5rem"><span class="tag tag-ice">❄️ Ice</span><span class="tag tag-arcane">✨ Arcane</span></div>
+      </div>
+      <div class="card">
+        <div class="flex-row">
+          <div class="avatar avatar-green">🧌</div>
+          <div><strong>Thorin Earthshaker</strong><br><small>Earth Druid · Lvl 8</small></div>
+        </div>
+        <p><small>HP</small></p>
+        <progress value="95" max="100"></progress>
+        <p><small>Mana</small></p>
+        <progress value="40" max="100"></progress>
+        <div style="margin-top:0.5rem"><span class="tag tag-earth">🌿 Earth</span><span class="tag tag-defense">🛡️ Defense</span></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Spell Table -->
+  <section>
+    <h2>Known Spells</h2>
+    <table>
+      <thead><tr><th>Spell</th><th>Element</th><th>Power</th><th>Mana Cost</th><th>Action</th></tr></thead>
+      <tbody>
+        <tr><td>Fireball</td><td>🔥 Fire</td><td>45</td><td>30</td><td><button style="padding:0.2rem 0.5rem;font-size:0.8rem">Cast</button></td></tr>
+        <tr><td>Frost Nova</td><td>❄️ Ice</td><td>35</td><td>25</td><td><button style="padding:0.2rem 0.5rem;font-size:0.8rem">Cast</button></td></tr>
+        <tr><td>Lightning Bolt</td><td>⚡ Lightning</td><td>55</td><td>40</td><td><button style="padding:0.2rem 0.5rem;font-size:0.8rem">Cast</button></td></tr>
+        <tr><td>Earthquake</td><td>🌿 Earth</td><td>60</td><td>50</td><td><button style="padding:0.2rem 0.5rem;font-size:0.8rem">Cast</button></td></tr>
+      </tbody>
+    </table>
+  </section>
+
+  <!-- Login Form -->
+  <section class="form-section">
+    <h2 style="text-align:center">Sign In to Academy</h2>
+    <div class="card">
+      <form>
+        <label for="email">Email</label>
+        <input type="email" id="email" placeholder="wizard@academy.com">
+        <label for="password">Password</label>
+        <input type="password" id="password" placeholder="••••••••">
+        <label><input type="checkbox"> Remember me</label>
+        <button type="submit" style="width:100%">Enter the Academy</button>
+      </form>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer>
+    <p>Wizard Academy RPG · Styled with <strong>Water.css</strong> · A tiny classless CSS framework</p>
+  </footer>
+
+</body>
+</html>
diff --git a/docs/css-comparison/08-open-props.html b/docs/css-comparison/08-open-props.html
new file mode 100644
index 0000000..2fb0fef
--- /dev/null
+++ b/docs/css-comparison/08-open-props.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wizard RPG – Open Props + Custom</title>
+  <link rel="stylesheet" href="https://unpkg.com/open-props">
+  <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.dark.min.css">
+  <style>
+    body { background: var(--gray-9); color: var(--gray-1); max-width: 900px; margin: 0 auto; padding: 0 var(--size-3); font-family: var(--font-sans); }
+    nav { display: flex; align-items: center; justify-content: space-between; padding: var(--size-3) 0; border-bottom: 1px solid var(--gray-7); flex-wrap: wrap; gap: var(--size-2); }
+    nav a { color: var(--gray-3); text-decoration: none; font-size: var(--font-size-0); transition: color 0.2s; }
+    nav a:hover { color: var(--yellow-4); }
+    .text-gold { color: var(--yellow-4); }
+    .badge { background: var(--indigo-7); color: var(--indigo-1); padding: var(--size-1) var(--size-3); border-radius: var(--radius-round); font-size: var(--font-size-00); }
+    .hero { text-align: center; padding: var(--size-9) var(--size-3); border-bottom: 1px solid var(--gray-7); }
+    .hero h1 { font-size: var(--font-size-6); font-weight: var(--font-weight-8); margin-bottom: var(--size-2); }
+    .hero p { color: var(--gray-4); max-width: 600px; margin: 0 auto var(--size-5); }
+    .btn { border: none; padding: var(--size-2) var(--size-5); border-radius: var(--radius-2); font-weight: var(--font-weight-6); cursor: pointer; transition: all 0.2s; font-size: var(--font-size-1); }
+    .btn-primary { background: var(--indigo-6); color: white; }
+    .btn-primary:hover { background: var(--indigo-5); }
+    .btn-outline { background: transparent; border: 2px solid var(--yellow-4); color: var(--yellow-4); }
+    .btn-outline:hover { background: var(--yellow-4); color: var(--gray-9); }
+    .btn-sm { padding: var(--size-1) var(--size-3); font-size: var(--font-size-00); }
+    .btn-group { display: flex; gap: var(--size-3); justify-content: center; }
+    .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--size-4); }
+    .card { background: var(--gray-8); border: 1px solid var(--gray-7); border-radius: var(--radius-3); padding: var(--size-4); }
+    .flex-row { display: flex; align-items: center; gap: var(--size-3); margin-bottom: var(--size-3); }
+    .avatar { width: 48px; height: 48px; border-radius: var(--radius-round); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
+    .avatar-purple { background: var(--violet-6); }
+    .avatar-blue { background: var(--blue-6); }
+    .avatar-green { background: var(--green-6); }
+    h2 { font-size: var(--font-size-4); margin: var(--size-6) 0 var(--size-4); }
+    .stat-label { font-size: var(--font-size-00); color: var(--gray-5); margin-bottom: var(--size-1); }
+    progress { width: 100%; height: 6px; border-radius: var(--radius-round); appearance: none; -webkit-appearance: none; background: var(--gray-7); margin-bottom: var(--size-2); }
+    progress::-webkit-progress-bar { background: var(--gray-7); border-radius: var(--radius-round); }
+    progress::-webkit-progress-value { border-radius: var(--radius-round); }
+    .tag { display: inline-block; padding: 2px var(--size-2); border-radius: var(--radius-1); font-size: var(--font-size-00); margin-right: var(--size-1); }
+    .tag-fire { background: var(--red-9); color: var(--red-3); }
+    .tag-ice { background: var(--cyan-9); color: var(--cyan-3); }
+    .tag-lightning { background: var(--yellow-9); color: var(--yellow-3); }
+    .tag-earth { background: var(--green-9); color: var(--green-3); }
+    .tag-arcane { background: var(--violet-9); color: var(--violet-3); }
+    .tag-defense { background: var(--orange-9); color: var(--orange-3); }
+    table { width: 100%; border-collapse: collapse; }
+    th { text-align: left; font-size: var(--font-size-00); color: var(--gray-5); text-transform: uppercase; padding: var(--size-2) var(--size-3); border-bottom: 1px solid var(--gray-7); }
+    td { padding: var(--size-2) var(--size-3); border-bottom: 1px solid var(--gray-8); }
+    tr:hover { background: var(--gray-8); }
+    .form-section { max-width: 420px; margin: 0 auto; }
+    .form-group { margin-bottom: var(--size-3); }
+    .form-group label { display: block; font-size: var(--font-size-0); color: var(--gray-4); margin-bottom: var(--size-1); }
+    .form-group input { width: 100%; padding: var(--size-2); background: var(--gray-8); border: 1px solid var(--gray-6); border-radius: var(--radius-2); color: white; font-size: var(--font-size-1); box-sizing: border-box; }
+    .form-group input::placeholder { color: var(--gray-6); }
+    .form-group input:focus { outline: 2px solid var(--indigo-5); border-color: var(--indigo-5); }
+    .checkbox-row { display: flex; align-items: center; gap: var(--size-2); font-size: var(--font-size-0); color: var(--gray-4); margin-bottom: var(--size-4); }
+    footer { text-align: center; padding: var(--size-5) 0; border-top: 1px solid var(--gray-7); color: var(--gray-5); font-size: var(--font-size-0); margin-top: var(--size-7); }
+  </style>
+</head>
+<body>
+
+  <!-- Navigation -->
+  <nav>
+    <strong class="text-gold" style="font-size:var(--font-size-2)">🧙 Wizard Academy RPG</strong>
+    <div style="display:flex;align-items:center;gap:var(--size-3)">
+      <a href="#">Dashboard</a>
+      <a href="#">Spells</a>
+      <a href="#">Battle</a>
+      <a href="#">Leaderboard</a>
+      <span class="badge">Level 12</span>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="hero">
+    <h1>Welcome, Archmage!</h1>
+    <p>Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
+    <div class="btn-group">
+      <button class="btn btn-primary">Start Duel</button>
+      <button class="btn btn-outline">Brew Potion</button>
+    </div>
+  </section>
+
+  <!-- Character Cards -->
+  <section>
+    <h2>Your Party</h2>
+    <div class="grid-3">
+      <div class="card">
+        <div class="flex-row">
+          <div class="avatar avatar-purple">🧙</div>
+          <div><strong>Eldrin the Wise</strong><br><small style="color:var(--gray-5)">Fire Mage · Lvl 12</small></div>
+        </div>
+        <p class="stat-label">HP</p><progress value="85" max="100"></progress>
+        <p class="stat-label">Mana</p><progress value="60" max="100"></progress>
+        <div><span class="tag tag-fire">🔥 Fire</span><span class="tag tag-lightning">⚡ Lightning</span></div>
+      </div>
+      <div class="card">
+        <div class="flex-row">
+          <div class="avatar avatar-blue">🧝</div>
+          <div><strong>Lyra Frostweaver</strong><br><small style="color:var(--gray-5)">Ice Sorceress · Lvl 10</small></div>
+        </div>
+        <p class="stat-label">HP</p><progress value="70" max="100"></progress>
+        <p class="stat-label">Mana</p><progress value="90" max="100"></progress>
+        <div><span class="tag tag-ice">❄️ Ice</span><span class="tag tag-arcane">✨ Arcane</span></div>
+      </div>
+      <div class="card">
+        <div class="flex-row">
+          <div class="avatar avatar-green">🧌</div>
+          <div><strong>Thorin Earthshaker</strong><br><small style="color:var(--gray-5)">Earth Druid · Lvl 8</small></div>
+        </div>
+        <p class="stat-label">HP</p><progress value="95" max="100"></progress>
+        <p class="stat-label">Mana</p><progress value="40" max="100"></progress>
+        <div><span class="tag tag-earth">🌿 Earth</span><span class="tag tag-defense">🛡️ Defense</span></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Spell Table -->
+  <section>
+    <h2>Known Spells</h2>
+    <div style="overflow-x:auto">
+      <table>
+        <thead><tr><th>Spell</th><th>Element</th><th>Power</th><th>Mana Cost</th><th>Action</th></tr></thead>
+        <tbody>
+          <tr><td>Fireball</td><td>🔥 Fire</td><td>45</td><td>30</td><td><button class="btn btn-outline btn-sm">Cast</button></td></tr>
+          <tr><td>Frost Nova</td><td>❄️ Ice</td><td>35</td><td>25</td><td><button class="btn btn-outline btn-sm">Cast</button></td></tr>
+          <tr><td>Lightning Bolt</td><td>⚡ Lightning</td><td>55</td><td>40</td><td><button class="btn btn-outline btn-sm">Cast</button></td></tr>
+          <tr><td>Earthquake</td><td>🌿 Earth</td><td>60</td><td>50</td><td><button class="btn btn-outline btn-sm">Cast</button></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- Login Form -->
+  <section class="form-section">
+    <h2 style="text-align:center">Sign In to Academy</h2>
+    <div class="card">
+      <form>
+        <div class="form-group"><label>Email</label><input type="email" placeholder="wizard@academy.com"></div>
+        <div class="form-group"><label>Password</label><input type="password" placeholder="••••••••"></div>
+        <div class="checkbox-row"><input type="checkbox"> Remember me</div>
+        <button class="btn btn-primary" style="width:100%">Enter the Academy</button>
+      </form>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer>
+    <p>Wizard Academy RPG · Styled with <strong>Open Props</strong> · Design tokens as CSS custom properties</p>
+  </footer>
+
+</body>
+</html>
diff --git a/docs/css-comparison/09-shoelace.html b/docs/css-comparison/09-shoelace.html
new file mode 100644
index 0000000..550fd78
--- /dev/null
+++ b/docs/css-comparison/09-shoelace.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en" class="sl-theme-dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wizard RPG – Shoelace (Web Components)</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/themes/dark.css">
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/shoelace-autoloader.js"></script>
+  <style>
+    body { background: #1a1a2e; color: #e0e0e0; font-family: var(--sl-font-sans); margin: 0; padding: 0; }
+    nav { background: #16213e; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #2d2d5e; flex-wrap: wrap; gap: 0.5rem; }
+    nav a { color: #aaa; text-decoration: none; font-size: 0.9rem; margin: 0 0.5rem; }
+    nav a:hover { color: #f0a500; }
+    .text-gold { color: #f0a500; }
+    .hero { text-align: center; padding: 3rem 1rem; background: linear-gradient(to bottom, #16213e, #1a1a2e); }
+    .hero h1 { font-size: 2.2rem; margin-bottom: 0.5rem; }
+    .hero p { color: #888; max-width: 600px; margin: 0 auto 1.5rem; }
+    .content { max-width: 900px; margin: 0 auto; padding: 1rem; }
+    h2 { margin: 2rem 0 1rem; }
+    .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
+    sl-card { --padding: 1rem; }
+    sl-card::part(body) { display: flex; flex-direction: column; gap: 0.5rem; }
+    .flex-row { display: flex; align-items: center; gap: 0.75rem; }
+    .avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
+    .avatar-purple { background: #7c3aed; }
+    .avatar-blue { background: #0ea5e9; }
+    .avatar-green { background: #22c55e; }
+    .stat-label { font-size: 0.75rem; color: #888; margin-bottom: 0.15rem; }
+    table { width: 100%; border-collapse: collapse; }
+    th { text-align: left; font-size: 0.75rem; color: #888; text-transform: uppercase; padding: 0.5rem 0.75rem; border-bottom: 1px solid #2d2d5e; }
+    td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #1e1e3a; }
+    tr:hover { background: rgba(99,102,241,0.1); }
+    .form-section { max-width: 420px; margin: 2rem auto; }
+    footer { text-align: center; padding: 1.5rem; border-top: 1px solid #2d2d5e; color: #666; font-size: 0.85rem; margin-top: 2rem; }
+  </style>
+</head>
+<body>
+
+  <!-- Navigation -->
+  <nav>
+    <strong class="text-gold" style="font-size:1.1rem">🧙 Wizard Academy RPG</strong>
+    <div style="display:flex;align-items:center;gap:0.5rem">
+      <a href="#">Dashboard</a>
+      <a href="#">Spells</a>
+      <a href="#">Battle</a>
+      <a href="#">Leaderboard</a>
+      <sl-badge variant="primary" pill>Level 12</sl-badge>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="hero">
+    <h1>Welcome, Archmage!</h1>
+    <p>Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
+    <div style="display:flex;gap:0.75rem;justify-content:center">
+      <sl-button variant="primary" size="large">Start Duel</sl-button>
+      <sl-button variant="warning" outline size="large">Brew Potion</sl-button>
+    </div>
+  </section>
+
+  <div class="content">
+
+    <!-- Character Cards -->
+    <section>
+      <h2>Your Party</h2>
+      <div class="grid-3">
+        <sl-card>
+          <div class="flex-row">
+            <div class="avatar avatar-purple">🧙</div>
+            <div><strong>Eldrin the Wise</strong><br><small style="color:#888">Fire Mage · Lvl 12</small></div>
+          </div>
+          <div>
+            <p class="stat-label">HP</p>
+            <sl-progress-bar value="85" style="--height:6px;--indicator-color:var(--sl-color-success-600)"></sl-progress-bar>
+          </div>
+          <div>
+            <p class="stat-label">Mana</p>
+            <sl-progress-bar value="60" style="--height:6px;--indicator-color:var(--sl-color-primary-600)"></sl-progress-bar>
+          </div>
+          <div><sl-tag size="small" variant="danger">🔥 Fire</sl-tag> <sl-tag size="small" variant="warning">⚡ Lightning</sl-tag></div>
+        </sl-card>
+        <sl-card>
+          <div class="flex-row">
+            <div class="avatar avatar-blue">🧝</div>
+            <div><strong>Lyra Frostweaver</strong><br><small style="color:#888">Ice Sorceress · Lvl 10</small></div>
+          </div>
+          <div>
+            <p class="stat-label">HP</p>
+            <sl-progress-bar value="70" style="--height:6px;--indicator-color:var(--sl-color-success-600)"></sl-progress-bar>
+          </div>
+          <div>
+            <p class="stat-label">Mana</p>
+            <sl-progress-bar value="90" style="--height:6px;--indicator-color:var(--sl-color-primary-600)"></sl-progress-bar>
+          </div>
+          <div><sl-tag size="small" variant="primary">❄️ Ice</sl-tag> <sl-tag size="small" variant="neutral">✨ Arcane</sl-tag></div>
+        </sl-card>
+        <sl-card>
+          <div class="flex-row">
+            <div class="avatar avatar-green">🧌</div>
+            <div><strong>Thorin Earthshaker</strong><br><small style="color:#888">Earth Druid · Lvl 8</small></div>
+          </div>
+          <div>
+            <p class="stat-label">HP</p>
+            <sl-progress-bar value="95" style="--height:6px;--indicator-color:var(--sl-color-success-600)"></sl-progress-bar>
+          </div>
+          <div>
+            <p class="stat-label">Mana</p>
+            <sl-progress-bar value="40" style="--height:6px;--indicator-color:var(--sl-color-primary-600)"></sl-progress-bar>
+          </div>
+          <div><sl-tag size="small" variant="success">🌿 Earth</sl-tag> <sl-tag size="small" variant="warning">🛡️ Defense</sl-tag></div>
+        </sl-card>
+      </div>
+    </section>
+
+    <!-- Spell Table -->
+    <section>
+      <h2>Known Spells</h2>
+      <div style="overflow-x:auto">
+        <table>
+          <thead><tr><th>Spell</th><th>Element</th><th>Power</th><th>Mana Cost</th><th>Action</th></tr></thead>
+          <tbody>
+            <tr><td>Fireball</td><td>🔥 Fire</td><td>45</td><td>30</td><td><sl-button size="small" variant="warning" outline>Cast</sl-button></td></tr>
+            <tr><td>Frost Nova</td><td>❄️ Ice</td><td>35</td><td>25</td><td><sl-button size="small" variant="warning" outline>Cast</sl-button></td></tr>
+            <tr><td>Lightning Bolt</td><td>⚡ Lightning</td><td>55</td><td>40</td><td><sl-button size="small" variant="warning" outline>Cast</sl-button></td></tr>
+            <tr><td>Earthquake</td><td>🌿 Earth</td><td>60</td><td>50</td><td><sl-button size="small" variant="warning" outline>Cast</sl-button></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- Login Form -->
+    <section class="form-section">
+      <h2 style="text-align:center">Sign In to Academy</h2>
+      <sl-card>
+        <form>
+          <div style="margin-bottom:1rem">
+            <sl-input label="Email" type="email" placeholder="wizard@academy.com"></sl-input>
+          </div>
+          <div style="margin-bottom:1rem">
+            <sl-input label="Password" type="password" placeholder="••••••••" password-toggle></sl-input>
+          </div>
+          <div style="margin-bottom:1rem">
+            <sl-checkbox>Remember me</sl-checkbox>
+          </div>
+          <sl-button variant="primary" style="width:100%" size="large">Enter the Academy</sl-button>
+        </form>
+      </sl-card>
+    </section>
+
+  </div>
+
+  <!-- Footer -->
+  <footer>
+    <p>Wizard Academy RPG · Styled with <strong>Shoelace</strong> · Framework-agnostic Web Components library</p>
+  </footer>
+
+</body>
+</html>
diff --git a/docs/css-comparison/10-sakura.html b/docs/css-comparison/10-sakura.html
new file mode 100644
index 0000000..6e9ec11
--- /dev/null
+++ b/docs/css-comparison/10-sakura.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wizard RPG – Sakura (Classless)</title>
+  <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-dark.css">
+  <style>
+    body { max-width: 900px; }
+    .hero { text-align: center; padding: 2rem 0; border-bottom: 1px solid #444; }
+    .party-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
+    .card { border: 1px solid #444; border-radius: 6px; padding: 1rem; background: #1e1e2e; }
+    .flex-row { display: flex; align-items: center; gap: 0.75rem; }
+    .avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
+    .avatar-purple { background: #7c3aed; }
+    .avatar-blue { background: #0ea5e9; }
+    .avatar-green { background: #22c55e; }
+    .tag { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.75rem; margin-right: 0.25rem; }
+    .tag-fire { background: rgba(220,38,38,0.2); color: #fca5a5; }
+    .tag-ice { background: rgba(14,165,233,0.2); color: #7dd3fc; }
+    .tag-lightning { background: rgba(234,179,8,0.2); color: #fde68a; }
+    .tag-earth { background: rgba(34,197,94,0.2); color: #86efac; }
+    .tag-arcane { background: rgba(168,85,247,0.2); color: #d8b4fe; }
+    .tag-defense { background: rgba(245,158,11,0.2); color: #fcd34d; }
+    .btn-group { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
+    .btn-outline { background: transparent; border: 2px solid #f0a500; color: #f0a500; padding: 0.5rem 1.5rem; border-radius: 4px; cursor: pointer; }
+    .btn-outline:hover { background: #f0a500; color: #000; }
+    progress { width: 100%; height: 6px; margin: 0.25rem 0; }
+    small { opacity: 0.6; }
+    .form-section { max-width: 400px; margin: 2rem auto; }
+    footer { text-align: center; margin-top: 2rem; padding: 1.5rem 0; border-top: 1px solid #444; opacity: 0.7; font-size: 0.85rem; }
+    nav { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid #444; flex-wrap: wrap; gap: 0.5rem; }
+    nav a { margin: 0 0.5rem; text-decoration: none; font-size: 0.9rem; }
+    .text-gold { color: #f0a500; }
+    .badge { display: inline-block; background: #533483; color: #e0e0e0; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
+  </style>
+</head>
+<body>
+
+  <!-- Navigation -->
+  <nav>
+    <strong class="text-gold">🧙 Wizard Academy RPG</strong>
+    <div>
+      <a href="#">Dashboard</a>
+      <a href="#">Spells</a>
+      <a href="#">Battle</a>
+      <a href="#">Leaderboard</a>
+      <span class="badge">Level 12</span>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="hero">
+    <h1>Welcome, Archmage!</h1>
+    <p>Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
+    <div class="btn-group">
+      <button>Start Duel</button>
+      <button class="btn-outline">Brew Potion</button>
+    </div>
+  </section>
+
+  <!-- Character Cards -->
+  <section>
+    <h2>Your Party</h2>
+    <div class="party-grid">
+      <div class="card">
+        <div class="flex-row">
+          <div class="avatar avatar-purple">🧙</div>
+          <div><strong>Eldrin the Wise</strong><br><small>Fire Mage · Lvl 12</small></div>
+        </div>
+        <p><small>HP</small></p>
+        <progress value="85" max="100"></progress>
+        <p><small>Mana</small></p>
+        <progress value="60" max="100"></progress>
+        <div style="margin-top:0.5rem"><span class="tag tag-fire">🔥 Fire</span><span class="tag tag-lightning">⚡ Lightning</span></div>
+      </div>
+      <div class="card">
+        <div class="flex-row">
+          <div class="avatar avatar-blue">🧝</div>
+          <div><strong>Lyra Frostweaver</strong><br><small>Ice Sorceress · Lvl 10</small></div>
+        </div>
+        <p><small>HP</small></p>
+        <progress value="70" max="100"></progress>
+        <p><small>Mana</small></p>
+        <progress value="90" max="100"></progress>
+        <div style="margin-top:0.5rem"><span class="tag tag-ice">❄️ Ice</span><span class="tag tag-arcane">✨ Arcane</span></div>
+      </div>
+      <div class="card">
+        <div class="flex-row">
+          <div class="avatar avatar-green">🧌</div>
+          <div><strong>Thorin Earthshaker</strong><br><small>Earth Druid · Lvl 8</small></div>
+        </div>
+        <p><small>HP</small></p>
+        <progress value="95" max="100"></progress>
+        <p><small>Mana</small></p>
+        <progress value="40" max="100"></progress>
+        <div style="margin-top:0.5rem"><span class="tag tag-earth">🌿 Earth</span><span class="tag tag-defense">🛡️ Defense</span></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Spell Table -->
+  <section>
+    <h2>Known Spells</h2>
+    <table>
+      <thead><tr><th>Spell</th><th>Element</th><th>Power</th><th>Mana Cost</th><th>Action</th></tr></thead>
+      <tbody>
+        <tr><td>Fireball</td><td>🔥 Fire</td><td>45</td><td>30</td><td><button style="padding:0.2rem 0.5rem;font-size:0.8rem">Cast</button></td></tr>
+        <tr><td>Frost Nova</td><td>❄️ Ice</td><td>35</td><td>25</td><td><button style="padding:0.2rem 0.5rem;font-size:0.8rem">Cast</button></td></tr>
+        <tr><td>Lightning Bolt</td><td>⚡ Lightning</td><td>55</td><td>40</td><td><button style="padding:0.2rem 0.5rem;font-size:0.8rem">Cast</button></td></tr>
+        <tr><td>Earthquake</td><td>🌿 Earth</td><td>60</td><td>50</td><td><button style="padding:0.2rem 0.5rem;font-size:0.8rem">Cast</button></td></tr>
+      </tbody>
+    </table>
+  </section>
+
+  <!-- Login Form -->
+  <section class="form-section">
+    <h2 style="text-align:center">Sign In to Academy</h2>
+    <div class="card">
+      <form>
+        <label for="email">Email</label>
+        <input type="email" id="email" placeholder="wizard@academy.com">
+        <label for="password">Password</label>
+        <input type="password" id="password" placeholder="••••••••">
+        <label><input type="checkbox"> Remember me</label><br><br>
+        <button type="submit" style="width:100%">Enter the Academy</button>
+      </form>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer>
+    <p>Wizard Academy RPG · Styled with <strong>Sakura CSS</strong> · A minimal classless CSS framework</p>
+  </footer>
+
+</body>
+</html>
diff --git a/docs/css-comparison/11-primeflex.html b/docs/css-comparison/11-primeflex.html
new file mode 100644
index 0000000..d863832
--- /dev/null
+++ b/docs/css-comparison/11-primeflex.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wizard RPG – PrimeFlex (PrimeVue Styling)</title>
+  <link rel="stylesheet" href="https://unpkg.com/primeflex@3.3.1/primeflex.css">
+  <link rel="stylesheet" href="https://unpkg.com/primeicons@7.0.0/primeicons.css">
+  <style>
+    :root {
+      --primary: #818cf8;
+      --primary-dark: #6366f1;
+      --surface-ground: #111827;
+      --surface-section: #1f2937;
+      --surface-card: #1f2937;
+      --surface-border: #374151;
+      --text-color: #e5e7eb;
+      --text-color-secondary: #9ca3af;
+    }
+    body { background: var(--surface-ground); color: var(--text-color); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 0; }
+    nav { background: var(--surface-section); border-bottom: 1px solid var(--surface-border); }
+    .text-gold { color: #f59e0b; }
+    a { color: var(--text-color-secondary); text-decoration: none; transition: color 0.2s; }
+    a:hover { color: #f59e0b; }
+    .hero { background: linear-gradient(to bottom, var(--surface-section), var(--surface-ground)); }
+    .card { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: 12px; }
+    .badge-custom { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 0.75rem; }
+    .badge-primary { background: var(--primary); color: white; }
+    .badge-fire { background: rgba(220,38,38,0.15); color: #fca5a5; }
+    .badge-ice { background: rgba(14,165,233,0.15); color: #7dd3fc; }
+    .badge-lightning { background: rgba(234,179,8,0.15); color: #fde68a; }
+    .badge-earth { background: rgba(34,197,94,0.15); color: #86efac; }
+    .badge-arcane { background: rgba(168,85,247,0.15); color: #d8b4fe; }
+    .badge-defense { background: rgba(245,158,11,0.15); color: #fcd34d; }
+    .avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
+    .avatar-purple { background: #7c3aed; }
+    .avatar-blue { background: #0ea5e9; }
+    .avatar-green { background: #22c55e; }
+    .progress-bar { height: 6px; border-radius: 99px; overflow: hidden; background: #374151; }
+    .progress-bar-fill { height: 100%; border-radius: 99px; }
+    .progress-green { background: #22c55e; }
+    .progress-blue { background: #3b82f6; }
+    .btn { border: none; padding: 0.5rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: all 0.2s; }
+    .btn-primary { background: var(--primary); color: white; }
+    .btn-primary:hover { background: var(--primary-dark); }
+    .btn-outline { background: transparent; border: 2px solid #f59e0b; color: #f59e0b; }
+    .btn-outline:hover { background: #f59e0b; color: #111827; }
+    .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.8rem; }
+    table { width: 100%; border-collapse: collapse; }
+    th { text-align: left; font-size: 0.75rem; color: var(--text-color-secondary); text-transform: uppercase; padding: 0.75rem; border-bottom: 1px solid var(--surface-border); }
+    td { padding: 0.75rem; border-bottom: 1px solid rgba(55,65,81,0.5); }
+    tr:hover { background: rgba(99,102,241,0.05); }
+    input[type="email"], input[type="password"] { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--surface-ground); color: var(--text-color); font-size: 0.95rem; box-sizing: border-box; }
+    input::placeholder { color: var(--text-color-secondary); }
+    input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(129,140,248,0.2); }
+    label.form-label { display: block; font-size: 0.85rem; color: var(--text-color-secondary); margin-bottom: 0.35rem; }
+    footer { border-top: 1px solid var(--surface-border); color: var(--text-color-secondary); font-size: 0.85rem; }
+  </style>
+</head>
+<body>
+
+  <!-- Navigation -->
+  <nav>
+    <div class="flex align-items-center justify-content-between px-4 py-3" style="max-width:1100px;margin:0 auto">
+      <strong class="text-gold text-xl">🧙 Wizard Academy RPG</strong>
+      <div class="flex align-items-center gap-3">
+        <a href="#" class="text-sm">Dashboard</a>
+        <a href="#" class="text-sm">Spells</a>
+        <a href="#" class="text-sm">Battle</a>
+        <a href="#" class="text-sm">Leaderboard</a>
+        <span class="badge-custom badge-primary">Level 12</span>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="hero text-center py-7">
+    <h1 class="text-4xl font-bold mb-2">Welcome, Archmage!</h1>
+    <p class="text-color-secondary mx-auto mb-4" style="max-width:600px">Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
+    <div class="flex gap-3 justify-content-center">
+      <button class="btn btn-primary">Start Duel</button>
+      <button class="btn btn-outline">Brew Potion</button>
+    </div>
+  </section>
+
+  <!-- Character Cards -->
+  <section class="px-3 py-5" style="max-width:1100px;margin:0 auto">
+    <h2 class="text-2xl font-bold mb-4">Your Party</h2>
+    <div class="grid">
+      <div class="col-12 md:col-4">
+        <div class="card p-4">
+          <div class="flex align-items-center gap-3 mb-3">
+            <div class="avatar avatar-purple">🧙</div>
+            <div><strong>Eldrin the Wise</strong><br><small class="text-color-secondary">Fire Mage · Lvl 12</small></div>
+          </div>
+          <p class="text-color-secondary text-xs mb-1">HP</p>
+          <div class="progress-bar mb-2"><div class="progress-bar-fill progress-green" style="width:85%"></div></div>
+          <p class="text-color-secondary text-xs mb-1">Mana</p>
+          <div class="progress-bar mb-3"><div class="progress-bar-fill progress-blue" style="width:60%"></div></div>
+          <div class="flex gap-2"><span class="badge-custom badge-fire">🔥 Fire</span><span class="badge-custom badge-lightning">⚡ Lightning</span></div>
+        </div>
+      </div>
+      <div class="col-12 md:col-4">
+        <div class="card p-4">
+          <div class="flex align-items-center gap-3 mb-3">
+            <div class="avatar avatar-blue">🧝</div>
+            <div><strong>Lyra Frostweaver</strong><br><small class="text-color-secondary">Ice Sorceress · Lvl 10</small></div>
+          </div>
+          <p class="text-color-secondary text-xs mb-1">HP</p>
+          <div class="progress-bar mb-2"><div class="progress-bar-fill progress-green" style="width:70%"></div></div>
+          <p class="text-color-secondary text-xs mb-1">Mana</p>
+          <div class="progress-bar mb-3"><div class="progress-bar-fill progress-blue" style="width:90%"></div></div>
+          <div class="flex gap-2"><span class="badge-custom badge-ice">❄️ Ice</span><span class="badge-custom badge-arcane">✨ Arcane</span></div>
+        </div>
+      </div>
+      <div class="col-12 md:col-4">
+        <div class="card p-4">
+          <div class="flex align-items-center gap-3 mb-3">
+            <div class="avatar avatar-green">🧌</div>
+            <div><strong>Thorin Earthshaker</strong><br><small class="text-color-secondary">Earth Druid · Lvl 8</small></div>
+          </div>
+          <p class="text-color-secondary text-xs mb-1">HP</p>
+          <div class="progress-bar mb-2"><div class="progress-bar-fill progress-green" style="width:95%"></div></div>
+          <p class="text-color-secondary text-xs mb-1">Mana</p>
+          <div class="progress-bar mb-3"><div class="progress-bar-fill progress-blue" style="width:40%"></div></div>
+          <div class="flex gap-2"><span class="badge-custom badge-earth">🌿 Earth</span><span class="badge-custom badge-defense">🛡️ Defense</span></div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Spell Table -->
+  <section class="px-3 py-3" style="max-width:1100px;margin:0 auto">
+    <h2 class="text-2xl font-bold mb-3">Known Spells</h2>
+    <div style="overflow-x:auto">
+      <table>
+        <thead><tr><th>Spell</th><th>Element</th><th>Power</th><th>Mana Cost</th><th>Action</th></tr></thead>
+        <tbody>
+          <tr><td>Fireball</td><td>🔥 Fire</td><td>45</td><td>30</td><td><button class="btn btn-outline btn-sm">Cast</button></td></tr>
+          <tr><td>Frost Nova</td><td>❄️ Ice</td><td>35</td><td>25</td><td><button class="btn btn-outline btn-sm">Cast</button></td></tr>
+          <tr><td>Lightning Bolt</td><td>⚡ Lightning</td><td>55</td><td>40</td><td><button class="btn btn-outline btn-sm">Cast</button></td></tr>
+          <tr><td>Earthquake</td><td>🌿 Earth</td><td>60</td><td>50</td><td><button class="btn btn-outline btn-sm">Cast</button></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- Login Form -->
+  <section class="py-5" style="max-width:420px;margin:0 auto;padding-left:1rem;padding-right:1rem">
+    <h2 class="text-2xl font-bold mb-4 text-center">Sign In to Academy</h2>
+    <div class="card p-5">
+      <form>
+        <div class="mb-3"><label class="form-label">Email</label><input type="email" placeholder="wizard@academy.com"></div>
+        <div class="mb-3"><label class="form-label">Password</label><input type="password" placeholder="••••••••"></div>
+        <div class="mb-4 flex align-items-center gap-2"><input type="checkbox"><span class="text-color-secondary text-sm">Remember me</span></div>
+        <button class="btn btn-primary" style="width:100%">Enter the Academy</button>
+      </form>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="text-center py-4">
+    <p>Wizard Academy RPG · Styled with <strong>PrimeFlex</strong> · Utility CSS companion for PrimeVue components</p>
+  </footer>
+
+</body>
+</html>
diff --git a/docs/css-comparison/12-fantasy-custom.html b/docs/css-comparison/12-fantasy-custom.html
new file mode 100644
index 0000000..cfc83c4
--- /dev/null
+++ b/docs/css-comparison/12-fantasy-custom.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wizard RPG – Fantasy Custom Theme</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
+    :root {
+      --bg-dark: #0d0b1a;
+      --bg-card: #1a1530;
+      --bg-card-hover: #231e3f;
+      --border: #3d2f6b;
+      --gold: #d4a843;
+      --gold-light: #f0d68a;
+      --purple: #8b5cf6;
+      --purple-dark: #6d28d9;
+      --text: #e8e4f0;
+      --text-muted: #9b8ec4;
+      --hp-green: #4ade80;
+      --mana-blue: #60a5fa;
+      --fire: #ef4444;
+      --ice: #22d3ee;
+      --lightning: #facc15;
+      --earth: #22c55e;
+      --arcane: #a78bfa;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { background: var(--bg-dark); color: var(--text); font-family: 'Crimson Text', Georgia, serif; font-size: 16px; line-height: 1.6; }
+    h1, h2, h3, h4, h5, strong { font-family: 'Cinzel', serif; }
+    
+    /* Navigation */
+    nav { background: linear-gradient(to right, #120f24, #1a1530, #120f24); border-bottom: 2px solid var(--border); padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
+    nav a { color: var(--text-muted); text-decoration: none; font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.05em; transition: color 0.3s; }
+    nav a:hover { color: var(--gold); text-shadow: 0 0 8px rgba(212,168,67,0.4); }
+    .brand { font-family: 'Cinzel', serif; font-weight: 900; color: var(--gold); font-size: 1.2rem; text-shadow: 0 0 12px rgba(212,168,67,0.3); }
+    .level-badge { background: linear-gradient(135deg, var(--purple-dark), var(--purple)); color: white; padding: 0.2rem 0.75rem; border-radius: 99px; font-size: 0.7rem; font-family: 'Cinzel', serif; letter-spacing: 0.1em; border: 1px solid var(--purple); box-shadow: 0 0 8px rgba(139,92,246,0.3); }
+    
+    /* Hero */
+    .hero { text-align: center; padding: 4rem 1rem; background: radial-gradient(ellipse at center, #1a1530 0%, #0d0b1a 70%); position: relative; overflow: hidden; }
+    .hero::before { content: '✦'; position: absolute; top: 20%; left: 15%; font-size: 1.5rem; color: rgba(212,168,67,0.15); animation: twinkle 3s ease-in-out infinite; }
+    .hero::after { content: '✦'; position: absolute; top: 30%; right: 20%; font-size: 1rem; color: rgba(139,92,246,0.15); animation: twinkle 4s ease-in-out infinite 1s; }
+    @keyframes twinkle { 0%,100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
+    .hero h1 { font-size: 2.8rem; font-weight: 900; background: linear-gradient(to right, var(--gold-light), var(--gold), var(--gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.75rem; }
+    .hero p { color: var(--text-muted); max-width: 550px; margin: 0 auto 1.5rem; font-size: 1.1rem; font-style: italic; }
+    .btn { border: none; padding: 0.6rem 1.75rem; border-radius: 6px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all 0.3s; letter-spacing: 0.05em; }
+    .btn-gold { background: linear-gradient(135deg, var(--gold), #b8922f); color: #1a1530; box-shadow: 0 4px 15px rgba(212,168,67,0.3); }
+    .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,168,67,0.5); }
+    .btn-purple { background: transparent; border: 2px solid var(--purple); color: var(--purple); }
+    .btn-purple:hover { background: var(--purple); color: white; box-shadow: 0 4px 15px rgba(139,92,246,0.3); }
+    .btn-sm { padding: 0.3rem 0.75rem; font-size: 0.75rem; }
+    .btn-group { display: flex; gap: 0.75rem; justify-content: center; }
+    
+    /* Cards */
+    .content { max-width: 950px; margin: 0 auto; padding: 0 1rem; }
+    h2 { font-size: 1.6rem; color: var(--gold-light); margin: 2.5rem 0 1.25rem; letter-spacing: 0.05em; }
+    .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; }
+    .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; transition: all 0.3s; position: relative; overflow: hidden; }
+    .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, transparent, var(--purple), var(--gold), var(--purple), transparent); }
+    .card:hover { background: var(--bg-card-hover); border-color: var(--purple); box-shadow: 0 4px 20px rgba(139,92,246,0.15); }
+    .flex-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
+    .avatar { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; border: 2px solid var(--border); }
+    .avatar-fire { background: linear-gradient(135deg, #7c2d12, #dc2626); }
+    .avatar-ice { background: linear-gradient(135deg, #164e63, #0891b2); }
+    .avatar-earth { background: linear-gradient(135deg, #14532d, #16a34a); }
+    .char-name { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; }
+    .char-sub { font-size: 0.8rem; color: var(--text-muted); }
+    .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.2rem; }
+    .progress-track { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 0.5rem; }
+    .progress-fill { height: 100%; border-radius: 99px; transition: width 0.5s ease; }
+    .progress-hp { background: linear-gradient(to right, #16a34a, var(--hp-green)); }
+    .progress-mana { background: linear-gradient(to right, #2563eb, var(--mana-blue)); }
+    .tag { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-family: 'Cinzel', serif; margin-right: 0.3rem; border: 1px solid; }
+    .tag-fire { border-color: var(--fire); color: #fca5a5; background: rgba(239,68,68,0.1); }
+    .tag-ice { border-color: var(--ice); color: #a5f3fc; background: rgba(34,211,238,0.1); }
+    .tag-lightning { border-color: var(--lightning); color: #fef08a; background: rgba(250,204,21,0.1); }
+    .tag-earth { border-color: var(--earth); color: #86efac; background: rgba(34,197,94,0.1); }
+    .tag-arcane { border-color: var(--arcane); color: #c4b5fd; background: rgba(167,139,250,0.1); }
+    .tag-defense { border-color: #f59e0b; color: #fcd34d; background: rgba(245,158,11,0.1); }
+    
+    /* Table */
+    table { width: 100%; border-collapse: collapse; }
+    th { text-align: left; font-family: 'Cinzel', serif; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; padding: 0.75rem; border-bottom: 1px solid var(--border); }
+    td { padding: 0.65rem 0.75rem; border-bottom: 1px solid rgba(61,47,107,0.3); font-size: 0.95rem; }
+    tr:hover { background: rgba(139,92,246,0.05); }
+    
+    /* Form */
+    .form-section { max-width: 420px; margin: 0 auto; }
+    .form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; position: relative; }
+    .form-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
+    .form-group { margin-bottom: 1rem; }
+    .form-group label { display: block; font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.35rem; letter-spacing: 0.05em; }
+    .form-group input { width: 100%; padding: 0.6rem 0.75rem; background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: 'Crimson Text', serif; font-size: 1rem; box-sizing: border-box; }
+    .form-group input::placeholder { color: rgba(155,142,196,0.5); }
+    .form-group input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(139,92,246,0.15); }
+    .checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; font-size: 0.9rem; color: var(--text-muted); }
+    
+    /* Footer */
+    footer { text-align: center; padding: 2rem 1rem; margin-top: 3rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; }
+    footer strong { color: var(--gold); }
+  </style>
+</head>
+<body>
+
+  <!-- Navigation -->
+  <nav>
+    <span class="brand">🧙 Wizard Academy RPG</span>
+    <div style="display:flex;align-items:center;gap:1rem">
+      <a href="#">Dashboard</a>
+      <a href="#">Spells</a>
+      <a href="#">Battle</a>
+      <a href="#">Leaderboard</a>
+      <span class="level-badge">LEVEL 12</span>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="hero">
+    <h1>Welcome, Archmage!</h1>
+    <p>Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
+    <div class="btn-group">
+      <button class="btn btn-gold">⚔️ Start Duel</button>
+      <button class="btn btn-purple">🧪 Brew Potion</button>
+    </div>
+  </section>
+
+  <div class="content">
+
+    <!-- Character Cards -->
+    <section>
+      <h2>⚔ Your Party</h2>
+      <div class="grid-3">
+        <div class="card">
+          <div class="flex-row">
+            <div class="avatar avatar-fire">🧙</div>
+            <div><span class="char-name">Eldrin the Wise</span><br><span class="char-sub">Fire Mage · Lvl 12</span></div>
+          </div>
+          <p class="stat-label">HP</p><div class="progress-track"><div class="progress-fill progress-hp" style="width:85%"></div></div>
+          <p class="stat-label">Mana</p><div class="progress-track"><div class="progress-fill progress-mana" style="width:60%"></div></div>
+          <div style="margin-top:0.5rem"><span class="tag tag-fire">🔥 Fire</span><span class="tag tag-lightning">⚡ Lightning</span></div>
+        </div>
+        <div class="card">
+          <div class="flex-row">
+            <div class="avatar avatar-ice">🧝</div>
+            <div><span class="char-name">Lyra Frostweaver</span><br><span class="char-sub">Ice Sorceress · Lvl 10</span></div>
+          </div>
+          <p class="stat-label">HP</p><div class="progress-track"><div class="progress-fill progress-hp" style="width:70%"></div></div>
+          <p class="stat-label">Mana</p><div class="progress-track"><div class="progress-fill progress-mana" style="width:90%"></div></div>
+          <div style="margin-top:0.5rem"><span class="tag tag-ice">❄️ Ice</span><span class="tag tag-arcane">✨ Arcane</span></div>
+        </div>
+        <div class="card">
+          <div class="flex-row">
+            <div class="avatar avatar-earth">🧌</div>
+            <div><span class="char-name">Thorin Earthshaker</span><br><span class="char-sub">Earth Druid · Lvl 8</span></div>
+          </div>
+          <p class="stat-label">HP</p><div class="progress-track"><div class="progress-fill progress-hp" style="width:95%"></div></div>
+          <p class="stat-label">Mana</p><div class="progress-track"><div class="progress-fill progress-mana" style="width:40%"></div></div>
+          <div style="margin-top:0.5rem"><span class="tag tag-earth">🌿 Earth</span><span class="tag tag-defense">🛡️ Defense</span></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Spell Table -->
+    <section>
+      <h2>📜 Known Spells</h2>
+      <div style="overflow-x:auto">
+        <table>
+          <thead><tr><th>Spell</th><th>Element</th><th>Power</th><th>Mana Cost</th><th>Action</th></tr></thead>
+          <tbody>
+            <tr><td>Fireball</td><td>🔥 Fire</td><td>45</td><td>30</td><td><button class="btn btn-gold btn-sm">Cast</button></td></tr>
+            <tr><td>Frost Nova</td><td>❄️ Ice</td><td>35</td><td>25</td><td><button class="btn btn-gold btn-sm">Cast</button></td></tr>
+            <tr><td>Lightning Bolt</td><td>⚡ Lightning</td><td>55</td><td>40</td><td><button class="btn btn-gold btn-sm">Cast</button></td></tr>
+            <tr><td>Earthquake</td><td>🌿 Earth</td><td>60</td><td>50</td><td><button class="btn btn-gold btn-sm">Cast</button></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- Login Form -->
+    <section class="form-section">
+      <h2 style="text-align:center">🔮 Sign In to Academy</h2>
+      <div class="form-card">
+        <form>
+          <div class="form-group"><label>Email</label><input type="email" placeholder="wizard@academy.com"></div>
+          <div class="form-group"><label>Password</label><input type="password" placeholder="••••••••"></div>
+          <div class="checkbox-row"><input type="checkbox"> Remember me</div>
+          <button class="btn btn-gold" style="width:100%">Enter the Academy</button>
+        </form>
+      </div>
+    </section>
+
+  </div>
+
+  <!-- Footer -->
+  <footer>
+    <p>Wizard Academy RPG · <strong>Fantasy Custom Theme</strong> · Hand-crafted CSS with Cinzel font · Pure CSS, no framework</p>
+  </footer>
+
+</body>
+</html>
diff --git a/docs/css-comparison/COMPARISON.md b/docs/css-comparison/COMPARISON.md
new file mode 100644
index 0000000..b2eefce
--- /dev/null
+++ b/docs/css-comparison/COMPARISON.md
@@ -0,0 +1,285 @@
+# CSS & Component Framework Comparison for Wizard RPG
+
+> **Goal:** Evaluate 12 different CSS frameworks and component libraries (all free) to find the
+> best styling approach for the Wizard Academy RPG game. Each framework was applied to
+> identical RPG-themed UI elements (navigation, hero section, character cards, spell table,
+> login form) and screenshotted with Playwright for visual comparison.
+
+---
+
+## Quick Comparison Table
+
+| # | Framework | Type | Vue 3 Support | Dark Theme | RPG Fit | Bundle Size | Learning Curve |
+|---|-----------|------|:---:|:---:|:---:|:---:|:---:|
+| 1 | **Tailwind CSS** | Utility-first CSS | ✅ Native (current) | ✅ Easy | ⭐⭐⭐⭐ | ~10 KB (purged) | Medium |
+| 2 | **Bootstrap 5** | Component CSS | ✅ via bootstrap-vue-next | ✅ Built-in | ⭐⭐⭐ | ~22 KB | Low |
+| 3 | **Bulma** | Component CSS | ✅ via Oruga/Buefy | ✅ Manual | ⭐⭐⭐ | ~26 KB | Low |
+| 4 | **DaisyUI** | Tailwind plugin | ✅ Native (Tailwind) | ✅ Themes | ⭐⭐⭐⭐⭐ | ~3 KB (on Tailwind) | Low |
+| 5 | **Pico CSS** | Classless/semantic | ✅ Framework-agnostic | ✅ Built-in | ⭐⭐⭐ | ~10 KB | Very Low |
+| 6 | **NES.css** | Retro 8-bit CSS | ✅ Framework-agnostic | ⚠️ Manual | ⭐⭐⭐⭐⭐ | ~35 KB + font | Low |
+| 7 | **Water.css** | Classless | ✅ Framework-agnostic | ✅ Built-in | ⭐⭐ | ~2 KB | None |
+| 8 | **Open Props** | Design tokens | ✅ Framework-agnostic | ✅ Normalize | ⭐⭐⭐⭐ | ~5 KB (selective) | Medium |
+| 9 | **Shoelace** | Web Components | ✅ Framework-agnostic | ✅ Themes | ⭐⭐⭐⭐ | ~50 KB (tree-shake) | Medium |
+| 10 | **Sakura** | Classless | ✅ Framework-agnostic | ✅ Dark variant | ⭐⭐ | ~2 KB | None |
+| 11 | **PrimeFlex + PrimeVue** | Utility + Components | ✅ Native Vue 3 | ✅ Themes | ⭐⭐⭐⭐ | ~30 KB | Medium |
+| 12 | **Fantasy Custom** | Hand-crafted CSS | ✅ N/A (pure CSS) | ✅ Custom | ⭐⭐⭐⭐⭐ | Custom | High |
+
+---
+
+## Detailed Analysis
+
+### 1. Tailwind CSS v4 *(current)*
+![Tailwind CSS](screenshots/01-tailwind.png)
+
+**What it is:** Utility-first CSS framework. Already used in the project.
+
+| Pros | Cons |
+|------|------|
+| Already integrated in the project | No pre-built components (need custom work) |
+| Maximum flexibility and customisation | Verbose class strings in templates |
+| Excellent tree-shaking, tiny production CSS | Dark theme needs manual design effort |
+| Huge ecosystem (Headless UI, Heroicons, etc.) | Requires design skills for polished look |
+| v4 is faster with native CSS layers | |
+
+**Best for:** Teams who want full control and are willing to design their own components.
+
+**Vue 3 component libraries:** [Headless UI](https://headlessui.com/), [shadcn-vue](https://www.shadcn-vue.com/)
+
+---
+
+### 2. Bootstrap 5
+![Bootstrap 5](screenshots/02-bootstrap.png)
+
+**What it is:** The most popular CSS framework with pre-built components.
+
+| Pros | Cons |
+|------|------|
+| Massive community and ecosystem | Generic look unless heavily customised |
+| Pre-built components (modals, tooltips, etc.) | Heavier bundle than utility-first approaches |
+| Excellent documentation | Dark mode requires custom CSS overrides |
+| Easy to learn, familiar to most developers | Not very "RPG-like" out of the box |
+| Grid system well understood | |
+
+**Best for:** Rapid prototyping, teams familiar with Bootstrap.
+
+**Vue 3 component libraries:** [bootstrap-vue-next](https://bootstrap-vue-next.github.io/bootstrap-vue-next/)
+
+---
+
+### 3. Bulma
+![Bulma](screenshots/03-bulma.png)
+
+**What it is:** Modern CSS framework based on Flexbox, no JavaScript included.
+
+| Pros | Cons |
+|------|------|
+| Clean, modern design out of the box | No built-in JS (need to add your own) |
+| Pure CSS, no dependencies | Smaller ecosystem than Bootstrap/Tailwind |
+| Modular (import only what you need) | Dark theme requires manual effort |
+| Good progress bars and media objects | Less active development than alternatives |
+| Readable class naming convention | |
+
+**Best for:** Projects wanting clean, semantic CSS without JavaScript overhead.
+
+**Vue 3 component libraries:** [Oruga UI](https://oruga-ui.com/) (with Bulma theme)
+
+---
+
+### 4. DaisyUI ⭐ *Recommended*
+![DaisyUI](screenshots/04-daisyui.png)
+
+**What it is:** Tailwind CSS component library that adds semantic component classes.
+
+| Pros | Cons |
+|------|------|
+| Builds on Tailwind (easy migration from current setup!) | Depends on Tailwind (tied to Tailwind ecosystem) |
+| Beautiful pre-built themes (30+ including "night") | Some components may need customisation for RPG feel |
+| Semantic class names (`btn`, `card`, `badge`) | Less control than raw Tailwind for niche designs |
+| Minimal overhead (~3 KB on top of Tailwind) | Theme switching adds some complexity |
+| Easy dark mode via `data-theme` attribute | |
+| Excellent for RPG UI (cards, badges, progress bars) | |
+
+**Best for:** **This project!** Easiest migration path since we already use Tailwind. Adds polish without losing flexibility.
+
+**Vue 3 support:** Works natively with any Tailwind project. No Vue-specific wrapper needed.
+
+---
+
+### 5. Pico CSS
+![Pico CSS](screenshots/05-pico.png)
+
+**What it is:** Minimal, semantic, classless-first CSS framework.
+
+| Pros | Cons |
+|------|------|
+| Nearly zero classes needed (semantic HTML) | Limited component variety |
+| Built-in dark/light mode | Hard to customise for complex RPG UI |
+| Accessible by default | No grid system or layout utilities |
+| Very small footprint (~10 KB) | Cards, badges, tags need custom CSS |
+| Great form styling out of the box | |
+
+**Best for:** Simple pages, documentation, MVPs where speed matters more than RPG aesthetics.
+
+---
+
+### 6. NES.css ⭐ *Unique Option*
+![NES.css](screenshots/06-nes-css.png)
+
+**What it is:** Retro 8-bit NES-style CSS framework.
+
+| Pros | Cons |
+|------|------|
+| **Perfect RPG/gaming aesthetic!** | Requires "Press Start 2P" font (heavier load) |
+| Pixel-art styled buttons, containers, progress bars | Limited to 8-bit aesthetic (no flexibility) |
+| Fun, unique, memorable look for a game | Readability suffers at small sizes |
+| Easy to use (just add CSS classes) | Not suitable for mobile (small text) |
+| Great conversation starter | Niche—users may love it or hate it |
+
+**Best for:** A retro/nostalgic wizard RPG that embraces the 8-bit game aesthetic. Unique and memorable but polarising.
+
+---
+
+### 7. Water.css
+![Water.css](screenshots/07-water-css.png)
+
+**What it is:** A tiny classless CSS framework for quick styling.
+
+| Pros | Cons |
+|------|------|
+| Tiny (~2 KB), zero learning curve | Very limited styling options |
+| Drop-in: just add the stylesheet | No components, grid, or utilities |
+| Clean dark mode | Not suitable for complex RPG UI |
+| Good for prototyping | Everything looks generic |
+
+**Best for:** Quick prototypes or documentation pages, not for a game UI.
+
+---
+
+### 8. Open Props
+![Open Props](screenshots/08-open-props.png)
+
+**What it is:** CSS custom properties (design tokens) for consistent styling.
+
+| Pros | Cons |
+|------|------|
+| Provides design system tokens (colors, spacing, etc.) | Still need to write your own CSS |
+| Consistent, well-designed values | No pre-built components |
+| Tree-shakeable (import only used props) | Higher learning curve than component libs |
+| Works with any framework | Requires more effort than DaisyUI/Bootstrap |
+| Great for building a custom design system | |
+
+**Best for:** Teams wanting a well-designed foundation to build a custom RPG theme upon.
+
+---
+
+### 9. Shoelace (Web Components)
+![Shoelace](screenshots/09-shoelace.png)
+
+**What it is:** Framework-agnostic component library built on Web Components.
+
+| Pros | Cons |
+|------|------|
+| Framework-agnostic (works with Vue, React, etc.) | Web Components can have Vue integration quirks |
+| Beautiful, accessible components | Larger bundle than CSS-only solutions |
+| Built-in dark theme | Custom styling requires `::part()` selectors |
+| Form controls (password toggle, etc.) are polished | Less Vue-native than PrimeVue/Vuetify |
+| Good progress bars, badges, cards | |
+
+**Best for:** Projects that may switch frameworks or want native Web Components.
+
+---
+
+### 10. Sakura
+![Sakura](screenshots/10-sakura.png)
+
+**What it is:** A minimal classless CSS framework (similar to Water.css).
+
+| Pros | Cons |
+|------|------|
+| Extremely minimal (~2 KB) | Too simple for an RPG game UI |
+| Dark variant available | No components or layout utilities |
+| Drop-in, zero configuration | Limited customisation |
+| Good typography defaults | |
+
+**Best for:** Documentation, simple pages. Not recommended for a game UI.
+
+---
+
+### 11. PrimeFlex + PrimeVue
+![PrimeFlex](screenshots/11-primeflex.png)
+
+**What it is:** PrimeFlex is a utility CSS library; PrimeVue is a comprehensive Vue 3 component library.
+
+| Pros | Cons |
+|------|------|
+| **Most complete Vue 3 component library** | Heavier bundle (~30 KB+ for components) |
+| 90+ components (DataTable, Dialog, Charts, etc.) | PrimeFlex utility classes are less intuitive than Tailwind |
+| Built-in themes including dark modes | Can feel "enterprise-y" for a game |
+| Accessibility built into components | Migration from Tailwind requires effort |
+| Professional quality | Some advanced components need license |
+
+**Best for:** Feature-rich applications needing many pre-built components (modals, data tables, charts).
+
+**Vue 3 support:** [PrimeVue](https://primevue.org/) — native Vue 3 component library.
+
+---
+
+### 12. Fantasy Custom Theme
+![Fantasy Custom](screenshots/12-fantasy-custom.png)
+
+**What it is:** A hand-crafted CSS theme using Cinzel/Crimson Text fonts with fantasy RPG styling.
+
+| Pros | Cons |
+|------|------|
+| **Unique, immersive RPG aesthetic** | High maintenance (all custom CSS) |
+| Full creative control | No community/ecosystem |
+| Gold gradients, glowing effects, fantasy fonts | Requires design skills |
+| Perfect for a wizard RPG game | More CSS to maintain |
+| No framework dependencies | Need to build all components from scratch |
+
+**Best for:** A polished, production RPG game where a unique look is the priority.
+
+---
+
+## Recommendations
+
+### 🥇 Top Pick: DaisyUI (on Tailwind CSS)
+**Why:** Easiest migration from the current Tailwind setup. Just add `daisyui` as a Tailwind plugin and start using semantic component classes (`btn`, `card`, `badge`, `progress`, `table`). The "night" theme is dark-mode ready and looks great for an RPG. We keep all existing Tailwind utility classes while gaining beautiful pre-built components.
+
+### 🥈 Runner-Up: Fantasy Custom Theme + Tailwind
+**Why:** For maximum RPG immersion, combine Tailwind's utility classes with a hand-crafted fantasy theme (Cinzel fonts, gold gradients, glowing effects). More work, but the result is uniquely suited to a wizard game. Consider using Open Props for consistent design tokens.
+
+### 🥉 Honourable Mention: NES.css
+**Why:** If the game embraces a retro aesthetic, NES.css creates an instantly recognisable 8-bit RPG look. Fun and unique, but may limit the design as the game grows.
+
+### For Maximum Component Coverage: PrimeVue
+**Why:** If we need many pre-built interactive components (data tables, charts, dialogs, menus), PrimeVue offers the most complete Vue 3 component library with good theming.
+
+---
+
+## Migration Effort from Current Tailwind Setup
+
+| Framework | Effort | Notes |
+|-----------|--------|-------|
+| DaisyUI | 🟢 Low | Just add plugin, start using component classes alongside existing Tailwind |
+| Fantasy Custom | 🟡 Medium | Add custom CSS/fonts on top of existing Tailwind |
+| NES.css | 🟡 Medium | Replace Tailwind classes with NES.css classes |
+| Bootstrap 5 | 🔴 High | Full rewrite of all component markup |
+| PrimeVue | 🔴 High | Replace HTML with PrimeVue components |
+| Shoelace | 🔴 High | Replace HTML with Web Components |
+
+---
+
+## How to Run the Comparison Screenshots
+
+```bash
+cd frontend
+npx playwright test e2e/css-comparison.spec.ts
+```
+
+Screenshots are saved to `docs/css-comparison/screenshots/`.
+Individual HTML files in `docs/css-comparison/` can be opened in a browser to interact with each framework.
+
+---
+
+*Generated with Playwright screenshot tests. Each HTML file loads framework CSS via CDN for a fair side-by-side comparison.*
diff --git a/docs/css-comparison/screenshots/01-tailwind.png b/docs/css-comparison/screenshots/01-tailwind.png
new file mode 100644
index 0000000..1c0ab5d
Binary files /dev/null and b/docs/css-comparison/screenshots/01-tailwind.png differ
diff --git a/docs/css-comparison/screenshots/02-bootstrap.png b/docs/css-comparison/screenshots/02-bootstrap.png
new file mode 100644
index 0000000..80c8068
Binary files /dev/null and b/docs/css-comparison/screenshots/02-bootstrap.png differ
diff --git a/docs/css-comparison/screenshots/03-bulma.png b/docs/css-comparison/screenshots/03-bulma.png
new file mode 100644
index 0000000..1fdd8f8
Binary files /dev/null and b/docs/css-comparison/screenshots/03-bulma.png differ
diff --git a/docs/css-comparison/screenshots/04-daisyui.png b/docs/css-comparison/screenshots/04-daisyui.png
new file mode 100644
index 0000000..5570339
Binary files /dev/null and b/docs/css-comparison/screenshots/04-daisyui.png differ
diff --git a/docs/css-comparison/screenshots/05-pico.png b/docs/css-comparison/screenshots/05-pico.png
new file mode 100644
index 0000000..11d94ce
Binary files /dev/null and b/docs/css-comparison/screenshots/05-pico.png differ
diff --git a/docs/css-comparison/screenshots/06-nes-css.png b/docs/css-comparison/screenshots/06-nes-css.png
new file mode 100644
index 0000000..b868f04
Binary files /dev/null and b/docs/css-comparison/screenshots/06-nes-css.png differ
diff --git a/docs/css-comparison/screenshots/07-water-css.png b/docs/css-comparison/screenshots/07-water-css.png
new file mode 100644
index 0000000..71622d2
Binary files /dev/null and b/docs/css-comparison/screenshots/07-water-css.png differ
diff --git a/docs/css-comparison/screenshots/08-open-props.png b/docs/css-comparison/screenshots/08-open-props.png
new file mode 100644
index 0000000..b5d6a74
Binary files /dev/null and b/docs/css-comparison/screenshots/08-open-props.png differ
diff --git a/docs/css-comparison/screenshots/09-shoelace.png b/docs/css-comparison/screenshots/09-shoelace.png
new file mode 100644
index 0000000..95580f1
Binary files /dev/null and b/docs/css-comparison/screenshots/09-shoelace.png differ
diff --git a/docs/css-comparison/screenshots/10-sakura.png b/docs/css-comparison/screenshots/10-sakura.png
new file mode 100644
index 0000000..fcedf6b
Binary files /dev/null and b/docs/css-comparison/screenshots/10-sakura.png differ
diff --git a/docs/css-comparison/screenshots/11-primeflex.png b/docs/css-comparison/screenshots/11-primeflex.png
new file mode 100644
index 0000000..b074e06
Binary files /dev/null and b/docs/css-comparison/screenshots/11-primeflex.png differ
diff --git a/docs/css-comparison/screenshots/12-fantasy-custom.png b/docs/css-comparison/screenshots/12-fantasy-custom.png
new file mode 100644
index 0000000..e30cf1b
Binary files /dev/null and b/docs/css-comparison/screenshots/12-fantasy-custom.png differ
diff --git a/frontend/e2e/css-comparison.spec.ts b/frontend/e2e/css-comparison.spec.ts
new file mode 100644
index 0000000..09b4032
--- /dev/null
+++ b/frontend/e2e/css-comparison.spec.ts
@@ -0,0 +1,77 @@
+import { test } from '@playwright/test';
+import path from 'path';
+import http from 'http';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const frameworks = [
+  { file: '01-tailwind.html', name: '01-tailwind' },
+  { file: '02-bootstrap.html', name: '02-bootstrap' },
+  { file: '03-bulma.html', name: '03-bulma' },
+  { file: '04-daisyui.html', name: '04-daisyui' },
+  { file: '05-pico.html', name: '05-pico' },
+  { file: '06-nes-css.html', name: '06-nes-css' },
+  { file: '07-water-css.html', name: '07-water-css' },
+  { file: '08-open-props.html', name: '08-open-props' },
+  { file: '09-shoelace.html', name: '09-shoelace' },
+  { file: '10-sakura.html', name: '10-sakura' },
+  { file: '11-primeflex.html', name: '11-primeflex' },
+  { file: '12-fantasy-custom.html', name: '12-fantasy-custom' },
+];
+
+const screenshotDir = path.resolve(__dirname, '..', '..', 'docs', 'css-comparison', 'screenshots');
+const htmlDir = path.resolve(__dirname, '..', '..', 'docs', 'css-comparison');
+
+let server: http.Server;
+let serverPort: number;
+
+test.beforeAll(async () => {
+  server = http.createServer((req, res) => {
+    const basename = path.basename(req.url ?? '/');
+    const safeName = basename.endsWith('.html') ? basename : 'index.html';
+    const filePath = path.join(htmlDir, safeName);
+    const resolved = path.resolve(filePath);
+    if (!resolved.startsWith(htmlDir)) {
+      res.writeHead(403);
+      res.end('Forbidden');
+      return;
+    }
+    const content = fs.existsSync(resolved) ? fs.readFileSync(resolved) : null;
+    if (content) {
+      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+      res.end(content);
+    } else {
+      res.writeHead(404);
+      res.end('Not found');
+    }
+  });
+  await new Promise<void>((resolve) => {
+    server.listen(0, () => {
+      serverPort = (server.address() as { port: number }).port;
+      resolve();
+    });
+  });
+});
+
+test.afterAll(async () => {
+  await new Promise<void>((resolve) => server.close(() => resolve()));
+});
+
+for (const fw of frameworks) {
+  test(`screenshot – ${fw.name}`, async ({ page }) => {
+    await page.goto(`http://localhost:${serverPort}/${fw.file}`);
+
+    // Wait for external CSS/fonts/JS to load
+    await page.waitForLoadState('networkidle');
+    // Extra delay for web font rendering and JS execution (Tailwind CDN needs time)
+    await page.waitForTimeout(3000);
+
+    await page.screenshot({
+      path: path.join(screenshotDir, `${fw.name}.png`),
+      fullPage: true,
+    });
+  });
+}

Spell	Element	Power	Mana Cost
Fireball	🔥 Fire	45	30
Frost Nova	❄️ Ice	35	25
Lightning Bolt	⚡ Lightning	55	40
Earthquake	🌿 Earth	60	50
Spell	Element	Power	Mana Cost	Action
Fireball	🔥 Fire	45	30	Cast
Frost Nova	❄️ Ice	35	25	Cast
Lightning Bolt	⚡ Lightning	55	40	Cast
Earthquake	🌿 Earth	60	50	Cast