feat(ux): PR-P G-29 + G-30 + G-34 — archive empty state, mobile scroll, +3 AI kinds

G-29 — `/sin-slavy` AI archive empty state.
User reported "nikde som nenašiel archiv starych hier". Section
existed (rendered when `pastAiWithTop.length > 0`) but was invisible
when no archive entries existed yet — feature looked missing. Now
the heading + count chip render unconditionally, with an empty-
state card "Archive fills up soon" + 4-locale copy when no past
challenges have expired yet. Players see WHERE past medals will
land before any have arrived.

G-30 — three new AI game kinds (schema only).
Sprint H foundation for renderer + research-seed work. Added:
  - `rank-list` — drag 4 items into magnitude order; teaches
    "which is bigger" intuition for budget categories
  - `estimate-range` — slider with a correct band, finer-grained
    than `price-guess`'s discrete options
  - `odd-one-out` — pick the item that doesn't fit the group;
    cheapest to author, reinforces categorisation
Schemas land in `lib/ai-pipeline/types.ts` + extend the
discriminated union; SeedKind in research.ts adds the three so
schemaForKind narrows + the generator's kindRules table stays
exhaustive (stub system-prompt entries because no research seed
emits these kinds yet — client renderers ship in Sprint H).

G-34 — mobile horizontal scroll for hero / CityScene.
User feedback (screenshot 8:44): the 20-slot row gets cropped on
narrow viewports; on phones the buildings shrink below readable
width. Added overflow-x:auto + min-width:720px on
`.city-skyline-hero-root` and `.city-scene-viewport` for sub-
640 px viewports; desktop unchanged. Touch-action: pan-x
pinch-zoom for natural mobile scrubbing.

Plus G-31 audit straggler — `app/sin-slavy/page.tsx` archive
heading deduped (had a duplicate when archive was non-empty).

Validation:
- pnpm typecheck → 0 errors

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: B2JK-Industry

app/globals.css

@@ -195,10 +195,26 @@ body {
 }
 
 .city-scene-viewport {
-  touch-action: pinch-zoom;
-  overflow: auto;
+  /* G-34 — same pattern as .city-skyline-hero-root: horizontal
+   * scroll under 640 px so the 20-slot row doesn't compress to
+   * unreadable widths on phones. */
+  touch-action: pan-x pinch-zoom;
+  overflow-x: auto;
+  overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
 }
