html, body {
    height: 100%;
    margin: 0;
    /* 매니페스트의 테마색을 변수로 선언해두면 나중에 관리하기 편해요 */
    --theme-color: #ffffff; 
    
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Inter, system-ui, Arial;
    
    /* 화면 넘침 방지 및 터치 동작 최적화 */
    overflow: hidden;
    touch-action: none; 
    
    /* 가로 모드(landscape) 게임 환경을 위한 뷰포트 설정 */
    min-width: 100vw;
    -webkit-text-size-adjust: 100%;
}

/* PWA 설치 시 상태바 색상 대응 (Safari 등 일부 브라우저용) */
@media all and (display-mode: standalone) {
    body {
        background-color: #000;
    }
}
/* 게임 프레임 */
#gameWrap { 
    width: 800px; 
    height: 450px; 
    background: #fff; 
    border-radius: 0; 
    padding: 0; 
    position: relative; 
    overflow: hidden;
}
#gameScreen {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 450px;
    transform: translate(-50%, -50%) scale(0.7);
    transform-origin: center center;
    border: 2px solid #333;
    overflow: hidden;
}
#gameScreen canvas {
    position: absolute;
    top: 0;
    left: 0;
}
#game {
    z-index: 1;
}
#drawCanvas {
    z-index: 2;
    pointer-events: none;
}

#brushUI {
    position: absolute;
    bottom: 30px; right: 30px;
    display: none; flex-direction: column;
    gap: 5px; z-index: 2000;
}
.icon { width: 40px; height: 40px; cursor: pointer; }
.colorBox {
    width: 30px; height: 30px; border-radius: 50%;
    margin-bottom: 3px; border: 1px solid #aaa; cursor: pointer;
}

#rotateOverlay {
    position: fixed; inset: 0;
    background: #fff; color: #000;
    z-index: 3000; display: none;
    align-items: center; justify-content: center;
    font-size: 15px; 
    font-weight: 700;
 font-family: 'Inter', 물마루 Mono; /* 글씨체 */
    text-align: center;
}
/* fullscreen button - pure image only (비율 자동 유지) */
#fullscreenBtn {
    position: fixed;
    top: 20px;
    right: 40px;
    z-index: 2500;
    background: transparent;
    border: none;
    padding: 7px;
    display: none;
}

#fullscreenBtn img {
    width: 70px;
    height: auto;
}

/* 전체화면 버튼 둥둥 애니메이션 */
#fullscreenBtn.pulse img {
    animation: fullscreenPulse 1.4s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes fullscreenPulse {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.18); }
    30%  { transform: scale(1); }
    55%  { transform: scale(1.18); }
    70%  { transform: scale(1); }
    100% { transform: scale(1); }
}

/* mobile buttons */
.mobileBtn {
    width: 55px;
    height: 55px;
    opacity: 1;
    transition: transform .12s;
    transform-origin: center;
}
.mobileBtn:active { 
    transform: scale(1.15);
}

/* ▼ 이동 버튼들 */
#moveButtons {
    position:absolute;
    left:40px;
    bottom:170px;
    display:flex;
    gap:14px;
    pointer-events:auto;
}

#btnRight {
    left:10px;
    top:25px;
    position:relative;
}

/* ▼ 액션 버튼들 */
#actionButtons {
    position:absolute;
    right:40px;
    top:50%;
    transform:translateY(-50%);
    width:120px;
    height:220px;
    pointer-events:auto;
}

/* 내부 버튼들 */
#btnDoor { 
    position:absolute;
    top:20px;
    right:0;
}
#btnPickup { 
    position:absolute;
    top:50%;
    right:40px;
    transform:translateY(-50%);
}
#btnJump { 
    position:absolute;
    bottom:0;
    right:0;
}