/* 카드 배틀 게임 - Configuration-Driven 치수 시스템 */

/* ========================================
   전역 모바일 터치 피드백 최적화
   ======================================== */

/* 모든 인터랙티브 요소의 기본 터치 피드백 제거 */
button,
select,
input,
[role="button"],
[type="button"],
[type="submit"],
[type="reset"],
.gallery-card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* 포커스 접근성: focus-visible로 키보드 네비게이션만 표시 */
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid rgba(52, 152, 219, 0.6);
    outline-offset: 2px;
}

/* 기본 focus 시 outline 제거 (focus-visible이 대체) */
button:focus:not(:focus-visible),
select:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
    outline: none;
}

:root {
    /* Canvas 크기 */
    --canvas-width: 750px;
    --canvas-height: 1200px;

    /* 카드 크기 - GameConfig 기반 동기화 (초기값, JavaScript에서 덮어씀) */
    --card-preview-width: 290px;    /* GameConfig.cardSizes.preview.width로 덮어씀 */
    --card-preview-height: 406px;   /* GameConfig.cardSizes.preview.height로 덮어씀 */
    --card-gallery-width: 320px;    /* GameConfig.cardSizes.gallery.width로 덮어씀 */
    --card-gallery-height: 448px;   /* GameConfig.cardSizes.gallery.height로 덮어씀 */
    --card-hand-width: 60px;        /* 손패 카드 축소 크기 */
    --card-hand-height: 80px;       /* 손패 카드 축소 크기 */

    /* 메뉴 크기 - GameConfig 기반 */
    --menu-button-width: 320px;     /* GameConfig.mainMenu.menuItems.width */
    --menu-button-height: 50px;     /* GameConfig.mainMenu.menuItems.height */
    --menu-start-y: 370px;          /* GameConfig.mainMenu.menuItems.startY (420 → 370) */

    /* 입력 요소 크기 */
    --input-width: 300px;           /* 표준 입력 너비 */
    --element-min-width: 60px;      /* 최소 요소 너비 */

    /* 모달 공통 설정 - GameConfig 기반 동기화 */
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-backdrop-blur: 8px;
    --modal-border-radius: 20px;
    --modal-box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    --modal-padding: 30px;

    /* 개별 모달 크기 - GameConfig.modals에서 동기화 (더 길게) */
    --modal-card-gallery-width: 720px;
    --modal-card-gallery-height: 1150px;
    --modal-card-gallery-padding: 25px;

    --modal-card-selection-width: 720px;
    --modal-card-selection-height: 1180px;
    --modal-card-selection-padding: 15px;

    /* 카드 그리드 설정 - GameConfig.cssVariables.cardGrid에서 동기화 */
    --card-grid-gap: 10px;
    --card-grid-columns: 2;
    --card-grid-padding: 20px 15px;

    --modal-player-name-top: 15vh;
    --modal-player-name-width: 550px;
    --modal-player-name-height: 500px;
    --modal-player-name-padding: 40px;

    --modal-battle-result-width: 720px;
    --modal-battle-result-height: 1150px;
    --modal-battle-result-padding: 25px;

    --modal-card-detail-width: 720px;
    --modal-card-detail-height: 1000px;
    --modal-card-detail-padding: 40px;

    /* 갤러리 카드 상세 모달 전용 (적당한 높이) */
    --modal-gallery-card-detail-height: 1000px;

    --modal-game-tutorial-width: 720px;
    --modal-game-tutorial-height: 1150px;
    --modal-game-tutorial-padding: 30px;

    --modal-victory-width: 800px;
    --modal-victory-height: 1500px;
    --modal-victory-padding: 25px;

    --modal-defeat-width: 720px;
    --modal-defeat-height: 1230px;
    --modal-defeat-padding: 25px;

    --modal-leaderboard-width: 800px;
    --modal-leaderboard-height: 1200px;
    --modal-leaderboard-padding: 30px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* html 요소에도 배경 적용 (모달 오픈 시 body fixed로 인한 흰색 배경 방지) */
html {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;  /* Pull-to-refresh 방지, 스크롤 기능 유지 */
}

/* 일반 숨김 클래스 - UI 요소 가시성 제어 */
.hidden {
    display: none !important;
}

/* 설정 기반 게임 컨테이너 - Configuration-Driven 자동 스케일링 */
.game-container {
    position: fixed;
    width: var(--canvas-width);
    height: var(--canvas-height);
    top: 50%;
    left: 50%;
    background: #000000;
    overflow: hidden;
    border: 2px solid #333;
    border-radius: 8px;

    /* Configuration-driven viewport scaling - JavaScript에서 계산된 값 사용 */
    transform: translate(-50%, -50%) scale(var(--viewport-scale, 1));
    transform-origin: center;
}

/* 게임 래퍼 - 설정 기반 크기 */
.game-wrapper {
    position: relative;
    width: var(--canvas-width);
    height: var(--canvas-height);
    border: none;  /* 기본 테두리 명시적 제거 */
    box-sizing: border-box;  /* 테두리 추가 시 레이아웃 시프트 방지 */
}

/* 캔버스 설정 기반 크기 */
#gameCanvas {
    position: absolute;
    width: var(--canvas-width) !important;
    height: var(--canvas-height) !important;
    top: 0;
    left: 0;
    background: #2c3e50;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: block;
    z-index: 1; /* 기본 렌더링 레이어 */
}

/* 언어 선택기 */
.language-selector {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

#languageSelect {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    padding: var(--language-selector-padding-vertical) var(--language-selector-padding-horizontal);
    border-radius: var(--language-selector-border-radius);
    font-size: var(--language-selector-font-size);
    cursor: pointer;
}

/* 마우스 전용 hover (터치 기기 제외) */
@media (hover: hover) and (pointer: fine) {
    #languageSelect:hover {
        background: rgba(0, 0, 0, 0.9);
    }
}

/* UI 오버레이 - Canvas와 정확히 동일한 크기 */
.ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--canvas-width);
    height: var(--canvas-height);
    pointer-events: none;
    z-index: 100; /* Canvas 위에 배치 */
}

.ui-overlay > * {
    pointer-events: auto;
}

/* 게임 속도 조절 (세련된 스타일) */
.speed-controls {
    position: absolute;
    top: 110px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}

.speed-btn {
    background: linear-gradient(135deg,
        rgba(16, 24, 40, 0.85),
        rgba(31, 41, 55, 0.85));
    color: rgba(156, 163, 175, 0.8); /* 비활성 버튼은 더 어둡게 */
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    min-width: 75px;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    backdrop-filter: blur(6px);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
    user-select: none;
    opacity: 0.7; /* 비활성 버튼 투명도 낮춤 */
}

/* 언어별 속도 버튼 폰트 크기 조정 */
.lang-ko .speed-btn {
    font-size: 17px;
}

.lang-ja .speed-btn {
    font-size: 18px;
}

.lang-en .speed-btn {
    font-size: 17px;
}

.speed-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent);
    transition: left 0.5s;
}

/* 마우스 전용 hover (터치 기기 제외) */
@media (hover: hover) and (pointer: fine) {
    .speed-btn:hover {
        background: linear-gradient(135deg,
            rgba(22, 78, 99, 0.95),
            rgba(30, 58, 138, 0.95));
        color: #f3f4f6;
        border-color: rgba(147, 197, 253, 0.15);
        transform: translateX(-1px);
        box-shadow:
            0 2px 8px rgba(59, 130, 246, 0.1),
            0 1px 4px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        opacity: 1; /* 호버 시 완전 불투명 */
    }

    .speed-btn:hover::before {
        left: 100%;
    }
}

