@font-face {
    font-family: "NeoDunggeunmo Pro";
    src: url("./assets/native/fonts/NeoDunggeunmoPro-Regular.woff") format("woff"),
         url("./assets/native/fonts/NeoDunggeunmoPro-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #120a26;
}

/* 모바일 브라우저는 100vh 에 주소창 영역까지 포함해 위/아래가 잘리므로, 실제 보이는 높이(dvh)에 맞춘다 */
#app {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container {
    width: 100%;
    height: 100%;
}

/*
 * Phaser의 pixelArt 옵션은 WebGL 텍스처 샘플링만 NEAREST로 고정할 뿐,
 * Scale.FIT 이 캔버스를 CSS 크기로 확대할 때 브라우저가 기본으로 적용하는
 * bilinear 스무딩까지는 막아주지 않는다. 이게 확대된 도트 그림이
 * 뭉개져 보이는 실제 원인이라, 캔버스 자체에 픽셀 그대로 확대되도록 지정한다.
 */
#game-container canvas {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}


/* 첫 화면 로딩 표시 (게임이 시작되면 Boot 씬이 걷어낸다) */
#loading {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: #120a26;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-family: "NeoDunggeunmo Pro", sans-serif;
    transition: opacity 0.3s;
}

#loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#loading .loading-text {
    font-size: 28px;
    letter-spacing: 2px;
}

/* 글자 뒤에 . .. ... 이 차례로 나타난다 */
#loading .loading-dots::after {
    content: '';
    animation: loading-dots 1.2s steps(4, end) infinite;
}

@keyframes loading-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75%, 100% { content: '...'; }
}

#loading .loading-bar {
    width: min(60vw, 320px);
    height: 12px;
    border: 3px solid #8c7bb5;
    padding: 2px;
    box-sizing: content-box;
}

#loading #loading-fill {
    width: 0;
    height: 100%;
    background: #b49cf0;
    transition: width 0.2s;
}

/*
 * 모바일(터치 기기)에서 세로로 열면 게임 대신 '가로로 돌려주세요' 안내를 덮어 보여준다.
 * 게임 캔버스는 항상 16:9 가로 화면(1920x1080)이다.
 */
#rotate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #120a26;
    color: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: "NeoDunggeunmo Pro", sans-serif;
    text-align: center;
}

#rotate-overlay p {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

#rotate-overlay p.sub {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.7;
}

#rotate-overlay .rotate-icon {
    width: 44px;
    height: 76px;
    border: 4px solid #fff;
    border-radius: 8px;
    animation: rotate-hint 1.6s ease-in-out infinite;
}

@keyframes rotate-hint {
    0%, 20% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(-90deg); }
}

@media (orientation: portrait) and (pointer: coarse) {
    #rotate-overlay {
        display: flex;
    }
}

/* 닉네임/비밀번호 입력칸의 안내 글자 색 (입력칸 그림이 밝은 회색이라 어두운 보라색 계열) */
.game-input::placeholder {
    color: #8c7bb5;
}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}

canvas {touch-action:none;} body {overscroll-behavior:none;}