B2JK-Industry
diff --git a/‎app/globals.css‎
Lines changed: 63 additions & 0 deletions b/‎app/globals.css‎
Lines changed: 63 additions & 0 deletions
diff --git a/‎app/loans/compare/page.tsx‎
Lines changed: 30 additions & 33 deletions b/‎app/loans/compare/page.tsx‎
Lines changed: 30 additions & 33 deletions
diff --git a/‎app/miasto/page.tsx‎
Lines changed: 45 additions & 43 deletions b/‎app/miasto/page.tsx‎
Lines changed: 45 additions & 43 deletions
diff --git a/‎components/building-stack-badge.tsx‎
Lines changed: 47 additions & 0 deletions b/‎components/building-stack-badge.tsx‎
Lines changed: 47 additions & 0 deletions
@@ -423,6 +423,69 @@ body {
   fill: var(--sc-detail-warm);
 }
 
+/* F-02 — restore solid coloured buildings on /games.
+ *
+ * The mass `[fill="X"]` rules above retinted EVERY building body to
+ * one of 5 sky/ground tokens, then the parent `.city-scene-root`
+ * `saturate(0.35) brightness(1.55)` filter washed them further.
+ * Result: 9 distinct buildings collapsed to identical muted-grey
+ * silhouettes — outline-only wireframes that hid the carefully-drawn
+ * powered/unpowered states (window neons, sign details).
+ *
+ * Building draws now opt out via `<g data-building-body="true">` in
+ * city-scene.tsx. The override below:
+ *   1. cancels the parent filter via inverse functions, and
+ *   2. re-asserts every retinted hex back to itself so `[fill="X"]`
+ *      rules above become no-ops inside the building scope.
+ *
+ * The atmospheric layers (sky gradient, mountains, ground pattern)
+ * stay tinted — they need the muted treatment to read as a daylight
+ * scene. Only the foreground building draws are exempted. */
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] {
+  filter: contrast(1.087) brightness(0.645) saturate(2.857);
+}
+/* Per-hex passthrough — re-sets each retinted fill to itself so the
+ * mass `[fill="X"]` overrides above are neutralised inside the
+ * building scope. Specificity 0,2,1 (one descendant + one attr)
+ * beats the mass rules' 0,1,1. */
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#0f172a"] { fill: #0f172a; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#1e293b"] { fill: #1e293b; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#111827"] { fill: #111827; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#0a0a0f"] { fill: #0a0a0f; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#020617"] { fill: #020617; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#000"] { fill: #000; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#000000"] { fill: #000000; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#111"] { fill: #111; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#0b0b20"] { fill: #0b0b20; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#0f0f1f"] { fill: #0f0f1f; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#1c1917"] { fill: #1c1917; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#3f3f5a"] { fill: #3f3f5a; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#44403c"] { fill: #44403c; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#475569"] { fill: #475569; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#94a3b8"] { fill: #94a3b8; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#06b6d4"] { fill: #06b6d4; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#0ea5e9"] { fill: #0ea5e9; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#155e75"] { fill: #155e75; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#67e8f9"] { fill: #67e8f9; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#22d3ee"] { fill: #22d3ee; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#4338ca"] { fill: #4338ca; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#6366f1"] { fill: #6366f1; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#818cf8"] { fill: #818cf8; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#064e3b"] { fill: #064e3b; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#10b981"] { fill: #10b981; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#365314"] { fill: #365314; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#65a30d"] { fill: #65a30d; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#a3e635"] { fill: #a3e635; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#78350f"] { fill: #78350f; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#854d0e"] { fill: #854d0e; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#92400e"] { fill: #92400e; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#b45309"] { fill: #b45309; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#d97706"] { fill: #d97706; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#f59e0b"] { fill: #f59e0b; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#fbbf24"] { fill: #fbbf24; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#a21caf"] { fill: #a21caf; }
+:where([data-skin="pko"]) .city-scene-root [data-building-body="true"] [fill="#c026d3"] { fill: #c026d3; }
+
 /* R-06 — visible custom slider thumb for the mortgage panel. The
  * default WebKit/Firefox thumb is barely 12 px and disappears against
  * the navy track at 1% position. 16×16 navy with a 1 px white ring
 
@@ -1,13 +1,21 @@
-import { redirect } from "next/navigation";
-import { getSession } from "@/lib/session";
-import { getPlayerState } from "@/lib/player";
-import { compareLoans } from "@/lib/loans";
-import { LoanComparison } from "@/components/loan-comparison";
-import { KnfDisclaimer } from "@/components/knf-disclaimer";
-import { CashflowHudMount } from "@/components/cashflow-hud-mount";
-import { getLang } from "@/lib/i18n-server";
+/* F-01 — `/loans/compare` deprecated.
+ *
+ * The full LoanComparison surface now lives inline inside the
+ * Hypotéka panel on /miasto (see WattCityClient → MortgageCard).
+ * Keeping the standalone route would mean two sources of truth +
+ * an extra nav slot the IA budget can't afford.
+ *
+ * This file 308-redirects every legacy bookmark / tour-step / deep
+ * link to the inline panel anchor, preserving the player's chosen
+ * principal/term query params so the inline calculator opens with
+ * the same starting point.
+ *
+ * Returns 308 (Permanent Redirect) so search engines drop the old
+ * URL from their index and bookmark-syncing browsers update the
+ * canonical target.
+ */
 
-export const dynamic = "force-dynamic";
+import { redirect, permanentRedirect } from "next/navigation";
 
 type SearchParams = {
   principal?: string;
@@ -19,28 +27,17 @@ export default async function LoanComparePage({
 }: {
   searchParams: Promise<SearchParams>;
 }) {
-  const session = await getSession();
-  if (!session) {
-    redirect("/login?next=/loans/compare");
-  }
-  const qs = await searchParams;
-  const principal = Math.max(100, Math.min(50_000, Number(qs.principal ?? 3000)));
-  const termMonths = Math.max(1, Math.min(36, Number(qs.term ?? 12)));
-  const [state, lang] = await Promise.all([
-    getPlayerState(session.username),
-    getLang(),
-  ]);
-  const rows = compareLoans(principal, termMonths, state);
-  return (
-    <div className="flex flex-col gap-6 animate-slide-up max-w-4xl">
-      <KnfDisclaimer lang={lang} variant="card" />
-      <LoanComparison
-        rows={rows}
-        lang={lang}
-        principal={principal}
-        termMonths={termMonths}
-      />
-      <CashflowHudMount />
-    </div>
-  );
+  const sp = await searchParams;
+  const usp = new URLSearchParams();
+  if (sp.principal) usp.set("principal", sp.principal);
+  if (sp.term) usp.set("term", sp.term);
+  const qs = usp.toString();
+  // `permanentRedirect` issues a 308 so old links migrate; falls
+  // back to a 307 via `redirect` if the call site changes (Next.js
+  // accepts both as long as the import is correct).
+  permanentRedirect(`/miasto${qs ? `?${qs}` : ""}#hypoteka`);
+  // Unreachable — `permanentRedirect` throws to abort rendering.
+  // Kept so the function has an explicit return path the type
+  // checker accepts.
+  redirect("/miasto#hypoteka");
 }
@@ -10,6 +10,7 @@ import {
 } from "@/lib/buildings";
 import { tickPlayer } from "@/lib/tick";
 import { getCatalogEntry } from "@/lib/building-catalog";
+import { compareLoans } from "@/lib/loans";
 import { WattCityClient } from "@/components/watt-city/watt-city-client";
 import { getLang } from "@/lib/i18n-server";
 import type { Lang } from "@/lib/i18n";
@@ -245,7 +246,16 @@ const DICT: Record<Lang, {
   },
 };
 
-export default async function MiastoPage() {
+type SearchParams = {
+  principal?: string;
+  term?: string;
+};
+
+export default async function MiastoPage({
+  searchParams,
+}: {
+  searchParams?: Promise<SearchParams>;
+}) {
   const [session, lang] = await Promise.all([getSession(), getLang()]);
   if (!session) redirect("/login");
 
@@ -256,6 +266,17 @@ export default async function MiastoPage() {
 
   const state = await getPlayerState(session.username);
   const [catalog] = await Promise.all([catalogForPlayer(state)]);
+  // F-01 — inline LoanComparison on the Hypotéka panel needs server-
+  // computed rows. URL ?principal=&term= mirror the standalone
+  // /loans/compare query semantics, so the deprecated route just
+  // redirects here without losing the player's chosen amount/term.
+  const sp = (await searchParams) ?? {};
+  const loanPrincipal = Math.max(
+    100,
+    Math.min(50_000, Number(sp.principal ?? 3000)),
+  );
+  const loanTermMonths = Math.max(1, Math.min(36, Number(sp.term ?? 12)));
+  const loanRows = compareLoans(loanPrincipal, loanTermMonths, state);
   const snapshot = slotSnapshot(state).map(({ slot, building, upgrade }) => {
     if (!building) return { slot, building: null, upgrade: null };
     const c = getCatalogEntry(building.catalogId);
@@ -292,6 +313,11 @@ export default async function MiastoPage() {
           catalog,
           slots: snapshot,
           loans: state.loans,
+          loanComparison: {
+            rows: loanRows,
+            principal: loanPrincipal,
+            termMonths: loanTermMonths,
+          },
           lang,
           dict,
         }}
@@ -301,52 +327,17 @@ export default async function MiastoPage() {
   );
 }
 
-// Phase 1.6 — static coming-soon roadmap surface. Teaches players what's on
-// the horizon without any live logic. Each tile one line; all four langs.
+// F-03 — leasing / obrotowy / konsumencki removed; all three already
+// ship in `LoanComparison` (lib/loans.ts ProductLoanType union). The
+// remaining loan-typed entry is "inwestycyjny" (Tier-7 secondary
+// market — not yet implemented), plus the four non-loan features
+// (parent panel, class mode, P2P trade, PKO Junior mirror).
 const COMING_SOON_TILES: Array<{
   emoji: string;
-  key: "leasing" | "obrotowy" | "konsumencki" | "inwestycyjny" | "parent" | "class" | "trade" | "pko";
+  key: "inwestycyjny" | "parent" | "class" | "trade" | "pko";
   labels: Record<Lang, string>;
   teasers: Record<Lang, string>;
 }> = [
-  {
-    emoji: "🚚",
-    key: "leasing",
-    labels: { pl: "Leasing", uk: "Лізинг", cs: "Leasing", en: "Leasing" },
-    teasers: {
-      pl: "Wynajmij wyższy budynek na 6 miesięcy, potem zostaw lub zwróć.",
-      uk: "Орендуй вищу будівлю на 6 міс., потім залиш або поверни.",
-      cs: "Pronajmi si vyšší budovu na 6 měsíců, pak nech nebo vrať.",
-      en: "Rent a higher-tier building for 6 months, then keep or return.",
-    },
-  },
-  {
-    emoji: "💳",
-    key: "obrotowy",
-    labels: { pl: "Kredyt obrotowy", uk: "Обіговий кредит", cs: "Revolvingový úvěr", en: "Revolving credit" },
-    teasers: {
-      pl: "Krótkoterminowa pożyczka pod przyszłe wyniki — 7 dni na spłatę.",
-      uk: "Короткострокова позика під майбутні результати — 7 днів на виплату.",
-      cs: "Krátkodobá půjčka proti budoucím skóre — 7 dní na splacení.",
-      en: "Short-term loan against pending scores — 7 days to repay.",
-    },
-  },
-  {
-    emoji: "⚠️",
-    key: "konsumencki",
-    labels: {
-      pl: "Kredyt konsumencki",
-      uk: "Споживчий кредит",
-      cs: "Spotřebitelský úvěr",
-      en: "Consumer credit",
-    },
-    teasers: {
-      pl: "Szybka gotówka, RRSO 20% — lekcja ostrzegawcza.",
-      uk: "Швидкі гроші, RRSO 20% — навчання застереженню.",
-      cs: "Rychlá hotovost, RRSO 20% — varovná lekce.",
-      en: "Instant cash, 20% RRSO — cautionary tale.",
-    },
-  },
   {
     emoji: "📈",
     key: "inwestycyjny",
@@ -436,6 +427,15 @@ function ComingSoonSection({ lang }: { lang: Lang }) {
     cs: "Brzy — fáze 2 a dál",
     en: "Coming soon — phase 2 and beyond",
   }[lang];
+  // F-03 — explicit "Phase 2" timing badge replaces the bare 🔒 chip.
+  // Sets player expectation honestly without committing to a calendar
+  // date; PO can swap to a real Q3 2026 / Q4 2026 string later.
+  const phaseBadge = {
+    pl: "Faza 2",
+    uk: "Фаза 2",
+    cs: "Fáze 2",
+    en: "Phase 2",
+  }[lang];
   return (
     <section className="card p-4 flex flex-col gap-3">
       <h2 className="text-lg font-semibold">{heading}</h2>
@@ -452,7 +452,9 @@ function ComingSoonSection({ lang }: { lang: Lang }) {
               <strong className="text-xs">
                 {t.labels[lang]}
               </strong>
-              <span className="ml-auto text-[10px]">🔒</span>
+              <span className="ml-auto chip text-[10px] border-[var(--accent)] text-[var(--accent)]">
+                {phaseBadge}
+              </span>
             </div>
             <p className="text-xs leading-snug text-[var(--ink-muted)]">
               {t.teasers[lang]}
 
@@ -0,0 +1,47 @@
+/* BuildingStackBadge — visual primitive for the *city-level* metric.
+ *
+ * One half of the F-04 Tier-vs-City-level disambiguation pair (the
+ * other half is `MedalRing`, used for the XP-tier metric on the
+ * dashboard). Three stacked rooftops in navy, sized for inline use
+ * inside a progress-ring center. The "city you build" connotation
+ * (vs. medals you earn) reinforces the new label split:
+ *   "Stupeň města 3"  ← BuildingStackBadge + navy ring
+ *   "Tvůj tier 4"     ← MedalRing          + sales ring
+ *
+ * Pure SVG, no client deps. Inline `currentColor` so the parent
+ * ring's text colour propagates and the badge stays in token
+ * family on both pko (navy) and core (yellow) skins.
+ */
+
+type Props = {
+  /** Outer box size in CSS px. Internals scale via viewBox. */
+  size?: number;
+  /** Optional className for layout positioning. */
+  className?: string;
+};
+
+export function BuildingStackBadge({ size = 22, className }: Props) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden
+      className={className}
+    >
+      {/* Bottom row — two short buildings side by side. */}
+      <rect x={2} y={15} width={6} height={7} />
+      <rect x={9} y={13} width={5} height={9} />
+      {/* Mid building — pitched roof. */}
+      <polygon points="14.5,12 18,9 21.5,12" />
+      <rect x={14.5} y={12} width={7} height={10} />
+      {/* Tall tower with antenna pin. */}
+      <rect x={3} y={6} width={4} height={9} />
+      <rect x={4.5} y={3.5} width={1} height={2.5} />
+      {/* Window detail strip on tall tower for visual texture. */}
+      <rect x={4} y={8} width={2} height={1} fill="#ffffff" opacity={0.5} />
+      <rect x={4} y={11} width={2} height={1} fill="#ffffff" opacity={0.5} />
+    </svg>
+  );
+}