blacktrigram 0.7.11 → 0.7.13

package/lib/assets/index.css

@@ -13,10 +13,10 @@ body {
   font-family: var(--font-korean);
   background: linear-gradient(
     135deg,
-    var(--korean-bg-dark) 0%,
-    var(--korean-bg-medium) 100%
+    var(--color-bg-dark) 0%,
+    var(--color-bg-medium) 100%
   );
-  color: var(--korean-text-primary);
+  color: var(--color-text-primary);
   overflow: hidden;
   user-select: none;
 }
@@ -28,15 +28,15 @@ body {
   align-items: center;
   background: radial-gradient(
     ellipse at center,
-    var(--korean-bg-medium) 0%,
-    var(--korean-bg-dark) 100%
+    var(--color-bg-medium) 0%,
+    var(--color-bg-dark) 100%
   );
 }
 /* Korean Text Enhancement */
 .korean-text {
   font-family: var(--font-korean);
   font-weight: 400;
-  text-shadow: 0 0 8px var(--korean-glow);
+  text-shadow: 0 0 8px var(--color-korean-east);
   letter-spacing: 0.02em;
 }
 .korean-title {
@@ -45,42 +45,42 @@ body {
   font-size: 3rem;
   background: linear-gradient(
     45deg,
-    var(--korean-primary),
-    var(--korean-accent)
+    var(--color-accent-cyan),
+    var(--color-warning)
   );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  text-shadow: 0 0 20px var(--korean-primary);
+  text-shadow: 0 0 20px var(--color-accent-cyan);
 }
 .cyber-text {
   font-family: var(--font-cyber);
-  color: var(--korean-primary);
+  color: var(--color-accent-cyan);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   text-shadow: 0 0 10px currentColor;
 }
 /* Cyberpunk UI Elements */
 .cyberpunk-border {
-  border: 2px solid var(--korean-primary);
+  border: 2px solid var(--color-accent-cyan);
   border-image: linear-gradient(
       45deg,
-      var(--korean-primary),
-      var(--korean-accent),
-      var(--korean-primary)
+      var(--color-accent-cyan),
+      var(--color-warning),
+      var(--color-accent-cyan)
     )
     1;
-  box-shadow: 0 0 10px var(--korean-primary),
-    inset 0 0 10px rgba(0, 212, 255, 0.1);
+  box-shadow: 0 0 10px var(--color-accent-cyan),
+    inset 0 0 10px color-mix(in srgb, var(--color-accent-cyan) 10%, transparent);
 }
 .cyberpunk-button {
   background: linear-gradient(
     135deg,
-    rgba(0, 212, 255, 0.1),
-    rgba(255, 183, 0, 0.1)
+    color-mix(in srgb, var(--color-accent-cyan) 10%, transparent),
+    color-mix(in srgb, var(--color-warning) 10%, transparent)
   );
-  border: 1px solid var(--korean-primary);
-  color: var(--korean-text-primary);
+  border: 1px solid var(--color-accent-cyan);
+  color: var(--color-text-primary);
   padding: 0.8rem 1.5rem;
   cursor: pointer;
   transition: all 0.3s ease;
@@ -92,10 +92,10 @@ body {
 .cyberpunk-button:hover {
   background: linear-gradient(
     135deg,
-    rgba(0, 212, 255, 0.2),
-    rgba(255, 183, 0, 0.2)
+    color-mix(in srgb, var(--color-accent-cyan) 20%, transparent),
+    color-mix(in srgb, var(--color-warning) 20%, transparent)
   );
-  box-shadow: 0 0 20px var(--korean-primary);
+  box-shadow: 0 0 20px var(--color-accent-cyan);
   transform: translateY(-2px);
 }
 .cyberpunk-button:before {
@@ -108,7 +108,7 @@ body {
   background: linear-gradient(
     90deg,
     transparent,
-    rgba(255, 255, 255, 0.2),
+    color-mix(in srgb, var(--color-text-primary) 20%, transparent),
     transparent
   );
   transition: left 0.5s;
@@ -124,15 +124,15 @@ body {
   right: 0;
   background: linear-gradient(
     180deg,
-    rgba(10, 10, 15, 0.9) 0%,
+    color-mix(in srgb, var(--color-bg-dark) 90%, transparent) 0%,
     transparent 100%
   );
   padding: 1rem;
-  border-bottom: 1px solid var(--korean-primary);
+  border-bottom: 1px solid var(--color-accent-cyan);
 }
 .health-bar {
-  background: var(--korean-bg-dark);
-  border: 1px solid var(--korean-primary);
+  background: var(--color-bg-dark);
+  border: 1px solid var(--color-accent-cyan);
   height: 8px;
   border-radius: 4px;
   overflow: hidden;
@@ -141,9 +141,9 @@ body {
 .health-bar-fill {
   background: linear-gradient(
     90deg,
-    var(--korean-danger) 0%,
-    var(--korean-accent) 50%,
-    var(--korean-glow) 100%
+    var(--color-danger) 0%,
+    var(--color-warning) 50%,
+    var(--color-korean-east) 100%
   );
   height: 100%;
   transition: width 0.3s ease;
@@ -153,10 +153,10 @@ body {
 @keyframes korean-glow {
   0%,
   100% {
-    text-shadow: 0 0 5px var(--korean-glow);
+    text-shadow: 0 0 5px var(--color-korean-east);
   }
   50% {
-    text-shadow: 0 0 20px var(--korean-glow);
+    text-shadow: 0 0 20px var(--color-korean-east);
   }
 }
 .animate-glow {
@@ -164,13 +164,13 @@ body {
 }
 @keyframes combat-flash {
   0% {
-    background-color: rgba(255, 51, 102, 0.1);
+    background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
   }
   50% {
-    background-color: rgba(255, 51, 102, 0.3);
+    background-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
   }
   100% {
-    background-color: rgba(255, 51, 102, 0.1);
+    background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
   }
 }
 .combat-flash {
@@ -232,8 +232,8 @@ body {
 }
 /* Loading and Error States */
 .loading-spinner {
-  border: 2px solid var(--korean-bg-medium);
-  border-top: 2px solid var(--korean-primary);
+  border: 2px solid var(--color-bg-medium);
+  border-top: 2px solid var(--color-accent-cyan);
   border-radius: 50%;
   width: 40px;
   height: 40px;
@@ -249,9 +249,9 @@ body {
   }
 }
 .error-message {
-  color: var(--korean-danger);
-  background: rgba(255, 51, 102, 0.1);
-  border: 1px solid var(--korean-danger);
+  color: var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+  border: 1px solid var(--color-danger);
   padding: 1rem;
   border-radius: 4px;
   margin: 1rem 0;
@@ -349,6 +349,11 @@ body {
   display: none !important;
 }
 /* Korean typography support */
+/* NOTE: overflow: hidden on body prevents the page itself from scrolling.
+ * This is intentional for a full-screen game. Individual screens that need
+ * scrollable content (Philosophy, Controls) use internal scrollable containers
+ * with overflowY: "auto" on their content areas, which works correctly
+ * because the content div has a fixed height within the viewport. */
 body {
   font-family: "Noto Sans KR", sans-serif;
   margin: 0;
@@ -368,8 +373,8 @@ body {
   bottom: 0;
   background: radial-gradient(
     circle at center,
-    rgba(139, 0, 0, 0.1) 0%,
-    rgba(0, 0, 0, 1) 70%
+    color-mix(in srgb, var(--color-korean-south) 10%, transparent) 0%,
+    var(--color-primary-black) 70%
   );
   pointer-events: none;
   z-index: -1;
@@ -441,15 +446,18 @@ body {
   color: #ffffff;
   font-family: "Noto Sans KR", Arial, sans-serif;
   overflow: hidden;
+  /* Remove focus outline when the app container is focused via tabIndex.
+   * The game container is made focusable for keyboard input capture. */
+  outline: none;
 }
 .app-header {
   padding: 1rem 2rem;
-  background: rgba(0, 10, 18, 0.9);
-  border-bottom: 2px solid #ffd700;
+  background: color-mix(in srgb, var(--color-bg-dark) 90%, transparent);
+  border-bottom: 2px solid var(--color-primary-gold);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
+  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary-gold) 30%, transparent);
 }
 .app-title {
   margin: 0;
@@ -460,14 +468,14 @@ body {
 .korean-title {
   font-size: 1.8rem;
   font-weight: bold;
-  color: #ffd700;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+  color: var(--color-primary-gold);
+  text-shadow: 2px 2px 4px color-mix(in srgb, var(--color-primary-black) 80%, transparent);
 }
 .english-title {
   font-size: 1rem;
-  color: #87ceeb;
+  color: var(--color-info);
   font-style: italic;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
+  text-shadow: 1px 1px 2px color-mix(in srgb, var(--color-primary-black) 60%, transparent);
 }
 .app-status {
   display: flex;
@@ -483,14 +491,14 @@ body {
   font-weight: bold;
 }
 .phase-indicator {
-  background: rgba(255, 215, 0, 0.2);
-  color: #ffd700;
-  border: 1px solid #ffd700;
+  background: color-mix(in srgb, var(--color-primary-gold) 20%, transparent);
+  color: var(--color-primary-gold);
+  border: 1px solid var(--color-primary-gold);
 }
 .time-indicator {
-  background: rgba(135, 206, 235, 0.2);
-  color: #87ceeb;
-  border: 1px solid #87ceeb;
+  background: color-mix(in srgb, var(--color-info) 20%, transparent);
+  color: var(--color-info);
+  border: 1px solid var(--color-info);
 }
 .app-main {
   flex: 1;
@@ -500,7 +508,7 @@ body {
   overflow: hidden;
 }
 .app-debug {
-  background: rgba(0, 0, 0, 0.8);
+  background: color-mix(in srgb, var(--color-primary-black) 80%, transparent);
   color: #00ff00;
   font-family: "Courier New", monospace;
   font-size: 0.8rem;
@@ -510,7 +518,7 @@ body {
 .app-debug summary {
   padding: 0.5rem;
   cursor: pointer;
-  background: rgba(0, 255, 0, 0.1);
+  background: color-mix(in srgb, var(--color-success) 10%, transparent);
   border-bottom: 1px solid #00ff00;
 }
 .app-debug pre {
@@ -550,12 +558,12 @@ body {
   bottom: 0;
   background-image: radial-gradient(
       circle at 20% 20%,
-      rgba(255, 215, 0, 0.05) 0%,
+      color-mix(in srgb, var(--color-primary-gold) 5%, transparent) 0%,
       transparent 50%
     ),
     radial-gradient(
       circle at 80% 80%,
-      rgba(135, 206, 235, 0.05) 0%,
+      color-mix(in srgb, var(--color-info) 5%, transparent) 0%,
       transparent 50%
     );
   pointer-events: none;
@@ -580,7 +588,7 @@ body {
   font-weight: 700;
   color: #ffd700;
   margin-bottom: 1rem;
-  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+  text-shadow: 0 0 20px color-mix(in srgb, var(--color-primary-gold) 50%, transparent);
 }
 .english-subtitle {
   font-size: 1.2rem;
@@ -644,7 +652,7 @@ body {
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
-  color: var(--primary-cyan);
+  color: var(--color-primary-cyan);
 }
 .error-screen {
   position: absolute;
@@ -655,7 +663,7 @@ body {
   color: #ff4136;
   padding: 2rem;
   border: 1px solid #ff4136;
-  background: rgba(255, 65, 54, 0.1);
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
 }
 /* Fix UI overlay positioning to not interfere with canvas visibility */
 .test-overlay {
@@ -823,14 +831,14 @@ body {
 /* Timer Flash - Final seconds warning */
 @keyframes timerFlash {
   0%, 100% {
-    color: #ff4444;
-    text-shadow: 0 0 10px rgba(255, 68, 68, 0.8),
-                 0 0 20px rgba(255, 68, 68, 0.5);
+    color: var(--color-korean-south);
+    text-shadow: 0 0 10px color-mix(in srgb, var(--color-korean-south) 80%, transparent),
+                 0 0 20px color-mix(in srgb, var(--color-korean-south) 50%, transparent);
   }
   50% {
-    color: #ffaa00;
-    text-shadow: 0 0 15px rgba(255, 170, 0, 1),
-                 0 0 30px rgba(255, 170, 0, 0.7);
+    color: var(--color-korean-center);
+    text-shadow: 0 0 15px var(--color-korean-center),
+                 0 0 30px color-mix(in srgb, var(--color-korean-center) 70%, transparent);
   }
 }
 
@@ -1006,9 +1014,9 @@ body {
 .training-button {
   width: 100%;
   height: 40px;
-  border: 2px solid rgba(255, 255, 255, 0.8);
+  border: 2px solid color-mix(in srgb, var(--color-text-primary) 80%, transparent);
   border-radius: 8px;
-  color: #ffffff;
+  color: var(--color-text-primary);
   font-weight: bold;
   cursor: pointer;
   display: flex;
@@ -1019,11 +1027,11 @@ body {
 }
 
 .training-button-start {
-  background: #00ff88;
+  background: var(--color-success);
 }
 
 .training-button-stop {
-  background: #ff4444;
+  background: var(--color-korean-south);
 }
 
 .training-button:hover {
@@ -1033,52 +1041,52 @@ body {
 
 /* Training Mode Selector */
 .mode-button {
-  background: rgba(45, 45, 45, 0.5);
-  border: 2px solid rgba(0, 255, 255, 0.4);
+  background: color-mix(in srgb, var(--color-bg-light) 50%, transparent);
+  border: 2px solid color-mix(in srgb, var(--color-primary-cyan) 40%, transparent);
   border-radius: 8px;
   padding: 10px;
   cursor: pointer;
   text-align: left;
-  color: #ffffff;
+  color: var(--color-text-primary);
   transition: all 0.2s ease;
 }
 
 .mode-button.selected {
-  background: rgba(0, 255, 255, 0.25);
-  border-color: #00ffff;
-  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
+  background: color-mix(in srgb, var(--color-primary-cyan) 25%, transparent);
+  border-color: var(--color-primary-cyan);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary-cyan) 50%, transparent);
 }
 
 .mode-button:not(.selected):hover {
-  background: rgba(64, 64, 64, 0.7);
-  border-color: #00ffff;
+  background: color-mix(in srgb, var(--color-gray-300) 70%, transparent);
+  border-color: var(--color-primary-cyan);
   transform: scale(1.02);
 }
 
 .mode-button:focus-visible {
-  outline: 2px solid #00ffff;
+  outline: 2px solid var(--color-primary-cyan);
   outline-offset: 2px;
-  box-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary-cyan) 80%, transparent);
 }
 
 /* Vital Point Button */
 .vital-point-button {
-  background: rgba(45, 45, 45, 0.5);
-  border: 2px solid rgba(255, 170, 0, 0.5);
+  background: color-mix(in srgb, var(--color-bg-light) 50%, transparent);
+  border: 2px solid color-mix(in srgb, var(--color-korean-center) 50%, transparent);
   border-radius: 8px;
   padding: 8px;
   cursor: pointer;
   text-align: left;
-  color: #ffffff;
+  color: var(--color-text-primary);
   transition: all 0.2s ease;
 }
 
 .vital-point-button.selected {
-  background: rgba(255, 170, 0, 0.3);
+  background: color-mix(in srgb, var(--color-korean-center) 30%, transparent);
 }
 
 .vital-point-button:not(.selected):hover {
-  background: rgba(64, 64, 64, 0.7);
+  background: color-mix(in srgb, var(--color-gray-300) 70%, transparent);
 }
 
 /* Training Feedback Animation - Fast and snappy */
@@ -1097,12 +1105,12 @@ body {
 }
 
 .training-feedback {
-  background: rgba(0, 0, 0, 0.9);
-  border: 3px solid #ffd700;
+  background: color-mix(in srgb, var(--color-primary-black) 90%, transparent);
+  border: 3px solid var(--color-primary-gold);
   border-radius: 16px;
-  color: #ffd700;
+  color: var(--color-primary-gold);
   text-align: center;
-  box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
+  box-shadow: 0 0 30px color-mix(in srgb, var(--color-primary-gold) 50%, transparent);
   animation: feedbackPulse 0.4s ease-out;
   min-width: 200px;
 }
@@ -1133,7 +1141,7 @@ body {
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: #00ff88;
+  background: var(--color-success);
 }
 
 .status-indicator.active {
@@ -1141,6 +1149,6 @@ body {
 }
 
 .status-indicator.inactive {
-  background: #888888;
+  background: var(--color-gray-500);
 }
 /*$vite$:1*/

package/lib/components/screens/combat/CombatScreen3D.d.ts

@@ -1,5 +1,5 @@
 /**
- * CombatScreen3D - Three.js-based combat screen
+ * CombatScreen3D - Three.js-based combat screen (Black Trigram 흑괘)
  *
  * Maintains all existing combat logic and state management
  * Uses Html overlays for UI and 3D meshes for game objects

package/lib/components/screens/combat/CombatScreen3D.js

@@ -78,7 +78,7 @@ import { Html } from "@react-three/drei";
 import { Bloom, EffectComposer, Noise, Vignette } from "@react-three/postprocessing";
 //#region src/components/screens/combat/CombatScreen3D.tsx
 /**
-* CombatScreen3D - Three.js-based combat screen
+* CombatScreen3D - Three.js-based combat screen (Black Trigram 흑괘)
 *
 * Maintains all existing combat logic and state management
 * Uses Html overlays for UI and 3D meshes for game objects
@@ -1415,7 +1415,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 			width: `${width}px`,
 			height: `${height}px`,
 			position: "relative",
-			backgroundColor: "#0a0a0a",
+			backgroundColor: toHexColor(KOREAN_COLORS.UI_BACKGROUND_DARK),
 			overflow: "hidden"
 		},
 		"data-testid": "combat-screen",