/* Pretendard Local Fonts (SIL Open Font License 1.1) */
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Pretendard-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Pretendard-Black.woff2') format('woff2');
}

        :root {
            --notch-top: 0px;
        }

        html, body {
            height: 100%;
            height: 100dvh;
            overflow: hidden;
            width: 100%;
            margin: 0;
            padding: 0;
            background-color: #FFFFFF;
            overscroll-behavior: none;
        }

        body {
            font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
            background-color: #FFFFFF;
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
        }

        .safe-pt { padding-top: calc(max(var(--notch-top, 0px), env(safe-area-inset-top, 0px)) + 1.25rem); }
        .safe-pb { padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); }
        .safe-pl { padding-left: max(env(safe-area-inset-left, 0px), 0.75rem); }
        .safe-pr { padding-right: max(env(safe-area-inset-right, 0px), 0.75rem); }

        /* Animations */
        @keyframes spin-slow {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .animate-spin-slow { animation: spin-slow 8s linear infinite; }
        .animate-float { animation: float 3s ease-in-out infinite; }

        .shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }

        @keyframes gameOverSlideUp {
            0% { opacity: 0; transform: translateY(30px) scale(0.95); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .game-over-card-anim {
            animation: gameOverSlideUp 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* 시간 게이지 고정 트랙 프레임 (절대 흔들리지 않음) */
        .timer-track {
            box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(203, 213, 225, 0.9);
            transition: border-color 0.12s ease-out, box-shadow 0.12s ease-out, transform 0.08s ease-out;
        }

        .timer-track-flash {
            border-color: rgba(56, 189, 248, 0.95) !important;
            box-shadow: 0 0 12px rgba(56, 189, 248, 0.65), inset 0 0 4px rgba(255, 255, 255, 0.7) !important;
            transform: scale(1.02);
        }

        .timer-fill {
            background: linear-gradient(90deg, #1D4ED8 0%, #2563EB 35%, #0099FF 70%, #00E5FF 100%);
            box-shadow: 0 0 8px rgba(0, 160, 255, 0.35);
            transition: filter 0.08s ease-out, box-shadow 0.08s ease-out;
            position: relative;
        }

        /* 앞쪽 선단부 초고속 에너지 스파크 하이라이트 팁 */
        .timer-fill::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 8px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, #FFFFFF 100%);
            border-radius: 9999px;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(0, 229, 255, 0.8);
            opacity: 0.85;
            transition: opacity 0.08s ease-out, transform 0.08s ease-out;
        }

        /* 탭 성공 시 강력하고 세련된 네온 플라즈마 차지 임팩트 */
        .timer-flash {
            filter: brightness(1.95) contrast(1.25) saturate(1.4) !important;
            box-shadow: 0 0 16px rgba(0, 229, 255, 0.95), 0 0 28px rgba(37, 99, 235, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.95) !important;
        }

        .timer-flash::after {
            opacity: 1 !important;
            transform: scaleY(1.3) scaleX(1.6) !important;
            box-shadow: 0 0 14px #FFFFFF, 0 0 24px #00E5FF, 0 0 35px #2563EB !important;
        }

        /* 타이머 위기 상태 (25% 미만) 경고 점멸 */
        .timer-danger-fill {
            background: linear-gradient(90deg, #DC2626 0%, #EF4444 60%, #F59E0B 100%) !important;
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
            animation: timerDangerPulse 0.45s ease-in-out infinite alternate;
        }

        @keyframes timerDangerPulse {
            0% { filter: brightness(1.0); }
            100% { filter: brightness(1.55); }
        }

        /* 타이머 50% 대기 상태 은은한 전력 숨쉬기 펄스 */
        .timer-ready-pulse {
            animation: timerReadyGlow 1.6s ease-in-out infinite alternate;
        }
        @keyframes timerReadyGlow {
            0% { filter: brightness(1.0) drop-shadow(0 0 2px rgba(0, 100, 255, 0.3)); }
            100% { filter: brightness(1.35) drop-shadow(0 0 8px rgba(0, 210, 255, 0.8)); }
        }

        /* 하단 조작 버튼 대기 중 사선 샤인 광택 스윕 */
        .btn-ready-shine {
            overflow: hidden !important;
        }
        .btn-ready-shine::after {
            content: '';
            position: absolute;
            top: -60%;
            left: -150%;
            width: 70%;
            height: 220%;
            background: linear-gradient(
                115deg,
                transparent 0%,
                rgba(255, 255, 255, 0) 30%,
                rgba(255, 255, 255, 0.45) 50%,
                rgba(255, 255, 255, 0) 70%,
                transparent 100%
            );
            transform: rotate(25deg);
            pointer-events: none;
            animation: btnShineSweep 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        @keyframes btnShineSweep {
            0%, 20% { left: -150%; }
            70%, 100% { left: 180%; }
        }

        /* UI Styling */
        .glass-panel {
            background: #FFFFFF;
        }

        .bottom-controls-container {
            padding-bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 24px));
        }

        .control-btn {
            position: relative;
            height: 104px;
            background-color: var(--turn-bg, #FFFFFF);
            border: 2px solid var(--turn-border, #E2E8F0);
            border-radius: 26px;
            box-shadow: 0 5px 0 var(--turn-shadow, #CBD5E1);
            color: var(--turn-icon, #333D4B);
            touch-action: none;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
            transition: none;
        }
        /* 버튼 상단 60px 및 좌우/하단으로 터치 판정 영역을 대폭 확장하여 터치 미스 방지 */
        .control-btn::before {
            content: '';
            position: absolute;
            top: -60px;
            bottom: -20px;
            left: -12px;
            right: -12px;
            background: transparent;
            pointer-events: auto;
        }
        @media (min-width: 640px) {
            .control-btn {
                height: 112px;
            }
        }
        .control-btn:active, .control-btn.btn-pressed { transition: none !important; 
            transform: translateY(4px);
            box-shadow: 0 1px 0 var(--turn-shadow, #CBD5E1);
            background-color: var(--turn-bg, #F1F5F9);
        }
        .control-btn.primary {
            background-color: var(--dig-bg, #0064FF);
            color: var(--dig-icon, #FFFFFF);
            border: 2px solid var(--dig-border, #0050CC);
            box-shadow: 0 6px 0 var(--dig-shadow, #0045B5);
        }
        .control-btn.primary:active, .control-btn.primary.btn-pressed {
            background-color: var(--dig-bg, #0050CC);
            box-shadow: 0 1px 0 var(--dig-shadow, #0045B5);
        }

        /* [Button Frame Themes] 테마별 개성 넘치는 특수 프레임, 텍스처, 베벨 디자인 */
        /* 1. 자폭 방폭 콘솔: 볼드 블랙 방폭 프레임 + 사선 위험 해저드 스트라이프 */
        .control-btn.theme-destruct {
            border-radius: 12px !important;
            border: 4px solid #18181B !important;
            background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.12) 0px, rgba(0, 0, 0, 0.12) 12px, transparent 12px, transparent 24px) !important;
            box-shadow: inset 0 0 0 3px #F59E0B, 0 8px 0 #78350F !important;
        }
        .control-btn.primary.theme-destruct {
            border: 4px solid #18181B !important;
            background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.18) 0px, rgba(0, 0, 0, 0.18) 12px, transparent 12px, transparent 24px) !important;
            box-shadow: inset 0 0 0 3px #DC2626, 0 8px 0 #450A0A !important;
        }
        .control-btn.theme-destruct::after {
            content: '';
            position: absolute;
            inset: 4px;
            border-radius: 8px;
            border: 1.5px dashed rgba(0, 0, 0, 0.45);
            pointer-events: none;
        }

        /* 2. 사이버 네온: 샤프 엣지 + 네온 시안/핑크 발광 테두리 + HUD 브래킷 */
        .control-btn.theme-cyber {
            border-radius: 6px !important;
            border: 2.5px solid #00F0FF !important;
            box-shadow: 0 0 22px rgba(0, 240, 255, 0.75), inset 0 0 12px rgba(0, 240, 255, 0.35), 0 6px 0 #0284C7 !important;
            background-image: linear-gradient(180deg, rgba(0, 240, 255, 0.12) 0%, transparent 65%) !important;
        }
        .control-btn.primary.theme-cyber {
            border: 2.5px solid #EC4899 !important;
            box-shadow: 0 0 24px rgba(236, 72, 153, 0.8), inset 0 0 14px rgba(236, 72, 153, 0.4), 0 6px 0 #9D174D !important;
            background-image: linear-gradient(180deg, rgba(236, 72, 153, 0.2) 0%, transparent 65%) !important;
        }
        .control-btn.theme-cyber::after {
            content: '';
            position: absolute;
            inset: 5px;
            border-left: 3px solid #00F0FF;
            border-right: 3px solid #00F0FF;
            border-top: 1px dashed rgba(0, 240, 255, 0.35);
            border-bottom: 1px dashed rgba(0, 240, 255, 0.35);
            pointer-events: none;
        }
        .control-btn.primary.theme-cyber::after {
            border-left: 3px solid #EC4899;
            border-right: 3px solid #EC4899;
            border-top: 1px dashed rgba(236, 72, 153, 0.4);
            border-bottom: 1px dashed rgba(236, 72, 153, 0.4);
        }

        /* 3. 레트로 오락실: 통통한 3D 볼록 캡슐 푸시 버튼 + 두꺼운 5px 베젤 + 상단 유리알 글레어 */
        .control-btn.theme-arcade {
            border-radius: 52px !important;
            border: 5px solid #F59E0B !important;
            background-image: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.25) 45%, transparent 50%, rgba(0,0,0,0.1) 100%) !important;
            box-shadow: inset 0 6px 0 rgba(255,255,255,0.8), inset 0 -4px 0 rgba(0,0,0,0.15), 0 8px 0 #B45309 !important;
        }
        .control-btn.primary.theme-arcade {
            border: 5px solid #DC2626 !important;
            box-shadow: inset 0 6px 0 rgba(255,255,255,0.6), inset 0 -4px 0 rgba(0,0,0,0.25), 0 8px 0 #991B1B !important;
        }

        /* 4. 다크 매트릭스: 형광 그린 3.5px 대시 와이어프레임 + 선명한 CRT 스캔라인 */
        .control-btn.theme-matrix {
            border-radius: 6px !important;
            border: 3.5px dashed #22C55E !important;
            background-image: repeating-linear-gradient(0deg, rgba(34, 197, 94, 0.22) 0px, rgba(34, 197, 94, 0.22) 2px, transparent 2px, transparent 4px) !important;
            box-shadow: 0 0 16px rgba(34, 197, 94, 0.55), inset 0 0 12px rgba(34, 197, 94, 0.3), 0 6px 0 #15803D !important;
        }
        .control-btn.primary.theme-matrix {
            border: 3.5px dashed #10B981 !important;
            box-shadow: 0 0 18px rgba(16, 185, 129, 0.6), inset 0 0 14px rgba(16, 185, 129, 0.35), 0 6px 0 #047857 !important;
        }

        /* 5. 솔리드 골드: 엔틱 이중 골드 프레임 (Double Border) + 황금 주괴 메탈릭 베벨 */
        .control-btn.theme-gold {
            border-radius: 18px !important;
            border: 5px double #FEF08A !important;
            background-image: linear-gradient(135deg, rgba(255,255,255,0.75) 0%, rgba(254, 240, 138, 0.25) 30%, transparent 45%, rgba(255,255,255,0.65) 68%, transparent 100%) !important;
            box-shadow: inset 0 3px 6px rgba(255,255,255,0.9), inset 0 -4px 6px rgba(180, 83, 9, 0.4), 0 8px 0 #92400E !important;
        }
        .control-btn.primary.theme-gold {
            border: 5px double #FEF08A !important;
            box-shadow: inset 0 3px 6px rgba(255,255,255,0.85), inset 0 -4px 6px rgba(180, 83, 9, 0.45), 0 8px 0 #78350F !important;
        }

        /* 6. 초코베리: 4px 몰드 프레임 + 3D 양각 엠보싱 */
        .control-btn.theme-choco {
            border-radius: 20px !important;
            border: 4px solid #FB7185 !important;
            box-shadow: inset 4px 4px 0 rgba(255,255,255,0.6), inset -4px -4px 0 rgba(190, 18, 60, 0.4), 0 7px 0 #9F1239 !important;
        }
        .control-btn.primary.theme-choco {
            border: 4px solid #475569 !important;
            box-shadow: inset 4px 4px 0 rgba(255,255,255,0.35), inset -4px -4px 0 rgba(0, 0, 0, 0.5), 0 7px 0 #0F172A !important;
        }

        /* 7. 드릴캣 민트: 슬릭 울트라 라운드 알약 캡슐 */
        .control-btn.theme-mint {
            border-radius: 52px !important;
            border: 4px solid #86EFAC !important;
            box-shadow: 0 7px 0 #22C55E !important;
        }
        .control-btn.primary.theme-mint {
            border: 4px solid #67E8F9 !important;
            box-shadow: 0 7px 0 #0891B2 !important;
        }

        /* 0. 클래식 블루: 모던 미니멀 플로팅 */
        .control-btn.theme-classic {
            border-radius: 26px !important;
            border-width: 2.5px !important;
        }

        /* Hide Scrollbars Across In-Game Scroll Containers (Shop, Store, Leaderboard) */
        .custom-scrollbar,
        #shop-content-scroll,
        #shop-store-view,
        #leaderboard-list {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .custom-scrollbar::-webkit-scrollbar,
        #shop-content-scroll::-webkit-scrollbar,
        #shop-store-view::-webkit-scrollbar,
        #leaderboard-list::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }

        /* Shop Grid */
        .shop-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 4px;
        }
        .shop-item {
            min-height: 122px;
            border-radius: 22px;
            border: 2px solid #F2F4F6;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            background: white;
            overflow: hidden;
            padding: 10px 4px 8px 4px;
        }
        .shop-item.selected {
            border-color: #0064FF;
            background-color: #F2F9FF;
            box-shadow: 0 0 0 2px #0064FF inset;
        }
        .shop-item.locked {
            opacity: 0.6;
            background-color: #F9FAFB;
        }
        .shop-item canvas {
            margin-bottom: 4px;
        }
        .shop-item:active { transform: scale(0.95); }

        /* Coin Shop Modal */
        .coin-shop-modal {
            background: rgba(0, 0, 0, 0.5);
            /* backdrop-filter removed for 60fps */
        }
        .coin-shop-content {
            background: white;
            border-radius: 24px;
            padding: 24px;
            width: 90%;
            max-width: 400px;
        }
        .coin-package {
            border: 1px solid #E5E8EB;
            border-radius: 16px;
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* margin handled by flex gap */
            transition: all 0.2s;
        }
        .coin-package:hover {
            border-color: #0064FF;
            background-color: #F2F9FF;
        }
        .buy-btn {
            background-color: #0064FF;
            color: white;
            padding: 8px 16px;
            border-radius: 12px;
            font-weight: bold;
            transition: all 0.2s;
        }
        .buy-btn:active {
            background-color: #0050CC;
            transform: scale(0.95);
        }

        /* Arena Slot Machine Reel Animation */
        .slot-reel-slip {
            transform: translateY(-8px);
            opacity: 0.35;
            filter: blur(0.8px);
            transition: transform 0.04s ease, opacity 0.04s ease, filter 0.04s ease;
        }
        .slot-settle-pop {
            animation: slotSettlePop 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        /* Arena Reel 3D Strip */
        #arena-reel-strip {
            will-change: transform;
        }
        .slot-settle-bounce {
            animation: slotSettleBounce 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        @keyframes slotSettleBounce {
            0% { transform: scale(0.96); }
            50% { transform: scale(1.03); }
            100% { transform: scale(1.0); }
        }
        @keyframes slotSettlePop {
            0% { transform: scale(0.92); }
            50% { transform: scale(1.08); }
            100% { transform: scale(1.0); }
        }


/* ─── 1:1 Replacement Asset Slots for Artist (Lobby & Modals) ─── */
.lobby-bg-slot {
    background-image: url('../images/backgrounds/lobby_bg.svg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.modal-panel-custom {
    background-image: none;
}

/* Unlock reveal (silhouette -> pop) */
@keyframes unlockPop { 0% { transform: scale(0.6); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
.unlock-pop { animation: unlockPop 0.45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes unlockFlash {
    0% { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.9); background: rgba(253, 224, 71, 0.55); }
    100% { box-shadow: 0 0 0 90px rgba(253, 224, 71, 0); background: rgba(253, 224, 71, 0); }
}
.unlock-flash-anim { animation: unlockFlash 0.7s ease-out both; }

/* Horizontal goal rows: thin subtle scrollbar + smooth touch/drag */
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.goal-scroll-row {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}
.goal-scroll-row::-webkit-scrollbar {
    height: 4px;
}
.goal-scroll-row::-webkit-scrollbar-track {
    background: transparent;
}
.goal-scroll-row::-webkit-scrollbar-thumb {
    background-color: #CBD5E1;
    border-radius: 9999px;
}