Refactor global UI to Tech-HUD style (clip-path)

pwa/src/components/Game.css

@@ -347,11 +347,11 @@ html {
   align-items: center;
   background: rgba(0, 0, 0, 0.4);
   border: 1px solid var(--game-border-color);
-  border-radius: var(--game-radius-sm);
   padding: 0 0.8rem;
   transition: all 0.2s ease;
   height: 40px;
   position: relative;
+  clip-path: var(--game-clip-path-sm);
 }
 
 .game-search-container:focus-within {
@@ -433,10 +433,10 @@ html {
 .location-info {
   background: var(--game-bg-panel);
   padding: 1.5rem;
-  border-radius: var(--game-radius-md);
   margin-bottom: 1.5rem;
   border: 1px solid var(--game-border-color);
   box-shadow: var(--game-shadow-card);
+  clip-path: var(--game-clip-path);
 }
 
 .location-info h2 {
@@ -775,9 +775,9 @@ html {
 .movement-controls {
   background: var(--game-bg-panel);
   padding: 1.5rem;
-  border-radius: var(--game-radius-md);
   border: 1px solid var(--game-border-color);
   box-shadow: var(--game-shadow-card);
+  clip-path: var(--game-clip-path);
 }
 
 .movement-controls h3 {

pwa/src/components/common/GameProgressBar.tsx

@@ -91,7 +91,8 @@ export const GameProgressBar: React.FC<GameProgressBarProps> = ({
             <div className="progress-track" style={{
                 height,
                 backgroundColor: '#2d3748',
-                borderRadius: '4px',
+                borderRadius: '0px',
+                clipPath: 'var(--game-clip-path-sm)',
                 overflow: 'hidden',
                 display: 'flex',
                 justifyContent: align === 'right' ? 'flex-end' : 'flex-start'

pwa/src/components/game/CombatInventoryModal.css

@@ -23,12 +23,12 @@
     flex-direction: column;
     background: linear-gradient(135deg, #1e2a38 0%, #121820 100%);
     border: 1px solid #3a4b5c;
-    border-radius: 12px;
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
     overflow: hidden;
     color: #e0e6ed;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     z-index: 2001;
+    clip-path: var(--game-clip-path);
 }
 
 /* Header */

pwa/src/components/game/InventoryModal.css

@@ -46,11 +46,11 @@
     max-width: 1400px;
     background: var(--game-bg-modal);
     border: 1px solid var(--game-border-color);
-    border-radius: var(--game-radius-lg);
     box-shadow: var(--game-shadow-modal);
     overflow: hidden;
     color: var(--game-text-primary);
     font-family: var(--game-font-main);
+    clip-path: var(--game-clip-path);
 }
 
 /* Top Bar */
@@ -97,9 +97,9 @@
 .metric-bar {
     height: 8px;
     background: rgba(0, 0, 0, 0.5);
-    border-radius: var(--game-radius-sm);
     overflow: hidden;
     border: 1px solid var(--game-border-color);
+    clip-path: var(--game-clip-path-sm);
 }
 
 .metric-fill {
@@ -127,8 +127,8 @@
     align-items: center;
     gap: 0.75rem;
     padding: 0.5rem 1rem;
-    border-radius: 8px;
     background: rgba(255, 255, 255, 0.05);
+    clip-path: var(--game-clip-path-sm);
 }
 
 .backpack-status.active {
@@ -238,11 +238,11 @@
     padding: 0.75rem 1rem;
     background: var(--game-bg-input);
     border: 1px solid var(--game-border-color);
-    border-radius: var(--game-radius-md);
     margin-bottom: 1.5rem;
     color: var(--game-text-primary);
     width: 100%;
     box-sizing: border-box;
+    clip-path: var(--game-clip-path-sm);
 }
 
 .inventory-search-bar input {

pwa/src/components/game/Workbench.css

@@ -19,13 +19,13 @@
     height: 85vh;
     background: var(--game-bg-modal);
     border: 1px solid var(--game-border-color);
-    border-radius: var(--game-radius-lg);
     display: flex;
     flex-direction: column;
     box-shadow: var(--game-shadow-modal);
     overflow: hidden;
     color: var(--game-text-primary);
     font-family: var(--game-font-main);
+    clip-path: var(--game-clip-path);
 }
 
 .workbench-header {
@@ -56,10 +56,10 @@
     border: 1px solid transparent;
     color: #a0aec0;
     padding: 0.5rem 1rem;
-    border-radius: 6px;
     cursor: pointer;
     font-weight: 600;
     transition: all 0.2s;
+    clip-path: var(--game-clip-path-sm);
 }
 
 .tab-btn:hover {

pwa/src/index.css

@@ -18,9 +18,11 @@
   /* Red accent border */
 
   /* --- Dimensions --- */
-  --game-radius-xs: 2px;
+  --game-radius-xs: 0px;
-  --game-radius-sm: 4px;
+  --game-radius-sm: 0px;
-  --game-radius-md: 6px;
+  --game-radius-md: 0px;
+  --game-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
+  --game-clip-path-sm: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
 
   /* --- Typography --- */
   --game-font-main: 'Saira Condensed', system-ui, sans-serif;
@@ -73,8 +75,8 @@
   background: var(--game-bg-panel);
   border: 1px solid var(--game-border-color);
   box-shadow: var(--game-shadow-panel);
-  border-radius: var(--game-radius-sm);
   backdrop-filter: blur(8px);
+  clip-path: var(--game-clip-path);
 }
 
 .game-modal-overlay {
@@ -103,7 +105,7 @@
   letter-spacing: 0.5px;
   cursor: pointer;
   transition: all 0.2s ease;
-  border-radius: var(--game-radius-xs);
+  clip-path: var(--game-clip-path-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -140,7 +142,6 @@
 
 .game-btn-icon {
   padding: 0.5rem;
-  border-radius: 50%;
   /* Or keep square for industrial look */
   line-height: 1;
 }
@@ -149,13 +150,13 @@
 .game-slot {
   background: var(--game-bg-slot);
   border: 1px solid var(--game-border-color);
-  border-radius: var(--game-radius-xs);
   position: relative;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 1;
+  clip-path: var(--game-clip-path-sm);
 }
 
 .game-slot:hover {