/* =========================================================================
   픽셀아트 기본 원칙:
   - 이미지는 1x 원본, 화면에서 정수배 확대
   - image-rendering: pixelated 로 도트 유지
   논리 해상도 480x270 을 3x(1440x810)로 확대해서 표시.
   ========================================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* =========================================================================
   [글씨체 설정]
   원하는 폰트 파일을 app/static/fonts/ 에 넣고 아래 src 경로/파일명을 바꾼다.
   - 웹폰트 포맷: woff2(권장) > woff > ttf/otf 순으로 가볍다.
   - 여러 포맷을 함께 지정하면 브라우저가 지원하는 걸 고른다.
   - 폰트를 안 넣으면 아래 --font-main 의 fallback(monospace 등)이 쓰인다.
   ========================================================================= */
@font-face {
  font-family: "MyPixelFont";                       /* 원하는 이름(임의) */
  src: url("/static/fonts/DOSMyungjo.woff2") format("woff2"),
       url("/static/fonts/DOSMyungjo.ttf") format("truetype");
  font-display: swap;                               /* 로딩 중 fallback 먼저 표시 */
}

:root {
  --logic-w: 480;
  --logic-h: 270;
  --scale: 3;                 /* 표시 배율. 필요 시 조정 */

  /* [글씨체] 여기 한 줄만 바꾸면 전체 폰트가 바뀐다.
     위 @font-face 의 "MyPixelFont" 를 첫 번째로 두고, 뒤는 fallback. */
  --font-main: "MyPixelFont", "Galmuri11", "Press Start 2P", monospace;

  /* [마우스 커서] 커서 이미지를 app/static/images/ 에 넣고 경로를 바꾼다.
     끝의 숫자 두 개(0 0)는 클릭 기준점(hotspot)의 x y 좌표(px).
     맨 끝 auto 는 이미지 로딩 실패 시 기본 커서로 대체하는 fallback(필수).
     커서를 안 쓰려면 이 값을 auto 로만 두면 된다.
     ※ 커서 이미지는 보통 32x32px 이하 권장(브라우저가 큰 이미지는 무시할 수 있음). */
  --cursor-default: url("/static/images/cursor.png") 0 0, auto;
  /* 클릭 가능한 오브젝트 위에 올렸을 때 쓸 커서(선택). 없으면 pointer 로 대체. */
  --cursor-pointer: url("/static/images/cursor_pointer.png") 0 0, pointer;
}

html, body {
  width: 100%;
  height: 100%;
  background: #0d0d12;
  font-family: var(--font-main);
  color: #f5f5f5;
  overflow: hidden;
  cursor: var(--cursor-default);        /* 전체 기본 커서 */
}

.pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------- 게이트(침실) 화면 ---------- */
.gate-body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.gate-scene {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gate-box {
  background: rgba(10, 10, 18, 0.82);
  border: 4px solid #f5f5f5;
  padding: 28px 32px;
  text-align: center;
  max-width: 90vw;
  width: 420px;
}

.gate-question {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.gate-input {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-family: inherit;
  background: #1a1a24;
  color: #fff;
  border: 3px solid #888;
  margin-bottom: 14px;
  outline: none;
}
.gate-input:focus { border-color: #ffd23f; }

.gate-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-family: inherit;
  background: #ffd23f;
  color: #1a1a24;
  border: none;
  cursor: var(--cursor-pointer);
}
.gate-btn:hover { background: #ffdf6b; }

.gate-error {
  margin-top: 14px;
  color: #ff6b6b;
  font-size: 12px;
}

/* ---------- 게임 무대 ---------- */
.stage {
  position: relative;
  width: calc(var(--logic-w) * var(--scale) * 1px);
  height: calc(var(--logic-h) * var(--scale) * 1px);
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  background: #000;
}

.scene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.object-layer {
  position: absolute;
  inset: 0;
}

/* JS가 생성하는 오브젝트 버튼 */
.obj {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  cursor: var(--cursor-pointer);
  image-rendering: pixelated;
}
.obj img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
}
/* 상호작용 안내용 살짝 반짝임 (원하면 제거) */
.obj.hint { animation: hintpulse 1.6s ease-in-out infinite; }
@keyframes hintpulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}

/* ---------- 도장 트래커 ---------- */
.stamp-tracker {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  background: rgba(10,10,18,0.7);
  padding: 8px;
  border: 3px solid #f5f5f5;
}
.stamp-slot {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------- 팝업 ---------- */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.popup-overlay.hidden { display: none; }

.popup-box {
  position: relative;
  background: #1a1a24;
  border: 4px solid #f5f5f5;
  padding: 24px;
  max-width: 90vw;
  max-height: 85vh;
  overflow: auto;
}
.popup-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: var(--cursor-pointer);
}
.popup-content img {
  image-rendering: pixelated;
  max-width: 100%;
}

/* ---------- 엔딩 ---------- */
.ending-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.ending-overlay.hidden { display: none; }
.ending-box {
  max-width: 600px;
  padding: 40px;
  text-align: center;
}
.ending-text {
  font-size: 20px;
  line-height: 2;
  white-space: pre-line;
}