From dcfc91b82be72a94eb80334765bf84fb81a083f6 Mon Sep 17 00:00:00 2001
From: Joan <lgray.foxl@gmail.com>
Date: Fri, 6 Feb 2026 11:51:58 +0100
Subject: [PATCH] Refactor global UI to Tech-HUD style (clip-path)

---
 pwa/src/components/Game.css                      |  6 +++---
 pwa/src/components/common/GameProgressBar.tsx    |  3 ++-
 pwa/src/components/game/CombatInventoryModal.css |  2 +-
 pwa/src/components/game/InventoryModal.css       |  8 ++++----
 pwa/src/components/game/Workbench.css            |  4 ++--
 pwa/src/index.css                                | 15 ++++++++-------
 6 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/pwa/src/components/Game.css b/pwa/src/components/Game.css
index a103256..6f5cfe4 100644
--- a/pwa/src/components/Game.css
+++ b/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 {
diff --git a/pwa/src/components/common/GameProgressBar.tsx b/pwa/src/components/common/GameProgressBar.tsx
index 1283df6..1674e09 100644
--- a/pwa/src/components/common/GameProgressBar.tsx
+++ b/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'
diff --git a/pwa/src/components/game/CombatInventoryModal.css b/pwa/src/components/game/CombatInventoryModal.css
index 124530b..95e3444 100644
--- a/pwa/src/components/game/CombatInventoryModal.css
+++ b/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 */
diff --git a/pwa/src/components/game/InventoryModal.css b/pwa/src/components/game/InventoryModal.css
index d763113..0652772 100644
--- a/pwa/src/components/game/InventoryModal.css
+++ b/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 {
diff --git a/pwa/src/components/game/Workbench.css b/pwa/src/components/game/Workbench.css
index 9c995e7..3352f1f 100644
--- a/pwa/src/components/game/Workbench.css
+++ b/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 {
diff --git a/pwa/src/index.css b/pwa/src/index.css
index 228d11c..6bec3ac 100644
--- a/pwa/src/index.css
+++ b/pwa/src/index.css
@@ -18,9 +18,11 @@
   /* Red accent border */
 
   /* --- Dimensions --- */
-  --game-radius-xs: 2px;
-  --game-radius-sm: 4px;
-  --game-radius-md: 6px;
+  --game-radius-xs: 0px;
+  --game-radius-sm: 0px;
+  --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 {