/* ============================================
   Idle War Mini Game - Core Styles
   ============================================
   이 파일은 게임의 기본 스타일을 정의합니다.
   수정 시 참고:
   - 색상 변경: :root 변수 수정
   - 레이아웃 변경: #game-screen grid 설정 수정
   - UI 크기 조정: 각 패널의 padding, gap 값 수정
   ============================================ */

/* ============================================
   CSS Variables (색상 및 테마 변수)
   ============================================
   색상 변경 시 이 변수들만 수정하면 전체에 반영됩니다.
   ============================================ */
:root {
    font-size: 12px;
    /* Base font size decreased for high resolution */
    --primary-color: #8b5cf6;
    /* 메인 보라색 (버튼, 강조) */
    --secondary-color: #d946ef;
    /* 보조 핑크색 (그라데이션) */
    --bg-dark: #030712;
    /* 배경 어두운 색 */
    --panel-bg: rgba(15, 15, 25, 0.8);
    /* 패널 반투명 배경 */
    --text-light: #ffffff;
    /* 밝은 텍스트 색상 */
    --text-muted: #a0a0a0;
    /* 회색 텍스트 (부가 정보) */
}

/* ============================================
   Reset & Base Styles (기본 스타일 초기화)
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* padding, border를 width에 포함 */
}

/* ============================================
   Body & Root Container (전체 화면 설정)
   ============================================
   - body: 전체 화면을 채우는 기본 컨테이너
   - #game-root: 게임의 최상위 컨테이너
   - .screen: 화면 전환용 컨테이너 (추후 메뉴 화면 추가 시 사용)
   ============================================ */
body {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: var(--text-light);
    background-color: #000;
    /* 완전 검정색 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    /* 전체 화면 스크롤 방지 */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#game-root {
    height: 100%;
    position: relative;
    /* 자식 요소의 absolute 기준 */
    display: flex;
    /* Flexbox로 중앙 정렬 */
    justify-content: center;
    /* 수평 중앙 정렬 */
    align-items: center;
    /* 수직 중앙 정렬 */
}

.screen {
    width: 100%;
    height: 100%;
    position: absolute;
    /* 화면 전환 애니메이션을 위한 절대 위치 */
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
    /* 페이드 전환 효과 */
}

.hidden {
    display: none !important;
    opacity: 0;
}

/* ============================================
   Button Components (버튼 스타일)
   ============================================
   - .pt-btn: 기본 버튼 스타일 (PlayTool 스타일)
   - hover: 마우스 오버 시 밝기 증가 및 확대
   - active: 클릭 시 축소 효과
   ============================================ */
.pt-btn {
    padding: 18px 36px;
    font-size: 3rem;
    /* 버튼 폰트 크기 (2200px 기준 적절한 크기) */
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s, filter 0.2s;
    /* 부드러운 애니메이션 */
}

.pt-btn:hover {
    filter: brightness(1.1);
    /* 10% 밝게 */
    transform: scale(1.05);
    /* 5% 확대 */
}

.pt-btn:active {
    transform: scale(0.98);
    /* 클릭 시 2% 축소 */
}

/* ============================================
   Game Screen Layout (메인 게임 화면 레이아웃)
   ============================================
   Grid 레이아웃 구조:
   ┌─────────────────────────────────┐
   │         title (제목)            │
   ├──────────────────┬──────────────┤
   │                  │              │
   │   play-area      │ upgrade-panel│
   │   (게임 캔버스)   │  (스킬 창)   │
   │                  │              │
   └──────────────────┴──────────────┘
   │      game-ui (하단 고정)        │
   └─────────────────────────────────┘
   
   수정 시 참고:
   - grid-template-columns: 플레이 영역과 업그레이드 패널 비율 조정
   - padding-bottom: 하단 UI 패널 높이에 맞춰 조정 (현재 70px)
   - gap: 요소 간 간격 조정
   - max-width: 최대 너비 제한 (현재 1200px)
   - max-height: 최대 높이 제한 (현재 900px)
   ============================================ */
