feat: 新增游戏界面样式与组件
refactor: 重构游戏面板布局与交互逻辑 style: 优化CSS变量与响应式设计 docs: 添加游戏模型与工具函数文档 chore: 整理项目结构与资源文件
This commit is contained in:
+15
-3300
File diff suppressed because it is too large
Load Diff
@@ -99,10 +99,9 @@ export function CommandCenter({
|
||||
};
|
||||
})();
|
||||
|
||||
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),
|
||||
@@ -110,17 +109,7 @@ export function CommandCenter({
|
||||
detail: action.rewardHint,
|
||||
time: `${action.timeCostMin} 分钟`,
|
||||
onClick: () => onSendAction({ type: 'perform-action', actionId: action.id }),
|
||||
})),
|
||||
];
|
||||
|
||||
while (secondaryOperations.length < 3) {
|
||||
const fillers = [
|
||||
{ id: 'inventory', icon: 'inventory' as const, title: '背包', detail: '打开野外背包终端', time: '0 分钟', onClick: () => onOpenPanel('inventory') },
|
||||
{ id: 'craft', icon: 'crafting' as const, title: '制作', detail: '查看蓝图与材料缺口', time: '15 分钟', onClick: () => onOpenPanel('blueprints') },
|
||||
{ id: 'logs', icon: 'signal' as const, title: '查看日志', detail: '检查最近的探索信号', time: '2 分钟', onClick: () => onOpenPanel('logs') },
|
||||
];
|
||||
secondaryOperations.push(fillers[secondaryOperations.length]);
|
||||
}
|
||||
}));
|
||||
|
||||
return (
|
||||
<section className="panel panel-command theater-panel hud-shell-panel">
|
||||
@@ -183,7 +172,7 @@ export function CommandCenter({
|
||||
</section>
|
||||
|
||||
<div className="theater-secondary-column">
|
||||
{secondaryOperations.slice(0, 3).map((operation) => (
|
||||
{secondaryOperations.map((operation) => (
|
||||
<button key={operation.id} className="theater-secondary-card" disabled={isWorking} onClick={operation.onClick} type="button">
|
||||
<HudIcon name={operation.icon} className="theater-action-icon" />
|
||||
<div>
|
||||
|
||||
@@ -31,27 +31,13 @@ export function LoadoutPanel({
|
||||
<section className="panel panel-loadout equipment-terminal">
|
||||
<header className="equipment-terminal-head">
|
||||
<div className="equipment-terminal-title">
|
||||
<HudIcon name="inventory" className="section-glyph" />
|
||||
<div>
|
||||
<p className="eyebrow">装备</p>
|
||||
<strong>{view.player.name}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="equipment-terminal-badges">
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<section className="equipment-grid-frame">
|
||||
<div className="equipment-grid-head">
|
||||
<span>装备栏</span>
|
||||
<p>右侧保留装备、警报与补给摘要</p>
|
||||
</div>
|
||||
|
||||
<div className="equipment-grid">
|
||||
<section className="equipment-grid">
|
||||
{equipmentEntries.map((entry) => (
|
||||
<article key={entry.id} className={`equipment-slot-card ${entry.isEquipped ? 'equipped' : ''}`}>
|
||||
<div className="equipment-slot-top">
|
||||
@@ -70,7 +56,6 @@ export function LoadoutPanel({
|
||||
</div>
|
||||
<div className="equipment-slot-placeholder">+</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="equipment-metrics-row">
|
||||
@@ -85,15 +70,11 @@ export function LoadoutPanel({
|
||||
<section className="warning-terminal">
|
||||
<div className="warning-terminal-head">
|
||||
<span>生存警报</span>
|
||||
<button className="warning-terminal-button" type="button">
|
||||
详情
|
||||
</button>
|
||||
</div>
|
||||
<div className="warning-terminal-list">
|
||||
{statusEffects.slice(0, 4).map((effect) => (
|
||||
{statusEffects.slice(0, 3).map((effect) => (
|
||||
<article key={effect.id} className={`warning-meter tone-${effect.tone}`}>
|
||||
<div className="warning-meter-head">
|
||||
<HudIcon name="signal" className="warning-meter-icon" />
|
||||
<span>{effect.label.split('·')[0].trim()}</span>
|
||||
</div>
|
||||
<div className="warning-meter-track">
|
||||
|
||||
@@ -39,27 +39,11 @@ export function RoutePanel({
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<section className="expedition-location-card">
|
||||
<p className="eyebrow">当前位置</p>
|
||||
<strong>{view.header.placeName}</strong>
|
||||
<div className="expedition-weather-block">
|
||||
<div className="expedition-weather-main">
|
||||
<HudIcon name="weather" className="expedition-weather-icon" />
|
||||
<span>{atmosphere.weather}</span>
|
||||
</div>
|
||||
<div className="expedition-weather-meta">
|
||||
<span>{atmosphere.weather}</span>
|
||||
<span>{atmosphere.temperature}</span>
|
||||
<span>{atmosphere.wind}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="expedition-risk-line">
|
||||
<span>风险等级</span>
|
||||
<strong>{view.header.riskLabel}</strong>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<section className="expedition-routes-card">
|
||||
<div className="expedition-section-head">
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -57,14 +57,10 @@ 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>
|
||||
{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" />
|
||||
退出
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,346 +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';
|
||||
|
||||
/** Readiness weights for each survival stat (must sum to 100) */
|
||||
const READINESS_WEIGHTS = {
|
||||
life: 34,
|
||||
energy: 28,
|
||||
thirst: 20,
|
||||
hunger: 18,
|
||||
} as const;
|
||||
export {
|
||||
edgeDestination,
|
||||
getCurrentPlace,
|
||||
getPlaceAtmosphere,
|
||||
getVisibleRoutes,
|
||||
getRouteRiskTier,
|
||||
getRiskDots,
|
||||
} from './models/routeModel';
|
||||
|
||||
/** Readiness thresholds for tone classification */
|
||||
const READINESS_TONE_THRESHOLD_GOOD = 74;
|
||||
const READINESS_TONE_THRESHOLD_WARN = 48;
|
||||
export {
|
||||
getKitItem,
|
||||
getLoadoutEntries,
|
||||
} from './models/equipmentModel';
|
||||
|
||||
/** Risk tier boundaries */
|
||||
const RISK_LOW_MAX = 0.35;
|
||||
const RISK_MID_MAX = 0.65;
|
||||
export {
|
||||
getAlertCount,
|
||||
getDominantAlert,
|
||||
getStatusEffects,
|
||||
getExpeditionStatus,
|
||||
getSurvivorMetrics,
|
||||
getSupplyCounts,
|
||||
} from './models/survivalModel';
|
||||
|
||||
/** Survivor metric formula constants */
|
||||
const PROTECTION_BASE_ARMOR = 34;
|
||||
const PROTECTION_BASE_UNARMORED = 12;
|
||||
const PROTECTION_STR_FACTOR = 5;
|
||||
const PROTECTION_LIFE_FACTOR = 30;
|
||||
export {
|
||||
getActiveQuestCount,
|
||||
getObjectiveRows,
|
||||
getPrimaryObjective,
|
||||
getQuestProgress,
|
||||
} from './models/questModel';
|
||||
|
||||
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;
|
||||
|
||||
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 getTimeLabels(timeLabel: string) {
|
||||
const timeSegments = timeLabel.split('·').map((part) => part.trim());
|
||||
return {
|
||||
dayLabel: timeSegments[0] ?? 'Day 1',
|
||||
clockLabel: timeSegments[1] ?? timeLabel,
|
||||
};
|
||||
}
|
||||
|
||||
export function getActiveQuestCount(view: GameView) {
|
||||
return view.quests.filter((quest) => quest.state === 'active').length;
|
||||
}
|
||||
|
||||
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 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 getLatestLog(view: GameView) {
|
||||
return view.logs[0] ?? null;
|
||||
}
|
||||
|
||||
export function getVisibleRoutes(view: GameView, limit = 3) {
|
||||
return view.map.edges.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) * 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;
|
||||
}
|
||||
|
||||
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 <= 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);
|
||||
}
|
||||
|
||||
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';
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
@@ -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}`;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 '物资储备';
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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');
|
||||
}
|
||||
Reference in New Issue
Block a user