/* K3K 웹 플레이어 페이지 스타일.
   데스크톱: 게임 도시 아트를 어둡게 깐 배경 위에 금색 테두리 카드로 캔버스를 감싼다.
   모바일: 유니티 기본 동작(전체 화면 캔버스)을 그대로 유지한다. */

body { padding: 0; margin: 0; background: #14100b url('page-bg.jpg') no-repeat center center fixed; background-size: cover; font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif }

/* 세로 배치 프레임: 헤더 / 게임 / 푸터 */
#page-frame { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; box-sizing: border-box }

#page-header { display: flex; align-items: center; gap: 14px }
#page-header-logo { width: 56px; height: 56px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.6) }
#page-header-text { display: flex; flex-direction: column }
#page-title { color: #f5cf6b; font-size: 26px; font-weight: bold; letter-spacing: 2px; text-shadow: 0 2px 6px rgba(0,0,0,.8) }
#page-subtitle { color: #cbb27c; font-size: 13px; letter-spacing: 1px; text-shadow: 0 1px 4px rgba(0,0,0,.8) }

/* 게임 캔버스를 감싸는 카드 */
#unity-container { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid #6b4f2a; box-shadow: 0 0 0 1px rgba(245,207,107,.25), 0 12px 40px rgba(0,0,0,.7) }
/* top/left 를 명시해야 한다. page-frame(패딩+가운데 정렬) 안에 있어서
   앵커 없이 fixed 만 주면 흐름상 위치에 고정되어 화면 일부가 잘린다. */
/* 화면비가 17:9 보다 넓으면 캔버스는 17:9 까지만 늘리고 가운데 정렬한다(양옆은 검은 여백).
   left/right + margin auto 로 중앙을 잡는다 — transform 회전과 달리 단순 배치라 유니티 터치 좌표에 영향이 없다. */
#unity-container.unity-mobile { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; width: 100vw; max-width: calc(100vh * 17 / 9); max-width: calc(100dvh * 17 / 9); height: 100vh; height: 100dvh; border: none; border-radius: 0; box-shadow: none }
#unity-canvas { display: block; background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }

/* 로딩 표시 */
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 100px; height: 100px; margin: 0 auto; background: url('k3k-logo.png') no-repeat center; background-size: contain }
#unity-progress-bar-empty { width: 200px; height: 14px; margin: 18px auto 0; background: #241c14; border: 1px solid #6b4f2a; border-radius: 7px; overflow: hidden }
#unity-progress-bar-full { width: 0%; height: 100%; background: linear-gradient(90deg, #c8892f, #f5cf6b); transition: width .2s ease-out }

/* 전체화면 버튼: 게임 화면을 가리지 않도록 캔버스 밖(페이지 푸터 오른쪽)에 둔다 */
#unity-footer { display: flex; align-items: center }
.unity-mobile-page #unity-footer { display: none }
#unity-fullscreen-button { cursor: pointer; width: 38px; height: 38px; border-radius: 8px; background: rgba(20,16,11,.75) url('fullscreen-button.png') no-repeat center; background-size: 24px; border: 1px solid #6b4f2a; transition: background-color .15s, transform .1s }
#unity-fullscreen-button:hover { background-color: rgba(107,79,42,.9); transform: scale(1.06) }

/* 페이지 푸터 */
#page-footer { display: flex; align-items: center; gap: 16px; color: #8a7a5c; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.8) }
#page-version { color: #6e6248 }

/* 모바일에서는 헤더/푸터를 숨기고 게임만 전체 화면 */
.unity-mobile-page #page-header, .unity-mobile-page #page-footer { display: none }
.unity-mobile-page #page-frame { padding: 0 }
/* 스크롤/바운스로 주소창이 움직이며 화면이 잘리는 것을 막는다. 배경 이미지도 어차피 안 보이므로 끈다. */
/* 17:9 초과 기기에서 캔버스 양옆 여백이 게임 화면과 이질감 없도록 순수 검정으로 둔다 */
.unity-mobile-page { overflow: hidden; background-image: none; background-color: #000 }

#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

/* 모바일 세로 화면 회전 안내. 가로 고정(lock)에 성공하거나 기기를 돌리면 orientation 이 landscape 가 되어 자동으로 사라진다. */
#rotate-overlay { display: none }
@media (orientation: portrait) {
  .unity-mobile-page #rotate-overlay { display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: 100; background: rgba(10,8,5,.9); color: #f5cf6b; align-items: center; justify-content: center; text-align: center; font-size: 18px; line-height: 2 }
}
#rotate-overlay-icon { font-size: 44px; line-height: 1.2 }
#rotate-overlay-sub { color: #cbb27c; font-size: 13px }