.speed-btn.active {
    background: linear-gradient(135deg,
        #3b82f6,
        #6366f1);
    color: #ffffff;
    border: 2px solid rgba(147, 197, 253, 0.6); /* 테두리 두껍게 */
    font-weight: 600; /* 폰트 두껍게 */
    transform: none;
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.2), /* 외부 링 효과 */
        0 4px 16px rgba(59, 130, 246, 0.4), /* 더 강한 그림자 */
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    opacity: 1 !important; /* 항상 완전 불투명 */
    padding-left: 12px; /* 체크마크 공간 확보 */
}

/* 활성 버튼에 체크마크 표시 */
.speed-btn.active::before {
    content: '✓ ';
    display: inline;
    font-size: 18px;
    font-weight: 700;
    margin-right: 4px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.speed-btn:active {
    transform: translateX(-0.5px) scale(0.98);
}

/* UI 버튼 (세련된 스타일) */
.ui-button {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.95),
        rgba(99, 102, 241, 0.95));
    color: #ffffff;
    border: 1px solid rgba(147, 197, 253, 0.3);
    padding: 12px 20px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    backdrop-filter: blur(8px);
    box-shadow:
        0 3px 12px rgba(59, 130, 246, 0.2),
        0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
    user-select: none;
}

.ui-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent);
    transition: left 0.6s;
}

/* 마우스 전용 hover (터치 기기 제외) */
@media (hover: hover) and (pointer: fine) {
    .ui-button:hover {
        background: linear-gradient(135deg,
            rgba(22, 78, 99, 0.95),
            rgba(30, 58, 138, 0.95));
        color: #f9fafb;
        transform: translateY(-2px);
        box-shadow:
            0 4px 16px rgba(59, 130, 246, 0.15),
            0 2px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        border-color: rgba(147, 197, 253, 0.2);
    }

    .ui-button:hover::before {
        left: 100%;
    }
}

.ui-button:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow:
        0 2px 8px rgba(59, 130, 246, 0.1),
        0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#card-gallery-btn {
    position: absolute;
    bottom: var(--gallery-button-bottom, 40px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;

    /* 설정 가능한 크기 */
    padding: var(--gallery-button-padding-vertical, 12px) var(--gallery-button-padding-horizontal, 20px);
    font-size: var(--gallery-button-font-size, 14px);
    font-weight: var(--gallery-button-font-weight, 400);
    border-radius: var(--gallery-button-border-radius, 14px);
    min-width: var(--gallery-button-min-width, auto);
}


/* 메뉴화면으로 돌아가기 버튼 (세련된 스타일) */
.back-btn.menu-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 16px; /* 라운드 사각형 */
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.95),
        rgba(99, 102, 241, 0.95));
    color: #ffffff;
    border: 1px solid rgba(147, 197, 253, 0.3);
    font-size: 26px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow:
        0 3px 12px rgba(59, 130, 246, 0.2),
        0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    z-index: 1000;
    user-select: none;
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

.back-btn.menu-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent);
    transition: left 0.6s;
}

.back-btn.menu-btn:hover {
    background: linear-gradient(135deg,
        rgba(22, 78, 99, 0.95),
        rgba(30, 58, 138, 0.95));
    color: #f9fafb;
    transform: translateX(-2px) translateY(-1px);
    box-shadow:
        0 4px 16px rgba(59, 130, 246, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(147, 197, 253, 0.2);
}

.back-btn.menu-btn:hover::before {
    left: 100%;
}

.back-btn.menu-btn:active {
    transform: translateX(-1px) translateY(0px) scale(0.98);
    box-shadow:
        0 2px 8px rgba(59, 130, 246, 0.1),
        0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 이전 버전 호환성을 위한 기본 back-btn 스타일 */
.back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(231, 76, 60, 0.9);
    z-index: 1000; /* UI 오버레이 위에 표시 */
}

@media (hover: hover) and (pointer: fine) {
    .back-btn:hover {
    background: rgba(231, 76, 60, 1);
}
}

/* 모달 스타일 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-overlay);
    backdrop-filter: blur(var(--modal-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    overscroll-behavior: contain;  /* Pull-to-refresh 방지 */
    touch-action: none;  /* 모달 배경 터치 제스처 차단 (iOS/Android) */
    -webkit-overflow-scrolling: auto;  /* iOS 관성 스크롤 제거 */
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: white;
    padding: var(--modal-padding);
    border-radius: var(--modal-border-radius);
    box-shadow: var(--modal-box-shadow);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;  /* Pull-to-refresh 방지 */

    /* 기본 크기 (구체적인 모달에서 재정의) */
    width: 90vw;
    height: 90vh;
}

/* 글래스모피즘이 적용된 모달 컨텐츠는 배경 제거 */
.modal-content.glass-morphism {
    background: transparent;
}

/* 카드 갤러리 모달 전용 스타일 - Configuration-Driven */
#card-gallery-modal .modal-content {
    width: var(--modal-card-gallery-width);
    height: var(--modal-card-gallery-height);
    padding: var(--modal-card-gallery-padding);
}

/* 플레이어 이름 모달 - 스크롤 완전 차단 */
#player-name-modal .modal-content {
    overflow: hidden;  /* 모달 자체 스크롤 방지 */
}

/* 카드 갤러리 닫기 버튼 - 크고 명확하게 */
#card-gallery-modal #close-gallery {
    padding: 14px 28px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 12px;

    /* Flex 컨테이너 내에서 중앙 정렬 & 너비 자동 조절 */
    align-self: center;
    width: fit-content;
    margin-top: 15px;
}

/* 카드 선택 모달 전용 스타일 - Configuration-Driven */
#card-selection-modal .modal-content {
    width: var(--modal-card-selection-width);
    height: var(--modal-card-selection-height);
    padding: var(--modal-card-selection-padding);
}

/* 카드 선택 모달 제목 스타일 */
#card-selection-modal .modal-content h2 {
    font-size: var(--card-selection-title-font-size);
}

/* 플레이어 이름 모달 전용 스타일 - Configuration-Driven */
/* 모바일 키보드 대응: 상단 정렬 */
#player-name-modal {
    align-items: flex-start;
}

#player-name-modal .modal-content {
    margin-top: var(--modal-player-name-top);
    width: var(--modal-player-name-width);
    height: auto;
    min-height: var(--modal-player-name-height);
    padding: 40px 30px 30px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.95));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

/* 플레이어 이름 모달 제목 스타일 */
#player-name-modal h2 {
    color: #2c3e50;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 0;
    text-shadow: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 플레이어 이름 모달 버튼 스타일 */
#player-name-modal .ui-button {
    padding: 18px 40px;
    font-size: 22px;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-transform: none;
    letter-spacing: 0.3px;
    min-width: 160px;
    margin-top: 10px;
}

#player-name-modal .ui-button.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

#player-name-modal .ui-button.primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(103, 126, 234, 0.3);
}

#player-name-modal .ui-button.secondary {
    background: rgba(255, 255, 255, 0.7);
    color: #666;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

#player-name-modal .ui-button.secondary:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 카드 상세 모달 전용 스타일 - Configuration-Driven */
#card-detail-modal .modal-content {
    width: var(--modal-card-detail-width);
    height: var(--modal-card-detail-height);
    padding: var(--modal-card-detail-padding);
}

/* 갤러리 카드 상세 모달 전용 스타일 - Configuration-Driven */
#gallery-card-detail-modal .modal-content {
    width: var(--modal-card-detail-width);
    height: var(--modal-gallery-card-detail-height);
    padding: 20px; /* 여백 최소화로 카드 더 크게 보이게 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px; /* 요소 간 간격 축소 (20px → 15px) */
}

/* 갤러리 카드 상세 컨텐츠 컨테이너 */
.card-detail-display {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

/* 갤러리 카드 상세 모달 버튼 */
#gallery-card-detail-modal .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px; /* 카드와 적당한 거리 */
    margin-bottom: 0; /* 하단 여백 최소화 */
}

