blacktrigram 0.7.97 → 0.7.99

package/lib/components/screens/controls/ControlsScreen3D.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlsScreen3D.js","names":[],"sources":["../../../../src/components/screens/controls/ControlsScreen3D.tsx"],"sourcesContent":["import { Canvas } from \"@react-three/fiber\";\nimport React, { useCallback, useEffect, useMemo } from \"react\";\nimport { useAudio } from \"../../../audio/AudioProvider\";\nimport { useWebGLContextLossHandler } from \"../../../hooks/useWebGLContextLossHandler\";\nimport { useWindowSize } from \"../../../hooks/useWindowSize\";\nimport { COMBAT_CONTROLS } from \"../../../systems\";\nimport { FONT_FAMILY } from \"@/types/constants\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\nimport { shouldUseMobileControls } from \"../../../utils/deviceDetection\";\nimport { getLayoutConstants } from \"../../../utils/responsiveLayoutHelpers\";\nimport { useKoreanTheme } from \"../../shared/base/useKoreanTheme\";\nimport { BackgroundScene3D } from \"../../shared/three\";\nimport { BackButton } from \"../../shared/ui/BackButton\";\nimport { VolumeControl } from \"../../shared/ui/VolumeControl\";\nimport { ControlBindingsOverlayHtml } from \"./components/ControlBindingsOverlayHtml\";\nimport { ControlCategoryTabs } from \"./components/ControlCategoryTabsOverlayHtml\";\nimport { GamepadVisualization3D } from \"./components/GamepadVisualization3D\";\nimport { InteractiveControlDemo } from \"./components/InteractiveControlDemoOverlayHtml\";\nimport { VisualKeyboard3D } from \"./components/VisualKeyboard3D\";\nimport { useControlsState } from \"./hooks/useControlsState\";\n\nexport interface ControlsScreen3DProps {\n  readonly onReturnToMenu: () => void;\n  readonly width?: number;\n  readonly height?: number;\n}\n\n/**\n * Three.js-based ControlsScreen Component\n */\nexport const ControlsScreen3D: React.FC<ControlsScreen3DProps> = ({\n  onReturnToMenu,\n  width: propWidth,\n  height: propHeight,\n}) => {\n\n  const { pressedKeys, category, selectedTab, setCategory, setSelectedTab } =\n    useControlsState();\n\n  useWebGLContextLossHandler({\n    onContextLost: () => {\n      console.warn(\"⚠️ WebGL context lost in ControlsScreen\");\n    },\n    onContextRestored: () => {\n      console.log(\"✓ WebGL context restored in ControlsScreen\");\n    },\n    autoRestore: true,\n  });\n\n  const audio = useAudio();\n  const { width, height } = useWindowSize();\n\n  const screenWidth = propWidth ?? width;\n  const screenHeight = propHeight ?? height;\n\n  const isMobile = shouldUseMobileControls();\n  const isTablet = useMemo(\n    () => !isMobile && screenWidth >= 768 && screenWidth < 1024,\n    [isMobile, screenWidth],\n  );\n  const isLargeDesktop = useMemo(\n    () => !isMobile && screenWidth >= 1920,\n    [isMobile, screenWidth],\n  ); // 4K/2K displays\n\n  const layoutConstants = useMemo(\n    () => getLayoutConstants(screenWidth),\n    [screenWidth],\n  );\n\n  const theme = useKoreanTheme({\n    variant: \"primary\",\n    size: \"md\",\n    isMobile,\n  });\n\n  const scrollbarStyle = useMemo(\n    () => ({\n      __html: `\n      .korean-scrollbar::-webkit-scrollbar {\n        width: 12px !important;\n        display: block !important;\n      }\n      .korean-scrollbar::-webkit-scrollbar-track {\n        background: ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8)};\n        border-radius: 6px;\n      }\n      .korean-scrollbar::-webkit-scrollbar-thumb {\n        background: ${hexToRgbaString(theme.colors.ACCENT_GOLD, 1)};\n        border-radius: 6px;\n        border: 2px solid ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8)};\n      }\n      .korean-scrollbar::-webkit-scrollbar-thumb:hover {\n        background: ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)};\n      }\n    `,\n    }),\n    [theme],\n  );\n\n  const colors = useMemo(\n    () => ({\n      background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n      headerBg: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n      sectionBg: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n      borderGold: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.6),\n      borderCyan: hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.5),\n      borderRed: hexToRgbaString(theme.colors.KOREAN_RED, 0.8),\n      textPrimary: `#${theme.colors.TEXT_PRIMARY.toString(16).padStart(6, \"0\")}`,\n      textSecondary: `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, \"0\")}`,\n      accentGold: `#${theme.colors.ACCENT_GOLD.toString(16).padStart(6, \"0\")}`,\n      accentCyan: `#${theme.colors.PRIMARY_CYAN.toString(16).padStart(6, \"0\")}`,\n      koreanBlack: `#${theme.colors.KOREAN_BLACK.toString(16).padStart(6, \"0\")}`,\n    }),\n    [theme],\n  );\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" || event.key.toLowerCase() === \"m\") {\n        event.preventDefault();\n        audio.playSFX(\"menu_back\");\n        onReturnToMenu();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown, { passive: false });\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [onReturnToMenu, audio]);\n\n  const handleBackClick = useCallback(() => {\n    audio.playSFX(\"menu_back\");\n    onReturnToMenu();\n  }, [audio, onReturnToMenu]);\n\n  const handleModeButtonEnter = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {\n      if (!isActive) {\n        e.currentTarget.style.background = hexToRgbaString(\n          theme.colors.PRIMARY_CYAN,\n          0.1,\n        );\n        e.currentTarget.style.borderColor = hexToRgbaString(\n          theme.colors.PRIMARY_CYAN,\n          0.8,\n        );\n      }\n    },\n    [theme],\n  );\n\n  const handleModeButtonLeave = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {\n      if (!isActive) {\n        e.currentTarget.style.background = hexToRgbaString(\n          theme.colors.UI_BACKGROUND_DARK,\n          0.8,\n        );\n        e.currentTarget.style.borderColor = hexToRgbaString(\n          theme.colors.ACCENT_GOLD,\n          0.6,\n        );\n      }\n    },\n    [theme],\n  );\n\n  const stanceControls = useMemo(\n    () => Object.entries(COMBAT_CONTROLS.stanceControls),\n    [],\n  );\n\n  const combatControls = useMemo(\n    () => Object.entries(COMBAT_CONTROLS.combat),\n    [],\n  );\n\n  const buttonsPerRow = isMobile ? 2 : isTablet ? 3 : isLargeDesktop ? 5 : 4;\n  const buttonHeight = isMobile\n    ? 120\n    : isTablet\n      ? 130\n      : isLargeDesktop\n        ? 120\n        : 140;\n\n  return (\n    <div\n      style={{\n        width: screenWidth,\n        height: screenHeight,\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n      data-testid=\"controls-screen\"\n    >\n      {/* Volume Control - outside Canvas to maintain AudioProvider context */}\n      <VolumeControl position=\"top-right\" compact={isMobile} />\n\n      {/* Three.js Canvas for 3D background and visualization */}\n      <Canvas\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          zIndex: Z_INDEX.ARENA,\n        }}\n        gl={{\n          antialias: true,\n          alpha: false,\n          powerPreference: \"high-performance\",\n        }}\n        dpr={[1, 2]}\n        camera={{ position: [0, 5, 10], fov: 75 }}\n        onCreated={({ gl }) => {\n          gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 1);\n        }}\n      >\n        {/* 3D Background Scene */}\n        <BackgroundScene3D theme=\"controls\" />\n\n        {/* Conditional 3D Visualization based on category */}\n        {category === \"keyboard\" ? (\n          <VisualKeyboard3D\n            pressedKeys={pressedKeys}\n            selectedTab={selectedTab}\n          />\n        ) : (\n          <GamepadVisualization3D isMobile={isMobile} />\n        )}\n      </Canvas>\n\n      {/* UI Overlay (positioned absolutely over Canvas) - matches CombatScreen pattern */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          pointerEvents: \"none\",\n          zIndex: Z_INDEX.HUD,\n        }}\n        data-testid=\"controls-hud-overlay\"\n      >\n        {/* WebKit Scrollbar Styling - Using !important to override global hide */}\n        <style dangerouslySetInnerHTML={scrollbarStyle} />\n\n        <div\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            color: colors.textPrimary,\n            fontFamily: theme.koreanTypography.fontFamily,\n            lineHeight: theme.koreanTypography.lineHeight,\n            pointerEvents: \"auto\",\n          }}\n        >\n          {/* Header */}\n          <div\n            style={{\n              height: `${layoutConstants.headerHeight}px`,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              background: colors.headerBg,\n              borderBottom: `3px solid ${colors.borderRed}`,\n              padding: `${layoutConstants.padding}px`,\n            }}\n            data-testid=\"controls-header\"\n          >\n            <h1\n              style={{\n                fontSize: isMobile ? \"20px\" : \"24px\",\n                fontWeight: \"bold\",\n                color: colors.accentGold,\n                margin: 0,\n                textShadow: `0 0 10px ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.5,\n                )}`,\n              }}\n            >\n              조작법 안내 - Controls Guide\n            </h1>\n            <p\n              style={{\n                fontSize: isMobile ? \"12px\" : \"16px\",\n                color: colors.accentCyan,\n                margin: \"8px 0 0 0\",\n                fontStyle: \"italic\",\n              }}\n            >\n              ☯ 팔괘 철학과 급소술의 융합 | Eight Trigrams Philosophy & Vital\n              Point Arts ☯\n            </p>\n          </div>\n\n          {/* Mode Toggle (Keyboard/Gamepad) */}\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"center\",\n              gap: isMobile ? \"10px\" : \"15px\",\n              padding: `${layoutConstants.padding}px`,\n              background: colors.headerBg,\n              borderBottom: `2px solid ${colors.borderGold}`,\n            }}\n            data-testid=\"mode-toggle\"\n          >\n            <button\n              onClick={() => {\n                audio.playSFX(\"menu_select\");\n                setCategory(\"keyboard\");\n              }}\n              style={{\n                padding: isMobile ? \"10px 20px\" : \"12px 30px\",\n                borderRadius: \"8px\",\n                border: `2px solid ${category === \"keyboard\" ? colors.accentCyan : colors.borderGold}`,\n                background:\n                  category === \"keyboard\"\n                    ? hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)\n                    : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n                color:\n                  category === \"keyboard\"\n                    ? colors.accentCyan\n                    : colors.textSecondary,\n                fontFamily: FONT_FAMILY.KOREAN,\n                fontSize: isMobile ? \"14px\" : \"16px\",\n                fontWeight: \"bold\",\n                cursor: \"pointer\",\n                transition: \"all 0.2s ease\",\n              }}\n              data-testid=\"keyboard-mode-button\"\n              onMouseEnter={(e) =>\n                handleModeButtonEnter(e, category === \"keyboard\")\n              }\n              onMouseLeave={(e) =>\n                handleModeButtonLeave(e, category === \"keyboard\")\n              }\n            >\n              ⌨️ 키보드 | Keyboard\n            </button>\n            <button\n              onClick={() => {\n                audio.playSFX(\"menu_select\");\n                setCategory(\"gamepad\");\n              }}\n              style={{\n                padding: isMobile ? \"10px 20px\" : \"12px 30px\",\n                borderRadius: \"8px\",\n                border: `2px solid ${category === \"gamepad\" ? colors.accentCyan : colors.borderGold}`,\n                background:\n                  category === \"gamepad\"\n                    ? hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)\n                    : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n                color:\n                  category === \"gamepad\"\n                    ? colors.accentCyan\n                    : colors.textSecondary,\n                fontFamily: FONT_FAMILY.KOREAN,\n                fontSize: isMobile ? \"14px\" : \"16px\",\n                fontWeight: \"bold\",\n                cursor: \"pointer\",\n                transition: \"all 0.2s ease\",\n              }}\n              data-testid=\"gamepad-mode-button\"\n              onMouseEnter={(e) =>\n                handleModeButtonEnter(e, category === \"gamepad\")\n              }\n              onMouseLeave={(e) =>\n                handleModeButtonLeave(e, category === \"gamepad\")\n              }\n            >\n              🎮 게임패드 | Gamepad\n            </button>\n          </div>\n\n          {/* Control Category Tabs */}\n          <div\n            style={{\n              background: colors.headerBg,\n              borderBottom: `2px solid ${colors.borderCyan}`,\n            }}\n          >\n            <ControlCategoryTabs\n              selectedTab={selectedTab}\n              onTabChange={(tab) => {\n                audio.playSFX(\"menu_select\");\n                setSelectedTab(tab);\n              }}\n              isMobile={isMobile}\n            />\n          </div>\n\n          {/* Content Area - Scrollable */}\n          <div\n            style={{\n              flex: 1,\n              overflowY: \"auto\",\n              overflowX: \"hidden\",\n              padding: `${layoutConstants.padding}px`,\n              scrollbarWidth: \"thin\",\n              scrollbarColor: `${colors.accentGold} ${colors.sectionBg}`,\n            }}\n            className=\"korean-scrollbar\"\n            data-testid=\"controls-content\"\n          >\n            {/* Control Bindings Display */}\n            <ControlBindingsOverlayHtml\n              selectedTab={selectedTab}\n              isMobile={isMobile}\n            />\n\n            {/* Legacy Content - Keeping for backward compatibility and additional info */}\n            {/* Trigram Stances Section - Additional context beyond key bindings */}\n            <div\n              style={{\n                marginTop: `${layoutConstants.sectionSpacing}px`,\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${colors.borderGold}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"trigram-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                팔괘 무술 자세 - Eight Trigram Combat Stances\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"11px\" : \"14px\",\n                  color: colors.accentCyan,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                🗡️ 전통 한국 무예의 8가지 핵심 자세 | 8 Core Stances of\n                Traditional Korean Martial Arts 🗡️\n              </p>\n\n              {/* Stance Controls Grid */}\n              <div\n                style={{\n                  display: \"grid\",\n                  gridTemplateColumns: `repeat(${buttonsPerRow}, 1fr)`,\n                  gap: \"15px\",\n                }}\n                data-testid=\"stance-controls-grid\"\n              >\n                {stanceControls.map(([key, value]) => (\n                  <div\n                    key={key}\n                    style={{\n                      background: `linear-gradient(135deg, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_MEDIUM,\n                        0.9,\n                      )}, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_LIGHT,\n                        0.9,\n                      )})`,\n                      borderRadius: \"10px\",\n                      border: `2px solid ${colors.borderGold}`,\n                      padding: \"12px\",\n                      position: \"relative\",\n                      minHeight: `${buttonHeight}px`,\n                    }}\n                    data-testid={`stance-control-${key}`}\n                  >\n                    {/* Key Badge */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        top: \"8px\",\n                        left: \"8px\",\n                        background: colors.accentGold,\n                        borderRadius: \"6px\",\n                        width: \"25px\",\n                        height: \"25px\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        fontSize: isMobile ? \"14px\" : \"16px\",\n                        fontWeight: \"bold\",\n                        color: colors.koreanBlack,\n                      }}\n                    >\n                      {key}\n                    </div>\n\n                    {/* Trigram Symbol */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        top: \"8px\",\n                        right: \"8px\",\n                        fontSize: isMobile ? \"18px\" : \"22px\",\n                        color: colors.accentGold,\n                        fontWeight: \"bold\",\n                      }}\n                    >\n                      {value.symbol}\n                    </div>\n\n                    {/* Stance Name */}\n                    <div style={{ marginTop: \"35px\" }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"12px\" : \"14px\",\n                          fontWeight: \"bold\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {value.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"10px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {value.english}\n                      </div>\n                    </div>\n\n                    {/* Technique */}\n                    <div style={{ marginTop: \"8px\" }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"10px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentCyan,\n                        }}\n                      >\n                        🥋 {value.technique.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"9px\",\n                          color: colors.accentCyan,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {value.technique.english}\n                      </div>\n                    </div>\n\n                    {/* Combat Focus */}\n                    <div style={{ marginTop: \"6px\" }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"9px\",\n                          fontWeight: \"bold\",\n                          color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                            16,\n                          ).padStart(6, \"0\")}`,\n                        }}\n                      >\n                        ⚔️ {value.combatFocus.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"7px\" : \"8px\",\n                          color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                            16,\n                          ).padStart(6, \"0\")}`,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {value.combatFocus.english}\n                      </div>\n                    </div>\n\n                    {/* Combat Effects */}\n                    <div\n                      style={{\n                        marginTop: \"6px\",\n                        fontSize: isMobile ? \"7px\" : \"8px\",\n                        fontWeight: \"bold\",\n                        color: `#${theme.colors.NEGATIVE_RED.toString(\n                          16,\n                        ).padStart(6, \"0\")}`,\n                      }}\n                    >\n                      💥 {value.combatEffects.korean}\n                    </div>\n\n                    {/* Effectiveness Indicator */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        bottom: \"8px\",\n                        right: \"8px\",\n                        fontSize: isMobile ? \"7px\" : \"8px\",\n                        fontWeight: \"bold\",\n                        color: `#${theme.colors.KOREAN_RED.toString(\n                          16,\n                        ).padStart(6, \"0\")}`,\n                      }}\n                    >\n                      급소술\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            {/* Combat Controls Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${colors.borderCyan}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"combat-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentCyan,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                실전 격투 조작 - Combat Actions\n              </h2>\n\n              {/* Combat Controls List */}\n              <div\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"10px\",\n                }}\n                data-testid=\"combat-controls-list\"\n              >\n                {combatControls.map(([key, description]) => (\n                  <div\n                    key={key}\n                    style={{\n                      background: `linear-gradient(90deg, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_LIGHT,\n                        0.9,\n                      )}, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_MEDIUM,\n                        0.9,\n                      )})`,\n                      borderRadius: \"8px\",\n                      border: `1px solid ${colors.borderCyan}`,\n                      padding: \"12px\",\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      gap: \"15px\",\n                    }}\n                    data-testid={`combat-control-${key}`}\n                  >\n                    {/* Key Badge */}\n                    <div\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.ACCENT_CYAN,\n                          0.3,\n                        ),\n                        borderRadius: \"6px\",\n                        padding: \"4px 12px\",\n                        fontSize: isMobile ? \"14px\" : \"16px\",\n                        fontWeight: \"bold\",\n                        color: colors.accentGold,\n                        minWidth: \"60px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      {key}\n                    </div>\n\n                    {/* Description */}\n                    <div style={{ flex: 1 }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"11px\" : \"13px\",\n                          fontWeight: \"bold\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {description.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"11px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {description.english}\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            {/* Movement Controls Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.SECONDARY_MAGENTA,\n                  0.5,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"movement-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                    16,\n                  ).padStart(6, \"0\")}`,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                이동 조작 - Movement Controls\n              </h2>\n\n              {/* Movement Keys */}\n              <div style={{ marginBottom: \"15px\" }}>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"12px\" : \"14px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"10px\",\n                  }}\n                >\n                  WASD 또는 방향키 | WASD or Arrow Keys\n                </div>\n                <div\n                  style={{\n                    display: \"grid\",\n                    gridTemplateColumns: isMobile\n                      ? \"1fr 1fr\"\n                      : \"1fr 1fr 1fr 1fr\",\n                    gap: \"8px\",\n                  }}\n                >\n                  {[\n                    { key: \"W/↑\", korean: \"전진\", english: \"Forward\" },\n                    { key: \"S/↓\", korean: \"후퇴\", english: \"Backward\" },\n                    { key: \"A/←\", korean: \"좌\", english: \"Left\" },\n                    { key: \"D/→\", korean: \"우\", english: \"Right\" },\n                  ].map((move) => (\n                    <div\n                      key={move.key}\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.UI_BACKGROUND_LIGHT,\n                          0.8,\n                        ),\n                        borderRadius: \"6px\",\n                        padding: \"8px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"11px\" : \"13px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentCyan,\n                        }}\n                      >\n                        {move.key}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"9px\",\n                          color: colors.textSecondary,\n                        }}\n                      >\n                        {move.korean} | {move.english}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </div>\n\n            {/* Advanced Footwork Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.PRIMARY_CYAN,\n                  0.5,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"advanced-footwork\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentCyan,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                고급 보법 - Advanced Footwork\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 15px 0\",\n                }}\n              >\n                🥋 전통 한국 무예 발놀림 기법 | Traditional Korean martial arts\n                footwork techniques\n              </p>\n\n              {/* Tactical Steps */}\n              <div style={{ marginBottom: \"20px\" }}>\n                <h3\n                  style={{\n                    fontSize: isMobile ? \"14px\" : \"16px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"10px\",\n                  }}\n                >\n                  ✅ 전술보법 (Shift + WASD) | Tactical Steps - IMPLEMENTED\n                </h3>\n                <p\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: colors.textSecondary,\n                    marginBottom: \"10px\",\n                    fontStyle: \"italic\",\n                  }}\n                >\n                  Precise 30cm repositioning • 300ms duration •\n                  Non-interruptible • 5 stamina cost\n                </p>\n                <div\n                  style={{\n                    display: \"grid\",\n                    gridTemplateColumns: isMobile\n                      ? \"1fr 1fr\"\n                      : \"repeat(4, 1fr)\",\n                    gap: \"8px\",\n                  }}\n                >\n                  {[\n                    {\n                      key: \"Shift+W\",\n                      korean: \"전진보법\",\n                      english: \"Forward Step\",\n                    },\n                    {\n                      key: \"Shift+S\",\n                      korean: \"후퇴보법\",\n                      english: \"Retreat Step\",\n                    },\n                    {\n                      key: \"Shift+A\",\n                      korean: \"좌측면보법\",\n                      english: \"Left Step\",\n                    },\n                    {\n                      key: \"Shift+D\",\n                      korean: \"우측면보법\",\n                      english: \"Right Step\",\n                    },\n                    {\n                      key: \"Shift+W+A\",\n                      korean: \"전좌측보법\",\n                      english: \"Forward-Left\",\n                    },\n                    {\n                      key: \"Shift+W+D\",\n                      korean: \"전우측보법\",\n                      english: \"Forward-Right\",\n                    },\n                    {\n                      key: \"Shift+S+A\",\n                      korean: \"후좌측보법\",\n                      english: \"Back-Left\",\n                    },\n                    {\n                      key: \"Shift+S+D\",\n                      korean: \"후우측보법\",\n                      english: \"Back-Right\",\n                    },\n                  ].map((step) => (\n                    <div\n                      key={step.key}\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.UI_BACKGROUND_LIGHT,\n                          0.8,\n                        ),\n                        borderRadius: \"6px\",\n                        border: `1px solid ${colors.borderCyan}`,\n                        padding: \"8px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"10px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentGold,\n                          marginBottom: \"4px\",\n                        }}\n                      >\n                        {step.key}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"7px\" : \"8px\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {step.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"6px\" : \"7px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {step.english}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n\n              {/* Footwork Patterns */}\n              <div>\n                <h3\n                  style={{\n                    fontSize: isMobile ? \"14px\" : \"16px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"10px\",\n                  }}\n                >\n                  보법 패턴 (Ctrl + WASD) | Footwork Patterns\n                </h3>\n\n                {/* Circular Steps */}\n                <div style={{ marginBottom: \"12px\" }}>\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"11px\" : \"12px\",\n                      fontWeight: \"bold\",\n                      color: colors.textPrimary,\n                      marginBottom: \"6px\",\n                    }}\n                  >\n                    ✅ 원형보 (Wonhyeongbo) | Circular Step - IMPLEMENTED\n                  </div>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textSecondary,\n                      marginBottom: \"8px\",\n                      fontStyle: \"italic\",\n                    }}\n                  >\n                    Lateral movement while maintaining guard • 30cm distance •\n                    300ms\n                  </p>\n                  <div style={{ display: \"flex\", gap: \"8px\" }}>\n                    {[\n                      {\n                        key: \"Ctrl+A\",\n                        korean: \"원형보 좌\",\n                        english: \"Circular Left\",\n                      },\n                      {\n                        key: \"Ctrl+D\",\n                        korean: \"원형보 우\",\n                        english: \"Circular Right\",\n                      },\n                    ].map((move) => (\n                      <div\n                        key={move.key}\n                        style={{\n                          flex: 1,\n                          background: hexToRgbaString(\n                            theme.colors.ACCENT_CYAN,\n                            0.2,\n                          ),\n                          borderRadius: \"6px\",\n                          border: `1px solid ${colors.borderCyan}`,\n                          padding: \"8px\",\n                          textAlign: \"center\",\n                        }}\n                      >\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"10px\" : \"11px\",\n                            fontWeight: \"bold\",\n                            color: colors.accentGold,\n                          }}\n                        >\n                          {move.key}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"8px\" : \"9px\",\n                            color: colors.textPrimary,\n                          }}\n                        >\n                          {move.korean}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"7px\" : \"8px\",\n                            color: colors.textSecondary,\n                            fontStyle: \"italic\",\n                          }}\n                        >\n                          {move.english}\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Slide Steps */}\n                <div style={{ marginBottom: \"12px\" }}>\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"11px\" : \"12px\",\n                      fontWeight: \"bold\",\n                      color: colors.textPrimary,\n                      marginBottom: \"6px\",\n                    }}\n                  >\n                    ✅ 미끄럼보 (Mikkeureombo) | Slide Step - IMPLEMENTED\n                  </div>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textSecondary,\n                      marginBottom: \"8px\",\n                      fontStyle: \"italic\",\n                    }}\n                  >\n                    Both feet move together • 30cm distance • 200ms (faster!)\n                  </p>\n                  <div style={{ display: \"flex\", gap: \"8px\" }}>\n                    {[\n                      {\n                        key: \"Ctrl+W\",\n                        korean: \"미끄럼보 전\",\n                        english: \"Slide Forward\",\n                      },\n                      {\n                        key: \"Ctrl+S\",\n                        korean: \"미끄럼보 후\",\n                        english: \"Slide Back\",\n                      },\n                    ].map((move) => (\n                      <div\n                        key={move.key}\n                        style={{\n                          flex: 1,\n                          background: hexToRgbaString(\n                            theme.colors.ACCENT_CYAN,\n                            0.2,\n                          ),\n                          borderRadius: \"6px\",\n                          border: `1px solid ${colors.borderCyan}`,\n                          padding: \"8px\",\n                          textAlign: \"center\",\n                        }}\n                      >\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"10px\" : \"11px\",\n                            fontWeight: \"bold\",\n                            color: colors.accentGold,\n                          }}\n                        >\n                          {move.key}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"8px\" : \"9px\",\n                            color: colors.textPrimary,\n                          }}\n                        >\n                          {move.korean}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"7px\" : \"8px\",\n                            color: colors.textSecondary,\n                            fontStyle: \"italic\",\n                          }}\n                        >\n                          {move.english}\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Pending Footwork */}\n                <div\n                  style={{\n                    marginTop: \"15px\",\n                    padding: \"10px\",\n                    background: hexToRgbaString(theme.colors.ACCENT_CYAN, 0.2),\n                    borderRadius: \"6px\",\n                    border: `1px solid ${colors.borderCyan}`,\n                  }}\n                >\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"10px\" : \"11px\",\n                      fontWeight: \"bold\",\n                      color: colors.accentGold,\n                      marginBottom: \"6px\",\n                    }}\n                  >\n                    ✅ 추가 보법 (Advanced Patterns) - IMPLEMENTED\n                  </div>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textPrimary,\n                      margin: \"0 0 6px 0\",\n                    }}\n                  >\n                    <strong>축족회전 (Chukjok Hoejeon) | Pivot</strong>:\n                    Shift+Ctrl+A (left) / Shift+Ctrl+D (right) • 90° rotation on\n                    planted foot • 250ms\n                  </p>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textPrimary,\n                      margin: 0,\n                    }}\n                  >\n                    <strong>섞음보 (Seokkeumbo) | Shuffle</strong>: Shift+Ctrl+W\n                    or Shift+Ctrl+S • 15cm micro-adjustment • 100ms\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            {/* Stance Side Switch Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.5,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"stance-side-switch\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                자세 발 바꿈 - Stance Side Switch\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 15px 0\",\n                }}\n              >\n                ✅ 전방 발 전환 | Switch front foot position - IMPLEMENTED\n              </p>\n\n              <div\n                style={{\n                  background: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.2),\n                  borderRadius: \"6px\",\n                  border: `1px solid ${colors.borderGold}`,\n                  padding: \"12px\",\n                  textAlign: \"center\",\n                }}\n              >\n                <div\n                  style={{\n                    fontSize: isMobile ? \"16px\" : \"18px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"8px\",\n                  }}\n                >\n                  H\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"10px\" : \"11px\",\n                    color: colors.textPrimary,\n                    marginBottom: \"4px\",\n                  }}\n                >\n                  발 바꿈 (Bal Bakkum)\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: colors.textSecondary,\n                    fontStyle: \"italic\",\n                  }}\n                >\n                  Switch Front Foot\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"7px\" : \"8px\",\n                    color: colors.textSecondary,\n                    marginTop: \"6px\",\n                    fontStyle: \"italic\",\n                  }}\n                >\n                  Mirrors your stance (left ↔ right) • 400ms duration\n                </div>\n              </div>\n            </div>\n\n            {/* Technique Controls Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.6,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"technique-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                기술 실행 - Technique Execution\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 15px 0\",\n                }}\n              >\n                ⚡ 원형별 고유 기술 (최대 10개) | Archetype-specific techniques\n                (up to 10)\n              </p>\n\n              {/* Technique Keys Grid */}\n              <div\n                style={{\n                  display: \"grid\",\n                  gridTemplateColumns: isMobile\n                    ? \"repeat(5, 1fr)\"\n                    : \"repeat(10, 1fr)\",\n                  gap: isMobile ? \"6px\" : \"8px\",\n                }}\n              >\n                {[\"Q\", \"E\", \"R\", \"T\", \"Y\", \"F\", \"G\", \"Z\", \"X\", \"C\"].map(\n                  (key, index) => (\n                    <div\n                      key={key}\n                      style={{\n                        background: `linear-gradient(135deg, ${hexToRgbaString(\n                          theme.colors.ACCENT_GOLD,\n                          0.3,\n                        )}, ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.1)})`,\n                        borderRadius: \"6px\",\n                        border: `2px solid ${colors.borderGold}`,\n                        padding: isMobile ? \"8px 4px\" : \"10px 6px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"14px\" : \"16px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentGold,\n                        }}\n                      >\n                        {key}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"7px\" : \"8px\",\n                          color: colors.textSecondary,\n                          marginTop: \"2px\",\n                        }}\n                      >\n                        기술 {index + 1}\n                      </div>\n                    </div>\n                  ),\n                )}\n              </div>\n\n              {/* Technique Notes */}\n              <div\n                style={{\n                  marginTop: \"15px\",\n                  padding: \"10px\",\n                  background: hexToRgbaString(\n                    theme.colors.UI_BACKGROUND_DARK,\n                    0.6,\n                  ),\n                  borderRadius: \"6px\",\n                  fontSize: isMobile ? \"9px\" : \"10px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                }}\n              >\n                💡 <strong>Tip</strong>: Keys positioned around WASD for easy\n                access without interfering with movement. Each archetype has\n                unique techniques.\n              </div>\n            </div>\n\n            {/* Special Features Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${colors.borderRed}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"special-features\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: `#${theme.colors.KOREAN_RED.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                특수 기능 - Special Features\n              </h2>\n\n              {/* Special Keys List */}\n              <div\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"10px\",\n                }}\n              >\n                {[\n                  {\n                    key: \"V\",\n                    korean: \"급소 표시 전환\",\n                    english: \"Toggle vital points overlay (70 points)\",\n                  },\n                  {\n                    key: \"B\",\n                    korean: \"방어 자세\",\n                    english: \"Defensive guard position\",\n                  },\n                  {\n                    key: \"F1\",\n                    korean: \"조작법 힌트\",\n                    english: \"Show control hints\",\n                  },\n                  {\n                    key: \"ESC / M\",\n                    korean: \"일시정지 / 메뉴\",\n                    english: \"Pause menu / Return to menu\",\n                  },\n                ].map((special) => (\n                  <div\n                    key={special.key}\n                    style={{\n                      background: hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_LIGHT,\n                        0.8,\n                      ),\n                      borderRadius: \"8px\",\n                      border: `1px solid ${colors.borderRed}`,\n                      padding: \"10px\",\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      gap: \"12px\",\n                    }}\n                  >\n                    <div\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.KOREAN_RED,\n                          0.3,\n                        ),\n                        borderRadius: \"6px\",\n                        padding: \"4px 10px\",\n                        fontSize: isMobile ? \"12px\" : \"14px\",\n                        fontWeight: \"bold\",\n                        color: colors.accentGold,\n                        minWidth: \"50px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      {special.key}\n                    </div>\n                    <div style={{ flex: 1 }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"10px\" : \"12px\",\n                          fontWeight: \"bold\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {special.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"10px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {special.english}\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* Interactive Control Demo - Shows recently pressed keys */}\n          <InteractiveControlDemo\n            pressedKeys={pressedKeys}\n            isMobile={isMobile}\n          />\n\n          {/* Footer */}\n          <div\n            style={{\n              height: `${layoutConstants.footerHeight}px`,\n              background: colors.headerBg,\n              borderTop: `3px solid ${colors.borderRed}`,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              padding: `0 ${layoutConstants.padding}px`,\n            }}\n            data-testid=\"controls-footer\"\n          >\n            {/* Philosophy Text */}\n            <div\n              style={{\n                fontSize: isMobile ? \"10px\" : \"12px\",\n                color: colors.accentGold,\n                fontStyle: \"italic\",\n              }}\n            >\n              🥋 흑괘의 길을 걸어라 | Walk the Path of the Black Trigram 🥋\n            </div>\n\n            {/* Back Button */}\n            <BackButton\n              onClick={handleBackClick}\n              korean=\"무도장 복귀\"\n              english=\"Return to Dojang\"\n              isMobile={isMobile}\n              testId=\"controls-back-button\"\n            />\n\n            {/* Keyboard Hint */}\n            <div\n              style={{\n                background: hexToRgbaString(\n                  theme.colors.UI_BACKGROUND_MEDIUM,\n                  0.9,\n                ),\n                borderRadius: \"6px\",\n                padding: \"8px 12px\",\n                fontSize: isMobile ? \"11px\" : \"12px\",\n                fontWeight: \"bold\",\n                color: `#${theme.colors.SECONDARY_MAGENTA.toString(16).padStart(\n                  6,\n                  \"0\",\n                )}`,\n                border: `1px solid ${colors.borderGold}`,\n              }}\n              data-testid=\"keyboard-shortcuts\"\n            >\n              ESC | M\n            </div>\n          </div>\n\n          {/* Footer Instruction */}\n          <div\n            style={{\n              textAlign: \"center\",\n              padding: \"10px\",\n              fontSize: isMobile ? \"10px\" : \"12px\",\n              color: colors.textSecondary,\n              fontStyle: \"italic\",\n              background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.7),\n            }}\n          >\n            ESC 또는 M 키로 메뉴로 돌아가기 - Press ESC or M to return to menu\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ControlsScreen3D;\n"],"mappings":"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"}
+{"version":3,"file":"ControlsScreen3D.js","names":[],"sources":["../../../../src/components/screens/controls/ControlsScreen3D.tsx"],"sourcesContent":["import { Canvas } from \"@react-three/fiber\";\nimport React, { useCallback, useEffect, useMemo } from \"react\";\nimport { useAudio } from \"../../../audio/AudioProvider\";\nimport { useWebGLContextLossHandler } from \"../../../hooks/useWebGLContextLossHandler\";\nimport { useWindowSize } from \"../../../hooks/useWindowSize\";\nimport { COMBAT_CONTROLS } from \"../../../systems\";\nimport { FONT_FAMILY } from \"@/types/constants\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\nimport { shouldUseMobileControls } from \"../../../utils/deviceDetection\";\nimport { getLayoutConstants } from \"../../../utils/responsiveLayoutHelpers\";\nimport { useKoreanTheme } from \"../../shared/base/useKoreanTheme\";\nimport { BackgroundScene3D } from \"../../shared/three\";\nimport { BackButton } from \"../../shared/ui/BackButton\";\nimport { VolumeControl } from \"../../shared/ui/VolumeControl\";\nimport { ControlBindingsOverlayHtml } from \"./components/ControlBindingsOverlayHtml\";\nimport { ControlCategoryTabs } from \"./components/ControlCategoryTabsOverlayHtml\";\nimport { GamepadVisualization3D } from \"./components/GamepadVisualization3D\";\nimport { InteractiveControlDemo } from \"./components/InteractiveControlDemoOverlayHtml\";\nimport { VisualKeyboard3D } from \"./components/VisualKeyboard3D\";\nimport { useControlsState } from \"./hooks/useControlsState\";\n\nexport interface ControlsScreen3DProps {\n  readonly onReturnToMenu: () => void;\n  readonly width?: number;\n  readonly height?: number;\n}\n\n/**\n * Three.js-based ControlsScreen Component\n */\nexport const ControlsScreen3D: React.FC<ControlsScreen3DProps> = ({\n  onReturnToMenu,\n  width: propWidth,\n  height: propHeight,\n}) => {\n\n  const { pressedKeys, category, selectedTab, setCategory, setSelectedTab } =\n    useControlsState();\n\n  useWebGLContextLossHandler({\n    onContextLost: () => {\n      console.warn(\"⚠️ WebGL context lost in ControlsScreen\");\n    },\n    onContextRestored: () => {\n      console.log(\"✓ WebGL context restored in ControlsScreen\");\n    },\n    autoRestore: true,\n  });\n\n  const audio = useAudio();\n  const { width, height } = useWindowSize();\n\n  const screenWidth = propWidth ?? width;\n  const screenHeight = propHeight ?? height;\n\n  const isMobile = shouldUseMobileControls();\n  const isTablet = useMemo(\n    () => !isMobile && screenWidth >= 768 && screenWidth < 1024,\n    [isMobile, screenWidth],\n  );\n  const isLargeDesktop = useMemo(\n    () => !isMobile && screenWidth >= 1920,\n    [isMobile, screenWidth],\n  ); // 4K/2K displays\n\n  const layoutConstants = useMemo(\n    () => getLayoutConstants(screenWidth),\n    [screenWidth],\n  );\n\n  const theme = useKoreanTheme({\n    variant: \"primary\",\n    size: \"md\",\n    isMobile,\n  });\n\n  const scrollbarStyle = useMemo(\n    () => ({\n      __html: `\n      .korean-scrollbar::-webkit-scrollbar {\n        width: 12px !important;\n        display: block !important;\n      }\n      .korean-scrollbar::-webkit-scrollbar-track {\n        background: ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8)};\n        border-radius: 6px;\n      }\n      .korean-scrollbar::-webkit-scrollbar-thumb {\n        background: ${hexToRgbaString(theme.colors.ACCENT_GOLD, 1)};\n        border-radius: 6px;\n        border: 2px solid ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8)};\n      }\n      .korean-scrollbar::-webkit-scrollbar-thumb:hover {\n        background: ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)};\n      }\n    `,\n    }),\n    [theme],\n  );\n\n  const colors = useMemo(\n    () => ({\n      background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n      headerBg: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n      sectionBg: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n      borderGold: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.6),\n      borderCyan: hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.5),\n      borderRed: hexToRgbaString(theme.colors.KOREAN_RED, 0.8),\n      textPrimary: `#${theme.colors.TEXT_PRIMARY.toString(16).padStart(6, \"0\")}`,\n      textSecondary: `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, \"0\")}`,\n      accentGold: `#${theme.colors.ACCENT_GOLD.toString(16).padStart(6, \"0\")}`,\n      accentCyan: `#${theme.colors.PRIMARY_CYAN.toString(16).padStart(6, \"0\")}`,\n      koreanBlack: `#${theme.colors.KOREAN_BLACK.toString(16).padStart(6, \"0\")}`,\n    }),\n    [theme],\n  );\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" || event.key.toLowerCase() === \"m\") {\n        event.preventDefault();\n        audio.playSFX(\"menu_back\");\n        onReturnToMenu();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown, { passive: false });\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [onReturnToMenu, audio]);\n\n  const handleBackClick = useCallback(() => {\n    audio.playSFX(\"menu_back\");\n    onReturnToMenu();\n  }, [audio, onReturnToMenu]);\n\n  const handleModeButtonEnter = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {\n      if (!isActive) {\n        e.currentTarget.style.background = hexToRgbaString(\n          theme.colors.PRIMARY_CYAN,\n          0.1,\n        );\n        e.currentTarget.style.borderColor = hexToRgbaString(\n          theme.colors.PRIMARY_CYAN,\n          0.8,\n        );\n      }\n    },\n    [theme],\n  );\n\n  const handleModeButtonLeave = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {\n      if (!isActive) {\n        e.currentTarget.style.background = hexToRgbaString(\n          theme.colors.UI_BACKGROUND_DARK,\n          0.8,\n        );\n        e.currentTarget.style.borderColor = hexToRgbaString(\n          theme.colors.ACCENT_GOLD,\n          0.6,\n        );\n      }\n    },\n    [theme],\n  );\n\n  const stanceControls = useMemo(\n    () => Object.entries(COMBAT_CONTROLS.stanceControls),\n    [],\n  );\n\n  const combatControls = useMemo(\n    () => Object.entries(COMBAT_CONTROLS.combat),\n    [],\n  );\n\n  const buttonsPerRow = isMobile ? 2 : isTablet ? 3 : isLargeDesktop ? 5 : 4;\n  const buttonHeight = isMobile\n    ? 120\n    : isTablet\n      ? 130\n      : isLargeDesktop\n        ? 120\n        : 140;\n\n  return (\n    <div\n      style={{\n        width: screenWidth,\n        height: screenHeight,\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n      data-testid=\"controls-screen\"\n    >\n      {/* Volume Control - outside Canvas to maintain AudioProvider context */}\n      <VolumeControl position=\"top-right\" compact={isMobile} />\n\n      {/* Three.js Canvas for 3D background and visualization */}\n      <Canvas\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          zIndex: Z_INDEX.ARENA,\n        }}\n        gl={{\n          antialias: true,\n          alpha: false,\n          powerPreference: \"high-performance\",\n        }}\n        dpr={[1, 2]}\n        camera={{ position: [0, 5, 10], fov: 75 }}\n        onCreated={({ gl }) => {\n          gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 1);\n        }}\n      >\n        {/* 3D Background Scene */}\n        <BackgroundScene3D theme=\"controls\" />\n\n        {/* Conditional 3D Visualization based on category */}\n        {category === \"keyboard\" ? (\n          <VisualKeyboard3D\n            pressedKeys={pressedKeys}\n            selectedTab={selectedTab}\n          />\n        ) : (\n          <GamepadVisualization3D isMobile={isMobile} />\n        )}\n      </Canvas>\n\n      {/* UI Overlay (positioned absolutely over Canvas) - matches CombatScreen pattern */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          pointerEvents: \"none\",\n          zIndex: Z_INDEX.HUD,\n        }}\n        data-testid=\"controls-hud-overlay\"\n      >\n        {/* WebKit Scrollbar Styling - Using !important to override global hide */}\n        <style dangerouslySetInnerHTML={scrollbarStyle} />\n\n        <div\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            color: colors.textPrimary,\n            fontFamily: theme.koreanTypography.fontFamily,\n            lineHeight: theme.koreanTypography.lineHeight,\n            pointerEvents: \"auto\",\n          }}\n        >\n          {/* Header */}\n          <div\n            style={{\n              height: `${layoutConstants.headerHeight}px`,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              background: colors.headerBg,\n              borderBottom: `3px solid ${colors.borderRed}`,\n              padding: `${layoutConstants.padding}px`,\n            }}\n            data-testid=\"controls-header\"\n          >\n            <h1\n              style={{\n                fontSize: isMobile ? \"20px\" : \"24px\",\n                fontWeight: \"bold\",\n                color: colors.accentGold,\n                margin: 0,\n                textShadow: `0 0 10px ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.5,\n                )}`,\n              }}\n            >\n              조작법 안내 - Controls Guide\n            </h1>\n            <p\n              style={{\n                fontSize: isMobile ? \"12px\" : \"16px\",\n                color: colors.accentCyan,\n                margin: \"8px 0 0 0\",\n                fontStyle: \"italic\",\n              }}\n            >\n              ☯ 팔괘 철학과 급소술의 융합 | Eight Trigrams Philosophy & Vital\n              Point Arts ☯\n            </p>\n          </div>\n\n          {/* Mode Toggle (Keyboard/Gamepad) */}\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"center\",\n              gap: isMobile ? \"10px\" : \"15px\",\n              padding: `${layoutConstants.padding}px`,\n              background: colors.headerBg,\n              borderBottom: `2px solid ${colors.borderGold}`,\n            }}\n            data-testid=\"mode-toggle\"\n          >\n            <button\n              onClick={() => {\n                audio.playSFX(\"menu_select\");\n                setCategory(\"keyboard\");\n              }}\n              style={{\n                padding: isMobile ? \"10px 20px\" : \"12px 30px\",\n                borderRadius: \"8px\",\n                border: `2px solid ${category === \"keyboard\" ? colors.accentCyan : colors.borderGold}`,\n                background:\n                  category === \"keyboard\"\n                    ? hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)\n                    : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n                color:\n                  category === \"keyboard\"\n                    ? colors.accentCyan\n                    : colors.textSecondary,\n                fontFamily: FONT_FAMILY.KOREAN,\n                fontSize: isMobile ? \"14px\" : \"16px\",\n                fontWeight: \"bold\",\n                cursor: \"pointer\",\n                transition: \"all 0.2s ease\",\n              }}\n              data-testid=\"keyboard-mode-button\"\n              onMouseEnter={(e) =>\n                handleModeButtonEnter(e, category === \"keyboard\")\n              }\n              onMouseLeave={(e) =>\n                handleModeButtonLeave(e, category === \"keyboard\")\n              }\n            >\n              ⌨️ 키보드 | Keyboard\n            </button>\n            <button\n              onClick={() => {\n                audio.playSFX(\"menu_select\");\n                setCategory(\"gamepad\");\n              }}\n              style={{\n                padding: isMobile ? \"10px 20px\" : \"12px 30px\",\n                borderRadius: \"8px\",\n                border: `2px solid ${category === \"gamepad\" ? colors.accentCyan : colors.borderGold}`,\n                background:\n                  category === \"gamepad\"\n                    ? hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)\n                    : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n                color:\n                  category === \"gamepad\"\n                    ? colors.accentCyan\n                    : colors.textSecondary,\n                fontFamily: FONT_FAMILY.KOREAN,\n                fontSize: isMobile ? \"14px\" : \"16px\",\n                fontWeight: \"bold\",\n                cursor: \"pointer\",\n                transition: \"all 0.2s ease\",\n              }}\n              data-testid=\"gamepad-mode-button\"\n              onMouseEnter={(e) =>\n                handleModeButtonEnter(e, category === \"gamepad\")\n              }\n              onMouseLeave={(e) =>\n                handleModeButtonLeave(e, category === \"gamepad\")\n              }\n            >\n              🎮 게임패드 | Gamepad\n            </button>\n          </div>\n\n          {/* Control Category Tabs */}\n          <div\n            style={{\n              background: colors.headerBg,\n              borderBottom: `2px solid ${colors.borderCyan}`,\n            }}\n          >\n            <ControlCategoryTabs\n              selectedTab={selectedTab}\n              onTabChange={(tab) => {\n                audio.playSFX(\"menu_select\");\n                setSelectedTab(tab);\n              }}\n              isMobile={isMobile}\n            />\n          </div>\n\n          {/* Content Area - Scrollable */}\n          <div\n            style={{\n              flex: 1,\n              overflowY: \"auto\",\n              overflowX: \"hidden\",\n              padding: `${layoutConstants.padding}px`,\n              scrollbarWidth: \"thin\",\n              scrollbarColor: `${colors.accentGold} ${colors.sectionBg}`,\n            }}\n            className=\"korean-scrollbar\"\n            data-testid=\"controls-content\"\n          >\n            {/* Control Bindings Display */}\n            <ControlBindingsOverlayHtml\n              selectedTab={selectedTab}\n              isMobile={isMobile}\n            />\n\n            {/* Legacy Content - Keeping for backward compatibility and additional info */}\n            {/* Trigram Stances Section - Additional context beyond key bindings */}\n            <div\n              style={{\n                marginTop: `${layoutConstants.sectionSpacing}px`,\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${colors.borderGold}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"trigram-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                팔괘 무술 자세 - Eight Trigram Combat Stances\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"11px\" : \"14px\",\n                  color: colors.accentCyan,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                🗡️ 전통 한국 무예의 8가지 핵심 자세 | 8 Core Stances of\n                Traditional Korean Martial Arts 🗡️\n              </p>\n\n              {/* Stance Controls Grid */}\n              <div\n                style={{\n                  display: \"grid\",\n                  gridTemplateColumns: `repeat(${buttonsPerRow}, 1fr)`,\n                  gap: \"15px\",\n                }}\n                data-testid=\"stance-controls-grid\"\n              >\n                {stanceControls.map(([key, value]) => (\n                  <div\n                    key={key}\n                    style={{\n                      background: `linear-gradient(135deg, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_MEDIUM,\n                        0.9,\n                      )}, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_LIGHT,\n                        0.9,\n                      )})`,\n                      borderRadius: \"10px\",\n                      border: `2px solid ${colors.borderGold}`,\n                      padding: \"12px\",\n                      position: \"relative\",\n                      minHeight: `${buttonHeight}px`,\n                    }}\n                    data-testid={`stance-control-${key}`}\n                  >\n                    {/* Key Badge */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        top: \"8px\",\n                        left: \"8px\",\n                        background: colors.accentGold,\n                        borderRadius: \"6px\",\n                        width: \"25px\",\n                        height: \"25px\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        fontSize: isMobile ? \"14px\" : \"16px\",\n                        fontWeight: \"bold\",\n                        color: colors.koreanBlack,\n                      }}\n                    >\n                      {key}\n                    </div>\n\n                    {/* Trigram Symbol */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        top: \"8px\",\n                        right: \"8px\",\n                        fontSize: isMobile ? \"18px\" : \"22px\",\n                        color: colors.accentGold,\n                        fontWeight: \"bold\",\n                      }}\n                    >\n                      {value.symbol}\n                    </div>\n\n                    {/* Stance Name */}\n                    <div style={{ marginTop: \"35px\" }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"12px\" : \"14px\",\n                          fontWeight: \"bold\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {value.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"10px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {value.english}\n                      </div>\n                    </div>\n\n                    {/* Technique */}\n                    <div style={{ marginTop: \"8px\" }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"10px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentCyan,\n                        }}\n                      >\n                        🥋 {value.technique.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"9px\",\n                          color: colors.accentCyan,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {value.technique.english}\n                      </div>\n                    </div>\n\n                    {/* Combat Focus */}\n                    <div style={{ marginTop: \"6px\" }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"9px\",\n                          fontWeight: \"bold\",\n                          color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                            16,\n                          ).padStart(6, \"0\")}`,\n                        }}\n                      >\n                        ⚔️ {value.combatFocus.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"7px\" : \"8px\",\n                          color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                            16,\n                          ).padStart(6, \"0\")}`,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {value.combatFocus.english}\n                      </div>\n                    </div>\n\n                    {/* Combat Effects */}\n                    <div\n                      style={{\n                        marginTop: \"6px\",\n                        fontSize: isMobile ? \"7px\" : \"8px\",\n                        fontWeight: \"bold\",\n                        color: `#${theme.colors.NEGATIVE_RED.toString(\n                          16,\n                        ).padStart(6, \"0\")}`,\n                      }}\n                    >\n                      💥 {value.combatEffects.korean}\n                    </div>\n\n                    {/* Effectiveness Indicator */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        bottom: \"8px\",\n                        right: \"8px\",\n                        fontSize: isMobile ? \"7px\" : \"8px\",\n                        fontWeight: \"bold\",\n                        color: `#${theme.colors.KOREAN_RED.toString(\n                          16,\n                        ).padStart(6, \"0\")}`,\n                      }}\n                    >\n                      급소술\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            {/* Combat Controls Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${colors.borderCyan}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"combat-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentCyan,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                실전 격투 조작 - Combat Actions\n              </h2>\n\n              {/* Combat Controls List */}\n              <div\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"10px\",\n                }}\n                data-testid=\"combat-controls-list\"\n              >\n                {combatControls.map(([key, description]) => (\n                  <div\n                    key={key}\n                    style={{\n                      background: `linear-gradient(90deg, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_LIGHT,\n                        0.9,\n                      )}, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_MEDIUM,\n                        0.9,\n                      )})`,\n                      borderRadius: \"8px\",\n                      border: `1px solid ${colors.borderCyan}`,\n                      padding: \"12px\",\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      gap: \"15px\",\n                    }}\n                    data-testid={`combat-control-${key}`}\n                  >\n                    {/* Key Badge */}\n                    <div\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.ACCENT_CYAN,\n                          0.3,\n                        ),\n                        borderRadius: \"6px\",\n                        padding: \"4px 12px\",\n                        fontSize: isMobile ? \"14px\" : \"16px\",\n                        fontWeight: \"bold\",\n                        color: colors.accentGold,\n                        minWidth: \"60px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      {key}\n                    </div>\n\n                    {/* Description */}\n                    <div style={{ flex: 1 }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"11px\" : \"13px\",\n                          fontWeight: \"bold\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {description.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"11px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {description.english}\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            {/* Movement Controls Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.SECONDARY_MAGENTA,\n                  0.5,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"movement-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                    16,\n                  ).padStart(6, \"0\")}`,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                이동 조작 - Movement Controls\n              </h2>\n\n              {/* Movement Keys */}\n              <div style={{ marginBottom: \"15px\" }}>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"12px\" : \"14px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"10px\",\n                  }}\n                >\n                  WASD 또는 방향키 | WASD or Arrow Keys\n                </div>\n                <div\n                  style={{\n                    display: \"grid\",\n                    gridTemplateColumns: isMobile\n                      ? \"1fr 1fr\"\n                      : \"1fr 1fr 1fr 1fr\",\n                    gap: \"8px\",\n                  }}\n                >\n                  {[\n                    { key: \"W/↑\", korean: \"전진\", english: \"Forward\" },\n                    { key: \"S/↓\", korean: \"후퇴\", english: \"Backward\" },\n                    { key: \"A/←\", korean: \"좌\", english: \"Left\" },\n                    { key: \"D/→\", korean: \"우\", english: \"Right\" },\n                  ].map((move) => (\n                    <div\n                      key={move.key}\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.UI_BACKGROUND_LIGHT,\n                          0.8,\n                        ),\n                        borderRadius: \"6px\",\n                        padding: \"8px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"11px\" : \"13px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentCyan,\n                        }}\n                      >\n                        {move.key}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"9px\",\n                          color: colors.textSecondary,\n                        }}\n                      >\n                        {move.korean} | {move.english}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </div>\n\n            {/* Advanced Footwork Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.PRIMARY_CYAN,\n                  0.5,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"advanced-footwork\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentCyan,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                고급 보법 - Advanced Footwork\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 15px 0\",\n                }}\n              >\n                🥋 전통 한국 무예 발놀림 기법 | Traditional Korean martial arts\n                footwork techniques\n              </p>\n\n              {/* Tactical Steps */}\n              <div style={{ marginBottom: \"20px\" }}>\n                <h3\n                  style={{\n                    fontSize: isMobile ? \"14px\" : \"16px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"10px\",\n                  }}\n                >\n                  ✅ 전술보법 (Shift + WASD) | Tactical Steps - IMPLEMENTED\n                </h3>\n                <p\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: colors.textSecondary,\n                    marginBottom: \"10px\",\n                    fontStyle: \"italic\",\n                  }}\n                >\n                  Precise 30cm repositioning • 300ms duration •\n                  Non-interruptible • 5 stamina cost\n                </p>\n                <div\n                  style={{\n                    display: \"grid\",\n                    gridTemplateColumns: isMobile\n                      ? \"1fr 1fr\"\n                      : \"repeat(4, 1fr)\",\n                    gap: \"8px\",\n                  }}\n                >\n                  {[\n                    {\n                      key: \"Shift+W\",\n                      korean: \"전진보법\",\n                      english: \"Forward Step\",\n                    },\n                    {\n                      key: \"Shift+S\",\n                      korean: \"후퇴보법\",\n                      english: \"Retreat Step\",\n                    },\n                    {\n                      key: \"Shift+A\",\n                      korean: \"좌측면보법\",\n                      english: \"Left Step\",\n                    },\n                    {\n                      key: \"Shift+D\",\n                      korean: \"우측면보법\",\n                      english: \"Right Step\",\n                    },\n                    {\n                      key: \"Shift+W+A\",\n                      korean: \"전좌측보법\",\n                      english: \"Forward-Left\",\n                    },\n                    {\n                      key: \"Shift+W+D\",\n                      korean: \"전우측보법\",\n                      english: \"Forward-Right\",\n                    },\n                    {\n                      key: \"Shift+S+A\",\n                      korean: \"후좌측보법\",\n                      english: \"Back-Left\",\n                    },\n                    {\n                      key: \"Shift+S+D\",\n                      korean: \"후우측보법\",\n                      english: \"Back-Right\",\n                    },\n                  ].map((step) => (\n                    <div\n                      key={step.key}\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.UI_BACKGROUND_LIGHT,\n                          0.8,\n                        ),\n                        borderRadius: \"6px\",\n                        border: `1px solid ${colors.borderCyan}`,\n                        padding: \"8px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"10px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentGold,\n                          marginBottom: \"4px\",\n                        }}\n                      >\n                        {step.key}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"7px\" : \"8px\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {step.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"6px\" : \"7px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {step.english}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n\n              {/* Footwork Patterns */}\n              <div>\n                <h3\n                  style={{\n                    fontSize: isMobile ? \"14px\" : \"16px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"10px\",\n                  }}\n                >\n                  보법 패턴 (Ctrl + WASD) | Footwork Patterns\n                </h3>\n\n                {/* Circular Steps */}\n                <div style={{ marginBottom: \"12px\" }}>\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"11px\" : \"12px\",\n                      fontWeight: \"bold\",\n                      color: colors.textPrimary,\n                      marginBottom: \"6px\",\n                    }}\n                  >\n                    ✅ 원형보 (Wonhyeongbo) | Circular Step - IMPLEMENTED\n                  </div>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textSecondary,\n                      marginBottom: \"8px\",\n                      fontStyle: \"italic\",\n                    }}\n                  >\n                    Lateral movement while maintaining guard • 30cm distance •\n                    300ms\n                  </p>\n                  <div style={{ display: \"flex\", gap: \"8px\" }}>\n                    {[\n                      {\n                        key: \"Ctrl+A\",\n                        korean: \"원형보 좌\",\n                        english: \"Circular Left\",\n                      },\n                      {\n                        key: \"Ctrl+D\",\n                        korean: \"원형보 우\",\n                        english: \"Circular Right\",\n                      },\n                    ].map((move) => (\n                      <div\n                        key={move.key}\n                        style={{\n                          flex: 1,\n                          background: hexToRgbaString(\n                            theme.colors.ACCENT_CYAN,\n                            0.2,\n                          ),\n                          borderRadius: \"6px\",\n                          border: `1px solid ${colors.borderCyan}`,\n                          padding: \"8px\",\n                          textAlign: \"center\",\n                        }}\n                      >\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"10px\" : \"11px\",\n                            fontWeight: \"bold\",\n                            color: colors.accentGold,\n                          }}\n                        >\n                          {move.key}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"8px\" : \"9px\",\n                            color: colors.textPrimary,\n                          }}\n                        >\n                          {move.korean}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"7px\" : \"8px\",\n                            color: colors.textSecondary,\n                            fontStyle: \"italic\",\n                          }}\n                        >\n                          {move.english}\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Slide Steps */}\n                <div style={{ marginBottom: \"12px\" }}>\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"11px\" : \"12px\",\n                      fontWeight: \"bold\",\n                      color: colors.textPrimary,\n                      marginBottom: \"6px\",\n                    }}\n                  >\n                    ✅ 미끄럼보 (Mikkeureombo) | Slide Step - IMPLEMENTED\n                  </div>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textSecondary,\n                      marginBottom: \"8px\",\n                      fontStyle: \"italic\",\n                    }}\n                  >\n                    Both feet move together • 30cm distance • 200ms (faster!)\n                  </p>\n                  <div style={{ display: \"flex\", gap: \"8px\" }}>\n                    {[\n                      {\n                        key: \"Ctrl+W\",\n                        korean: \"미끄럼보 전\",\n                        english: \"Slide Forward\",\n                      },\n                      {\n                        key: \"Ctrl+S\",\n                        korean: \"미끄럼보 후\",\n                        english: \"Slide Back\",\n                      },\n                    ].map((move) => (\n                      <div\n                        key={move.key}\n                        style={{\n                          flex: 1,\n                          background: hexToRgbaString(\n                            theme.colors.ACCENT_CYAN,\n                            0.2,\n                          ),\n                          borderRadius: \"6px\",\n                          border: `1px solid ${colors.borderCyan}`,\n                          padding: \"8px\",\n                          textAlign: \"center\",\n                        }}\n                      >\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"10px\" : \"11px\",\n                            fontWeight: \"bold\",\n                            color: colors.accentGold,\n                          }}\n                        >\n                          {move.key}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"8px\" : \"9px\",\n                            color: colors.textPrimary,\n                          }}\n                        >\n                          {move.korean}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"7px\" : \"8px\",\n                            color: colors.textSecondary,\n                            fontStyle: \"italic\",\n                          }}\n                        >\n                          {move.english}\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Pending Footwork */}\n                <div\n                  style={{\n                    marginTop: \"15px\",\n                    padding: \"10px\",\n                    background: hexToRgbaString(theme.colors.ACCENT_CYAN, 0.2),\n                    borderRadius: \"6px\",\n                    border: `1px solid ${colors.borderCyan}`,\n                  }}\n                >\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"10px\" : \"11px\",\n                      fontWeight: \"bold\",\n                      color: colors.accentGold,\n                      marginBottom: \"6px\",\n                    }}\n                  >\n                    ✅ 추가 보법 (Advanced Patterns) - IMPLEMENTED\n                  </div>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textPrimary,\n                      margin: \"0 0 6px 0\",\n                    }}\n                  >\n                    <strong>축족회전 (Chukjok Hoejeon) | Pivot</strong>:\n                    Shift+Ctrl+A (left) / Shift+Ctrl+D (right) • 90° rotation on\n                    planted foot • 250ms\n                  </p>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textPrimary,\n                      margin: 0,\n                    }}\n                  >\n                    <strong>섞음보 (Seokkeumbo) | Shuffle</strong>: Shift+Ctrl+W\n                    or Shift+Ctrl+S • 15cm micro-adjustment • 100ms\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            {/* Stance Side Switch Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.5,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"stance-side-switch\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                자세 발 바꿈 - Stance Side Switch\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 15px 0\",\n                }}\n              >\n                ✅ 전방 발 전환 | Switch front foot position - IMPLEMENTED\n              </p>\n\n              <div\n                style={{\n                  background: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.2),\n                  borderRadius: \"6px\",\n                  border: `1px solid ${colors.borderGold}`,\n                  padding: \"12px\",\n                  textAlign: \"center\",\n                }}\n              >\n                <div\n                  style={{\n                    fontSize: isMobile ? \"16px\" : \"18px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"8px\",\n                  }}\n                >\n                  H\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"10px\" : \"11px\",\n                    color: colors.textPrimary,\n                    marginBottom: \"4px\",\n                  }}\n                >\n                  발 바꿈 (Bal Bakkum)\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: colors.textSecondary,\n                    fontStyle: \"italic\",\n                  }}\n                >\n                  Switch Front Foot\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"7px\" : \"8px\",\n                    color: colors.textSecondary,\n                    marginTop: \"6px\",\n                    fontStyle: \"italic\",\n                  }}\n                >\n                  Mirrors your stance (left ↔ right) • 400ms duration\n                </div>\n              </div>\n            </div>\n\n            {/* Technique Controls Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.6,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"technique-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                기술 실행 - Technique Execution\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 15px 0\",\n                }}\n              >\n                ⚡ 원형별 고유 기술 (최대 10개) | Archetype-specific techniques\n                (up to 10)\n              </p>\n\n              {/* Technique Keys Grid */}\n              <div\n                style={{\n                  display: \"grid\",\n                  gridTemplateColumns: isMobile\n                    ? \"repeat(5, 1fr)\"\n                    : \"repeat(10, 1fr)\",\n                  gap: isMobile ? \"6px\" : \"8px\",\n                }}\n              >\n                {[\"Q\", \"E\", \"R\", \"T\", \"Y\", \"F\", \"G\", \"Z\", \"X\", \"C\"].map(\n                  (key, index) => (\n                    <div\n                      key={key}\n                      style={{\n                        background: `linear-gradient(135deg, ${hexToRgbaString(\n                          theme.colors.ACCENT_GOLD,\n                          0.3,\n                        )}, ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.1)})`,\n                        borderRadius: \"6px\",\n                        border: `2px solid ${colors.borderGold}`,\n                        padding: isMobile ? \"8px 4px\" : \"10px 6px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"14px\" : \"16px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentGold,\n                        }}\n                      >\n                        {key}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"7px\" : \"8px\",\n                          color: colors.textSecondary,\n                          marginTop: \"2px\",\n                        }}\n                      >\n                        기술 {index + 1}\n                      </div>\n                    </div>\n                  ),\n                )}\n              </div>\n\n              {/* Technique Notes */}\n              <div\n                style={{\n                  marginTop: \"15px\",\n                  padding: \"10px\",\n                  background: hexToRgbaString(\n                    theme.colors.UI_BACKGROUND_DARK,\n                    0.6,\n                  ),\n                  borderRadius: \"6px\",\n                  fontSize: isMobile ? \"9px\" : \"10px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                }}\n              >\n                💡 <strong>Tip</strong>: Keys positioned around WASD for easy\n                access without interfering with movement. Each archetype has\n                unique techniques.\n              </div>\n            </div>\n\n            {/* Special Features Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${colors.borderRed}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"special-features\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: `#${theme.colors.KOREAN_RED.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                특수 기능 - Special Features\n              </h2>\n\n              {/* Special Keys List */}\n              <div\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"10px\",\n                }}\n              >\n                {[\n                  {\n                    key: \"V\",\n                    korean: \"급소 표시 전환\",\n                    english: \"Toggle vital points overlay (70 points)\",\n                  },\n                  {\n                    key: \"B\",\n                    korean: \"방어 자세\",\n                    english: \"Defensive guard position\",\n                  },\n                  {\n                    key: \"F1\",\n                    korean: \"조작법 힌트\",\n                    english: \"Show control hints\",\n                  },\n                  {\n                    key: \"ESC / M\",\n                    korean: \"일시정지 / 메뉴\",\n                    english: \"Pause menu / Return to menu\",\n                  },\n                ].map((special) => (\n                  <div\n                    key={special.key}\n                    style={{\n                      background: hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_LIGHT,\n                        0.8,\n                      ),\n                      borderRadius: \"8px\",\n                      border: `1px solid ${colors.borderRed}`,\n                      padding: \"10px\",\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      gap: \"12px\",\n                    }}\n                  >\n                    <div\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.KOREAN_RED,\n                          0.3,\n                        ),\n                        borderRadius: \"6px\",\n                        padding: \"4px 10px\",\n                        fontSize: isMobile ? \"12px\" : \"14px\",\n                        fontWeight: \"bold\",\n                        color: colors.accentGold,\n                        minWidth: \"50px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      {special.key}\n                    </div>\n                    <div style={{ flex: 1 }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"10px\" : \"12px\",\n                          fontWeight: \"bold\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {special.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"10px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {special.english}\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* Interactive Control Demo - Shows recently pressed keys */}\n          <InteractiveControlDemo\n            pressedKeys={pressedKeys}\n            isMobile={isMobile}\n          />\n\n          {/* Footer */}\n          <div\n            style={{\n              height: `${layoutConstants.footerHeight}px`,\n              background: colors.headerBg,\n              borderTop: `3px solid ${colors.borderRed}`,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              padding: `0 ${layoutConstants.padding}px`,\n            }}\n            data-testid=\"controls-footer\"\n          >\n            {/* Philosophy Text */}\n            <div\n              style={{\n                fontSize: isMobile ? \"10px\" : \"12px\",\n                color: colors.accentGold,\n                fontStyle: \"italic\",\n              }}\n            >\n              🥋 흑괘의 길을 걸어라 | Walk the Path of the Black Trigram 🥋\n            </div>\n\n            {/* Back Button */}\n            <BackButton\n              onClick={handleBackClick}\n              korean=\"무도장 복귀\"\n              english=\"Return to Dojang\"\n              isMobile={isMobile}\n              testId=\"controls-back-button\"\n            />\n\n            {/* Keyboard Hint */}\n            <div\n              style={{\n                background: hexToRgbaString(\n                  theme.colors.UI_BACKGROUND_MEDIUM,\n                  0.9,\n                ),\n                borderRadius: \"6px\",\n                padding: \"8px 12px\",\n                fontSize: isMobile ? \"11px\" : \"12px\",\n                fontWeight: \"bold\",\n                color: `#${theme.colors.SECONDARY_MAGENTA.toString(16).padStart(\n                  6,\n                  \"0\",\n                )}`,\n                border: `1px solid ${colors.borderGold}`,\n              }}\n              data-testid=\"keyboard-shortcuts\"\n            >\n              ESC | M\n            </div>\n          </div>\n\n          {/* Footer Instruction */}\n          <div\n            style={{\n              textAlign: \"center\",\n              padding: \"10px\",\n              fontSize: isMobile ? \"10px\" : \"12px\",\n              color: colors.textSecondary,\n              fontStyle: \"italic\",\n              background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.7),\n            }}\n          >\n            ESC 또는 M 키로 메뉴로 돌아가기 - Press ESC or M to return to menu\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ControlsScreen3D;\n"],"mappings":"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"}

package/lib/components/screens/controls/components/ControlBindingsOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlBindingsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/ControlBindingsOverlayHtml.tsx"],"sourcesContent":["/**\n * ControlBindingsOverlayHtml - Display control bindings filtered by selected category\n * \n * Shows key bindings in a clean, organized list with Korean-English bilingual labels.\n * Uses responsive grid/list layout based on device type.\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useMemo } from \"react\";\nimport { FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport {\n  filterKeysByCategory,\n  getKeyCategoryColor,\n  KEYBOARD_LAYOUT,\n  type KeyData,\n} from \"../constants/ControlsConstants\";\n\n/**\n * Props for ControlBindingsOverlayHtml component\n */\nexport interface ControlBindingsOverlayHtmlProps {\n  /** Selected control category to filter and display */\n  readonly selectedTab: 'combat' | 'movement' | 'system';\n  /** Whether on mobile device (list layout vs grid) */\n  readonly isMobile: boolean;\n}\n\n/**\n * ControlBindingsOverlayHtml Component\n * \n * Displays control bindings filtered by selected category.\n * Uses grid layout on desktop and list layout on mobile.\n * \n * @example\n * ```tsx\n * <ControlBindingsOverlayHtml\n *   selectedTab=\"combat\"\n *   isMobile={false}\n * />\n * ```\n */\nexport const ControlBindingsOverlayHtml: React.FC<ControlBindingsOverlayHtmlProps> = ({\n  selectedTab,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n\n  const filteredKeys = useMemo<readonly KeyData[]>(() => {\n    return filterKeysByCategory(KEYBOARD_LAYOUT, selectedTab);\n  }, [selectedTab]);\n\n  const containerStyle = useMemo(() => ({\n    display: 'grid',\n    gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fill, minmax(280px, 1fr))',\n    gap: isMobile ? '12px' : '16px',\n    padding: isMobile ? '15px' : '20px',\n    maxHeight: isMobile ? '60vh' : '70vh',\n    overflowY: 'auto' as const,\n    overflowX: 'hidden' as const,\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n    borderRadius: '12px',\n    border: `2px solid ${hexToRgbaString(theme.colors.UI_BORDER, 0.6)}`,\n    boxShadow: `0 4px 15px ${hexToRgbaString(theme.colors.BLACK_SOLID, 0.5)}`,\n  }), [isMobile, theme]);\n\n  const getBindingCardStyle = (keyData: KeyData) => ({\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: '8px',\n    padding: isMobile ? '12px' : '14px',\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.8),\n    border: `2px solid ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.6)}`,\n    borderRadius: '8px',\n    transition: 'all 0.2s ease',\n    cursor: 'default',\n  });\n\n  const keyLabelStyle = (keyData: KeyData) => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '16px' : '18px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(getKeyCategoryColor(keyData.category)),\n    textShadow: `0 0 10px ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.5)}`,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  });\n\n  const koreanLabelStyle = {\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '13px' : '14px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(theme.colors.ACCENT_GOLD),\n  };\n\n  const descriptionStyle = {\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '11px' : '12px',\n    color: hexToRgbaString(theme.colors.TEXT_SECONDARY),\n    lineHeight: 1.4,\n  };\n\n  return (\n    <div style={containerStyle} data-testid=\"control-bindings\">\n      {filteredKeys.map((keyData) => (\n        <div\n          key={keyData.code}\n          style={getBindingCardStyle(keyData)}\n          data-testid={`binding-${keyData.code}`}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 1);\n            e.currentTarget.style.borderColor = hexToRgbaString(getKeyCategoryColor(keyData.category), 1);\n            e.currentTarget.style.transform = 'translateY(-2px)';\n            e.currentTarget.style.boxShadow = `0 4px 15px ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.4)}`;\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.8);\n            e.currentTarget.style.borderColor = hexToRgbaString(getKeyCategoryColor(keyData.category), 0.6);\n            e.currentTarget.style.transform = 'translateY(0)';\n            e.currentTarget.style.boxShadow = 'none';\n          }}\n        >\n          {/* Key label */}\n          <div style={keyLabelStyle(keyData)}>\n            <span style={{ \n              padding: '4px 8px', \n              background: hexToRgbaString(getKeyCategoryColor(keyData.category), 0.2),\n              borderRadius: '4px',\n              minWidth: isMobile ? '40px' : '50px',\n              textAlign: 'center' as const,\n            }}>\n              {keyData.label}\n            </span>\n            {keyData.labelKorean && (\n              <span style={koreanLabelStyle}>\n                {keyData.labelKorean}\n              </span>\n            )}\n          </div>\n\n          {/* Description (Korean | English) */}\n          {keyData.description && keyData.descriptionKorean && (\n            <div style={descriptionStyle}>\n              {keyData.descriptionKorean} | {keyData.description}\n            </div>\n          )}\n\n          {/* Category badge */}\n          <div style={{\n            fontSize: isMobile ? '9px' : '10px',\n            color: hexToRgbaString(theme.colors.TEXT_TERTIARY),\n            textTransform: 'uppercase' as const,\n            letterSpacing: '0.5px',\n          }}>\n            {keyData.category}\n          </div>\n        </div>\n      ))}\n\n      {filteredKeys.length === 0 && (\n        <div style={{\n          gridColumn: '1 / -1',\n          textAlign: 'center' as const,\n          padding: '40px 20px',\n          fontFamily: FONT_FAMILY.KOREAN,\n          fontSize: isMobile ? '14px' : '16px',\n          color: hexToRgbaString(theme.colors.TEXT_SECONDARY),\n        }}>\n          선택한 카테고리에 컨트롤이 없습니다 | No controls in selected category\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ControlBindingsOverlayHtml;\n"],"mappings":"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"}
+{"version":3,"file":"ControlBindingsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/ControlBindingsOverlayHtml.tsx"],"sourcesContent":["/**\n * ControlBindingsOverlayHtml - Display control bindings filtered by selected category\n * \n * Shows key bindings in a clean, organized list with Korean-English bilingual labels.\n * Uses responsive grid/list layout based on device type.\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useMemo } from \"react\";\nimport { FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport {\n  filterKeysByCategory,\n  getKeyCategoryColor,\n  KEYBOARD_LAYOUT,\n  type KeyData,\n} from \"../constants/ControlsConstants\";\n\n/**\n * Props for ControlBindingsOverlayHtml component\n */\nexport interface ControlBindingsOverlayHtmlProps {\n  /** Selected control category to filter and display */\n  readonly selectedTab: 'combat' | 'movement' | 'system';\n  /** Whether on mobile device (list layout vs grid) */\n  readonly isMobile: boolean;\n}\n\n/**\n * ControlBindingsOverlayHtml Component\n * \n * Displays control bindings filtered by selected category.\n * Uses grid layout on desktop and list layout on mobile.\n * \n * @example\n * ```tsx\n * <ControlBindingsOverlayHtml\n *   selectedTab=\"combat\"\n *   isMobile={false}\n * />\n * ```\n */\nexport const ControlBindingsOverlayHtml: React.FC<ControlBindingsOverlayHtmlProps> = ({\n  selectedTab,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n\n  const filteredKeys = useMemo<readonly KeyData[]>(() => {\n    return filterKeysByCategory(KEYBOARD_LAYOUT, selectedTab);\n  }, [selectedTab]);\n\n  const containerStyle = useMemo(() => ({\n    display: 'grid',\n    gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fill, minmax(280px, 1fr))',\n    gap: isMobile ? '12px' : '16px',\n    padding: isMobile ? '15px' : '20px',\n    maxHeight: isMobile ? '60vh' : '70vh',\n    overflowY: 'auto' as const,\n    overflowX: 'hidden' as const,\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n    borderRadius: '12px',\n    border: `2px solid ${hexToRgbaString(theme.colors.UI_BORDER, 0.6)}`,\n    boxShadow: `0 4px 15px ${hexToRgbaString(theme.colors.BLACK_SOLID, 0.5)}`,\n  }), [isMobile, theme]);\n\n  const getBindingCardStyle = (keyData: KeyData) => ({\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: '8px',\n    padding: isMobile ? '12px' : '14px',\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.8),\n    border: `2px solid ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.6)}`,\n    borderRadius: '8px',\n    transition: 'all 0.2s ease',\n    cursor: 'default',\n  });\n\n  const keyLabelStyle = (keyData: KeyData) => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '16px' : '18px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(getKeyCategoryColor(keyData.category)),\n    textShadow: `0 0 10px ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.5)}`,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  });\n\n  const koreanLabelStyle = {\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '13px' : '14px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(theme.colors.ACCENT_GOLD),\n  };\n\n  const descriptionStyle = {\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '11px' : '12px',\n    color: hexToRgbaString(theme.colors.TEXT_SECONDARY),\n    lineHeight: 1.4,\n  };\n\n  return (\n    <div style={containerStyle} data-testid=\"control-bindings\">\n      {filteredKeys.map((keyData) => (\n        <div\n          key={keyData.code}\n          style={getBindingCardStyle(keyData)}\n          data-testid={`binding-${keyData.code}`}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 1);\n            e.currentTarget.style.borderColor = hexToRgbaString(getKeyCategoryColor(keyData.category), 1);\n            e.currentTarget.style.transform = 'translateY(-2px)';\n            e.currentTarget.style.boxShadow = `0 4px 15px ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.4)}`;\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.8);\n            e.currentTarget.style.borderColor = hexToRgbaString(getKeyCategoryColor(keyData.category), 0.6);\n            e.currentTarget.style.transform = 'translateY(0)';\n            e.currentTarget.style.boxShadow = 'none';\n          }}\n        >\n          {/* Key label */}\n          <div style={keyLabelStyle(keyData)}>\n            <span style={{ \n              padding: '4px 8px', \n              background: hexToRgbaString(getKeyCategoryColor(keyData.category), 0.2),\n              borderRadius: '4px',\n              minWidth: isMobile ? '40px' : '50px',\n              textAlign: 'center' as const,\n            }}>\n              {keyData.label}\n            </span>\n            {keyData.labelKorean && (\n              <span style={koreanLabelStyle}>\n                {keyData.labelKorean}\n              </span>\n            )}\n          </div>\n\n          {/* Description (Korean | English) */}\n          {keyData.description && keyData.descriptionKorean && (\n            <div style={descriptionStyle}>\n              {keyData.descriptionKorean} | {keyData.description}\n            </div>\n          )}\n\n          {/* Category badge */}\n          <div style={{\n            fontSize: isMobile ? '9px' : '10px',\n            color: hexToRgbaString(theme.colors.TEXT_TERTIARY),\n            textTransform: 'uppercase' as const,\n            letterSpacing: '0.5px',\n          }}>\n            {keyData.category}\n          </div>\n        </div>\n      ))}\n\n      {filteredKeys.length === 0 && (\n        <div style={{\n          gridColumn: '1 / -1',\n          textAlign: 'center' as const,\n          padding: '40px 20px',\n          fontFamily: FONT_FAMILY.KOREAN,\n          fontSize: isMobile ? '14px' : '16px',\n          color: hexToRgbaString(theme.colors.TEXT_SECONDARY),\n        }}>\n          선택한 카테고리에 컨트롤이 없습니다 | No controls in selected category\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ControlBindingsOverlayHtml;\n"],"mappings":"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"}

package/lib/components/screens/controls/components/ControlCategoryTabsOverlayHtml.js

@@ -60,13 +60,14 @@ var ControlCategoryTabs = ({ selectedTab, onTabChange, isMobile }) => {
 		"data-testid": "control-category-tabs",
 		children: CONTROL_CATEGORIES.map((category) => {
 			const isSelected = selectedTab === category.id;
+			const buttonStyle = {
+				...buttonBaseStyle,
+				background: isSelected ? hexToRgbaString(category.color, .3) : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8),
+				borderColor: isSelected ? hexToRgbaString(category.color, 1) : hexToRgbaString(theme.colors.UI_BORDER, .6),
+				color: isSelected ? `#${category.color.toString(16).padStart(6, "0")}` : `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, "0")}`
+			};
 			return /* @__PURE__ */ jsxs("button", {
-				style: {
-					...buttonBaseStyle,
-					background: isSelected ? hexToRgbaString(category.color, .3) : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8),
-					borderColor: isSelected ? hexToRgbaString(category.color, 1) : hexToRgbaString(theme.colors.UI_BORDER, .6),
-					color: isSelected ? `#${category.color.toString(16).padStart(6, "0")}` : `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, "0")}`
-				},
+				style: buttonStyle,
 				onClick: () => onTabChange(category.id),
 				"data-testid": `tab-${category.id}`,
 				onMouseEnter: (e) => {

package/lib/components/screens/controls/components/ControlCategoryTabsOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlCategoryTabsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/ControlCategoryTabsOverlayHtml.tsx"],"sourcesContent":["/**\n * ControlCategoryTabs - Tab navigation for control categories\n * \n * Allows switching between Combat, Movement, and System control views\n * Uses BaseButtonOverlayHtml for consistent styling\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useMemo } from \"react\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport { CONTROL_CATEGORIES } from \"../constants/ControlsConstants\";\n\nexport interface ControlCategoryTabsProps {\n  readonly selectedTab: 'combat' | 'movement' | 'system';\n  readonly onTabChange: (tab: 'combat' | 'movement' | 'system') => void;\n  readonly isMobile: boolean;\n}\n\n/**\n * ControlCategoryTabs Component\n * \n * Displays tabs for switching between control categories.\n * Uses Korean theming and responsive sizing.\n * \n * @example\n * ```tsx\n * <ControlCategoryTabs\n *   selectedTab=\"combat\"\n *   onTabChange={(tab) => setSelectedTab(tab)}\n *   isMobile={false}\n * />\n * ```\n */\nexport const ControlCategoryTabs: React.FC<ControlCategoryTabsProps> = ({\n  selectedTab,\n  onTabChange,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n\n  const tabStyle = useMemo(() => ({\n    display: 'flex',\n    flexDirection: 'row' as const,\n    gap: isMobile ? '8px' : '12px',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: isMobile ? '10px' : '15px',\n    flexWrap: 'wrap' as const,\n  }), [isMobile]);\n\n  const buttonBaseStyle = useMemo(() => ({\n    padding: isMobile ? '8px 16px' : '12px 24px',\n    borderRadius: '8px',\n    border: `2px solid ${hexToRgbaString(theme.colors.UI_BORDER, 0.6)}`,\n    cursor: 'pointer',\n    transition: 'all 0.2s ease',\n    fontFamily: 'inherit',\n    fontSize: isMobile ? '14px' : '16px',\n    fontWeight: 'bold' as const,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  }), [isMobile, theme]);\n\n  return (\n    <div style={tabStyle} data-testid=\"control-category-tabs\">\n      {CONTROL_CATEGORIES.map((category) => {\n        const isSelected = selectedTab === category.id;\n        \n        const buttonStyle = {\n          ...buttonBaseStyle,\n          background: isSelected\n            ? hexToRgbaString(category.color, 0.3)\n            : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n          borderColor: isSelected\n            ? hexToRgbaString(category.color, 1)\n            : hexToRgbaString(theme.colors.UI_BORDER, 0.6),\n          color: isSelected\n            ? `#${category.color.toString(16).padStart(6, '0')}`\n            : `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, '0')}`,\n        };\n\n        return (\n          <button\n            key={category.id}\n            style={buttonStyle}\n            onClick={() => onTabChange(category.id as 'combat' | 'movement' | 'system')}\n            data-testid={`tab-${category.id}`}\n            onMouseEnter={(e) => {\n              if (!isSelected) {\n                e.currentTarget.style.background = hexToRgbaString(category.color, 0.1);\n                e.currentTarget.style.borderColor = hexToRgbaString(category.color, 0.8);\n              }\n            }}\n            onMouseLeave={(e) => {\n              if (!isSelected) {\n                e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8);\n                e.currentTarget.style.borderColor = hexToRgbaString(theme.colors.UI_BORDER, 0.6);\n              }\n            }}\n          >\n            <span role=\"img\" aria-label={category.english}>{category.icon}</span>\n            <span>{category.korean} | {category.english}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAa,uBAA2D,EACtE,aACA,aACA,eACI;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;CAAS,CAAC;CAEzE,MAAM,WAAW,eAAe;EAC9B,SAAS;EACT,eAAe;EACf,KAAK,WAAW,QAAQ;EACxB,gBAAgB;EAChB,YAAY;EACZ,SAAS,WAAW,SAAS;EAC7B,UAAU;CACZ,IAAI,CAAC,QAAQ,CAAC;CAEd,MAAM,kBAAkB,eAAe;EACrC,SAAS,WAAW,aAAa;EACjC,cAAc;EACd,QAAQ,aAAa,gBAAgB,MAAM,OAAO,WAAW,EAAG;EAChE,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,UAAU,WAAW,SAAS;EAC9B,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,KAAK;CACP,IAAI,CAAC,UAAU,KAAK,CAAC;CAErB,OACE,oBAAC,OAAD;EAAK,OAAO;EAAU,eAAY;YAC/B,mBAAmB,KAAK,aAAa;GACpC,MAAM,aAAa,gBAAgB,SAAS;GAe5C,OACE,qBAAC,UAAD;IAEE,OAAO;KAfT,GAAG;KACH,YAAY,aACR,gBAAgB,SAAS,OAAO,EAAG,IACnC,gBAAgB,MAAM,OAAO,oBAAoB,EAAG;KACxD,aAAa,aACT,gBAAgB,SAAS,OAAO,CAAC,IACjC,gBAAgB,MAAM,OAAO,WAAW,EAAG;KAC/C,OAAO,aACH,IAAI,SAAS,MAAM,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,MAC/C,IAAI,MAAM,OAAO,eAAe,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG;IAMvD;IACP,eAAe,YAAY,SAAS,EAAsC;IAC1E,eAAa,OAAO,SAAS;IAC7B,eAAe,MAAM;KACnB,IAAI,CAAC,YAAY;MACf,EAAE,cAAc,MAAM,aAAa,gBAAgB,SAAS,OAAO,EAAG;MACtE,EAAE,cAAc,MAAM,cAAc,gBAAgB,SAAS,OAAO,EAAG;KACzE;IACF;IACA,eAAe,MAAM;KACnB,IAAI,CAAC,YAAY;MACf,EAAE,cAAc,MAAM,aAAa,gBAAgB,MAAM,OAAO,oBAAoB,EAAG;MACvF,EAAE,cAAc,MAAM,cAAc,gBAAgB,MAAM,OAAO,WAAW,EAAG;KACjF;IACF;cAhBF,CAkBE,oBAAC,QAAD;KAAM,MAAK;KAAM,cAAY,SAAS;eAAU,SAAS;IAAW,CAAA,GACpE,qBAAC,QAAD,EAAA,UAAA;KAAO,SAAS;KAAO;KAAI,SAAS;IAAc,EAAA,CAAA,CAC5C;MAnBD,SAAS,EAmBR;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"ControlCategoryTabsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/ControlCategoryTabsOverlayHtml.tsx"],"sourcesContent":["/**\n * ControlCategoryTabs - Tab navigation for control categories\n * \n * Allows switching between Combat, Movement, and System control views\n * Uses BaseButtonOverlayHtml for consistent styling\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useMemo } from \"react\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport { CONTROL_CATEGORIES } from \"../constants/ControlsConstants\";\n\nexport interface ControlCategoryTabsProps {\n  readonly selectedTab: 'combat' | 'movement' | 'system';\n  readonly onTabChange: (tab: 'combat' | 'movement' | 'system') => void;\n  readonly isMobile: boolean;\n}\n\n/**\n * ControlCategoryTabs Component\n * \n * Displays tabs for switching between control categories.\n * Uses Korean theming and responsive sizing.\n * \n * @example\n * ```tsx\n * <ControlCategoryTabs\n *   selectedTab=\"combat\"\n *   onTabChange={(tab) => setSelectedTab(tab)}\n *   isMobile={false}\n * />\n * ```\n */\nexport const ControlCategoryTabs: React.FC<ControlCategoryTabsProps> = ({\n  selectedTab,\n  onTabChange,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n\n  const tabStyle = useMemo(() => ({\n    display: 'flex',\n    flexDirection: 'row' as const,\n    gap: isMobile ? '8px' : '12px',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: isMobile ? '10px' : '15px',\n    flexWrap: 'wrap' as const,\n  }), [isMobile]);\n\n  const buttonBaseStyle = useMemo(() => ({\n    padding: isMobile ? '8px 16px' : '12px 24px',\n    borderRadius: '8px',\n    border: `2px solid ${hexToRgbaString(theme.colors.UI_BORDER, 0.6)}`,\n    cursor: 'pointer',\n    transition: 'all 0.2s ease',\n    fontFamily: 'inherit',\n    fontSize: isMobile ? '14px' : '16px',\n    fontWeight: 'bold' as const,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  }), [isMobile, theme]);\n\n  return (\n    <div style={tabStyle} data-testid=\"control-category-tabs\">\n      {CONTROL_CATEGORIES.map((category) => {\n        const isSelected = selectedTab === category.id;\n        \n        const buttonStyle = {\n          ...buttonBaseStyle,\n          background: isSelected\n            ? hexToRgbaString(category.color, 0.3)\n            : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n          borderColor: isSelected\n            ? hexToRgbaString(category.color, 1)\n            : hexToRgbaString(theme.colors.UI_BORDER, 0.6),\n          color: isSelected\n            ? `#${category.color.toString(16).padStart(6, '0')}`\n            : `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, '0')}`,\n        };\n\n        return (\n          <button\n            key={category.id}\n            style={buttonStyle}\n            onClick={() => onTabChange(category.id as 'combat' | 'movement' | 'system')}\n            data-testid={`tab-${category.id}`}\n            onMouseEnter={(e) => {\n              if (!isSelected) {\n                e.currentTarget.style.background = hexToRgbaString(category.color, 0.1);\n                e.currentTarget.style.borderColor = hexToRgbaString(category.color, 0.8);\n              }\n            }}\n            onMouseLeave={(e) => {\n              if (!isSelected) {\n                e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8);\n                e.currentTarget.style.borderColor = hexToRgbaString(theme.colors.UI_BORDER, 0.6);\n              }\n            }}\n          >\n            <span role=\"img\" aria-label={category.english}>{category.icon}</span>\n            <span>{category.korean} | {category.english}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAa,uBAA2D,EACtE,aACA,aACA,eACI;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;CAAS,CAAC;CAEzE,MAAM,WAAW,eAAe;EAC9B,SAAS;EACT,eAAe;EACf,KAAK,WAAW,QAAQ;EACxB,gBAAgB;EAChB,YAAY;EACZ,SAAS,WAAW,SAAS;EAC7B,UAAU;CACZ,IAAI,CAAC,QAAQ,CAAC;CAEd,MAAM,kBAAkB,eAAe;EACrC,SAAS,WAAW,aAAa;EACjC,cAAc;EACd,QAAQ,aAAa,gBAAgB,MAAM,OAAO,WAAW,EAAG;EAChE,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,UAAU,WAAW,SAAS;EAC9B,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,KAAK;CACP,IAAI,CAAC,UAAU,KAAK,CAAC;CAErB,OACE,oBAAC,OAAD;EAAK,OAAO;EAAU,eAAY;EAC/B,UAAA,mBAAmB,KAAK,aAAa;GACpC,MAAM,aAAa,gBAAgB,SAAS;GAE5C,MAAM,cAAc;IAClB,GAAG;IACH,YAAY,aACR,gBAAgB,SAAS,OAAO,EAAG,IACnC,gBAAgB,MAAM,OAAO,oBAAoB,EAAG;IACxD,aAAa,aACT,gBAAgB,SAAS,OAAO,CAAC,IACjC,gBAAgB,MAAM,OAAO,WAAW,EAAG;IAC/C,OAAO,aACH,IAAI,SAAS,MAAM,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,MAC/C,IAAI,MAAM,OAAO,eAAe,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG;GAClE;GAEA,OACE,qBAAC,UAAD;IAEE,OAAO;IACP,eAAe,YAAY,SAAS,EAAsC;IAC1E,eAAa,OAAO,SAAS;IAC7B,eAAe,MAAM;KACnB,IAAI,CAAC,YAAY;MACf,EAAE,cAAc,MAAM,aAAa,gBAAgB,SAAS,OAAO,EAAG;MACtE,EAAE,cAAc,MAAM,cAAc,gBAAgB,SAAS,OAAO,EAAG;KACzE;IACF;IACA,eAAe,MAAM;KACnB,IAAI,CAAC,YAAY;MACf,EAAE,cAAc,MAAM,aAAa,gBAAgB,MAAM,OAAO,oBAAoB,EAAG;MACvF,EAAE,cAAc,MAAM,cAAc,gBAAgB,MAAM,OAAO,WAAW,EAAG;KACjF;IACF;IAhBF,UAAA,CAkBE,oBAAC,QAAD;KAAM,MAAK;KAAM,cAAY,SAAS;KAAU,UAAA,SAAS;IAAW,CAAA,GACpE,qBAAC,QAAD,EAAA,UAAA;KAAO,SAAS;KAAO;KAAI,SAAS;IAAc,EAAA,CAAA,CAC5C;GAnBD,GAAA,SAAS,EAmBR;EAEZ,CAAC;CACE,CAAA;AAET"}

package/lib/components/screens/controls/components/GamepadVisualization3D.js.map

@@ -1 +1 @@
-{"version":3,"file":"GamepadVisualization3D.js","names":[],"sources":["../../../../../src/components/screens/controls/components/GamepadVisualization3D.tsx"],"sourcesContent":["/**\n * GamepadVisualization3D - 3D gamepad visualization with button labels\n *\n * Renders a simplified 3D gamepad shape with colored buttons and\n * bilingual Korean-English labels for each button.\n *\n * @module components/screens/controls/components\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useEffect, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { GAMEPAD_BUTTONS } from \"../constants/ControlsConstants\";\n\n/**\n * Props for GamepadVisualization3D component\n */\nexport interface GamepadVisualization3DProps {\n  /** Whether on mobile device (affects sizing) */\n  readonly isMobile: boolean;\n}\n\n/**\n * GamepadVisualization3D Component\n *\n * 3D visualization of a gamepad with labeled buttons.\n * Displays simplified gamepad shape with colored circles for buttons.\n *\n * @example\n * ```tsx\n * <Canvas>\n *   <GamepadVisualization3D isMobile={false} />\n * </Canvas>\n * ```\n */\nexport const GamepadVisualization3D: React.FC<GamepadVisualization3DProps> = ({\n  isMobile,\n}) => {\n  const bodyMaterial = useMemo(\n    () =>\n      new THREE.MeshStandardMaterial({\n        color: KOREAN_COLORS.UI_STEEL_GRAY_DARK,\n        metalness: 0.7,\n        roughness: 0.3,\n        transparent: true,\n        opacity: 0.95,\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    return () => {\n      bodyMaterial.dispose();\n    };\n  }, [bodyMaterial]);\n\n  const buttonPositions = useMemo(\n    () => ({\n      0: { x: 1.5, y: 0.5, z: 0.15 }, // A\n      1: { x: 2.0, y: 0.0, z: 0.15 }, // B\n      2: { x: 1.0, y: 0.0, z: 0.15 }, // X\n      3: { x: 1.5, y: -0.5, z: 0.15 }, // Y\n      4: { x: -2.0, y: 1.0, z: 0.2 }, // LB\n      5: { x: 2.0, y: 1.0, z: 0.2 }, // RB\n      6: { x: -2.0, y: 1.4, z: 0.2 }, // LT\n      7: { x: 2.0, y: 1.4, z: 0.2 }, // RT\n      8: { x: -0.6, y: 0.0, z: 0.15 }, // Back\n      9: { x: 0.6, y: 0.0, z: 0.15 }, // Start\n      10: { x: -1.5, y: -0.8, z: 0.15 }, // L3\n      11: { x: 1.5, y: -0.8, z: 0.15 }, // R3\n    }),\n    [],\n  );\n\n  return (\n    <group position={[0, 0, 0]} data-testid=\"gamepad-visualization\">\n      {/* Ambient light */}\n      <ambientLight intensity={0.5} />\n\n      {/* Directional lights */}\n      <directionalLight position={[3, 3, 3]} intensity={0.8} />\n      <directionalLight position={[-3, 2, 2]} intensity={0.4} />\n\n      {/* Left body section (rounded rectangle) */}\n      <mesh position={[-1.5, 0, 0]}>\n        <boxGeometry args={[2.5, 2.5, 0.4]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Right body section (rounded rectangle) */}\n      <mesh position={[1.5, 0, 0]}>\n        <boxGeometry args={[2.5, 2.5, 0.4]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Center connector */}\n      <mesh position={[0, 0, 0]}>\n        <boxGeometry args={[1.5, 1.5, 0.35]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Render all buttons */}\n      {GAMEPAD_BUTTONS.map((button) => {\n        const pos =\n          buttonPositions[button.index as keyof typeof buttonPositions];\n        if (!pos) return null;\n\n        return (\n          <group key={button.index} position={[pos.x, pos.y, pos.z]}>\n            {/* Button sphere */}\n            <mesh>\n              <sphereGeometry args={[0.15, 16, 16]} />\n              <meshStandardMaterial\n                color={button.color}\n                emissive={button.color}\n                emissiveIntensity={1.5}\n                metalness={0.5}\n                roughness={0.3}\n              />\n            </mesh>\n\n            {/* Button label overlay */}\n            <Html\n              position={[0, 0.3, 0]}\n              center\n              distanceFactor={isMobile ? 3 : 2.5}\n              style={{ pointerEvents: \"none\" }}\n            >\n              <div\n                style={{\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  fontSize: isMobile ? \"10px\" : \"11px\",\n                  fontWeight: \"bold\",\n                  color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n                  textAlign: \"center\",\n                  whiteSpace: \"nowrap\",\n                  background: hexToRgbaString(\n                    KOREAN_COLORS.UI_BACKGROUND_DARK,\n                    0.8,\n                  ),\n                  padding: \"4px 6px\",\n                  borderRadius: \"4px\",\n                  border: `1px solid ${hexToRgbaString(button.color, 0.6)}`,\n                  boxShadow: `0 0 8px ${hexToRgbaString(button.color, 0.4)}`,\n                }}\n              >\n                {/* Button name */}\n                <div\n                  style={{\n                    color: hexToRgbaString(button.color),\n                    marginBottom: \"2px\",\n                  }}\n                >\n                  {button.korean} | {button.english}\n                </div>\n                {/* Action */}\n                <div\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY),\n                  }}\n                >\n                  {button.actionKorean} | {button.action}\n                </div>\n              </div>\n            </Html>\n          </group>\n        );\n      })}\n    </group>\n  );\n};\n\nexport default GamepadVisualization3D;\n"],"mappings":"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"}
+{"version":3,"file":"GamepadVisualization3D.js","names":[],"sources":["../../../../../src/components/screens/controls/components/GamepadVisualization3D.tsx"],"sourcesContent":["/**\n * GamepadVisualization3D - 3D gamepad visualization with button labels\n *\n * Renders a simplified 3D gamepad shape with colored buttons and\n * bilingual Korean-English labels for each button.\n *\n * @module components/screens/controls/components\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useEffect, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { GAMEPAD_BUTTONS } from \"../constants/ControlsConstants\";\n\n/**\n * Props for GamepadVisualization3D component\n */\nexport interface GamepadVisualization3DProps {\n  /** Whether on mobile device (affects sizing) */\n  readonly isMobile: boolean;\n}\n\n/**\n * GamepadVisualization3D Component\n *\n * 3D visualization of a gamepad with labeled buttons.\n * Displays simplified gamepad shape with colored circles for buttons.\n *\n * @example\n * ```tsx\n * <Canvas>\n *   <GamepadVisualization3D isMobile={false} />\n * </Canvas>\n * ```\n */\nexport const GamepadVisualization3D: React.FC<GamepadVisualization3DProps> = ({\n  isMobile,\n}) => {\n  const bodyMaterial = useMemo(\n    () =>\n      new THREE.MeshStandardMaterial({\n        color: KOREAN_COLORS.UI_STEEL_GRAY_DARK,\n        metalness: 0.7,\n        roughness: 0.3,\n        transparent: true,\n        opacity: 0.95,\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    return () => {\n      bodyMaterial.dispose();\n    };\n  }, [bodyMaterial]);\n\n  const buttonPositions = useMemo(\n    () => ({\n      0: { x: 1.5, y: 0.5, z: 0.15 }, // A\n      1: { x: 2.0, y: 0.0, z: 0.15 }, // B\n      2: { x: 1.0, y: 0.0, z: 0.15 }, // X\n      3: { x: 1.5, y: -0.5, z: 0.15 }, // Y\n      4: { x: -2.0, y: 1.0, z: 0.2 }, // LB\n      5: { x: 2.0, y: 1.0, z: 0.2 }, // RB\n      6: { x: -2.0, y: 1.4, z: 0.2 }, // LT\n      7: { x: 2.0, y: 1.4, z: 0.2 }, // RT\n      8: { x: -0.6, y: 0.0, z: 0.15 }, // Back\n      9: { x: 0.6, y: 0.0, z: 0.15 }, // Start\n      10: { x: -1.5, y: -0.8, z: 0.15 }, // L3\n      11: { x: 1.5, y: -0.8, z: 0.15 }, // R3\n    }),\n    [],\n  );\n\n  return (\n    <group position={[0, 0, 0]} data-testid=\"gamepad-visualization\">\n      {/* Ambient light */}\n      <ambientLight intensity={0.5} />\n\n      {/* Directional lights */}\n      <directionalLight position={[3, 3, 3]} intensity={0.8} />\n      <directionalLight position={[-3, 2, 2]} intensity={0.4} />\n\n      {/* Left body section (rounded rectangle) */}\n      <mesh position={[-1.5, 0, 0]}>\n        <boxGeometry args={[2.5, 2.5, 0.4]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Right body section (rounded rectangle) */}\n      <mesh position={[1.5, 0, 0]}>\n        <boxGeometry args={[2.5, 2.5, 0.4]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Center connector */}\n      <mesh position={[0, 0, 0]}>\n        <boxGeometry args={[1.5, 1.5, 0.35]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Render all buttons */}\n      {GAMEPAD_BUTTONS.map((button) => {\n        const pos =\n          buttonPositions[button.index as keyof typeof buttonPositions];\n        if (!pos) return null;\n\n        return (\n          <group key={button.index} position={[pos.x, pos.y, pos.z]}>\n            {/* Button sphere */}\n            <mesh>\n              <sphereGeometry args={[0.15, 16, 16]} />\n              <meshStandardMaterial\n                color={button.color}\n                emissive={button.color}\n                emissiveIntensity={1.5}\n                metalness={0.5}\n                roughness={0.3}\n              />\n            </mesh>\n\n            {/* Button label overlay */}\n            <Html\n              position={[0, 0.3, 0]}\n              center\n              distanceFactor={isMobile ? 3 : 2.5}\n              style={{ pointerEvents: \"none\" }}\n            >\n              <div\n                style={{\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  fontSize: isMobile ? \"10px\" : \"11px\",\n                  fontWeight: \"bold\",\n                  color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n                  textAlign: \"center\",\n                  whiteSpace: \"nowrap\",\n                  background: hexToRgbaString(\n                    KOREAN_COLORS.UI_BACKGROUND_DARK,\n                    0.8,\n                  ),\n                  padding: \"4px 6px\",\n                  borderRadius: \"4px\",\n                  border: `1px solid ${hexToRgbaString(button.color, 0.6)}`,\n                  boxShadow: `0 0 8px ${hexToRgbaString(button.color, 0.4)}`,\n                }}\n              >\n                {/* Button name */}\n                <div\n                  style={{\n                    color: hexToRgbaString(button.color),\n                    marginBottom: \"2px\",\n                  }}\n                >\n                  {button.korean} | {button.english}\n                </div>\n                {/* Action */}\n                <div\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY),\n                  }}\n                >\n                  {button.actionKorean} | {button.action}\n                </div>\n              </div>\n            </Html>\n          </group>\n        );\n      })}\n    </group>\n  );\n};\n\nexport default GamepadVisualization3D;\n"],"mappings":"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"}