/* ============================================================
   IDENTIO — Main Stylesheet
   styles/main.css
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ============================================================
   LAYOUT — Wrapper + Game Container
   ============================================================ */
#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* 모바일 크롬/사파리 주소창을 제외한 실제 동적 높이 반영 */
  background: #0a0a0a;
}

/* 9:16 portrait — centered, black bars on sides on wide screens */
#game {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  height: min(100dvh, calc(100vw * 16 / 9));
  overflow: hidden;
  background: #000;
}

/* ============================================================
   SCENES
   ============================================================ */
.scene {
  position: absolute;
  inset: 0;
  display: none;
}

.scene.active {
  display: block;
}

/* All scene media fills container */
.scene > img,
.scene > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tap / click overlay — transparent, full scene */
.tap-layer {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 10;
}

/* ============================================================
   FADE TRANSITIONS
   ============================================================ */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}
.fade-out {
  animation: fadeOut 0.4s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ============================================================
   LOADING SCENE
   ============================================================ */
#scene-loading {
  background-color: #000;
}

#scene-loading img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2초 동안 차오르는 배경 (왼쪽에서 오른쪽으로 차오르는 연출) */
.loading-bg-full {
  opacity: 1; /* 투명도 대신 자르기 효과(clip-path)를 사용하므로 항상 노출 */
  clip-path: inset(0 100% 0 0); /* 시작 상태: 왼쪽 0% (완전 잘림) */
  transition: clip-path 2s linear; /* 2초 동안 충전 */
  z-index: 2;
}

.loading-bg-full.loaded {
  clip-path: inset(0 0% 0 0); /* 완료 상태: 100% (가득 참) */
}

/* 시작 버튼 */
.loading-button {
  opacity: 0;
  z-index: 3;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none; /* 활성화 전까지는 클릭 차단 */
}

/* 버튼 로딩 완료 및 활성화 상태 (3px 흰색 스트로크 아웃라인) */
.loading-button.active {
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
  filter: drop-shadow(0 0 0px white)
          drop-shadow(1px 0 0px white)
          drop-shadow(-1px 0 0px white)
          drop-shadow(0 1px 0px white)
          drop-shadow(0 -1px 0px white)
          drop-shadow(2px 0 0px white)
          drop-shadow(-2px 0 0px white)
          drop-shadow(0 2px 0px white)
          drop-shadow(0 -2px 0px white)
          drop-shadow(3px 0 0px white)
          drop-shadow(-3px 0 0px white)
          drop-shadow(0 3px 0px white)
          drop-shadow(0 -3px 0px white);
}

/* ============================================================
   INTRO SCENE
   ============================================================ */
#scene-intro video {
  object-fit: cover;
}

/* 투명 시작 버튼 클릭 영역
   원본 좌표: x=540, y=1780 (1080×1920 기준)
   비율: x=50%, y=92.7% */
#intro-click-zone {
  position: absolute;
  left: 20%;          /* 50% - 30% */
  top:  89.7%;        /* 92.7% - 3% */
  width:  60%;
  height: 6%;
  cursor: pointer;
  z-index: 20;
}

/* ============================================================
   STORY SCENE
   ============================================================ */
#scene-story > img {
  object-fit: cover;
}

/* ============================================================
   GAME SCENE (Rooms)
   ============================================================ */
#scene-game > img {
  object-fit: cover;
}

/* 미션 안내 오버레이 (게임 시작 전 화면을 가림) */
#mission-overlay {
  position: absolute;
  inset: 0;
  z-index: 15; /* 핫스팟(5)보다 높아 클릭 방지 */
  cursor: pointer;
  transition: opacity 0.5s ease-out;
}

#mission-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#mission-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Hotspot layer — contains all clickable zones */
#hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none; /* children handle their own events */
}

/* Individual hotspot */
.hotspot {
  position: absolute;
  cursor: pointer;
  pointer-events: all;
  border-radius: 4px;
  /* Debug: uncomment below to visualize zones */
  /* border: 2px solid rgba(255, 0, 0, 0.6); background: rgba(255,0,0,0.1); */
}

/* Debug mode: hotspot visualization (toggled via JS) */
.debug .hotspot {
  border: 2px solid rgba(255, 60, 60, 0.7);
  background: rgba(255, 60, 60, 0.15);
}
.debug .hotspot.nav-zone {
  border-color: rgba(60, 180, 255, 0.8);
  background: rgba(60, 180, 255, 0.15);
}
.debug .hotspot.monitor-zone {
  border-color: rgba(80, 255, 80, 0.8);
  background: rgba(80, 255, 80, 0.15);
}

/* Clue Popup */
#clue-popup {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  cursor: pointer;
  animation: fadeIn 0.25s ease;
}

#clue-popup img {
  position: relative;
  inset: auto;
  max-width: 92%;
  max-height: 88%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}

#clue-popup.hidden {
  display: none;
}

/* ============================================================
   MONITOR SCENE (Password)
   ============================================================ */
#scene-monitor > img {
  object-fit: cover;
}

/* Password input zone (positioned over visual input field in bg_monitor.png) */
#pw-zone {
  position: absolute;
  left: 17%;
  top: 43%;
  width: 66%;
  height: 9%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  padding: 0 1%;
  gap: 4%;
}

#pw-display {
  flex: 1;
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: clamp(18px, 4.5vw, 32px);
  letter-spacing: 10px;
  text-align: center;
  padding-left: 8px;
}