/* 갤러리 카드 상세 모달 Close 버튼 크기 확대 */
#gallery-card-detail-modal .ui-button {
    padding: 18px 40px;
    font-size: 22px;
    font-weight: 700;
    min-width: 160px;
    border-radius: 12px;
}

/* 승리 모달 전용 스타일 - Configuration-Driven (반응형 제거) */
#victory-modal .modal-content {
    width: var(--modal-victory-width);
    height: var(--modal-victory-height);
    padding: var(--modal-victory-padding);
    overflow: hidden;
}

/* 승리 모달 헤더 - 여백 최소화 */
#victory-modal .victory-header {
    flex-shrink: 0;
    margin-bottom: 10px;
}

/* 승리 모달 버튼 영역 - 여백 최소화 */
#victory-modal .modal-buttons {
    flex-shrink: 0;
    margin-top: 10px;
    padding-bottom: 0;
    flex-wrap: wrap;
}

/* 승리 모달 카드 영역 하단 여백 - 버튼 간격 최소화 */
#victory-modal .card-rewards-container,
#victory-modal .hand-replace-container {
    padding-bottom: 20px;
}

#victory-modal .selected-card-detail {
    margin-bottom: 20px;
    padding-bottom: 20px;
}

/* 패배 모달 전용 스타일 - Configuration-Driven */
#defeat-modal .modal-content {
    width: var(--modal-defeat-width);
    height: var(--modal-defeat-height);
    padding: var(--modal-defeat-padding);
}

.modal-content h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #2c3e50;
    font-size: 24px;
}

/* 카드 상세 모달 제목 크기 확대 */
#card-detail-modal .modal-content h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 5px;
}

/* 글래스모피즘 모달의 텍스트 가독성 개선 */
.modal-content.glass-morphism h2 {
    color: var(--glass-text-primary) !important;
    text-shadow: var(--glass-text-shadow), var(--glass-text-glow);
    font-weight: 700;
}

/* 카드 갤러리 그리드 */
#card-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--card-grid-columns), 1fr);
    gap: var(--card-grid-gap);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 15px;
    margin-bottom: 0;
    justify-content: center;
    overscroll-behavior: contain;  /* Pull-to-refresh 방지 */
    /* 스크롤바 스타일 */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}

/* 웹킷 기반 브라우저 스크롤바 스타일 */
#card-gallery-grid::-webkit-scrollbar {
    width: 8px;
    background: var(--scrollbar-bg);
}

#card-gallery-grid::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

#card-gallery-grid::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
    transition: background 0.3s ease;
}

#card-gallery-grid::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* 갤러리 카드 스타일 - Configuration-Driven */
.gallery-card {
    width: var(--card-gallery-width);
    height: var(--card-gallery-height);
    border-radius: 8px;
    /* background: linear-gradient(135deg, rgba(52, 73, 94, 0.9), rgba(44, 62, 80, 0.9)); */
    border: 2px solid #3498db;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* 터치 후 포커스 상태 제거 (파란색 직사각형 방지) */
.gallery-card:focus,
.gallery-card:focus-visible {
    outline: none;
}

/* 터치 중 파란색 테두리 투명도 감소 */
.gallery-card:active {
    border-color: rgba(52, 152, 219, 0.5);
}

@media (hover: hover) and (pointer: fine) {
    .gallery-card:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    border-color: #f39c12;
}
}

.gallery-card .card-emoji {
    font-size: 32px;
    margin-bottom: 4px;
    margin-top: 4px;
}

.gallery-card .card-name {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: white;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    margin-bottom: 3px;
    line-height: 1.1;
    overflow: hidden;
}

.gallery-card .card-type {
    font-size: 11px;
    color: white;
    text-align: center;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    margin-bottom: 6px;
}

.gallery-card .card-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.gallery-card .card-power,
.gallery-card .card-accuracy {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

.gallery-card .card-power {
    background: rgba(231, 76, 60, 0.8);
}

.gallery-card .card-accuracy {
    background: rgba(46, 204, 113, 0.8);
}

.gallery-card .card-description {
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-align: center;
    line-height: 1.3;
    margin-top: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

.gallery-card .card-cost {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(241, 196, 15, 0.9);
    color: #2c3e50;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
}


/* 카드 선택 아이템 - Configuration-Driven */
.card-selection-item {
    width: var(--card-preview-width);
    height: var(--card-preview-height);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(52, 73, 94, 0.9), rgba(44, 62, 80, 0.9));
    border: 2px solid #3498db;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .card-selection-item:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    border-color: #f39c12;
}
}

.card-selection-item.selected {
    border: 3px solid #f39c12;
    transform: scale(1.05);
}

/* HP 바 시스템 */
.hp-bar-container {
    position: absolute;
    width: calc(60% + 60px);
    height: var(--hp-bar-height, 40px);
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #fff;
    border-radius: 20px;
    overflow: hidden;
    display: none; /* 기본적으로 숨김 */
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* UI 오버레이 위에 표시 */
}

.hp-bar-enemy {
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
}

.hp-bar-player {
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
}

.hp-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #ff3333, #ff6666);
    transition: width 0.3s ease-out;
    border-radius: inherit;
}

