@font-face {
  font-family: 'Galmuri11';
  src: url('fonts/Galmuri11.woff2') format('woff2');
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%;
  background: #05050a;
  overflow: hidden;
  font-family: 'Galmuri11', 'DungGeunMo', 'Courier New', monospace, sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#stage {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
}

/* 세로 화면 안내 (터치 기기) */
#rotate-hint {
  display: none;
  position: fixed; inset: 0; z-index: 99;
  background: #05050a;
  color: #b8b0d8;
  align-items: center; justify-content: center;
  text-align: center;
  font-size: 17px; line-height: 2;
}
#rotate-icon { font-size: 44px; color: #ffd870; animation: rotateIcon 2s ease-in-out infinite; }
#rotate-hint .rotate-sub { color: #55557a; font-size: 13px; }
@keyframes rotateIcon {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-hint { display: flex; }
}
#game {
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  background: #05050a;
}
#ui {
  position: absolute; inset: 0;
  pointer-events: none;
  font-size: 10px; /* JS가 스케일에 맞게 조정 */
}
.hidden { display: none !important; }

/* ── 레터박스 ── */
.letterbox {
  position: absolute; left: 0; width: 100%;
  height: 0; background: #000;
  transition: height 0.6s ease;
  z-index: 5;
}
#letterbox-top { top: 0; }
#letterbox-bottom { bottom: 0; }
.letterbox.on { height: 11%; }

/* ── 목표 / 토스트 ── */
#objective {
  position: absolute; top: 3%; left: 2%;
  color: #b8b8d0; background: rgba(6,6,16,0.72);
  border-left: 0.3em solid #6a5aa0;
  padding: 0.5em 0.9em;
  font-size: 1em; z-index: 4;
  max-width: 60%;
  line-height: 1.5;
}
#toast {
  position: absolute; top: 16%; left: 50%; transform: translateX(-50%);
  color: #ffe6a0; background: rgba(10,8,4,0.85);
  border: 1px solid #8a7440;
  padding: 0.6em 1.2em;
  font-size: 1.1em; z-index: 8;
  white-space: nowrap;
  animation: toastIn 0.3s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-0.5em); } }

#prompt {
  position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%);
  color: #fff; background: rgba(10,10,24,0.8);
  border: 1px solid #55557a;
  padding: 0.4em 1em;
  font-size: 1.1em; z-index: 4;
  white-space: nowrap;
}
#prompt .key { color: #ffd870; }

/* ── 챕터 카드 ── */
#chapter-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.86);
  z-index: 20; text-align: center;
}
#chapter-num { color: #8a7ab8; font-size: 1.3em; letter-spacing: 0.4em; margin-bottom: 1em; }
#chapter-name { color: #eee6ff; font-size: 2.4em; letter-spacing: 0.2em; text-shadow: 0 0 1em #4a3a80; }

/* ── 대화창 ── */
#dialog {
  position: absolute; left: 3%; right: 3%; bottom: 3%;
  min-height: 24%;
  background: rgba(8,8,20,0.92);
  border: 2px solid #4a4a72;
  box-shadow: 0 0 0 2px #0a0a14, inset 0 0 2em rgba(30,30,70,0.5);
  display: flex; align-items: stretch;
  padding: 0.8em; z-index: 10;
  pointer-events: auto;
}
#portrait {
  width: 6.4em; height: 6.4em;
  image-rendering: pixelated;
  border: 1px solid #55557a;
  background: #101024;
  margin-right: 0.9em;
  flex-shrink: 0;
  align-self: center;
}
#portrait.none { display: none; }
#dialog-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#speaker { color: #ffd870; font-size: 1.2em; margin-bottom: 0.4em; }
#speaker:empty { display: none; }
#dialog-text { color: #e8e8f4; font-size: 1.25em; line-height: 1.55; word-break: keep-all; }
#dialog-text.narration { color: #9a9ab8; font-style: italic; }
#dialog-text-en {
  color: #7a7a9c; font-size: 0.98em; line-height: 1.4;
  margin-top: 0.4em; flex: 1;
  font-style: italic;
}
#dialog-text-en:empty { display: none; }
#dialog-next {
  align-self: flex-end; color: #ffd870; font-size: 1em;
  animation: blink 0.9s infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }

/* ── 선택지 ── */
#choices {
  position: absolute; right: 4%; bottom: 30%;
  display: flex; flex-direction: column; gap: 0.5em;
  z-index: 11; pointer-events: auto;
  transition: opacity 3s ease;
}
#choices.fading { opacity: 0; }
.choice-btn {
  font-family: inherit;
  background: rgba(10,10,26,0.94);
  color: #d8d8ec;
  border: 2px solid #4a4a72;
  padding: 0.6em 1.4em;
  font-size: 1.2em;
  cursor: pointer;
  text-align: left;
  word-break: keep-all;
}
.choice-btn:hover, .choice-btn.sel {
  border-color: #ffd870; color: #ffd870;
  background: rgba(30,26,10,0.94);
}

