blacktrigram 0.7.67 → 0.7.69

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":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,IAAa,oBAAqD,EAChE,gBACA,OAAO,WACP,QAAQ,iBACJ;CAEJ,MAAM,EAAE,aAAa,UAAU,aAAa,aAAa,mBACvD,iBAAiB;CAEnB,2BAA2B;EACzB,qBAAqB;GACnB,QAAQ,KAAK,yCAAyC;EACxD;EACA,yBAAyB;GACvB,QAAQ,IAAI,4CAA4C;EAC1D;EACA,aAAa;CACf,CAAC;CAED,MAAM,QAAQ,SAAS;CACvB,MAAM,EAAE,OAAO,WAAW,cAAc;CAExC,MAAM,cAAc,aAAa;CACjC,MAAM,eAAe,cAAc;CAEnC,MAAM,WAAW,wBAAwB;CACzC,MAAM,WAAW,cACT,CAAC,YAAY,eAAe,OAAO,cAAc,MACvD,CAAC,UAAU,WAAW,CACxB;CACA,MAAM,iBAAiB,cACf,CAAC,YAAY,eAAe,MAClC,CAAC,UAAU,WAAW,CACxB;CAEA,MAAM,kBAAkB,cAChB,mBAAmB,WAAW,GACpC,CAAC,WAAW,CACd;CAEA,MAAM,QAAQ,eAAe;EAC3B,SAAS;EACT,MAAM;EACN;CACF,CAAC;CAED,MAAM,iBAAiB,eACd,EACL,QAAQ;;;;;;sBAMQ,gBAAgB,MAAM,OAAO,oBAAoB,EAAG,EAAE;;;;sBAItD,gBAAgB,MAAM,OAAO,aAAa,CAAC,EAAE;;4BAEvC,gBAAgB,MAAM,OAAO,oBAAoB,EAAG,EAAE;;;sBAG5D,gBAAgB,MAAM,OAAO,cAAc,CAAC,EAAE;;MAGhE,IACA,CAAC,KAAK,CACR;CAEA,MAAM,SAAS,eACN;EACL,YAAY,gBAAgB,MAAM,OAAO,oBAAoB,GAAI;EACjE,UAAU,gBAAgB,MAAM,OAAO,oBAAoB,EAAG;EAC9D,WAAW,gBAAgB,MAAM,OAAO,oBAAoB,EAAG;EAC/D,YAAY,gBAAgB,MAAM,OAAO,aAAa,EAAG;EACzD,YAAY,gBAAgB,MAAM,OAAO,cAAc,EAAG;EAC1D,WAAW,gBAAgB,MAAM,OAAO,YAAY,EAAG;EACvD,aAAa,IAAI,MAAM,OAAO,aAAa,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG;EACvE,eAAe,IAAI,MAAM,OAAO,eAAe,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG;EAC3E,YAAY,IAAI,MAAM,OAAO,YAAY,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG;EACrE,YAAY,IAAI,MAAM,OAAO,aAAa,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG;EACtE,aAAa,IAAI,MAAM,OAAO,aAAa,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG;CACzE,IACA,CAAC,KAAK,CACR;CAEA,gBAAgB;EACd,MAAM,iBAAiB,UAAyB;GAC9C,IAAI,MAAM,QAAQ,YAAY,MAAM,IAAI,YAAY,MAAM,KAAK;IAC7D,MAAM,eAAe;IACrB,MAAM,QAAQ,WAAW;IACzB,eAAe;GACjB;EACF;EAEA,OAAO,iBAAiB,WAAW,eAAe,EAAE,SAAS,MAAM,CAAC;EACpE,aAAa,OAAO,oBAAoB,WAAW,aAAa;CAClE,GAAG,CAAC,gBAAgB,KAAK,CAAC;CAE1B,MAAM,kBAAkB,kBAAkB;EACxC,MAAM,QAAQ,WAAW;EACzB,eAAe;CACjB,GAAG,CAAC,OAAO,cAAc,CAAC;CAE1B,MAAM,wBAAwB,aAC3B,GAAwC,aAAsB;EAC7D,IAAI,CAAC,UAAU;GACb,EAAE,cAAc,MAAM,aAAa,gBACjC,MAAM,OAAO,cACb,EACF;GACA,EAAE,cAAc,MAAM,cAAc,gBAClC,MAAM,OAAO,cACb,EACF;EACF;CACF,GACA,CAAC,KAAK,CACR;CAEA,MAAM,wBAAwB,aAC3B,GAAwC,aAAsB;EAC7D,IAAI,CAAC,UAAU;GACb,EAAE,cAAc,MAAM,aAAa,gBACjC,MAAM,OAAO,oBACb,EACF;GACA,EAAE,cAAc,MAAM,cAAc,gBAClC,MAAM,OAAO,aACb,EACF;EACF;CACF,GACA,CAAC,KAAK,CACR;CAEA,MAAM,iBAAiB,cACf,OAAO,QAAQ,gBAAgB,cAAc,GACnD,CAAC,CACH;CAEA,MAAM,iBAAiB,cACf,OAAO,QAAQ,gBAAgB,MAAM,GAC3C,CAAC,CACH;CAEA,MAAM,gBAAgB,WAAW,IAAI,WAAW,IAAI,iBAAiB,IAAI;CACzE,MAAM,eAAe,WACjB,MACA,WACE,MACA,iBACE,MACA;CAER,OACE,qBAAC,OAAD;EACE,OAAO;GACL,OAAO;GACP,QAAQ;GACR,UAAU;GACV,UAAU;EACZ;EACA,eAAY;YAPd;GAUE,oBAAC,eAAD;IAAe,UAAS;IAAY,SAAS;GAAW,CAAA;GAGxD,qBAAC,QAAD;IACE,OAAO;KACL,UAAU;KACV,KAAK;KACL,MAAM;KACN,OAAO;KACP,QAAQ;KACR,QAAQ,QAAQ;IAClB;IACA,IAAI;KACF,WAAW;KACX,OAAO;KACP,iBAAiB;IACnB;IACA,KAAK,CAAC,GAAG,CAAC;IACV,QAAQ;KAAE,UAAU;MAAC;MAAG;MAAG;KAAE;KAAG,KAAK;IAAG;IACxC,YAAY,EAAE,SAAS;KACrB,GAAG,cAAc,MAAM,OAAO,oBAAoB,CAAC;IACrD;cAlBF,CAqBE,oBAAC,mBAAD,EAAmB,OAAM,WAAY,CAAA,GAGpC,aAAa,aACZ,oBAAC,kBAAD;KACe;KACA;IACd,CAAA,IAED,oBAAC,wBAAD,EAAkC,SAAW,CAAA,CAEzC;;GAGR,qBAAC,OAAD;IACE,OAAO;KACL,UAAU;KACV,KAAK;KACL,MAAM;KACN,OAAO;KACP,QAAQ;KACR,eAAe;KACf,QAAQ,QAAQ;IAClB;IACA,eAAY;cAVd,CAaE,oBAAC,SAAD,EAAO,yBAAyB,eAAiB,CAAA,GAEjD,qBAAC,OAAD;KACE,OAAO;MACL,OAAO;MACP,QAAQ;MACR,SAAS;MACT,eAAe;MACf,OAAO,OAAO;MACd,YAAY,MAAM,iBAAiB;MACnC,YAAY,MAAM,iBAAiB;MACnC,eAAe;KACjB;eAVF;MAaE,qBAAC,OAAD;OACE,OAAO;QACL,QAAQ,GAAG,gBAAgB,aAAa;QACxC,SAAS;QACT,eAAe;QACf,YAAY;QACZ,gBAAgB;QAChB,YAAY,OAAO;QACnB,cAAc,aAAa,OAAO;QAClC,SAAS,GAAG,gBAAgB,QAAQ;OACtC;OACA,eAAY;iBAXd,CAaE,oBAAC,MAAD;QACE,OAAO;SACL,UAAU,WAAW,SAAS;SAC9B,YAAY;SACZ,OAAO,OAAO;SACd,QAAQ;SACR,YAAY,YAAY,gBACtB,MAAM,OAAO,aACb,EACF;QACF;kBACD;OAEG,CAAA,GACJ,oBAAC,KAAD;QACE,OAAO;SACL,UAAU,WAAW,SAAS;SAC9B,OAAO,OAAO;SACd,QAAQ;SACR,WAAW;QACb;kBACD;OAGE,CAAA,CACA;;MAGL,qBAAC,OAAD;OACE,OAAO;QACL,SAAS;QACT,gBAAgB;QAChB,KAAK,WAAW,SAAS;QACzB,SAAS,GAAG,gBAAgB,QAAQ;QACpC,YAAY,OAAO;QACnB,cAAc,aAAa,OAAO;OACpC;OACA,eAAY;iBATd,CAWE,oBAAC,UAAD;QACE,eAAe;SACb,MAAM,QAAQ,aAAa;SAC3B,YAAY,UAAU;QACxB;QACA,OAAO;SACL,SAAS,WAAW,cAAc;SAClC,cAAc;SACd,QAAQ,aAAa,aAAa,aAAa,OAAO,aAAa,OAAO;SAC1E,YACE,aAAa,aACT,gBAAgB,MAAM,OAAO,cAAc,EAAG,IAC9C,gBAAgB,MAAM,OAAO,oBAAoB,EAAG;SAC1D,OACE,aAAa,aACT,OAAO,aACP,OAAO;SACb,YAAY,YAAY;SACxB,UAAU,WAAW,SAAS;SAC9B,YAAY;SACZ,QAAQ;SACR,YAAY;QACd;QACA,eAAY;QACZ,eAAe,MACb,sBAAsB,GAAG,aAAa,UAAU;QAElD,eAAe,MACb,sBAAsB,GAAG,aAAa,UAAU;kBAEnD;OAEO,CAAA,GACR,oBAAC,UAAD;QACE,eAAe;SACb,MAAM,QAAQ,aAAa;SAC3B,YAAY,SAAS;QACvB;QACA,OAAO;SACL,SAAS,WAAW,cAAc;SAClC,cAAc;SACd,QAAQ,aAAa,aAAa,YAAY,OAAO,aAAa,OAAO;SACzE,YACE,aAAa,YACT,gBAAgB,MAAM,OAAO,cAAc,EAAG,IAC9C,gBAAgB,MAAM,OAAO,oBAAoB,EAAG;SAC1D,OACE,aAAa,YACT,OAAO,aACP,OAAO;SACb,YAAY,YAAY;SACxB,UAAU,WAAW,SAAS;SAC9B,YAAY;SACZ,QAAQ;SACR,YAAY;QACd;QACA,eAAY;QACZ,eAAe,MACb,sBAAsB,GAAG,aAAa,SAAS;QAEjD,eAAe,MACb,sBAAsB,GAAG,aAAa,SAAS;kBAElD;OAEO,CAAA,CACL;;MAGL,oBAAC,OAAD;OACE,OAAO;QACL,YAAY,OAAO;QACnB,cAAc,aAAa,OAAO;OACpC;iBAEA,oBAAC,qBAAD;QACe;QACb,cAAc,QAAQ;SACpB,MAAM,QAAQ,aAAa;SAC3B,eAAe,GAAG;QACpB;QACU;OACX,CAAA;MACE,CAAA;MAGL,qBAAC,OAAD;OACE,OAAO;QACL,MAAM;QACN,WAAW;QACX,WAAW;QACX,SAAS,GAAG,gBAAgB,QAAQ;QACpC,gBAAgB;QAChB,gBAAgB,GAAG,OAAO,WAAW,GAAG,OAAO;OACjD;OACA,WAAU;OACV,eAAY;iBAVd;QAaE,oBAAC,4BAAD;SACe;SACH;QACX,CAAA;QAID,qBAAC,OAAD;SACE,OAAO;UACL,WAAW,GAAG,gBAAgB,eAAe;UAC7C,cAAc,GAAG,gBAAgB,eAAe;UAChD,YAAY,OAAO;UACnB,cAAc;UACd,QAAQ,aAAa,OAAO;UAC5B,SAAS;SACX;SACA,eAAY;mBATd;UAWE,oBAAC,MAAD;WACE,OAAO;YACL,UAAU,WAAW,SAAS;YAC9B,YAAY;YACZ,OAAO,OAAO;YACd,QAAQ;WACV;qBACD;UAEG,CAAA;UACJ,oBAAC,KAAD;WACE,OAAO;YACL,UAAU,WAAW,SAAS;YAC9B,OAAO,OAAO;YACd,WAAW;YACX,QAAQ;WACV;qBACD;UAGE,CAAA;UAGH,oBAAC,OAAD;WACE,OAAO;YACL,SAAS;YACT,qBAAqB,UAAU,cAAc;YAC7C,KAAK;WACP;WACA,eAAY;qBAEX,eAAe,KAAK,CAAC,KAAK,WACzB,qBAAC,OAAD;YAEE,OAAO;aACL,YAAY,2BAA2B,gBACrC,MAAM,OAAO,sBACb,EACF,EAAE,IAAI,gBACJ,MAAM,OAAO,qBACb,EACF,EAAE;aACF,cAAc;aACd,QAAQ,aAAa,OAAO;aAC5B,SAAS;aACT,UAAU;aACV,WAAW,GAAG,aAAa;YAC7B;YACA,eAAa,kBAAkB;sBAhBjC;aAmBE,oBAAC,OAAD;cACE,OAAO;eACL,UAAU;eACV,KAAK;eACL,MAAM;eACN,YAAY,OAAO;eACnB,cAAc;eACd,OAAO;eACP,QAAQ;eACR,SAAS;eACT,YAAY;eACZ,gBAAgB;eAChB,UAAU,WAAW,SAAS;eAC9B,YAAY;eACZ,OAAO,OAAO;cAChB;wBAEC;aACE,CAAA;aAGL,oBAAC,OAAD;cACE,OAAO;eACL,UAAU;eACV,KAAK;eACL,OAAO;eACP,UAAU,WAAW,SAAS;eAC9B,OAAO,OAAO;eACd,YAAY;cACd;wBAEC,MAAM;aACJ,CAAA;aAGL,qBAAC,OAAD;cAAK,OAAO,EAAE,WAAW,OAAO;wBAAhC,CACE,oBAAC,OAAD;eACE,OAAO;gBACL,UAAU,WAAW,SAAS;gBAC9B,YAAY;gBACZ,OAAO,OAAO;eAChB;yBAEC,MAAM;cACJ,CAAA,GACL,oBAAC,OAAD;eACE,OAAO;gBACL,UAAU,WAAW,QAAQ;gBAC7B,OAAO,OAAO;gBACd,WAAW;eACb;yBAEC,MAAM;cACJ,CAAA,CACF;;aAGL,qBAAC,OAAD;cAAK,OAAO,EAAE,WAAW,MAAM;wBAA/B,CACE,qBAAC,OAAD;eACE,OAAO;gBACL,UAAU,WAAW,QAAQ;gBAC7B,YAAY;gBACZ,OAAO,OAAO;eAChB;yBALF,CAMC,OACK,MAAM,UAAU,MACjB;kBACL,oBAAC,OAAD;eACE,OAAO;gBACL,UAAU,WAAW,QAAQ;gBAC7B,OAAO,OAAO;gBACd,WAAW;eACb;yBAEC,MAAM,UAAU;cACd,CAAA,CACF;;aAGL,qBAAC,OAAD;cAAK,OAAO,EAAE,WAAW,MAAM;wBAA/B,CACE,qBAAC,OAAD;eACE,OAAO;gBACL,UAAU,WAAW,QAAQ;gBAC7B,YAAY;gBACZ,OAAO,IAAI,MAAM,OAAO,kBAAkB,SACxC,EACF,EAAE,SAAS,GAAG,GAAG;eACnB;yBAPF,CAQC,OACK,MAAM,YAAY,MACnB;kBACL,oBAAC,OAAD;eACE,OAAO;gBACL,UAAU,WAAW,QAAQ;gBAC7B,OAAO,IAAI,MAAM,OAAO,kBAAkB,SACxC,EACF,EAAE,SAAS,GAAG,GAAG;gBACjB,WAAW;eACb;yBAEC,MAAM,YAAY;cAChB,CAAA,CACF;;aAGL,qBAAC,OAAD;cACE,OAAO;eACL,WAAW;eACX,UAAU,WAAW,QAAQ;eAC7B,YAAY;eACZ,OAAO,IAAI,MAAM,OAAO,aAAa,SACnC,EACF,EAAE,SAAS,GAAG,GAAG;cACnB;wBARF,CASC,OACK,MAAM,cAAc,MACrB;;aAGL,oBAAC,OAAD;cACE,OAAO;eACL,UAAU;eACV,QAAQ;eACR,OAAO;eACP,UAAU,WAAW,QAAQ;eAC7B,YAAY;eACZ,OAAO,IAAI,MAAM,OAAO,WAAW,SACjC,EACF,EAAE,SAAS,GAAG,GAAG;cACnB;wBACD;aAEI,CAAA;YACF;cAvJE,GAuJF,CACN;UACE,CAAA;SACF;;QAGL,qBAAC,OAAD;SACE,OAAO;UACL,cAAc,GAAG,gBAAgB,eAAe;UAChD,YAAY,OAAO;UACnB,cAAc;UACd,QAAQ,aAAa,OAAO;UAC5B,SAAS;SACX;SACA,eAAY;mBARd,CAUE,oBAAC,MAAD;UACE,OAAO;WACL,UAAU,WAAW,SAAS;WAC9B,YAAY;WACZ,OAAO,OAAO;WACd,QAAQ;UACV;oBACD;SAEG,CAAA,GAGJ,oBAAC,OAAD;UACE,OAAO;WACL,SAAS;WACT,eAAe;WACf,KAAK;UACP;UACA,eAAY;oBAEX,eAAe,KAAK,CAAC,KAAK,iBACzB,qBAAC,OAAD;WAEE,OAAO;YACL,YAAY,0BAA0B,gBACpC,MAAM,OAAO,qBACb,EACF,EAAE,IAAI,gBACJ,MAAM,OAAO,sBACb,EACF,EAAE;YACF,cAAc;YACd,QAAQ,aAAa,OAAO;YAC5B,SAAS;YACT,SAAS;YACT,YAAY;YACZ,KAAK;WACP;WACA,eAAa,kBAAkB;qBAjBjC,CAoBE,oBAAC,OAAD;YACE,OAAO;aACL,YAAY,gBACV,MAAM,OAAO,aACb,EACF;aACA,cAAc;aACd,SAAS;aACT,UAAU,WAAW,SAAS;aAC9B,YAAY;aACZ,OAAO,OAAO;aACd,UAAU;aACV,WAAW;YACb;sBAEC;WACE,CAAA,GAGL,qBAAC,OAAD;YAAK,OAAO,EAAE,MAAM,EAAE;sBAAtB,CACE,oBAAC,OAAD;aACE,OAAO;cACL,UAAU,WAAW,SAAS;cAC9B,YAAY;cACZ,OAAO,OAAO;aAChB;uBAEC,YAAY;YACV,CAAA,GACL,oBAAC,OAAD;aACE,OAAO;cACL,UAAU,WAAW,QAAQ;cAC7B,OAAO,OAAO;cACd,WAAW;aACb;uBAEC,YAAY;YACV,CAAA,CACF;aACF;aA1DE,GA0DF,CACN;SACE,CAAA,CACF;;QAGL,qBAAC,OAAD;SACE,OAAO;UACL,cAAc,GAAG,gBAAgB,eAAe;UAChD,YAAY,OAAO;UACnB,cAAc;UACd,QAAQ,aAAa,gBACnB,MAAM,OAAO,mBACb,EACF;UACA,SAAS;SACX;SACA,eAAY;mBAXd,CAaE,oBAAC,MAAD;UACE,OAAO;WACL,UAAU,WAAW,SAAS;WAC9B,YAAY;WACZ,OAAO,IAAI,MAAM,OAAO,kBAAkB,SACxC,EACF,EAAE,SAAS,GAAG,GAAG;WACjB,QAAQ;UACV;oBACD;SAEG,CAAA,GAGJ,qBAAC,OAAD;UAAK,OAAO,EAAE,cAAc,OAAO;oBAAnC,CACE,oBAAC,OAAD;WACE,OAAO;YACL,UAAU,WAAW,SAAS;YAC9B,YAAY;YACZ,OAAO,OAAO;YACd,cAAc;WAChB;qBACD;UAEI,CAAA,GACL,oBAAC,OAAD;WACE,OAAO;YACL,SAAS;YACT,qBAAqB,WACjB,YACA;YACJ,KAAK;WACP;qBAEC;YACC;aAAE,KAAK;aAAO,QAAQ;aAAM,SAAS;YAAU;YAC/C;aAAE,KAAK;aAAO,QAAQ;aAAM,SAAS;YAAW;YAChD;aAAE,KAAK;aAAO,QAAQ;aAAK,SAAS;YAAO;YAC3C;aAAE,KAAK;aAAO,QAAQ;aAAK,SAAS;YAAQ;WAC9C,EAAE,KAAK,SACL,qBAAC,OAAD;YAEE,OAAO;aACL,YAAY,gBACV,MAAM,OAAO,qBACb,EACF;aACA,cAAc;aACd,SAAS;aACT,WAAW;YACb;sBAVF,CAYE,oBAAC,OAAD;aACE,OAAO;cACL,UAAU,WAAW,SAAS;cAC9B,YAAY;cACZ,OAAO,OAAO;aAChB;uBAEC,KAAK;YACH,CAAA,GACL,qBAAC,OAAD;aACE,OAAO;cACL,UAAU,WAAW,QAAQ;cAC7B,OAAO,OAAO;aAChB;uBAJF;cAMG,KAAK;cAAO;cAAI,KAAK;aACnB;cACF;cA5BE,KAAK,GA4BP,CACN;UACE,CAAA,CACF;WACF;;QAGL,qBAAC,OAAD;SACE,OAAO;UACL,cAAc,GAAG,gBAAgB,eAAe;UAChD,YAAY,OAAO;UACnB,cAAc;UACd,QAAQ,aAAa,gBACnB,MAAM,OAAO,cACb,EACF;UACA,SAAS;SACX;SACA,eAAY;mBAXd;UAaE,oBAAC,MAAD;WACE,OAAO;YACL,UAAU,WAAW,SAAS;YAC9B,YAAY;YACZ,OAAO,OAAO;YACd,QAAQ;WACV;qBACD;UAEG,CAAA;UACJ,oBAAC,KAAD;WACE,OAAO;YACL,UAAU,WAAW,SAAS;YAC9B,OAAO,OAAO;YACd,WAAW;YACX,QAAQ;WACV;qBACD;UAGE,CAAA;UAGH,qBAAC,OAAD;WAAK,OAAO,EAAE,cAAc,OAAO;qBAAnC;YACE,oBAAC,MAAD;aACE,OAAO;cACL,UAAU,WAAW,SAAS;cAC9B,YAAY;cACZ,OAAO,OAAO;cACd,cAAc;aAChB;uBACD;YAEG,CAAA;YACJ,oBAAC,KAAD;aACE,OAAO;cACL,UAAU,WAAW,QAAQ;cAC7B,OAAO,OAAO;cACd,cAAc;cACd,WAAW;aACb;uBACD;YAGE,CAAA;YACH,oBAAC,OAAD;aACE,OAAO;cACL,SAAS;cACT,qBAAqB,WACjB,YACA;cACJ,KAAK;aACP;uBAEC;cACC;eACE,KAAK;eACL,QAAQ;eACR,SAAS;cACX;cACA;eACE,KAAK;eACL,QAAQ;eACR,SAAS;cACX;cACA;eACE,KAAK;eACL,QAAQ;eACR,SAAS;cACX;cACA;eACE,KAAK;eACL,QAAQ;eACR,SAAS;cACX;cACA;eACE,KAAK;eACL,QAAQ;eACR,SAAS;cACX;cACA;eACE,KAAK;eACL,QAAQ;eACR,SAAS;cACX;cACA;eACE,KAAK;eACL,QAAQ;eACR,SAAS;cACX;cACA;eACE,KAAK;eACL,QAAQ;eACR,SAAS;cACX;aACF,EAAE,KAAK,SACL,qBAAC,OAAD;cAEE,OAAO;eACL,YAAY,gBACV,MAAM,OAAO,qBACb,EACF;eACA,cAAc;eACd,QAAQ,aAAa,OAAO;eAC5B,SAAS;eACT,WAAW;cACb;wBAXF;eAaE,oBAAC,OAAD;gBACE,OAAO;iBACL,UAAU,WAAW,QAAQ;iBAC7B,YAAY;iBACZ,OAAO,OAAO;iBACd,cAAc;gBAChB;0BAEC,KAAK;eACH,CAAA;eACL,oBAAC,OAAD;gBACE,OAAO;iBACL,UAAU,WAAW,QAAQ;iBAC7B,OAAO,OAAO;gBAChB;0BAEC,KAAK;eACH,CAAA;eACL,oBAAC,OAAD;gBACE,OAAO;iBACL,UAAU,WAAW,QAAQ;iBAC7B,OAAO,OAAO;iBACd,WAAW;gBACb;0BAEC,KAAK;eACH,CAAA;cACF;gBAvCE,KAAK,GAuCP,CACN;YACE,CAAA;WACF;;UAGL,qBAAC,OAAD,EAAA,UAAA;WACE,oBAAC,MAAD;YACE,OAAO;aACL,UAAU,WAAW,SAAS;aAC9B,YAAY;aACZ,OAAO,OAAO;aACd,cAAc;YAChB;sBACD;WAEG,CAAA;WAGJ,qBAAC,OAAD;YAAK,OAAO,EAAE,cAAc,OAAO;sBAAnC;aACE,oBAAC,OAAD;cACE,OAAO;eACL,UAAU,WAAW,SAAS;eAC9B,YAAY;eACZ,OAAO,OAAO;eACd,cAAc;cAChB;wBACD;aAEI,CAAA;aACL,oBAAC,KAAD;cACE,OAAO;eACL,UAAU,WAAW,QAAQ;eAC7B,OAAO,OAAO;eACd,cAAc;eACd,WAAW;cACb;wBACD;aAGE,CAAA;aACH,oBAAC,OAAD;cAAK,OAAO;eAAE,SAAS;eAAQ,KAAK;cAAM;wBACvC,CACC;eACE,KAAK;eACL,QAAQ;eACR,SAAS;cACX,GACA;eACE,KAAK;eACL,QAAQ;eACR,SAAS;cACX,CACF,EAAE,KAAK,SACL,qBAAC,OAAD;eAEE,OAAO;gBACL,MAAM;gBACN,YAAY,gBACV,MAAM,OAAO,aACb,EACF;gBACA,cAAc;gBACd,QAAQ,aAAa,OAAO;gBAC5B,SAAS;gBACT,WAAW;eACb;yBAZF;gBAcE,oBAAC,OAAD;iBACE,OAAO;kBACL,UAAU,WAAW,SAAS;kBAC9B,YAAY;kBACZ,OAAO,OAAO;iBAChB;2BAEC,KAAK;gBACH,CAAA;gBACL,oBAAC,OAAD;iBACE,OAAO;kBACL,UAAU,WAAW,QAAQ;kBAC7B,OAAO,OAAO;iBAChB;2BAEC,KAAK;gBACH,CAAA;gBACL,oBAAC,OAAD;iBACE,OAAO;kBACL,UAAU,WAAW,QAAQ;kBAC7B,OAAO,OAAO;kBACd,WAAW;iBACb;2BAEC,KAAK;gBACH,CAAA;eACF;iBAvCE,KAAK,GAuCP,CACN;aACE,CAAA;YACF;;WAGL,qBAAC,OAAD;YAAK,OAAO,EAAE,cAAc,OAAO;sBAAnC;aACE,oBAAC,OAAD;cACE,OAAO;eACL,UAAU,WAAW,SAAS;eAC9B,YAAY;eACZ,OAAO,OAAO;eACd,cAAc;cAChB;wBACD;aAEI,CAAA;aACL,oBAAC,KAAD;cACE,OAAO;eACL,UAAU,WAAW,QAAQ;eAC7B,OAAO,OAAO;eACd,cAAc;eACd,WAAW;cACb;wBACD;aAEE,CAAA;aACH,oBAAC,OAAD;cAAK,OAAO;eAAE,SAAS;eAAQ,KAAK;cAAM;wBACvC,CACC;eACE,KAAK;eACL,QAAQ;eACR,SAAS;cACX,GACA;eACE,KAAK;eACL,QAAQ;eACR,SAAS;cACX,CACF,EAAE,KAAK,SACL,qBAAC,OAAD;eAEE,OAAO;gBACL,MAAM;gBACN,YAAY,gBACV,MAAM,OAAO,aACb,EACF;gBACA,cAAc;gBACd,QAAQ,aAAa,OAAO;gBAC5B,SAAS;gBACT,WAAW;eACb;yBAZF;gBAcE,oBAAC,OAAD;iBACE,OAAO;kBACL,UAAU,WAAW,SAAS;kBAC9B,YAAY;kBACZ,OAAO,OAAO;iBAChB;2BAEC,KAAK;gBACH,CAAA;gBACL,oBAAC,OAAD;iBACE,OAAO;kBACL,UAAU,WAAW,QAAQ;kBAC7B,OAAO,OAAO;iBAChB;2BAEC,KAAK;gBACH,CAAA;gBACL,oBAAC,OAAD;iBACE,OAAO;kBACL,UAAU,WAAW,QAAQ;kBAC7B,OAAO,OAAO;kBACd,WAAW;iBACb;2BAEC,KAAK;gBACH,CAAA;eACF;iBAvCE,KAAK,GAuCP,CACN;aACE,CAAA;YACF;;WAGL,qBAAC,OAAD;YACE,OAAO;aACL,WAAW;aACX,SAAS;aACT,YAAY,gBAAgB,MAAM,OAAO,aAAa,EAAG;aACzD,cAAc;aACd,QAAQ,aAAa,OAAO;YAC9B;sBAPF;aASE,oBAAC,OAAD;cACE,OAAO;eACL,UAAU,WAAW,SAAS;eAC9B,YAAY;eACZ,OAAO,OAAO;eACd,cAAc;cAChB;wBACD;aAEI,CAAA;aACL,qBAAC,KAAD;cACE,OAAO;eACL,UAAU,WAAW,QAAQ;eAC7B,OAAO,OAAO;eACd,QAAQ;cACV;wBALF,CAOE,oBAAC,UAAD,EAAA,UAAQ,iCAAsC,CAAA,GAAC,qFAG9C;;aACH,qBAAC,KAAD;cACE,OAAO;eACL,UAAU,WAAW,QAAQ;eAC7B,OAAO,OAAO;eACd,QAAQ;cACV;wBALF,CAOE,oBAAC,UAAD,EAAA,UAAQ,6BAAkC,CAAA,GAAC,gEAE1C;;YACA;;UACF,EAAA,CAAA;SACF;;QAGL,qBAAC,OAAD;SACE,OAAO;UACL,cAAc,GAAG,gBAAgB,eAAe;UAChD,YAAY,OAAO;UACnB,cAAc;UACd,QAAQ,aAAa,gBACnB,MAAM,OAAO,aACb,EACF;UACA,SAAS;SACX;SACA,eAAY;mBAXd;UAaE,oBAAC,MAAD;WACE,OAAO;YACL,UAAU,WAAW,SAAS;YAC9B,YAAY;YACZ,OAAO,OAAO;YACd,QAAQ;WACV;qBACD;UAEG,CAAA;UACJ,oBAAC,KAAD;WACE,OAAO;YACL,UAAU,WAAW,SAAS;YAC9B,OAAO,OAAO;YACd,WAAW;YACX,QAAQ;WACV;qBACD;UAEE,CAAA;UAEH,qBAAC,OAAD;WACE,OAAO;YACL,YAAY,gBAAgB,MAAM,OAAO,aAAa,EAAG;YACzD,cAAc;YACd,QAAQ,aAAa,OAAO;YAC5B,SAAS;YACT,WAAW;WACb;qBAPF;YASE,oBAAC,OAAD;aACE,OAAO;cACL,UAAU,WAAW,SAAS;cAC9B,YAAY;cACZ,OAAO,OAAO;cACd,cAAc;aAChB;uBACD;YAEI,CAAA;YACL,oBAAC,OAAD;aACE,OAAO;cACL,UAAU,WAAW,SAAS;cAC9B,OAAO,OAAO;cACd,cAAc;aAChB;uBACD;YAEI,CAAA;YACL,oBAAC,OAAD;aACE,OAAO;cACL,UAAU,WAAW,QAAQ;cAC7B,OAAO,OAAO;cACd,WAAW;aACb;uBACD;YAEI,CAAA;YACL,oBAAC,OAAD;aACE,OAAO;cACL,UAAU,WAAW,QAAQ;cAC7B,OAAO,OAAO;cACd,WAAW;cACX,WAAW;aACb;uBACD;YAEI,CAAA;WACF;;SACF;;QAGL,qBAAC,OAAD;SACE,OAAO;UACL,cAAc,GAAG,gBAAgB,eAAe;UAChD,YAAY,OAAO;UACnB,cAAc;UACd,QAAQ,aAAa,gBACnB,MAAM,OAAO,aACb,EACF;UACA,SAAS;SACX;SACA,eAAY;mBAXd;UAaE,oBAAC,MAAD;WACE,OAAO;YACL,UAAU,WAAW,SAAS;YAC9B,YAAY;YACZ,OAAO,OAAO;YACd,QAAQ;WACV;qBACD;UAEG,CAAA;UACJ,oBAAC,KAAD;WACE,OAAO;YACL,UAAU,WAAW,SAAS;YAC9B,OAAO,OAAO;YACd,WAAW;YACX,QAAQ;WACV;qBACD;UAGE,CAAA;UAGH,oBAAC,OAAD;WACE,OAAO;YACL,SAAS;YACT,qBAAqB,WACjB,mBACA;YACJ,KAAK,WAAW,QAAQ;WAC1B;qBAEC;YAAC;YAAK;YAAK;YAAK;YAAK;YAAK;YAAK;YAAK;YAAK;YAAK;WAAG,EAAE,KACjD,KAAK,UACJ,qBAAC,OAAD;YAEE,OAAO;aACL,YAAY,2BAA2B,gBACrC,MAAM,OAAO,aACb,EACF,EAAE,IAAI,gBAAgB,MAAM,OAAO,aAAa,EAAG,EAAE;aACrD,cAAc;aACd,QAAQ,aAAa,OAAO;aAC5B,SAAS,WAAW,YAAY;aAChC,WAAW;YACb;sBAXF,CAaE,oBAAC,OAAD;aACE,OAAO;cACL,UAAU,WAAW,SAAS;cAC9B,YAAY;cACZ,OAAO,OAAO;aAChB;uBAEC;YACE,CAAA,GACL,qBAAC,OAAD;aACE,OAAO;cACL,UAAU,WAAW,QAAQ;cAC7B,OAAO,OAAO;cACd,WAAW;aACb;uBALF,CAMC,OACK,QAAQ,CACT;cACF;cA9BE,GA8BF,CAET;UACG,CAAA;UAGL,qBAAC,OAAD;WACE,OAAO;YACL,WAAW;YACX,SAAS;YACT,YAAY,gBACV,MAAM,OAAO,oBACb,EACF;YACA,cAAc;YACd,UAAU,WAAW,QAAQ;YAC7B,OAAO,OAAO;YACd,WAAW;WACb;qBAZF;YAaC;YACI,oBAAC,UAAD,EAAA,UAAQ,MAAW,CAAA;YAAC;WAGpB;;SACF;;QAGL,qBAAC,OAAD;SACE,OAAO;UACL,cAAc,GAAG,gBAAgB,eAAe;UAChD,YAAY,OAAO;UACnB,cAAc;UACd,QAAQ,aAAa,OAAO;UAC5B,SAAS;SACX;SACA,eAAY;mBARd,CAUE,oBAAC,MAAD;UACE,OAAO;WACL,UAAU,WAAW,SAAS;WAC9B,YAAY;WACZ,OAAO,IAAI,MAAM,OAAO,WAAW,SAAS,EAAE,EAAE,SAC9C,GACA,GACF;WACA,QAAQ;UACV;oBACD;SAEG,CAAA,GAGJ,oBAAC,OAAD;UACE,OAAO;WACL,SAAS;WACT,eAAe;WACf,KAAK;UACP;oBAEC;WACC;YACE,KAAK;YACL,QAAQ;YACR,SAAS;WACX;WACA;YACE,KAAK;YACL,QAAQ;YACR,SAAS;WACX;WACA;YACE,KAAK;YACL,QAAQ;YACR,SAAS;WACX;WACA;YACE,KAAK;YACL,QAAQ;YACR,SAAS;WACX;UACF,EAAE,KAAK,YACL,qBAAC,OAAD;WAEE,OAAO;YACL,YAAY,gBACV,MAAM,OAAO,qBACb,EACF;YACA,cAAc;YACd,QAAQ,aAAa,OAAO;YAC5B,SAAS;YACT,SAAS;YACT,YAAY;YACZ,KAAK;WACP;qBAbF,CAeE,oBAAC,OAAD;YACE,OAAO;aACL,YAAY,gBACV,MAAM,OAAO,YACb,EACF;aACA,cAAc;aACd,SAAS;aACT,UAAU,WAAW,SAAS;aAC9B,YAAY;aACZ,OAAO,OAAO;aACd,UAAU;aACV,WAAW;YACb;sBAEC,QAAQ;WACN,CAAA,GACL,qBAAC,OAAD;YAAK,OAAO,EAAE,MAAM,EAAE;sBAAtB,CACE,oBAAC,OAAD;aACE,OAAO;cACL,UAAU,WAAW,SAAS;cAC9B,YAAY;cACZ,OAAO,OAAO;aAChB;uBAEC,QAAQ;YACN,CAAA,GACL,oBAAC,OAAD;aACE,OAAO;cACL,UAAU,WAAW,QAAQ;cAC7B,OAAO,OAAO;cACd,WAAW;aACb;uBAEC,QAAQ;YACN,CAAA,CACF;aACF;aAnDE,QAAQ,GAmDV,CACN;SACE,CAAA,CACF;;OACF;;MAGL,oBAAC,wBAAD;OACe;OACH;MACX,CAAA;MAGD,qBAAC,OAAD;OACE,OAAO;QACL,QAAQ,GAAG,gBAAgB,aAAa;QACxC,YAAY,OAAO;QACnB,WAAW,aAAa,OAAO;QAC/B,SAAS;QACT,YAAY;QACZ,gBAAgB;QAChB,SAAS,KAAK,gBAAgB,QAAQ;OACxC;OACA,eAAY;iBAVd;QAaE,oBAAC,OAAD;SACE,OAAO;UACL,UAAU,WAAW,SAAS;UAC9B,OAAO,OAAO;UACd,WAAW;SACb;mBACD;QAEI,CAAA;QAGL,oBAAC,YAAD;SACE,SAAS;SACT,QAAO;SACP,SAAQ;SACE;SACV,QAAO;QACR,CAAA;QAGD,oBAAC,OAAD;SACE,OAAO;UACL,YAAY,gBACV,MAAM,OAAO,sBACb,EACF;UACA,cAAc;UACd,SAAS;UACT,UAAU,WAAW,SAAS;UAC9B,YAAY;UACZ,OAAO,IAAI,MAAM,OAAO,kBAAkB,SAAS,EAAE,EAAE,SACrD,GACA,GACF;UACA,QAAQ,aAAa,OAAO;SAC9B;SACA,eAAY;mBACb;QAEI,CAAA;OACF;;MAGL,oBAAC,OAAD;OACE,OAAO;QACL,WAAW;QACX,SAAS;QACT,UAAU,WAAW,SAAS;QAC9B,OAAO,OAAO;QACd,WAAW;QACX,YAAY,gBAAgB,MAAM,OAAO,oBAAoB,EAAG;OAClE;iBACD;MAEI,CAAA;KACF;MACF;;EACF;;AAET"}
+{"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/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,EAAE,SAAS,GAAG,GAAG,MAC/C,IAAI,MAAM,OAAO,eAAe,SAAS,EAAE,EAAE,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;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"}

