@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Jua', sans-serif;
  background: #000;
  overflow: hidden;
  color: #fff;
}

/* =========================================
   ⬅ 대시보드로 돌아가기 버튼
========================================= */
.back-button {
  display: inline-block;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 50;
  padding: 10px 15px;
  background-color: #ffffff;
  text-decoration: none;
  border-radius: 20px;
  border: 1px solid #ddd;
  font-weight: bold;
  color: #333;
  transition: background 0.2s, transform 0.15s;
}
.back-button:hover {
  background-color: #f0f0f0;
  transform: translateY(-1px);
}

/* =========================================
   HUD (기분 게이지)
========================================= */
#hud {
  position: fixed;
  top: 64px;
  left: 12px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.18);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
}

.hp-label {
  color: #ffdd4f;
}

.hp-bar {
  position: relative;
  width: 220px;
  height: 16px;
  background: #2a2a2a;
  border-radius: 999px;
  overflow: hidden;
}
#hpFill {
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg,#27d34e,#9af57c);
  transition: width 150ms linear;
}

#heartLayer {
  position: absolute;
  inset: -10px 0 0 0;
  pointer-events: none;
}
.heart {
  position: absolute;
  font-size: 1.2rem;
  color: #ff73ae;
  animation: heartUp 1s ease-out forwards;
}
@keyframes heartUp {
  0% { opacity:1; transform: translateY(0) scale(1);}
  100% { opacity:0; transform: translateY(-50px) scale(1.3);}
}

/* =========================================
   🎬 장면: background-image 구조
========================================= */
.scene {
  position: relative;
  width: 100%;
  height: 70%;
  background-color: #000;

  /* 배경 이미지를 JS가 설정함 */
  background-position: center;
  background-size: contain;     /* 그림 전체를 보여줌 */
  background-repeat: no-repeat;
  overflow: hidden;
}

/* 캐릭터가 배경 위에서만 위치하도록 */
.char-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* =========================================
   캐릭터 (배경 위에서 위치)
========================================= */
#charLeft,
#charRight {
  position: absolute;
  width: auto;
  height: 40%;    /* scene 높이에 대한 비율 */
  object-fit: contain;
  z-index: 3;     /* 메뉴(menu)는 z-index 20 */
  opacity: 1;
}

/* 주인공: 왼쪽 아래 */
#charLeft {
  left: 5%;
  bottom: 5%;
}

/* 라이벌: 오른쪽 위 */
#charRight {
  right: 5%;
  top: 5%;
}

/* 등장/퇴장 */
.char-enter-player { animation: playerIn 0.6s ease-out forwards; }
@keyframes playerIn {
  0% { opacity:0; transform: translate(-40px,40px) scale(0.9);}
  100%{ opacity:1; transform: none;}
}

.char-enter-rival { animation: rivalIn 0.6s ease-out forwards; }
@keyframes rivalIn {
  0% { opacity:0; transform: translate(40px,-40px) scale(0.9);}
  100%{ opacity:1; transform: none;}
}

.char-exit-player { animation: playerOut 0.45s ease-in forwards; }
@keyframes playerOut {
  0%{opacity:1;}
  100%{opacity:0; transform: translate(-40px,40px) scale(0.9);}
}

.char-exit-rival { animation: rivalOut 0.45s ease-in forwards; }
@keyframes rivalOut {
  0%{opacity:1;}
  100%{opacity:0; transform: translate(40px,-40px) scale(0.9);}
}

/* =========================================
   💬 대화창
========================================= */
#dialogue {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30%;
  background: rgba(0,0,0,0.65);
  padding: 12px 20px;
  overflow-y: auto;
  z-index: 15;
}
#speaker {
  color: #ffd453;
  font-size: 1.3rem;
}

/* =========================================
   🧭 선택지 메뉴 — 캐릭터보다 위
========================================= */
#menu {
  position: absolute;
  bottom: 32%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  z-index: 20; /* 캐릭터보다 위 */
}
.option {
  background: #fff;
  color: #000;
  padding: 14px;
  font-size: 1.1rem;
  border-radius: 10px;
  border: 2px solid #333;
  cursor: pointer;
}
.option.is-selected {
  background: #ffdd4f;
}

/* =========================================
   🔔 토스트
========================================= */
#toast {
  position: absolute;
  bottom: 35%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.9);
  color: #000;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 35;
}
#toast.show { opacity: 1; }

/* =========================================
   💥 데미지 효과
========================================= */
#hurt {
  position: fixed;
  inset: 0;
  background: rgba(255,0,0,0);
  pointer-events: none;
  z-index: 999;
}
#hurt.flash {
  animation: redFlash 0.4s ease-out forwards;
}
@keyframes redFlash {
  0% { background: rgba(255,0,0,0.3);}
  100%{ background: rgba(255,0,0,0);}
}

/* =========================================
   반응형 글씨
========================================= */
@media (max-width: 1024px) {
  body { font-size: 17px; }
}
@media (max-width: 768px) {
  body { font-size: 19px; }
}

/* 전체 게임 영역을 화면 높이에 맞게 채우기 */
#stageRoot {
  position: relative;
  width: 100%;
  height: 100vh;  /* 화면 전체 높이 사용 */
  overflow: hidden;
}