.hp-number {
    font-size: var(--hp-number-font-size, 24px);
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* 메인 메뉴 DOM 버튼들 (Canvas 메뉴 대체) - 설정 기반 z-index */
.main-menu-container {
    position: absolute;
    left: 50%;
    top: var(--menu-start-y); /* GameConfig.mainMenu.menuItems.startY */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px; /* GameConfig.mainMenu.menuItems.itemHeight - height */
    z-index: var(--z-main-menu-buttons, 100); /* GameConfig 기반 z-index */
    pointer-events: auto;
}

.main-menu-container.hidden {
    display: none;
}

.menu-button {
    width: var(--menu-button-width); /* GameConfig.mainMenu.menuItems.width */
    height: var(--menu-button-height); /* GameConfig.mainMenu.menuItems.height */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    border: 2px solid #3498db;
    border-radius: 10px;
    color: white;
    font-size: var(--menu-text-size-normal);
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

@media (hover: hover) and (pointer: fine) {
    .menu-button:hover {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.4), rgba(52, 152, 219, 0.2));
    transform: translateX(10px);
    border-color: #f39c12;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
}

.menu-button:focus {
    outline: 2px solid #f39c12;
    outline-offset: 2px;
}

/* 비활성 버튼 스타일 (세이브 데이터 없을 때) */
.menu-button:disabled,
.menu-button.disabled {
    background: linear-gradient(135deg, rgba(50, 50, 50, 0.5), rgba(30, 30, 30, 0.5));
    border-color: #555;
    color: #888;
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.menu-button:disabled:hover,
.menu-button.disabled:hover {
    background: linear-gradient(135deg, rgba(50, 50, 50, 0.5), rgba(30, 30, 30, 0.5));
    transform: none;
    border-color: #555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.menu-icon {
    font-size: var(--menu-icon-size);
    display: flex;
    align-items: center;
}

.menu-text {
    font-size: var(--menu-text-size-normal);
    font-weight: bold;
}

/* 상태이상 표시 */
.status-effects {
    position: static;
    display: inline-flex;
    gap: 6px;
    margin-left: 10px;
    flex-wrap: wrap;
}

.status-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    position: relative;
    z-index: 10;
    font-size: 11px;
    font-weight: bold;
    color: white;
    border: 1px solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.buff-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 10;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    border: 1px solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    margin-right: 6px;
}

/* 상태이상 강화 애니메이션 */
.status-icon.pulse {
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.status-icon .countdown {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
}

/* 방어력 오버레이 시스템 */
.defense-overlay {
    position: absolute;
    right: 0; /* 오른쪽 정렬 */
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #c0c7d1, #f5f7fa, #e8eaf0); /* 은색 메탈릭 그라데이션 */
    border-radius: inherit;
    z-index: 2; /* HP 바 위에 표시 */
    transition: width 0.3s ease-out;
    opacity: 0.9;
    border: 1px solid rgba(169, 169, 169, 0.6);
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.6),
        inset 0 -1px 3px rgba(0, 0, 0, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 방어력 수치 오버레이 */
.defense-number-overlay {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50; /* 어두운 색으로 HP와 구분 */
    text-shadow:
        1px 1px 0 rgba(255, 255, 255, 0.8),
        -1px -1px 0 rgba(0, 0, 0, 0.2);
    z-index: 3;
    transition: opacity 0.3s ease;
}

.defense-number-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* HP 바 텍스트 위치 조정 - 새로운 레이아웃으로 교체됨 */

.hp-info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: var(--hp-bar-font-size, 24px);
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.entity-name {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.defense-info {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 오른쪽 요소들을 그룹화 */
.hp-bar-text {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 8px;
}

.hp-bar-text .hp-info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    font-size: 24px;
}

.hp-bar-text .entity-name {
    flex: 1;
}

.hp-bar-text .buff-label,
.hp-bar-text .defense-info {
    margin-left: auto;
}

.hp-bar-text .defense-info {
    margin-right: 13px;
}

.defense-info.hidden {
    display: none;
}

/* 새로운 효과 컨테이너 시스템 */
.effects-container {
    position: absolute;
    pointer-events: none;
    z-index: 1001;
    display: block; /* DOM 흐름에서 제거하지 않음 - 캔버스 밀림 방지 */
    opacity: 0; /* 투명도로 가시성 제어 */
    visibility: hidden; /* visibility로 숨김 */
    transition: opacity 0.2s ease, visibility 0.2s ease; /* 부드러운 전환 */
}

.effects-container.active {
    opacity: 1; /* display: block 대신 opacity 사용 */
    visibility: visible; /* visibility로 표시 */
}

/* 플레이어 효과 위치 (HP바 위쪽) */
.player-effects {
    bottom: 130px; /* HP바 bottom(85px) + height(40px) + gap(5px) = HP바 위 5px 여백 */
    left: 50%;
    transform: translateX(-50%);
    width: calc(60% + 60px);
}

/* 적 효과 위치 (HP바 아래쪽) */
.enemy-effects {
    top: 130px; /* HP바 아래 */
    left: 50%;
    transform: translateX(-50%);
    width: calc(60% + 60px);
}

/* 상태이상 그리드 (왼쪽 정렬) - Flexbox 사용 */
.status-effects-grid {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: var(--effect-vertical-spacing, 6px) var(--effect-spacing, 8px);
    left: 0;
    max-width: calc(var(--effect-columns, 2) * 125px); /* 최대 2열 너비 (250px: 3개 방지) */
}

/* 버프 그리드 (오른쪽 정렬) - Flexbox 사용 */
.buffs-grid {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: var(--effect-vertical-spacing, 6px) var(--effect-spacing, 8px);
    right: 0;
    max-width: calc(var(--effect-columns, 2) * 125px); /* 최대 2열 너비 (250px: 3개 방지) */
    direction: rtl;  /* 오른쪽부터 왼쪽으로 요소 채움 */
}

/* 플레이어 상태이상 - 아래→위로 쌓임 */
.player-status {
    bottom: 0;  /* 부모 컨테이너 하단에 고정 */
    flex-direction: row;
    flex-wrap: wrap-reverse;  /* 행을 아래부터 위로 쌓음 */
    align-content: flex-end;  /* 아래쪽 정렬 + wrap-reverse = 위로 확장 */
}

/* 플레이어 버프 - 아래→위로 쌓임 (RTL 유지) */
.player-buffs {
    bottom: 0;  /* 부모 컨테이너 하단에 고정 */
    flex-direction: row;
    flex-wrap: wrap-reverse;  /* 행을 아래부터 위로 쌓음 */
    align-content: flex-end;  /* 아래쪽 정렬 + wrap-reverse = 위로 확장 */
}

/* 적 상태이상 - 위→아래로 쌓임 */
.enemy-status {
    top: 0;  /* 부모 컨테이너 상단에 고정 */
    flex-direction: row;
    flex-wrap: wrap;  /* 행을 위부터 아래로 쌓음 */
    align-content: flex-start;
}

/* 적 버프 - 위→아래로 쌓임 (RTL 유지) */
.enemy-buffs {
    top: 0;  /* 부모 컨테이너 상단에 고정 */
    flex-direction: row;
    flex-wrap: wrap;  /* 행을 위부터 아래로 쌓음 */
    align-content: flex-start;
}

/* 업데이트된 상태이상 라벨 */
.status-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 18px;
    position: relative;
    z-index: 10;
    font-size: var(--effect-font-size, 14px);
    font-weight: bold;
    color: white;
    border: 1px solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    pointer-events: auto;
    min-width: var(--effect-icon-size, 36px);
    min-height: var(--effect-icon-size, 36px);
    width: max-content;  /* 콘텐츠 크기만 차지, 독립적 너비 */
}

/* 클릭 가능한 상태이상 라벨 호버 효과 */
.status-label:hover {
    transform: scale(1.08);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    filter: brightness(1.15);
}

.status-label:active {
    transform: scale(1.02);
}

/* 업데이트된 버프 라벨 */
.buff-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 10;
    padding: 4px 10px;
    border-radius: 18px;
    font-size: var(--effect-font-size, 14px);
    font-weight: bold;
    color: white;
    border: 1px solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    pointer-events: auto;
    min-width: var(--effect-icon-size, 36px);
    min-height: var(--effect-icon-size, 36px);
    direction: ltr;  /* 부모 RTL 상속 차단, 이모지→텍스트 순서 유지 */
    width: max-content;  /* 콘텐츠 크기만 차지, 독립적 너비 */
}

/* 클릭 가능한 버프 라벨 호버 효과 */
.buff-label:hover {
    transform: scale(1.08);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    filter: brightness(1.15);
}

.buff-label:active {
    transform: scale(1.02);
}

/* 방어속성 배지 스타일 */
.defense-element-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 22px;
    height: 18px;
    font-size: 12px;
    border-radius: 9px;
    margin: 0 4px;
    padding: 1px 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 배지 내부 요소들 */
.defense-element-badge .badge-emoji {
    font-size: inherit;
    line-height: 1;
}

.defense-element-badge .badge-text {
    font-size: 10px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

/* 속성별 색상 - GameConfig.elements 기반 */
.defense-element-badge.fire {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.85), rgba(255, 138, 128, 0.85));
    border-color: #FF5252;
}

.defense-element-badge.water {
    background: linear-gradient(135deg, rgba(135, 206, 235, 0.85), rgba(144, 202, 249, 0.85));
    border-color: #42A5F5;
}

.defense-element-badge.electric {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.85), rgba(255, 235, 59, 0.85));
    border-color: #FFC107;
}

.defense-element-badge.poison {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.85), rgba(186, 104, 200, 0.85));
    border-color: #8E24AA;
}

.defense-element-badge.normal {
    background: linear-gradient(135deg, rgba(240, 230, 216, 0.85), rgba(230, 220, 206, 0.85));
    border-color: #E0D0C0;
}

/* 클릭 가능한 방어속성 배지 호버 효과 */
.defense-element-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    filter: brightness(1.1);
}

.defense-element-badge:active {
    transform: scale(1.02);
}

/* 방어속성 배지 래퍼 스타일 */
.defense-badge-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    display: none; /* 기본적으로 숨김 - HPBarSystem에서 show/hide 제어 */
}

/* 플레이어 배지 - 손패 영역 아래쪽 바깥에 붙임 */
.defense-badge-wrapper.badge-above {
    bottom: 187px;  /* bottom 값 감소 = 아래로 이동 */
}

/* 적 배지 - 손패 영역 위쪽 바깥에 붙임 */
.defense-badge-wrapper.badge-below {
    top: 187px;     /* 손패 시작(242.6px) - 배지높이(50px) - 여백(5px) */
}

