portrait-only: drop landscape rotate prompt + lock to portrait

- Remove RotatePrompt (the "rotate to landscape" overlay) — the app is portrait
  now, so it only blocked the UI.
- page.tsx: best-effort orientation lock switched landscape → portrait.
- Add Playwright-based store-screenshot + icon scripts (scripts/shots.js,
  game.js, icon.js); generated images are gitignored.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/page.tsx

@@ -22,7 +22,6 @@ import { ResumeGameBar } from "@/components/online/ResumeGameBar";
 import { CelebrationOverlay } from "@/components/online/CelebrationOverlay";
 import { ErrorBoundary } from "@/components/ErrorBoundary";
 import { PublicProfileModal } from "@/components/online/PublicProfileModal";
-import { RotatePrompt } from "@/components/online/RotatePrompt";
 import { CapacitorBack } from "@/components/CapacitorBack";
 import { useSessionStore } from "@/lib/session-store";
 import { useGameStore } from "@/lib/game-store";
@@ -192,12 +191,11 @@ export default function Page() {
     };
   }, [init]);
 
-  // Landscape-first app (UNO-style): best-effort lock the whole app to landscape
-  // on Android / installed PWA. iOS & desktop reject it harmlessly; the
-  // RotatePrompt covers the portrait case there.
+  // Portrait-first app: best-effort lock the whole app to portrait on Android /
+  // installed PWA. iOS & desktop reject it harmlessly.
   useEffect(() => {
     const o = (screen as unknown as { orientation?: { lock?: (m: string) => Promise<void> } }).orientation;
-    o?.lock?.("landscape").catch(() => {});
+    o?.lock?.("portrait").catch(() => {});
   }, []);
 
   return (
@@ -211,7 +209,6 @@ export default function Page() {
         <ResumeGameBar />
         <CelebrationOverlay />
         <PublicProfileModal />
-        <RotatePrompt />
       </ErrorBoundary>
       <CapacitorBack />
       {loading && null}

src/components/online/RotatePrompt.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { RotateCcw } from "lucide-react";
-import { useI18n } from "@/lib/i18n";
-
-/**
- * Landscape-first nudge for the game table. The Hokm table plays best wide
- * (UNO-style), so when a phone is held in portrait we cover the table with a
- * "rotate your device" prompt. iOS/Safari can't be force-rotated, so this is the
- * reliable cross-platform path. A "play anyway" escape hatch avoids trapping
- * users whose OS rotation-lock is on.
- */
-export function RotatePrompt() {
-  const { t } = useI18n();
-  const [portrait, setPortrait] = useState(false);
-  const [dismissed, setDismissed] = useState(false);
-
-  useEffect(() => {
-    const check = () => {
-      const isPortrait = window.innerHeight > window.innerWidth;
-      // Only nudge on phone-sized screens (smaller side ≤ ~820px); desktops/wide
-      // tablets are already roomy enough.
-      const isPhone = Math.min(window.innerWidth, window.innerHeight) <= 820;
-      setPortrait(isPortrait && isPhone);
-    };
-    check();
-    window.addEventListener("resize", check);
-    window.addEventListener("orientationchange", check);
-    return () => {
-      window.removeEventListener("resize", check);
-      window.removeEventListener("orientationchange", check);
-    };
-  }, []);
-
-  if (!portrait || dismissed) return null;
-
-  return (
-    <div className="fixed inset-0 z-[80] flex flex-col items-center justify-center gap-6 bg-navy-950/96 backdrop-blur-md p-8 text-center safe-top safe-x">
-      <RotateCcw className="size-20 text-gold-400 motion-safe:animate-[rotateHint_2.4s_ease-in-out_infinite]" />
-      <h2 className="text-2xl font-black gold-text">{t("rotate.title")}</h2>
-      <p className="max-w-xs leading-8 text-cream/70">{t("rotate.desc")}</p>
-      <button
-        onClick={() => setDismissed(true)}
-        className="mt-2 text-sm text-cream/45 underline underline-offset-4 hover:text-cream/70"
-      >
-        {t("rotate.anyway")}
-      </button>
-
-      <style>{`
-        @keyframes rotateHint {
-          0%, 40% { transform: rotate(0deg); }
-          60%, 100% { transform: rotate(-90deg); }
-        }
-      `}</style>
-    </div>
-  );
-}