Context: Style & Design

1. CSS 모듈 구조 (src/styles/)

이 프로젝트는 거대한 단일 CSS 파일을 지양하고, 기능별로 분리된 모듈형 CSS 구조를 채택하고 있습니다. src/styles.css는 각 모듈을 통합하는 엔트리 포인트 역할을 합니다.

base.css: 전역 변수(:root), 리셋 스타일, 레이아웃의 뼈대(#app, #game, .arena-shell)를 정의합니다.
intro.css: 대기 화면, 로고 애니메이션, 전투 프리뷰 연출 스타일을 담당합니다.
game-ui.css: 스코어보드(팀 badge), 킬로그, 상단 전투 안내바, 승리/무승부 축하 레이어 등 실제 게임 진행 중 노출되는 모든 HUD 요소를 관리합니다.
overlay.css: 설정 드로어(전투 옵션 폼), About 다이얼로그 및 공통 폼 컨트롤 스타일을 정의합니다.
animations.css: 프로젝트 전역에서 재사용되는 @keyframes와 애니메이션 관련 유틸리티 클래스를 포함합니다.
mobile.css: 960px 이하 해상도를 위한 미디어 쿼리 오버라이드 스타일을 통합 관리합니다. 모바일 전용 레이아웃 조정 및 터치 최적화 스타일이 포함됩니다.

색상 체계: 어두운 배경(#080a07)과 금색/주황색 계열의 포인트 컬러(rgb(238 185 73))를 사용하여 판타지 아레나 분위기를 연출합니다.
반응형 대응: clamp(), min(), calc() 등 현대적인 CSS 함수를 적극 활용하여 다양한 화면 크기에서도 유연하게 대응합니다.
가독성: 텍스트 섀도우와 반투명 배경(backdrop-filter)을 활용해 복잡한 전투 화면 위에서도 UI 요소의 시인성을 확보합니다.

전역 상수 변경: 색상이나 기본 여백 등은 base.css의 :root 변수를 먼저 확인하십시오.
컴포넌트 스타일 수정: 수정하려는 UI 요소가 속한 카테고리에 맞는 파일을 열어 작업하십시오. (예: 킬로그 수정 -> game-ui.css)
모바일 레이아웃 수정: 데스크톱 스타일을 수정한 후에는 mobile.css에서 해당 요소가 모바일에서 어떻게 보이는지 반드시 확인하고 필요한 경우 오버라이드하십시오.
애니메이션 추가: 새로운 키프레임은 animations.css에 추가하여 중앙 집중식으로 관리합니다.