+.city-scene-viewport > svg {
+  min-width: 720px;
+}
+@media (min-width: 640px) {
+  .city-scene-viewport {
+    overflow-x: visible;
+    overflow-y: visible;
+  }
+  .city-scene-viewport > svg {
+    min-width: 0;
+  }
+}
 
 /* City-scene SVG: neon night palette is core-skin intent. Under pko we
  * blend two strategies — a global filter to mute saturation, plus
@@ -536,6 +552,31 @@ body {
  * outline so they read against the sky. */
 .city-skyline-hero-root {
   background: #ffffff;
+  /* G-34 — horizontal scroll on narrow viewports.
+   * SVG aspect is 1800:430 ≈ 4.2:1; below ~480 px viewport the slot
+   * width drops under 26 px and L-pills + glyphs stop reading. The
+   * SVG inside opts into `min-width` so the scene keeps a legible
+   * minimum, and the parent allows horizontal overflow with
+   * touch-pinch + iOS momentum. Desktop (640+ px) is wide enough to
+   * fit edge-to-edge so the rule is mobile-only. */
+  overflow-x: auto;
+  touch-action: pan-x pinch-zoom;
+  -webkit-overflow-scrolling: touch;
+}
+.city-skyline-hero-root > svg {
+  /* Force a readable horizontal floor (≈ 720 px → 18-px slot avg);
+   * desktop SVG still scales to 100 % via Tailwind's w-full. */
+  min-width: 720px;
+}
+@media (min-width: 640px) {
+  .city-skyline-hero-root {
+    /* Above 640 px the canvas fits without scroll — drop the
+     * overflow so the focus ring + drop shadow aren't clipped. */
+    overflow-x: visible;
+  }
+  .city-skyline-hero-root > svg {
+    min-width: 0;
+  }
 }
 /* PR-N — the prior `rect[fill]` blanket stroke (R-11 era) outlined
  * EVERY rect in the SVG: building bodies, ground zones, AND the

app/sin-slavy/page.tsx

@@ -203,15 +203,41 @@ export default async function HallOfFamePage() {
         </section>
       )}
 
-      {/* Archive of expired AI games — permanent top-3 medals */}
-      {pastAiWithTop.length > 0 && (
-        <section className="flex flex-col gap-4">
+      {/* G-29 — Archive of expired AI games. Always rendered (with
+          empty state when no archive yet) so players can see WHERE
+          past challenges land instead of guessing the feature is
+          missing. The header chip surfaces the count. */}
+      <section className="flex flex-col gap-4">
+        <div className="flex flex-wrap items-baseline gap-3">
           <h2 className="section-heading text-xl sm:text-2xl">
             {t.aiArchiveTitle}
           </h2>
-          <p className="text-sm text-[var(--ink-muted)] max-w-2xl">
-            {t.aiArchiveBody}
-          </p>
+          <span
+            className="chip text-[11px] border-[var(--accent)] text-[var(--accent)]"
+            aria-label={`${pastAiWithTop.length} archived`}
+          >
+            {pastAiWithTop.length}
+          </span>
+        </div>
+        <p className="text-sm text-[var(--ink-muted)] max-w-2xl">
+          {t.aiArchiveBody}
+        </p>
+        {pastAiWithTop.length === 0 ? (
+          <div className="card p-6 flex flex-col items-center gap-2 text-center">
+            <span aria-hidden className="text-3xl">
+              📜
+            </span>
+            <p className="font-semibold">{t.aiArchiveEmptyTitle}</p>
+            <p className="text-sm text-[var(--ink-muted)] max-w-md">
+              {t.aiArchiveEmptyBody}
+            </p>
+          </div>
+        ) : null}
+      </section>
+      {pastAiWithTop.length > 0 && (
+        <section className="flex flex-col gap-4">
+          {/* Inline duplicate header guard kept so existing block below
+              renders unchanged when archive has entries. */}
           <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
             {pastAiWithTop.map(({ record, top }) => {
               const date = new Date(record.generatedAt);

lib/ai-pipeline/generate.ts

@@ -13,6 +13,9 @@ import {
   BudgetSpecSchema,
   WhatIfSpecSchema,
   ChartReadSpecSchema,
+  RankListSpecSchema,
+  EstimateRangeSpecSchema,
+  OddOneOutSpecSchema,
   LocalizedSpecSchema,
   type GameSpec,
   type LocalizedSpec,
@@ -37,6 +40,9 @@ function schemaForKind(kind: SeedKind) {
     case "budget-allocate": return BudgetSpecSchema;
     case "what-if": return WhatIfSpecSchema;
     case "chart-read": return ChartReadSpecSchema;
+    case "rank-list": return RankListSpecSchema;
+    case "estimate-range": return EstimateRangeSpecSchema;
+    case "odd-one-out": return OddOneOutSpecSchema;
   }
 }
 
@@ -171,6 +177,24 @@ function buildPlSystemPrompt(kind: SeedKind): string {
       "- Chart should represent real Polish macro/finance data when possible (NBP rates, WIG20, Tauron tariffs over years, inflation CPI).",
       "- correctIndex is the answer derivable from the chart data.",
     ],
+    // G-30 — Sprint H research-seed kinds. The generator's prompt
+    // surfaces are stubs because no research seed currently emits
+    // these; client renderers ship in Sprint H. Listed here so the
+    // Record<SeedKind, …> constraint stays exhaustive without runtime
+    // unreachable-branch warnings.
+    "rank-list": [
+      "You are producing a RANK-LIST spec — drag 4 items into magnitude order.",
+      "Schema: {kind:'rank-list', prompt, items:[4 strings], correctOrder:[4 ints 0-3], direction:'high-to-low'|'low-to-high', unitLabel, explanation, xpPerCorrect:10-40}.",
+    ],
+    "estimate-range": [
+      "You are producing an ESTIMATE-RANGE spec — slider with a correct band.",
+      "Schema: {kind:'estimate-range', question, unit, domainMin, domainMax, step, correctMin, correctMax, explanation, xpReward:10-60}.",
+      "- correctMin–correctMax band should be 10–30 % of the domain.",
+    ],
+    "odd-one-out": [
+      "You are producing an ODD-ONE-OUT spec — pick the item that doesn't fit.",
+      "Schema: {kind:'odd-one-out', prompt, items:[4 strings], oddIndex:0-3, category, explanation, xpPerCorrect:10-40}.",
+    ],
   };
 
   return [

lib/ai-pipeline/research.ts

@@ -24,7 +24,13 @@ export type SeedKind =
   | "calc-sprint"
   | "budget-allocate"
   | "what-if"
-  | "chart-read";
+  | "chart-read"
+  // G-30 Sprint H — schemas already in types.ts; research seeds +
+  // client renderers ship next sprint. Listed here so schemaForKind
+  // can narrow + the generator's kindRules table stays exhaustive.
+  | "rank-list"
+  | "estimate-range"
+  | "odd-one-out";
 export type SeedDifficulty = "easy" | "medium" | "hard";
 
 // Phase 2.2.3 metadata — every theme carries an age target + subject tag to

lib/ai-pipeline/types.ts

@@ -197,6 +197,65 @@ export const ChartReadSpecSchema = z.object({
   xpPerCorrect: z.number().int().min(10).max(40),
 });
 
+/* ---------- G-30 — Sprint H proposed kinds ----------
+ *
+ * Three new kinds added as schema only; client components ship in
+ * Sprint H. The discriminated union below lists them so generator
+ * prompts + content-hash + spec validators recognise the kind once
+ * the client renderers land.
+ *
+ * Why these three (UX rationale per docs/ux-audit/sprint-H.md):
+ *   - rank-list: drag-to-reorder by magnitude, distinct from `order`
+ *     which is sequence/timeline. Teaches "which is bigger" intuition
+ *     for budget categories (rent > food > internet > coffee, etc.).
+ *   - estimate-range: continuous-slider numeric estimation with a
+ *     correct band, finer-grained than `price-guess`'s discrete
+ *     options. Teaches "feel for the right order of magnitude" on
+ *     bills, salaries, savings goals.
+ *   - odd-one-out: 4 cards, pick the one that doesn't fit the group.
+ *     Reinforces categorisation (PKO products vs competitor, savings
+ *     vs spending, energy source taxonomy). Cheapest to author.
+ */
+
+export const RankListSpecSchema = z.object({
+  kind: z.literal("rank-list"),
+  prompt: z.string().min(8).max(200),
+  /** Rendered shuffled to the player; `correctOrder` is the canonical
+   *  high-to-low (or low-to-high — see `direction`) sequence. */
+  items: z.array(z.string().min(1).max(80)).length(4),
+  correctOrder: z.array(z.number().int().min(0).max(3)).length(4),
+  direction: z.enum(["high-to-low", "low-to-high"]),
+  unitLabel: z.string().max(40),
+  explanation: z.string().min(10).max(300),
+  xpPerCorrect: z.number().int().min(10).max(40),
+});
+
+export const EstimateRangeSpecSchema = z.object({
+  kind: z.literal("estimate-range"),
+  question: z.string().min(8).max(200),
+  unit: z.string().min(1).max(20),
+  /** Slider domain. Player picks a single value; `correctMin`-
+   *  `correctMax` defines the accepted band. Width should be 10-30 %
+   *  of the domain to keep the game winnable but not trivial. */
+  domainMin: z.number(),
+  domainMax: z.number(),
+  step: z.number().min(0.0001),
+  correctMin: z.number(),
+  correctMax: z.number(),
+  explanation: z.string().min(10).max(300),
+  xpReward: z.number().int().min(10).max(60),
+});
+
+export const OddOneOutSpecSchema = z.object({
+  kind: z.literal("odd-one-out"),
+  prompt: z.string().min(8).max(200),
+  items: z.array(z.string().min(1).max(80)).length(4),
+  oddIndex: z.number().int().min(0).max(3),
+  category: z.string().max(60),
+  explanation: z.string().min(10).max(300),
+  xpPerCorrect: z.number().int().min(10).max(40),
+});
+
 export const GameSpecSchema = z.discriminatedUnion("kind", [
   QuizSpecSchema,
   ScrambleSpecSchema,
@@ -210,6 +269,9 @@ export const GameSpecSchema = z.discriminatedUnion("kind", [
   BudgetSpecSchema,
   WhatIfSpecSchema,
   ChartReadSpecSchema,
+  RankListSpecSchema,
+  EstimateRangeSpecSchema,
+  OddOneOutSpecSchema,
 ]);
 export type GameSpec = z.infer<typeof GameSpecSchema>;
 

lib/locales/cs.ts

@@ -325,6 +325,9 @@ const cs: typeof plDict = {
     aiArchiveTitle: "Archiv AI výzev",
     aiArchiveBody:
       "Medaile za každou minulou AI výzvu — zůstávají tu natrvalo, i když samotná hra už vypršela.",
+    aiArchiveEmptyTitle: "Archiv se brzy zaplní",
+    aiArchiveEmptyBody:
+      "První AI výzvy právě dokončují svůj cyklus — jakmile vyprší, top-3 medaile zůstanou zde natrvalo. Zahraj dnes a buď první v archivu.",
     liveMedalNote:
       "Top 3 ve chvíli vypršení hry získávají medaili natrvalo. Níže aktuální pozice — mění se živě.",
     leaderLink: "Celá liga →",

lib/locales/en.ts

@@ -325,6 +325,9 @@ const en: typeof plDict = {
     aiArchiveTitle: "AI challenge archive",
     aiArchiveBody:
       "Medals from every past AI challenge — they stay here forever, even after the game itself expired.",
+    aiArchiveEmptyTitle: "Archive fills up soon",
+    aiArchiveEmptyBody:
+      "The first AI challenges are wrapping their cycle — once they expire, top-3 medals stay here forever. Play today to be first in the archive.",
     liveMedalNote:
       "Top 3 at the moment the game expires earns a permanent medal. Current standings below — they update live.",
     leaderLink: "Full league →",

lib/locales/pl.ts

@@ -323,6 +323,9 @@ const pl = {
     aiArchiveTitle: "Archiwum wyzwań AI",
     aiArchiveBody:
       "Medale za każde minione AI wyzwanie — zostają tu na stałe, nawet po wygaśnięciu samej gry.",
+    aiArchiveEmptyTitle: "Archiwum wkrótce się zapełni",
+    aiArchiveEmptyBody:
+      "Pierwsze AI wyzwania właśnie kończą swój cykl — gdy wygasną, top-3 medale zostaną tu na stałe. Zagraj dziś, żeby być pierwszym w archiwum.",
     liveMedalNote:
       "Top 3 w chwili gdy gra wygaśnie dostaje medal na stałe. Poniżej bieżące pozycje — zmieniają się na żywo.",
     leaderLink: "Cała liga →",

lib/locales/uk.ts

@@ -325,6 +325,9 @@ const uk: typeof plDict = {
     aiArchiveTitle: "Архів AI-викликів",
     aiArchiveBody:
       "Медалі з кожного минулого AI-виклику — залишаються тут назавжди, навіть після того, як сама гра вичерпала час.",
+    aiArchiveEmptyTitle: "Архів скоро заповниться",
+    aiArchiveEmptyBody:
+      "Перші AI-виклики саме завершують свій цикл — щойно вони вичерпають час, топ-3 медалі залишаться тут назавжди. Зіграй сьогодні, щоб бути першим в архіві.",
     liveMedalNote:
       "Топ-3 на момент завершення гри отримують медаль назавжди. Нижче поточні позиції — оновлюються в реальному часі.",
     leaderLink: "Вся ліга →",