#game-screen {
    display: grid;
    grid-template-areas:
        "title title"
        /* 첫 번째 행: 제목이 전체 너비 */
        "play upgrade"
        /* 두 번째 행: 플레이 영역과 업그레이드 패널 */
        "game-ui game-ui";
    /* 세 번째 행: 하단 UI 패널 */
    grid-template-columns: 1fr 600px;
    /* 업그레이드 패널 너비 확장 (2200px 기준) */
    /* 플레이 영역: 유연, 업그레이드: 300px 고정 */
    grid-template-rows: auto 1fr auto;
    /* 제목: 내용에 맞게, 플레이 영역: 나머지 공간, UI: 내용에 맞게 */
    padding: 10px;
    /* 전체 여백 */
    gap: 10px;
    /* 그리드 요소 간 간격 */
    width: 2200px;
    height: 1500px;
    /* 고정 디자인 규격 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* 스케일링과 중앙 정렬을 JS에서 transform으로 처리 */
    border: 2px solid rgba(139, 92, 246, 0.5);
    /* 게임 화면 테두리 (보라색) */
    border-radius: 12px;
    /* 둥근 모서리 */
    background: rgba(15, 15, 25, 0.6);
    /* 배경색 (약간의 투명도) */
    overflow: hidden;
    /* 모든 컨텐츠가 game-screen을 넘지 않도록 제한 */
    transition: transform 0.2s ease-out;
    /* 모바일 스케일링을 위한 부드러운 전환 */
    transform-origin: center center;
    /* 정중앙 기준 스케일링 */
}

/* ============================================
   Responsive Layout (반응형 레이아웃 - 모바일/태블릿)
   ============================================ */
/* 반응형 미디어 쿼리 삭제: 모바일 전용 레이아웃을 사용하지 않고 단일 버전으로 유지 */
@media (max-width: 768px) {
    #game-screen {
        /* 고정 너비 유지 (JS에서 스케일링 처리) */
        border-radius: 0;
        border: none;
    }
}

/* ============================================
   Title Container (게임 제목 영역)
   ============================================
   화면 최상단에 위치하는 게임 제목 컨테이너
   ============================================ */
#title-container {
    grid-area: title;
    /* grid-template-areas의 "title" 영역 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    background: var(--panel-bg);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    /* 배경 블러 효과 */
    overflow: hidden;
    /* 컨텐츠가 넘치지 않도록 제한 */
}

/* 게임 제목 */
#title-container h1 {
    font-family: 'Cinzel', serif;
    /* 장식용 폰트 */
    font-size: 6rem;
    /* 게임 제목 폰트 크기 (2200px 기준 적절한 크기) */
    margin: 0;
    background: linear-gradient(to bottom, #fff, var(--primary-color));
    /* 그라데이션 텍스트 */
    -webkit-background-clip: text;
    /* 텍스트에만 그라데이션 적용 */
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 텍스트 색상 투명 (그라데이션 보이게) */
    filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.3));
    /* 발광 효과 */
}

/* 햄버거 메뉴 버튼 */
.hamburger-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 6rem;
    /* 햄버거 메뉴 버튼 폰트 크기 (2200px 기준 적절한 크기) */
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s, text-shadow 0.2s;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger-btn:hover {
    transform: scale(1.1);
    text-shadow: 0 0 10px var(--secondary-color);
}

/* ============================================
   Game UI Panel (하단 고정 UI 패널)
   ============================================
   화면 하단에 고정되어 표시되는 게임 정보 패널
   - HP, Level, Score, Stage, Monster Count 표시
   - Experience Bar 포함
   
   수정 시 참고:
   - bottom: 하단 여백 조정
   - min-height: 최소 높이 조정 (내용이 많을 경우 자동 확장)
   - z-index: 다른 요소 위에 표시되도록 설정
   ============================================ */