/* ── 전투 ── */
#battle {
  position: absolute; inset: 0; z-index: 9;
  pointer-events: auto;
}
#battle-enemy {
  position: absolute; top: 4%; right: 4%;
  display: flex; align-items: center; gap: 0.8em;
  flex-direction: row-reverse;
}
#battle-portrait {
  width: 6em; height: 6em;
  image-rendering: pixelated;
  border: 1px solid #7a3a3a;
  background: #180a0a;
}
#battle-enemy-name { color: #ff9a9a; font-size: 1.2em; margin-bottom: 0.3em; text-align: right; }
#battle-player {
  position: absolute; top: 4%; left: 4%;
}
#battle-player-name { color: #9ad0ff; font-size: 1.2em; margin-bottom: 0.3em; }
.hpbar {
  width: 11em; height: 0.9em;
  background: #14141e; border: 1px solid #666;
}
.hpfill { height: 100%; transition: width 0.4s ease; }
.hpfill.enemy { background: linear-gradient(#c04848, #802828); width: 100%; }
.hpfill.player { background: linear-gradient(#48a0c0, #286880); width: 100%; }
#battle-menu {
  position: absolute; right: 4%; bottom: 30%;
  display: flex; flex-direction: column; gap: 0.5em;
}

/* ── 타이틀 ── */
#title-screen {
  position: absolute; inset: 0; z-index: 30;
  background: radial-gradient(ellipse at 50% 120%, #1a1030 0%, #0a0a14 55%, #050508 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: auto;
  animation: titleIn 1.6s ease;
}
@keyframes titleIn { from { opacity: 0; } }
#title-logo { text-align: center; margin-bottom: 1.4em; animation: titleGlow 4s ease-in-out infinite; }
#title-kr {
  color: #e8e0ff; font-size: 3.4em; letter-spacing: 0.25em;
  text-shadow: 0 0 0.4em #6a4ab0, 0 0 1.5em #3a2a70;
}
#title-en { color: #7a6aa8; font-size: 1em; letter-spacing: 0.55em; margin-top: 0.8em; }
@keyframes titleGlow {
  0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); }
}
#title-menu { display: flex; flex-direction: column; gap: 0.55em; align-items: center; }
.title-btn {
  font-family: inherit;
  background: transparent; color: #b8b0d8;
  border: 2px solid #4a4a72;
  padding: 0.45em 2.4em; font-size: 1.25em;
  cursor: pointer; letter-spacing: 0.15em;
  white-space: nowrap;
}
.title-btn:hover { border-color: #ffd870; color: #ffd870; }
#title-submenu { display: flex; gap: 0.5em; margin-top: 0.3em; }
#title-submenu .title-btn.small {
  font-size: 0.95em; padding: 0.4em 1em; letter-spacing: 0.05em;
  color: #8a84ac;
}
#title-submenu .title-btn.small:hover { color: #ffd870; }
#title-hint { position: absolute; bottom: 3.5%; color: #55557a; font-size: 0.9em; }

/* ── 설정 ── */
#settings {
  position: absolute; inset: 0; z-index: 35;
  background: rgba(4,4,10,0.85);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
#settings-box {
  width: 60%; max-height: 80%;
  background: #0e0e1e;
  border: 2px solid #4a4a72;
  padding: 1.2em 1.6em;
  display: flex; flex-direction: column;
}
#settings-box h3 {
  color: #ffd870; font-size: 1.4em; letter-spacing: 0.2em;
  text-align: center; margin-bottom: 1em; font-weight: normal;
}
.set-row {
  display: flex; align-items: center; gap: 0.6em;
  margin-bottom: 0.9em;
}
.set-label { color: #c8c8dc; font-size: 1.1em; flex: 1; }
.set-btn {
  font-family: inherit;
  background: transparent; color: #8a8ab0;
  border: 2px solid #4a4a72;
  padding: 0.35em 1em; font-size: 1em;
  cursor: pointer;
}
.set-btn.sel { border-color: #ffd870; color: #ffd870; background: rgba(50,40,10,0.5); }
#settings-close { align-self: center; margin-top: 0.6em; font-size: 1.1em; padding: 0.4em 2em; }

/* ── 업데이트 내역 ── */
#update-log {
  position: absolute; inset: 0; z-index: 35;
  background: rgba(4,4,10,0.85);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
#update-log-box {
  width: 70%; max-height: 80%;
  background: #0e0e1e;
  border: 2px solid #4a4a72;
  padding: 1.2em 1.6em;
  display: flex; flex-direction: column;
}
#update-log-box h3 {
  color: #ffd870; font-size: 1.4em; letter-spacing: 0.2em;
  text-align: center; margin-bottom: 0.8em; font-weight: normal;
}
#update-log-list {
  overflow-y: auto; flex: 1;
  color: #c8c8dc; font-size: 1.05em; line-height: 1.6;
}
#update-log-list .ver {
  color: #e8e0ff; margin-top: 0.8em; border-bottom: 1px solid #33335a;
  padding-bottom: 0.2em;
}
#update-log-list .ver:first-child { margin-top: 0; }
#update-log-list .ver .date { color: #6a6a90; font-size: 0.85em; margin-left: 0.8em; }
#update-log-list .chg { padding-left: 1em; word-break: keep-all; }
#update-log-list .tag { font-size: 0.85em; margin-right: 0.5em; }
#update-log-list .tag.added { color: #7ac888; }
#update-log-list .tag.fixed { color: #6aa8e8; }
#update-log-list .tag.changed { color: #e8a848; }
#update-log-list .tag.removed { color: #e86a6a; }
#update-log-close { align-self: center; margin-top: 1em; font-size: 1.1em; padding: 0.4em 2em; }
#version-badge { position: absolute; bottom: 2%; right: 2%; color: #3a3a5a; font-size: 0.9em; }

