refactor(ui): resolve mobile layout and HMR findings for app shell and nav rail

src/ui/AppShell.tsx

@@ -8,7 +8,13 @@ interface AppShellProps {
 
 export function AppShell({ nav, center, right }: AppShellProps) {
   return (
-    <div className="grid min-h-dvh grid-cols-[auto_1fr] md:grid-cols-[14rem_1fr_auto] text-slate-100">
+    <div
+      className={`grid min-h-dvh text-slate-100 ${
+        right
+          ? 'grid-cols-[auto_1fr] md:grid-cols-[14rem_1fr_auto]'
+          : 'grid-cols-[auto_1fr] md:grid-cols-[14rem_1fr]'
+      }`}
+    >
       <div className="border-slate-800 border-r bg-slate-950">{nav}</div>
       <main className="overflow-y-auto p-6">{center}</main>
       {right ? (

src/ui/NavRail.tsx

@@ -95,8 +95,8 @@ export function NavRail() {
   ];
 
   return (
-    <div className="flex h-full flex-col p-4">
-      <div className="mb-8 flex items-center justify-between px-2">
+    <div className="flex h-full flex-col p-2 md:p-4">
+      <div className="mb-8 hidden items-center justify-between px-2 md:flex">
         <span className="bg-gradient-to-r from-amber-400 via-amber-200 to-amber-500 bg-clip-text font-extrabold text-lg text-transparent tracking-wider">
           IDLEGAME
         </span>
@@ -113,17 +113,17 @@ export function NavRail() {
               key={item.id}
               type="button"
               onClick={() => gameRuntime.setActivePanel(item.id)}
-              className={`relative flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200 ${
+              className={`relative flex cursor-pointer items-center justify-center md:justify-start gap-3 rounded-lg px-2.5 py-2.5 md:px-3 text-sm font-medium transition-all duration-200 ${
                 isActive
                   ? 'border border-amber-500/30 bg-amber-500/10 text-amber-400'
                   : 'border border-transparent text-slate-400 hover:bg-slate-900/60 hover:text-slate-200'
               }`}
             >
               {item.icon}
-              <span>{item.label}</span>
+              <span className="hidden md:inline">{item.label}</span>
               {item.id === 'story' && storyHasUnread ? (
                 <span
-                  className="absolute top-1/2 right-3 h-2 w-2 -translate-y-1/2 animate-pulse rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.6)]"
+                  className="absolute top-1.5 right-1.5 md:top-1/2 md:right-3 h-2 w-2 md:-translate-y-1/2 animate-pulse rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.6)]"
                   aria-hidden="true"
                 />
               ) : null}
@@ -132,7 +132,7 @@ export function NavRail() {
         })}
       </nav>
 
-      <div className="mt-auto border-slate-800/85 border-t pt-4 text-center">
+      <div className="mt-auto hidden border-slate-800/85 border-t pt-4 text-center md:block">
         <span className="text-[11px] text-slate-600">senpai edition</span>
       </div>
     </div>

src/ui/PlayPanel.tsx

@@ -1,9 +1,17 @@
 import { ActionPanel } from './ActionPanel';
+import { EventLog } from './EventLog';
+import { ResourceBar } from './ResourceBar';
 
 export function PlayPanel() {
   return (
     <div className="space-y-6">
+      <div className="block md:hidden">
+        <ResourceBar />
+      </div>
       <ActionPanel />
+      <div className="block md:hidden">
+        <EventLog />
+      </div>
     </div>
   );
 }

src/ui/RightRail.tsx

@@ -11,7 +11,6 @@ export function RightRail() {
         <ResourceBar />
       </div>
       <div className="flex-1 border-slate-900 border-t pt-4">
-        <h2 className="mb-3 font-semibold text-slate-400 text-xs tracking-wider uppercase">Log</h2>
         <EventLog />
       </div>
     </div>

src/ui/SettingsDrawer.tsx

@@ -1,40 +0,0 @@
-import type { ActionDetailMode, StoryOpenMode } from '../state/prefs';
-import { useGameStore } from '../state/store';
-
-/** Preference panel toggled from the header gear; changes persist immediately. */
-export function SettingsDrawer() {
-  const open = useGameStore((s) => s.settingsOpen);
-  const prefs = useGameStore((s) => s.prefs);
-  const setPrefs = useGameStore((s) => s.setPrefs);
-
-  if (!open) return null;
-
-  return (
-    <div className="rounded-lg border border-slate-700 bg-slate-900 p-4">
-      <label className="flex flex-col gap-1 text-sm">
-        Story opens
-        <select
-          value={prefs.storyOpenMode}
-          onChange={(e) => setPrefs({ storyOpenMode: e.target.value as StoryOpenMode })}
-          className="rounded border border-slate-600 bg-slate-800 px-2 py-1 text-slate-100"
-        >
-          <option value="auto">Automatically</option>
-          <option value="choices-only">Choices only</option>
-          <option value="manual">Manually</option>
-        </select>
-      </label>
-      <label className="mt-3 flex flex-col gap-1 text-sm">
-        Action details
-        <select
-          value={prefs.actionDetailMode}
-          onChange={(e) => setPrefs({ actionDetailMode: e.target.value as ActionDetailMode })}
-          className="rounded border border-slate-600 bg-slate-800 px-2 py-1 text-slate-100"
-        >
-          <option value="inline">Inline subtitles</option>
-          <option value="hover">Hover tooltips</option>
-          <option value="info-button">Info button</option>
-        </select>
-      </label>
-    </div>
-  );
-}

src/ui/StoryPanel.tsx

@@ -1,74 +0,0 @@
-import { gameRuntime } from '../state/runtime';
-import { useGameStore } from '../state/store';
-
-/** Full-screen VN overlay with prose, choices, and desktop story log sidebar. */
-export function StoryPanel() {
-  const open = useGameStore((s) => s.storyPanelOpen);
-  const story = useGameStore((s) => s.story);
-  const storyLog = useGameStore((s) => s.storyLog);
-
-  if (!open) return null;
-
-  const hasChoices = story.choices.length > 0;
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex bg-black/80"
-      role="dialog"
-      aria-modal="true"
-      aria-label="Story"
-    >
-      <div className="flex flex-1 flex-col md:flex-row">
-        <aside className="hidden max-h-full w-full overflow-y-auto border-slate-700 border-r p-4 md:block md:w-1/3">
-          <h3 className="mb-2 font-medium text-slate-400 text-xs uppercase tracking-wide">
-            Story log
-          </h3>
-          <ul className="flex flex-col gap-2 text-slate-300 text-sm">
-            {storyLog.map((entry) => (
-              <li key={`${entry.nodeId}:${entry.choiceLabel ?? ''}:${entry.prose}`}>
-                {entry.choiceLabel ? (
-                  <span className="text-amber-400/80">[{entry.choiceLabel}] </span>
-                ) : null}
-                {entry.prose}
-              </li>
-            ))}
-          </ul>
-        </aside>
-        <main className="flex flex-1 flex-col gap-4 p-6">
-          <p className="flex-1 text-lg text-slate-100 leading-relaxed">{story.currentProse}</p>
-          {hasChoices ? (
-            <div className="flex flex-col gap-2">
-              {story.choices.map((choice) => (
-                <button
-                  key={choice.id}
-                  type="button"
-                  disabled={choice.disabled}
-                  title={choice.disabled ? (choice.disabledReason ?? undefined) : undefined}
-                  onClick={() => gameRuntime.applyStoryChoice(choice.id)}
-                  className="rounded-lg border border-slate-600 bg-slate-900/60 px-4 py-3 text-left transition-colors hover:border-amber-500/60 disabled:cursor-not-allowed disabled:opacity-40"
-                >
-                  {choice.label}
-                </button>
-              ))}
-            </div>
-          ) : (
-            <button
-              type="button"
-              onClick={() => gameRuntime.continueStory()}
-              className="self-start rounded-lg bg-amber-600 px-4 py-2 transition-colors hover:bg-amber-500"
-            >
-              Continue
-            </button>
-          )}
-          <button
-            type="button"
-            onClick={() => gameRuntime.closeStoryPanel()}
-            className="self-end text-slate-400 text-sm transition-colors hover:text-slate-200"
-          >
-            Close
-          </button>
-        </main>
-      </div>
-    </div>
-  );
-}

src/ui/StoryView.tsx

@@ -8,9 +8,9 @@ export function StoryView() {
   const hasChoices = story.choices.length > 0;
 
   return (
-    <div className="grid h-full grid-cols-1 gap-8 lg:grid-cols-3">
+    <div className="flex h-full flex-col gap-8 lg:grid lg:grid-cols-3">
       {/* Story Log Section */}
-      <div className="flex max-h-[30vh] flex-col overflow-y-auto border-slate-800 lg:max-h-[calc(100vh-6rem)] lg:border-r lg:pr-6">
+      <div className="order-2 flex max-h-[30vh] flex-col overflow-y-auto border-slate-800 border-t pt-6 lg:order-1 lg:max-h-[calc(100vh-6rem)] lg:border-t-0 lg:border-r lg:pt-0 lg:pr-6">
         <h2 className="mb-4 text-xs font-semibold text-slate-400 tracking-wider uppercase">
           Story Log
         </h2>
@@ -34,7 +34,7 @@ export function StoryView() {
       </div>
 
       {/* Active Node Section */}
-      <div className="flex min-h-[300px] flex-col justify-between rounded-xl border border-slate-800/60 bg-slate-900/40 p-6 shadow-inner lg:col-span-2">
+      <div className="order-1 flex min-h-[300px] flex-col justify-between rounded-xl border border-slate-800/60 bg-slate-900/40 p-6 shadow-inner lg:order-2 lg:col-span-2">
         <div className="flex flex-1 flex-col justify-center">
           <p className="text-lg text-slate-100 leading-relaxed whitespace-pre-wrap">
             {story.currentProse ||