/* 배지 크기 확대 (GameConfig와 동기화) */
.defense-badge-wrapper .defense-element-badge {
    min-width: 62px;
    height: 50px;
    font-size: 34px;
    border-radius: 8px; /* 모서리가 둥근 사각형으로 변경 */
    margin: 0;
    padding: 6px 14px;
    border-width: 3px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    gap: 9px;
}

/* 확대된 배지 내부 텍스트 크기 조정 */
.defense-badge-wrapper .defense-element-badge .badge-emoji {
    font-size: 22px;
}

.defense-badge-wrapper .defense-element-badge .badge-text {
    font-size: 15px;
    font-weight: 600;
}


/* 방어력 깨지는 애니메이션 */
@keyframes defenseShatter {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    25% {
        transform: scale(1.05) rotateX(5deg);
        opacity: 0.7;
    }
    50% {
        transform: scale(0.95) rotateX(-5deg);
        opacity: 0.5;
        filter: brightness(1.3);
    }
    75% {
        transform: scale(1.02) rotateX(2deg);
        opacity: 0.3;
    }
    100% {
        transform: scale(1);
        opacity: 0.9;
        filter: brightness(1);
    }
}

.defense-overlay.shatter-animation {
    animation: defenseShatter 0.4s ease-out;
}

/* 방어력 오버레이가 최대일 때 효과 */
.defense-overlay.max-defense {
    background: linear-gradient(90deg, #b8c6db, #f5f7fa, #c0c7d1);
    box-shadow:
        inset 0 1px 4px rgba(255, 255, 255, 0.8),
        inset 0 -1px 4px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2),
        0 0 8px rgba(169, 169, 169, 0.4);
}

/* 대미지 플로팅 숫자 */
.damage-number {
    position: absolute;
    font-weight: bold;
    font-size: 24px;
    color: #e74c3c;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 1000;
    animation: floatUp 1.5s ease-out forwards;
}

.damage-number.heal-number {
    color: #2ecc71;
}

.damage-number.shield-number {
    color: #c0c0c0;
}

.damage-number.effect-number {
    color: #ffffff;
}

.critical-number {
    color: #f39c12;
    font-size: 36px;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translateY(-30px) scale(1.3);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
    }
}

/* 화면 효과 */
.screen-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.screen-flash.damage {
    background: rgba(231, 76, 60, 0.3);
}

.screen-flash.heal {
    background: rgba(46, 204, 113, 0.3);
}

.screen-flash.critical {
    background: rgba(243, 156, 18, 0.3);
}

/* 화면 흔들림 (레거시 - 고정 크기) */
@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-2px, -1px); }
    20% { transform: translate(2px, 1px); }
    30% { transform: translate(-1px, 2px); }
    40% { transform: translate(1px, -2px); }
    50% { transform: translate(-2px, 1px); }
    60% { transform: translate(2px, -1px); }
    70% { transform: translate(-1px, -2px); }
    80% { transform: translate(1px, 2px); }
    90% { transform: translate(-2px, -1px); }
}

.game-container.shake {
    animation: screenShake 0.2s ease-in-out;
}

/* 화면 흔들림 (새 시스템 - CSS 변수 기반, 데미지별 차등) */
@keyframes dynamicScreenShake {
    0%, 100% { transform: translate3d(0, 0, 0) !important; }
    10% { transform: translate3d(calc(var(--shake-distance, 10px) * -0.2), calc(var(--shake-distance, 10px) * -0.1), 0) !important; }
    20% { transform: translate3d(calc(var(--shake-distance, 10px) * 0.2), calc(var(--shake-distance, 10px) * 0.1), 0) !important; }
    30% { transform: translate3d(calc(var(--shake-distance, 10px) * -0.1), calc(var(--shake-distance, 10px) * 0.2), 0) !important; }
    40% { transform: translate3d(calc(var(--shake-distance, 10px) * 0.1), calc(var(--shake-distance, 10px) * -0.2), 0) !important; }
    50% { transform: translate3d(calc(var(--shake-distance, 10px) * -0.2), calc(var(--shake-distance, 10px) * 0.1), 0) !important; }
    60% { transform: translate3d(calc(var(--shake-distance, 10px) * 0.2), calc(var(--shake-distance, 10px) * -0.1), 0) !important; }
    70% { transform: translate3d(calc(var(--shake-distance, 10px) * -0.1), calc(var(--shake-distance, 10px) * -0.2), 0) !important; }
    80% { transform: translate3d(calc(var(--shake-distance, 10px) * 0.1), calc(var(--shake-distance, 10px) * 0.2), 0) !important; }
    90% { transform: translate3d(calc(var(--shake-distance, 10px) * -0.2), calc(var(--shake-distance, 10px) * -0.1), 0) !important; }
}

.game-wrapper.screen-shake {
    animation: dynamicScreenShake var(--shake-duration, 300ms) ease-in-out;
}

.status-icon .icon {
    font-size: 14px;
}

.status-icon .name {
    font-size: 10px;
    font-weight: bold;
}

/* 턴 인디케이터 (턴 시작 시에만 표시, Configuration-Driven) */
.turn-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* GameConfig 기반 동적 스타일 */
    font-size: var(--turn-message-font-size, 56px);
    min-width: var(--turn-message-min-width, 300px);
    padding: var(--turn-message-padding, 20px);

    font-weight: bold;
    color: white;
    text-shadow: var(--turn-message-text-shadow, 3px 3px 6px rgba(0, 0, 0, 0.8));

    /* 기본 상태: 숨김 */
    opacity: 0;
    visibility: hidden;

    /* 한 줄 강제 표시 */
    white-space: nowrap;
    text-align: center;

    z-index: 1000;
    pointer-events: none;

    /* 전환 효과 (색상, opacity 변경 시) */
    transition: color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

/* 표시 상태 */
.turn-indicator.visible {
    opacity: 1;
    visibility: visible;
}

/* 턴 전환 애니메이션 (약간의 크기 변화) */
.turn-indicator.turn-change {
    animation: turnChangeScale var(--turn-message-animation-duration, 0.6s) ease-out;
}

