/* Tetra Ars — extracted from app.js stylePatch for CSP */

    /* 상단 UI 튀어나옴(오버플로우) 방지 및 자동 줄바꿈 허용 (버튼 그룹 내부까지 완벽 적용) */
    #game-ui .header-controls, #game-ui .header-controls > div {
        display: flex;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        height: auto !important;
        box-sizing: border-box !important;
        gap: 8px !important;
    }
    /* 게임오버 시 이전 게임 화면을 아예 숨기고 독립된 새 화면처럼 연출 */
    .game-over-state .game-container {
        display: none !important;
    }
    .game-over-state #game-overlay {
        position: relative !important;
        height: auto !important;
        min-height: 70vh !important;
        background: transparent !important; /* 배경을 완전히 제거하고 바디 테마 사용 */
    }

    /* 상대방 준비 시 설정 박스 반짝임 강조 애니메이션 */
    @keyframes highlightBlink {
        0% { box-shadow: 0 0 0px rgba(13, 255, 114, 0); border-color: #444; }
        50% { box-shadow: 0 0 25px rgba(13, 255, 114, 0.8); border-color: #0DFF72; }
        100% { box-shadow: 0 0 0px rgba(13, 255, 114, 0); border-color: #444; }
    }
    .highlight-blink {
        animation: highlightBlink 1.5s ease-in-out 2 !important;
    }

    /* 게임 진행 중 스크롤은 허용하되, 더블탭/핀치 확대는 방지 */
    body.mobile-mode.game-playing-lock {
        touch-action: pan-y !important; /* 수직 스크롤만 허용하고 확대/축소 동작은 차단 */
    }

    body.mobile-mode .header-controls {
        padding: 5px 10px !important;
        margin-bottom: 5px !important;
    }
    body.mobile-mode #main-title {
        font-size: 1.2rem !important;
    }
    body.mobile-mode .game-container {
        gap: 2% !important;
        flex-wrap: nowrap !important; /* 강제로 가로 한 줄에 나란히 배치 */
        width: 100% !important;
        justify-content: center !important; /* 양끝으로 벌어지는 현상을 막고 가운데로 모아 여백 최소화 */
        align-items: flex-start !important;
        margin-top: 15px !important; /* 테트리스 판을 살짝 아래로 내려줌 */
        margin-bottom: 10px !important;
    }
    body.mobile-mode .player-area {
        padding: 0 !important; /* 여백 완벽히 제거 */
        box-sizing: border-box !important;
        position: relative !important; /* 내부 시간 표시를 위한 기준점 지정 */
    }
    body.mobile-mode #p1-name,
    body.mobile-mode #p2-name {
        font-size: 0.95rem !important;
        margin-bottom: 4px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    body.mobile-mode .score,
    body.mobile-mode .lines-info {
        font-size: 0.8rem !important;
        margin-bottom: 2px !important;
    }
    body.mobile-mode .hold-block canvas,
    body.mobile-mode .next-block canvas {
        width: 40px !important;
        height: 40px !important;
    }
    body.mobile-mode .hold-block,
    body.mobile-mode .next-block {
        width: auto !important;
        min-width: 45px !important;
    }
    /* 내 화면을 상대방보다 2배 크게 설정 */
    body.mobile-mode #p1-area {
        width: auto !important; /* 강제 너비를 해제하여 게임판 좌우 텅 빈 여백 완벽히 제거 */
        max-width: 62% !important;
        margin: 0 !important;
    }
    body.mobile-mode #opponent-area {
        width: auto !important; /* 상대방 영역도 동일하게 빈 여백 제거 */
        max-width: 36% !important;
        margin: 0 !important;
    }
    
    /* 상대방 넥스트박스 우측 넘어감 방지: 홀드 바로 아래 세로 배치 */
    body.mobile-mode #opponent-area > div:first-of-type {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 5px !important;
        align-items: center !important;
        margin-bottom: 5px !important;
    }
    body.mobile-mode #opponent-area .hold-block {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    body.mobile-mode #opponent-area .next-block {
        grid-column: 1 !important;
        grid-row: 2 !important;
        text-align: left !important;
    }
    body.mobile-mode #opponent-area > div:first-of-type > div:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
    }

    /* 세로 모드 (Portrait): 테트리스 판을 현재보다 더 길고 크게 확대 */
    @media (orientation: portrait) {
        body.mobile-mode #tetris {
            max-width: 100% !important;
            width: auto !important;
            height: auto !important;
            max-height: 55vh !important; /* 조작 버튼 공간 확보를 위해 약간 축소 */
            object-fit: contain !important;
            margin: 0 auto !important;
            padding: 0 !important;
            display: block !important;
        }
        body.mobile-mode #opponent-tetris {
            max-width: 100% !important;
            width: auto !important;
            height: auto !important;
            max-height: 38vh !important;
            object-fit: contain !important;
        }
    }
    
    /* 가로 모드 (Landscape): 테트리스 판을 한 화면에 쏙 들어오도록 이전보다 더 작게 축소 */
    @media (orientation: landscape) {
        body.mobile-mode .game-container {
            margin-top: 5px !important;
            margin-bottom: 5px !important;
        }
        body.mobile-mode #tetris {
            max-width: 100% !important;
            width: auto !important;
            height: auto !important;
            max-height: 65vh !important;
            object-fit: contain !important;
            margin: 0 auto !important;
            padding: 0 !important;
            display: block !important;
        }
        body.mobile-mode #opponent-tetris {
            max-width: 100% !important;
            width: auto !important;
            height: auto !important;
            max-height: 50vh !important;
            object-fit: contain !important;
        }
    }
    body.mobile-mode canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    body.mobile-mode #game-time-display {
        position: static !important;
        transform: none !important;
        font-size: 0.95rem !important;
        color: rgba(255, 255, 255, 0.6) !important;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important; /* 배경 블록과 구분되도록 그림자 */
        pointer-events: none !important; /* 터치 시 블록 조작 방해 금지 */
        z-index: 100 !important;
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        width: auto !important;
    }

    /* 모바일 준비 화면 오버레이 위치 위로 조정 및 조작 버튼과 겹침 방지 */
    body.mobile-mode #game-overlay {
        justify-content: flex-start !important;
        padding-top: 10vh !important;
        bottom: auto !important;
        height: 50vh !important;
    }
    body.mobile-mode .game-over-state #game-overlay {
        height: auto !important; /* 결과 화면은 길어질 수 있으므로 예외 */
    }

    /* 유동적(Fluid) 컨트롤 버튼 스타일 - 억지스러운 줄바꿈 방지 및 근본적 크기 조절 */
    body.mobile-mode #mobile-controls {
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        display: flex !important;
        flex-wrap: nowrap !important; /* 한 줄에 유동적으로 스케일링하여 배치 */
        justify-content: space-evenly !important;
        align-items: center !important;
        padding: 0 1vw !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
        margin-top: 5px !important;
    }
    /* 게임 진행 중이 아닐 때(로비, 게임오버 등 숨김 처리 시) !important 덮어쓰기 방지 */
    body.mobile-mode #mobile-controls[style*="none"]:not(.edit-mode):not(.prepare-edit) {
        display: none !important;
    }
    body.mobile-mode #mobile-controls.prepare-edit {
        display: flex !important;
        opacity: 0.01 !important; /* 좌표 캡처용 찰나의 순간이므로 안 보이게 */
    }

    /* 모바일 모드: 단축키 설정 숨김 및 조작 버튼 배치 커스텀 UI */
    body:not(.mobile-mode) #mobile-edit-btn { display: none !important; }
    body.mobile-mode #mobile-edit-btn { display: inline-block !important; }
    body.mobile-mode #overlay-keymap-btn,
    body.mobile-mode #controls-keymap-btn,
    body.mobile-mode button[onclick*="toggleKeyMap"] {
        display: none !important;
    }
    body.mobile-mode #mobile-controls.edit-mode {
        display: flex !important; /* 편집 모드일 땐 항상 보이도록 강제 */
        pointer-events: auto !important; /* 편집 중 터치 이벤트 활성화 */
    }
    body.mobile-mode #mobile-controls.edit-mode .mobile-btn {
        border: 2px dashed #0DFF72 !important;
        background: rgba(13, 255, 114, 0.2) !important;
        z-index: 10000 !important;
        pointer-events: auto !important;
    }
    .resize-handle {
        position: absolute;
        bottom: -5px;
        right: -5px;
        width: 30px;
        height: 30px;
        background: #FF0D72;
        border-radius: 50%;
        border: 2px solid #fff;
        z-index: 10001;
        box-shadow: 0 0 10px rgba(0,0,0,0.8);
    }

    /* 커스텀 레이아웃이 적용되었거나 편집 중일 때, 부모 컨테이너가 Fixed 자식들의 좌표계(Containing Block)를 망치는 것 방지 */
    body.mobile-mode.custom-layout .mobile-control-group,
    body.mobile-mode #mobile-controls.edit-mode .mobile-control-group {
        position: static !important;
        transform: none !important;
    }

    body.mobile-mode .mobile-control-group {
        display: flex !important;
        flex-direction: row !important;
        gap: 1.5vw !important;
        align-items: center !important;
    }
    body.mobile-mode .mobile-control-group > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5vw !important;
        align-items: center !important;
    }

    body.mobile-mode .mobile-btn {
        width: 12vw !important;
        height: 12vw !important;
        max-width: 65px !important;
        max-height: 65px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: min(14px, 3.5vw) !important;
        padding: 2px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        aspect-ratio: 1 / 1 !important; /* 항상 정사각형 유지 */
        word-break: break-all !important;
        white-space: normal !important;
    }

    /* 가로 모드 (Landscape) 에서의 버튼 크기 최적화 및 좌우 여백 배치 */
    @media (orientation: landscape) {
        body.mobile-mode #mobile-controls {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            pointer-events: none !important; /* 빈 공간 터치 시 테트리스판 클릭 씹힘 방지 */
            margin: 0 !important;
            padding: 0 !important;
        }
        body.mobile-mode .mobile-control-group {
            position: absolute !important;
            pointer-events: auto !important; /* 버튼 그룹은 터치 가능 */
            bottom: 5vh !important;
        }
        /* 왼쪽/오른쪽 그룹을 화면 양 끝 여백으로 보내기 */
        body.mobile-mode .mobile-control-group:nth-child(1) { left: 2vw !important; }
        body.mobile-mode .mobile-control-group:nth-child(3) { right: 2vw !important; }
        /* 중앙 그룹은 하단 가운데 유지 (테트리스판 아래) */
        body.mobile-mode .mobile-control-group:nth-child(2) {
            left: 50% !important;
            bottom: 2vh !important;
            transform: translateX(-50%) !important;
        }

        body.mobile-mode .mobile-btn {
            width: 14vh !important;
            height: 14vh !important;
            max-width: 70px !important;
            max-height: 70px !important;
            font-size: min(13px, 3.5vh) !important;
        }
        body.mobile-mode .mobile-control-group { gap: 1.5vh !important; }
        body.mobile-mode .mobile-control-group > div { gap: 1.5vh !important; }
    }

    /* 모바일웹 모드 로비(게임 참가) UI 박스 및 버튼 확대 */
    body.mobile-mode #lobby-screen {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 40px 15px 15px 15px !important;
        height: auto !important;
        min-height: 100vh !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }
    body.mobile-mode .lobby-box {
        width: 100% !important;
        padding: 30px 15px !important;
        box-sizing: border-box !important;
    }
    body.mobile-mode #lobby-title {
        font-size: 2.2rem !important;
        margin-bottom: 20px !important;
    }
    body.mobile-mode .lobby-input {
        width: 100% !important;
        font-size: 1.3rem !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        height: auto !important;
    }
    body.mobile-mode #lobby-screen label {
        font-size: 1.1rem !important;
    }
    body.mobile-mode .lobby-box button {
        font-size: 1.2rem !important;
        padding: 15px !important;
        height: auto !important;
        margin-bottom: 10px !important;
    }
    /* 로비 상단 설정 버튼들 크기 축소 및 자동 줄바꿈 (화면 밖 튀어나감 방지) */
    body.mobile-mode #lobby-screen > div:first-child {
        position: static !important; /* 고정 위치 해제하여 배경 안/위쪽으로 자연스럽게 배치 */
        width: 100% !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        margin-bottom: 15px !important;
    }
    body.mobile-mode #lobby-screen > div:first-child button,
    body.mobile-mode #lobby-screen > div:first-child select {
        font-size: 0.9rem !important;
        padding: 8px 12px !important;
        margin-bottom: 5px !important;
    }

    /* PWA 매니저 팝업의 텍스트 입력창 가독성 문제 해결 */
    #pwa-save-name {
        background-color: #222222 !important;
        color: #ffffff !important;
        border: 1px solid #555555 !important;
    }