From d8e74b00c348cbf82de62f6addb38556fdce21f3 Mon Sep 17 00:00:00 2001
From: chenchun <chenchun@virtheart.com>
Date: Wed, 29 Apr 2026 01:47:09 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0=E7=9A=84=E5=B0=BA=E5=AF=B8=E5=92=8C=E9=97=B4?=
 =?UTF-8?q?=E8=B7=9D=E4=BB=A5=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/App.css | 193 ++++++++++++++-----------------------------
 1 file changed, 61 insertions(+), 132 deletions(-)

diff --git a/apps/web/src/App.css b/apps/web/src/App.css
index 1057922..507b989 100644
--- a/apps/web/src/App.css
+++ b/apps/web/src/App.css
@@ -284,12 +284,12 @@ input,
 
 .top-hud {
   display: grid;
-  grid-template-columns: 280px 110px minmax(0, 1fr) auto;
-  gap: 0.75rem;
+  grid-template-columns: 240px 100px minmax(0, 1fr) auto;
+  gap: 0.65rem;
   align-items: stretch;
   border-color: var(--panel-border);
-  border-radius: 22px;
-  padding: 0.5rem;
+  border-radius: 18px;
+  padding: 0.45rem;
 }
 
 .brand-block,
@@ -308,13 +308,13 @@ input,
 .brand-mark {
   display: grid;
   place-items: center;
-  width: 52px;
-  height: 52px;
-  border-radius: 14px;
+  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.95rem;
+  font-size: 0.85rem;
   font-weight: 700;
   letter-spacing: 0.18em;
 }
@@ -417,15 +417,15 @@ input,
 .game-grid {
   min-height: 0;
   display: grid;
-  grid-template-columns: 304px minmax(0, 1fr) 396px;
-  gap: 0.75rem;
+  grid-template-columns: 280px minmax(0, 1fr) 360px;
+  gap: 0.65rem;
   overflow: hidden;
 }
 
 .panel-route {
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 0.95fr);
-  gap: 0.75rem;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  gap: 0.65rem;
 }
 
 .route-summary-card {
@@ -598,8 +598,8 @@ input,
 
 .panel-command {
   display: grid;
-  grid-template-rows: 248px auto minmax(0, 1fr);
-  gap: 0.75rem;
+  grid-template-rows: auto 1fr;
+  gap: 0.65rem;
 }
 
 .viewport-stage,
@@ -795,12 +795,12 @@ input,
 
 .command-dock {
   display: grid;
-  grid-template-columns: 240px minmax(0, 1fr);
-  gap: 0.75rem;
+  grid-template-columns: 200px minmax(0, 1fr) auto;
+  gap: 0.65rem;
   align-items: center;
-  border-radius: 18px;
+  border-radius: 16px;
   border-color: var(--panel-border);
-  padding: 0.65rem 0.8rem;
+  padding: 0.5rem 0.7rem;
 }
 
 .operator-card {
@@ -812,14 +812,14 @@ input,
 .operator-emblem {
   display: grid;
   place-items: center;
-  width: 46px;
-  height: 46px;
-  border-radius: 14px;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
   border: 1px solid rgba(215, 138, 51, 0.38);
   background: rgba(215, 138, 51, 0.12);
   color: var(--accent);
   font-weight: 700;
-  font-size: 1rem;
+  font-size: 0.9rem;
 }
 
 .operator-copy span {
@@ -851,11 +851,11 @@ input,
 .dock-metrics span {
   display: inline-flex;
   align-items: center;
-  min-height: 2.1rem;
-  padding: 0 0.85rem;
+  min-height: 1.8rem;
+  padding: 0 0.7rem;
   border-radius: 999px;
-  font-size: 0.72rem;
-  letter-spacing: 0.12em;
+  font-size: 0.68rem;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
 }
 
@@ -1194,9 +1194,7 @@ input,
   background: rgba(215, 138, 51, 0.26);
 }
 
-.game-grid {
-  grid-template-columns: 272px minmax(0, 1fr) 352px;
-}
+/* Consolidated into first .game-grid rule */
 
 .panel-route.expedition-panel,
 .panel-command.theater-panel,
@@ -1205,7 +1203,7 @@ input,
 }
 
 .panel-route.expedition-panel {
-  grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 0.78fr);
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
 }
 
 .expedition-head,
@@ -1299,7 +1297,7 @@ input,
 }
 
 .theater-panel {
-  grid-template-rows: 294px auto auto;
+  grid-template-rows: auto 1fr;
 }
 
 .theater-scene {
@@ -1766,72 +1764,7 @@ input,
   }
 }
 
