/* VN 플레이어 — 무대, 대사창, 초상, 선택지, 종료 화면. */
/* ═══════════ VN 플레이어 ═══════════ */

#vn-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  user-select: none;
}

.vn-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.vn-bg.visible { opacity: 1; }
/* 애니메이션 GIF 배경 (그라디언트 위에 깔림, 로드 실패 시 그라디언트가 그대로 보임) */
.vn-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 배경 그라디언트 테마 (bg id 단어 매칭 결과) */
.bg-default  { background: linear-gradient(180deg, #151b36 0%, #0a0d1d 75%); }
.bg-palace   { background: linear-gradient(180deg, #2b1e46 0%, #3a2033 55%, #150d20 100%); }
.bg-gate     { background: linear-gradient(180deg, #232a48 0%, #131829 80%); }
.bg-garden   { background: linear-gradient(180deg, #1d3527 0%, #0d1c15 80%); }
.bg-corridor { background: linear-gradient(180deg, #2f2513 0%, #150f09 85%); }
.bg-pavilion { background: linear-gradient(180deg, #143249 0%, #0a1626 80%); }
.bg-hall     { background: linear-gradient(180deg, #261d2e 0%, #120d15 85%); }
.bg-festival { background: linear-gradient(180deg, #4a2030 0%, #1e0f1b 80%); }

.tod-night::after, .tod-day::after, .tod-dawn::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
}
.tod-night::after { background: linear-gradient(180deg, rgba(4, 6, 18, 0.35), transparent 45%); }
.tod-day::after   { background: rgba(255, 244, 214, 0.07); }
.tod-dawn::after  { background: linear-gradient(180deg, rgba(214, 120, 96, 0.12), transparent 55%); }

.vn-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

.vn-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(5, 7, 16, 0.75), transparent);
  z-index: 5;
}
.vn-title {
  font-size: 0.95rem;
  color: var(--gold-bright);
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vn-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.resume-mini {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--gold-bright);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: 1px 10px;
  background: rgba(216, 180, 90, 0.12);
}

/* 씬 전환 자막 칩 */
.scene-chip {
  position: absolute;
  top: 64px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 0.82rem;
  color: var(--gold-bright);
  background: rgba(8, 10, 22, 0.72);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: 5px 16px;
  animation: fadeIn 0.6s ease both;
  white-space: nowrap;
}

/* CG 프레임 — 이미지가 있으면 컷을, 없으면 캡션 연출을 보여준다 */
.cg-frame {
  position: absolute;
  top: 18%; left: 50%;
  transform: translateX(-50%);
  width: min(480px, 84vw);
  aspect-ratio: 16 / 10;
  z-index: 3;
  border: 1px solid var(--gold);
  outline: 1px solid rgba(216, 180, 90, 0.3);
  outline-offset: 6px;
  border-radius: 4px;
  background:
    radial-gradient(80% 70% at 50% 30%, rgba(240, 212, 136, 0.16), transparent 70%),
    linear-gradient(160deg, #232a52 0%, #12102b 55%, #1c1430 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cgIn 1.1s ease both;
  overflow: hidden;                  /* 이미지가 테두리 밖으로 새지 않게 */
}
@keyframes cgIn {
  from { opacity: 0; filter: blur(6px); }
  to   { opacity: 1; filter: blur(0); }
}
.cg-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold-bright);
  letter-spacing: 0.14em;
  text-shadow: 0 0 18px rgba(240, 212, 136, 0.4);
}
.cg-ornament { opacity: 0.7; }

/* CG 이미지 — 프레임을 꽉 채운다 (라이트/다크 테마 무관, 색은 이미지 자체) */
.cg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 이미지가 뜨면 캡션은 하단 오버레이로 내려앉는다 */
.cg-frame.has-image .cg-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  padding: 20px 12px 8px;
  font-size: 0.78rem;
  background: linear-gradient(transparent, rgba(8, 10, 22, 0.75));
}
.cg-frame.has-image .cg-ornament { display: none; }

/* 세그먼트 알림/이펙트 토스트 (대사창 위) */
.vn-toasts {
  position: absolute;
  left: 50%;
  bottom: 218px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.vn-toast {
  font-size: 0.88rem;
  color: var(--gain);
  background: rgba(8, 12, 24, 0.85);
  border: 1px solid rgba(159, 214, 168, 0.45);
  border-radius: 999px;
  padding: 5px 16px;
  animation: toastIn 0.35s ease both, toastOut 0.4s ease 2.2s both;
  white-space: nowrap;
}
.vn-toast.neg { color: var(--danger); border-color: rgba(224, 122, 122, 0.45); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(-8px); }
}

/* 호감도 단계 승급 — 토스트보다 크고 오래 머문다 */
.vn-stage-up {
  text-align: center;
  padding: 12px 26px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(24, 18, 8, 0.92), rgba(8, 10, 20, 0.92));
  border: 1px solid rgba(212, 175, 90, 0.6);
  box-shadow: 0 0 24px rgba(212, 175, 90, 0.22);
  animation: stageUpIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  max-width: min(80vw, 420px);
}
.vn-stage-up.out { animation: stageUpOut 0.55s ease both; }
.vn-stage-up .stage-label {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f0d68c;
}
.vn-stage-up .stage-desc {
  margin-top: 3px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(240, 232, 214, 0.82);
  white-space: normal;
}
@keyframes stageUpIn {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes stageUpOut {
  to { opacity: 0; transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .vn-stage-up, .vn-stage-up.out { animation: none; }
}

/* 대사창 */
.textbox {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 28px));
  min-height: 128px;
  z-index: 5;
  background: linear-gradient(180deg, rgba(10, 13, 27, 0.92), rgba(13, 17, 34, 0.96));
  border: 1px solid var(--line);
  outline: 1px solid rgba(216, 180, 90, 0.18);
  outline-offset: 3px;
  border-radius: 12px;
  padding: 26px 26px 30px;
  animation: fadeIn 0.35s ease both;
}
/* 씬/CG 비트: 대사창 대신 배경·CG 프레임이 주인공.
   테두리와 텍스트만 숨기고 ▼ 진행 표시는 유지 */
.textbox.beat-scene {
  background: transparent;
  border-color: transparent;
  outline-color: transparent;
}
.textbox.beat-scene .vn-text,
.textbox.beat-scene .nameplate,
.textbox.beat-scene .tap-hint { visibility: hidden; }

.nameplate {
  position: absolute;
  top: -17px;
  left: 18px;
  font-size: 0.92rem;
  padding: 3px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #20264a, #161a36);
  color: var(--text);
  letter-spacing: 0.04em;
}
.nameplate .emotion-tag {
  margin-left: 8px;
  font-size: 0.72rem;
  color: var(--muted);
}

/* 캐릭터별 고정 색 — prince는 남색·보라 계열 */
.nameplate.ch-prince {
  color: #d3caff;
  border-color: #7b6cd9;
  background: linear-gradient(180deg, #322a63, #1e1838);
}
.nameplate.ch-guard {
  color: #c3d2e6;
  border-color: #5d7391;
  background: linear-gradient(180deg, #26354c, #16202e);
}
.nameplate.ch-eunuch {
  color: #bde6d4;
  border-color: #4f8a74;
  background: linear-gradient(180deg, #1e3d31, #13241d);
}
.nameplate.ch-noble_choi {
  color: #f0c2ce;
  border-color: #a05a6e;
  background: linear-gradient(180deg, #472230, #2a1420);
}

.nameplate.ch-noble_lady {
  color: #d9a8c8;
  border-color: rgba(217, 168, 200, 0.45);
}

.nameplate.ch-noble_elder {
  color: #b9a87e;
  border-color: rgba(185, 168, 126, 0.45);
}

.nameplate.ch-court_maid {
  color: #9fc9c2;
  border-color: rgba(159, 201, 194, 0.45);
}

.nameplate.ch-bandit {
  color: #c9b06a;
  border-color: rgba(201, 176, 106, 0.45);
}

.vn-text {
  margin: 0;
  font-size: 1.02rem;
  min-height: 3.2em;
  overflow-wrap: break-word;
}
.vn-text .caret {
  display: inline-block;
  width: 0.55em;
  color: var(--gold);
  animation: caretBlink 0.8s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* 내레이션 스타일 */
.textbox.style-thought { border-left: 3px solid var(--gold-dim); }
.textbox.style-thought .vn-text {
  font-style: italic;
  color: #ccd2ea;
  padding-left: 10px;
}
.textbox.style-flashback {
  border-color: #6b5a33;
  background: linear-gradient(180deg, rgba(38, 30, 14, 0.93), rgba(24, 19, 10, 0.96));
}
.textbox.style-flashback .vn-text { color: #e6d5a8; }
/* S3 '신호' — 초상 없는 통신 화자. 잡음 낀 단말 느낌 */
.textbox.style-signal { border-left: 3px solid #3fa7d6; }
.textbox.style-signal .vn-text {
  font-family: ui-monospace, "Cascadia Mono", monospace;
  color: #a9dcf2;
  letter-spacing: 0.04em;
  padding-left: 10px;
}
.textbox.style-emphasis .vn-text {
  font-weight: 700;
  color: var(--gold-bright);
  text-align: center;
  letter-spacing: 0.06em;
  font-size: 1.12rem;
}

.next-indicator {
  position: absolute;
  right: 18px;
  bottom: 10px;
  color: var(--gold);
  font-size: 0.8rem;
  animation: bob 1s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(3px); } }

.tap-hint {
  position: absolute;
  right: 20px;
  bottom: -24px;
  font-size: 0.72rem;
  margin: 0;
  transition: opacity 0.5s;
}

/* 선택지 */
.vn-choices {
  position: absolute;
  left: 50%;
  bottom: 190px;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 210px);
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeIn 0.4s ease both;
}
.choice-prompt {
  margin: 0 0 4px;
  text-align: center;
  color: var(--gold-bright);
  font-size: 0.95rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  flex: none;
}
.choice-list {
  display: grid;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
}
.choice-btn {
  font-family: inherit;
  font-size: 0.98rem;
  text-align: left;
  color: var(--text);
  background: rgba(13, 17, 34, 0.9);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-dim);
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.08s;
}
.choice-btn:hover:not(:disabled) {
  border-color: var(--gold);
  background: rgba(28, 34, 66, 0.95);
}
.choice-btn:active:not(:disabled) { transform: scale(0.985); }
.choice-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice-btn:disabled { opacity: 0.5; cursor: wait; }

/* 종료 화면 */
.vn-end {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow-y: auto;
  padding: 16px 0;
  box-sizing: border-box;
  background: radial-gradient(90% 70% at 50% 40%, rgba(10, 13, 27, 0.88), rgba(4, 6, 14, 0.97));
  animation: fadeIn 0.8s ease both;
}
.end-title {
  font-size: 1.4rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--gold-bright);
  margin: 0;
  text-shadow: 0 0 26px rgba(240, 212, 136, 0.35);
}
.end-sub { color: var(--muted); font-size: 0.85rem; margin: 0; }
.end-note {
  color: var(--gold); font-size: 0.8rem; margin: 10px 0 0;
  padding: 8px 12px; border: 1px solid rgba(217, 178, 106, 0.35);
  border-radius: 8px; background: rgba(217, 178, 106, 0.08); max-width: 30ch;
}
.end-rewards { display: flex; gap: 10px; margin: 8px 0 4px; }
.reward-chip {
  font-size: 0.95rem;
  color: var(--text);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: 6px 18px;
  background: rgba(216, 180, 90, 0.08);
}
.end-actions { display: flex; gap: 10px; margin-top: 10px; }

.vn-controls {
  position: absolute;
  top: 56px;
  right: 18px;
  z-index: 5;
}
#btn-auto.on {
  color: var(--gold-bright);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(216, 180, 90, 0.3);
}

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

/* ── VN 화자 초상 ── */
.vn-portrait {
  position: absolute;
  left: 20px;
  bottom: 104px;                 /* 아래끝이 대사창 뒤로 들어가 서 있는 것처럼 보인다 */
  width: min(32vw, 280px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;   /* 얼굴이 잘리지 않게 위쪽 기준 */
  border-radius: 14px 14px 0 0;
  /* 아래쪽을 대사창 쪽으로 흐리게 녹인다 */
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;          /* 클릭은 대사 진행으로 통과 */
  z-index: 2;
}
.vn-portrait.shown { opacity: 1; transform: none; }
.vn-portrait.dim { opacity: 0.45; filter: saturate(0.7) brightness(0.75); }
.vn-portrait.side-right { left: auto; right: 16px; }

@media (max-width: 480px) {
  .vn-portrait { width: 38vw; left: 10px; bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .vn-portrait { transition: none; }
}

/* 회차 플레이 — 지난 선택 표시와 스킵 */
.choice-btn { display: flex; align-items: center; gap: 10px; }
.choice-btn .choice-text { flex: 1; }
.choice-btn.chosen-before { border-color: rgba(212, 175, 90, 0.5); }
/* 조건부 선택지 — 잠긴 채로 보인다(무엇을 키우면 열리는지 알려 주기 위해) */
.choice-btn.locked {
  border-left-color: rgba(255, 255, 255, 0.18);
  color: rgba(232, 234, 245, 0.55);
  cursor: not-allowed;
}
.choice-btn.locked:disabled { opacity: 1; cursor: not-allowed; }
.choice-lock {
  flex: none;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #9aa3c0;
  border: 1px solid rgba(154, 163, 192, 0.35);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.choice-seen {
  flex: none;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #d9c185;
  border: 1px solid rgba(212, 175, 90, 0.45);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
#btn-skip.on { color: #f0d68c; border-color: rgba(212, 175, 90, 0.7); }