#pw-submit {
  flex-shrink: 0;
  width: clamp(28px, 7%, 44px);
  height: clamp(28px, 7%, 44px);
  background: rgba(80, 80, 80, 0.5);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: clamp(11px, 2.5vw, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  margin-right: -1%;
}

#pw-submit:hover {
  background: rgba(80, 200, 100, 0.55);
}

/* Keyboard overlay (covers visual keyboard area in bg_monitor.png) */
#keyboard-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 27%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 1.5% 1.5% 2%;
  gap: 1.5%;
  background: rgba(0, 0, 0, 0.5); /* 키패드 가독성을 위해 어둡게 처리 */
}

.kb-row {
  display: flex;
  flex: 1;
  gap: 1.2%;
  justify-content: center;
  align-items: stretch;
}

.kb-key {
  flex: 1;
  background: rgba(200, 200, 200, 0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.82);
  font-family: 'Courier New', monospace;
  font-size: clamp(9px, 1.9vw, 15px);
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s, transform 0.08s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.kb-key:hover {
  background: rgba(255,255,255,0.2);
}

.kb-key:active,
.kb-key.pressed {
  background: rgba(255,255,255,0.32);
  transform: scale(0.93);
}

/* Special keys (backspace, enter) are slightly wider */
.kb-key.kb-special {
  flex: 1.5;
  font-size: clamp(7px, 1.5vw, 11px);
  letter-spacing: 0;
}

/* Password shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-6px); }
  80%       { transform: translateX(6px); }
}

.shake {
  animation: shake 0.5s ease;
}

/* ============================================================
   HINT OVERLAY (배경 위, 핫스팟 아래에 위치)
   ============================================================ */
#hint-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* room-bg(1)보다 위, hotspot-layer(5)보다 아래 */
  pointer-events: none; /* 클릭을 가로막지 않음 */
}

#hint-layer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(1.6) drop-shadow(0 0 12px rgba(255, 230, 120, 0.9))
          drop-shadow(0 0 25px rgba(255, 200, 50, 0.6));
  transition: opacity 0.6s ease-in-out;
  pointer-events: none;
}

#hint-layer img.hint-visible {
  opacity: 1;
}

/* 모니터 전용: 흰색 스트로크 깜빡임 효과 */
#hint-layer img.hint-monitor {
  filter: brightness(1)
          drop-shadow(0 0 0px white)
          drop-shadow(1px 0 0px white)
          drop-shadow(-1px 0 0px white)
          drop-shadow(0 1px 0px white)
          drop-shadow(0 -1px 0px white)
          drop-shadow(2px 0 0px white)
          drop-shadow(-2px 0 0px white)
          drop-shadow(0 2px 0px white)
          drop-shadow(0 -2px 0px white);
  transition: none; /* 일반 페이드 대신 blink 애니메이션 사용 */
  animation: monitor-blink 1s ease-in-out infinite;
}

@keyframes monitor-blink {
  0%, 100% { opacity: 0; }
  30%, 70% { opacity: 1; }
}

/* ============================================================
   TIMER UI (overlaid during game + monitor)
   ============================================================ */
#timer-ui {
  position: absolute;
  top: 3.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 86%; /* 가로폭보다 약간만 좁은 크기 */
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  pointer-events: none;
}

#timer-ui.hidden {
  display: none;
}

#timer-bar-layers {
  position: relative;
  width: 100%;
}

/* 최하단 배경 바: 레이어 전체의 내추럴한 높이를 정의 */
#timer-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* 중간 게이지 바: 배경 크기에 맞춰 절대 위치로 겹쳐지며 줄어듦 */
#timer-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  clip-path: inset(0 0% 0 0);
  transition: clip-path 1s linear;
  z-index: 2;
}

/* 최상단 테두리 프레임: 가장 위에 얹어 고정 */
#timer-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 3;
}

#timer-text {
  align-self: flex-end; /* 카운트다운은 바 밑 오른쪽에 위치 */
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: clamp(14px, 3.5vw, 24px);
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255, 120, 0, 0.7);
  margin-top: 2px;
}

#timer-text.warning {
  color: #ff3300;
  text-shadow: 0 0 12px rgba(255, 50, 0, 0.9);
  animation: timerPulse 0.6s ease-in-out infinite alternate;
}

@keyframes timerPulse {
  from { opacity: 1; }
  to   { opacity: 0.35; }
}

/* ============================================================
   ENDING SCENE
   ============================================================ */
#scene-ending video {
  object-fit: cover;
}

/* 영상 안 버튼 위치에 올라간 투명 클릭 영역
   원본 좌표: x=540, y=1780 (1080×1920 기준)
   비율: x=50%, y=92.7% → 버튼 크기 고려해 영역 넓게 설정 */
#ending-click-zone {
  position: absolute;
  left: 20%;          /* 50% - 30% (= 너비 60%의 절반) */
  top:  89.7%;        /* 92.7% - 3% (= 높이 6%의 절반) */
  width:  60%;
  height: 6%;
  cursor: pointer;
  z-index: 20;
  /* 디버그: 아래 주석 해제하면 클릭 영역 확인 가능 */
  /* border: 2px solid rgba(255,0,0,0.6); background: rgba(255,0,0,0.15); */
}

#ending-click-zone.hidden {
  display: none;
}