package/lib/components/screens/endscreen/components/MatchStatisticsDisplayOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"MatchStatisticsDisplayOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/endscreen/components/MatchStatisticsDisplayOverlayHtml.tsx"],"sourcesContent":["import React from \"react\";\nimport { MatchStatistics } from \"../../../../systems/combat\";\nimport { PlayerMatchStats } from \"../../../../systems/player\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\n\nexport interface MatchStatisticsDisplayProps {\n  readonly matchStats: MatchStatistics;\n  readonly isMobile: boolean;\n  readonly isTablet: boolean;\n}\n\n/**\n * Helper to convert hex color to CSS string\n */\nconst toCssColor = (hex: number): string => hexToRgbaString(hex, 1);\n\n/**\n * Props for StatRow component\n */\ninterface StatRowProps {\n  readonly label: string;\n  readonly value: string | number;\n  readonly highlight?: boolean;\n  readonly fontSize: number;\n  readonly spacing: number;\n}\n\n/**\n * Individual stat row component\n */\nconst StatRow: React.FC<StatRowProps> = ({\n  label,\n  value,\n  highlight = false,\n  fontSize,\n  spacing,\n}) => (\n  <div\n    style={{\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n      marginBottom: spacing / 2,\n      fontSize,\n      color: toCssColor(\n        highlight ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.TEXT_SECONDARY\n      ),\n    }}\n  >\n    <span>{label}:</span>\n    <span\n      style={{\n        fontWeight: \"bold\",\n        color: toCssColor(KOREAN_COLORS.TEXT_PRIMARY),\n      }}\n    >\n      {value}\n    </span>\n  </div>\n);\n\n/**\n * Props for PlayerStats component\n */\ninterface PlayerStatsProps {\n  readonly playerNum: 1 | 2;\n  readonly stats: PlayerMatchStats;\n  readonly isWinner: boolean;\n  readonly fontSize: number;\n  readonly labelFontSize: number;\n  readonly padding: number;\n  readonly spacing: number;\n}\n\n/**\n * Player statistics panel component\n */\nconst PlayerStats: React.FC<PlayerStatsProps> = ({\n  playerNum,\n  stats,\n  isWinner,\n  fontSize,\n  labelFontSize,\n  padding,\n  spacing,\n}) => {\n  return (\n    <div\n      style={{\n        flex: 1,\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.6),\n        border: `2px solid ${hexToRgbaString(\n          isWinner ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.UI_BORDER,\n          0.8\n        )}`,\n        borderRadius: \"8px\",\n        padding,\n      }}\n      data-testid={`player${playerNum}-stats`}\n    >\n      <div\n        style={{\n          fontSize: labelFontSize,\n          fontWeight: \"bold\",\n          color: toCssColor(\n            isWinner ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.PRIMARY_CYAN\n          ),\n          marginBottom: spacing,\n          textAlign: \"center\",\n        }}\n      >\n        플레이어 {playerNum} | Player {playerNum}\n        {isWinner && \" 🏆\"}\n      </div>\n\n      <StatRow\n        label=\"승리 | Wins\"\n        value={stats.wins}\n        highlight={stats.wins > 0}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"패배 | Losses\"\n        value={stats.losses}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"가한 피해 | Damage Dealt\"\n        value={stats.totalDamageDealt}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"받은 피해 | Damage Taken\"\n        value={stats.totalDamageReceived}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"명중 | Hits Landed\"\n        value={stats.hitsLanded}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"피격 | Hits Taken\"\n        value={stats.hitsTaken}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"완벽한 타격 | Perfect Strikes\"\n        value={stats.perfectStrikes}\n        highlight={stats.perfectStrikes > 0}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"급소 공격 | Vital Point Hits\"\n        value={stats.vitalPointHits}\n        highlight={stats.vitalPointHits > 0}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"연승 | Consecutive Wins\"\n        value={stats.consecutiveWins}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n\n      {stats.techniques && stats.techniques.length > 0 && (\n        <div style={{ marginTop: spacing }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n              marginBottom: spacing / 2,\n            }}\n          >\n            사용한 기술 | Techniques Used:\n          </div>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n              paddingLeft: spacing,\n            }}\n          >\n            {stats.techniques.slice(0, 5).join(\", \")}\n            {stats.techniques.length > 5 && \"...\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * Match Statistics Display Component\n * Shows detailed combat statistics for both players\n */\nexport const MatchStatisticsDisplay: React.FC<MatchStatisticsDisplayProps> = ({\n  matchStats,\n  isMobile,\n  isTablet,\n}) => {\n  const fontSize = isMobile ? 12 : isTablet ? 14 : 16;\n  const labelFontSize = isMobile ? 14 : isTablet ? 16 : 18;\n  const padding = isMobile ? 10 : isTablet ? 15 : 20;\n  const spacing = isMobile ? 8 : isTablet ? 10 : 12;\n\n  return (\n    <div\n      data-testid=\"match-statistics-display\"\n      style={{\n        width: isMobile ? \"95%\" : isTablet ? \"80%\" : \"70%\",\n        maxWidth: \"900px\",\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9),\n        border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.6)}`,\n        borderRadius: \"12px\",\n        padding: padding * 1.5,\n        marginBottom: spacing * 2,\n        fontFamily: FONT_FAMILY.KOREAN,\n      }}\n    >\n      {/* Overall Match Stats */}\n      <div\n        style={{\n          fontSize: labelFontSize + 2,\n          fontWeight: \"bold\",\n          color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),\n          textAlign: \"center\",\n          marginBottom: spacing * 1.5,\n        }}\n      >\n        경기 통계 | Match Statistics\n      </div>\n\n      <div\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: isMobile ? \"1fr 1fr\" : \"repeat(4, 1fr)\",\n          gap: spacing,\n          marginBottom: spacing * 1.5,\n          padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n        }}\n        data-testid=\"overall-stats\"\n      >\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            }}\n          >\n            라운드 | Rounds\n          </div>\n          <div\n            style={{\n              fontSize: labelFontSize,\n              color: toCssColor(KOREAN_COLORS.TEXT_PRIMARY),\n              fontWeight: \"bold\",\n            }}\n          >\n            {matchStats.currentRound} / {matchStats.maxRounds}\n          </div>\n        </div>\n\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            }}\n          >\n            시간 | Duration\n          </div>\n          <div\n            style={{\n              fontSize: labelFontSize,\n              color: toCssColor(KOREAN_COLORS.TEXT_PRIMARY),\n              fontWeight: \"bold\",\n            }}\n          >\n            {Math.floor(matchStats.matchDuration / 60)}:\n            {(matchStats.matchDuration % 60).toString().padStart(2, \"0\")}\n          </div>\n        </div>\n\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            }}\n          >\n            치명타 | Critical Hits\n          </div>\n          <div\n            style={{\n              fontSize: labelFontSize,\n              color: toCssColor(KOREAN_COLORS.CRITICAL_HIT),\n              fontWeight: \"bold\",\n            }}\n          >\n            {matchStats.criticalHits}\n          </div>\n        </div>\n\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            }}\n          >\n            급소 공격 | Vital Hits\n          </div>\n          <div\n            style={{\n              fontSize: labelFontSize,\n              color: toCssColor(KOREAN_COLORS.VITAL_POINT_HIT),\n              fontWeight: \"bold\",\n            }}\n          >\n            {matchStats.vitalPointHits}\n          </div>\n        </div>\n      </div>\n\n      {/* Player Stats Side by Side */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: isMobile ? \"column\" : \"row\",\n          gap: spacing * 1.5,\n        }}\n      >\n        <PlayerStats\n          playerNum={1}\n          stats={matchStats.player1}\n          isWinner={matchStats.winner === 0}\n          fontSize={fontSize}\n          labelFontSize={labelFontSize}\n          padding={padding}\n          spacing={spacing}\n        />\n        <PlayerStats\n          playerNum={2}\n          stats={matchStats.player2}\n          isWinner={matchStats.winner === 1}\n          fontSize={fontSize}\n          labelFontSize={labelFontSize}\n          padding={padding}\n          spacing={spacing}\n        />\n      </div>\n\n      {/* Score Display */}\n      <div\n        style={{\n          marginTop: spacing * 1.5,\n          padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n          textAlign: \"center\",\n        }}\n        data-testid=\"final-score\"\n      >\n        <div\n          style={{\n            fontSize: labelFontSize,\n            color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n            marginBottom: spacing / 2,\n          }}\n        >\n          최종 점수 | Final Score\n        </div>\n        <div\n          style={{\n            fontSize: labelFontSize + 4,\n            fontWeight: \"bold\",\n            color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n          }}\n        >\n          {matchStats.finalScore.player1} - {matchStats.finalScore.player2}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MatchStatisticsDisplayOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/endscreen/components/MatchStatisticsDisplayOverlayHtml.tsx"],"sourcesContent":["import React from \"react\";\nimport { MatchStatistics } from \"../../../../systems/combat\";\nimport { PlayerMatchStats } from \"../../../../systems/player\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\n\nexport interface MatchStatisticsDisplayProps {\n  readonly matchStats: MatchStatistics;\n  readonly isMobile: boolean;\n  readonly isTablet: boolean;\n}\n\n/**\n * Helper to convert hex color to CSS string\n */\nconst toCssColor = (hex: number): string => hexToRgbaString(hex, 1);\n\n/**\n * Props for StatRow component\n */\ninterface StatRowProps {\n  readonly label: string;\n  readonly value: string | number;\n  readonly highlight?: boolean;\n  readonly fontSize: number;\n  readonly spacing: number;\n}\n\n/**\n * Individual stat row component\n */\nconst StatRow: React.FC<StatRowProps> = ({\n  label,\n  value,\n  highlight = false,\n  fontSize,\n  spacing,\n}) => (\n  <div\n    style={{\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n      marginBottom: spacing / 2,\n      fontSize,\n      color: toCssColor(\n        highlight ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.TEXT_SECONDARY\n      ),\n    }}\n  >\n    <span>{label}:</span>\n    <span\n      style={{\n        fontWeight: \"bold\",\n        color: toCssColor(KOREAN_COLORS.TEXT_PRIMARY),\n      }}\n    >\n      {value}\n    </span>\n  </div>\n);\n\n/**\n * Props for PlayerStats component\n */\ninterface PlayerStatsProps {\n  readonly playerNum: 1 | 2;\n  readonly stats: PlayerMatchStats;\n  readonly isWinner: boolean;\n  readonly fontSize: number;\n  readonly labelFontSize: number;\n  readonly padding: number;\n  readonly spacing: number;\n}\n\n/**\n * Player statistics panel component\n */\nconst PlayerStats: React.FC<PlayerStatsProps> = ({\n  playerNum,\n  stats,\n  isWinner,\n  fontSize,\n  labelFontSize,\n  padding,\n  spacing,\n}) => {\n  return (\n    <div\n      style={{\n        flex: 1,\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.6),\n        border: `2px solid ${hexToRgbaString(\n          isWinner ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.UI_BORDER,\n          0.8\n        )}`,\n        borderRadius: \"8px\",\n        padding,\n      }}\n      data-testid={`player${playerNum}-stats`}\n    >\n      <div\n        style={{\n          fontSize: labelFontSize,\n          fontWeight: \"bold\",\n          color: toCssColor(\n            isWinner ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.PRIMARY_CYAN\n          ),\n          marginBottom: spacing,\n          textAlign: \"center\",\n        }}\n      >\n        플레이어 {playerNum} | Player {playerNum}\n        {isWinner && \" 🏆\"}\n      </div>\n\n      <StatRow\n        label=\"승리 | Wins\"\n        value={stats.wins}\n        highlight={stats.wins > 0}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"패배 | Losses\"\n        value={stats.losses}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"가한 피해 | Damage Dealt\"\n        value={stats.totalDamageDealt}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"받은 피해 | Damage Taken\"\n        value={stats.totalDamageReceived}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"명중 | Hits Landed\"\n        value={stats.hitsLanded}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"피격 | Hits Taken\"\n        value={stats.hitsTaken}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"완벽한 타격 | Perfect Strikes\"\n        value={stats.perfectStrikes}\n        highlight={stats.perfectStrikes > 0}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"급소 공격 | Vital Point Hits\"\n        value={stats.vitalPointHits}\n        highlight={stats.vitalPointHits > 0}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"연승 | Consecutive Wins\"\n        value={stats.consecutiveWins}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n\n      {stats.techniques && stats.techniques.length > 0 && (\n        <div style={{ marginTop: spacing }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n              marginBottom: spacing / 2,\n            }}\n          >\n            사용한 기술 | Techniques Used:\n          </div>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n              paddingLeft: spacing,\n            }}\n          >\n            {stats.techniques.slice(0, 5).join(\", \")}\n            {stats.techniques.length > 5 && \"...\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * Match Statistics Display Component\n * Shows detailed combat statistics for both players\n */\nexport const MatchStatisticsDisplay: React.FC<MatchStatisticsDisplayProps> = ({\n  matchStats,\n  isMobile,\n  isTablet,\n}) => {\n  const fontSize = isMobile ? 12 : isTablet ? 14 : 16;\n  const labelFontSize = isMobile ? 14 : isTablet ? 16 : 18;\n  const padding = isMobile ? 10 : isTablet ? 15 : 20;\n  const spacing = isMobile ? 8 : isTablet ? 10 : 12;\n\n  return (\n    <div\n      data-testid=\"match-statistics-display\"\n      style={{\n        width: isMobile ? \"95%\" : isTablet ? \"80%\" : \"70%\",\n        maxWidth: \"900px\",\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9),\n        border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.6)}`,\n        borderRadius: \"12px\",\n        padding: padding * 1.5,\n        marginBottom: spacing * 2,\n        fontFamily: FONT_FAMILY.KOREAN,\n      }}\n    >\n      {/* Overall Match Stats */}\n      <div\n        style={{\n          fontSize: labelFontSize + 2,\n          fontWeight: \"bold\",\n          color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),\n          textAlign: \"center\",\n          marginBottom: spacing * 1.5,\n        }}\n      >\n        경기 통계 | Match Statistics\n      </div>\n\n      <div\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: isMobile ? \"1fr 1fr\" : \"repeat(4, 1fr)\",\n          gap: spacing,\n          marginBottom: spacing * 1.5,\n          padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n        }}\n        data-testid=\"overall-stats\"\n      >\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            }}\n          >\n            라운드 | Rounds\n          </div>\n          <div\n            style={{\n              fontSize: labelFontSize,\n              color: toCssColor(KOREAN_COLORS.TEXT_PRIMARY),\n              fontWeight: \"bold\",\n            }}\n          >\n            {matchStats.currentRound} / {matchStats.maxRounds}\n          </div>\n        </div>\n\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            }}\n          >\n            시간 | Duration\n          </div>\n          <div\n            style={{\n              fontSize: labelFontSize,\n              color: toCssColor(KOREAN_COLORS.TEXT_PRIMARY),\n              fontWeight: \"bold\",\n            }}\n          >\n            {Math.floor(matchStats.matchDuration / 60)}:\n            {(matchStats.matchDuration % 60).toString().padStart(2, \"0\")}\n          </div>\n        </div>\n\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            }}\n          >\n            치명타 | Critical Hits\n          </div>\n          <div\n            style={{\n              fontSize: labelFontSize,\n              color: toCssColor(KOREAN_COLORS.CRITICAL_HIT),\n              fontWeight: \"bold\",\n            }}\n          >\n            {matchStats.criticalHits}\n          </div>\n        </div>\n\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            }}\n          >\n            급소 공격 | Vital Hits\n          </div>\n          <div\n            style={{\n              fontSize: labelFontSize,\n              color: toCssColor(KOREAN_COLORS.VITAL_POINT_HIT),\n              fontWeight: \"bold\",\n            }}\n          >\n            {matchStats.vitalPointHits}\n          </div>\n        </div>\n      </div>\n\n      {/* Player Stats Side by Side */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: isMobile ? \"column\" : \"row\",\n          gap: spacing * 1.5,\n        }}\n      >\n        <PlayerStats\n          playerNum={1}\n          stats={matchStats.player1}\n          isWinner={matchStats.winner === 0}\n          fontSize={fontSize}\n          labelFontSize={labelFontSize}\n          padding={padding}\n          spacing={spacing}\n        />\n        <PlayerStats\n          playerNum={2}\n          stats={matchStats.player2}\n          isWinner={matchStats.winner === 1}\n          fontSize={fontSize}\n          labelFontSize={labelFontSize}\n          padding={padding}\n          spacing={spacing}\n        />\n      </div>\n\n      {/* Score Display */}\n      <div\n        style={{\n          marginTop: spacing * 1.5,\n          padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n          textAlign: \"center\",\n        }}\n        data-testid=\"final-score\"\n      >\n        <div\n          style={{\n            fontSize: labelFontSize,\n            color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n            marginBottom: spacing / 2,\n          }}\n        >\n          최종 점수 | Final Score\n        </div>\n        <div\n          style={{\n            fontSize: labelFontSize + 4,\n            fontWeight: \"bold\",\n            color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n          }}\n        >\n          {matchStats.finalScore.player1} - {matchStats.finalScore.player2}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/lib/components/screens/endscreen/components/PerformanceBreakdownOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"PerformanceBreakdownOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/endscreen/components/PerformanceBreakdownOverlayHtml.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { MatchStatistics } from \"../../../../systems/combat\";\nimport { PlayerMatchStats } from \"../../../../systems/player\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\n\nexport interface PerformanceBreakdownProps {\n  readonly matchStats: MatchStatistics;\n  readonly isMobile: boolean;\n  readonly isTablet: boolean;\n}\n\n/**\n * Helper to convert hex color to CSS string\n */\nconst toCssColor = (hex: number): string => hexToRgbaString(hex, 1);\n\n/**\n * Category rating component\n */\ninterface CategoryRatingProps {\n  readonly category: string;\n  readonly korean: string;\n  readonly value: number;\n  readonly maxValue: number;\n  readonly color: number;\n  readonly fontSize: number;\n}\n\nconst CategoryRating: React.FC<CategoryRatingProps> = ({\n  category,\n  korean,\n  value,\n  maxValue,\n  color,\n  fontSize,\n}) => {\n  const percentage = Math.round((value / maxValue) * 100);\n  const grade = percentage >= 90 ? \"S\" : percentage >= 75 ? \"A\" : percentage >= 60 ? \"B\" : \"C\";\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"6px\",\n      }}\n      data-testid={`category-${category.toLowerCase()}`}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          fontSize: fontSize - 2,\n          color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n        }}\n      >\n        <span>{korean} | {category}</span>\n        <span\n          style={{\n            fontWeight: \"bold\",\n            color: toCssColor(color),\n            fontSize: fontSize + 2,\n          }}\n        >\n          {grade}\n        </span>\n      </div>\n      <div\n        style={{\n          width: \"100%\",\n          height: \"8px\",\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.5),\n          borderRadius: \"4px\",\n          overflow: \"hidden\",\n        }}\n      >\n        <div\n          style={{\n            width: `${percentage}%`,\n            height: \"100%\",\n            background: toCssColor(color),\n            transition: \"width 0.5s ease-out\",\n          }}\n          data-testid={`progress-${category.toLowerCase()}`}\n        />\n      </div>\n    </div>\n  );\n};\n\n/**\n * Calculate category scores from match statistics\n */\nfunction calculateCategoryScores(stats: PlayerMatchStats) {\n  const offense = Math.min(\n    (stats.totalDamageDealt / 100) * 50 + (stats.hitsLanded / 10) * 50,\n    100\n  );\n\n  const defenseRaw = Math.max(0, 100 - stats.totalDamageReceived / 2);\n  const defense = Math.min(defenseRaw, 100);\n\n  const technique = Math.min(\n    stats.perfectStrikes * 15 + stats.vitalPointHits * 10,\n    100\n  );\n\n  const damageRatio =\n    stats.totalDamageReceived > 0\n      ? stats.totalDamageDealt / stats.totalDamageReceived\n      : stats.totalDamageDealt > 0\n      ? 2\n      : 0;\n  const efficiency = Math.min(damageRatio * 40, 100);\n\n  return { offense, defense, technique, efficiency };\n}\n\n/**\n * Performance Breakdown Component\n * Provides detailed analysis of combat performance by category\n */\nexport const PerformanceBreakdown: React.FC<PerformanceBreakdownProps> = ({\n  matchStats,\n  isMobile,\n  isTablet,\n}) => {\n  const fontSize = isMobile ? 12 : isTablet ? 13 : 14;\n  const labelFontSize = isMobile ? 14 : isTablet ? 16 : 18;\n  const padding = isMobile ? 12 : isTablet ? 15 : 18;\n\n  const winnerStats = useMemo(\n    () => (matchStats.winner === 0 ? matchStats.player1 : matchStats.player2),\n    [matchStats]\n  );\n\n  const scores = useMemo(\n    () => calculateCategoryScores(winnerStats),\n    [winnerStats]\n  );\n\n  const techniqueCount = winnerStats.techniques?.length ?? 0;\n  const uniqueTechniques = useMemo(() => {\n    if (!winnerStats.techniques || winnerStats.techniques.length === 0) {\n      return 0;\n    }\n    return new Set(winnerStats.techniques).size;\n  }, [winnerStats.techniques]);\n\n  return (\n    <div\n      data-testid=\"performance-breakdown\"\n      style={{\n        width: isMobile ? \"95%\" : isTablet ? \"80%\" : \"70%\",\n        maxWidth: \"900px\",\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9),\n        border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.6)}`,\n        borderRadius: \"12px\",\n        padding: padding * 1.5,\n        marginBottom: padding,\n        fontFamily: FONT_FAMILY.KOREAN,\n      }}\n    >\n      {/* Title */}\n      <div\n        style={{\n          fontSize: labelFontSize + 2,\n          fontWeight: \"bold\",\n          color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),\n          textAlign: \"center\",\n          marginBottom: padding * 1.5,\n        }}\n        data-testid=\"breakdown-title\"\n      >\n        전투 분석 | Performance Breakdown\n      </div>\n\n      {/* Category Ratings */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: padding,\n          marginBottom: padding * 1.5,\n        }}\n        data-testid=\"category-ratings\"\n      >\n        <CategoryRating\n          category=\"Offense\"\n          korean=\"공격\"\n          value={scores.offense}\n          maxValue={100}\n          color={KOREAN_COLORS.ACCENT_RED}\n          fontSize={fontSize}\n        />\n        <CategoryRating\n          category=\"Defense\"\n          korean=\"방어\"\n          value={scores.defense}\n          maxValue={100}\n          color={KOREAN_COLORS.ACCENT_BLUE}\n          fontSize={fontSize}\n        />\n        <CategoryRating\n          category=\"Technique\"\n          korean=\"기술\"\n          value={scores.technique}\n          maxValue={100}\n          color={KOREAN_COLORS.ACCENT_GOLD}\n          fontSize={fontSize}\n        />\n        <CategoryRating\n          category=\"Efficiency\"\n          korean=\"효율\"\n          value={scores.efficiency}\n          maxValue={100}\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          fontSize={fontSize}\n        />\n      </div>\n\n      {/* Technique Analysis */}\n      <div\n        style={{\n          padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n        }}\n        data-testid=\"technique-analysis\"\n      >\n        <div\n          style={{\n            fontSize: labelFontSize,\n            fontWeight: \"bold\",\n            color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n            marginBottom: padding / 2,\n            textAlign: \"center\",\n          }}\n        >\n          기술 사용 분석 | Technique Analysis\n        </div>\n\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: isMobile ? \"1fr\" : \"1fr 1fr 1fr\",\n            gap: padding,\n            marginTop: padding,\n          }}\n        >\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                fontSize: fontSize + 6,\n                fontWeight: \"bold\",\n                color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),\n              }}\n            >\n              {techniqueCount}\n            </div>\n            <div\n              style={{\n                fontSize: fontSize - 2,\n                color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n              }}\n            >\n              총 기술 | Total Uses\n            </div>\n          </div>\n\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                fontSize: fontSize + 6,\n                fontWeight: \"bold\",\n                color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n              }}\n            >\n              {uniqueTechniques}\n            </div>\n            <div\n              style={{\n                fontSize: fontSize - 2,\n                color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n              }}\n            >\n              고유 기술 | Unique\n            </div>\n          </div>\n\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                fontSize: fontSize + 6,\n                fontWeight: \"bold\",\n                color: toCssColor(KOREAN_COLORS.VITAL_POINT_HIT),\n              }}\n            >\n              {winnerStats.vitalPointHits ?? 0}\n            </div>\n            <div\n              style={{\n                fontSize: fontSize - 2,\n                color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n              }}\n            >\n              급소 타격 | Vital Hits\n            </div>\n          </div>\n        </div>\n\n        {/* Most Used Techniques */}\n        {winnerStats.techniques && winnerStats.techniques.length > 0 && (\n          <div\n            style={{\n              marginTop: padding,\n              paddingTop: padding,\n              borderTop: `1px solid ${hexToRgbaString(\n                KOREAN_COLORS.UI_BORDER,\n                0.3\n              )}`,\n            }}\n          >\n            <div\n              style={{\n                fontSize: fontSize - 2,\n                color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n                marginBottom: padding / 2,\n              }}\n            >\n              주요 기술 | Primary Techniques:\n            </div>\n            <div\n              style={{\n                fontSize: fontSize,\n                color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n                lineHeight: 1.6,\n              }}\n            >\n              {winnerStats.techniques.slice(0, 5).join(\", \")}\n              {winnerStats.techniques.length > 5 && \"...\"}\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Combat Effectiveness Summary */}\n      <div\n        style={{\n          marginTop: padding,\n          padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n          textAlign: \"center\",\n        }}\n        data-testid=\"effectiveness-summary\"\n      >\n        <div\n          style={{\n            fontSize: fontSize - 2,\n            color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            marginBottom: padding / 4,\n          }}\n        >\n          전투 효율성 | Combat Effectiveness\n        </div>\n        <div\n          style={{\n            fontSize: labelFontSize + 2,\n            fontWeight: \"bold\",\n            color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n          }}\n        >\n          {Math.round((scores.offense + scores.defense + scores.technique + scores.efficiency) / 4)}%\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAeA,IAAM,cAAc,QAAwB,gBAAgB,KAAK,CAAC;AAclE,IAAM,kBAAiD,EACrD,UACA,QACA,OACA,UACA,OACA,eACI;CACJ,MAAM,aAAa,KAAK,MAAO,QAAQ,WAAY,GAAG;CACtD,MAAM,QAAQ,cAAc,KAAK,MAAM,cAAc,KAAK,MAAM,cAAc,KAAK,MAAM;CAEzF,OACE,qBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,eAAa,YAAY,SAAS,YAAY;YANhD,CAQE,qBAAC,OAAD;GACE,OAAO;IACL,SAAS;IACT,gBAAgB;IAChB,YAAY;IACZ,UAAU,WAAW;IACrB,OAAO,WAAW,cAAc,cAAc;GAChD;aAPF,CASE,qBAAC,QAAD,EAAA,UAAA;IAAO;IAAO;IAAI;GAAe,EAAA,CAAA,GACjC,oBAAC,QAAD;IACE,OAAO;KACL,YAAY;KACZ,OAAO,WAAW,KAAK;KACvB,UAAU,WAAW;IACvB;cAEC;GACG,CAAA,CACH;MACL,oBAAC,OAAD;GACE,OAAO;IACL,OAAO;IACP,QAAQ;IACR,YAAY,gBAAgB,cAAc,sBAAsB,EAAG;IACnE,cAAc;IACd,UAAU;GACZ;aAEA,oBAAC,OAAD;IACE,OAAO;KACL,OAAO,GAAG,WAAW;KACrB,QAAQ;KACR,YAAY,WAAW,KAAK;KAC5B,YAAY;IACd;IACA,eAAa,YAAY,SAAS,YAAY;GAC/C,CAAA;EACE,CAAA,CACF;;AAET;;;;AAKA,SAAS,wBAAwB,OAAyB;CACxD,MAAM,UAAU,KAAK,IAClB,MAAM,mBAAmB,MAAO,KAAM,MAAM,aAAa,KAAM,IAChE,GACF;CAEA,MAAM,aAAa,KAAK,IAAI,GAAG,MAAM,MAAM,sBAAsB,CAAC;CAClE,MAAM,UAAU,KAAK,IAAI,YAAY,GAAG;CAExC,MAAM,YAAY,KAAK,IACrB,MAAM,iBAAiB,KAAK,MAAM,iBAAiB,IACnD,GACF;CAEA,MAAM,cACJ,MAAM,sBAAsB,IACxB,MAAM,mBAAmB,MAAM,sBAC/B,MAAM,mBAAmB,IACzB,IACA;CAGN,OAAO;EAAE;EAAS;EAAS;EAAW,YAFnB,KAAK,IAAI,cAAc,IAAI,GAER;CAAW;AACnD;;;;;AAMA,IAAa,wBAA6D,EACxE,YACA,UACA,eACI;CACJ,MAAM,WAAW,WAAW,KAAK,WAAW,KAAK;CACjD,MAAM,gBAAgB,WAAW,KAAK,WAAW,KAAK;CACtD,MAAM,UAAU,WAAW,KAAK,WAAW,KAAK;CAEhD,MAAM,cAAc,cACX,WAAW,WAAW,IAAI,WAAW,UAAU,WAAW,SACjE,CAAC,UAAU,CACb;CAEA,MAAM,SAAS,cACP,wBAAwB,WAAW,GACzC,CAAC,WAAW,CACd;CAEA,MAAM,iBAAiB,YAAY,YAAY,UAAU;CACzD,MAAM,mBAAmB,cAAc;EACrC,IAAI,CAAC,YAAY,cAAc,YAAY,WAAW,WAAW,GAC/D,OAAO;EAET,OAAO,IAAI,IAAI,YAAY,UAAU,EAAE;CACzC,GAAG,CAAC,YAAY,UAAU,CAAC;CAE3B,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,OAAO;GACL,OAAO,WAAW,QAAQ,WAAW,QAAQ;GAC7C,UAAU;GACV,YAAY,gBAAgB,cAAc,oBAAoB,EAAG;GACjE,QAAQ,aAAa,gBAAgB,cAAc,cAAc,EAAG;GACpE,cAAc;GACd,SAAS,UAAU;GACnB,cAAc;GACd,YAAY,YAAY;EAC1B;YAXF;GAcE,oBAAC,OAAD;IACE,OAAO;KACL,UAAU,gBAAgB;KAC1B,YAAY;KACZ,OAAO,WAAW,cAAc,YAAY;KAC5C,WAAW;KACX,cAAc,UAAU;IAC1B;IACA,eAAY;cACb;GAEI,CAAA;GAGL,qBAAC,OAAD;IACE,OAAO;KACL,SAAS;KACT,eAAe;KACf,KAAK;KACL,cAAc,UAAU;IAC1B;IACA,eAAY;cAPd;KASE,oBAAC,gBAAD;MACE,UAAS;MACT,QAAO;MACP,OAAO,OAAO;MACd,UAAU;MACV,OAAO,cAAc;MACX;KACX,CAAA;KACD,oBAAC,gBAAD;MACE,UAAS;MACT,QAAO;MACP,OAAO,OAAO;MACd,UAAU;MACV,OAAO,cAAc;MACX;KACX,CAAA;KACD,oBAAC,gBAAD;MACE,UAAS;MACT,QAAO;MACP,OAAO,OAAO;MACd,UAAU;MACV,OAAO,cAAc;MACX;KACX,CAAA;KACD,oBAAC,gBAAD;MACE,UAAS;MACT,QAAO;MACP,OAAO,OAAO;MACd,UAAU;MACV,OAAO,cAAc;MACX;KACX,CAAA;IACE;;GAGL,qBAAC,OAAD;IACE,OAAO;KACL;KACA,YAAY,gBAAgB,cAAc,sBAAsB,EAAG;KACnE,cAAc;IAChB;IACA,eAAY;cANd;KAQE,oBAAC,OAAD;MACE,OAAO;OACL,UAAU;OACV,YAAY;OACZ,OAAO,WAAW,cAAc,WAAW;OAC3C,cAAc,UAAU;OACxB,WAAW;MACb;gBACD;KAEI,CAAA;KAEL,qBAAC,OAAD;MACE,OAAO;OACL,SAAS;OACT,qBAAqB,WAAW,QAAQ;OACxC,KAAK;OACL,WAAW;MACb;gBANF;OAQE,qBAAC,OAAD;QAAK,OAAO,EAAE,WAAW,SAAS;kBAAlC,CACE,oBAAC,OAAD;SACE,OAAO;UACL,UAAU,WAAW;UACrB,YAAY;UACZ,OAAO,WAAW,cAAc,YAAY;SAC9C;mBAEC;QACE,CAAA,GACL,oBAAC,OAAD;SACE,OAAO;UACL,UAAU,WAAW;UACrB,OAAO,WAAW,cAAc,aAAa;SAC/C;mBACD;QAEI,CAAA,CACF;;OAEL,qBAAC,OAAD;QAAK,OAAO,EAAE,WAAW,SAAS;kBAAlC,CACE,oBAAC,OAAD;SACE,OAAO;UACL,UAAU,WAAW;UACrB,YAAY;UACZ,OAAO,WAAW,cAAc,WAAW;SAC7C;mBAEC;QACE,CAAA,GACL,oBAAC,OAAD;SACE,OAAO;UACL,UAAU,WAAW;UACrB,OAAO,WAAW,cAAc,aAAa;SAC/C;mBACD;QAEI,CAAA,CACF;;OAEL,qBAAC,OAAD;QAAK,OAAO,EAAE,WAAW,SAAS;kBAAlC,CACE,oBAAC,OAAD;SACE,OAAO;UACL,UAAU,WAAW;UACrB,YAAY;UACZ,OAAO,WAAW,cAAc,eAAe;SACjD;mBAEC,YAAY,kBAAkB;QAC5B,CAAA,GACL,oBAAC,OAAD;SACE,OAAO;UACL,UAAU,WAAW;UACrB,OAAO,WAAW,cAAc,aAAa;SAC/C;mBACD;QAEI,CAAA,CACF;;MACF;;KAGJ,YAAY,cAAc,YAAY,WAAW,SAAS,KACzD,qBAAC,OAAD;MACE,OAAO;OACL,WAAW;OACX,YAAY;OACZ,WAAW,aAAa,gBACtB,cAAc,WACd,EACF;MACF;gBARF,CAUE,oBAAC,OAAD;OACE,OAAO;QACL,UAAU,WAAW;QACrB,OAAO,WAAW,cAAc,aAAa;QAC7C,cAAc,UAAU;OAC1B;iBACD;MAEI,CAAA,GACL,qBAAC,OAAD;OACE,OAAO;QACK;QACV,OAAO,WAAW,cAAc,cAAc;QAC9C,YAAY;OACd;iBALF,CAOG,YAAY,WAAW,MAAM,GAAG,CAAC,EAAE,KAAK,IAAI,GAC5C,YAAY,WAAW,SAAS,KAAK,KACnC;QACF;;IAEJ;;GAGL,qBAAC,OAAD;IACE,OAAO;KACL,WAAW;KACX;KACA,YAAY,gBAAgB,cAAc,sBAAsB,EAAG;KACnE,cAAc;KACd,WAAW;IACb;IACA,eAAY;cARd,CAUE,oBAAC,OAAD;KACE,OAAO;MACL,UAAU,WAAW;MACrB,OAAO,WAAW,cAAc,aAAa;MAC7C,cAAc,UAAU;KAC1B;eACD;IAEI,CAAA,GACL,qBAAC,OAAD;KACE,OAAO;MACL,UAAU,gBAAgB;MAC1B,YAAY;MACZ,OAAO,WAAW,cAAc,WAAW;KAC7C;eALF,CAOG,KAAK,OAAO,OAAO,UAAU,OAAO,UAAU,OAAO,YAAY,OAAO,cAAc,CAAC,GAAE,GACvF;MACF;;EACF;;AAET"}
+{"version":3,"file":"PerformanceBreakdownOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/endscreen/components/PerformanceBreakdownOverlayHtml.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { MatchStatistics } from \"../../../../systems/combat\";\nimport { PlayerMatchStats } from \"../../../../systems/player\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\n\nexport interface PerformanceBreakdownProps {\n  readonly matchStats: MatchStatistics;\n  readonly isMobile: boolean;\n  readonly isTablet: boolean;\n}\n\n/**\n * Helper to convert hex color to CSS string\n */\nconst toCssColor = (hex: number): string => hexToRgbaString(hex, 1);\n\n/**\n * Category rating component\n */\ninterface CategoryRatingProps {\n  readonly category: string;\n  readonly korean: string;\n  readonly value: number;\n  readonly maxValue: number;\n  readonly color: number;\n  readonly fontSize: number;\n}\n\nconst CategoryRating: React.FC<CategoryRatingProps> = ({\n  category,\n  korean,\n  value,\n  maxValue,\n  color,\n  fontSize,\n}) => {\n  const percentage = Math.round((value / maxValue) * 100);\n  const grade = percentage >= 90 ? \"S\" : percentage >= 75 ? \"A\" : percentage >= 60 ? \"B\" : \"C\";\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"6px\",\n      }}\n      data-testid={`category-${category.toLowerCase()}`}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          fontSize: fontSize - 2,\n          color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n        }}\n      >\n        <span>{korean} | {category}</span>\n        <span\n          style={{\n            fontWeight: \"bold\",\n            color: toCssColor(color),\n            fontSize: fontSize + 2,\n          }}\n        >\n          {grade}\n        </span>\n      </div>\n      <div\n        style={{\n          width: \"100%\",\n          height: \"8px\",\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.5),\n          borderRadius: \"4px\",\n          overflow: \"hidden\",\n        }}\n      >\n        <div\n          style={{\n            width: `${percentage}%`,\n            height: \"100%\",\n            background: toCssColor(color),\n            transition: \"width 0.5s ease-out\",\n          }}\n          data-testid={`progress-${category.toLowerCase()}`}\n        />\n      </div>\n    </div>\n  );\n};\n\n/**\n * Calculate category scores from match statistics\n */\nfunction calculateCategoryScores(stats: PlayerMatchStats) {\n  const offense = Math.min(\n    (stats.totalDamageDealt / 100) * 50 + (stats.hitsLanded / 10) * 50,\n    100\n  );\n\n  const defenseRaw = Math.max(0, 100 - stats.totalDamageReceived / 2);\n  const defense = Math.min(defenseRaw, 100);\n\n  const technique = Math.min(\n    stats.perfectStrikes * 15 + stats.vitalPointHits * 10,\n    100\n  );\n\n  const damageRatio =\n    stats.totalDamageReceived > 0\n      ? stats.totalDamageDealt / stats.totalDamageReceived\n      : stats.totalDamageDealt > 0\n      ? 2\n      : 0;\n  const efficiency = Math.min(damageRatio * 40, 100);\n\n  return { offense, defense, technique, efficiency };\n}\n\n/**\n * Performance Breakdown Component\n * Provides detailed analysis of combat performance by category\n */\nexport const PerformanceBreakdown: React.FC<PerformanceBreakdownProps> = ({\n  matchStats,\n  isMobile,\n  isTablet,\n}) => {\n  const fontSize = isMobile ? 12 : isTablet ? 13 : 14;\n  const labelFontSize = isMobile ? 14 : isTablet ? 16 : 18;\n  const padding = isMobile ? 12 : isTablet ? 15 : 18;\n\n  const winnerStats = useMemo(\n    () => (matchStats.winner === 0 ? matchStats.player1 : matchStats.player2),\n    [matchStats]\n  );\n\n  const scores = useMemo(\n    () => calculateCategoryScores(winnerStats),\n    [winnerStats]\n  );\n\n  const techniqueCount = winnerStats.techniques?.length ?? 0;\n  const uniqueTechniques = useMemo(() => {\n    if (!winnerStats.techniques || winnerStats.techniques.length === 0) {\n      return 0;\n    }\n    return new Set(winnerStats.techniques).size;\n  }, [winnerStats.techniques]);\n\n  return (\n    <div\n      data-testid=\"performance-breakdown\"\n      style={{\n        width: isMobile ? \"95%\" : isTablet ? \"80%\" : \"70%\",\n        maxWidth: \"900px\",\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9),\n        border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.6)}`,\n        borderRadius: \"12px\",\n        padding: padding * 1.5,\n        marginBottom: padding,\n        fontFamily: FONT_FAMILY.KOREAN,\n      }}\n    >\n      {/* Title */}\n      <div\n        style={{\n          fontSize: labelFontSize + 2,\n          fontWeight: \"bold\",\n          color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),\n          textAlign: \"center\",\n          marginBottom: padding * 1.5,\n        }}\n        data-testid=\"breakdown-title\"\n      >\n        전투 분석 | Performance Breakdown\n      </div>\n\n      {/* Category Ratings */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: padding,\n          marginBottom: padding * 1.5,\n        }}\n        data-testid=\"category-ratings\"\n      >\n        <CategoryRating\n          category=\"Offense\"\n          korean=\"공격\"\n          value={scores.offense}\n          maxValue={100}\n          color={KOREAN_COLORS.ACCENT_RED}\n          fontSize={fontSize}\n        />\n        <CategoryRating\n          category=\"Defense\"\n          korean=\"방어\"\n          value={scores.defense}\n          maxValue={100}\n          color={KOREAN_COLORS.ACCENT_BLUE}\n          fontSize={fontSize}\n        />\n        <CategoryRating\n          category=\"Technique\"\n          korean=\"기술\"\n          value={scores.technique}\n          maxValue={100}\n          color={KOREAN_COLORS.ACCENT_GOLD}\n          fontSize={fontSize}\n        />\n        <CategoryRating\n          category=\"Efficiency\"\n          korean=\"효율\"\n          value={scores.efficiency}\n          maxValue={100}\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          fontSize={fontSize}\n        />\n      </div>\n\n      {/* Technique Analysis */}\n      <div\n        style={{\n          padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n        }}\n        data-testid=\"technique-analysis\"\n      >\n        <div\n          style={{\n            fontSize: labelFontSize,\n            fontWeight: \"bold\",\n            color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n            marginBottom: padding / 2,\n            textAlign: \"center\",\n          }}\n        >\n          기술 사용 분석 | Technique Analysis\n        </div>\n\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: isMobile ? \"1fr\" : \"1fr 1fr 1fr\",\n            gap: padding,\n            marginTop: padding,\n          }}\n        >\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                fontSize: fontSize + 6,\n                fontWeight: \"bold\",\n                color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),\n              }}\n            >\n              {techniqueCount}\n            </div>\n            <div\n              style={{\n                fontSize: fontSize - 2,\n                color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n              }}\n            >\n              총 기술 | Total Uses\n            </div>\n          </div>\n\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                fontSize: fontSize + 6,\n                fontWeight: \"bold\",\n                color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n              }}\n            >\n              {uniqueTechniques}\n            </div>\n            <div\n              style={{\n                fontSize: fontSize - 2,\n                color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n              }}\n            >\n              고유 기술 | Unique\n            </div>\n          </div>\n\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                fontSize: fontSize + 6,\n                fontWeight: \"bold\",\n                color: toCssColor(KOREAN_COLORS.VITAL_POINT_HIT),\n              }}\n            >\n              {winnerStats.vitalPointHits ?? 0}\n            </div>\n            <div\n              style={{\n                fontSize: fontSize - 2,\n                color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n              }}\n            >\n              급소 타격 | Vital Hits\n            </div>\n          </div>\n        </div>\n\n        {/* Most Used Techniques */}\n        {winnerStats.techniques && winnerStats.techniques.length > 0 && (\n          <div\n            style={{\n              marginTop: padding,\n              paddingTop: padding,\n              borderTop: `1px solid ${hexToRgbaString(\n                KOREAN_COLORS.UI_BORDER,\n                0.3\n              )}`,\n            }}\n          >\n            <div\n              style={{\n                fontSize: fontSize - 2,\n                color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n                marginBottom: padding / 2,\n              }}\n            >\n              주요 기술 | Primary Techniques:\n            </div>\n            <div\n              style={{\n                fontSize: fontSize,\n                color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n                lineHeight: 1.6,\n              }}\n            >\n              {winnerStats.techniques.slice(0, 5).join(\", \")}\n              {winnerStats.techniques.length > 5 && \"...\"}\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Combat Effectiveness Summary */}\n      <div\n        style={{\n          marginTop: padding,\n          padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n          textAlign: \"center\",\n        }}\n        data-testid=\"effectiveness-summary\"\n      >\n        <div\n          style={{\n            fontSize: fontSize - 2,\n            color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            marginBottom: padding / 4,\n          }}\n        >\n          전투 효율성 | Combat Effectiveness\n        </div>\n        <div\n          style={{\n            fontSize: labelFontSize + 2,\n            fontWeight: \"bold\",\n            color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n          }}\n        >\n          {Math.round((scores.offense + scores.defense + scores.technique + scores.efficiency) / 4)}%\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}