#game-ui {
    grid-area: game-ui;
    /* grid-template-areas의 "game-ui" 영역 */
    background: var(--panel-bg);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    padding: 20px 30px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    /* 세로 배치 (두 줄) */
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 두 줄 사이 간격 */
    min-height: 55px;
    /* 최소 높이 */
    z-index: 100;
    /* 다른 요소 위에 표시 */
    box-sizing: border-box;
    overflow: hidden;
    /* 컨텐츠가 넘치지 않도록 제한 */
}

/* ============================================
   Stats Row (게임 통계 정보 행)
   ============================================
   HP, Level, Score, Stage, Monster Count를 표시하는 행
   ============================================ */
/*하단 스탯 정보*/
.stats-row {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* 모바일 대응: 자동 줄바꿈 허용 */
    gap: 15px;
    /* 각 통계 간 간격 */
    font-weight: bold;
    color: var(--text-light);
    white-space: nowrap;
    /* 텍스트 줄바꿈 방지 */
    font-size: 3rem;
    /* 게임 통계 정보 폰트 크기 (2200px 기준 적절한 크기) */
    flex-shrink: 0;
    /* 축소 방지 (고정 크기) */
    align-items: center;
}

/* 경험치 바 전용 행 */
.exp-row {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ============================================
   Experience Bar (경험치 바)
   ============================================
   플레이어의 경험치 진행 상황을 표시하는 바
   - #exp-bar-container: 바의 외곽 컨테이너
   - #exp-fill: 채워지는 부분 (width로 진행률 제어)
   - #exp-text: 경험치 텍스트 (예: "100 / 500 XP")
   
   수정 시 참고:
   - height: 바의 높이 조정
   - max-width: 최대 너비 제한 (현재 50%)
   - background: 바의 배경색 변경
   ============================================ */
#exp-bar-container {
    width: 100%;
    /* 전체 너비 사용 */
    max-width: 2000px;
    /* 너무 길어지지 않도록 제한 */
    height: 80px;
    /* 바의 높이 */
    background: #333;
    /* 바의 배경색 */
    border-radius: 12px;
    /* 둥근 모서리 (높이의 절반) */
    position: relative;
    /* 자식 요소의 absolute 기준 */
    overflow: hidden;
    /* 넘치는 부분 숨김 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 텍스트를 오른쪽 끝에 배치 */
    padding-right: 10px;
    /* 오른쪽 여백 */
}

#exp-fill {
    position: absolute;
    /* 부모 컨테이너 기준 절대 위치 */
    left: 0;
    top: 0;
    height: 100%;
    /* 부모 높이를 100% 채움 */
    width: 0%;
    /* JavaScript로 동적 조정 (0~100%) */
    background: linear-gradient(90deg, #facc15, #fb923c);
    /* 노란색→주황색 그라데이션 */
    transition: width 0.2s ease;
    /* 부드러운 애니메이션 */
}

#exp-text {
    position: relative;
    /* fill 위에 표시 */
    z-index: 1;
    /* fill보다 위에 표시 */
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: white;
    text-shadow: 1px 1px 2px black;
    font-size: 3rem;
    /* 경험치 바 텍스트 폰트 크기 (2200px 기준 적절한 크기) */
    text-align: center;
    /* 텍스트 가독성 향상 */
}

/* ============================================
   Play Area (게임 플레이 영역)
   ============================================
   게임 캔버스가 표시되는 메인 플레이 영역
   - #play-area: 캔버스를 감싸는 컨테이너
   - #game-canvas: 실제 게임이 렌더링되는 HTML5 Canvas
   
   수정 시 참고:
   - background: 플레이 영역 배경색 변경
   - border: 테두리 스타일 조정
   - box-shadow: 내부 그림자 효과 조정
   ============================================ */