/* 대미지/회복 숫자 - Configuration-Driven (CSS 변수 사용) */
.damage-number {
    position: absolute;
    font-size: 60px;  /* GameConfig와 일치 */
    font-weight: 900; /* bold → 900으로 더 굵게 */
    color: var(--color-message-damage, #FF0000);   /* GameConfig 기반 동적 색상 */
    text-shadow:
        3px 3px 0 #000,
        -3px 3px 0 #000,
        3px -3px 0 #000,
        -3px -3px 0 #000,
        0 0 10px rgba(255, 0, 0, 0.5); /* 굵은 검은 테두리 + 글로우 */
    animation: damagePopup 1.2s ease-out forwards;
    pointer-events: none;
    z-index: 500;
    transform-origin: center;
    white-space: nowrap; /* 줄바꿈 방지 */
}

/* 레거시 CSS 클래스 유지 (하위 호환성) - 색상은 CSS 변수로 동적 적용됨 */
.heal-number {
    /* color는 JavaScript에서 동적으로 설정됨 */
}

.buff-number {
    /* color는 JavaScript에서 동적으로 설정됨 */
}

.poison-number {
    /* color는 JavaScript에서 동적으로 설정됨 */
}

.burn-number {
    /* color는 JavaScript에서 동적으로 설정됨 */
}

.debuff-number {
    /* color는 JavaScript에서 동적으로 설정됨 */
}

.defense-number {
    /* color는 JavaScript에서 동적으로 설정됨 */
}

.shield-number {
    /* color는 JavaScript에서 동적으로 설정됨 */
}

.miss-number {
    /* color는 JavaScript에서 동적으로 설정됨 - !important 제거 */
    font-size: 48px;
    text-shadow:
        2px 2px 0 #000,
        -2px 2px 0 #000,
        2px -2px 0 #000,
        -2px -2px 0 #000,
        0 0 8px rgba(149, 165, 166, 0.5); /* 회색 글로우 */
}

.zero-number {
    /* color는 JavaScript에서 동적으로 설정됨 - !important 제거 */
    font-size: 56px;
    font-weight: bold;
    text-shadow:
        3px 3px 0 #000,
        -3px 3px 0 #000,
        3px -3px 0 #000,
        -3px -3px 0 #000,
        0 0 10px rgba(255, 165, 0, 0.6); /* 오렌지 글로우 */
}

/* 약점 데미지 (0.5배) */
.weak-number {
    /* color는 JavaScript에서 동적으로 설정됨 - !important 제거 */
    font-size: 48px;
    opacity: 0.8;
    text-shadow:
        2px 2px 0 #000,
        -2px 2px 0 #000,
        2px -2px 0 #000,
        -2px -2px 0 #000;
    animation: floatUp 1.5s ease-out forwards;
}

/* 강점 데미지 (1.5배) */
.strong-number {
    font-size: 96px;
    /* color는 JavaScript에서 동적으로 설정됨 - !important 제거 */
    text-shadow:
        0 0 10px #FF0000,
        0 0 20px #FF0000,
        0 0 30px #FF0000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000;
    animation: strongHit 0.5s ease-out, floatUp 1.5s ease-out forwards;
}

@keyframes strongHit {
    0% {
        transform: scale(0.8);
        text-shadow:
            0 0 5px #FF0000,
            0 0 10px #FF0000;
    }
    25% {
        transform: scale(1.3) rotate(3deg);
        text-shadow:
            0 0 15px #FF0000,
            0 0 30px #FF0000,
            0 0 40px #FF6600,
            -2px -2px 0 #000,
            2px -2px 0 #000,
            -2px 2px 0 #000,
            2px 2px 0 #000;
    }
    50% {
        transform: scale(1.1) rotate(-2deg);
        text-shadow:
            0 0 12px #FF0000,
            0 0 25px #FF0000,
            0 0 35px #FF3300;
    }
    75% {
        transform: scale(1.2) rotate(1deg);
        text-shadow:
            0 0 10px #FF0000,
            0 0 20px #FF0000,
            0 0 30px #FF0000;
    }
    100% {
        transform: scale(1);
        text-shadow:
            0 0 8px #FF0000,
            0 0 15px #FF0000,
            -2px -2px 0 #000,
            2px -2px 0 #000,
            -2px 2px 0 #000,
            2px 2px 0 #000;
    }
}

/* 반응형 폰트 크기 제거됨 - 고정 크기 사용 */

/* 효과 오버레이 */
.effect-overlay {
    position: absolute;
    font-size: 40px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.effect-overlay.buff {
    color: #2ECC71;
    animation: riseUp 0.8s ease-out forwards;
}

.effect-overlay.debuff {
    color: #E74C3C;
    animation: fallDown 0.8s ease-out forwards;
}

.effect-overlay.heal {
    color: #2ECC71;
    animation: pulse 0.6s ease-out forwards;
}

/* 피격 효과 */
.hit-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 400;
    animation: elementFlash 0.3s ease-out;
}

/* 카드 하이라이트 */
.card.next-to-activate {
    border: 2px solid #FFD700 !important;
    box-shadow: 0 0 10px #FFD700 !important;
    animation: pulse-border 1s infinite;
}

/* 애니메이션 정의 */
/* 턴 전환 애니메이션 - 약간의 크기 변화 (Configuration-Driven) */
@keyframes turnChangeScale {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 새로운 피격 숫자 애니메이션 - 확대/축소 + 상승 효과 */
@keyframes damagePopup {
    0% {
        transform: scale(0.5) translateY(0);
        opacity: 0;
    }
    20% {
        transform: scale(1.3) translateY(-10px);
        opacity: 1;
    }
    40% {
        transform: scale(1) translateY(-20px);
        opacity: 1;
    }
    100% {
        transform: scale(0.8) translateY(-60px);
        opacity: 0;
    }
}

/* 기존 floatUp 애니메이션 유지 (다른 곳에서 사용될 수 있음) */
@keyframes floatUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);
        opacity: 0;
    }
}

@keyframes riseUp {
    0% { transform: translateY(20px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-20px); opacity: 0; }
}

@keyframes fallDown {
    0% { transform: translateY(-20px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(20px); opacity: 0; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0; }
    25% { transform: scale(1.2); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.8; }
}

@keyframes hitBlink {
    0%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes elementFlash {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.6; }
}

@keyframes pulse-border {
    0%, 100% {
        box-shadow: 0 0 5px #FFD700;
    }
    50% {
        box-shadow: 0 0 15px #FFD700;
    }
}

/* 상태이상 화면 테두리 효과 */
@keyframes status-border-pulse {
    0%, 100% {
        box-shadow: 0 0 10px var(--status-border-color, #9B59B6);
    }
    50% {
        box-shadow: 0 0 30px var(--status-border-color, #9B59B6);
    }
}

/* 독 상태이상 테두리 */
.game-wrapper.status-border-poison {
    --status-border-color: #9B59B6;
    outline: 3px solid var(--status-border-color);
    outline-offset: -3px;
    animation: status-border-pulse 2s infinite;
}

/* 화상 상태이상 테두리 */
.game-wrapper.status-border-burn {
    --status-border-color: #E67E22;
    outline: 3px solid var(--status-border-color);
    outline-offset: -3px;
    animation: status-border-pulse 2s infinite;
}

/* 모래 상태이상 테두리 */
.game-wrapper.status-border-sand {
    --status-border-color: #D4A76A;
    outline: 3px solid var(--status-border-color);
    outline-offset: -3px;
    animation: status-border-pulse 2s infinite;
}

/* 모욕 상태이상 테두리 */
.game-wrapper.status-border-insult {
    --status-border-color: #8B4513;
    outline: 3px solid var(--status-border-color);
    outline-offset: -3px;
    animation: status-border-pulse 2s infinite;
}

/* 둔화 상태이상 테두리 */
.game-wrapper.status-border-slow {
    --status-border-color: #6C757D;
    outline: 3px solid var(--status-border-color);
    outline-offset: -3px;
    animation: status-border-pulse 2s infinite;
}

/* 사슬 상태이상 테두리 */
.game-wrapper.status-border-chains {
    --status-border-color: #FF4500;
    outline: 3px solid var(--status-border-color);
    outline-offset: -3px;
    animation: status-border-pulse 2s infinite;
}

/* 젖음 상태이상 테두리 */
.game-wrapper.status-border-wet {
    --status-border-color: #5DADE2;
    outline: 3px solid var(--status-border-color);
    outline-offset: -3px;
    animation: status-border-pulse 2s infinite;
}

/* 얼음 상태이상 테두리 */
.game-wrapper.status-border-frozen {
    --status-border-color: #B0E0E6;
    outline: 3px solid var(--status-border-color);
    outline-offset: -3px;
    animation: status-border-pulse 2s infinite;
}

/* 망각 상태이상 테두리 */
.game-wrapper.status-border-oblivion {
    --status-border-color: #8B008B;
    outline: 3px solid var(--status-border-color);
    outline-offset: -3px;
    animation: status-border-pulse 2s infinite;
}

/* 메뉴 화면에서 상태이상 테두리 강제 숨김 (최고 우선순위) */
body[data-game-state="menu"] .game-wrapper.status-border-poison,
body[data-game-state="menu"] .game-wrapper.status-border-burn,
body[data-game-state="menu"] .game-wrapper.status-border-sand,
body[data-game-state="menu"] .game-wrapper.status-border-insult,
body[data-game-state="menu"] .game-wrapper.status-border-slow,
body[data-game-state="menu"] .game-wrapper.status-border-chains,
body[data-game-state="menu"] .game-wrapper.status-border-wet,
body[data-game-state="menu"] .game-wrapper.status-border-frozen,
body[data-game-state="menu"] .game-wrapper.status-border-oblivion {
    outline: none !important;
    animation: none !important;
    box-shadow: none !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cardFlip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.card-flip {
    animation: cardFlip 0.6s ease-in-out;
}

/* 반응형 미디어 쿼리 제거 - 모든 화면에서 2열 고정 유지 */

/* 승리 모달 텍스트 크기 증가 */
#victory-modal h2 {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
}

#victory-modal .victory-reward-text {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
}

#victory-modal .victory-option-text {
    font-size: 28px;
    margin-bottom: 30px;
    line-height: 1.4;
    font-weight: 600;
}

#victory-modal .card-selection-hint {
    font-size: 20px;
    color: #666;
    font-weight: bold;
    margin-top: 15px;
}

