feat: 新增游戏界面样式与组件

refactor: 重构游戏面板布局与交互逻辑

style: 优化CSS变量与响应式设计

docs: 添加游戏模型与工具函数文档

chore: 整理项目结构与资源文件

apps/api/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@fastify/cookie": "^11.0.2",
     "@fastify/cors": "^11.1.0",
+    "@fastify/rate-limit": "^10.3.0",
     "@fastify/static": "^9.1.3",
     "@tinywaste/content": "workspace:*",
     "@tinywaste/game-core": "workspace:*",

apps/api/src/features/auth/auth.routes.ts

@@ -8,13 +8,13 @@ export const registerAuthRoutes = (app: FastifyInstance, authService: AuthServic
     return { user };
   });
 
-  app.post('/api/auth/register', async (request, reply) => {
+  app.post('/api/auth/register', { config: { rateLimit: { max: 5, timeWindow: '1 minute' } } }, async (request, reply) => {
     const input = registerSchema.parse(request.body);
     const user = await authService.register(input, reply);
     return { user };
   });
 
-  app.post('/api/auth/login', async (request, reply) => {
+  app.post('/api/auth/login', { config: { rateLimit: { max: 10, timeWindow: '1 minute' } } }, async (request, reply) => {
     const input = loginSchema.parse(request.body);
     const user = await authService.login(input, reply);
     return { user };

apps/api/src/features/auth/auth.service.ts

@@ -48,7 +48,7 @@ export class AuthService {
       sameSite: 'lax',
       path: '/',
       maxAge: SESSION_TTL_MS / 1000,
-      secure: false,
+      secure: env.isProduction,
     });
   }
 

apps/api/src/features/game/game.repository.ts

@@ -13,11 +13,15 @@ export class GameRepository {
     });
   }
 
-  async upsertMainSlot(userId: string, stateJson: string, label: string) {
+  async upsertMainSlot(userId: string, stateJson: string, label: string, expectedRevision?: number) {
     const existing = await this.getMainSlot(userId);
     const now = Date.now();
 
     if (existing) {
+      if (expectedRevision !== undefined && existing.revision !== expectedRevision) {
+        return null;
+      }
+
       this.db
         .update(saveSlotsTable)
         .set({

apps/api/src/features/game/game.service.ts

@@ -43,7 +43,10 @@ export class GameService {
 
     const state = JSON.parse(slot.stateJson) as GameState;
     const result = applyGameAction(state, gameContent, action);
-    await this.repository.upsertMainSlot(userId, JSON.stringify(result.state), slot.label);
+    const saved = await this.repository.upsertMainSlot(userId, JSON.stringify(result.state), slot.label, slot.revision);
+    if (!saved) {
+      throw new AppError(409, 'SAVE_CONFLICT', '存档已被其他请求修改，请重试。');
+    }
     return buildGameView(result.state, gameContent);
   }
 }

apps/api/src/server.ts

@@ -2,6 +2,7 @@ import { existsSync } from 'node:fs';
 import Fastify from 'fastify';
 import cookie from '@fastify/cookie';
 import cors from '@fastify/cors';
+import rateLimit from '@fastify/rate-limit';
 import fastifyStatic from '@fastify/static';
 import { ZodError } from 'zod';
 import { db } from './shared/database/client';
@@ -25,6 +26,11 @@ await app.register(cors, {
   credentials: true,
 });
 
+await app.register(rateLimit, {
+  max: env.isProduction ? 100 : 1000,
+  timeWindow: '1 minute',
+});
+
 const authRepository = new AuthRepository(db);
 const authService = new AuthService(authRepository);
 const gameRepository = new GameRepository(db);

apps/api/src/shared/env.ts

@@ -8,6 +8,7 @@ loadDotenv({
 });
 
 const envSchema = z.object({
+  NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
   API_PORT: z.coerce.number().int().positive().default(3001),
   WEB_ORIGIN: z.string().url().default('http://localhost:5173'),
   WEB_DIST_DIR: z.string().min(1).default('../web/dist'),
@@ -26,6 +27,8 @@ const webDistPath = resolve(process.cwd(), parsed.data.WEB_DIST_DIR);
 mkdirSync(dirname(databasePath), { recursive: true });
 
 export const env = {
+  nodeEnv: parsed.data.NODE_ENV,
+  isProduction: parsed.data.NODE_ENV === 'production',
   port: parsed.data.API_PORT,
   webOrigin: parsed.data.WEB_ORIGIN,
   webDistPath,

apps/web/public/generated/hud/manifest.json

@@ -0,0 +1,52 @@
+{
+  "reference": {
+    "canonical": "/generated/hud/reference/tinywaste-hud-reference.png",
+    "notes": "Current no-character HUD reference. Replaces the earlier right-side portrait layout."
+  },
+  "atlases": {
+    "chromeSource": "/generated/hud/atlases/hud-chrome-atlas-source.png",
+    "chromeTransparent": "/generated/hud/atlases/hud-chrome-atlas.png",
+    "iconSource": "/generated/hud/atlases/hud-icon-atlas-source.png",
+    "iconTransparent": "/generated/hud/atlases/hud-icon-atlas.png"
+  },
+  "chrome": {
+    "panelWide": "/generated/hud/chrome/panel-wide.png",
+    "panelTall": "/generated/hud/chrome/panel-tall.png",
+    "panelCard": "/generated/hud/chrome/panel-card.png",
+    "panelCompact": "/generated/hud/chrome/panel-compact.png",
+    "routeCardIdle": "/generated/hud/chrome/route-card-idle.png",
+    "routeCardActive": "/generated/hud/chrome/route-card-active.png",
+    "actionCardPrimary": "/generated/hud/chrome/action-card-primary.png",
+    "actionCardSecondary": "/generated/hud/chrome/action-card-secondary.png",
+    "statusCapsule": "/generated/hud/chrome/status-capsule.png",
+    "statusMeter": "/generated/hud/chrome/status-meter.png",
+    "quickStrip": "/generated/hud/chrome/quick-strip.png",
+    "quickStripLocked": "/generated/hud/chrome/quick-strip-locked.png",
+    "dockTabIdle": "/generated/hud/chrome/dock-tab-idle.png",
+    "dockTabActive": "/generated/hud/chrome/dock-tab-active.png",
+    "warningStrip": "/generated/hud/chrome/warning-strip.png",
+    "dividerOrnament": "/generated/hud/chrome/divider-ornament.png"
+  },
+  "icons": {
+    "shelter": "/generated/hud/icons/shelter.png",
+    "expedition": "/generated/hud/icons/expedition.png",
+    "inventory": "/generated/hud/icons/inventory.png",
+    "crafting": "/generated/hud/icons/crafting.png",
+    "skills": "/generated/hud/icons/skills.png",
+    "factions": "/generated/hud/icons/factions.png",
+    "map": "/generated/hud/icons/map.png",
+    "weather": "/generated/hud/icons/weather.png",
+    "clock": "/generated/hud/icons/clock.png",
+    "routePin": "/generated/hud/icons/route-pin.png",
+    "rest": "/generated/hud/icons/rest.png",
+    "repair": "/generated/hud/icons/repair.png",
+    "scavenge": "/generated/hud/icons/scavenge.png",
+    "signal": "/generated/hud/icons/signal.png",
+    "settings": "/generated/hud/icons/settings.png",
+    "logout": "/generated/hud/icons/logout.png"
+  },
+  "pipeline": {
+    "transparentCleanup": "python3 \"$HOME/.codex/skills/.system/imagegen/scripts/remove_chroma_key.py\"",
+    "sliceScript": "scripts/slice_hud_atlas.py"
+  }
+}

apps/web/src/App.tsx

@@ -2,6 +2,7 @@ import './App.css';
 import { AuthScreen } from './features/auth/components/AuthScreen';
 import { NewGameScreen } from './features/auth/components/NewGameScreen';
 import { GameHud } from './features/game/components/GameHud';
+import { ErrorBoundary } from './features/shared/components/ErrorBoundary';
 import { LoadingScreen } from './features/shared/components/LoadingScreen';
 import { useGameSession } from './features/session/useGameSession';
 
@@ -45,6 +46,7 @@ function App() {
   }
 
   return (
+    <ErrorBoundary>
       <GameHud
         accountName={session.user.username}
         gameError={session.gameError}
@@ -56,6 +58,7 @@ function App() {
         onSendAction={session.sendAction}
         view={session.view}
       />
+    </ErrorBoundary>
   );
 }
 

apps/web/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

apps/web/src/features/game/components/BottomDock.tsx

@@ -1,6 +1,7 @@
 import type { OverlayPanel } from '../types';
 import type { GameAction, GameView } from '@tinywaste/game-core';
 import { getActiveQuestCount, getCurrentPlace, getDominantAlert, getSupplyCounts } from '../hudModel';
+import { HudIcon } from './HudIcon';
 
 export function BottomDock({
   activePanel,
@@ -9,7 +10,7 @@ export function BottomDock({
   view,
 }: {
   activePanel: OverlayPanel | null;
-  onOpenPanel: (panel: OverlayPanel) => void;
+  onOpenPanel: (panel: OverlayPanel | null) => void;
   onSendAction: (action: GameAction) => void;
   view: GameView;
 }) {
@@ -18,44 +19,47 @@ export function BottomDock({
   const currentPlace = getCurrentPlace(view);
   const homeRoute = view.map.edges.find((edge) => edge.to === 'home');
   const dominantAlert = getDominantAlert(view);
+  const dockTabs: Array<{
+    id: OverlayPanel | 'local';
+    label: string;
+    icon: 'shelter' | 'expedition' | 'inventory' | 'crafting' | 'skills' | 'factions' | 'map';
+    onClick?: () => void;
+  }> = [
+    { id: 'local', label: currentPlace?.name ?? 'Expedition', icon: 'expedition' },
+    { id: 'inventory', label: '背包', icon: 'inventory', onClick: () => onOpenPanel('inventory') },
+    { id: 'blueprints', label: '蓝图', icon: 'crafting', onClick: () => onOpenPanel('blueprints') },
+    { id: 'missions', label: '任务', icon: 'skills', onClick: () => onOpenPanel('missions') },
+    { id: 'logs', label: '日志', icon: 'factions', onClick: () => onOpenPanel('logs') },
+    { id: 'local', label: '地图', icon: 'map', onClick: () => onOpenPanel(null) },
+  ];
 
   return (
-    <footer className="command-dock tactical-dock">
+    <footer className="command-dock tactical-dock hud-dock-frame">
       <div className="operator-card tactical-operator">
         <div className="operator-emblem">{view.player.name.slice(0, 1)}</div>
         <div className="operator-copy">
-          <span>ACTIVE SURVIVOR</span>
+          <span>在线幸存者</span>
           <strong>{view.player.name}</strong>
         </div>
       </div>
 
       <div className="dock-nav-groups">
         <div className="dock-tabs">
-          <button className="dock-tab active">{currentPlace?.name ?? 'Expedition'}</button>
+          {dockTabs.map((tab, index) => {
+            const isCurrentLocation = index === 0 && activePanel === null;
+            const isActive = tab.id !== 'local' ? activePanel === tab.id : isCurrentLocation;
+            return (
               <button
-            className={`dock-tab ${activePanel === 'blueprints' ? 'active' : ''}`}
-            onClick={() => onOpenPanel('blueprints')}
+                key={`${tab.label}-${index}`}
+                className={`dock-tab ${isActive ? 'active' : ''}`}
+                onClick={tab.onClick}
+                type="button"
               >
-            Crafting
-          </button>
-          <button
-            className={`dock-tab ${activePanel === 'logs' ? 'active' : ''}`}
-            onClick={() => onOpenPanel('logs')}
-          >
-            Logs
-          </button>
-          <button
-            className={`dock-tab ${activePanel === 'inventory' ? 'active' : ''}`}
-            onClick={() => onOpenPanel('inventory')}
-          >
-            Inventory
-          </button>
-          <button
-            className={`dock-tab ${activePanel === 'missions' ? 'active' : ''}`}
-            onClick={() => onOpenPanel('missions')}
-          >
-            Missions
+                <HudIcon name={tab.icon} className="dock-tab-icon" />
+                <span>{tab.label}</span>
               </button>
+            );
+          })}
         </div>
 
         <div className="dock-metrics">
@@ -73,10 +77,12 @@ export function BottomDock({
             className="primary-button dock-commit-button"
             onClick={() => onSendAction({ type: 'travel', toPlaceId: homeRoute.to })}
           >
+            <HudIcon name="shelter" className="dock-commit-icon" />
             返回避难点
           </button>
         ) : (
           <button className="primary-button dock-commit-button" onClick={() => onOpenPanel('inventory')}>
+            <HudIcon name="inventory" className="dock-commit-icon" />
             打开补给终端
           </button>
         )}

apps/web/src/features/game/components/CommandCenter.tsx

@@ -1,12 +1,25 @@
 import type { GameAction, GameView, InventoryViewEntry } from '@tinywaste/game-core';
 import { getLatestLog, getPrimaryObjective, getQuickUseItems } from '../hudModel';
-import { getPlaceHeroStyle } from '../uiAssets';
+import { getItemArt, getPlaceHeroStyle, type HudIconAsset } from '../uiAssets';
 import type { OverlayPanel } from '../types';
+import { AssetThumb } from './AssetThumb';
+import { HudIcon } from './HudIcon';
+
+const MIN_SUCCESS_CHANCE = 15;
+const REST_DURATION_MINUTES = 30;
 
 function pickRecoveryItem(items: InventoryViewEntry[], type: 'water' | 'food' | 'medicine') {
   return items.find((item) => item.type === type);
 }
 
+function getOperationIcon(actionId: string): HudIconAsset {
+  if (actionId.includes('rest')) return 'rest';
+  if (actionId.includes('repair') || actionId.includes('fix')) return 'repair';
+  if (actionId.includes('craft')) return 'crafting';
+  if (actionId.includes('search') || actionId.includes('scavenge') || actionId.includes('collect')) return 'scavenge';
+  return 'expedition';
+}
+
 export function CommandCenter({
   gameError,
   isWorking,
@@ -20,7 +33,7 @@ export function CommandCenter({
   onSendAction: (action: GameAction) => void;
   view: GameView;
 }) {
-  const quickUseItems = getQuickUseItems(view);
+  const quickUseItems = getQuickUseItems(view, 6);
   const primaryObjective = getPrimaryObjective(view);
   const latestLog = getLatestLog(view);
   const primaryAlert = view.survival.alerts[0] ?? null;
@@ -32,198 +45,168 @@ export function CommandCenter({
       const water = pickRecoveryItem(quickUseItems, 'water');
       if (water) {
         return {
-          kicker: 'Recover now',
-          title: `饮用 ${water.name}`,
+          icon: 'inventory' as const,
+          title: `使用 ${water.name}`,
           description: primaryAlert.recovery,
-          hint: '先把出行窗口拉回来，再考虑继续搜刮。',
-          chips: [`携带 x${water.count}`, '即时恢复', '口渴优先'],
-          actionLabel: '立即饮水',
+          label: '恢复',
+          time: '0 分钟',
+          actionLabel: '立即使用',
+          chance: '100%',
+          items: quickUseItems.slice(0, 6),
           onClick: () => onSendAction({ type: 'use-item', itemId: water.itemId }),
         };
       }
     }
 
-    if (primaryAlert?.stat === 'hunger') {
-      const food = pickRecoveryItem(quickUseItems, 'food');
-      if (food) {
-        return {
-          kicker: 'Recover now',
-          title: `吃掉 ${food.name}`,
-          description: primaryAlert.recovery,
-          hint: '热量恢复后，连续行动的容错会更高。',
-          chips: [`携带 x${food.count}`, '即时恢复', '饥饿优先'],
-          actionLabel: '立即进食',
-          onClick: () => onSendAction({ type: 'use-item', itemId: food.itemId }),
-        };
-      }
-    }
-
-    if (primaryAlert && (primaryAlert.stat === 'life' || primaryAlert.stat === 'radiation')) {
-      const medicine = pickRecoveryItem(quickUseItems, 'medicine');
-      if (medicine) {
-        return {
-          kicker: 'Stabilize',
-          title: `使用 ${medicine.name}`,
-          description: primaryAlert.recovery,
-          hint: '先把身体拉回稳定区，再决定是否继续推进。',
-          chips: [`携带 x${medicine.count}`, '医疗补给', primaryAlert.label],
-          actionLabel: '立即处理',
-          onClick: () => onSendAction({ type: 'use-item', itemId: medicine.itemId }),
-        };
-      }
-    }
-
     if (primaryAlert?.stat === 'energy' && view.place.services.includes('rest')) {
       return {
-        kicker: 'Recover now',
-        title: '短休 30 分钟',
+        icon: 'rest' as const,
+        title: '休息',
         description: primaryAlert.recovery,
-        hint: '把精力先抬到安全线，再出门会更稳。',
-        chips: ['30 分钟', '精力恢复', '低风险'],
-        actionLabel: '立即休整',
-        onClick: () => onSendAction({ type: 'rest', minutes: 30 }),
+        label: '恢复',
+        time: '12 分钟',
+        actionLabel: '立即休息',
+        chance: '安全',
+        items: quickUseItems.slice(0, 6),
+        onClick: () => onSendAction({ type: 'rest', minutes: REST_DURATION_MINUTES }),
       };
     }
 
     if (firstUtilityAction) {
       return {
-        kicker: 'Next move',
+        icon: getOperationIcon(firstUtilityAction.id),
         title: firstUtilityAction.name,
         description: firstUtilityAction.desc,
-        hint: firstUtilityAction.rewardHint,
-        chips: [
-          `${firstUtilityAction.timeCostMin} 分钟`,
-          `精力 -${firstUtilityAction.energyCost}`,
-          `风险 ${Math.round(firstUtilityAction.risk * 100)}%`,
-        ],
-        actionLabel: '执行行动',
+        label: '主要行动',
+        time: `${firstUtilityAction.timeCostMin} 分钟`,
+        actionLabel: '执行',
+        chance: `${Math.max(MIN_SUCCESS_CHANCE, 100 - Math.round(firstUtilityAction.risk * 100))}%`,
+        items: quickUseItems.slice(0, 6),
         onClick: () => onSendAction({ type: 'perform-action', actionId: firstUtilityAction.id }),
       };
     }
 
     return {
-      kicker: 'System focus',
-      title: '打开背包面板',
-      description: '当前没有可直接执行的扇区行为，先整理资源和配装。',
-      hint: '库存与仓储都在系统面板里管理。',
-      chips: ['系统面板', '整理补给', '继续规划'],
-      actionLabel: '打开背包',
+      icon: 'inventory' as const,
+      title: '打开背包',
+      description: '出发前整理补给物资。',
+      label: '系统',
+      time: '0 分钟',
+      actionLabel: '打开',
+      chance: '安全',
+      items: quickUseItems.slice(0, 6),
       onClick: () => onOpenPanel('inventory'),
     };
   })();
 
-  const secondaryOperations = [
-    ...view.place.actions
+  const secondaryOperations = view.place.actions
     .filter((action) => !action.disabledReason && action.id !== firstUtilityAction?.id)
-      .slice(0, 3)
+    .slice(0, 2)
     .map((action) => ({
       id: action.id,
+      icon: getOperationIcon(action.id),
       title: action.name,
       detail: action.rewardHint,
-        meta: `${action.timeCostMin}m · 风险 ${Math.round(action.risk * 100)}%`,
+      time: `${action.timeCostMin} 分钟`,
       onClick: () => onSendAction({ type: 'perform-action', actionId: action.id }),
-      })),
-    {
-      id: 'inventory',
-      title: '整理补给',
-      detail: '打开背包与避难所仓储',
-      meta: 'inventory',
-      onClick: () => onOpenPanel('inventory'),
-    },
-    {
-      id: 'blueprints',
-      title: '检查蓝图',
-      detail: '查看可制作项与材料缺口',
-      meta: 'crafting',
-      onClick: () => onOpenPanel('blueprints'),
-    },
-  ].slice(0, 5);
+    }));
 
   return (
-    <section className="panel panel-command theater-panel">
-      <div className="theater-scene" style={getPlaceHeroStyle(view.place.id)}>
-        <div className="theater-scene-copy">
-          <p className="eyebrow">Operation theater</p>
-          <h2>{view.header.placeName}</h2>
+    <section className="panel panel-command theater-panel hud-shell-panel">
+      <header className="theater-titlebar">
+        <div>
+          <h2>{view.header.placeName.toUpperCase()}</h2>
           <p>{view.header.placeDesc}</p>
         </div>
-
-        <div className="theater-scene-side">
-          <article className="scene-focus-card">
-            <span>当前重点</span>
-            <strong>{primaryObjective?.title ?? view.survival.headline}</strong>
-            <p>{primaryObjective?.detail ?? '先处理生存威胁，再推进任务。'}</p>
+        <div className="theater-titlebar-metrics">
+          <article>
+            <span>预计耗时</span>
+            <strong>{primaryOperation.time}</strong>
           </article>
-          <article className={`scene-focus-card ${gameError ? 'error' : ''}`}>
-            <span>扇区反馈</span>
-            <strong>{primaryAlert ? primaryAlert.summary : '链路稳定'}</strong>
-            <p>{gameError ?? latestLog?.message ?? '最新日志会在这里同步关键结果。'}</p>
+          <article>
+            <span>风险等级</span>
+            <strong className={primaryAlert ? 'warn' : 'safe'}>{view.header.riskLabel}</strong>
           </article>
         </div>
-      </div>
+      </header>
 
-      <div className="theater-deck">
-        <section className="primary-operation-card">
-          <div className="primary-operation-copy">
-            <span>{primaryOperation.kicker}</span>
+      <div className="theater-scene-stage">
+        <div className="theater-scene-image" style={getPlaceHeroStyle(view.place.id)} />
+
+        <div className="theater-action-zone">
+          <section className="theater-primary-card">
+            <div className="theater-primary-head">
+              <HudIcon name={primaryOperation.icon} className="theater-action-icon" />
+              <span>{primaryOperation.label}</span>
+            </div>
+            <div className="theater-primary-copy">
               <h3>{primaryOperation.title}</h3>
               <p>{primaryOperation.description}</p>
             </div>
-          <div className="operation-chip-row">
-            {primaryOperation.chips.map((chip) => (
-              <span key={chip}>{chip}</span>
+
+            <div className="theater-find-row">
+              <div className="theater-find-meta">
+                <span>最佳发现概率</span>
+                <strong>{primaryOperation.chance}</strong>
+              </div>
+              <div className="theater-find-meta">
+                <span>时间消耗</span>
+                <strong>{primaryOperation.time}</strong>
+              </div>
+            </div>
+
+              <div className="theater-potential-finds">
+              {primaryOperation.items.slice(0, 6).map((item) => (
+                <AssetThumb
+                  key={`potential-${item.itemId}`}
+                  src={getItemArt(item.itemId, item.type)}
+                  label={item.name}
+                  className="potential-find-thumb"
+                />
               ))}
             </div>
-          <small>{primaryOperation.hint}</small>
-          <button className="primary-button operation-commit-button" disabled={isWorking} onClick={primaryOperation.onClick}>
+
+            <button className="primary-button theater-primary-button" disabled={isWorking} onClick={primaryOperation.onClick} type="button">
               {primaryOperation.actionLabel}
             </button>
           </section>
 
-        <section className="secondary-operation-stack">
+          <div className="theater-secondary-column">
             {secondaryOperations.map((operation) => (
-            <button
-              key={operation.id}
-              className="secondary-operation-card"
-              disabled={isWorking}
-              onClick={operation.onClick}
-            >
+              <button key={operation.id} className="theater-secondary-card" disabled={isWorking} onClick={operation.onClick} type="button">
+                <HudIcon name={operation.icon} className="theater-action-icon" />
+                <div>
                   <strong>{operation.title}</strong>
                   <p>{operation.detail}</p>
-              <small>{operation.meta}</small>
+                </div>
+                <span>{operation.time}</span>
               </button>
             ))}
-        </section>
+          </div>
         </div>
 
-      <div className="theater-intel-grid">
-        <article className="intel-focus-card">
-          <span>Mission thread</span>
-          <strong>{primaryObjective?.title ?? '暂无关键目标'}</strong>
-          <p>{primaryObjective?.detail ?? '继续探索以触发新的委托与线索。'}</p>
+        <footer className="theater-intel-strip">
+          <article className="theater-intel-block">
+            <span>区域情报</span>
+            <p>{latestLog?.message ?? '近期有拾荒者活动，发现少量物资缓存。'}</p>
           </article>
-
-        <article className="intel-focus-card">
-          <span>Recent log</span>
-          <strong>{latestLog ? `${latestLog.minute}m` : '日志空闲'}</strong>
-          <p>{latestLog?.message ?? '还没有新的结构化战报。'}</p>
+          <article className="theater-intel-block compact">
+            <HudIcon name="expedition" className="theater-intel-icon" />
+            <strong>{primaryObjective?.title ?? '任务线索'}</strong>
           </article>
-
-        <article className="intel-focus-card system">
-          <span>Systems</span>
-          <strong>中频终端</strong>
-          <div className="intel-system-links">
-            <button className="small-button secondary" onClick={() => onOpenPanel('logs')}>
-              日志
-            </button>
-            <button className="small-button secondary" onClick={() => onOpenPanel('missions')}>
-              任务
-            </button>
-            <button className="small-button secondary" onClick={() => onOpenPanel('blueprints')}>
-              蓝图
-            </button>
-          </div>
+          <article className="theater-intel-block compact">
+            <HudIcon name="inventory" className="theater-intel-icon" />
+            <strong>{view.player.inventoryUsage}/{view.player.inventoryCapacity}</strong>
           </article>
+          <article className="theater-intel-block compact">
+            <HudIcon name="signal" className="theater-intel-icon" />
+            <strong>{gameError ?? latestLog?.minute ? `${latestLog?.minute ?? 0}分` : '在线'}</strong>
+          </article>
+          <article className="theater-intel-block compact">
+            <HudIcon name="weather" className="theater-intel-icon" />
+            <strong>{primaryAlert ? primaryAlert.label : '安全'}</strong>
+          </article>
+        </footer>
       </div>
     </section>
   );

apps/web/src/features/game/components/HudIcon.tsx

@@ -0,0 +1,16 @@
+import { getHudIconArt, type HudIconAsset } from '../uiAssets';
+
+export function HudIcon({
+  name,
+  label,
+  className = '',
+  decorative = true,
+}: {
+  name: HudIconAsset;
+  label?: string;
+  className?: string;
+  decorative?: boolean;
+}) {
+  const src = getHudIconArt(name);
+  return <img alt={decorative ? '' : label ?? name} aria-hidden={decorative} className={`hud-icon ${className}`.trim()} src={src} />;
+}

apps/web/src/features/game/components/LoadoutPanel.tsx

@@ -1,15 +1,10 @@
 import type { GameAction, GameView } from '@tinywaste/game-core';
 import { useMemo } from 'react';
 import { getItemArt } from '../uiAssets';
-import {
-  getLoadoutEntries,
-  getQuickUseItems,
-  getStatusEffects,
-  getSurvivorMetrics,
-} from '../hudModel';
+import { getLoadoutEntries, getQuickUseItems, getStatusEffects, getSurvivorMetrics } from '../hudModel';
 import type { OverlayPanel } from '../types';
 import { AssetThumb } from './AssetThumb';
-import { PanelHeader } from '../../shared/components/PanelHeader';
+import { HudIcon } from './HudIcon';
 
 export function LoadoutPanel({
   isWorking,
@@ -24,143 +19,122 @@ export function LoadoutPanel({
 }) {
   const loadoutEntries = useMemo(() => getLoadoutEntries(view), [view]);
   const statusEffects = useMemo(() => getStatusEffects(view), [view]);
-  const quickUseItems = useMemo(() => getQuickUseItems(view, 5), [view]);
+  const quickUseItems = useMemo(() => getQuickUseItems(view, 3), [view]);
   const survivorMetrics = useMemo(() => getSurvivorMetrics(view), [view]);
   const equipmentEntries = useMemo(
-    () => [...loadoutEntries.left, ...loadoutEntries.right],
+    () => [...loadoutEntries.right.slice(0, 2), loadoutEntries.left[1], loadoutEntries.right[2], loadoutEntries.left[2]],
     [loadoutEntries.left, loadoutEntries.right],
   );
   const storagePreview = useMemo(() => view.player.storage.slice(0, 5), [view.player.storage]);
 
   return (
-    <section className="panel panel-loadout survivor-panel">
-      <div className="panel-tabs survivor-tabs">
-        <button className="active">Character</button>
-        <button onClick={() => onOpenPanel('inventory')}>Inventory</button>
-        <button onClick={() => onOpenPanel('missions')}>Missions</button>
-      </div>
-
-      <div className="survivor-head">
-        <div>
-          <p className="eyebrow">Survivor rig</p>
+    <section className="panel panel-loadout equipment-terminal">
+      <header className="equipment-terminal-head">
+        <div className="equipment-terminal-title">
+          <p className="eyebrow">装备</p>
           <strong>{view.player.name}</strong>
         </div>
-        <div className="survivor-head-chips">
-          <span className={`hud-chip ${view.player.storageAccessible ? 'safe' : 'muted'}`}>
-            {view.player.storageAccessible ? '仓储在线' : '野外行动'}
-          </span>
-          <span className="hud-chip muted">
-            负载 {view.player.inventoryUsage}/{view.player.inventoryCapacity}
-          </span>
-        </div>
-      </div>
+        <span className="hud-chip muted">负载 {view.player.inventoryUsage}/{view.player.inventoryCapacity}</span>
+      </header>
 
-      <section className="subpanel equipment-grid-panel">
-        <PanelHeader title="Equipment" subtitle="去掉人物展示后，右侧改为纯功能 HUD 终端" compact />
-        <div className="survivor-equipment-grid">
+      <section className="equipment-grid">
         {equipmentEntries.map((entry) => (
-            <article key={entry.id} className={`loadout-slot equipment-module ${entry.isEquipped ? 'equipped' : ''}`}>
-              <AssetThumb src={entry.art} label={entry.title} className="slot-thumb" />
-              <div className="slot-copy">
+          <article key={entry.id} className={`equipment-slot-card ${entry.isEquipped ? 'equipped' : ''}`}>
+            <div className="equipment-slot-top">
               <span>{entry.label}</span>
+            </div>
+            <AssetThumb src={entry.art} label={entry.title} className="equipment-slot-thumb" />
+            <div className="equipment-slot-copy">
               <strong>{entry.title}</strong>
               <small>{entry.subtitle}</small>
             </div>
           </article>
         ))}
+        <article className="equipment-slot-card placeholder">
+          <div className="equipment-slot-top">
+            <span>模组</span>
           </div>
+          <div className="equipment-slot-placeholder">+</div>
+        </article>
       </section>
 
-      <section className="survivor-metrics-row">
+      <section className="equipment-metrics-row">
         {survivorMetrics.map((metric) => (
-          <article key={metric.id} className="survivor-metric-card">
+          <article key={metric.id} className="equipment-metric-box">
             <span>{metric.label}</span>
             <strong>{metric.value}</strong>
           </article>
         ))}
       </section>
 
-      <section className="survivor-warning-strip">
-        {statusEffects.map((effect) => (
-          <article key={effect.id} className={`survivor-warning-card tone-${effect.tone}`}>
-            {effect.art ? <img className="status-effect-icon" src={effect.art} alt={effect.label} /> : null}
-            <div>
-              <strong>{effect.label}</strong>
-              <p>{effect.detail}</p>
+      <section className="warning-terminal">
+        <div className="warning-terminal-head">
+          <span>生存警报</span>
+        </div>
+        <div className="warning-terminal-list">
+          {statusEffects.slice(0, 3).map((effect) => (
+            <article key={effect.id} className={`warning-meter tone-${effect.tone}`}>
+              <div className="warning-meter-head">
+                <span>{effect.label.split('·')[0].trim()}</span>
+              </div>
+              <div className="warning-meter-track">
+                <div className="warning-meter-fill" />
               </div>
             </article>
           ))}
+        </div>
       </section>
 
-      <section className="subpanel quick-slot-panel survivor-supply-panel">
-        <PanelHeader title="Quick supplies" subtitle="高频补给直接可点，不再只是展示" compact />
-        <div className="survivor-supply-grid">
+      <section className="ready-pack-frame">
+        <div className="ready-pack-head">
+          <span>快速补给</span>
+          <p>快速补给和仓储摘要</p>
+        </div>
+
+        <div className="ready-pack-columns">
+          <div>
+            <strong>快捷栏</strong>
+            <div className="quick-access-row">
               {quickUseItems.map((item) => (
                 <button
-              key={`quick-use-${item.itemId}`}
-              className="survivor-supply-card"
+                  key={`quick-${item.itemId}`}
+                  className="quick-access-slot"
                   disabled={isWorking}
                   onClick={() => onSendAction({ type: 'use-item', itemId: item.itemId })}
+                  type="button"
                 >
-              <AssetThumb src={getItemArt(item.itemId, item.type)} label={item.name} />
-              <div className="survivor-supply-copy">
-                <strong>{item.name}</strong>
-                <span>x{item.count}</span>
-                <small>{item.type}</small>
-              </div>
+                  <AssetThumb src={getItemArt(item.itemId, item.type)} label={item.name} className="quick-access-thumb" />
+                  <span>{item.count}</span>
                 </button>
               ))}
-          {Array.from({ length: Math.max(0, 5 - quickUseItems.length) }).map((_, index) => (
-            <article key={`locked-${index}`} className="survivor-supply-card locked">
-              <div className="quick-slot-lock">EMPTY</div>
+              {Array.from({ length: Math.max(0, 4 - quickUseItems.length) }).map((_, index) => (
+                <article key={`quick-empty-${index}`} className="quick-access-slot locked">
+                  <span>锁定</span>
                 </article>
               ))}
             </div>
-      </section>
+          </div>
 
-      <section className="subpanel survivor-stash-panel">
-        <PanelHeader
-          title="Stash snapshot"
-          subtitle={
-            view.player.storageAccessible
-              ? `避难所仓储 ${view.player.storageUsage}/${view.player.storageCapacity}`
-              : '离开避难所后只保留摘要'
-          }
-          compact
-        />
-        <div className="survivor-stash-grid">
+          <div>
+            <strong>仓储</strong>
+            <div className="stash-row">
               {storagePreview.map((item) => (
-            <article key={`stash-${item.itemId}`} className="survivor-stash-card">
-              <AssetThumb src={getItemArt(item.itemId, item.type)} label={item.name} />
-              <div className="survivor-stash-copy">
-                <strong>{item.name}</strong>
-                <span>x{item.count}</span>
-              </div>
+                <article key={`stash-${item.itemId}`} className="stash-slot">
+                  <AssetThumb src={getItemArt(item.itemId, item.type)} label={item.name} className="quick-access-thumb" />
+                  <span>{item.count}</span>
                 </article>
               ))}
-          <button className="secondary-button survivor-stash-open" onClick={() => onOpenPanel('inventory')}>
-            打开仓储终端
+              <button className="stash-slot stash-open" onClick={() => onOpenPanel('inventory')} type="button">
+                +
               </button>
             </div>
+          </div>
+        </div>
       </section>
 
-      <section className="subpanel survivor-actions-panel">
-        <PanelHeader title="Field terminals" subtitle="中频系统从这里切换，主屏只保留决策所需" compact />
-        <div className="panel-link-grid">
-          <button className="secondary-button panel-link-button" onClick={() => onOpenPanel('inventory')}>
-            背包 / 仓储
+      <button className="secondary-button equipment-terminal-button" onClick={() => onOpenPanel('inventory')} type="button">
+        打开背包 / 仓储终端
       </button>
-          <button className="secondary-button panel-link-button" onClick={() => onOpenPanel('blueprints')}>
-            制作蓝图
-          </button>
-          <button className="secondary-button panel-link-button" onClick={() => onOpenPanel('missions')}>
-            任务线程
-          </button>
-          <button className="secondary-button panel-link-button" onClick={() => onOpenPanel('logs')}>
-            行动日志
-          </button>
-        </div>
-      </section>
     </section>
   );
 }

apps/web/src/features/game/components/RoutePanel.tsx

@@ -1,7 +1,16 @@
 import type { GameAction, GameView } from '@tinywaste/game-core';
-import { edgeDestination, getActiveQuestCount, getCurrentPlace, getExpeditionStatus, getRiskDots, getRouteRiskTier } from '../hudModel';
+import { useState } from 'react';
+import {
+  edgeDestination,
+  getCurrentPlace,
+  getExpeditionStatus,
+  getPlaceAtmosphere,
+  getRiskDots,
+  getRouteRiskTier,
+  getVisibleRoutes,
+} from '../hudModel';
 import { getPlaceThumbStyle } from '../uiAssets';
-import { PanelHeader } from '../../shared/components/PanelHeader';
+import { HudIcon } from './HudIcon';
 
 export function RoutePanel({
   isWorking,
@@ -12,52 +21,40 @@ export function RoutePanel({
   onSendAction: (action: GameAction) => void;
   view: GameView;
 }) {
+  const [safeOnly, setSafeOnly] = useState(false);
   const currentPlace = getCurrentPlace(view);
-  const activeQuestCount = getActiveQuestCount(view);
+  const placeId = currentPlace?.id ?? view.place.id;
   const expedition = getExpeditionStatus(view);
+  const atmosphere = getPlaceAtmosphere(placeId);
+  const allRoutes = getVisibleRoutes(view, 10);
+  const routes = safeOnly
+    ? allRoutes.filter((edge) => !edge.blockedReason && getRouteRiskTier(edge.risk).tone === 'safe')
+    : allRoutes.slice(0, 3);
+  const launchRoute = routes[0] ?? null;
 
   return (
-    <section className="panel panel-route expedition-panel">
-      <header className="expedition-head">
+    <section className="panel panel-route expedition-panel hud-shell-panel">
+      <header className="expedition-panel-head">
         <div>
-          <p className="eyebrow">Expedition rail</p>
+          <p className="eyebrow">探索</p>
           <h2>{currentPlace?.name ?? view.header.placeName}</h2>
         </div>
-        <span className={`hud-chip ${expedition.tone === 'good' ? 'safe' : expedition.tone}`}>
-          {view.header.riskLabel}
-        </span>
+        <div className="expedition-weather-meta">
+          <span>{atmosphere.weather}</span>
+          <span>{atmosphere.temperature}</span>
+        </div>
       </header>
 
-      <article className="expedition-core">
-        <span className="intel-kicker">CURRENT SECTOR</span>
-        <p>{view.header.placeDesc}</p>
-        <div className="expedition-status-grid">
-          <article className="expedition-status-card">
-            <small>准备度</small>
-            <strong>{expedition.readiness}%</strong>
-          </article>
-          <article className="expedition-status-card">
-            <small>负载</small>
-            <strong>{view.player.inventoryUsage}/{view.player.inventoryCapacity}</strong>
-          </article>
-          <article className="expedition-status-card">
-            <small>威胁</small>
-            <strong>{expedition.threatCount || activeQuestCount}</strong>
-          </article>
+      <section className="expedition-routes-card">
+        <div className="expedition-section-head">
+          <span>路线</span>
+          <button className={`expedition-toggle ${safeOnly ? 'active' : ''}`} type="button" onClick={() => setSafeOnly((prev) => !prev)}>
+            {safeOnly ? '显示全部' : '仅安全路线'}
+          </button>
         </div>
-        <div className="intel-meta">
-          {(currentPlace?.tags ?? []).map((tag) => (
-            <span key={tag} className="hud-chip muted">
-              {tag}
-            </span>
-          ))}
-        </div>
-      </article>
 
-      <section className="route-stack">
-        <PanelHeader title="Routes" subtitle="选择下一段远行目标" compact />
-        <div className="route-list expedition-route-list">
-        {view.map.edges.map((edge) => {
+        <div className="expedition-route-stack">
+          {routes.map((edge, index) => {
             const destination = edgeDestination(view, edge);
             if (!destination) return null;
 
@@ -67,45 +64,62 @@ export function RoutePanel({
             return (
               <button
                 key={`${edge.from}-${edge.to}`}
-              className={`route-card expedition-route-card tone-${riskTier.tone}`}
+                className={`expedition-route-card ${index === 0 ? 'active' : ''} tone-${riskTier.tone}`}
                 disabled={Boolean(edge.blockedReason) || isWorking}
                 onClick={() => onSendAction({ type: 'travel', toPlaceId: edge.to })}
+                type="button"
               >
                 <div className="route-card-thumb" style={getPlaceThumbStyle(destination.id)} />
                 <div className="route-card-copy">
+                  <div className="route-card-topline">
                     <strong>{destination.name}</strong>
+                    <span>{destination.visited ? '已探明' : '未知'}</span>
+                  </div>
                   <p>{destination.desc}</p>
                   <div className="route-card-detail">
                     <span>{edge.travelTimeMin} 分钟</span>
                     <span>{riskTier.label}</span>
                   </div>
                   <div className="risk-dots" aria-hidden="true">
-                  {riskDots.map((active, index) => (
-                    <span key={`${destination.id}-${index}`} className={active ? 'active' : ''} />
+                    {riskDots.map((active, dotIndex) => (
+                      <span key={`${destination.id}-${dotIndex}`} className={active ? 'active' : ''} />
                     ))}
                   </div>
                 </div>
-              <div className="route-card-state">
-                <span>{destination.visited ? '已探明' : '未知'}</span>
-                {edge.blockedReason ? <em>{edge.blockedReason}</em> : null}
-              </div>
               </button>
             );
           })}
         </div>
       </section>
 
-      <section className="world-map-panel expedition-map-panel">
-        <PanelHeader title="Known sectors" subtitle="压缩后的节点情报" compact />
-        <div className="map-node-grid expedition-map-grid">
-          {view.map.places.map((place) => (
-            <article key={place.id} className={`map-node-card ${place.current ? 'current' : ''}`}>
-              <strong>{place.name}</strong>
-              <span>{place.visited ? '已探明' : '待深入'}</span>
-              <small>{place.tags.join(' · ') || 'unknown'}</small>
-            </article>
-          ))}
+      <section className="expedition-status-card">
+        <div className="expedition-section-head">
+          <span>探索状态</span>
         </div>
+        <div className="expedition-status-grid">
+          <article className="expedition-status-cell">
+            <small>装备</small>
+            <strong>{expedition.readiness}%</strong>
+          </article>
+          <article className="expedition-status-cell">
+            <small>状态</small>
+            <strong>{Math.round((view.player.stats.life / view.player.maxStats.life) * 100)}%</strong>
+          </article>
+          <article className="expedition-status-cell">
+            <small>负重</small>
+            <strong>
+              {view.player.inventoryUsage}/{view.player.inventoryCapacity}
+            </strong>
+          </article>
+        </div>
+        <button
+          className="primary-button expedition-launch-button"
+          disabled={!launchRoute || isWorking}
+          onClick={() => launchRoute && onSendAction({ type: 'travel', toPlaceId: launchRoute.to })}
+          type="button"
+        >
+          准备出发
+        </button>
       </section>
     </section>
   );

apps/web/src/features/game/components/StatMeter.tsx

@@ -1,9 +1,11 @@
 export function StatMeter({
+  iconSrc,
   label,
   value,
   maxValue,
   tone,
 }: {
+  iconSrc?: string;
   label: string;
   value: number;
   maxValue: number;
@@ -13,6 +15,8 @@ export function StatMeter({
 
   return (
     <article className={`stat-meter tone-${tone}`}>
+      <div className="stat-meter-copy">
+        {iconSrc ? <img className="stat-meter-icon" src={iconSrc} alt="" aria-hidden="true" /> : null}
         <div>
         <span>{label}</span>
         <strong>
@@ -20,6 +24,7 @@ export function StatMeter({
           <small>/{Math.round(maxValue)}</small>
         </strong>
         </div>
+      </div>
       <div className="meter-track">
         <div className="meter-fill" style={{ width: `${percentage}%` }} />
       </div>

apps/web/src/features/game/components/SystemOverlay.tsx

@@ -1,310 +1,10 @@
 import type { GameAction, GameView } from '@tinywaste/game-core';
-import { getActiveQuestCount, getLoadoutEntries, getSupplyCounts } from '../hudModel';
 import type { OverlayPanel } from '../types';
 import { ModalShell } from '../../shared/components/ModalShell';
-import { PanelHeader } from '../../shared/components/PanelHeader';
-import { InventoryCard } from './cards/InventoryCard';
-import { QuestCard } from './cards/QuestCard';
-import { RecipeCard } from './cards/RecipeCard';
-import { EmptyState } from './EmptyState';
-
-function OverlayHeaderStats({ view }: { view: GameView }) {
-  const supplyCounts = getSupplyCounts(view);
-  const activeQuestCount = getActiveQuestCount(view);
-
-  return (
-    <div className="overlay-summary-grid">
-      <article className="overlay-summary-card">
-        <span>容量</span>
-        <strong>
-          {view.player.inventoryUsage}/{view.player.inventoryCapacity}
-        </strong>
-      </article>
-      <article className="overlay-summary-card">
-        <span>水</span>
-        <strong>{supplyCounts.water}</strong>
-      </article>
-      <article className="overlay-summary-card">
-        <span>食物</span>
-        <strong>{supplyCounts.food}</strong>
-      </article>
-      <article className="overlay-summary-card">
-        <span>药品</span>
-        <strong>{supplyCounts.medicine}</strong>
-      </article>
-      <article className="overlay-summary-card">
-        <span>任务</span>
-        <strong>{activeQuestCount}</strong>
-      </article>
-      <article className="overlay-summary-card">
-        <span>仓储</span>
-        <strong>
-          {view.player.storageUsage}/{view.player.storageCapacity}
-        </strong>
-      </article>
-    </div>
-  );
-}
-
-function InventoryOverlay({
-  isWorking,
-  onSendAction,
-  view,
-}: {
-  isWorking: boolean;
-  onSendAction: (action: GameAction) => void;
-  view: GameView;
-}) {
-  const loadoutEntries = getLoadoutEntries(view);
-
-  return (
-    <div className="system-overlay">
-      <OverlayHeaderStats view={view} />
-
-      <div className="system-overlay-grid inventory-overlay-grid">
-        <div className="overlay-main-stack">
-          <section className="subpanel overlay-main-panel">
-            <PanelHeader title="Field Bag" subtitle="随身背包，服务当前决策与战斗" compact />
-            <div className="inventory-list overlay-list">
-              {view.player.inventory.map((item) => (
-                <InventoryCard
-                  key={item.itemId}
-                  busy={isWorking}
-                  extraActions={
-                    view.player.storageAccessible && !item.equipped
-                      ? [
-                          {
-                            label: '存入仓储',
-                            onClick: () =>
-                              onSendAction({ type: 'stash-item', itemId: item.itemId, count: item.count }),
-                            tone: 'secondary',
-                          },
-                        ]
-                      : undefined
-                  }
-                  item={item}
-                  onEquip={() => onSendAction({ type: 'equip-item', itemId: item.itemId })}
-                  onUnequip={() => onSendAction({ type: 'unequip-item', slot: item.equipSlot! })}
-                  onUse={() => onSendAction({ type: 'use-item', itemId: item.itemId })}
-                />
-              ))}
-            </div>
-          </section>
-
-          <section className="subpanel overlay-main-panel">
-            <PanelHeader
-              title="Shelter Storage"
-              subtitle={
-                view.player.storageAccessible
-                  ? `避难所仓储 ${view.player.storageUsage}/${view.player.storageCapacity}`
-                  : '当前不在避难所，仓储已锁定'
-              }
-              compact
-            />
-            {view.player.storageAccessible ? (
-              view.player.storage.length ? (
-                <div className="inventory-list overlay-list">
-                  {view.player.storage.map((item) => (
-                    <InventoryCard
-                      key={`storage-${item.itemId}`}
-                      busy={isWorking}
-                      extraActions={[
-                        {
-                          label: '取回背包',
-                          onClick: () =>
-                            onSendAction({ type: 'retrieve-item', itemId: item.itemId, count: item.count }),
-                          tone: 'primary',
-                        },
-                      ]}
-                      footerText={`${item.type} · 体积 ${item.volume} · 避难所仓储`}
-                      item={item}
-                    />
-                  ))}
-                </div>
-              ) : (
-                <EmptyState text="仓储目前是空的。把低频物资和备用装备放回去，可以减轻出行背包压力。" />
-              )
-            ) : (
-              <EmptyState text="只有回到 Shelter-7 后，才能访问避难所仓储和长期积累的物资。" />
-            )}
-          </section>
-        </div>
-
-        <div className="overlay-side-stack">
-          <section className="subpanel overlay-side-panel">
-            <PanelHeader title="Loadout Snapshot" subtitle="当前装备位快照" compact />
-            <div className="overlay-loadout-stack">
-              {[...loadoutEntries.left, ...loadoutEntries.right].map((entry) => (
-                <article key={entry.id} className={`overlay-loadout-row ${entry.isEquipped ? 'equipped' : ''}`}>
-                  <div>
-                    <span>{entry.label}</span>
-                    <strong>{entry.title}</strong>
-                  </div>
-                  <small>{entry.subtitle}</small>
-                </article>
-              ))}
-            </div>
-          </section>
-
-          <section className="subpanel overlay-side-panel">
-            <PanelHeader title="Storage Rules" subtitle="随身背包与基地仓储的分层规则" compact />
-            <div className="overlay-note-stack">
-              <article className="overlay-note-card">
-                <strong>容量模型</strong>
-                <p>随身背包负责当前回合决策，避难所仓储负责长线囤积，二者都受体积上限约束。</p>
-              </article>
-              <article className="overlay-note-card">
-                <strong>使用优先级</strong>
-                <p>饮水、药物和战斗工具留在身上；备用护甲、净水和材料可以先回收到仓储层。</p>
-              </article>
-            </div>
-          </section>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function MissionOverlay({ isWorking, onSendAction, view }: { isWorking: boolean; onSendAction: (action: GameAction) => void; view: GameView }) {
-  return (
-    <div className="system-overlay">
-      <OverlayHeaderStats view={view} />
-
-      <div className="system-overlay-grid mission-overlay-grid">
-        <section className="subpanel overlay-main-panel">
-          <PanelHeader title="Mission Threads" subtitle="主线、支线和当前推进步骤" compact />
-          <div className="quest-list overlay-list">
-            {view.quests.length ? (
-              view.quests.map((quest) => <QuestCard key={quest.id} quest={quest} />)
-            ) : (
-              <EmptyState text="当前没有任务线，继续探索可以触发新的委托。" />
-            )}
-          </div>
-        </section>
-
-        <div className="overlay-side-stack">
-          <section className="subpanel overlay-side-panel">
-            <PanelHeader title="Recovery Actions" subtitle="以游戏面板方式触发休整" compact />
-            <div className="rest-actions">
-              {[30, 60, 120].map((minutes) => (
-                <button
-                  key={minutes}
-                  className="rest-button"
-                  disabled={isWorking}
-                  onClick={() => onSendAction({ type: 'rest', minutes })}
-                >
-                  休息 {minutes} 分钟
-                </button>
-              ))}
-            </div>
-          </section>
-
-          <section className="subpanel overlay-side-panel">
-            <PanelHeader title="Mission Logic" subtitle="任务系统设计摘要" compact />
-            <div className="overlay-note-stack">
-              <article className="overlay-note-card">
-                <strong>生命周期</strong>
-                <p>任务分为 locked、active、completed，推进由服务端根据状态、地点、物品与标记自动结算。</p>
-              </article>
-              <article className="overlay-note-card">
-                <strong>引导方式</strong>
-                <p>新手引导应尽量通过任务链驱动，而不是频繁弹出说明窗口。</p>
-              </article>
-            </div>
-          </section>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function BlueprintOverlay({
-  isWorking,
-  onSendAction,
-  view,
-}: {
-  isWorking: boolean;
-  onSendAction: (action: GameAction) => void;
-  view: GameView;
-}) {
-  const craftableCount = view.recipes.filter((recipe) => recipe.craftable).length;
-
-  return (
-    <div className="system-overlay">
-      <OverlayHeaderStats view={view} />
-
-      <div className="system-overlay-grid blueprint-overlay-grid">
-        <section className="subpanel overlay-main-panel">
-          <PanelHeader title="Blueprint Stack" subtitle="制作配方、缺口与执行入口" compact />
-          <div className="recipe-list overlay-list">
-            {view.recipes.map((recipe) => (
-              <RecipeCard
-                key={recipe.id}
-                busy={isWorking}
-                onCraft={() => onSendAction({ type: 'craft', recipeId: recipe.id })}
-                recipe={recipe}
-              />
-            ))}
-          </div>
-        </section>
-
-        <div className="overlay-side-stack">
-          <section className="subpanel overlay-side-panel">
-            <PanelHeader title="Crafting State" subtitle="当前蓝图执行态" compact />
-            <div className="overlay-note-stack">
-              <article className="overlay-note-card">
-                <strong>可制作</strong>
-                <p>当前有 {craftableCount} 条蓝图可以立即执行。</p>
-              </article>
-              <article className="overlay-note-card">
-                <strong>系统定位</strong>
-                <p>蓝图栈属于中频决策，适合独立面板打开，而不是长期占用主 HUD 面积。</p>
-              </article>
-            </div>
-          </section>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function LogOverlay({ view }: { view: GameView }) {
-  return (
-    <div className="system-overlay">
-      <OverlayHeaderStats view={view} />
-
-      <div className="system-overlay-grid log-overlay-grid">
-        <section className="subpanel overlay-main-panel">
-          <PanelHeader title="Sector Logs" subtitle="完整行动、事件、战斗与资源变化回放" compact />
-          <div className="log-list expanded overlay-list">
-            {view.logs.map((entry) => (
-              <article key={entry.id} className={`log-entry tone-${entry.tone}`}>
-                <span>{entry.minute}m</span>
-                <p>{entry.message}</p>
-              </article>
-            ))}
-          </div>
-        </section>
-
-        <div className="overlay-side-stack">
-          <section className="subpanel overlay-side-panel">
-            <PanelHeader title="Log Policy" subtitle="日志系统设计摘要" compact />
-            <div className="overlay-note-stack">
-              <article className="overlay-note-card">
-                <strong>主屏只保留摘要</strong>
-                <p>常驻 HUD 只呈现决策必要信息，完整日志集中在独立面板中查看。</p>
-              </article>
-              <article className="overlay-note-card">
-                <strong>可追溯性</strong>
-                <p>所有时间推进、资源变化、战斗结果与事件分支都需要留下结构化日志。</p>
-              </article>
-            </div>
-          </section>
-        </div>
-      </div>
-    </div>
-  );
-}
+import { InventoryOverlay } from './overlays/InventoryOverlay';
+import { MissionOverlay } from './overlays/MissionOverlay';
+import { BlueprintOverlay } from './overlays/BlueprintOverlay';
+import { LogOverlay } from './overlays/LogOverlay';
 
 export function SystemOverlay({
   isWorking,

apps/web/src/features/game/components/TopHud.tsx

@@ -1,7 +1,8 @@
 import type { GameView } from '@tinywaste/game-core';
 import { getAlertCount, getDominantAlert, getTimeLabels } from '../hudModel';
-import { STAT_LABELS, STAT_ORDER } from '../uiAssets';
+import { getStatusArt, STAT_LABELS, STAT_ORDER } from '../uiAssets';
 import { StatMeter } from './StatMeter';
+import { HudIcon } from './HudIcon';
 
 export function TopHud({
   accountName,
@@ -25,24 +26,28 @@ export function TopHud({
         : 'safe';
 
   return (
-    <header className="top-hud">
+    <header className="top-hud hud-surface hud-surface-wide hud-top-frame">
       <div className="brand-block">
         <div className="brand-mark">TW</div>
         <div className="brand-copy">
-          <p className="eyebrow">Persistent Wasteland Interface</p>
+          <p className="eyebrow">废土生存终端</p>
           <strong>TinyWaste Online</strong>
         </div>
       </div>
 
       <div className="clock-block">
+        <HudIcon name="clock" className="clock-icon" />
+        <div>
           <span>{dayLabel}</span>
           <strong>{clockLabel}</strong>
         </div>
+      </div>
 
       <section className="status-strip">
         {STAT_ORDER.map((statKey) => (
           <StatMeter
             key={statKey}
+            iconSrc={getStatusArt(statKey)}
             label={STAT_LABELS[statKey] ?? statKey}
             maxValue={view.player.maxStats[statKey]}
             tone={statKey === 'radiation' ? 'danger' : statKey === 'life' ? 'health' : 'neutral'}
@@ -52,15 +57,12 @@ export function TopHud({
       </section>
 
       <div className="top-actions">
-        <span className="hud-chip safe">{view.header.riskLabel}</span>
         <span className={`hud-chip ${alertToneClass}`}>
           {dominantAlert ? `${dominantAlert.label} ${dominantAlert.summary}` : '状态稳定'}
         </span>
-        <span className="hud-chip">账号 {accountName}</span>
-        <span className={`hud-chip ${alertCount ? 'accent' : ''}`}>
-          {alertCount ? `警报 ${alertCount}` : '链路稳定'}
-        </span>
-        <button className="secondary-button" onClick={onLogout} disabled={logoutPending}>
+        {alertCount ? <span className="hud-chip accent">警报 {alertCount}</span> : null}
+        <button className="secondary-button top-action-button" onClick={onLogout} disabled={logoutPending}>
+          <HudIcon name="logout" className="top-action-icon" />
           退出
         </button>
       </div>

apps/web/src/features/game/components/overlays/BlueprintOverlay.tsx

@@ -0,0 +1,54 @@
+import type { GameAction, GameView } from '@tinywaste/game-core';
+import { PanelHeader } from '../../../shared/components/PanelHeader';
+import { RecipeCard } from '../cards/RecipeCard';
+import { OverlayHeaderStats } from './OverlayHeaderStats';
+
+export function BlueprintOverlay({
+  isWorking,
+  onSendAction,
+  view,
+}: {
+  isWorking: boolean;
+  onSendAction: (action: GameAction) => void;
+  view: GameView;
+}) {
+  const craftableCount = view.recipes.filter((recipe) => recipe.craftable).length;
+
+  return (
+    <div className="system-overlay">
+      <OverlayHeaderStats view={view} />
+
+      <div className="system-overlay-grid blueprint-overlay-grid">
+        <section className="subpanel overlay-main-panel">
+          <PanelHeader title="Blueprint Stack" subtitle="制作配方、缺口与执行入口" compact />
+          <div className="recipe-list overlay-list">
+            {view.recipes.map((recipe) => (
+              <RecipeCard
+                key={recipe.id}
+                busy={isWorking}
+                onCraft={() => onSendAction({ type: 'craft', recipeId: recipe.id })}
+                recipe={recipe}
+              />
+            ))}
+          </div>
+        </section>
+
+        <div className="overlay-side-stack">
+          <section className="subpanel overlay-side-panel">
+            <PanelHeader title="Crafting State" subtitle="当前蓝图执行态" compact />
+            <div className="overlay-note-stack">
+              <article className="overlay-note-card">
+                <strong>可制作</strong>
+                <p>当前有 {craftableCount} 条蓝图可以立即执行。</p>
+              </article>
+              <article className="overlay-note-card">
+                <strong>系统定位</strong>
+                <p>蓝图栈属于中频决策，适合独立面板打开，而不是长期占用主 HUD 面积。</p>
+              </article>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/features/game/components/overlays/InventoryOverlay.tsx

@@ -0,0 +1,125 @@
+import type { GameAction, GameView } from '@tinywaste/game-core';
+import { getLoadoutEntries } from '../../hudModel';
+import { PanelHeader } from '../../../shared/components/PanelHeader';
+import { InventoryCard } from '../cards/InventoryCard';
+import { EmptyState } from '../EmptyState';
+import { OverlayHeaderStats } from './OverlayHeaderStats';
+
+export function InventoryOverlay({
+  isWorking,
+  onSendAction,
+  view,
+}: {
+  isWorking: boolean;
+  onSendAction: (action: GameAction) => void;
+  view: GameView;
+}) {
+  const loadoutEntries = getLoadoutEntries(view);
+
+  return (
+    <div className="system-overlay">
+      <OverlayHeaderStats view={view} />
+
+      <div className="system-overlay-grid inventory-overlay-grid">
+        <div className="overlay-main-stack">
+          <section className="subpanel overlay-main-panel">
+            <PanelHeader title="Field Bag" subtitle="随身背包，服务当前决策与战斗" compact />
+            <div className="inventory-list overlay-list">
+              {view.player.inventory.map((item) => (
+                <InventoryCard
+                  key={item.itemId}
+                  busy={isWorking}
+                  extraActions={
+                    view.player.storageAccessible && !item.equipped
+                      ? [
+                          {
+                            label: '存入仓储',
+                            onClick: () =>
+                              onSendAction({ type: 'stash-item', itemId: item.itemId, count: item.count }),
+                            tone: 'secondary',
+                          },
+                        ]
+                      : undefined
+                  }
+                  item={item}
+                  onEquip={() => onSendAction({ type: 'equip-item', itemId: item.itemId })}
+                  onUnequip={() => onSendAction({ type: 'unequip-item', slot: item.equipSlot! })}
+                  onUse={() => onSendAction({ type: 'use-item', itemId: item.itemId })}
+                />
+              ))}
+            </div>
+          </section>
+
+          <section className="subpanel overlay-main-panel">
+            <PanelHeader
+              title="Shelter Storage"
+              subtitle={
+                view.player.storageAccessible
+                  ? `避难所仓储 ${view.player.storageUsage}/${view.player.storageCapacity}`
+                  : '当前不在避难所，仓储已锁定'
+              }
+              compact
+            />
+            {view.player.storageAccessible ? (
+              view.player.storage.length ? (
+                <div className="inventory-list overlay-list">
+                  {view.player.storage.map((item) => (
+                    <InventoryCard
+                      key={`storage-${item.itemId}`}
+                      busy={isWorking}
+                      extraActions={[
+                        {
+                          label: '取回背包',
+                          onClick: () =>
+                            onSendAction({ type: 'retrieve-item', itemId: item.itemId, count: item.count }),
+                          tone: 'primary',
+                        },
+                      ]}
+                      footerText={`${item.type} · 体积 ${item.volume} · 避难所仓储`}
+                      item={item}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <EmptyState text="仓储目前是空的。把低频物资和备用装备放回去，可以减轻出行背包压力。" />
+              )
+            ) : (
+              <EmptyState text="只有回到 Shelter-7 后，才能访问避难所仓储和长期积累的物资。" />
+            )}
+          </section>
+        </div>
+
+        <div className="overlay-side-stack">
+          <section className="subpanel overlay-side-panel">
+            <PanelHeader title="Loadout Snapshot" subtitle="当前装备位快照" compact />
+            <div className="overlay-loadout-stack">
+              {[...loadoutEntries.left, ...loadoutEntries.right].map((entry) => (
+                <article key={entry.id} className={`overlay-loadout-row ${entry.isEquipped ? 'equipped' : ''}`}>
+                  <div>
+                    <span>{entry.label}</span>
+                    <strong>{entry.title}</strong>
+                  </div>
+                  <small>{entry.subtitle}</small>
+                </article>
+              ))}
+            </div>
+          </section>
+
+          <section className="subpanel overlay-side-panel">
+            <PanelHeader title="Storage Rules" subtitle="随身背包与基地仓储的分层规则" compact />
+            <div className="overlay-note-stack">
+              <article className="overlay-note-card">
+                <strong>容量模型</strong>
+                <p>随身背包负责当前回合决策，避难所仓储负责长线囤积，二者都受体积上限约束。</p>
+              </article>
+              <article className="overlay-note-card">
+                <strong>使用优先级</strong>
+                <p>饮水、药物和战斗工具留在身上；备用护甲、净水和材料可以先回收到仓储层。</p>
+              </article>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/features/game/components/overlays/LogOverlay.tsx

@@ -0,0 +1,41 @@
+import type { GameView } from '@tinywaste/game-core';
+import { PanelHeader } from '../../../shared/components/PanelHeader';
+import { OverlayHeaderStats } from './OverlayHeaderStats';
+
+export function LogOverlay({ view }: { view: GameView }) {
+  return (
+    <div className="system-overlay">
+      <OverlayHeaderStats view={view} />
+
+      <div className="system-overlay-grid log-overlay-grid">
+        <section className="subpanel overlay-main-panel">
+          <PanelHeader title="Sector Logs" subtitle="完整行动、事件、战斗与资源变化回放" compact />
+          <div className="log-list expanded overlay-list">
+            {view.logs.map((entry) => (
+              <article key={entry.id} className={`log-entry tone-${entry.tone}`}>
+                <span>{entry.minute}m</span>
+                <p>{entry.message}</p>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <div className="overlay-side-stack">
+          <section className="subpanel overlay-side-panel">
+            <PanelHeader title="Log Policy" subtitle="日志系统设计摘要" compact />
+            <div className="overlay-note-stack">
+              <article className="overlay-note-card">
+                <strong>主屏只保留摘要</strong>
+                <p>常驻 HUD 只呈现决策必要信息，完整日志集中在独立面板中查看。</p>
+              </article>
+              <article className="overlay-note-card">
+                <strong>可追溯性</strong>
+                <p>所有时间推进、资源变化、战斗结果与事件分支都需要留下结构化日志。</p>
+              </article>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/features/game/components/overlays/MissionOverlay.tsx

@@ -0,0 +1,66 @@
+import type { GameAction, GameView } from '@tinywaste/game-core';
+import { PanelHeader } from '../../../shared/components/PanelHeader';
+import { QuestCard } from '../cards/QuestCard';
+import { EmptyState } from '../EmptyState';
+import { OverlayHeaderStats } from './OverlayHeaderStats';
+
+export function MissionOverlay({
+  isWorking,
+  onSendAction,
+  view,
+}: {
+  isWorking: boolean;
+  onSendAction: (action: GameAction) => void;
+  view: GameView;
+}) {
+  return (
+    <div className="system-overlay">
+      <OverlayHeaderStats view={view} />
+
+      <div className="system-overlay-grid mission-overlay-grid">
+        <section className="subpanel overlay-main-panel">
+          <PanelHeader title="Mission Threads" subtitle="主线、支线和当前推进步骤" compact />
+          <div className="quest-list overlay-list">
+            {view.quests.length ? (
+              view.quests.map((quest) => <QuestCard key={quest.id} quest={quest} />)
+            ) : (
+              <EmptyState text="当前没有任务线，继续探索可以触发新的委托。" />
+            )}
+          </div>
+        </section>
+
+        <div className="overlay-side-stack">
+          <section className="subpanel overlay-side-panel">
+            <PanelHeader title="Recovery Actions" subtitle="以游戏面板方式触发休整" compact />
+            <div className="rest-actions">
+              {[30, 60, 120].map((minutes) => (
+                <button
+                  key={minutes}
+                  className="rest-button"
+                  disabled={isWorking}
+                  onClick={() => onSendAction({ type: 'rest', minutes })}
+                >
+                  休息 {minutes} 分钟
+                </button>
+              ))}
+            </div>
+          </section>
+
+          <section className="subpanel overlay-side-panel">
+            <PanelHeader title="Mission Logic" subtitle="任务系统设计摘要" compact />
+            <div className="overlay-note-stack">
+              <article className="overlay-note-card">
+                <strong>生命周期</strong>
+                <p>任务分为 locked、active、completed，推进由服务端根据状态、地点、物品与标记自动结算。</p>
+              </article>
+              <article className="overlay-note-card">
+                <strong>引导方式</strong>
+                <p>新手引导应尽量通过任务链驱动，而不是频繁弹出说明窗口。</p>
+              </article>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/features/game/components/overlays/OverlayHeaderStats.tsx

@@ -0,0 +1,40 @@
+import type { GameView } from '@tinywaste/game-core';
+import { getActiveQuestCount, getSupplyCounts } from '../../hudModel';
+
+export function OverlayHeaderStats({ view }: { view: GameView }) {
+  const supplyCounts = getSupplyCounts(view);
+  const activeQuestCount = getActiveQuestCount(view);
+
+  return (
+    <div className="overlay-summary-grid">
+      <article className="overlay-summary-card">
+        <span>容量</span>
+        <strong>
+          {view.player.inventoryUsage}/{view.player.inventoryCapacity}
+        </strong>
+      </article>
+      <article className="overlay-summary-card">
+        <span>水</span>
+        <strong>{supplyCounts.water}</strong>
+      </article>
+      <article className="overlay-summary-card">
+        <span>食物</span>
+        <strong>{supplyCounts.food}</strong>
+      </article>
+      <article className="overlay-summary-card">
+        <span>药品</span>
+        <strong>{supplyCounts.medicine}</strong>
+      </article>
+      <article className="overlay-summary-card">
+        <span>任务</span>
+        <strong>{activeQuestCount}</strong>
+      </article>
+      <article className="overlay-summary-card">
+        <span>仓储</span>
+        <strong>
+          {view.player.storageUsage}/{view.player.storageCapacity}
+        </strong>
+      </article>
+    </div>
+  );
+}

apps/web/src/features/game/hudModel.ts

@@ -1,293 +1,50 @@
-import type { EdgeView, GameView, InventoryViewEntry, QuestView } from '@tinywaste/game-core';
-import { getEquipmentArt, getItemArt, getStatusArt } from './uiAssets';
+/**
+ * hudModel — Barrel re-export for backward compatibility.
+ *
+ * The actual implementations live in:
+ *   models/routeModel.ts     — map, routes, atmosphere
+ *   models/equipmentModel.ts — loadout, equipment slots
+ *   models/survivalModel.ts  — stats, alerts, metrics, supplies
+ *   models/questModel.ts     — quests, objectives
+ *   models/utils.ts          — time, logs, quick-use, attributes
+ */
 
-export interface EquipmentPreviewEntry {
-  id: string;
-  label: string;
-  title: string;
-  subtitle: string;
-  art?: string;
-  isEquipped: boolean;
-}
+export type { EquipmentPreviewEntry } from './models/equipmentModel';
 
-export function edgeDestination(view: GameView, edge: EdgeView) {
-  return view.map.places.find((place) => place.id === edge.to);
-}
+export {
+  edgeDestination,
+  getCurrentPlace,
+  getPlaceAtmosphere,
+  getVisibleRoutes,
+  getRouteRiskTier,
+  getRiskDots,
+} from './models/routeModel';
 
-export function getTimeLabels(timeLabel: string) {
-  const timeSegments = timeLabel.split('·').map((part) => part.trim());
-  return {
-    dayLabel: timeSegments[0] ?? 'Day 1',
-    clockLabel: timeSegments[1] ?? timeLabel,
-  };
-}
+export {
+  getKitItem,
+  getLoadoutEntries,
+} from './models/equipmentModel';
 
-export function getActiveQuestCount(view: GameView) {
-  return view.quests.filter((quest) => quest.state === 'active').length;
-}
+export {
+  getAlertCount,
+  getDominantAlert,
+  getStatusEffects,
+  getExpeditionStatus,
+  getSurvivorMetrics,
+  getSupplyCounts,
+} from './models/survivalModel';
 
-export function getAlertCount(view: GameView) {
-  return Number(Boolean(view.pendingEvent)) + Number(Boolean(view.combat));
-}
+export {
+  getActiveQuestCount,
+  getObjectiveRows,
+  getPrimaryObjective,
+  getQuestProgress,
+} from './models/questModel';
 
-export function getDominantAlert(view: GameView) {
-  return view.survival.alerts[0] ?? null;
-}
-
-export function getCurrentPlace(view: GameView) {
-  return view.map.places.find((place) => place.current) ?? null;
-}
-
-export function getLatestLog(view: GameView) {
-  return view.logs[0] ?? null;
-}
-
-export function getVisibleInventory(view: GameView, limit = 6) {
-  return view.player.inventory.slice(0, limit);
-}
-
-export function getQuickUseItems(view: GameView, limit = 6) {
-  const priority = {
-    water: 0,
-    food: 1,
-    medicine: 2,
-    tool: 3,
-    material: 4,
-    weapon: 5,
-    armor: 6,
-    ammo: 7,
-    quest: 8,
-  } as const;
-
-  return [...view.player.inventory]
-    .filter((item) => item.canUse)
-    .sort((left, right) => {
-      const priorityDelta = priority[left.type] - priority[right.type];
-      if (priorityDelta !== 0) return priorityDelta;
-      return right.count - left.count;
-    })
-    .slice(0, limit);
-}
-
-export function getObjectiveRows(view: GameView) {
-  return view.quests
-    .filter((quest) => quest.state === 'active' || quest.state === 'completed')
-    .map((quest) => {
-      const doneCount = quest.steps.filter((step) => step.done).length;
-      const nextStep = quest.steps.find((step) => !step.done)?.text ?? quest.steps.at(-1)?.text ?? '待机';
-
-      return {
-        id: quest.id,
-        title: quest.title,
-        detail: nextStep,
-        progress: `${doneCount}/${quest.steps.length}`,
-        done: quest.state === 'completed',
-      };
-    });
-}
-
-export function getPrimaryObjective(view: GameView) {
-  return getObjectiveRows(view)[0] ?? null;
-}
-
-export function getAttributeRows(view: GameView) {
-  const { attributes } = view.player;
-
-  return [
-    { label: 'STR', name: '力量', value: attributes.str },
-    { label: 'AGI', name: '敏捷', value: attributes.agi },
-    { label: 'INT', name: '智力', value: attributes.int },
-    { label: 'PER', name: '感知', value: attributes.per },
-    { label: 'LCK', name: '幸运', value: attributes.luck },
-  ];
-}
-
-export function getStatusEffects(view: GameView) {
-  const effects = view.survival.alerts.map((entry) => ({
-    id: entry.stat,
-    label: `${entry.label} · ${entry.summary}`,
-    detail: entry.impact,
-    recovery: entry.recovery,
-    art: getStatusArt(entry.stat),
-    tone:
-      entry.tier === 'strained' ? ('warn' as const) : entry.tier === 'safe' ? ('good' as const) : ('danger' as const),
-  }));
-
-  if (!effects.length) {
-    return [
-      {
-        id: 'stable',
-        label: '稳定',
-        detail: '当前幸存者状态平稳，可以继续规划下一步行动。',
-        recovery: '保持补给循环与节奏即可。',
-        art: getStatusArt('life'),
-        tone: 'good' as const,
-      },
-    ];
-  }
-
-  return effects.slice(0, 4);
-}
-
-export function getExpeditionStatus(view: GameView) {
-  const { stats, maxStats } = view.player;
-  const readiness = Math.round(
-    (stats.life / maxStats.life) * 34 +
-      (stats.energy / maxStats.energy) * 28 +
-      (stats.thirst / maxStats.thirst) * 20 +
-      (stats.hunger / maxStats.hunger) * 18,
-  );
-  const loadPercent = Math.round((view.player.inventoryUsage / view.player.inventoryCapacity) * 100);
-  const threatCount = view.survival.alerts.length;
-
-  return {
-    readiness,
-    loadPercent,
-    threatCount,
-    tone: readiness >= 74 && threatCount === 0 ? 'good' : readiness >= 48 ? 'warn' : 'danger',
-  };
-}
-
-export function getSurvivorMetrics(view: GameView) {
-  const protection = Math.min(
-    100,
-    Math.round(
-      (view.player.equipment.body ? 34 : 12) +
-        view.player.attributes.str * 5 +
-        (view.player.stats.life / view.player.maxStats.life) * 30,
-    ),
-  );
-  const stealth = Math.min(
-    100,
-    Math.round(
-      view.player.attributes.agi * 8 +
-        view.player.attributes.per * 5 +
-        (view.player.stats.sanity / view.player.maxStats.sanity) * 20,
-    ),
-  );
-  const mobility = Math.max(
-    0,
-    Math.min(
-      100,
-      Math.round(
-        view.player.attributes.agi * 7 +
-          (view.player.stats.energy / view.player.maxStats.energy) * 42 -
-          (view.player.inventoryUsage / view.player.inventoryCapacity) * 18,
-      ),
-    ),
-  );
-
-  return [
-    { id: 'protection', label: '防护', value: protection },
-    { id: 'stealth', label: '潜行', value: stealth },
-    { id: 'mobility', label: '机动', value: mobility },
-  ];
-}
-
-export function getSupplyCounts(view: GameView) {
-  const counts = {
-    water: 0,
-    food: 0,
-    medicine: 0,
-    material: 0,
-  };
-
-  for (const item of view.player.inventory) {
-    if (item.type === 'water') counts.water += item.count;
-    if (item.type === 'food') counts.food += item.count;
-    if (item.type === 'medicine') counts.medicine += item.count;
-    if (item.type === 'material') counts.material += item.count;
-  }
-
-  return counts;
-}
-
-export function getKitItem(view: GameView) {
-  return view.player.inventory.find((item) => item.type === 'medicine' || item.type === 'water') ?? null;
-}
-
-export function getLoadoutEntries(view: GameView) {
-  const inventoryById = new Map(view.player.inventory.map((item) => [item.itemId, item]));
-  const weaponItem = view.player.equipment.weapon ? inventoryById.get(view.player.equipment.weapon) : undefined;
-  const bodyItem = view.player.equipment.body ? inventoryById.get(view.player.equipment.body) : undefined;
-  const toolItem = view.player.equipment.tool ? inventoryById.get(view.player.equipment.tool) : undefined;
-  const kitItem = getKitItem(view);
-
-  const left: EquipmentPreviewEntry[] = [
-    {
-      id: 'head',
-      label: 'Head',
-      title: '遮面兜帽',
-      subtitle: '造型预置位',
-      art: getEquipmentArt(undefined, 'head'),
-      isEquipped: false,
-    },
-    {
-      id: 'body',
-      label: 'Body',
-      title: bodyItem?.name ?? '未装备护甲',
-      subtitle: bodyItem ? '已挂载在躯干槽' : '建议保留一件抗风装备',
-      art: getEquipmentArt(bodyItem?.itemId, 'body'),
-      isEquipped: Boolean(bodyItem),
-    },
-    {
-      id: 'back',
-      label: 'Back',
-      title: '远行背包',
-      subtitle: `容量 ${view.player.inventoryUsage}/${view.player.inventoryCapacity}`,
-      art: getEquipmentArt(undefined, 'back'),
-      isEquipped: true,
-    },
-  ];
-
-  const right: EquipmentPreviewEntry[] = [
-    {
-      id: 'weapon',
-      label: 'Weapon',
-      title: weaponItem?.name ?? '未装备主武器',
-      subtitle: weaponItem ? '武器槽在线' : '可通过蓝图制作远程装备',
-      art: getEquipmentArt(weaponItem?.itemId, 'weapon'),
-      isEquipped: Boolean(weaponItem),
-    },
-    {
-      id: 'tool',
-      label: 'Tool',
-      title: toolItem?.name ?? '未挂载工具',
-      subtitle: toolItem ? '工具槽在线' : '撬棍可作为早期万能工具',
-      art: getEquipmentArt(toolItem?.itemId, 'tool'),
-      isEquipped: Boolean(toolItem),
-    },
-    {
-      id: 'kit',
-      label: 'Kit',
-      title: kitItem?.name ?? '未配置急救包',
-      subtitle: kitItem ? `携带 ${kitItem.count} 件应急补给` : '建议随身携带水或药物',
-      art: kitItem ? getItemArt(kitItem.itemId, kitItem.type) : getEquipmentArt(undefined, 'kit'),
-      isEquipped: Boolean(kitItem),
-    },
-  ];
-
-  return { left, right };
-}
-
-export function getRouteRiskTier(risk: number) {
-  if (risk <= 0.35) return { label: '低风险', tone: 'safe' as const };
-  if (risk <= 0.65) return { label: '中风险', tone: 'warn' as const };
-  return { label: '高风险', tone: 'danger' as const };
-}
-
-export function getRiskDots(risk: number) {
-  const lit = Math.max(1, Math.min(6, Math.round(risk * 6)));
-  return Array.from({ length: 6 }, (_, index) => index < lit);
-}
-
-export function getInventoryStateLabel(item: InventoryViewEntry) {
-  if (item.equipped) return '已装备';
-  if (item.canUse) return '可立即使用';
-  if (item.equipSlot) return '可挂载';
-  return '物资储备';
-}
-
-export function getQuestProgress(quest: QuestView) {
-  return `${quest.steps.filter((step) => step.done).length}/${quest.steps.length}`;
-}
+export {
+  getTimeLabels,
+  getLatestLog,
+  getQuickUseItems,
+  getAttributeRows,
+  getInventoryStateLabel,
+} from './models/utils';

apps/web/src/features/game/models/equipmentModel.ts

@@ -0,0 +1,79 @@
+import type { GameView } from '@tinywaste/game-core';
+import { getEquipmentArt, getItemArt } from '../uiAssets';
+
+export interface EquipmentPreviewEntry {
+  id: string;
+  label: string;
+  title: string;
+  subtitle: string;
+  art?: string;
+  isEquipped: boolean;
+}
+
+export function getKitItem(view: GameView) {
+  return view.player.inventory.find((item) => item.type === 'medicine' || item.type === 'water') ?? null;
+}
+
+export function getLoadoutEntries(view: GameView) {
+  const inventoryById = new Map(view.player.inventory.map((item) => [item.itemId, item]));
+  const weaponItem = view.player.equipment.weapon ? inventoryById.get(view.player.equipment.weapon) : undefined;
+  const bodyItem = view.player.equipment.body ? inventoryById.get(view.player.equipment.body) : undefined;
+  const toolItem = view.player.equipment.tool ? inventoryById.get(view.player.equipment.tool) : undefined;
+  const kitItem = getKitItem(view);
+
+  const left: EquipmentPreviewEntry[] = [
+    {
+      id: 'head',
+      label: 'Head',
+      title: '遮面兜帽',
+      subtitle: '造型预置位',
+      art: getEquipmentArt(undefined, 'head'),
+      isEquipped: false,
+    },
+    {
+      id: 'body',
+      label: 'Body',
+      title: bodyItem?.name ?? '未装备护甲',
+      subtitle: bodyItem ? '已挂载在躯干槽' : '建议保留一件抗风装备',
+      art: getEquipmentArt(bodyItem?.itemId, 'body'),
+      isEquipped: Boolean(bodyItem),
+    },
+    {
+      id: 'back',
+      label: 'Back',
+      title: '远行背包',
+      subtitle: `容量 ${view.player.inventoryUsage}/${view.player.inventoryCapacity}`,
+      art: getEquipmentArt(undefined, 'back'),
+      isEquipped: true,
+    },
+  ];
+
+  const right: EquipmentPreviewEntry[] = [
+    {
+      id: 'weapon',
+      label: 'Weapon',
+      title: weaponItem?.name ?? '未装备主武器',
+      subtitle: weaponItem ? '武器槽在线' : '可通过蓝图制作远程装备',
+      art: getEquipmentArt(weaponItem?.itemId, 'weapon'),
+      isEquipped: Boolean(weaponItem),
+    },
+    {
+      id: 'tool',
+      label: 'Tool',
+      title: toolItem?.name ?? '未挂载工具',
+      subtitle: toolItem ? '工具槽在线' : '撬棍可作为早期万能工具',
+      art: getEquipmentArt(toolItem?.itemId, 'tool'),
+      isEquipped: Boolean(toolItem),
+    },
+    {
+      id: 'kit',
+      label: 'Kit',
+      title: kitItem?.name ?? '未配置急救包',
+      subtitle: kitItem ? `携带 ${kitItem.count} 件应急补给` : '建议随身携带水或药物',
+      art: kitItem ? getItemArt(kitItem.itemId, kitItem.type) : getEquipmentArt(undefined, 'kit'),
+      isEquipped: Boolean(kitItem),
+    },
+  ];
+
+  return { left, right };
+}

apps/web/src/features/game/models/questModel.ts

@@ -0,0 +1,30 @@
+import type { GameView, QuestView } from '@tinywaste/game-core';
+
+export function getActiveQuestCount(view: GameView) {
+  return view.quests.filter((quest) => quest.state === 'active').length;
+}
+
+export function getObjectiveRows(view: GameView) {
+  return view.quests
+    .filter((quest) => quest.state === 'active' || quest.state === 'completed')
+    .map((quest) => {
+      const doneCount = quest.steps.filter((step) => step.done).length;
+      const nextStep = quest.steps.find((step) => !step.done)?.text ?? quest.steps.at(-1)?.text ?? '待机';
+
+      return {
+        id: quest.id,
+        title: quest.title,
+        detail: nextStep,
+        progress: `${doneCount}/${quest.steps.length}`,
+        done: quest.state === 'completed',
+      };
+    });
+}
+
+export function getPrimaryObjective(view: GameView) {
+  return getObjectiveRows(view)[0] ?? null;
+}
+
+export function getQuestProgress(quest: QuestView) {
+  return `${quest.steps.filter((step) => step.done).length}/${quest.steps.length}`;
+}

apps/web/src/features/game/models/routeModel.ts

@@ -0,0 +1,51 @@
+import type { EdgeView, GameView } from '@tinywaste/game-core';
+
+/** Risk tier boundaries */
+const RISK_LOW_MAX = 0.35;
+const RISK_MID_MAX = 0.65;
+
+const PLACE_ATMOSPHERE: Record<
+  string,
+  {
+    weather: string;
+    temperature: string;
+    wind: string;
+  }
+> = {
+  home: { weather: 'Light rain', temperature: '18°C', wind: 'Wind 12 km/h' },
+  roadside: { weather: 'Cloud break', temperature: '16°C', wind: 'Wind 18 km/h' },
+  old_store: { weather: 'Dust drift', temperature: '20°C', wind: 'Wind 9 km/h' },
+  village_market: { weather: 'Dry overcast', temperature: '22°C', wind: 'Wind 7 km/h' },
+  rain_farm: { weather: 'Wet fog', temperature: '14°C', wind: 'Wind 10 km/h' },
+  city_edge: { weather: 'Soot haze', temperature: '19°C', wind: 'Wind 15 km/h' },
+  subway_entrance: { weather: 'Cold draft', temperature: '11°C', wind: 'Wind 6 km/h' },
+  sewer: { weather: 'Toxic mist', temperature: '13°C', wind: 'Air still' },
+  vault_gate: { weather: 'Ash fall', temperature: '9°C', wind: 'Wind 4 km/h' },
+};
+
+export function edgeDestination(view: GameView, edge: EdgeView) {
+  return view.map.places.find((place) => place.id === edge.to);
+}
+
+export function getCurrentPlace(view: GameView) {
+  return view.map.places.find((place) => place.current) ?? null;
+}
+
+export function getPlaceAtmosphere(placeId: string) {
+  return PLACE_ATMOSPHERE[placeId] ?? { weather: 'Dry static', temperature: '17°C', wind: 'Wind 10 km/h' };
+}
+
+export function getVisibleRoutes(view: GameView, limit = 3) {
+  return view.map.edges.slice(0, limit);
+}
+
+export function getRouteRiskTier(risk: number) {
+  if (risk <= RISK_LOW_MAX) return { label: '低风险', tone: 'safe' as const };
+  if (risk <= RISK_MID_MAX) return { label: '中风险', tone: 'warn' as const };
+  return { label: '高风险', tone: 'danger' as const };
+}
+
+export function getRiskDots(risk: number) {
+  const lit = Math.max(1, Math.min(6, Math.round(risk * 6)));
+  return Array.from({ length: 6 }, (_, index) => index < lit);
+}

apps/web/src/features/game/models/survivalModel.ts

@@ -0,0 +1,136 @@
+import type { GameView } from '@tinywaste/game-core';
+import { getStatusArt } from '../uiAssets';
+
+/** Readiness weights for each survival stat (must sum to 100) */
+const READINESS_WEIGHTS = {
+  life: 34,
+  energy: 28,
+  thirst: 20,
+  hunger: 18,
+} as const;
+
+/** Readiness thresholds for tone classification */
+const READINESS_TONE_THRESHOLD_GOOD = 74;
+const READINESS_TONE_THRESHOLD_WARN = 48;
+
+/** Survivor metric formula constants */
+const PROTECTION_BASE_ARMOR = 34;
+const PROTECTION_BASE_UNARMORED = 12;
+const PROTECTION_STR_FACTOR = 5;
+const PROTECTION_LIFE_FACTOR = 30;
+
+const STEALTH_AGI_FACTOR = 8;
+const STEALTH_PER_FACTOR = 5;
+const STEALTH_SANITY_FACTOR = 20;
+
+const MOBILITY_AGI_FACTOR = 7;
+const MOBILITY_ENERGY_FACTOR = 42;
+const MOBILITY_LOAD_PENALTY = 18;
+
+export function getAlertCount(view: GameView) {
+  return Number(Boolean(view.pendingEvent)) + Number(Boolean(view.combat));
+}
+
+export function getDominantAlert(view: GameView) {
+  return view.survival.alerts[0] ?? null;
+}
+
+export function getStatusEffects(view: GameView) {
+  const effects = view.survival.alerts.map((entry) => ({
+    id: entry.stat,
+    label: `${entry.label} · ${entry.summary}`,
+    detail: entry.impact,
+    recovery: entry.recovery,
+    art: getStatusArt(entry.stat),
+    tone:
+      entry.tier === 'strained' ? ('warn' as const) : entry.tier === 'safe' ? ('good' as const) : ('danger' as const),
+  }));
+
+  if (!effects.length) {
+    return [
+      {
+        id: 'stable',
+        label: '稳定',
+        detail: '当前幸存者状态平稳，可以继续规划下一步行动。',
+        recovery: '保持补给循环与节奏即可。',
+        art: getStatusArt('life'),
+        tone: 'good' as const,
+      },
+    ];
+  }
+
+  return effects.slice(0, 4);
+}
+
+export function getExpeditionStatus(view: GameView) {
+  const { stats, maxStats } = view.player;
+  const readiness = Math.round(
+    (stats.life / maxStats.life) * READINESS_WEIGHTS.life +
+      (stats.energy / maxStats.energy) * READINESS_WEIGHTS.energy +
+      (stats.thirst / maxStats.thirst) * READINESS_WEIGHTS.thirst +
+      (stats.hunger / maxStats.hunger) * READINESS_WEIGHTS.hunger,
+  );
+  const loadPercent = Math.round((view.player.inventoryUsage / view.player.inventoryCapacity) * 100);
+  const threatCount = view.survival.alerts.length;
+
+  return {
+    readiness,
+    loadPercent,
+    threatCount,
+    tone: readiness >= READINESS_TONE_THRESHOLD_GOOD && threatCount === 0 ? 'good' : readiness >= READINESS_TONE_THRESHOLD_WARN ? 'warn' : 'danger',
+  };
+}
+
+export function getSurvivorMetrics(view: GameView) {
+  const protection = Math.min(
+    100,
+    Math.round(
+      (view.player.equipment.body ? PROTECTION_BASE_ARMOR : PROTECTION_BASE_UNARMORED) +
+        view.player.attributes.str * PROTECTION_STR_FACTOR +
+        (view.player.stats.life / view.player.maxStats.life) * PROTECTION_LIFE_FACTOR,
+    ),
+  );
+  const stealth = Math.min(
+    100,
+    Math.round(
+      view.player.attributes.agi * STEALTH_AGI_FACTOR +
+        view.player.attributes.per * STEALTH_PER_FACTOR +
+        (view.player.stats.sanity / view.player.maxStats.sanity) * STEALTH_SANITY_FACTOR,
+    ),
+  );
+  const mobility = Math.max(
+    0,
+    Math.min(
+      100,
+      Math.round(
+        view.player.attributes.agi * MOBILITY_AGI_FACTOR +
+          (view.player.stats.energy / view.player.maxStats.energy) * MOBILITY_ENERGY_FACTOR -
+          (view.player.inventoryUsage / view.player.inventoryCapacity) * MOBILITY_LOAD_PENALTY,
+      ),
+    ),
+  );
+
+  return [
+    { id: 'protection', label: '防护', value: protection },
+    { id: 'stealth', label: '潜行', value: stealth },
+    { id: 'mobility', label: '机动', value: mobility },
+  ];
+}
+
+export function getSupplyCounts(view: GameView) {
+  const counts = {
+    water: 0,
+    food: 0,
+    medicine: 0,
+    material: 0,
+  };
+
+  for (const item of view.player.inventory) {
+    if (item.type === 'water') counts.water += item.count;
+    if (item.type === 'food') counts.food += item.count;
+    if (item.type === 'medicine') counts.medicine += item.count;
+    if (item.type === 'material') counts.material += item.count;
+  }
+
+  return counts;
+}

apps/web/src/features/game/models/utils.ts

@@ -0,0 +1,55 @@
+import type { GameView, InventoryViewEntry } from '@tinywaste/game-core';
+
+export function getTimeLabels(timeLabel: string) {
+  const timeSegments = timeLabel.split('·').map((part) => part.trim());
+  return {
+    dayLabel: timeSegments[0] ?? 'Day 1',
+    clockLabel: timeSegments[1] ?? timeLabel,
+  };
+}
+
+export function getLatestLog(view: GameView) {
+  return view.logs[0] ?? null;
+}
+
+export function getQuickUseItems(view: GameView, limit = 6) {
+  const priority = {
+    water: 0,
+    food: 1,
+    medicine: 2,
+    tool: 3,
+    material: 4,
+    weapon: 5,
+    armor: 6,
+    ammo: 7,
+    quest: 8,
+  } as const;
+
+  return [...view.player.inventory]
+    .filter((item) => item.canUse)
+    .sort((left, right) => {
+      const priorityDelta = priority[left.type] - priority[right.type];
+      if (priorityDelta !== 0) return priorityDelta;
+      return right.count - left.count;
+    })
+    .slice(0, limit);
+}
+
+export function getAttributeRows(view: GameView) {
+  const { attributes } = view.player;
+
+  return [
+    { label: 'STR', name: '力量', value: attributes.str },
+    { label: 'AGI', name: '敏捷', value: attributes.agi },
+    { label: 'INT', name: '智力', value: attributes.int },
+    { label: 'PER', name: '感知', value: attributes.per },
+    { label: 'LCK', name: '幸运', value: attributes.luck },
+  ];
+}
+
+export function getInventoryStateLabel(item: InventoryViewEntry) {
+  if (item.equipped) return '已装备';
+  if (item.canUse) return '可立即使用';
+  if (item.equipSlot) return '可挂载';
+  return '物资储备';
+}

apps/web/src/features/game/uiAssets.ts

@@ -3,6 +3,7 @@ import type { EquipSlot } from '@tinywaste/game-core';
 
 const GENERATED_ROOT = '/generated';
 const GENERATED_UI_ROOT = `${GENERATED_ROOT}/ui`;
+const GENERATED_HUD_ROOT = `${GENERATED_ROOT}/hud`;
 
 export const PLACE_ART: Record<string, string> = {
   home: `${GENERATED_ROOT}/home-camp.png`,
@@ -81,6 +82,49 @@ const ITEM_TO_EQUIPMENT_ART: Record<string, string> = {
   leather_coat: `${GENERATED_UI_ROOT}/equipment/body-coat.png`,
 };
 
+export const HUD_REFERENCE_ART = `${GENERATED_HUD_ROOT}/reference/tinywaste-hud-reference.png`;
+
+export const HUD_CHROME_ART = {
+  panelWide: `${GENERATED_HUD_ROOT}/chrome/panel-wide.png`,
+  panelTall: `${GENERATED_HUD_ROOT}/chrome/panel-tall.png`,
+  panelCard: `${GENERATED_HUD_ROOT}/chrome/panel-card.png`,
+  panelCompact: `${GENERATED_HUD_ROOT}/chrome/panel-compact.png`,
+  routeCardIdle: `${GENERATED_HUD_ROOT}/chrome/route-card-idle.png`,
+  routeCardActive: `${GENERATED_HUD_ROOT}/chrome/route-card-active.png`,
+  actionCardPrimary: `${GENERATED_HUD_ROOT}/chrome/action-card-primary.png`,
+  actionCardSecondary: `${GENERATED_HUD_ROOT}/chrome/action-card-secondary.png`,
+  statusCapsule: `${GENERATED_HUD_ROOT}/chrome/status-capsule.png`,
+  statusMeter: `${GENERATED_HUD_ROOT}/chrome/status-meter.png`,
+  quickStrip: `${GENERATED_HUD_ROOT}/chrome/quick-strip.png`,
+  quickStripLocked: `${GENERATED_HUD_ROOT}/chrome/quick-strip-locked.png`,
+  dockTabIdle: `${GENERATED_HUD_ROOT}/chrome/dock-tab-idle.png`,
+  dockTabActive: `${GENERATED_HUD_ROOT}/chrome/dock-tab-active.png`,
+  warningStrip: `${GENERATED_HUD_ROOT}/chrome/warning-strip.png`,
+  dividerOrnament: `${GENERATED_HUD_ROOT}/chrome/divider-ornament.png`,
+} as const;
+
+export const HUD_ICON_ART = {
+  shelter: `${GENERATED_HUD_ROOT}/icons/shelter.png`,
+  expedition: `${GENERATED_HUD_ROOT}/icons/expedition.png`,
+  inventory: `${GENERATED_HUD_ROOT}/icons/inventory.png`,
+  crafting: `${GENERATED_HUD_ROOT}/icons/crafting.png`,
+  skills: `${GENERATED_HUD_ROOT}/icons/skills.png`,
+  factions: `${GENERATED_HUD_ROOT}/icons/factions.png`,
+  map: `${GENERATED_HUD_ROOT}/icons/map.png`,
+  weather: `${GENERATED_HUD_ROOT}/icons/weather.png`,
+  clock: `${GENERATED_HUD_ROOT}/icons/clock.png`,
+  routePin: `${GENERATED_HUD_ROOT}/icons/route-pin.png`,
+  rest: `${GENERATED_HUD_ROOT}/icons/rest.png`,
+  repair: `${GENERATED_HUD_ROOT}/icons/repair.png`,
+  scavenge: `${GENERATED_HUD_ROOT}/icons/scavenge.png`,
+  signal: `${GENERATED_HUD_ROOT}/icons/signal.png`,
+  settings: `${GENERATED_HUD_ROOT}/icons/settings.png`,
+  logout: `${GENERATED_HUD_ROOT}/icons/logout.png`,
+} as const;
+
+export type HudChromeAsset = keyof typeof HUD_CHROME_ART;
+export type HudIconAsset = keyof typeof HUD_ICON_ART;
+
 export function getPlaceHeroStyle(placeId: string): CSSProperties {
   return {
     backgroundImage: `linear-gradient(180deg, rgba(7, 7, 7, 0.12), rgba(7, 7, 7, 0.84)), linear-gradient(90deg, rgba(220, 146, 65, 0.18), rgba(10, 10, 10, 0.05) 58%), url(${PLACE_ART[placeId] ?? ''})`,
@@ -117,4 +161,10 @@ export function getEquipmentArt(itemId?: string, slot?: EquipSlot | 'head' | 'ba
   return undefined;
 }
 
-export const CHARACTER_PREVIEW_ART = `${GENERATED_UI_ROOT}/character-preview.png`;
+export function getHudChromeArt(name: HudChromeAsset) {
+  return HUD_CHROME_ART[name];
+}
+
+export function getHudIconArt(name: HudIconAsset) {
+  return HUD_ICON_ART[name];
+}

apps/web/src/features/shared/components/ErrorBoundary.tsx

@@ -0,0 +1,82 @@
+import { Component, type ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error('[ErrorBoundary]', error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      return (
+        <div
+          style={{
+            display: 'grid',
+            placeItems: 'center',
+            minHeight: '100dvh',
+            padding: '2rem',
+            color: '#efe2ce',
+            background: '#070604',
+            fontFamily: "'Chakra Petch', sans-serif",
+          }}
+        >
+          <div
+            style={{
+              maxWidth: 480,
+              textAlign: 'center',
+              padding: '2rem',
+              borderRadius: 20,
+              border: '1px solid rgba(225, 109, 76, 0.3)',
+              background: 'rgba(16, 13, 10, 0.94)',
+            }}
+          >
+            <h2 style={{ margin: '0 0 0.75rem', fontSize: '1.3rem', letterSpacing: '0.08em' }}>
+              界面发生异常
+            </h2>
+            <p style={{ margin: '0 0 1.25rem', color: '#a38f73', lineHeight: 1.5 }}>
+              {this.state.error?.message ?? '渲染过程中出现未知错误，请尝试刷新页面。'}
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              style={{
+                minHeight: 48,
+                padding: '0 2rem',
+                borderRadius: 14,
+                border: '1px solid rgba(228, 158, 75, 0.42)',
+                background: 'linear-gradient(135deg, #eeab52, #c86d22)',
+                color: '#160f08',
+                fontWeight: 700,
+                cursor: 'pointer',
+                fontSize: '0.9rem',
+              }}
+            >
+              刷新页面
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

apps/web/src/features/shared/components/PanelHeader.tsx

@@ -2,14 +2,23 @@ export function PanelHeader({
   title,
   subtitle,
   compact = false,
+  iconSrc,
+  iconAlt = '',
 }: {
   title: string;
   subtitle: string;
   compact?: boolean;
+  iconSrc?: string;
+  iconAlt?: string;
 }) {
   return (
     <header className={`panel-header ${compact ? 'compact' : ''}`}>
-      <div>
+      <div className="panel-header-copy">
+        {iconSrc ? (
+          <span className="panel-header-mark">
+            <img src={iconSrc} alt={iconAlt} aria-hidden={iconAlt ? undefined : true} />
+          </span>
+        ) : null}
         <h2>{title}</h2>
         <p>{subtitle}</p>
       </div>

apps/web/src/index.css

@@ -1,26 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
 
-html,
-body,
-#root {
-  height: 100%;
-}
-
 html {
   font-family: 'Chakra Petch', sans-serif;
 }
-
-body {
-  min-width: 320px;
-}
-
-code,
-pre,
-button,
-input {
-  font-family: inherit;
-}
-
-#root {
-  min-height: 100vh;
-}

apps/web/src/styles/auth.css

@@ -0,0 +1,172 @@
+/* ===== Auth Shell ===== */
+
+.auth-shell,
+.new-game-shell,
+.loading-shell {
+  min-height: 100dvh;
+  display: grid;
+  place-items: center;
+  padding: 0.75rem;
+}
+
+.auth-shell {
+  grid-template-columns: minmax(0, 1.42fr) minmax(340px, 430px);
+  gap: 0.75rem;
+}
+
+/* ===== Auth Hero ===== */
+
+.auth-hero,
+.new-game-card {
+  position: relative;
+  overflow: hidden;
+  border-radius: 24px;
+  border-color: var(--panel-border);
+  min-height: calc(100dvh - 1.5rem);
+  padding: 1.4rem;
+  background-color: #12100d;
+  background-position: center;
+  background-size: cover;
+}
+
+.viewport-stage {
+  border: 1px solid rgba(215, 138, 51, 0.25);
+}
+
+.viewport-copy,
+.auth-hero-copy,
+.new-game-copy {
+  position: relative;
+  z-index: 1;
+}
+
+.viewport-copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+  max-width: 36rem;
+  padding: 1rem;
+}
+
+.viewport-copy h2 {
+  font-size: clamp(1.85rem, 3.1vw, 3.1rem);
+}
+
+.auth-hero-copy,
+.new-game-copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+  max-width: 36rem;
+}
+
+/* ===== Auth Panel ===== */
+
+.auth-panel,
+.loading-card {
+  border-radius: 24px;
+  border-color: var(--panel-border);
+}
+
+.auth-panel {
+  width: 100%;
+  padding: 1.25rem;
+}
+
+.auth-panel label,
+.new-game-copy label {
+  display: grid;
+  gap: 0.35rem;
+  margin-bottom: 0.8rem;
+  color: var(--muted);
+}
+
+.auth-panel input,
+.new-game-copy input {
+  min-height: 48px;
+  padding: 0 0.95rem;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+}
+
+/* ===== Tab Row ===== */
+
+.tab-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.45rem;
+  margin-bottom: 1rem;
+}
+
+.tab-row button {
+  min-height: 42px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text);
+}
+
+.tab-row button.active {
+  border-color: rgba(215, 138, 51, 0.36);
+  background: rgba(215, 138, 51, 0.1);
+}
+
+/* ===== New Game Card ===== */
+
+.new-game-card {
+  display: grid;
+  align-items: end;
+}
+
+.new-game-overlay {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(4, 4, 4, 0.12), rgba(4, 4, 4, 0.78)),
+    linear-gradient(90deg, rgba(215, 138, 51, 0.12), transparent 55%);
+}
+
+/* ===== Loading Card ===== */
+
+.loading-card {
+  width: min(100%, 360px);
+  padding: 1.35rem;
+}
+
+.loading-line {
+  width: 76px;
+  height: 6px;
+  margin-bottom: 1rem;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #e7aa56, #c56c24);
+}
+
+/* ===== Viewport Flags ===== */
+
+.viewport-flags {
+  position: absolute;
+  top: 0.85rem;
+  right: 0.85rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.45rem;
+  z-index: 1;
+}
+
+.viewport-flags span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.9rem;
+  padding: 0 0.7rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 999px;
+  background: rgba(6, 6, 6, 0.34);
+  font-size: 0.68rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}

apps/web/src/styles/base.css

@@ -0,0 +1,355 @@
+/* ===== Reset & Global ===== */
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  color: var(--text);
+  background:
+    radial-gradient(circle at top left, rgba(201, 132, 57, 0.12), transparent 24%),
+    radial-gradient(circle at bottom right, rgba(117, 88, 49, 0.14), transparent 30%),
+    linear-gradient(180deg, #050404 0%, #090806 48%, #050404 100%);
+  overflow: hidden;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.18;
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
+    radial-gradient(circle at 20% 20%, rgba(213, 139, 54, 0.08), transparent 16%),
+    radial-gradient(circle at 80% 70%, rgba(213, 139, 54, 0.06), transparent 18%);
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+/* ===== Shared Border & Background ===== */
+
+button,
+input,
+.panel,
+.subpanel,
+.auth-panel,
+.auth-hero,
+.new-game-card,
+.loading-card,
+.stat-meter,
+.hud-chip,
+.command-dock,
+.top-hud,
+.brand-block,
+.clock-block {
+  border: 1px solid var(--panel-border-soft);
+}
+
+.top-hud,
+.panel,
+.subpanel,
+.auth-panel,
+.auth-hero,
+.new-game-card,
+.loading-card,
+.command-dock {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
+    var(--panel);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px);
+}
+
+/* ===== App Shell ===== */
+
+.app-shell {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 0.4rem;
+  height: 100dvh;
+  padding: 0.4rem;
+  overflow: hidden;
+}
+
+/* ===== Panel Base ===== */
+
+.panel,
+.subpanel {
+  min-height: 0;
+  overflow: auto;
+  border-radius: 20px;
+  border-color: var(--panel-border);
+}
+
+.panel {
+  padding: 1rem;
+}
+
+.subpanel {
+  padding: 0.75rem;
+}
+
+/* ===== Panel Header ===== */
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.7rem;
+  align-items: center;
+}
+
+.panel-header h2 {
+  margin: 0;
+  font-size: 0.9rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.panel-header p {
+  margin: 0.25rem 0 0;
+  color: var(--muted);
+  font-size: 0.76rem;
+  line-height: 1.45;
+}
+
+.panel-header::after {
+  content: '';
+  flex: 1;
+  align-self: center;
+  min-width: 80px;
+  height: 10px;
+  opacity: 0.42;
+  background: var(--hud-divider) center right / contain no-repeat;
+}
+
+.panel-header-copy {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.7rem;
+  align-items: center;
+}
+
+.panel-header-mark {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: rgba(7, 6, 5, 0.44);
+}
+
+.panel-header-mark img,
+.hud-icon {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* ===== Typography ===== */
+
+.eyebrow {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.72rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.error-copy {
+  margin: 0;
+  color: #f08d73;
+  line-height: 1.45;
+}
+
+/* ===== Buttons ===== */
+
+.primary-button,
+.secondary-button,
+.small-button,
+.combat-button,
+.modal-option,
+.dock-tab {
+  border-radius: 14px;
+  transition: transform 150ms ease, opacity 150ms ease, background 150ms ease, border-color 150ms ease;
+}
+
+.primary-button:hover,
+.secondary-button:hover,
+.small-button:hover,
+.combat-button:hover,
+.modal-option:hover,
+.dock-tab:hover {
+  transform: translateY(-1px);
+}
+
+.primary-button {
+  min-height: 52px;
+  border: 2px solid rgba(228, 158, 75, 0.5);
+  background: linear-gradient(135deg, #f0b050, #d07020);
+  color: #160f08;
+  font-weight: 700;
+  font-size: 0.95rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  box-shadow: 0 4px 20px rgba(213, 139, 54, 0.3);
+}
+
+.primary-button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #f5c060, #d88030);
+  box-shadow: 0 6px 25px rgba(213, 139, 54, 0.4);
+}
+
+.secondary-button,
+.combat-button,
+.modal-option,
+.small-button.secondary,
+.dock-tab {
+  min-height: 42px;
+  border: 1px solid var(--panel-border-soft);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+}
+
+.small-button {
+  min-height: 34px;
+  border: 1px solid rgba(215, 138, 51, 0.34);
+  background: rgba(215, 138, 51, 0.13);
+  color: var(--text);
+}
+
+.primary-button:disabled,
+.secondary-button:disabled,
+.small-button:disabled,
+.combat-button:disabled,
+.modal-option:disabled,
+.dock-tab:disabled {
+  opacity: 0.72;
+  transform: none;
+}
+
+/* ===== HUD Chip ===== */
+
+.hud-chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.15rem;
+  padding: 0 0.8rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(239, 226, 206, 0.8);
+  font-size: 0.72rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.hud-chip.safe {
+  color: #addb7f;
+  border-color: rgba(141, 194, 106, 0.28);
+  background: rgba(141, 194, 106, 0.08);
+}
+
+.hud-chip.accent {
+  color: #f0b55a;
+  border-color: rgba(215, 138, 51, 0.34);
+  background: rgba(215, 138, 51, 0.12);
+}
+
+.hud-chip.warn {
+  color: #f1c27b;
+  border-color: rgba(224, 180, 102, 0.34);
+  background: rgba(224, 180, 102, 0.12);
+}
+
+.hud-chip.danger {
+  color: #f0a08d;
+  border-color: rgba(225, 109, 76, 0.34);
+  background: rgba(225, 109, 76, 0.12);
+}
+
+.hud-chip.muted {
+  color: var(--muted);
+}
+
+/* ===== Asset Thumb ===== */
+
+.asset-thumb {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
+    rgba(8, 7, 6, 0.72);
+}
+
+.asset-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.asset-thumb span {
+  color: var(--accent);
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+
+/* ===== Scrollbar ===== */
+
+.recipe-list::-webkit-scrollbar,
+.log-list::-webkit-scrollbar,
+.inventory-list::-webkit-scrollbar,
+.quest-list::-webkit-scrollbar,
+.combat-log::-webkit-scrollbar,
+.modal-option-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.recipe-list::-webkit-scrollbar-thumb,
+.log-list::-webkit-scrollbar-thumb,
+.inventory-list::-webkit-scrollbar-thumb,
+.quest-list::-webkit-scrollbar-thumb,
+.combat-log::-webkit-scrollbar-thumb,
+.modal-option-list::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(215, 138, 51, 0.26);
+}
+
+/* ===== Section Glyph ===== */
+
+.section-glyph {
+  width: 36px;
+  height: 36px;
+  flex: 0 0 36px;
+  opacity: 0.92;
+}

apps/web/src/styles/bottom-dock.css

@@ -0,0 +1,140 @@
+/* ===== Command Dock ===== */
+
+.command-dock {
+  display: grid;
+  grid-template-columns: 180px minmax(0, 1fr) auto;
+  gap: 0.55rem;
+  align-items: center;
+  border-radius: 14px;
+  border-color: var(--panel-border);
+  padding: 0.3rem 0.6rem;
+  position: sticky;
+  bottom: 0;
+  z-index: 5;
+}
+
+/* ===== Operator Card ===== */
+
+.operator-card {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  background: rgba(8, 7, 6, 0.38);
+}
+
+.operator-emblem {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  border: 1px solid rgba(215, 138, 51, 0.38);
+  background: rgba(215, 138, 51, 0.12);
+  color: var(--accent);
+  font-weight: 700;
+  font-size: 0.8rem;
+}
+
+.operator-copy span {
+  display: block;
+  color: var(--muted);
+  font-size: 0.62rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+/* ===== Dock Nav ===== */
+
+.dock-nav-groups {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.dock-tabs,
+.dock-metrics {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+
+.dock-tabs {
+  justify-content: center;
+  gap: 0.55rem;
+}
+
+.dock-tab,
+.dock-metrics span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.6rem;
+  padding: 0 0.6rem;
+  border-radius: 999px;
+  font-size: 0.64rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.dock-tab {
+  min-height: 56px;
+  padding: 0.4rem 0.8rem;
+  border: 0;
+  background: transparent;
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  gap: 0.3rem;
+}
+
+.dock-tab::before {
+  background-image: var(--hud-frame-dock-idle);
+}
+
+.dock-tab.active::before {
+  background-image: var(--hud-frame-dock-active);
+}
+
+.dock-tab.active {
+  border-color: rgba(215, 138, 51, 0.35);
+  background: rgba(215, 138, 51, 0.1);
+  color: var(--text);
+}
+
+.dock-tab-icon {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+}
+
+.dock-tab span {
+  font-size: 0.7rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.dock-metrics span {
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--muted);
+}
+
+/* ===== Dock Commit ===== */
+
+.dock-commit {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dock-commit-button {
+  width: 100%;
+  min-height: 48px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.dock-commit-icon {
+  width: 18px;
+  height: 18px;
+}

apps/web/src/styles/combat.css

@@ -0,0 +1,39 @@
+/* ===== Combat Shell ===== */
+
+.combat-shell {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.combat-health {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.65rem;
+}
+
+.combat-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+
+.combat-log {
+  max-height: 220px;
+}
+
+.combat-log p {
+  margin: 0;
+  padding: 0.7rem 0.85rem;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+/* ===== Tactical Dock (legacy) ===== */
+
+.tactical-dock {
+  grid-template-columns: 208px minmax(0, 1fr) 196px;
+}
+
+.tactical-operator {
+  min-width: 0;
+}

apps/web/src/styles/command-center.css

@@ -0,0 +1,557 @@
+/* ===== Panel Command ===== */
+
+.panel-command {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 0.65rem;
+}
+
+.panel-command.theater-panel {
+  padding: 0.85rem;
+  grid-template-rows: auto 1fr;
+}
+
+/* ===== Theater Panel ===== */
+
+.theater-panel {
+  grid-template-rows: auto 1fr;
+}
+
+/* ===== Theater Titlebar ===== */
+
+.theater-titlebar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.75rem;
+  margin-bottom: 0.55rem;
+}
+
+.theater-titlebar h2 {
+  margin: 0;
+  font-size: 1.15rem;
+  letter-spacing: 0.12em;
+  line-height: 1;
+}
+
+.theater-titlebar p {
+  margin: 0.25rem 0 0;
+  color: var(--muted);
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.theater-titlebar-metrics {
+  display: flex;
+  gap: 0.65rem;
+  flex-shrink: 0;
+}
+
+.theater-titlebar-metrics article {
+  display: grid;
+  gap: 0.15rem;
+  padding: 0.45rem 0.65rem;
+  border-radius: 12px;
+  background: rgba(8, 7, 6, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  text-align: center;
+}
+
+.theater-titlebar-metrics article span {
+  color: var(--muted);
+  font-size: 0.62rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.theater-titlebar-metrics article strong {
+  font-size: 0.88rem;
+}
+
+/* ===== Theater Scene Stage ===== */
+
+.theater-scene-stage {
+  position: relative;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: 16px;
+  border: 1px solid rgba(215, 138, 51, 0.2);
+}
+
+.theater-scene-image {
+  position: absolute;
+  inset: 0;
+  background-position: center;
+  background-size: cover;
+  z-index: 0;
+}
+
+.theater-scene-image::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(6, 5, 4, 0.15), rgba(6, 5, 4, 0.82)),
+    linear-gradient(90deg, rgba(6, 5, 4, 0.06), rgba(6, 5, 4, 0.5) 70%);
+  z-index: 1;
+}
+
+/* ===== Theater Action Zone ===== */
+
+.theater-action-zone {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: minmax(0, 1.3fr) 220px;
+  gap: 0.65rem;
+  padding: 0.75rem;
+  align-content: end;
+  min-height: 180px;
+}
+
+/* ===== Theater Scene (legacy) ===== */
+
+.theater-scene {
+  position: relative;
+  overflow: hidden;
+  border-radius: 22px;
+  border: 1px solid rgba(215, 138, 51, 0.2);
+  background-color: rgba(6, 5, 4, 0.72);
+}
+
+.theater-scene::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgba(6, 5, 4, 0.1), rgba(6, 5, 4, 0.72) 74%),
+    linear-gradient(180deg, rgba(6, 5, 4, 0.06), rgba(6, 5, 4, 0.78));
+}
+
+.theater-scene-copy,
+.theater-scene-side {
+  position: absolute;
+  z-index: 1;
+}
+
+.theater-scene-copy {
+  left: 1rem;
+  right: 21rem;
+  bottom: 1rem;
+  display: grid;
+  gap: 0.45rem;
+}
+
+.theater-scene-copy h2 {
+  margin: 0;
+  font-size: clamp(2rem, 3.2vw, 3.15rem);
+  line-height: 0.9;
+  letter-spacing: -0.06em;
+}
+
+.theater-scene-copy p:last-child {
+  margin: 0;
+  max-width: 26rem;
+  color: rgba(239, 226, 206, 0.8);
+  font-size: 0.92rem;
+}
+
+.theater-scene-side {
+  top: 1rem;
+  right: 1rem;
+  width: 300px;
+  display: grid;
+  gap: 0.55rem;
+}
+
+/* ===== Theater Deck ===== */
+
+.theater-deck {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) 316px;
+  gap: 0.75rem;
+}
+
+/* ===== Scene Focus Card ===== */
+
+.scene-focus-card {
+  padding: 0.85rem;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(7, 6, 5, 0.58);
+  backdrop-filter: blur(14px);
+}
+
+.scene-focus-card.error {
+  border-color: rgba(225, 109, 76, 0.28);
+}
+
+.scene-focus-card span,
+.primary-operation-copy span,
+.intel-focus-card span,
+.survivor-metric-card span {
+  display: block;
+  margin-bottom: 0.28rem;
+  color: var(--muted);
+  font-size: 0.68rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.scene-focus-card strong,
+.intel-focus-card strong {
+  display: block;
+  font-size: 0.98rem;
+}
+
+.scene-focus-card p,
+.intel-focus-card p {
+  margin: 0.3rem 0 0;
+  color: rgba(239, 226, 206, 0.8);
+  line-height: 1.45;
+}
+
+/* ===== Primary Operation Card ===== */
+
+.primary-operation-card {
+  display: grid;
+  gap: 0.72rem;
+  padding: 0.82rem;
+  border-radius: 20px;
+  border: 1px solid rgba(215, 138, 51, 0.22);
+  background: rgba(10, 8, 6, 0.42);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
+}
+
+.primary-operation-head {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+}
+
+.primary-operation-copy h3 {
+  margin: 0;
+  font-size: clamp(1.4rem, 2vw, 2rem);
+  line-height: 0.94;
+  letter-spacing: -0.04em;
+}
+
+.primary-operation-copy p,
+.secondary-operation-card p {
+  margin: 0.4rem 0 0;
+  color: rgba(239, 226, 206, 0.78);
+  line-height: 1.45;
+}
+
+.primary-operation-card small {
+  color: #f0c27a;
+  font-size: 0.72rem;
+}
+
+.operation-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.operation-chip-row span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.7rem;
+  padding: 0 0.55rem;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.03);
+  font-size: 0.68rem;
+  color: rgba(239, 226, 206, 0.82);
+}
+
+.operation-commit-button {
+  width: min(100%, 220px);
+}
+
+.operation-glyph {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+}
+
+.operation-glyph-primary {
+  width: 32px;
+  height: 32px;
+  flex-basis: 32px;
+}
+
+/* ===== Secondary Operation Card ===== */
+
+.secondary-operation-stack {
+  display: grid;
+  gap: 0.55rem;
+  align-content: start;
+}
+
+.secondary-operation-card {
+  min-height: 94px;
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr);
+  align-items: start;
+  gap: 0.65rem;
+  text-align: left;
+  padding: 0.85rem;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
+    rgba(10, 8, 7, 0.6);
+}
+
+.secondary-operation-card::before {
+  background-image: var(--hud-frame-compact);
+}
+
+.secondary-operation-card strong {
+  font-size: 0.98rem;
+}
+
+.secondary-operation-card p {
+  margin-top: 0.18rem;
+}
+
+.secondary-operation-card small {
+  color: var(--muted);
+  font-size: 0.72rem;
+}
+
+/* ===== Theater Primary Card (new component) ===== */
+
+.theater-primary-card {
+  display: grid;
+  gap: 0.65rem;
+  padding: 0.85rem;
+  border-radius: 18px;
+  border: 1px solid rgba(215, 138, 51, 0.22);
+  background:
+    radial-gradient(circle at top right, rgba(215, 138, 51, 0.1), transparent 30%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
+    rgba(10, 8, 6, 0.72);
+  backdrop-filter: blur(14px);
+}
+
+.theater-primary-head {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.theater-primary-head span {
+  color: var(--muted);
+  font-size: 0.68rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.theater-action-icon {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+  opacity: 0.9;
+}
+
+.theater-primary-copy h3 {
+  margin: 0;
+  font-size: clamp(1.2rem, 2vw, 1.6rem);
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
+.theater-primary-copy p {
+  margin: 0.3rem 0 0;
+  color: rgba(239, 226, 206, 0.78);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.theater-find-row {
+  display: flex;
+  gap: 0.65rem;
+}
+
+.theater-find-meta {
+  display: grid;
+  gap: 0.12rem;
+  padding: 0.5rem 0.7rem;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  flex: 1;
+}
+
+.theater-find-meta span {
+  color: var(--muted);
+  font-size: 0.62rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.theater-find-meta strong {
+  font-size: 0.92rem;
+}
+
+.theater-potential-finds {
+  display: flex;
+  gap: 0.45rem;
+  overflow: auto;
+}
+
+.potential-find-thumb {
+  width: 48px;
+  min-width: 48px;
+}
+
+.potential-find-thumb .asset-thumb {
+  width: 48px;
+  min-width: 48px;
+  border-radius: 12px;
+}
+
+.theater-primary-button {
+  width: 100%;
+  min-height: 56px;
+  font-size: 1rem;
+}
+
+/* ===== Theater Secondary Column (new component) ===== */
+
+.theater-secondary-column {
+  display: grid;
+  gap: 0.5rem;
+  align-content: start;
+}
+
+.theater-secondary-card {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.55rem;
+  text-align: left;
+  padding: 0.7rem 0.75rem;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
+    rgba(9, 8, 7, 0.56);
+  color: var(--text);
+  transition: transform 150ms ease, border-color 150ms ease;
+}
+
+.theater-secondary-card:hover {
+  border-color: rgba(215, 138, 51, 0.22);
+  transform: translateY(-1px);
+}
+
+.theater-secondary-card strong {
+  font-size: 0.88rem;
+}
+
+.theater-secondary-card p {
+  margin: 0.15rem 0 0;
+  color: var(--muted);
+  font-size: 0.72rem;
+  line-height: 1.4;
+}
+
+.theater-secondary-card > span {
+  color: var(--muted);
+  font-size: 0.68rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+/* ===== Theater Intel Strip (new component) ===== */
+
+.theater-intel-strip {
+  display: grid;
+  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 0.7fr));
+  gap: 0.4rem;
+}
+
+.theater-intel-block {
+  padding: 0.6rem 0.7rem;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(8, 7, 6, 0.55);
+  display: grid;
+  gap: 0.2rem;
+}
+
+.theater-intel-block span {
+  color: var(--muted);
+  font-size: 0.62rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.theater-intel-block p {
+  margin: 0;
+  color: rgba(239, 226, 206, 0.78);
+  font-size: 0.78rem;
+  line-height: 1.4;
+}
+
+.theater-intel-block.compact {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.theater-intel-block.compact strong {
+  font-size: 0.82rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.theater-intel-icon {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  opacity: 0.8;
+}
+
+/* ===== Theater Intel Grid (legacy) ===== */
+
+.theater-intel-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.65rem;
+}
+
+.intel-focus-card {
+  min-height: 108px;
+  padding: 0.78rem;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(10, 8, 7, 0.52);
+}
+
+.intel-focus-card.system {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+}
+
+.intel-system-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  align-content: end;
+  margin-top: 0.7rem;
+}
+
+/* ===== Command Error ===== */
+
+.command-error {
+  margin: 0;
+}

apps/web/src/styles/game-layout.css

@@ -0,0 +1,116 @@
+/* ===== Game Grid ===== */
+
+.game-grid {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 400px minmax(0, 1fr) 340px;
+  gap: 0.75rem;
+  overflow: hidden;
+}
+
+/* ===== HUD Chrome Surfaces ===== */
+
+.hud-surface,
+.hud-card-frame,
+.hud-warning-frame,
+.expedition-route-card,
+.dock-tab,
+.stat-meter,
+.brand-block,
+.clock-block {
+  position: relative;
+  isolation: isolate;
+  border-color: transparent;
+}
+
+.hud-surface::before,
+.hud-card-frame::before,
+.hud-warning-frame::before,
+.expedition-route-card::before,
+.dock-tab::before,
+.stat-meter::before,
+.brand-block::before,
+.clock-block::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+}
+
+.hud-surface::before {
+  opacity: 0.3;
+}
+
+.hud-card-frame::before,
+.hud-warning-frame::before,
+.expedition-route-card::before,
+.dock-tab::before,
+.stat-meter::before,
+.brand-block::before,
+.clock-block::before {
+  opacity: 0.96;
+}
+
+.hud-surface > *,
+.hud-card-frame > *,
+.hud-warning-frame > *,
+.expedition-route-card > *,
+.dock-tab > *,
+.stat-meter > *,
+.brand-block > *,
+.clock-block > * {
+  position: relative;
+  z-index: 1;
+}
+
+.hud-surface-wide::before,
+.hud-top-frame::before,
+.hud-dock-frame::before {
+  background-image: var(--hud-frame-wide);
+}
+
+.hud-surface-tall::before {
+  background-image: var(--hud-frame-tall);
+}
+
+.hud-card-frame::before {
+  background-image: var(--hud-frame-card);
+}
+
+.hud-card-frame-primary::before {
+  display: none;
+}
+
+.hud-warning-frame::before {
+  background-image: var(--hud-frame-warning);
+}
+
+/* ===== Panel Shared Backgrounds ===== */
+
+.panel-route.expedition-panel,
+.panel-command.theater-panel,
+.panel-loadout.survivor-panel,
+.top-hud,
+.command-dock {
+  background: rgba(7, 6, 5, 0.74);
+}
+
+.expedition-core,
+.equipment-grid-panel,
+.survivor-resource-panel,
+.intel-focus-card,
+.survivor-metric-card,
+.secondary-operation-card,
+.overlay-summary-card {
+  background: rgba(7, 6, 5, 0.42);
+}
+
+.expedition-core,
+.equipment-grid-panel,
+.survivor-resource-panel {
+  padding: 0.85rem;
+}

apps/web/src/styles/loadout-panel.css

@@ -0,0 +1,698 @@
+/* ===== Loadout Panel Grid ===== */
+
+.panel-loadout {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 0.75rem;
+}
+
+.panel-loadout.survivor-panel {
+  padding: 0.85rem;
+  grid-template-rows: auto auto auto auto auto;
+  gap: 0.65rem;
+}
+
+/* ===== Equipment Terminal (new component) ===== */
+
+.equipment-terminal {
+  display: grid;
+  grid-template-rows: auto auto auto auto;
+  gap: 0.75rem;
+  padding: 1rem;
+}
+
+.equipment-terminal-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.equipment-terminal-title {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+.equipment-terminal-badges {
+  display: flex;
+  gap: 0.45rem;
+  flex-wrap: wrap;
+}
+
+/* ===== Equipment Grid ===== */
+
+.equipment-grid-frame {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.equipment-grid-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.equipment-grid-head span {
+  font-size: 0.82rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+}
+
+.equipment-grid-head p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.72rem;
+}
+
+.equipment-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.6rem;
+}
+
+/* ===== Equipment Slot Card ===== */
+
+.equipment-slot-card {
+  display: grid;
+  gap: 0.35rem;
+  padding: 0.5rem;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
+    rgba(9, 8, 7, 0.5);
+  text-align: center;
+}
+
+.equipment-slot-card.equipped {
+  border-color: rgba(215, 138, 51, 0.28);
+  background:
+    linear-gradient(180deg, rgba(215, 138, 51, 0.06), rgba(255, 255, 255, 0)),
+    rgba(9, 8, 7, 0.5);
+}
+
+.equipment-slot-card.placeholder {
+  place-items: center;
+  border-style: dashed;
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.equipment-slot-top span {
+  color: var(--muted);
+  font-size: 0.62rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.equipment-slot-thumb {
+  width: 100%;
+  min-width: 0;
+  aspect-ratio: 1;
+}
+
+.equipment-slot-thumb .asset-thumb {
+  width: 100%;
+  min-width: 0;
+  aspect-ratio: 1;
+  border-radius: 10px;
+}
+
+.equipment-slot-copy strong {
+  display: block;
+  font-size: 0.85rem;
+}
+
+.equipment-slot-copy small {
+  display: block;
+  margin-top: 0.15rem;
+  color: var(--muted);
+  font-size: 0.68rem;
+}
+
+.equipment-slot-placeholder {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  border: 1px dashed rgba(255, 255, 255, 0.12);
+  color: var(--muted);
+  font-size: 1.1rem;
+}
+
+/* ===== Equipment Metrics Row ===== */
+
+.equipment-metrics-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.6rem;
+}
+
+.equipment-metric-box {
+  padding: 0.45rem;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(8, 7, 6, 0.5);
+  text-align: center;
+}
+
+.equipment-metric-box span {
+  display: block;
+  margin-bottom: 0.15rem;
+  color: var(--muted);
+  font-size: 0.58rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.equipment-metric-box strong {
+  font-size: 0.95rem;
+}
+
+/* ===== Warning Terminal ===== */
+
+.warning-terminal {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.warning-terminal-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.warning-terminal-head > span {
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+}
+
+.warning-terminal-button {
+  min-height: 28px;
+  padding: 0 0.6rem;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--muted);
+  font-size: 0.64rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.warning-terminal-list {
+  display: grid;
+  gap: 0.4rem;
+}
+
+/* ===== Warning Meter ===== */
+
+.warning-meter {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.3rem;
+  padding: 0.5rem 0.65rem;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(9, 8, 7, 0.42);
+}
+
+.warning-meter.tone-good {
+  border-color: rgba(141, 194, 106, 0.18);
+}
+
+.warning-meter.tone-warn {
+  border-color: rgba(224, 180, 102, 0.18);
+}
+
+.warning-meter.tone-danger {
+  border-color: rgba(225, 109, 76, 0.18);
+}
+
+.warning-meter-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.warning-meter-head span {
+  font-size: 0.78rem;
+  color: var(--text);
+}
+
+.warning-meter-track {
+  height: 5px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+}
+
+.warning-meter-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #f2b55e, #df7a27);
+  transition: width 300ms ease;
+}
+
+.tone-good .warning-meter-fill {
+  background: linear-gradient(90deg, #9dda74, #53b96f);
+}
+
+.tone-warn .warning-meter-fill {
+  background: linear-gradient(90deg, #f4cc76, #e0a030);
+}
+
+.tone-danger .warning-meter-fill {
+  background: linear-gradient(90deg, #f4cc76, #eb6650);
+}
+
+/* ===== Ready Pack Frame ===== */
+
+.ready-pack-frame {
+  display: grid;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(9, 8, 7, 0.4);
+}
+
+.ready-pack-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.ready-pack-head > span {
+  font-size: 0.82rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+}
+
+.ready-pack-head p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.72rem;
+}
+
+.ready-pack-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.ready-pack-columns > div > strong {
+  display: block;
+  margin-bottom: 0.4rem;
+  font-size: 0.76rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+/* ===== Quick Access Row ===== */
+
+.quick-access-row {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.4rem;
+}
+
+.quick-access-slot {
+  display: grid;
+  place-items: center;
+  gap: 0.2rem;
+  padding: 0.4rem;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background: rgba(8, 7, 6, 0.48);
+  color: var(--text);
+  min-height: 56px;
+  transition: border-color 150ms ease;
+}
+
+.quick-access-slot:hover:not(:disabled):not(.locked) {
+  border-color: rgba(215, 138, 51, 0.25);
+}
+
+.quick-access-slot.locked {
+  border-style: dashed;
+  border-color: rgba(255, 255, 255, 0.1);
+  color: var(--muted);
+  font-size: 0.66rem;
+  letter-spacing: 0.1em;
+}
+
+.quick-access-thumb {
+  width: 100%;
+  min-width: 0;
+}
+
+.quick-access-thumb .asset-thumb {
+  width: 100%;
+  min-width: 0;
+  border-radius: 10px;
+}
+
+.quick-access-slot span {
+  font-size: 0.72rem;
+  color: #f1c27b;
+  font-weight: 600;
+}
+
+/* ===== Stash Row ===== */
+
+.stash-row {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.4rem;
+}
+
+.stash-slot {
+  display: grid;
+  place-items: center;
+  gap: 0.15rem;
+  padding: 0.35rem;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(8, 7, 6, 0.4);
+  min-height: 44px;
+}
+
+.stash-slot span {
+  font-size: 0.68rem;
+  color: #f1c27b;
+}
+
+.stash-slot.stash-open {
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 1rem;
+  border-style: dashed;
+  border-color: rgba(255, 255, 255, 0.1);
+  transition: border-color 150ms ease, color 150ms ease;
+}
+
+.stash-slot.stash-open:hover {
+  border-color: rgba(215, 138, 51, 0.28);
+  color: var(--text);
+}
+
+.stash-slot .asset-thumb {
+  width: 40px;
+  min-width: 40px;
+  border-radius: 8px;
+}
+
+/* ===== Equipment Terminal Button ===== */
+
+.equipment-terminal-button {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+/* ===== Survivor Panel (legacy) ===== */
+
+.survivor-panel {
+  grid-template-rows: auto auto auto auto auto;
+}
+
+.survivor-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.survivor-head strong {
+  margin: 0.3rem 0 0;
+  font-size: 1.28rem;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.survivor-head-copy {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+.survivor-head-side {
+  display: grid;
+  gap: 0.55rem;
+  justify-items: end;
+}
+
+.survivor-head-chips {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.45rem;
+}
+
+/* ===== Survivor Rig ===== */
+
+.survivor-rig {
+  display: grid;
+  grid-template-columns: 110px minmax(0, 1fr) 110px;
+  gap: 0.65rem;
+  min-height: 328px;
+}
+
+.rig-column {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.rig-slot {
+  padding: 0.65rem;
+}
+
+.rig-figure {
+  min-height: 328px;
+}
+
+.rig-figure-overlay {
+  right: 0.85rem;
+  left: 0.85rem;
+  bottom: 4.85rem;
+  text-align: left;
+}
+
+.rig-figure-overlay strong {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.92rem;
+}
+
+/* ===== Survivor Metrics ===== */
+
+.survivor-metrics-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.survivor-metrics-strip {
+  position: absolute;
+  left: 0.85rem;
+  right: 0.85rem;
+  bottom: 0.85rem;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.45rem;
+}
+
+.survivor-metric-card {
+  padding: 0.6rem;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(7, 6, 5, 0.58);
+}
+
+.survivor-metric-card strong {
+  font-size: 1.1rem;
+}
+
+/* ===== Survivor Warning ===== */
+
+.survivor-warning-strip {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.survivor-warning-card {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 0.65rem;
+  align-items: start;
+  padding: 0.75rem;
+  border-radius: 16px;
+  border: 0;
+  background: rgba(7, 6, 5, 0.5);
+}
+
+.survivor-warning-card strong {
+  display: block;
+  font-size: 0.94rem;
+}
+
+.survivor-warning-card p {
+  margin: 0.26rem 0 0;
+  color: rgba(239, 226, 206, 0.78);
+  font-size: 0.78rem;
+  line-height: 1.42;
+}
+
+/* ===== Survivor Supply Grid ===== */
+
+.survivor-supply-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.survivor-supply-grid.compact {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.survivor-supply-card {
+  min-height: 98px;
+  display: grid;
+  gap: 0.45rem;
+  align-content: start;
+  text-align: left;
+  padding: 0.6rem;
+  border-radius: 16px;
+  border: 0;
+  background: rgba(8, 7, 6, 0.52);
+}
+
+.survivor-supply-card .asset-thumb {
+  width: 100%;
+  min-width: 0;
+}
+
+.survivor-supply-copy span {
+  display: block;
+  margin-top: 0.22rem;
+  color: #f1c27b;
+}
+
+.survivor-supply-copy small {
+  display: block;
+  margin-top: 0.22rem;
+  color: var(--muted);
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.survivor-supply-card.locked {
+  place-items: center;
+  border-style: dashed;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
+    rgba(8, 7, 6, 0.28);
+}
+
+/* ===== Survivor Equipment Grid ===== */
+
+.survivor-equipment-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.55rem;
+}
+
+.equipment-module {
+  grid-template-columns: 68px minmax(0, 1fr);
+  align-items: center;
+  min-height: 110px;
+  background: rgba(8, 7, 6, 0.52);
+}
+
+.equipment-module.equipped {
+  box-shadow: inset 0 0 0 1px rgba(215, 138, 51, 0.22);
+}
+
+/* ===== Survivor Stash Grid ===== */
+
+.survivor-stash-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.survivor-stash-grid.compact {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.survivor-stash-card {
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr);
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.55rem;
+  border: 0;
+  background: rgba(8, 7, 6, 0.52);
+}
+
+.survivor-stash-card .asset-thumb {
+  width: 56px;
+  min-width: 56px;
+  border-radius: 12px;
+}
+
+.survivor-stash-open {
+  grid-column: 1 / -1;
+}
+
+/* ===== Survivor Resource Grid ===== */
+
+.survivor-resource-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.95fr);
+  gap: 0.65rem;
+}
+
+.survivor-resource-column {
+  display: grid;
+  gap: 0.55rem;
+  align-content: start;
+}
+
+.resource-column-head {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.resource-column-head strong,
+.resource-column-head span {
+  display: block;
+}
+
+.resource-column-head strong {
+  font-size: 0.85rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.resource-column-head span {
+  margin-top: 0.16rem;
+  color: var(--muted);
+  font-size: 0.72rem;
+}
+
+/* ===== Loadout Matrix (legacy) ===== */
+
+.loadout-matrix {
+  grid-template-columns: 110px minmax(0, 1fr) 110px;
+}

apps/web/src/styles/modal.css

@@ -0,0 +1,83 @@
+/* ===== Modal Shell ===== */
+
+.modal-shell {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: rgba(4, 4, 4, 0.8);
+  backdrop-filter: blur(8px);
+  z-index: 20;
+}
+
+.modal-card {
+  width: min(100%, 760px);
+  border-radius: 22px;
+  border: 1px solid rgba(215, 138, 51, 0.24);
+  background: rgba(13, 11, 9, 0.97);
+  box-shadow: var(--shadow);
+  padding: 1rem;
+}
+
+.modal-card-wide {
+  width: min(100%, 1180px);
+}
+
+/* ===== Modal Header ===== */
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.modal-header-copy {
+  min-width: 0;
+}
+
+.modal-header span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.75rem;
+  padding: 0 0.7rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(239, 226, 206, 0.74);
+  font-size: 0.68rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.modal-header h3 {
+  margin: 0.25rem 0 0;
+  font-size: 1.5rem;
+}
+
+.modal-close {
+  min-height: 36px;
+  padding: 0 0.8rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--muted);
+  font-size: 0.72rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+/* ===== Modal Option ===== */
+
+.modal-option {
+  width: 100%;
+  min-height: 60px;
+  text-align: left;
+  padding: 0.9rem;
+}
+
+.modal-option span {
+  display: block;
+  margin-top: 0.35rem;
+  color: var(--muted);
+}

apps/web/src/styles/overlay.css

@@ -0,0 +1,264 @@
+/* ===== System Overlay ===== */
+
+.system-overlay {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.overlay-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+  gap: 0.55rem;
+}
+
+.overlay-summary-card,
+.overlay-note-card,
+.overlay-loadout-row {
+  padding: 0.8rem;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.overlay-summary-card {
+  border: 0;
+}
+
+.overlay-summary-card span,
+.overlay-loadout-row span {
+  display: block;
+  margin-bottom: 0.26rem;
+  color: var(--muted);
+  font-size: 0.68rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.overlay-summary-card strong {
+  font-size: 1.02rem;
+}
+
+/* ===== Overlay Grids ===== */
+
+.system-overlay-grid {
+  display: grid;
+  gap: 0.75rem;
+  min-height: min(72dvh, 760px);
+}
+
+.inventory-overlay-grid,
+.blueprint-overlay-grid,
+.log-overlay-grid {
+  grid-template-columns: minmax(0, 1.4fr) 320px;
+}
+
+.overlay-main-stack {
+  min-height: 0;
+  display: grid;
+  gap: 0.75rem;
+  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.mission-overlay-grid {
+  grid-template-columns: minmax(0, 1.2fr) 340px;
+}
+
+.overlay-main-panel,
+.overlay-side-stack,
+.overlay-side-panel {
+  min-height: 0;
+  display: grid;
+}
+
+.overlay-main-panel,
+.overlay-side-panel {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.overlay-side-stack {
+  gap: 0.75rem;
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
+.overlay-list {
+  min-height: 0;
+}
+
+.overlay-loadout-stack,
+.overlay-note-stack {
+  display: grid;
+  gap: 0.55rem;
+  align-content: start;
+}
+
+.overlay-loadout-row.equipped {
+  border-color: rgba(215, 138, 51, 0.28);
+}
+
+.overlay-loadout-row small,
+.overlay-note-card p {
+  display: block;
+  margin-top: 0.3rem;
+  color: rgba(239, 226, 206, 0.76);
+  line-height: 1.5;
+}
+
+/* ===== Inventory & Recipe Lists ===== */
+
+.inventory-list,
+.recipe-list,
+.quest-list,
+.log-list,
+.combat-log,
+.modal-option-list {
+  min-height: 0;
+  overflow: auto;
+  padding-right: 0.2rem;
+  display: grid;
+  gap: 0.55rem;
+}
+
+.inventory-card,
+.quest-card {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
+    rgba(9, 8, 7, 0.52);
+  color: var(--text);
+  border-radius: 16px;
+}
+
+.inventory-card {
+  width: 100%;
+  text-align: left;
+  padding: 0.8rem;
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 0.75rem;
+}
+
+.inventory-card.equipped {
+  border-color: rgba(215, 138, 51, 0.35);
+}
+
+.inventory-card strong,
+.quest-card strong {
+  font-size: 0.94rem;
+}
+
+.inventory-title-row span {
+  color: #f1c27b;
+}
+
+/* ===== Quest Card ===== */
+
+.quest-card {
+  padding: 0.75rem;
+}
+
+.quest-card header {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.65rem;
+  margin-bottom: 0.55rem;
+}
+
+.quest-card header span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.75rem;
+  width: fit-content;
+  padding: 0 0.7rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(239, 226, 206, 0.74);
+  font-size: 0.68rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.quest-card header div small {
+  display: block;
+  margin-top: 0.25rem;
+  color: var(--muted);
+  font-size: 0.72rem;
+}
+
+.quest-card.state-completed {
+  border-color: rgba(141, 194, 106, 0.32);
+}
+
+.quest-steps {
+  display: grid;
+  gap: 0.32rem;
+}
+
+.quest-steps span {
+  color: rgba(239, 226, 206, 0.76);
+  font-size: 0.78rem;
+}
+
+.quest-steps .done {
+  color: #a8e288;
+}
+
+/* ===== Log Entry ===== */
+
+.log-entry {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.7rem;
+  padding: 0.72rem 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.log-entry:last-child {
+  border-bottom: none;
+}
+
+.log-entry span {
+  color: var(--muted);
+  font-size: 0.72rem;
+}
+
+.log-entry p {
+  margin: 0;
+}
+
+.tone-good p {
+  color: #b4e88f;
+}
+
+.tone-warn p {
+  color: #f3c17a;
+}
+
+.tone-bad p,
+.tone-danger p {
+  color: #f38b74;
+}
+
+/* ===== Empty State ===== */
+
+.empty-state {
+  padding: 0.9rem;
+  border: 1px dashed rgba(255, 255, 255, 0.12);
+  border-radius: 14px;
+  color: var(--muted);
+}
+
+/* ===== World Map ===== */
+
+.world-map-panel {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.map-node-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.map-node-card {
+  padding: 0.75rem;
+}

apps/web/src/styles/responsive.css

@@ -0,0 +1,148 @@
+/* ===== Large tablet / small desktop (<=1580px) ===== */
+
+@media (max-width: 1580px) {
+  .top-hud {
+    grid-template-columns: 250px 104px minmax(0, 1fr);
+  }
+
+  .top-actions {
+    grid-column: 1 / -1;
+    justify-content: flex-start;
+  }
+
+  .game-grid {
+    grid-template-columns: 300px minmax(0, 1fr) 320px;
+  }
+
+  .loadout-matrix {
+    grid-template-columns: 112px minmax(0, 1fr) 112px;
+  }
+
+  .theater-deck {
+    grid-template-columns: minmax(0, 1fr) 280px;
+  }
+
+  .theater-scene-copy {
+    right: 18rem;
+  }
+
+  .theater-scene-side {
+    width: 260px;
+  }
+
+  .survivor-rig {
+    grid-template-columns: 96px minmax(0, 1fr) 96px;
+  }
+}
+
+/* ===== Tablet (<=1340px) ===== */
+
+@media (max-width: 1340px) {
+  body {
+    overflow: auto;
+  }
+
+  .app-shell {
+    overflow: visible;
+  }
+
+  .top-hud {
+    grid-template-columns: 1fr;
+  }
+
+  .status-strip {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .game-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .auth-shell,
+  .command-dock {
+    grid-template-columns: 1fr;
+  }
+
+  .command-dock {
+    align-items: start;
+  }
+
+  .theater-panel,
+  .panel-route.expedition-panel,
+  .survivor-panel {
+    grid-template-rows: auto;
+  }
+
+  .theater-scene {
+    min-height: 320px;
+  }
+
+  .theater-scene-copy,
+  .theater-scene-side {
+    position: absolute;
+  }
+
+  .theater-scene-copy {
+    right: 1rem;
+  }
+
+  .theater-scene-side {
+    width: 260px;
+  }
+
+  .theater-deck,
+  .theater-intel-grid,
+  .theater-intel-strip,
+  .theater-action-zone,
+  .survivor-rig,
+  .tactical-dock {
+    grid-template-columns: 1fr;
+  }
+
+  .rig-column {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .survivor-head,
+  .expedition-head {
+    align-items: flex-start;
+  }
+}
+
+/* ===== Narrow tablet (961px-1340px) ===== */
+
+@media (max-width: 1340px) and (min-width: 961px) {
+  body {
+    overflow: hidden;
+  }
+
+  .app-shell {
+    overflow: hidden;
+  }
+
+  .top-hud {
+    grid-template-columns: 236px 112px minmax(0, 1fr);
+  }
+
+  .top-actions {
+    grid-column: 1 / -1;
+    justify-content: flex-start;
+  }
+
+  .game-grid {
+    grid-template-columns: 260px minmax(0, 1fr) 300px;
+    height: calc(100dvh - 180px);
+  }
+
+  .theater-scene-copy {
+    right: 15rem;
+  }
+
+  .theater-scene-side {
+    width: 220px;
+  }
+
+  .survivor-resource-grid {
+    grid-template-columns: 1fr;
+  }
+}

apps/web/src/styles/route-panel.css

@@ -0,0 +1,470 @@
+/* ===== Route Panel Grid ===== */
+
+.panel-route {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 0.75rem;
+}
+
+.panel-route.expedition-panel {
+  padding: 0.85rem;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
+
+/* ===== Expedition Panel Head ===== */
+
+.expedition-panel-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.75rem;
+  margin-bottom: 0.55rem;
+}
+
+.expedition-panel-head h2 {
+  margin: 0.25rem 0 0;
+  font-size: 1.15rem;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
+.expedition-weather-meta {
+  display: flex;
+  gap: 0.65rem;
+  color: var(--muted);
+  font-size: 0.72rem;
+}
+
+/* ===== Route Summary Card (legacy) ===== */
+
+.route-summary-card {
+  padding: 1rem;
+  border-radius: 18px;
+  border-color: rgba(215, 138, 51, 0.32);
+  background:
+    linear-gradient(180deg, rgba(215, 138, 51, 0.12), rgba(255, 255, 255, 0)),
+    rgba(7, 7, 7, 0.46);
+}
+
+.route-summary-card h2,
+.viewport-copy h2,
+.auth-hero-copy h1,
+.new-game-copy h1 {
+  margin: 0.42rem 0 0;
+  font-size: clamp(1.55rem, 3.4vw, 3.8rem);
+  line-height: 0.96;
+  letter-spacing: -0.05em;
+  text-wrap: balance;
+}
+
+.route-summary-card h2 {
+  font-size: clamp(1.9rem, 3vw, 2.8rem);
+}
+
+.route-summary-card p,
+.viewport-copy p,
+.auth-hero-copy p,
+.new-game-copy p,
+.modal-copy {
+  color: rgba(239, 226, 206, 0.78);
+  line-height: 1.5;
+}
+
+.route-summary-meta {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.55rem;
+  margin-top: 0.85rem;
+}
+
+.route-summary-meta div,
+.combat-health,
+.mini-intel-card {
+  padding: 0.78rem;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.route-summary-meta small {
+  display: block;
+  margin-bottom: 0.25rem;
+  color: var(--muted);
+  font-size: 0.66rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.route-summary-meta strong {
+  font-size: 0.94rem;
+}
+
+.intel-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-top: 0.85rem;
+}
+
+/* ===== Route Card Thumb ===== */
+
+.route-card-thumb {
+  min-height: 88px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background-position: center;
+  background-size: cover;
+}
+
+.route-card-detail {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  color: var(--muted);
+  font-size: 0.72rem;
+}
+
+/* ===== Risk Dots ===== */
+
+.risk-dots {
+  display: flex;
+  gap: 0.28rem;
+  margin-top: 0.58rem;
+}
+
+.risk-dots span {
+  width: 13px;
+  height: 13px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+/* ===== Expedition Location Card ===== */
+
+.expedition-location-card {
+  padding: 0.65rem;
+  border-radius: 14px;
+  border: 1px solid rgba(215, 138, 51, 0.18);
+  background:
+    linear-gradient(180deg, rgba(215, 138, 51, 0.06), rgba(255, 255, 255, 0)),
+    rgba(9, 8, 7, 0.52);
+  display: grid;
+  gap: 0.4rem;
+}
+
+.expedition-location-card strong {
+  font-size: 1.05rem;
+}
+
+/* ===== Weather Block ===== */
+
+.expedition-weather-block {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.55rem 0.7rem;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.expedition-weather-main {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.expedition-weather-icon {
+  width: 20px;
+  height: 20px;
+  flex: 0 0 20px;
+  opacity: 0.85;
+}
+
+.expedition-weather-main span {
+  font-size: 0.88rem;
+}
+
+/* ===== Risk Line ===== */
+
+.expedition-risk-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 0.35rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.expedition-risk-line span {
+  color: var(--muted);
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.expedition-risk-line strong {
+  font-size: 0.88rem;
+}
+
+/* ===== Expedition Head ===== */
+
+.expedition-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.expedition-head h2 {
+  margin: 0.3rem 0 0;
+  font-size: 1.28rem;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.expedition-head-copy {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+/* ===== Expedition Core ===== */
+
+.expedition-core {
+  display: grid;
+  gap: 0.8rem;
+  padding: 0.95rem;
+  border-radius: 18px;
+  border: 1px solid rgba(215, 138, 51, 0.2);
+  background:
+    linear-gradient(180deg, rgba(215, 138, 51, 0.08), rgba(255, 255, 255, 0)),
+    rgba(10, 8, 7, 0.68);
+}
+
+.expedition-core p {
+  margin: 0;
+}
+
+/* ===== Expedition Status ===== */
+
+.expedition-status-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.expedition-status-card {
+  display: grid;
+  gap: 0.6rem;
+  padding: 0.75rem;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(9, 8, 7, 0.48);
+}
+
+.expedition-status-card small {
+  display: block;
+  margin-bottom: 0.25rem;
+  color: var(--muted);
+  font-size: 0.66rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.expedition-status-cell {
+  padding: 0.55rem;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  text-align: center;
+}
+
+.expedition-status-cell small {
+  display: block;
+  margin-bottom: 0.2rem;
+  color: var(--muted);
+  font-size: 0.62rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.expedition-status-cell strong {
+  font-size: 1rem;
+}
+
+.expedition-launch-button {
+  width: 100%;
+  min-height: 44px;
+  font-size: 0.85rem;
+}
+
+/* ===== Expedition Routes Card ===== */
+
+.expedition-routes-card {
+  display: grid;
+  gap: 0.6rem;
+  min-height: 0;
+}
+
+.expedition-section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.expedition-section-head > span {
+  font-size: 0.82rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+}
+
+/* ===== Expedition Toggle ===== */
+
+.expedition-toggle {
+  min-height: 30px;
+  padding: 0 0.7rem;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--muted);
+  font-size: 0.66rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  transition: border-color 150ms ease, background 150ms ease;
+}
+
+.expedition-toggle:hover {
+  border-color: rgba(215, 138, 51, 0.28);
+  background: rgba(215, 138, 51, 0.08);
+  color: var(--text);
+}
+
+.expedition-toggle.active {
+  border-color: rgba(141, 194, 106, 0.32);
+  background: rgba(141, 194, 106, 0.1);
+  color: #addb7f;
+}
+
+/* ===== Route Stack ===== */
+
+.route-stack,
+.expedition-map-panel,
+.survivor-supply-panel,
+.survivor-actions-panel {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.expedition-route-list,
+.expedition-map-grid {
+  align-content: start;
+}
+
+.expedition-route-stack {
+  display: grid;
+  gap: 0.5rem;
+  min-height: 0;
+  overflow: auto;
+  align-content: start;
+}
+
+/* ===== Expedition Route Card ===== */
+
+.expedition-route-card {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.6rem;
+  text-align: left;
+  background: rgba(5, 5, 4, 0.48);
+  color: var(--text);
+  border-radius: 14px;
+  border: 0;
+  transition: border-color 150ms ease, transform 150ms ease;
+}
+
+.expedition-route-card::before {
+  background-image: var(--hud-frame-route-idle);
+}
+
+.expedition-route-card.recommended::before {
+  background-image: var(--hud-frame-route-active);
+}
+
+.expedition-route-card:hover:not(:disabled) {
+  border-color: rgba(215, 138, 51, 0.22);
+  transform: translateY(-1px);
+}
+
+.expedition-route-card.active {
+  border-color: rgba(215, 138, 51, 0.28);
+}
+
+.expedition-route-card.tone-safe .risk-dots span.active {
+  background: var(--safe);
+  border-color: rgba(141, 194, 106, 0.6);
+}
+
+.expedition-route-card.tone-warn .risk-dots span.active {
+  background: var(--warn);
+  border-color: rgba(224, 180, 102, 0.6);
+}
+
+.expedition-route-card.tone-danger .risk-dots span.active {
+  background: var(--danger);
+  border-color: rgba(225, 109, 76, 0.6);
+}
+
+.expedition-route-card .route-card-thumb {
+  min-height: 56px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background-position: center;
+  background-size: cover;
+  overflow: hidden;
+}
+
+.expedition-route-card .route-card-copy {
+  display: grid;
+  gap: 0.2rem;
+  align-content: center;
+}
+
+.expedition-route-card .route-card-copy strong {
+  font-size: 0.94rem;
+}
+
+.expedition-route-card .route-card-copy p {
+  margin: 0.2rem 0 0;
+  color: rgba(239, 226, 206, 0.72);
+  font-size: 0.78rem;
+  line-height: 1.4;
+}
+
+.route-card-topline {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.route-card-topline strong {
+  font-size: 0.94rem;
+}
+
+.route-card-topline span {
+  color: var(--muted);
+  font-size: 0.66rem;
+  letter-spacing: 0.08em;
+}
+
+.route-card-detail {
+  display: flex;
+  gap: 0.55rem;
+  margin-top: 0.35rem;
+  color: var(--muted);
+  font-size: 0.72rem;
+}

apps/web/src/styles/top-hud.css

@@ -0,0 +1,209 @@
+/* ===== Top HUD Bar ===== */
+
+.top-hud {
+  display: grid;
+  grid-template-columns: 240px 100px minmax(0, 1fr) auto;
+  gap: 0.65rem;
+  align-items: stretch;
+  border-color: var(--panel-border);
+  border-radius: 18px;
+  padding: 0.45rem;
+}
+
+/* ===== Brand Block ===== */
+
+.brand-block,
+.clock-block {
+  border-radius: 16px;
+  background: rgba(11, 10, 8, 0.78);
+}
+
+.brand-block::before,
+.clock-block::before {
+  background-image: var(--hud-frame-compact);
+}
+
+.brand-block {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  padding: 0 1rem;
+}
+
+.brand-mark {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  border: 1px solid rgba(215, 138, 51, 0.32);
+  background: rgba(215, 138, 51, 0.11);
+  color: var(--accent);
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+}
+
+.brand-copy strong,
+.clock-block strong {
+  display: block;
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* ===== Clock Block ===== */
+
+.clock-block {
+  display: grid;
+  grid-template-columns: 22px 1fr;
+  align-items: center;
+  justify-items: start;
+  gap: 0.55rem;
+  padding: 0.65rem 0.8rem;
+  color: var(--muted);
+}
+
+.clock-block div {
+  display: grid;
+  gap: 0.08rem;
+}
+
+.clock-block span {
+  font-size: 0.72rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+/* ===== Status Strip ===== */
+
+.status-strip {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+/* ===== Stat Meter ===== */
+
+.stat-meter {
+  min-width: 0;
+  border-radius: 14px;
+  background: transparent;
+  padding: 0.55rem 0.72rem 0.62rem;
+}
+
+.stat-meter::before {
+  background-image: var(--hud-frame-status);
+}
+
+.stat-meter-copy {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.45rem;
+}
+
+.stat-meter-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  object-fit: contain;
+  opacity: 0.92;
+}
+
+.stat-meter-copy > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 0.4rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.stat-meter-copy span {
+  display: block;
+  min-width: 0;
+  color: var(--muted);
+  font-size: 0.66rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.stat-meter-copy strong {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.12rem;
+  font-size: 0.95rem;
+  white-space: nowrap;
+}
+
+.stat-meter strong small {
+  color: var(--muted);
+  font-size: 0.66rem;
+}
+
+/* Life stat gets more visual weight */
+.stat-meter.tone-health {
+  border-color: rgba(141, 194, 106, 0.25);
+  background: rgba(141, 194, 106, 0.08);
+}
+
+.stat-meter.tone-health .stat-meter-copy strong {
+  font-size: 1.1rem;
+  color: #b4e88f;
+}
+
+.stat-meter.tone-health .meter-track {
+  height: 9px;
+}
+
+/* ===== Meter Track ===== */
+
+.meter-track {
+  height: 7px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.meter-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #f2b55e, #df7a27);
+}
+
+.tone-health .meter-fill {
+  background: linear-gradient(90deg, #9dda74, #53b96f);
+}
+
+.tone-danger .meter-fill {
+  background: linear-gradient(90deg, #f4cc76, #eb6650);
+}
+
+/* ===== Top Actions ===== */
+
+.top-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.45rem;
+  flex-wrap: wrap;
+}
+
+.top-action-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+}
+
+.top-action-icon,
+.clock-icon {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+}

apps/web/src/styles/variables.css

@@ -0,0 +1,31 @@
+:root {
+  --bg: #070604;
+  --bg-soft: #0d0b09;
+  --panel: rgba(16, 13, 10, 0.94);
+  --panel-strong: rgba(13, 11, 8, 0.98);
+  --panel-border: rgba(166, 114, 53, 0.38);
+  --panel-border-soft: rgba(255, 255, 255, 0.08);
+  --text: #efe2ce;
+  --muted: #a38f73;
+  --accent: #d58b36;
+  --accent-soft: rgba(213, 139, 54, 0.16);
+  --safe: #8bc96d;
+  --warn: #e0b466;
+  --danger: #e16d4c;
+  --line: rgba(255, 255, 255, 0.08);
+  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
+
+  --hud-frame-wide: url('/generated/hud/chrome/panel-wide.png');
+  --hud-frame-tall: url('/generated/hud/chrome/panel-tall.png');
+  --hud-frame-card: url('/generated/hud/chrome/panel-card.png');
+  --hud-frame-compact: url('/generated/hud/chrome/panel-compact.png');
+  --hud-frame-route-idle: url('/generated/hud/chrome/route-card-idle.png');
+  --hud-frame-route-active: url('/generated/hud/chrome/route-card-active.png');
+  --hud-frame-action-primary: url('/generated/hud/chrome/action-card-primary.png');
+  --hud-frame-action-secondary: url('/generated/hud/chrome/action-card-secondary.png');
+  --hud-frame-status: url('/generated/hud/chrome/status-meter.png');
+  --hud-frame-warning: url('/generated/hud/chrome/warning-strip.png');
+  --hud-frame-dock-idle: url('/generated/hud/chrome/dock-tab-idle.png');
+  --hud-frame-dock-active: url('/generated/hud/chrome/dock-tab-active.png');
+  --hud-divider: url('/generated/hud/chrome/divider-ornament.png');
+}

docs/07-UX与界面信息架构.md

@@ -9,7 +9,7 @@
   - 我现在状态如何（生存状态与主要威胁）
   - 我下一步能做什么（行动入口与成本）
 - 避免“信息黑箱”：所有关键数值变化必须可追溯原因
-- 支持碎片化：移动端单手可操作，任何时候可暂停/保存
+- 支持 PC / 平板横屏的单屏 HUD 体验，任何时候可暂停/保存
 
 ## 7.2 信息架构（IA）
 
@@ -138,10 +138,13 @@ flowchart TB
 - PC：
   - 三栏布局（状态/背包/主操作+信息）
   - 鼠标悬浮展示细节
-- Mobile：
-  - 单栏纵向布局
-  - 背包与详情用抽屉/底部弹层
-  - 长按替代悬浮
+- Tablet（横屏）：
+  - 保持单屏 HUD，不切成长网页
+  - 缩窄三栏宽度，优先保住顶部状态带与底部模式坞站
+  - 背包、任务、蓝图通过弹层进入
+- 当前阶段不适配小屏手机：
+  - 不为 860px 以下宽度继续补专门的游戏体验设计
+  - 若后续启动移动版，再单独设计纵向信息架构
 
 ## 7.8 界面清单（MVP）
 
@@ -153,4 +156,3 @@ flowchart TB
 - 战斗
 - 事件详情（可选）
 - 设置（音量/文本速度/难度/存档管理）
-

docs/12-前端HUD架构与资产管线.md

@@ -91,13 +91,17 @@ UI 组件 <- Query Cache <- 最新 GameView
 所有当前接入的 GPT-image-2 资产位于：
 
 - `apps/web/public/generated/`：地点背景
-- `apps/web/public/generated/ui/character-preview.png`：角色立绘
 - `apps/web/public/generated/ui/item-atlas.png`：物资图集原图
 - `apps/web/public/generated/ui/equipment-atlas.png`：装备图集原图
 - `apps/web/public/generated/ui/status-atlas.png`：生存状态图集原图
 - `apps/web/public/generated/ui/items/*`：切分后的物资图标
 - `apps/web/public/generated/ui/equipment/*`：切分后的装备槽素材
 - `apps/web/public/generated/ui/status/*`：切分后的生存状态图标
+- `apps/web/public/generated/hud/reference/tinywaste-hud-reference.png`：当前唯一 HUD 参考图（无右侧人物）
+- `apps/web/public/generated/hud/atlases/*`：HUD chrome / icon atlas 原图与透明版
+- `apps/web/public/generated/hud/chrome/*`：切分后的 HUD 框体素材
+- `apps/web/public/generated/hud/icons/*`：切分后的 HUD 功能图标
+- `apps/web/public/generated/hud/manifest.json`：HUD 资产清单
 
 对应映射入口：
 
@@ -108,7 +112,9 @@ UI 组件 <- Query Cache <- 最新 GameView
 - 地点图使用整图背景，服务于中央场景和左侧路线卡。
 - 物资与装备图使用 atlas + 裁切结果，服务于快捷栏、库存卡、角色槽位。
 - 生存状态图使用 atlas + 裁切结果，服务于状态效果卡和后续中断提示。
+- HUD chrome 与 HUD icon 统一走 `apps/web/public/generated/hud/`，并通过 `uiAssets.ts` 暴露。
 - 所有引用都走 `uiAssets.ts`，避免组件里散落硬编码路径。
+- HUD atlas 的透明化与切分流程由 `scripts/slice_hud_atlas.py` 和 `remove_chroma_key.py` 组合完成。
 
 ## 12.6 HUD 信息职责
 
@@ -137,12 +143,12 @@ UI 组件 <- Query Cache <- 最新 GameView
 
 ### 12.6.4 LoadoutPanel
 
-- 角色 / 背包 / 任务三态切换
-- 角色立绘与槽位矩阵
-- 属性与状态效果
-- 快捷栏
-- 完整库存与避难所仓储管理
-- 任务与休整
+- Equipment terminal 头部与负载状态
+- 2x3 装备槽矩阵
+- 生存能力指标（防护 / 潜行 / 机动）
+- 生存告警条
+- Ready pack 资源终端（快速补给 + 仓储摘要）
+- 打开背包 / 仓储弹层入口
 
 ### 12.6.5 BottomDock
 
@@ -156,17 +162,17 @@ UI 组件 <- Query Cache <- 最新 GameView
 
 - 维持单屏阅读，整页不滚动，滚动只发生在内部面板。
 - 中央区优先展示场景与决策，避免全文字堆叠。
-- 右侧区优先视觉化角色与装备，而不是继续做普通列表。
+- 右侧区不再展示人物立绘，改为装备、警报与资源终端。
 - 底部区承担模式切换和系统导航，强化“游戏 HUD”心智。
+- HUD chrome 资产只重点压在小模块和导航件上，大面板只保留轻量纹理，避免再次出现网页卡片感。
 
 ## 12.8 下一步扩展建议
 
 下一轮优先项：
 
 1. 继续补 GPT-image-2 资产：
-   - 头部、侧武器、弹药、医疗、食物第二批图集
+   - 第二批 HUD chrome（战斗态、事件态、模态终端）
    - 天气、辐射、事件状态专用小图标
-2. 将 `LoadoutPanel` 的 tab 与底部导航进一步联动为统一模式系统。
-3. 为 `CommandCenter` 增加战斗专属视图和事件专属视图，而不是完全依赖弹层。
-4. 为物资卡补充更精细的分类过滤和排序逻辑。
-5. 引入可配置的 HUD 主题参数，支撑不同章节或区域切换皮肤。
+2. 为 `CommandCenter` 增加战斗专属视图和事件专属视图，而不是完全依赖弹层。
+3. 为物资卡补充更精细的分类过滤和排序逻辑。
+4. 引入可配置的 HUD 主题参数，支撑不同章节或区域切换皮肤。

packages/content/src/index.ts

@@ -1070,6 +1070,30 @@ export const gameContent: GameContent = {
         },
       ],
     },
+    road_wanderer: {
+      id: 'road_wanderer',
+      title: '路边的求助声',
+      text: '一辆翻覆的车旁边，有人虚弱地问你有没有水。',
+      trigger: 'travel',
+      options: [
+        {
+          id: 'wanderer_share',
+          text: '给他一瓶浑水',
+          conditions: [{ kind: 'has-item', itemId: 'water_dirty', count: 1 }],
+          successEffects: [
+            { type: 'remove-item', itemId: 'water_dirty', count: 1 },
+            { type: 'add-item', itemId: 'herb_bundle', count: 1 },
+          ],
+          successText: '那人把最后一束干草药塞给了你。',
+        },
+        {
+          id: 'wanderer_leave',
+          text: '继续赶路',
+          successEffects: [{ type: 'change-stat', stat: 'sanity', amount: -2 }],
+          successText: '你没有回头，但那声"算了"跟了你一路。',
+        },
+      ],
+    },
   },
   enemies: {
     rat_swarm: {
@@ -1217,29 +1241,4 @@ export const gameContent: GameContent = {
   travelEventPool: ['road_wanderer'],
 };
 
-gameContent.events.road_wanderer = {
-  id: 'road_wanderer',
-  title: '路边的求助声',
-  text: '一辆翻覆的车旁边，有人虚弱地问你有没有水。',
-  trigger: 'travel',
-  options: [
-    {
-      id: 'wanderer_share',
-      text: '给他一瓶浑水',
-      conditions: [{ kind: 'has-item', itemId: 'water_dirty', count: 1 }],
-      successEffects: [
-        { type: 'remove-item', itemId: 'water_dirty', count: 1 },
-        { type: 'add-item', itemId: 'herb_bundle', count: 1 },
-      ],
-      successText: '那人把最后一束干草药塞给了你。',
-    },
-    {
-      id: 'wanderer_leave',
-      text: '继续赶路',
-      successEffects: [{ type: 'change-stat', stat: 'sanity', amount: -2 }],
-      successText: '你没有回头，但那声“算了”跟了你一路。',
-    },
-  ],
-};
-
 export default gameContent;

scripts/slice_hud_atlas.py

@@ -0,0 +1,150 @@
+#!/usr/bin/env python3
+
+from __future__ import annotations
+
+import argparse
+from pathlib import Path
+
+from PIL import Image
+
+
+WHITE_THRESHOLD = 245
+GREEN_KEY = (0, 255, 0)
+
+
+def is_gutter(sample: list[tuple[int, int, int, int]]) -> bool:
+    white_pixels = 0
+    opaque_pixels = 0
+
+    for red, green, blue, alpha in sample:
+        if alpha == 0:
+            continue
+        opaque_pixels += 1
+        if red >= WHITE_THRESHOLD and green >= WHITE_THRESHOLD and blue >= WHITE_THRESHOLD:
+            white_pixels += 1
+
+    if opaque_pixels == 0:
+        return False
+
+    return white_pixels / opaque_pixels >= 0.92
+
+
+def find_segments(mask: list[bool]) -> list[tuple[int, int]]:
+    segments: list[tuple[int, int]] = []
+    start: int | None = None
+
+    for index, is_gap in enumerate(mask):
+        if not is_gap and start is None:
+            start = index
+        if is_gap and start is not None:
+            segments.append((start, index))
+            start = None
+
+    if start is not None:
+        segments.append((start, len(mask)))
+
+    return segments
+
+
+def detect_grid(image: Image.Image) -> tuple[list[tuple[int, int]], list[tuple[int, int]]]:
+    rgba = image.convert('RGBA')
+    width, height = rgba.size
+    pixels = rgba.load()
+
+    column_mask = []
+    for x in range(width):
+        sample = [pixels[x, y] for y in range(height)]
+        column_mask.append(is_gutter(sample))
+
+    row_mask = []
+    for y in range(height):
+        sample = [pixels[x, y] for x in range(width)]
+        row_mask.append(is_gutter(sample))
+
+    columns = [segment for segment in find_segments(column_mask) if segment[1] - segment[0] > 48]
+    rows = [segment for segment in find_segments(row_mask) if segment[1] - segment[0] > 48]
+
+    return columns, rows
+
+
+def remove_chroma(image: Image.Image) -> Image.Image:
+    rgba = image.convert('RGBA')
+    cleaned = Image.new('RGBA', rgba.size)
+
+    for x in range(rgba.width):
+        for y in range(rgba.height):
+            red, green, blue, alpha = rgba.getpixel((x, y))
+            if alpha == 0:
+                cleaned.putpixel((x, y), (0, 0, 0, 0))
+                continue
+
+            dominant_green = green - max(red, blue)
+            color_distance = abs(red - GREEN_KEY[0]) + abs(green - GREEN_KEY[1]) + abs(blue - GREEN_KEY[2])
+
+            if color_distance <= 60:
+                cleaned.putpixel((x, y), (0, 0, 0, 0))
+            elif green > 120 and dominant_green > 26:
+                despilled_green = min(green, max(red, blue) + 10)
+                new_alpha = max(0, min(alpha, 255 - dominant_green * 2))
+                if new_alpha <= 12:
+                    cleaned.putpixel((x, y), (0, 0, 0, 0))
+                else:
+                    cleaned.putpixel((x, y), (red, despilled_green, blue, new_alpha))
+            else:
+                cleaned.putpixel((x, y), (red, green, blue, alpha))
+
+    return cleaned
+
+
+def trim_alpha(image: Image.Image, padding: int = 8) -> Image.Image:
+    bbox = image.getbbox()
+    if bbox is None:
+        return image
+
+    left = max(0, bbox[0] - padding)
+    top = max(0, bbox[1] - padding)
+    right = min(image.width, bbox[2] + padding)
+    bottom = min(image.height, bbox[3] + padding)
+    return image.crop((left, top, right, bottom))
+
+
+def save_cells(image: Image.Image, names: list[str], output_dir: Path) -> list[str]:
+    columns, rows = detect_grid(image)
+    expected = len(columns) * len(rows)
+    if expected != len(names):
+        raise ValueError(
+            f'Grid detection found {len(columns)} columns x {len(rows)} rows = {expected} cells, '
+            f'but {len(names)} names were provided.'
+        )
+
+    written: list[str] = []
+    index = 0
+    for row_start, row_end in rows:
+        for col_start, col_end in columns:
+            cell = image.crop((col_start, row_start, col_end, row_end))
+            cleaned = trim_alpha(remove_chroma(cell))
+            target = output_dir / f'{names[index]}.png'
+            cleaned.save(target)
+            written.append(target.name)
+            index += 1
+
+    return written
+
+
+def main() -> None:
+    parser = argparse.ArgumentParser(description='Slice a HUD atlas with white gutters and green chroma background.')
+    parser.add_argument('--input', required=True, type=Path)
+    parser.add_argument('--output-dir', required=True, type=Path)
+    parser.add_argument('--names', required=True, help='Comma-separated output filenames without extension.')
+    args = parser.parse_args()
+
+    names = [name.strip() for name in args.names.split(',') if name.strip()]
+    args.output_dir.mkdir(parents=True, exist_ok=True)
+
+    atlas = Image.open(args.input)
+    written = save_cells(atlas, names, args.output_dir)
+    print('\n'.join(written))
+
+
+if __name__ == '__main__':
+    main()