#play-area {
    grid-area: play;
    /* grid-template-areas의 "play" 영역 */
    background: rgba(0, 0, 0, 0.4);
    /* 반투명 검은색 배경 */
    border: 2px solid rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    position: relative;
    /* 캔버스의 절대 위치 기준 */
    overflow: hidden;
    /* 넘치는 부분 숨김 */
    box-shadow: inset 0 0 50px rgba(139, 92, 246, 0.1);
    /* 내부 발광 효과 */

    /* 캔버스 크기 제한 설정 */
    min-width: 400px;
    /* 최소 너비 (게임 플레이 가능한 최소 크기) */
    min-height: 300px;
    /* 최소 높이 (게임 플레이 가능한 최소 크기) */
    max-width: 100%;
    /* 최대 너비 (화면 크기에 맞춤) */
    max-height: 100%;
    /* 최대 높이 (화면 크기에 맞춤) */
}

#game-canvas {
    width: 100%;
    /* 부모 컨테이너 전체 너비 */
    height: 100%;
    /* 부모 컨테이너 전체 높이 */
    display: block;
    /* 인라인 요소 간격 제거 */
}

/* ============================================
   Upgrade Panel (스킬 업그레이드 패널)
   ============================================
   화면 우측에 위치하는 스킬 업그레이드 패널
   - Damage, Attack Speed, Multi-Shot, Range 업그레이드
   - Settings Panel (BGM, SFX 설정)
   - Developer Mode Monster Info (개발자 모드 전용)
   
   수정 시 참고:
   - grid-template-columns의 300px 값 변경 시 이 패널 너비도 함께 변경
   - overflow-y: auto로 스크롤 가능 (내용이 많을 경우)
   ============================================ */
#upgrade-panel {
    grid-area: upgrade;
    /* grid-template-areas의 "upgrade" 영역 */
    background: var(--panel-bg);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 15px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    /* 세로 배치 */
    gap: 10px;
    /* 요소 간 간격 */
    max-height: 100%;
    /* 화면을 벗어나지 않도록 제한 */
    overflow: hidden;
    /* 내부 요소 스크롤 처리를 위해 숨김 */
    min-height: 0;
    /* flex 컨테이너가 제대로 제한되도록 */
}

/* 업그레이드 및 설정 메인 콘텐츠 (스크롤 가능 영역) */
.upgrade-main-content {
    flex: 1;
    overflow-y: auto;
    /* 세로 스크롤 허용 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 5px;
    /* 스크롤바 공간 확보 */
}

#upgrade-panel h3 {
    font-size: 3rem;
    /* 업그레이드 패널 제목 폰트 크기 (2200px 기준 적절한 크기) */
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--secondary-color);
    text-align: center;
}

/* 업그레이드 아이템 목록 컨테이너 */
.upgrade-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* 각 업그레이드 아이템 간 간격 */
}

/* 개별 업그레이드 아이템 (Damage, Attack Speed 등) */
.upgrade-item {
    display: flex;
    justify-content: space-between;
    /* 왼쪽: 설명, 오른쪽: 값과 버튼 */
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    /* 반투명 배경 */
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 3rem;
    /* 업그레이드 아이템 폰트 크기 (2200px 기준 적절한 크기) */
}

/* ============================================
   Settings Panel (설정 패널)
   ============================================
   업그레이드 패널 내부에 위치하는 설정 패널
   - Background Music (BGM) on/off 및 볼륨 조절
   - Sound Effects (SFX) on/off 및 볼륨 조절
   
   수정 시 참고:
   - margin-top: 업그레이드 아이템과의 간격 조정
   - .settings-item: 각 설정 항목의 간격 조정
   ============================================ */
#settings-panel {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(139, 92, 246, 0.5);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    /* 업그레이드 아이템과의 간격 */
    font-size: 3rem;
    /* 설정 패널 기본 폰트 크기 (2200px 기준 적절한 크기) */
    font-family: 'Outfit', sans-serif;

}