#victory-modal .ui-button {
    font-size: 20px;
}

#victory-modal .hand-replace-container p {
    font-size: 20px;
    margin-bottom: 20px;
}

/* 패배 모달 텍스트 크기 증가 */
#defeat-modal h2 {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
}

#defeat-modal h3 {
    font-size: 32px;
    margin-bottom: 15px;
}

#defeat-modal .stat-label,
#defeat-modal .stat-value {
    font-size: 20px;
}

#defeat-modal p {
    font-size: 20px;
    line-height: 1.4;
}

#defeat-modal .ui-button {
    font-size: 20px;
}

/* 승리 모달 스크롤바 배경 은은하게 */
#victory-modal .victory-content-area {
    flex-shrink: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.05);
}

#victory-modal .victory-content-area::-webkit-scrollbar {
    width: 8px;
    background: rgba(255, 255, 255, 0.05);
}

#victory-modal .victory-content-area::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#victory-modal .victory-content-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.3s ease;
}

#victory-modal .victory-content-area::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 승리 모달 확대 카드 표시 영역 - 중앙 고정 */
#victory-modal .selected-card-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
    padding: 20px;
}

/* 카드 확대 시 스크롤 제거 (보상 카드 선택 시에만) */
#victory-modal .victory-content-area.card-enlarged {
    overflow: hidden;
}

/* 손패 교체 화면 - 손패 그리드 스크롤 */
#victory-modal .hand-cards-grid {
    max-height: 450px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.05);
}

#victory-modal .hand-cards-grid::-webkit-scrollbar {
    width: 8px;
    background: rgba(255, 255, 255, 0.05);
}

#victory-modal .hand-cards-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#victory-modal .hand-cards-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.3s ease;
}

#victory-modal .hand-cards-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 손패 교체 화면에서는 card-enlarged 스크롤 차단 무시 */
#victory-modal .hand-replace-container {
    /* 손패 교체 영역은 항상 스크롤 가능하도록 독립적으로 관리 */
}

/* 패배 모달 스크롤바 스타일 */
#defeat-modal .defeat-content {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.05);
}

#defeat-modal .defeat-content::-webkit-scrollbar {
    width: 8px;
    background: rgba(255, 255, 255, 0.05);
}

#defeat-modal .defeat-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#defeat-modal .defeat-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.3s ease;
}

#defeat-modal .defeat-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ====================================
   로딩 화면 (Loading Screen)
   ==================================== */

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg,
        var(--color-primary, #1a1a2e) 0%,
        var(--color-secondary, #0f3460) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

/* 로딩 화면 페이드 아웃 */
.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* 로딩 화면 숨김 */
.loading-screen.hidden {
    display: none;
}

/* 로딩 콘텐츠 컨테이너 */
.loading-content {
    text-align: center;
    color: var(--color-text-primary, #ffffff);
    width: 500px;
    padding: 40px;
}

/* 로딩 타이틀 */
.loading-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 30px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    animation: pulse 2s ease-in-out infinite;
}

/* 로딩 메시지 */
.loading-message {
    font-size: 24px;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* 로딩 바 컨테이너 */
.loading-bar-container {
    width: 100%;
    height: 50px;  /* 30px → 50px (더 두껍게) */
    background: rgba(0, 0, 0, 0.4);  /* 배경 진하게 */
    border: 2px solid rgba(255, 255, 255, 0.3);  /* 테두리 추가 */
    border-radius: var(--border-radius-medium, 8px);
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 로딩 바 채우기 */
.loading-bar-fill {
    height: 100%;
    width: 0%;
    /* 3색 그라데이션으로 더 화려하고 선명하게 */
    background: linear-gradient(90deg,
        #4CAF50 0%,
        #2196F3 50%,
        #9C27B0 100%);
    transition: width 0.3s ease-out;
    /* 그림자 강화 */
    box-shadow:
        0 0 20px rgba(76, 175, 80, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: shimmer 1.5s infinite;
}

/* 로딩 진행률 텍스트 */
.loading-progress-text {
    font-size: 16px;
    opacity: 0.7;
    font-family: monospace;
}

/* 로딩 시작 버튼 */
.loading-start-button {
    margin-top: 30px;
    padding: 15px 40px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: pulse-button 2s ease-in-out infinite;
}

.loading-start-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.loading-start-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@keyframes pulse-button {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* 펄스 애니메이션 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* 반짝임 애니메이션 */
@keyframes shimmer {
    0% {
        background-position: -500px 0;
    }
    100% {
        background-position: 500px 0;
    }
}

/* ====================================
   볼륨 조절 UI (Volume Control)
   ==================================== */

/* 인게임 볼륨 버튼 (← 버튼 아래) */
.volume-btn {
    position: fixed;
    top: calc(20px + 50px + 20px); /* <- 버튼 아래 (간격 20px) */
    left: 20px;
    width: 64px;
    height: 64px;
    font-size: 32px;

    /* 중앙 정렬 */
    display: none; /* 기본 숨김, 전투 중에만 표시 */
    align-items: center;
    justify-content: center;

    /* 세련된 배경 */
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(15, 52, 96, 0.95));
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;

    /* 그림자 효과 */
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    color: white;
    cursor: pointer;
    z-index: var(--z-volume-button, 900); /* GameConfig 기반 z-index */
    transition: all 0.3s ease;
    user-select: none;
}

.volume-btn:hover {
    background: linear-gradient(135deg, rgba(26, 26, 46, 1), rgba(15, 52, 96, 1));
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.volume-btn.active {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.95), rgba(25, 118, 210, 0.95));
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 6px 20px rgba(33, 150, 243, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 인게임 공유 버튼 (손패 공유) */
.share-btn {
    position: fixed;
    top: calc(20px + 50px + 20px + 64px + 20px); /* 볼륨 버튼 아래 (간격 20px) */
    left: 20px;
    width: 64px;
    height: 64px;
    font-size: 32px;

    /* 중앙 정렬 */
    display: none; /* 기본 숨김, 전투 중에만 표시 */
    align-items: center;
    justify-content: center;

    /* 스타일 */
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.95), rgba(56, 142, 60, 0.95));
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow:
        0 4px 15px rgba(76, 175, 80, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    color: white;
    cursor: pointer;
    z-index: var(--z-volume-button, 900);
    transition: all 0.3s ease;
    user-select: none;
}

.share-btn:hover {
    background: linear-gradient(135deg, rgba(56, 142, 60, 1), rgba(46, 125, 50, 1));
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 6px 20px rgba(76, 175, 80, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.share-btn.active {
    background: linear-gradient(135deg, rgba(56, 142, 60, 0.95), rgba(46, 125, 50, 0.95));
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 6px 20px rgba(76, 175, 80, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.share-btn.hidden {
    display: none !important;
}

/* 인게임 볼륨 팝업 패널 */
.volume-popup-panel {
    position: fixed;
    top: calc(20px + 50px + 20px + 64px + 10px); /* 볼륨 버튼 아래 (간격 10px) */
    left: 20px;
    width: 340px; /* 260px → 340px (확대) */
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.97), rgba(15, 52, 96, 0.97));
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    padding: 20px;
    z-index: var(--z-volume-controls, 950); /* GameConfig 기반 z-index */
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: none; /* 기본 숨김 */
}

.volume-popup-panel.hidden {
    display: none;
}

.volume-popup-panel:not(.hidden) {
    display: block;
    animation: popupSlideIn 0.3s ease-out;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 볼륨 슬라이더 그룹 (인게임 팝업) */
.volume-slider-group {
    margin-bottom: 20px;
}

.volume-slider-group:last-child {
    margin-bottom: 0;
}

.volume-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.volume-icon {
    font-size: 24px; /* 20px → 24px */
    margin-right: 8px;
}

.volume-label {
    font-size: 18px; /* 16px → 18px */
    font-weight: 600;
    color: white;
    flex: 1;
}

.volume-value {
    font-size: 16px; /* 14px → 16px */
    color: rgba(255, 255, 255, 0.7);
    font-family: monospace;
    min-width: 50px; /* 45px → 50px */
    text-align: right;
}

/* 볼륨 슬라이더 (공통) */
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* 마우스 전용 hover (터치 기기 제외) */
@media (hover: hover) and (pointer: fine) {
    .volume-slider:hover {
        background: rgba(255, 255, 255, 0.3);
    }
}

/* 슬라이더 썸 (크롬, 사파리) */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;  /* 24px → 44px (터치 최소 크기) */
    height: 44px; /* 24px → 44px (터치 최소 크기) */
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

/* 마우스 전용 hover (터치 기기 제외) */
@media (hover: hover) and (pointer: fine) {
    .volume-slider::-webkit-slider-thumb:hover {
        transform: scale(1.2);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.5);
    }
}

/* Active 상태 (터치 피드백) */
.volume-slider::-webkit-slider-thumb:active {
    transform: scale(0.9);
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.8);
}

/* 슬라이더 썸 (파이어폭스) */
.volume-slider::-moz-range-thumb {
    width: 44px;  /* 24px → 44px (터치 최소 크기) */
    height: 44px; /* 24px → 44px (터치 최소 크기) */
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

/* 마우스 전용 hover (터치 기기 제외) */
@media (hover: hover) and (pointer: fine) {
    .volume-slider::-moz-range-thumb:hover {
        transform: scale(1.2);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.5);
    }
}

/* Active 상태 (터치 피드백) */
.volume-slider::-moz-range-thumb:active {
    transform: scale(0.9);
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.8);
}

/* 설정 모달 전용 스타일 */
.settings-modal-content {
    width: 450px;
    height: auto;
    padding: 30px;
}

.settings-body {
    margin: 30px 0 20px 0;
}

/* 설정 모달 닫기 버튼 - 중앙 정렬 & 적절한 크기 */
#settings-modal #close-settings {
    width: fit-content;
    align-self: center;
    padding: 14px 28px;
    font-size: 20px;
    font-weight: 700;
    margin-top: 10px;
}

.volume-setting-group {
    margin-bottom: 30px;
}

.volume-setting-group:last-child {
    margin-bottom: 0;
}

.volume-setting-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.volume-setting-icon {
    font-size: 28px;
    margin-right: 12px;
}

.volume-setting-label {
    font-size: 20px;
    font-weight: 600;
    color: white;
    flex: 1;
}

.volume-setting-value {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    font-family: monospace;
    min-width: 55px;
    text-align: right;
}

/* 설정 모달 슬라이더 (더 큰 크기) */
.volume-setting-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.volume-setting-slider:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 설정 모달 슬라이더 썸 (크롬, 사파리) */
.volume-setting-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}

.volume-setting-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.6);
}

/* 설정 모달 슬라이더 썸 (파이어폭스) */
.volume-setting-slider::-moz-range-thumb {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}

.volume-setting-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.6);
}

