games: a ladder you climb against the clock

internal/web/templates/games.html

@@ -74,6 +74,22 @@
         </p>
       </a>
 
+      <a href="/games/trivia"
+         class="group rounded-3xl bg-[color:var(--card)] p-6 shadow-pete border-2 border-[color:var(--ink)]/10 hover:-translate-y-0.5 hover:shadow-pete-lg transition">
+        <div class="flex items-center gap-3">
+          <span class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-[color:var(--accent)]/25 text-2xl">🧠</span>
+          <div class="min-w-0">
+            <h3 class="font-display text-xl font-bold">Trivia</h3>
+            <p class="text-sm text-[color:var(--ink)]/60">Climb the ladder, or take the money.</p>
+          </div>
+          <span class="ml-auto shrink-0 rounded-full bg-theme-gaming px-3 py-1 text-xs font-bold uppercase tracking-wider text-white">Open</span>
+        </div>
+        <p class="mt-4 text-sm text-[color:var(--ink)]/70">
+          {{.Rungs}} questions, and every right answer multiplies what you're holding. A wrong
+          one loses the lot. Answer fast: the multiple decays as the clock runs.
+        </p>
+      </a>
+
       {{range .Soon}}
       <div class="rounded-3xl bg-[color:var(--card)]/60 p-6 shadow-pete border-2 border-dashed border-[color:var(--ink)]/15">
         <div class="flex items-center gap-3">