#settings-panel h3 {
    font-size: 3rem;
    /* 설정 패널 제목 폰트 크기 (2200px 기준 적절한 크기) */
    margin-bottom: 10px;
    color: var(--primary-color);
    text-align: center;
}

/* 개별 설정 항목 (BGM, SFX 등) */
.settings-item {
    margin-bottom: 12px;
    /* 각 설정 항목 간 간격 */
}

.settings-item:last-child {
    margin-bottom: 0;
    /* 마지막 항목은 하단 여백 제거 */
}

.settings-item label {
    display: flex;
    flex-direction: column;
    /* 레이블과 입력 요소를 세로 배치 */
    gap: 6px;
    /* 레이블과 입력 요소 간 간격 */
    color: var(--text-light);
    cursor: pointer;
    /* 클릭 가능 표시 */
}

.settings-item input[type="checkbox"] {
    width: 32px;
    height: 32px;
    cursor: pointer;
    accent-color: var(--primary-color);
    /* 체크박스 색상 */
}

.settings-item input[type="range"] {
    width: 100%;
    /* 슬라이더 전체 너비 */
    height: 12px;
    /* 슬라이더 높이 */
    cursor: pointer;
    accent-color: var(--primary-color);
    /* 슬라이더 색상 */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

#volume-value {
    color: var(--primary-color);
    font-weight: bold;
}

/* ============================================
   Developer Mode Monster Info (개발자 모드 몬스터 정보)
   ============================================
   개발자 모드(F1 키) 활성화 시 표시되는 패널
   - 마지막으로 스폰된 몬스터의 상세 정보 표시
   - Name, HP, Attack, Speed, Attack Speed, Size
   
   수정 시 참고:
   - display: none으로 기본 숨김 (JavaScript로 토글)
   - border: 금색 테두리로 개발자 모드임을 표시
   ============================================ */
#dev-monster-info {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #ffd700;
    /* 금색 테두리 (개발자 모드 표시) */
    border-radius: 8px;
    padding: 10px;
    margin-top: 15px;
    /* 설정 패널과의 간격 */
    font-size: 3rem;
    /* 개발자 모드 정보 폰트 크기 (2200px 기준 적절한 크기) */
}

#dev-monster-info h3 {
    font-size: 3rem;
    /* 개발자 모드 제목 폰트 크기 (2200px 기준 적절한 크기) */
    margin-bottom: 8px;
    color: #ffd700;
    /* 금색 텍스트 */
    text-align: center;
}

/* 몬스터 상세 정보 목록 */
#dev-monster-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* 각 정보 항목 간 간격 */
}

/* 개별 정보 항목 (Name, HP 등) */
#dev-monster-details div {
    display: flex;
    justify-content: space-between;
    /* 왼쪽: 라벨, 오른쪽: 값 */
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    /* 구분선 */
}

#dev-monster-details div:last-child {
    border-bottom: none;
    /* 마지막 항목은 구분선 제거 */
}

#dev-monster-details span {
    color: #ffd700;
    /* 금색 값 텍스트 */
    font-weight: bold;
}

/* ============================================
   Upgrade Button & Value Display (업그레이드 버튼 및 값 표시)
   ============================================
   - .upgrade-val-row: 현재 값과 업그레이드 버튼을 포함하는 행
   - .up-btn: 업그레이드 버튼 (원형 + 버튼)
   
   수정 시 참고:
   - .up-btn 크기: width, height 값 변경
   - hover/active 효과: transform scale 값 조정
   ============================================ */
.upgrade-val-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 값과 버튼 간 간격 */
}

.upgrade-val-row span {
    font-weight: bold;
    color: var(--secondary-color);
    /* 핑크색 값 텍스트 */
    min-width: 40px;
    /* 최소 너비 보장 (정렬 유지) */
    text-align: right;
    /* 오른쪽 정렬 */
}

.up-btn {
    width: 64px;
    /* 원형 버튼 너비 */
    height: 64px;
    /* 원형 버튼 높이 */
    border-radius: 50%;
    /* 완전한 원형 */
    border: none;
    background: var(--primary-color);
    color: white;
    font-size: 4rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
    /* 부드러운 클릭 효과 */
}