-@media (max-width: 860px) {
-  .app-shell,
-  .auth-shell,
-  .new-game-shell,
-  .loading-shell {
-    padding: 0.55rem;
-  }
-
-  .status-strip,
-  .combat-actions,
-  .overlay-summary-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .theater-scene {
-    min-height: 360px;
-  }
-
-  .theater-scene-copy,
-  .theater-scene-side {
-    position: static;
-    width: auto;
-  }
-
-  .theater-scene {
-    display: grid;
-    align-content: end;
-    gap: 0.7rem;
-    padding: 1rem;
-  }
-
-  .theater-scene::after {
-    inset: 0;
-  }
-
-  .expedition-status-grid,
-  .theater-intel-grid,
-  .theater-intel-strip,
-  .theater-action-zone,
-  .survivor-metrics-strip,
-  .rig-column,
-  .survivor-supply-grid,
-  .equipment-metrics-row,
-  .equipment-grid,
-  .ready-pack-columns {
-    grid-template-columns: 1fr;
-  }
-
-  .inventory-card,
-  .recipe-card,
-  .inventory-overlay-grid,
-  .blueprint-overlay-grid,
-  .mission-overlay-grid,
-  .log-overlay-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .auth-hero,
-  .new-game-card {
-    min-height: 420px;
-  }
-
-  .expedition-route-card {
-    grid-template-columns: 1fr;
-  }
-}
+/* Mobile breakpoint removed - game only targets PC and tablet */
 
 :root {
   --hud-frame-wide: url('/generated/hud/chrome/panel-wide.png');
@@ -2062,11 +1995,7 @@ input,
   background: rgba(255, 255, 255, 0.06);
 }
 
-.game-grid {
-  grid-template-columns: 286px minmax(0, 1fr) 370px;
-  gap: 0.85rem;
-  height: calc(100dvh - 176px);
-}
+/* Consolidated into first .game-grid rule */
 
 .panel-route.expedition-panel,
 .panel-command.theater-panel,
@@ -2426,7 +2355,7 @@ input,
   grid-template-rows: 1fr auto;
   min-height: 0;
   overflow: hidden;
-  border-radius: 20px;
+  border-radius: 16px;
   border: 1px solid rgba(215, 138, 51, 0.2);
 }
 
@@ -2452,11 +2381,11 @@ input,
   position: relative;
   z-index: 2;
   display: grid;
-  grid-template-columns: minmax(0, 1.3fr) 260px;
-  gap: 0.75rem;
-  padding: 0.85rem;
+  grid-template-columns: minmax(0, 1.3fr) 220px;
+  gap: 0.65rem;
+  padding: 0.75rem;
   align-content: end;
-  min-height: 200px;
+  min-height: 180px;
 }
 
 .theater-titlebar {
@@ -2655,7 +2584,7 @@ input,
 .theater-intel-strip {
   display: grid;
   grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 0.7fr));
-  gap: 0.5rem;
+  gap: 0.4rem;
 }
 
 .theater-intel-block {
@@ -2842,16 +2771,16 @@ input,
 
 .expedition-route-card {
   display: grid;
-  grid-template-columns: 72px minmax(0, 1fr);
-  gap: 0.65rem;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 0.55rem;
   width: 100%;
-  padding: 0.6rem;
+  padding: 0.5rem;
   text-align: left;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
     rgba(8, 7, 6, 0.48);
   color: var(--text);
-  border-radius: 16px;
+  border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   transition: border-color 150ms ease, transform 150ms ease;
 }
@@ -2881,8 +2810,8 @@ input,
 }
 
 .expedition-route-card .route-card-thumb {
-  min-height: 80px;
-  border-radius: 12px;
+  min-height: 64px;
+  border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background-position: center;
   background-size: cover;
@@ -2930,9 +2859,9 @@ input,
 
 .expedition-status-card {
   display: grid;
-  gap: 0.65rem;
-  padding: 0.85rem;
-  border-radius: 16px;
+  gap: 0.55rem;
+  padding: 0.75rem;
+  border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(9, 8, 7, 0.48);
 }
@@ -2973,8 +2902,8 @@ input,
 .equipment-terminal {
   display: grid;
   grid-template-rows: auto auto auto auto auto;
-  gap: 0.65rem;
-  padding: 0.85rem;
+  gap: 0.55rem;
+  padding: 0.75rem;
 }
 
 .equipment-terminal-head {
@@ -3023,7 +2952,7 @@ input,
 .equipment-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.5rem;
+  gap: 0.4rem;
 }
 
 .equipment-slot-card {
@@ -3125,7 +3054,7 @@ input,
 
 .warning-terminal {
   display: grid;
-  gap: 0.55rem;
+  gap: 0.45rem;
 }
 
 .warning-terminal-head {
@@ -3229,9 +3158,9 @@ input,
 
 .ready-pack-frame {
   display: grid;
-  gap: 0.55rem;
-  padding: 0.75rem;
-  border-radius: 14px;
+  gap: 0.45rem;
+  padding: 0.65rem;
+  border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   background: rgba(9, 8, 7, 0.4);
 }
@@ -3279,13 +3208,13 @@ input,
 .quick-access-slot {
   display: grid;
   place-items: center;
-  gap: 0.2rem;
-  padding: 0.45rem;
-  border-radius: 12px;
+  gap: 0.15rem;
+  padding: 0.35rem;
+  border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.07);
   background: rgba(8, 7, 6, 0.48);
   color: var(--text);
-  min-height: 68px;
+  min-height: 56px;
   transition: border-color 150ms ease;
 }
 
@@ -3327,12 +3256,12 @@ input,
 .stash-slot {
   display: grid;
   place-items: center;
-  gap: 0.2rem;
-  padding: 0.4rem;
-  border-radius: 10px;
+  gap: 0.15rem;
+  padding: 0.3rem;
+  border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   background: rgba(8, 7, 6, 0.4);
-  min-height: 54px;
+  min-height: 44px;
 }
 
 .stash-slot span {