/* ── 터치 컨트롤 (로블록스식 조이스틱) ── */
#touch-controls { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
#joy-zone {
  position: absolute; left: 0; top: 0; bottom: 0; width: 48%;
  pointer-events: auto;
  touch-action: none;
}
#joystick {
  position: absolute;
  width: 7em; height: 7em; border-radius: 50%;
  background: rgba(50,50,90,0.28);
  border: 2px solid rgba(150,150,210,0.4);
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 16;
}
#joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 3em; height: 3em;
  margin: -1.5em 0 0 -1.5em;
  border-radius: 50%;
  background: rgba(170,170,230,0.6);
  border: 2px solid rgba(230,230,255,0.7);
  box-shadow: 0 0 0.8em rgba(140,140,220,0.5);
}
#abtn {
  position: absolute; right: 4%; bottom: 9%;
  width: 6em; height: 6em; border-radius: 50%;
  background: rgba(120,50,50,0.55); border: 2px solid #a06060;
  color: #ffd8d8; display: flex; align-items: center; justify-content: center;
  font-size: 1em; pointer-events: auto;
  opacity: 0.8;
  touch-action: none;
}
#abtn::before { content: '◈'; font-size: 1.9em; }
#abtn.on { background: rgba(190,80,80,0.85); }

/* ── 엔딩 크레딧 ── */
#credits {
  position: absolute; inset: 0; z-index: 25;
  pointer-events: none;
  overflow: hidden;
}
#credits-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  color: #f0ead8; font-size: 1.7em; line-height: 2;
  text-shadow: 0 0 0.6em rgba(0,0,0,0.9), 0 0 0.2em #000;
  opacity: 0;
  transition: opacity 1.6s ease;
  padding: 0 8%;
  word-break: keep-all;
  white-space: pre-line;
}
#credits-center.show { opacity: 1; }
#credits-center .sub { font-size: 0.6em; color: #b8b09a; margin-top: 0.8em; }
#credits-roll-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
}
#credits-roll {
  position: absolute; left: 0; right: 0; top: 100%;
  text-align: center;
  color: #f0ead8;
  font-size: 1.25em; line-height: 1.7;
  text-shadow: 0 0 0.5em rgba(0,0,0,0.95), 0 0 0.15em #000;
}
#credits-roll h2 {
  font-size: 1.05em; color: #d8c88a; letter-spacing: 0.25em;
  margin: 2.2em 0 0.4em; font-weight: normal;
}
#credits-roll .big { font-size: 1.9em; letter-spacing: 0.3em; margin: 0.6em 0; }
#credits-roll .dim { color: #9a94b0; font-size: 0.85em; }
#credits-roll p { margin: 0.25em 0; }
#credits-center.light-bg {
  color: #3a3428;
  text-shadow: none;
}
#credits-center.light-bg .sub { color: #8a8272; }
#credits-center .presents-logo img {
  width: 22em; max-width: 60vw;
  display: block; margin: 0 auto 0.4em;
}
#credits-skip {
  position: absolute; right: 3%; bottom: 4%;
  font-family: inherit;
  background: rgba(10,10,24,0.6); color: #8a8ab0;
  border: 1px solid #44446a;
  padding: 0.45em 1.2em; font-size: 1em;
  cursor: pointer;
  pointer-events: auto;
  z-index: 26;
}
#credits-skip:hover { color: #ffd870; border-color: #ffd870; }
#credits-center .madeby {
  display: flex; align-items: center; justify-content: center;
  gap: 1em;
}
#credits-center .madeby span { font-size: 0.85em; color: #111111; }
#credits-center .madeby img {
  width: 11em; max-width: 40vw;
  border-radius: 0.4em;
}

#mute-btn {
  position: absolute; top: 2.5%; right: 2%;
  z-index: 40; pointer-events: auto;
  font-family: inherit;
  background: rgba(10,10,24,0.6); color: #8a8ab0;
  border: 1px solid #44446a;
  width: 2.4em; height: 2.4em; font-size: 1.2em;
  cursor: pointer;
}
#mute-btn.off { color: #444; text-decoration: line-through; }