.up-btn:hover {
    transform: scale(1.1);
    /* 호버 시 10% 확대 */
}

.up-btn:active {
    transform: scale(0.9);
    /* 클릭 시 10% 축소 */
}

/* ============================================
   Game Over Popup (게임 오버 팝업)
   ============================================
   플레이어가 사망하거나 게임이 종료될 때 표시되는 팝업
   - Score, Stage, Level, Kills 통계 표시
   - Restart 버튼 포함
   
   수정 시 참고:
   - z-index: 다른 모든 요소 위에 표시 (1000)
   - animation: fadeIn 애니메이션으로 부드럽게 표시
   - .popup-content: 팝업 내용의 크기 및 스타일 조정
   ============================================ */
.popup-overlay {
    position: absolute;
    /* game-screen(relative) 기준 절대 위치 */
    top: 0;
    left: 0;
    width: 100%;
    /* 전체 화면 덮기 */
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* 반투명 검은색 배경 */
    backdrop-filter: blur(10px);
    /* 배경 블러 효과 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* 최상위 레이어 */
    animation: fadeIn 0.3s ease;
    /* 페이드 인 애니메이션 */
}

/* 팝업 오버레이 페이드 인 애니메이션 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 팝업 내용 컨테이너 */
.popup-content {
    background: var(--panel-bg);
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 30px;
    min-width: 500px;
    /* 최소 너비 보장 */
    max-width: 800px;
    /* 최대 너비 제한 */
    text-align: center;
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.3);
    /* 그림자 효과 */
    animation: slideUp 0.3s ease;
    /* 아래에서 위로 슬라이드 애니메이션 */
}


.settings-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
    text-align: left;
    font-size: 2.4rem;
}

/* 팝업 내용 슬라이드 업 애니메이션 */
@keyframes slideUp {
    from {
        transform: translateY(30px);
        /* 시작: 아래로 30px 이동 */
        opacity: 0;
    }

    to {
        transform: translateY(0);
        /* 끝: 원래 위치 */
        opacity: 1;
    }
}

/* 팝업 제목 */
.popup-content h2 {
    font-size: 4.5rem;
    /* 팝업 제목 폰트 크기 조정 */
    color: var(--primary-color);
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
    /* 발광 효과 */
}

/* 게임 오버 통계 컨테이너 */
.game-over-stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* 각 통계 항목 간 간격 */
    margin-bottom: 25px;
    /* 버튼과의 간격 */
}

/* 개별 통계 항목 (Score, Stage, Level, Kills) */
.stat-item {
    display: flex;
    justify-content: space-between;
    /* 왼쪽: 라벨, 오른쪽: 값 */
    align-items: center;
    padding: 10px;
    background: rgba(139, 92, 246, 0.1);
    /* 반투명 보라색 배경 */
    border-radius: 8px;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.stat-label {
    font-size: 3rem;
    color: var(--text-muted);
    /* 회색 라벨 텍스트 */
}

.stat-value {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-color);
    /* 보라색 값 텍스트 */
}

/* 팝업 버튼 컨테이너 */
.popup-buttons {
    display: flex;
    gap: 15px;
    /* 버튼 간 간격 */
    justify-content: center;
}

/* 팝업 버튼 기본 스타일 */
.popup-btn {
    padding: 16px 40px;
    font-size: 3rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* 부드러운 애니메이션 */
    font-family: 'Outfit', sans-serif;
}

/* 주요 버튼 (Restart) 스타일 */
.popup-btn.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--text-light);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.popup-btn.primary:hover {
    transform: translateY(-2px);
    /* 호버 시 위로 2px 이동 */
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
    /* 그림자 강화 */
}

.popup-btn.primary:active {
    transform: translateY(0);
    /* 클릭 시 원래 위치 */
}