/* ============================================
   게임 화면 반응형 스타일
   
   주의: 이 파일은 게임 화면의 반응형 스타일을 관리합니다.
   새로운 레이아웃 구조 (game-header, game-main, game-controls-bottom)를 사용합니다.
   ============================================ */

/* ============================================
   모바일 세로 모드 - 게임 화면
   ============================================ */

/* 세로 모드 모바일 최적화 - 80:20 레이아웃 */
@media (max-width: 768px) and (orientation: portrait) {
    .game-screen.active {
        flex-direction: column !important; /* 세로 방향 */
        flex-wrap: nowrap !important; /* 80:20 비율 고정을 위해 nowrap 필수 */
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 0 !important; /* 패딩 제거하여 정확한 높이 계산 */
        padding-bottom: clamp(0.75rem, 2vh, 1rem) !important; /* 하단 여백 추가 (반응형) */
        margin: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important; /* 스크롤 방지 */
        box-sizing: border-box;
        gap: 0.5rem !important; /* 게임 영역과 하단 영역 간 여백 추가 */
    }
    
    /* 게임 보드를 위에 배치 (80% 비율) */
    .game-container {
        order: 1 !important;
        flex: 0 0 calc(80vh - 1.5rem) !important; /* 80vh에서 하단 여백(gap + padding-bottom) 제외 */
        flex-shrink: 0 !important; /* 축소 방지 */
        flex-grow: 0 !important; /* 확장 방지 */
        width: 100% !important;
        max-width: 100% !important;
        min-height: calc(80vh - 1.5rem) !important;
        max-height: calc(80vh - 1.5rem) !important;
        height: calc(80vh - 1.5rem) !important; /* 정확한 높이 계산 */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        justify-content: center !important; /* 가운데 정렬 */
        align-items: center !important; /* 가운데 정렬 */
        padding: 0.25rem !important; /* 패딩 최소화 */
        margin: 0 !important;
        box-sizing: border-box;
        overflow: hidden !important; /* 스크롤 방지 */
        position: relative !important;
    }
    
    .game-container canvas {
        max-height: calc(100% - 0.5rem) !important; /* 패딩 고려 (0.25rem * 2) */
        max-width: calc(100% - 0.5rem) !important; /* 패딩 고려 */
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 !important; /* flex 컨테이너의 justify-content/align-items가 중앙 정렬 처리 */
        display: block !important; /* 인라인 요소의 여백 제거 */
        position: relative !important; /* 중앙 정렬을 위한 기준점 */
        flex-shrink: 1 !important; /* 공간이 부족하면 축소 허용 */
        flex-grow: 0 !important; /* 확장 방지 */
        align-self: center !important; /* 세로 중앙 정렬 강화 */
    }
    
    /* 게임 컨테이너 내부 요소 중앙 정렬 강화 */
    /* 주의: position: absolute 요소(next-block-container, fullscreen-btn)는 flex 레이아웃에서 제외됨 */
    .game-container > canvas {
        flex-shrink: 1 !important; /* 공간이 부족하면 축소 허용 */
        flex-grow: 0 !important;
    }
    
    /* Next 블록 컨테이너 - 모바일 세로 모드에서 크기 조정 */
    /* position: absolute로 설정되어 flex 레이아웃에서 제외됨 */
    .next-block-container {
        position: absolute !important; /* flex 레이아웃에서 제외 */
        bottom: 0.5rem;
        right: 0.5rem;
        padding: 0.35rem;
        max-width: 70px;
        z-index: 10;
    }
    
    /* 전체 화면 버튼 - 세로 모드에서도 표시 */
    .game-container .fullscreen-btn {
        display: flex !important; /* 세로 모드에서도 표시 */
        position: absolute !important;
        top: 0.5rem !important;
        left: 0.5rem !important;
        z-index: 20 !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s ease-in-out !important;
    }

    .game-container .fullscreen-btn:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }

    .game-container .fullscreen-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* 화면 회전 버튼 - 세로 모드에서도 표시 */
    .game-container .rotate-screen-btn {
        display: flex !important; /* 세로 모드에서도 표시 */
        position: absolute !important;
        top: 0.5rem !important;
        left: 3.5rem !important; /* 전체 화면 버튼 옆에 배치 (40px + 10px 간격) */
        z-index: 20 !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s ease-in-out !important;
    }

    .game-container .rotate-screen-btn:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }

    .game-container .rotate-screen-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .next-block-container h3 {
        font-size: 0.65rem;
        margin-bottom: 0.25rem;
    }
    
    .next-block-container .next-block-canvas,
    #nextCanvas.next-block-canvas {
        width: 45px !important;
        height: 45px !important;
        max-width: 45px !important;
        max-height: 45px !important;
    }
    
    /* ============================================
       하단 컨트롤 영역 템플릿 구조 (25:50:25)
       ============================================ */
    
    /* 하단 컨트롤 래퍼 - 20% 고정 */
    .bottom-controls-wrapper {
        order: 2 !important; /* 게임 컨테이너 아래에 배치 */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: row !important; /* 25:50:25 가로 배치 */
        justify-content: stretch !important; /* 전체 너비 사용 */
        align-items: stretch !important; /* 전체 높이 사용 */
        flex: 0 0 calc(20vh - 1.5rem) !important; /* 20vh에서 상단 여백(gap)과 하단 여백 제외 */
        flex-shrink: 0 !important; /* 축소 방지 */
        flex-grow: 0 !important; /* 확장 방지 */
        width: 100% !important;
        min-height: calc(20vh - 1.5rem) !important;
        max-height: calc(20vh - 1.5rem) !important;
        height: calc(20vh - 1.5rem) !important;
        box-sizing: border-box;
        padding: 0.25rem !important; /* 패딩 최소화 */
        padding-bottom: 0.75rem !important; /* 하단 여백 추가 (0.5rem -> 0.75rem) */
        gap: 0.25rem !important; /* gap 최소화 */
        margin-bottom: clamp(0.75rem, 2vh, 1rem) !important; /* 화면 바닥과의 여백 추가 (반응형) */
        z-index: 100 !important;
        overflow: hidden !important; /* 스크롤 방지 */
        position: relative !important;
    }

    /* 왼쪽 영역 (25%) - D-pad */
    .bottom-controls-left {
        flex: 0 0 25% !important; /* 25% 고정 */
        flex-shrink: 0 !important; /* 축소 방지 */
        flex-grow: 0 !important; /* 확장 방지 */
        width: 25% !important;
        min-width: 25% !important;
        max-width: 25% !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        justify-content: center !important; /* 세로 중앙 정렬 */
        align-items: center !important; /* 가로 중앙 정렬 */
        padding: 0.25rem !important; /* 패딩 최소화 */
        box-sizing: border-box;
        position: relative;
        z-index: 101 !important;
        overflow: hidden !important; /* 스크롤 방지 */
    }

    /* D-pad wrapper */
    .bottom-controls-left .dpad-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* D-pad container */
    .bottom-controls-left .dpad-container {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: min(90px, 15vh) !important; /* 90px 또는 15vh 중 작은 값 사용 */
        height: min(90px, 15vh) !important;
        max-width: 100% !important;
        max-height: 100% !important;
        z-index: 102 !important;
    }

    /* D-pad 버튼 */
    .bottom-controls-left .dpad-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 103 !important;
    }

    .bottom-controls-left .dpad-btn:disabled {
        display: flex !important;
        visibility: visible !important;
        opacity: 0.5 !important;
        z-index: 103 !important;
    }

    /* 가운데 영역 (50%) - Info 패널 */
    .bottom-controls-center {
        flex: 0 0 50% !important; /* 50% 고정 */
        flex-shrink: 0 !important; /* 축소 방지 */
        flex-grow: 0 !important; /* 확장 방지 */
        width: 50% !important;
        min-width: 50% !important;
        max-width: 50% !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        justify-content: center !important; /* 세로 중앙 정렬 */
        align-items: center !important; /* 가로 중앙 정렬 */
        padding: 0.25rem !important; /* 패딩 최소화 */
        box-sizing: border-box;
        position: relative;
        z-index: 101 !important;
        overflow: visible !important; /* hidden -> visible로 변경하여 info 패널의 모든 요소가 보이도록 */
    }

    /* Info 패널 - 가운데 영역 내부 */
    .bottom-controls-center .info-panel {
        position: static !important; /* flex 레이아웃 내에서 정상 배치 */
        left: auto !important;
        transform: none !important;
        bottom: auto !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; /* 최소 너비 제한 해제 */
        max-height: none !important; /* max-height 제한 제거하여 모든 요소가 보이도록 */
        height: auto !important;
        padding: 0.25rem !important; /* 패딩 최소화 */
        font-size: 0.65rem !important; /* 폰트 크기 약간 축소 */
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 0.15rem 0.15rem !important; /* gap 더 줄임 (0.25rem 0.2rem -> 0.15rem 0.15rem) */
        align-items: center !important; /* start -> center로 변경하여 중앙 정렬 */
        justify-items: center !important; /* 가로 중앙 정렬 추가 */
        overflow: visible !important; /* hidden -> visible로 변경하여 모든 요소가 보이도록 */
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px !important; /* border-radius 축소 */
        backdrop-filter: blur(10px);
        z-index: 99;
    }
    
    /* Info 패널 내 info-item 줄간격 및 중앙 정렬 조정 */
    .bottom-controls-center .info-panel .info-item {
        margin-bottom: 0.3rem !important; /* 기본 0.75rem에서 더 줄임 */
        text-align: center !important; /* 중앙 정렬 */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* 가로 중앙 정렬 */
        justify-content: center !important; /* 세로 중앙 정렬 */
    }
    
    .bottom-controls-center .info-panel .info-item h3 {
        margin-bottom: 0.1rem !important; /* 기본 0.2rem에서 더 줄임 */
        text-align: center !important; /* 중앙 정렬 */
    }
    
    .bottom-controls-center .info-panel .info-item .info-value {
        text-align: center !important; /* 중앙 정렬 */
    }
    
    /* Info 패널 내 버튼 간격 및 중앙 정렬 조정 */
    .bottom-controls-center .info-panel .btn {
        margin-bottom: 0 !important; /* 버튼 간격 제거 (같은 줄에 배치) */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        grid-row: 3 !important; /* 두 버튼 모두 3번째 행에 배치 */
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .bottom-controls-center .info-panel #pauseBtn {
        grid-column: 1 / 2 !important; /* 첫 번째 컬럼 (왼쪽 절반) */
        margin-right: 0.075rem !important; /* 버튼 간 간격 */
    }
    
    .bottom-controls-center .info-panel #endGameBtn {
        grid-column: 2 / 4 !important; /* 두 번째와 세 번째 컬럼 (오른쪽 절반) */
        margin-left: 0.075rem !important; /* 버튼 간 간격 */
    }

    /* 오른쪽 영역 (25%) - 변환 버튼 */
    .bottom-controls-right {
        flex: 0 0 25% !important; /* 25% 고정 */
        flex-shrink: 0 !important; /* 축소 방지 */
        flex-grow: 0 !important; /* 확장 방지 */
        width: 25% !important;
        min-width: 25% !important;
        max-width: 25% !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        justify-content: center !important; /* 세로 중앙 정렬 */
        align-items: center !important; /* 가로 중앙 정렬 */
        padding: 0.25rem !important; /* 패딩 최소화 */
        box-sizing: border-box;
        position: relative;
        z-index: 101 !important;
        overflow: hidden !important; /* 스크롤 방지 */
    }

    /* 회전 버튼 그룹 */
    .bottom-controls-right .button-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important; /* gap 최소화 */
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 102 !important;
    }

    .bottom-controls-right .rotate-btn {
        width: min(50px, 8vh) !important; /* 50px 또는 8vh 중 작은 값 사용 */
        height: min(50px, 8vh) !important;
        max-width: 100% !important;
        max-height: 100% !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 103 !important;
    }

    .bottom-controls-right .rotate-btn svg {
        width: min(24px, 4vh) !important; /* 24px 또는 4vh 중 작은 값 사용 */
        height: min(24px, 4vh) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 104 !important;
    }
    
    /* ============================================
       호환성을 위한 기존 클래스 유지 (mobile-controls-left, mobile-controls-right)
       ============================================ */
    
    /* 기존 mobile-controls-left는 bottom-controls-left로 매핑 */
    .mobile-controls-left {
        display: none !important; /* 새로운 구조 사용 */
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 기존 mobile-controls-right는 bottom-controls-right로 매핑 */
    .mobile-controls-right {
        display: none !important; /* 새로운 구조 사용 */
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* 가로 모드용 info-panel도 세로 모드에서는 숨김 */
    .info-panel-landscape {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* 가로 모드용 info-panel이 포함된 컨테이너도 숨김 */
    .mobile-controls-left .info-panel,
    .mobile-controls-left .info-panel-landscape {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* 작은 세로 모드 화면 (높이 600px 미만) */
    @media (max-height: 600px) {
        .game-screen.active {
            padding: 0 !important; /* 패딩 제거 */
            padding-bottom: clamp(0.5rem, 1.5vh, 0.75rem) !important; /* 하단 여백 추가 (작은 화면용, 반응형) */
            margin: 0 !important;
            gap: 0.4rem !important; /* 게임 영역과 하단 영역 간 여백 추가 (작은 화면용) */
        }
        
        .game-container {
            flex: 0 0 calc(80vh - 1.2rem) !important; /* 패딩과 gap, 하단 여백 고려 */
            min-height: calc(80vh - 1.2rem) !important;
            max-height: calc(80vh - 1.2rem) !important;
            height: calc(80vh - 1.2rem) !important;
            padding: 0.15rem !important; /* 패딩 최소화 */
            justify-content: center !important; /* 가운데 정렬 */
            align-items: center !important; /* 가운데 정렬 */
        }
        
        /* 하단 컨트롤 영역 - 작은 화면에서도 25:50:25 비율 유지 */
        .bottom-controls-wrapper {
            flex: 0 0 calc(20vh - 1.2rem) !important; /* gap과 하단 여백 고려 */
            min-height: calc(20vh - 1.2rem) !important;
            max-height: calc(20vh - 1.2rem) !important;
            height: calc(20vh - 1.2rem) !important;
            padding: 0.15rem !important; /* 패딩 최소화 */
            padding-bottom: clamp(0.5rem, 1.5vh, 0.65rem) !important; /* 하단 여백 추가 (반응형) */
            gap: 0.15rem !important; /* gap 최소화 */
            margin-bottom: clamp(0.5rem, 1.5vh, 0.65rem) !important; /* 화면 바닥과의 여백 추가 (반응형) */
        }
        
        .bottom-controls-left,
        .bottom-controls-center,
        .bottom-controls-right {
            padding: 0.15rem !important; /* 패딩 최소화 */
        }
        
        /* Info 패널 - 작은 화면 조정 */
        .bottom-controls-center .info-panel {
            padding: 0.2rem !important; /* 패딩 최소화 */
            font-size: 0.55rem !important;
            gap: 0.15rem 0.1rem !important; /* gap 최소화 */
            min-width: 0 !important; /* 최소 너비 제한 해제 */
            grid-template-rows: auto auto auto !important; /* 3개 행 (info-item 3개 + 버튼 1줄) */
        }

        .bottom-controls-center .info-panel .info-item h3 {
            font-size: 0.5rem;
            margin-bottom: 0.06rem;
            opacity: 0.7;
        }

        .bottom-controls-center .info-panel .info-item .info-value {
            font-size: 0.95rem;
            font-weight: bold;
            margin-top: 0;
        }

        .bottom-controls-center .info-panel #pauseBtn,
        .bottom-controls-center .info-panel #endGameBtn {
            margin-bottom: 0 !important;
            padding: 0.25rem 0.35rem;
            font-size: 0.6rem;
            grid-row: 3 !important; /* 두 버튼 모두 3번째 행에 배치 */
        }
        
        .bottom-controls-center .info-panel #pauseBtn {
            grid-column: 1 / 2 !important; /* 첫 번째 컬럼 (왼쪽 절반) */
            margin-right: 0.075rem !important; /* 버튼 간 간격 */
        }
        
        .bottom-controls-center .info-panel #endGameBtn {
            grid-column: 2 / 4 !important; /* 두 번째와 세 번째 컬럼 (오른쪽 절반) */
            margin-left: 0.075rem !important; /* 버튼 간 간격 */
        }
        
        /* 회전 버튼 - 작은 화면 조정 */
        .bottom-controls-right .rotate-btn {
            width: min(40px, 7vh) !important; /* 40px 또는 7vh 중 작은 값 */
            height: min(40px, 7vh) !important;
        }
        
        .bottom-controls-right .rotate-btn svg {
            width: min(20px, 3.5vh) !important; /* 20px 또는 3.5vh 중 작은 값 */
            height: min(20px, 3.5vh) !important;
        }
        
        /* D-pad - 작은 화면 조정 */
        .bottom-controls-left .dpad-container {
            width: min(75px, 12vh) !important; /* 75px 또는 12vh 중 작은 값 */
            height: min(75px, 12vh) !important;
        }
    }
}