/* ====================================
   카드 갤러리 필터 UI (Card Gallery Filter)
   ==================================== */

/* 카드 갤러리 제목 행 - 제목(중앙) + 카드 개수(오른쪽) */
.card-gallery-title-row {
    position: relative;
    text-align: center;
    padding: 2px 15px 12px 15px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 제목 - 중앙 배치 (더 구체적인 선택자로 우선순위 확보) */
.modal-content .card-gallery-title {
    font-size: 52px;
    font-weight: 700;
    color: var(--glass-text-primary, #FFFFFF);
    text-shadow: var(--glass-text-shadow, 0 2px 8px rgba(0, 0, 0, 0.8)), var(--glass-text-glow);
    margin: 0;
}

/* 카드 개수 표시 - 오른쪽 상단 절대 배치 */
.card-count-display {
    position: absolute;
    right: 20px;  /* 15px → 20px (제목과 안전 거리 확보) */
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--card-count-font-size, 20px);
    font-weight: var(--card-count-font-weight, bold);
    color: var(--card-count-color, #FFFFFF);
    text-shadow: var(--card-count-text-shadow, 0 2px 4px rgba(0, 0, 0, 0.8));
    white-space: nowrap;
}

/* 필터 컨트롤 영역 - 필터 버튼만 중앙 배치 */
.card-gallery-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px 12px 15px;
    flex-shrink: 0;
}

/* 필터 버튼 컨테이너 */
.element-filter-container {
    display: flex;
    gap: var(--filter-button-gap, 14px);
    align-items: center;
    flex-shrink: 0;
}

/* 필터 버튼 기본 스타일 */
.element-filter-btn {
    width: var(--filter-button-size, 72px);
    height: var(--filter-button-size, 72px);
    font-size: var(--filter-emoji-size, 42px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    border-radius: var(--filter-button-border-radius, 12px);
    transition: all 0.3s ease;

    /* 기본 상태 스타일 (GameConfig 기반) */
    background: var(--filter-default-bg, rgba(255, 255, 255, 0.15));
    border: var(--filter-default-border, 2px solid rgba(255, 255, 255, 0.3));
    box-shadow: var(--filter-default-shadow, 0 2px 6px rgba(0, 0, 0, 0.3));
    opacity: var(--filter-default-opacity, 0.7);

    /* 모바일 터치 피드백 완전 제거 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    outline: none;
    touch-action: manipulation;
}

/* 필터 버튼 호버 상태 (정밀한 포인팅 기기만 적용 - 터치 기기 제외) */
@media (hover: hover) and (pointer: fine) {
    .element-filter-btn:hover {
        background: var(--filter-hover-bg, rgba(255, 255, 255, 0.25));
        border: var(--filter-hover-border, 2px solid rgba(255, 255, 255, 0.5));
        box-shadow: var(--filter-hover-shadow, 0 4px 12px rgba(0, 0, 0, 0.4));
        opacity: var(--filter-hover-opacity, 1);
        transform: var(--filter-hover-transform, scale(1.05));
    }
}

/* 필터 버튼 포커스 상태 (터치 후 기본 상태 유지) */
.element-filter-btn:focus:not(.active) {
    background: var(--filter-default-bg, rgba(255, 255, 255, 0.15));
    border: var(--filter-default-border, 2px solid rgba(255, 255, 255, 0.3));
    box-shadow: var(--filter-default-shadow, 0 2px 6px rgba(0, 0, 0, 0.3));
    opacity: var(--filter-default-opacity, 0.7);
    outline: none;
}

/* 필터 버튼 활성화 상태 */
.element-filter-btn.active {
    background: var(--filter-active-bg, rgba(255, 215, 0, 0.3));
    border: var(--filter-active-border, 3px solid #FFD700);
    box-shadow: var(--filter-active-shadow, 0 0 15px rgba(255, 215, 0, 0.8));
    opacity: var(--filter-active-opacity, 1);
    transform: var(--filter-active-transform, scale(1.1));
}

/* 필터 버튼 클릭 효과 */
.element-filter-btn:active {
    transform: scale(0.95);
}