/* ============================================
   모바일 가로 모드 - 게임 화면
   ============================================ */

/* 가로 모드 모바일 - 3단 레이아웃 (25:50:25) - 왼쪽: Info 상단 + D-pad 하단, 가운데: 게임, 오른쪽: 회전 버튼 하단 */
@media (max-width: 768px) and (orientation: landscape) {
    /* 세로 모드 전용 구조 숨김 (가로 모드에서는 사용하지 않음) */
    .bottom-controls-wrapper {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .bottom-controls-left,
    .bottom-controls-center,
    .bottom-controls-right {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* 세로 모드용 info-panel도 가로 모드에서는 숨김 */
    .bottom-controls-center .info-panel {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* 가로 모드용 구조 표시 */
    .mobile-controls-left,
    .mobile-controls-right {
        display: flex !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 1 !important;
    }
    
    /* D-pad 크기 조정 - 가로 모드 */
    .mobile-controls-left .dpad-container {
        width: 68px !important; /* 가로 모드용 크기 */
        height: 68px !important;
    }
    
    /* 더 구체적인 선택자 사용하여 mobile-portrait.css의 세로 모드 스타일 오버라이드 */
    .screen.game-screen.active {
        position: relative !important; /* absolute positioning을 위한 기준점 */
        flex-direction: row !important; /* 가로 배치 - mobile-portrait.css의 column 오버라이드 */
        flex-wrap: nowrap !important; /* mobile-portrait.css의 nowrap과 동일하지만 가로 모드용 */
        justify-content: flex-start !important; /* space-between 대신 flex-start로 변경하여 비율 정확히 적용 */
        align-items: stretch !important;
        padding: 0.5rem !important; /* mobile-portrait.css의 padding: 0 오버라이드 */
        margin: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        gap: 0.5rem !important;
        box-sizing: border-box !important;
    }

    /* 왼쪽 패널 (25%) - Info 패널(70%) + D-pad(30%) */
    .mobile-controls-left {
        flex: 0 0 25% !important;
        width: 25% !important;
        min-width: 25% !important;
        max-width: 25% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.5rem;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        background: rgba(30, 41, 59, 0.9); /* slate-800 */
        border-radius: 1rem;
        backdrop-filter: blur(10px);
        padding: 0.5rem;
        box-sizing: border-box;
        order: 1 !important; /* !important 추가 */
        flex-shrink: 0;
        margin: 0;
    }
    
    /* Info 패널 - 왼쪽 패널 상단 (70%) */
    .info-panel {
        order: 1 !important;
        position: static !important;
        flex: 0 0 70% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        padding: 0.75rem !important;
        font-size: 0.7rem !important;
        margin: 0 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        gap: 0.5rem;
        overflow: visible !important;
        overflow-y: visible !important;
        background: rgba(30, 41, 59, 0.95) !important; /* slate-800 */
        border-radius: 0.75rem !important;
        backdrop-filter: blur(10px) !important;
        pointer-events: auto !important;
        z-index: 1 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        box-sizing: border-box !important;
    }
    
    /* D-pad 컨테이너 - 왼쪽 패널 하단 (30%) */
    .mobile-controls-left .dpad-wrapper {
        order: 2 !important;
        flex: 0 0 30% !important;
        width: 100% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        box-sizing: border-box;
    }
    
    /* 정보 항목 간단한 형태 - 한 줄로 표시 */
    .info-panel .info-item {
        margin-bottom: 0 !important;
        padding: 0.25rem 0 !important;
        background: transparent !important;
        border-radius: 0;
        text-align: left;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }
    
    .info-panel .info-item h3 {
        font-size: 0.7rem;
        margin-bottom: 0 !important;
        opacity: 0.9;
        color: rgba(255, 255, 255, 0.9);
        font-weight: normal;
        flex-shrink: 0;
    }
    
    .info-panel .info-item .info-value {
        font-size: 0.9rem;
        font-weight: bold;
        color: #fff;
        flex-shrink: 0;
    }
    
    /* 버튼 스타일 - 컴팩트하게 */
    .info-panel .btn {
        width: 100%;
        margin-bottom: 0.25rem;
        padding: 0.4rem 0.5rem;
        font-size: 0.65rem;
    }
    
    .info-panel #pauseBtn {
        margin-bottom: 0.25rem;
    }
    
    .info-panel #endGameBtn {
        margin-bottom: 0;
    }
    
    /* D-pad 크기 조정 - 왼쪽 패널 하단에 맞게 조정 */
    .mobile-controls-left .dpad-container {
        width: 100px !important;
        height: 100px !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 auto;
    }
    
    /* 게임 보드 중앙 배치 (50%) */
    /* 더 구체적인 선택자 사용하여 mobile-portrait.css의 세로 모드 스타일 오버라이드 */
    .screen.game-screen.active .game-container {
        order: 2 !important;
        flex: 0 0 50% !important; /* mobile-portrait.css의 calc(80vh - 0.5rem) 오버라이드 */
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: 50% !important;
        width: 50% !important;
        min-width: 50% !important;
        max-width: 50% !important;
        min-height: auto !important; /* mobile-portrait.css의 calc(80vh - 0.5rem) 오버라이드 */
        max-height: 100% !important; /* mobile-portrait.css의 calc(80vh - 0.5rem) 오버라이드 */
        height: 100% !important; /* mobile-portrait.css의 calc(80vh - 0.5rem) 오버라이드 */
        padding: 0.5rem !important; /* mobile-portrait.css의 0.25rem 오버라이드 */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        background: rgba(15, 23, 42, 0.9) !important; /* slate-900 */
        border-radius: 1rem !important;
        position: relative !important; /* static -> relative로 변경 */
    }

    /* 전체 화면 버튼 */
    .game-container .fullscreen-btn {
        display: none; /* 기본적으로 숨김 */
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        z-index: 20;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .game-container .fullscreen-btn:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .game-container .fullscreen-btn svg {
        width: 20px;
        height: 20px;
    }
    
    /* 화면 회전 버튼 */
    .game-container .rotate-screen-btn {
        display: none; /* 기본적으로 숨김 */
        position: absolute;
        top: 0.5rem;
        left: 3.5rem; /* 전체 화면 버튼 옆에 배치 (40px + 10px 간격) */
        z-index: 20;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .game-container .rotate-screen-btn:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .game-container .rotate-screen-btn svg {
        width: 20px;
        height: 20px;
    }
    
    /* Next 블록 컨테이너 - 게임 패널 내부 오른쪽 하단에 표시 */
    .game-container .next-block-container {
        display: block !important;
        position: absolute !important;
        bottom: 0.5rem !important;
        right: 0.5rem !important;
        z-index: 10 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        padding: 0.4rem !important;
        border-radius: 10px !important;
        backdrop-filter: blur(5px) !important;
        max-width: 80px !important;
        box-sizing: border-box !important;
    }
    
    .game-container .next-block-container h3 {
        font-size: 0.7rem !important;
        margin-bottom: 0.3rem !important;
        opacity: 0.9 !important;
        color: #fff !important;
    }
    
    .game-container .next-block-container .next-block-canvas,
    .game-container #nextCanvas.next-block-canvas {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }
    
    /* 더 구체적인 선택자 사용하여 mobile-portrait.css의 세로 모드 스타일 오버라이드 */
    .screen.game-screen.active .game-container canvas {
        width: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        max-width: 100% !important; /* mobile-portrait.css의 calc(100% - 0.5rem) 오버라이드 */
        max-height: 100% !important; /* mobile-portrait.css의 calc(100% - 0.5rem) 오버라이드 */
        object-fit: contain !important;
        display: block !important;
        position: relative !important;
        flex-shrink: 0 !important; /* mobile-portrait.css의 flex-shrink: 1 오버라이드 */
        flex-grow: 0 !important;
        align-self: center !important;
    }
    
    /* 오른쪽 패널 (25%) - 빈 공간(70%) + 회전 버튼(30%) */
    .mobile-controls-right {
        flex: 0 0 25% !important;
        width: 25% !important;
        min-width: 25% !important;
        max-width: 25% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important; /* gap 제거하여 정확한 비율 유지 */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        background: rgba(30, 41, 59, 0.9) !important; /* slate-800 */
        border-radius: 1rem !important;
        backdrop-filter: blur(10px) !important;
        padding: 0.5rem !important;
        box-sizing: border-box !important;
        order: 3 !important; /* !important 추가 */
        flex-shrink: 0 !important;
        margin: 0 !important;
        z-index: 1 !important;
        overflow: visible !important;
    }
    
    /* 빈 공간 - 상단 (70%) */
    .mobile-controls-right .empty-space {
        order: 1 !important;
        flex: 1 1 70% !important;
        flex-basis: 70% !important;
        width: 100% !important;
        min-height: 0 !important;
        max-height: 70% !important;
        box-sizing: border-box;
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
    }
    
    /* 버튼 그룹 - 하단에 배치 (30%) */
    .mobile-controls-right .button-group {
        order: 2 !important;
        flex: 0 0 30% !important;
        flex-basis: 30% !important;
        width: 100% !important;
        min-height: 120px !important; /* 최소 높이 보장 */
        max-height: 30% !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        padding: 0.5rem !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        overflow: visible !important;
    }
    
    /* 회전 버튼 크기 조정 및 강제 표시 - 가로 모드 (768px 이하) */
    .mobile-controls-right .rotate-btn {
        width: 50px !important;
        height: 50px !important;
        margin: 0 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        background: linear-gradient(145deg, #ed8936, #dd6b20) !important;
        border: none !important;
        border-radius: 50% !important;
        color: #fff !important;
        cursor: pointer !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    }
    
    .mobile-controls-right .rotate-btn svg {
        width: 24px !important;
        height: 24px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mobile-controls-right .rotate-btn .btn-label {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        bottom: clamp(-16px, -2vh, -18px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: clamp(0.5rem, 1.2vw, 0.5625rem) !important; /* 8px ~ 9px */
        font-weight: 600 !important;
        white-space: nowrap !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }
}

/* 전체 화면 버튼 - 모바일 가로 모드에서만 표시 */
@media (max-width: 768px) and (orientation: landscape) {
    .game-container .fullscreen-btn {
        display: flex !important;
    }
    
    .game-container .rotate-screen-btn {
        display: flex !important;
    }
}

/* 작은 가로 모드 화면 (예: 146.94 x 70.46) - 3단 레이아웃 (25:50:25) */
@media (max-width: 500px) and (orientation: landscape) {
    /* 세로 모드 전용 구조 숨김 (가로 모드에서는 사용하지 않음) */
    .bottom-controls-wrapper {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .bottom-controls-left,
    .bottom-controls-center,
    .bottom-controls-right {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* 세로 모드용 info-panel도 가로 모드에서는 숨김 */
    .bottom-controls-center .info-panel {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* 가로 모드용 구조 표시 */
    .mobile-controls-left,
    .mobile-controls-right {
        display: flex !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 1 !important;
    }
    
    /* D-pad 크기 조정 - 작은 가로 모드 */
    .mobile-controls-left .dpad-container {
        width: 60px !important; /* 작은 가로 모드용 크기 */
        height: 60px !important;
    }
    
    /* 더 구체적인 선택자 사용하여 mobile-portrait.css의 세로 모드 스타일 오버라이드 */
    .screen.game-screen.active {
        position: relative !important;
        flex-direction: row !important; /* mobile-portrait.css의 column 오버라이드 */
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding: 0.3rem !important; /* mobile-portrait.css의 padding: 0 오버라이드 */
        margin: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        gap: 0.3rem !important;
        box-sizing: border-box !important;
    }

    /* 왼쪽 패널 (25%) - Info 패널(70%) + D-pad(30%) */
    .mobile-controls-left {
        flex: 0 0 25% !important;
        width: 25% !important;
        min-width: 25% !important;
        max-width: 25% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0.3rem;
        padding: 0.3rem;
        background: rgba(30, 41, 59, 0.9) !important;
        border-radius: 1rem;
        backdrop-filter: blur(10px);
        order: 1 !important; /* !important 추가 */
    }
    
    /* Info 패널 - 왼쪽 패널 상단 (70%) */
    .info-panel {
        order: 1 !important;
        position: static !important;
        flex: 0 0 70% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        padding: 0.5rem;
        font-size: 0.6rem;
        gap: 0.4rem;
        overflow: visible !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: rgba(30, 41, 59, 0.95) !important;
        border-radius: 0.75rem;
        backdrop-filter: blur(10px);
        pointer-events: auto !important;
        z-index: 1 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        box-sizing: border-box !important;
    }
    
    /* D-pad 컨테이너 - 왼쪽 패널 하단 (30%) */
    .mobile-controls-left .dpad-wrapper {
        order: 2 !important;
        flex: 0 0 30% !important;
        width: 100% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.3rem;
        box-sizing: border-box;
    }
    
    .info-panel .info-item {
        margin-bottom: 0 !important;
        padding: 0.2rem 0 !important;
        background: transparent !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.4rem;
    }
    
    .info-panel .info-item h3 {
        font-size: 0.6rem;
        margin-bottom: 0 !important;
        opacity: 0.9;
        font-weight: normal;
    }
    
    .info-panel .info-item .info-value {
        font-size: 0.8rem;
        font-weight: bold;
    }
    
    .info-panel .btn {
        padding: 0.35rem 0.4rem;
        font-size: 0.55rem;
        margin-bottom: 0.2rem;
    }
    
    .info-panel #endGameBtn {
        margin-bottom: 0;
    }
    
    /* D-pad 크기 조정 - 왼쪽 하단 */
    .mobile-controls-left {
        flex: 0 0 25% !important;
        width: 25% !important;
        min-width: 25% !important;
        max-width: 25% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding: 0.5rem;
        background: rgba(30, 41, 59, 0.9) !important;
        border-radius: 1rem;
        backdrop-filter: blur(10px);
        order: 1;
    }
    
    .mobile-controls-left .dpad-container {
        width: 80px !important;
        height: 80px !important;
    }
    
    /* 게임 보드 크기 조정 (50%) */
    /* 더 구체적인 선택자 사용하여 mobile-portrait.css의 세로 모드 스타일 오버라이드 */
    .screen.game-screen.active .game-container {
        order: 2 !important;
        flex: 0 0 50% !important; /* mobile-portrait.css의 calc(80vh - 0.5rem) 오버라이드 */
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: 50% !important;
        width: 50% !important;
        min-width: 50% !important;
        max-width: 50% !important;
        min-height: auto !important; /* mobile-portrait.css의 calc(80vh - 0.5rem) 오버라이드 */
        max-height: 100% !important; /* mobile-portrait.css의 calc(80vh - 0.5rem) 오버라이드 */
        height: 100% !important; /* mobile-portrait.css의 calc(80vh - 0.5rem) 오버라이드 */
        padding: 0.3rem !important; /* mobile-portrait.css의 0.25rem 오버라이드 */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        background: rgba(15, 23, 42, 0.9) !important;
        border-radius: 1rem !important;
        position: relative !important;
    }
    
    /* 오른쪽 패널 (25%) - 빈 공간(70%) + 회전 버튼(30%) */
    .mobile-controls-right {
        flex: 0 0 25% !important;
        width: 25% !important;
        min-width: 25% !important;
        max-width: 25% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important; /* gap 제거하여 정확한 비율 유지 */
        padding: 0.3rem !important;
        background: rgba(30, 41, 59, 0.9) !important;
        border-radius: 1rem !important;
        backdrop-filter: blur(10px) !important;
        order: 3 !important; /* !important 추가 */
        z-index: 1 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* 빈 공간 - 상단 (70%) */
    .mobile-controls-right .empty-space {
        order: 1 !important;
        flex: 1 1 70% !important;
        flex-basis: 70% !important;
        width: 100% !important;
        min-height: 0 !important;
        max-height: 70% !important;
        box-sizing: border-box;
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
    }
    
    /* 버튼 그룹 - 하단에 배치 (30%) */
    .mobile-controls-right .button-group {
        order: 2 !important;
        flex: 0 0 30% !important;
        flex-basis: 30% !important;
        width: 100% !important;
        min-height: 100px !important; /* 최소 높이 보장 */
        max-height: 30% !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.4rem !important;
        padding: 0.3rem !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        overflow: visible !important;
    }
    
    /* 회전 버튼 크기 조정 및 강제 표시 - 작은 가로 모드 (500px 이하) */
    .mobile-controls-right .rotate-btn {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        background: linear-gradient(145deg, #ed8936, #dd6b20) !important;
        border: none !important;
        border-radius: 50% !important;
        color: #fff !important;
        cursor: pointer !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    }
    
    .mobile-controls-right .rotate-btn svg {
        width: 20px !important;
        height: 20px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mobile-controls-right .rotate-btn .btn-label {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        bottom: clamp(-16px, -2vh, -18px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: clamp(0.5rem, 1.2vw, 0.5625rem) !important; /* 8px ~ 9px */
        font-weight: 600 !important;
        white-space: nowrap !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    /* Next 블록 컨테이너 - 게임 패널 내부 오른쪽 하단에 표시 */
    .game-container .next-block-container {
        display: block !important;
        position: absolute !important;
        bottom: 0.3rem !important;
        right: 0.3rem !important;
        z-index: 10 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        padding: 0.3rem !important;
        border-radius: 8px !important;
        backdrop-filter: blur(5px) !important;
        max-width: 60px !important;
        box-sizing: border-box !important;
    }
    
    .game-container .next-block-container h3 {
        font-size: 0.6rem !important;
        margin-bottom: 0.2rem !important;
        opacity: 0.9 !important;
        color: #fff !important;
    }
    
    .game-container .next-block-container .next-block-canvas,
    .game-container #nextCanvas.next-block-canvas {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }
    
    /* 더 구체적인 선택자 사용하여 mobile-portrait.css의 세로 모드 스타일 오버라이드 */
    .screen.game-screen.active .game-container canvas {
        width: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        max-width: 100% !important; /* mobile-portrait.css의 calc(100% - 0.5rem) 오버라이드 */
        max-height: 100% !important; /* mobile-portrait.css의 calc(100% - 0.5rem) 오버라이드 */
        object-fit: contain !important;
        display: block !important;
        position: relative !important;
        flex-shrink: 0 !important; /* mobile-portrait.css의 flex-shrink: 1 오버라이드 */
        flex-grow: 0 !important;
        align-self: center !important;
    }

    /* 전체 화면 버튼 - 작은 가로 모드에서만 표시 */
    .game-container .fullscreen-btn {
        display: flex !important;
    }
    
    /* 화면 회전 버튼 - 작은 가로 모드에서도 표시 */
    .game-container .rotate-screen-btn {
        display: flex !important;
    }
}