/* 顶层覆盖物：开场、系统菜单、场景字幕 */

/* ---------- 场景字幕 ---------- */
.subtitle {
  position: absolute;
  left: 50%;
  bottom: 13cqh;
  transform: translateX(-50%);
  z-index: 22;
  max-width: 62cqw;
  padding: .9cqw 2cqw;
  font-size: 1.15cqw;
  letter-spacing: .14em;
  line-height: 1.7;
  text-align: center;
  color: #e8dcc0;
  background: linear-gradient(180deg, rgba(10, 8, 6, .82), rgba(10, 8, 6, .62));
  border-left: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  text-shadow: 0 1px 2px #000;
  /* 只是说话，不挡光点：字幕区域下面也可能有可点的东西 */
  pointer-events: none;
  animation: sub-in .5s var(--ease-out);
}
@keyframes sub-in { from { opacity: 0; transform: translate(-50%, 1cqh); } to { opacity: 1; } }

/* 对白里的说话人 */
.subtitle b {
  margin-right: .4em;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--gold);
}

/* ---------- 幕间黑场 ---------- */
/* 第一幕到第二幕之间睡过去的那一段：全黑 + 一行说明，再淡回营地 */
.blackout {
  position: absolute;
  inset: 0;
  z-index: 215;              /* 压过对白框：黑场期间先别露台词，随淡出一同揭开 */
  background: #050404;
  opacity: 0;
  /* 只做视觉遮罩，点击还是交给 stage（黑场里能点掉对白） */
  pointer-events: none;
  transition: opacity .9s var(--ease-in-out);
}
.blackout[hidden] { display: none; }
.blackout.is-on { opacity: 1; }
.blackout__text {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64cqw;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-size: max(1.5cqw, 16px);
  line-height: 2.2;
  letter-spacing: .28em;
  text-align: center;
  color: #d8ccb0;
  opacity: 0;
  transition: opacity 1s var(--ease-in-out);
}
.blackout.is-on .blackout__text { opacity: 1; }

/* ---------- 尾声：残夜神迹 ---------- */
/* 覆盖层本身透明：黑底由 .epilogue__black 负责，第三幕第一句还要露出营门外 */
.epilogue {
  position: absolute;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  animation: ep-in 1.1s var(--ease-in-out);
  pointer-events: none;
}
@keyframes ep-in { from { opacity: 0; } to { opacity: 1; } }

.epilogue__black {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #050404;
  opacity: 0;
  transition: opacity .45s var(--ease-in-out);
}
.epilogue[data-phase="tablet"] .epilogue__black,
.epilogue[data-phase="screen"] .epilogue__black,
.epilogue[data-phase="phone"] .epilogue__black,
.epilogue[data-phase="dark"] .epilogue__black,
.epilogue[data-phase="black"] .epilogue__black,
.epilogue[data-phase="gaze"] .epilogue__black,
.epilogue[data-phase="end"] .epilogue__black { opacity: 1; }

/* 画框必须正好等于舞台：舞台本身已经是 16:9，
   一旦画框比舞台宽/高，cover 会把 tablet.jpg 再缩一刀、裁掉上下，
   白屏的百分比坐标（clip-path / screen-box）就跟图上的白屏对不上了 */
.epilogue__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  container-type: size;
  opacity: 0;
  transition: opacity .6s var(--ease-in-out);
}
.epilogue[data-phase="tablet"] .epilogue__frame,
.epilogue[data-phase="screen"] .epilogue__frame,
.epilogue[data-phase="phone"] .epilogue__frame { opacity: 1; }

.epilogue__tablet {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* tablet.jpg 里那块白屏：四角量自原图（1920×1080），带一点透视 */
.epilogue__screen {
  position: absolute;
  inset: 0;
  clip-path: polygon(43.4% 23.2%, 61.35% 25.2%, 59.5% 82.4%, 40.9% 81.1%);
  opacity: 0;
  transition: opacity .3s linear;
}
.epilogue[data-phase="screen"] .epilogue__screen,
.epilogue[data-phase="phone"] .epilogue__screen { opacity: 1; }
.epilogue[data-phase="phone"] .epilogue__boot { opacity: 0; }

/* 白屏的定位盒：按白屏四角的中点(51.25%, 53.1%)与画框倾角(3.8°)摆放，
   字和手机都跟着石板一起微微倾斜，不再各歪各的 */
.epilogue__screen-box {
  position: absolute;
  left: 51.25%;
  top: 53.1%;
  width: 21.4%;
  height: 62.4%;
  transform: translate(-50%, -50%) rotate(3.8deg);
  container-type: size;
}

/* 屏幕上的字：白屏底上用暗色，两行（SYSTEM / BOOTING） */
.epilogue__boot {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  transition: opacity .12s linear;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: 11cqw;
  line-height: 1.5;
  letter-spacing: .06em;
  text-align: center;
  color: #16242e;
  white-space: pre-wrap;
}
.epilogue__caret {
  display: inline-block;
  width: .48em;
  height: 1em;
  margin-left: .12em;
  /* 光标不占行宽：否则居中时整行会被它挤偏半格 */
  margin-right: -.6em;
  vertical-align: -.12em;
  background: #16242e;
  animation: ep-caret 1.05s steps(1) infinite;
}
@keyframes ep-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* 只闪半秒的手机桌面：铺满白屏（四角被 screen 的 clip-path 裁成屏幕形状） */
.epilogue__phone {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* 定位盒比白屏的四角略大，留出边距，状态栏别被屏幕边缘裁掉 */
  padding: 11% 10% 8%;
  gap: 5%;
  background: linear-gradient(170deg, #101720, #05080b 60%, #0a0f14);
  opacity: 0;
  transition: opacity .1s linear;
}
.epilogue[data-phase="phone"] .epilogue__phone {
  opacity: 1;
  animation: ep-phone .5s var(--ease-out);
}
@keyframes ep-phone {
  0% { opacity: 0; filter: brightness(2.4); }
  30% { opacity: 1; filter: brightness(1.3); }
  100% { opacity: 1; filter: none; }
}
.epilogue__phone-bar {
  display: flex;
  justify-content: space-between;
  font-size: max(3.4cqw, 8px);
  letter-spacing: .02em;
  color: rgba(207, 230, 242, .72);
}
.epilogue__phone-apps {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5% 6%;
  align-content: start;
}
.epilogue__phone-apps i {
  aspect-ratio: 1;
  border-radius: 22%;
  background: linear-gradient(160deg, #2b3a47, #121a22);
  box-shadow: inset 0 0 0 1px rgba(207, 230, 242, .08);
}

/* 杰特的独眼特写 */
.epilogue__gaze {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s var(--ease-in-out);
}
.epilogue[data-phase="gaze"] .epilogue__gaze { opacity: 1; }

/* 白光过曝 */
.epilogue__white {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #fff;
  opacity: 0;
  transition: opacity .45s var(--ease-in-out);
}
.epilogue[data-phase="white"] .epilogue__white {
  opacity: 1;
  transition-duration: .25s;
}

.epilogue__skip {
  position: absolute;
  top: 3cqh;
  right: 3cqw;
  z-index: 9;
  padding: .7cqh 1.4cqw;
  font-size: max(.86cqw, 12px);
  letter-spacing: .18em;
  color: rgba(232, 214, 172, .55);
  background: rgba(8, 6, 5, .5);
  border: 1px solid rgba(200, 163, 90, .22);
  pointer-events: auto;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.epilogue__skip:hover { color: var(--amber); border-color: var(--gold); }

/* 章末卡 */
.epilogue__end {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  justify-items: center;
  pointer-events: auto;
  animation: ep-end 1.8s var(--ease-in-out);
}
.epilogue__end[hidden] { display: none; }
@keyframes ep-end { from { opacity: 0; } to { opacity: 1; } }
.epilogue__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: max(3.2cqw, 30px);
  letter-spacing: .42em;
  font-weight: 400;
  color: #dfd1ae;
  text-shadow: 0 0 4cqw rgba(200, 163, 90, .28);
}
.epilogue__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 2.2cqh;
  background: linear-gradient(90deg, transparent, rgba(200, 163, 90, .7), transparent);
}
.epilogue__sub {
  margin: 2.4cqh 0 0;
  font-size: max(1.05cqw, 14px);
  letter-spacing: .3em;
  color: rgba(200, 163, 90, .72);
}
.epilogue__acts {
  display: flex;
  gap: 1.6cqw;
  margin-top: 6cqh;
}
.epilogue__acts .btn { min-width: 11cqw; text-align: center; }

/* ---------- 过场对话（第一幕之后） ---------- */
.parley {
  position: absolute;
  left: 50%;
  bottom: 3.4cqh;
  transform: translateX(-50%);
  z-index: 210;
  width: 74cqw;
  min-height: 15.5cqh;
  padding: 2.4cqh 2.8cqw 2.2cqh;
  /* 不挡点击：推进由 stage 统一接 */
  pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 13, 9, .93), rgba(7, 6, 5, .97));
  border: 1px solid rgba(200, 163, 90, .28);
  border-top: 2px solid rgba(200, 163, 90, .58);
  box-shadow: 0 1.6cqh 5cqh rgba(0, 0, 0, .72);
  animation: parley-in .32s var(--ease-out);
}
.parley[hidden] { display: none; }
@keyframes parley-in {
  from { opacity: 0; transform: translate(-50%, .8cqh); }
  to { opacity: 1; transform: translateX(-50%); }
}
.parley__who {
  position: absolute;
  top: -1.45cqh;
  left: 2.2cqw;
  margin: 0;
  padding: .38cqh 1.3cqw;
  font-size: max(.98cqw, 13px);
  letter-spacing: .22em;
  color: var(--gold);
  background: linear-gradient(180deg, #1c150e, #0b0907);
  border: 1px solid rgba(200, 163, 90, .42);
}
.parley__who[hidden] { display: none; }
.parley__text {
  margin: 0;
  font-size: max(1.14cqw, 15px);
  line-height: 1.95;
  letter-spacing: .1em;
  color: #e8dcc0;
  text-shadow: 0 1px 2px #000;
  white-space: pre-wrap;
}
.parley.is-narr .parley__text { color: #bdb29a; }
.parley__more {
  position: absolute;
  right: 1.8cqw;
  bottom: 1cqh;
  font-size: max(.9cqw, 12px);
  color: var(--amber);
  animation: parley-more 1.1s var(--ease-in-out) infinite;
}
.parley__more[hidden] { display: none; }
@keyframes parley-more {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: .95; transform: translateY(.35cqh); }
}

/* 选项：浮在对话框上方，一列窄条，键盘 1-3 也能选 */
.parley__choices {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1.4cqh);
  transform: translateX(-50%);
  width: 62cqw;
  display: flex;
  flex-direction: column;
  gap: .8cqh;
  pointer-events: none;
  animation: parley-choices-in .26s var(--ease-out);
}
.parley__choices[hidden] { display: none; }
@keyframes parley-choices-in {
  from { opacity: 0; transform: translate(-50%, .8cqh); }
  to { opacity: 1; transform: translateX(-50%); }
}
.parley__choice {
  pointer-events: auto;
  display: flex;
  align-items: baseline;
  gap: .9cqw;
  width: 100%;
  padding: 1cqh 1.4cqw;
  text-align: left;
  font: inherit;
  font-size: max(1.02cqw, 14px);
  line-height: 1.6;
  letter-spacing: .08em;
  color: #e8dcc0;
  background: linear-gradient(180deg, rgba(22, 16, 10, .95), rgba(9, 7, 5, .97));
  border: 1px solid rgba(200, 163, 90, .3);
  border-left: 2px solid rgba(200, 163, 90, .55);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.parley__choice b { color: var(--gold); font-weight: 400; letter-spacing: .08em; }
.parley__choice:hover,
.parley__choice:focus-visible {
  color: #fff3d0;
  border-color: rgba(240, 178, 74, .75);
  background: linear-gradient(180deg, rgba(58, 42, 22, .96), rgba(20, 14, 9, .98));
  transform: translateX(.2cqw);
}

/* ---------- 坏结局：附身的异端 ---------- */
.badend {
  position: absolute;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  background: #050404;
  opacity: 0;
  transition: opacity .55s var(--ease-in-out);
}
.badend[hidden] { display: none; }
.badend.is-on { opacity: 1; }
.badend__inner {
  width: min(78cqw, 1120px);
  max-height: 86cqh;
  padding: 2cqh 2cqw;
  text-align: center;
  overflow-y: auto;
}
.badend__lines {
  max-height: 58cqh;
  overflow-y: auto;
  margin-bottom: 2.6cqh;
  padding-right: .6cqw;
}
.badend__line {
  margin: 0 0 1.8cqh;
  font-size: max(1.1cqw, 14px);
  line-height: 2.1;
  letter-spacing: .12em;
  color: #e6edf4;
  text-shadow: 0 0 2cqh rgba(190, 215, 240, .22);
}
.badend__line:last-child { margin-bottom: 0; }
.badend__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: max(1.12cqw, 15px);
  letter-spacing: .4em;
  color: #a9bccb;
}
.badend__acts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.8cqh;
  margin-top: 4.4cqh;
}
.badend__btn {
  min-width: 20cqw;
  padding: 1.5cqh 3.4cqw;
  font-size: max(1.22cqw, 17px);
  letter-spacing: .32em;
  color: #f0e4c8;
  border-color: rgba(200, 163, 90, .62);
  background: linear-gradient(180deg, rgba(54, 39, 22, .92), rgba(16, 11, 8, .96));
}
.badend__btn:hover:not(:disabled) { color: #fff3d0; border-color: var(--gold); }
.badend__gallery {
  min-width: 15cqw;
  padding: 1.2cqh 2.4cqw;
  font: inherit;
  font-size: max(.9cqw, 14px);
  letter-spacing: .22em;
  color: rgba(200, 163, 90, .78);
  background: rgba(23, 17, 11, .76);
  border: 1px solid rgba(200, 163, 90, .32);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.badend__gallery:hover { color: #fff3d0; border-color: var(--gold); }

@media (max-height: 640px) {
  .badend__inner { width: 86cqw; max-height: 90cqh; padding: 1.4cqh 1.2cqw; }
  .badend__lines { max-height: 54cqh; margin-bottom: 1.6cqh; }
  .badend__line { font-size: max(.9cqw, 12px); line-height: 1.9; margin-bottom: 1.2cqh; }
  .badend__acts { margin-top: 2.4cqh; gap: 1.4cqh; }
}

/* 立绘：站在对话框后面，从右侧淡入 */
.portrait {
  position: absolute;
  right: 6.5cqw;
  bottom: 0;
  z-index: 190;
  height: 94cqh;
  pointer-events: none;
  opacity: 0;
  transform: translateY(1.6cqh) scale(.99);
  transition: opacity .5s var(--ease-in-out), transform .5s var(--ease-out);
  filter: drop-shadow(0 1.2cqh 3cqh rgba(0, 0, 0, .55));
}
.portrait[hidden] { display: none; }
.portrait.is-in { opacity: 1; transform: none; }
.portrait img { display: block; height: 100%; width: auto; }

/* 过场时收掉一切常规 UI：这条线之后没有背包、没有目标、没有出口 */
body.is-cutscene .dock,
body.is-cutscene .quest,
body.is-cutscene .held,
body.is-cutscene .toast-wrap { display: none !important; }
/* 独白期间放行提示条：刚收进线索的提示不能被过场规则吞掉，压在对话框上方 */
body.is-cutscene.is-monologue .toast-wrap {
  display: flex !important;
  bottom: 21cqh;
}
.stage[data-cutscene="true"] .hotspot,
.stage[data-cutscene="true"] .scene__edge { display: none !important; }

/* ---------- 系统菜单 ---------- */
.menu {
  position: absolute;
  right: 1.6cqw;
  bottom: 10.5cqh;
  z-index: 70;
  width: 17cqw;
  padding: .5cqh 0;
  background: linear-gradient(180deg, rgba(26, 21, 15, .97), rgba(9, 7, 5, .98));
  border: 1px solid var(--line);
  box-shadow: 0 2cqh 5cqh rgba(0, 0, 0, .7);
  animation: menu-in .22s var(--ease-out);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(.8cqh); } to { opacity: 1; } }
.menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .85cqh 1.2cqw;
  font-size: 1cqw;
  letter-spacing: .16em;
  color: var(--paper-2);
  text-align: left;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.menu__row b { font-weight: 400; color: var(--gold); font-size: .92cqw; }
.menu__row b[data-on="0"] { color: #6b5a44; }
.menu__row:hover { background: rgba(200, 163, 90, .1); color: var(--amber); }
.menu__row--head {
  justify-content: flex-start;
  font-size: .82cqw;
  letter-spacing: .3em;
  color: rgba(200, 163, 90, .5);
  border-bottom: 1px solid rgba(200, 163, 90, .16);
  cursor: default;
  pointer-events: none;
}
.menu__row--danger:hover { color: var(--blood-lit); }
.menu__row.is-confirm { color: var(--blood-lit); background: rgba(140, 42, 30, .18); }
.menu__tip {
  margin: 0;
  padding: .2cqh 1.2cqw .8cqh;
  font-size: .76cqw;
  letter-spacing: .1em;
  color: rgba(200, 163, 90, .38);
}

/* ---------- 开场 ---------- */
.prologue {
  position: fixed;
  inset: 0;
  z-index: 250;             /* 高于竖屏“请横置手机”，独白在竖屏也能读 */
  display: grid;
  place-items: center;
  background: #050404;
  /* 只作用于独白子树：防止手机把字号再放大一档 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  animation: pro-in 1s var(--ease-in-out);
}

/* 矮屏 / 窄屏：给底部提示条让出一条带子，文字区在剩余空间里居中 */
.prologue.is-tight { padding-bottom: max(9svh, 44px); }
@keyframes pro-in { from { opacity: 0; } to { opacity: 1; } }
.prologue.is-out { animation: pro-out 1.1s var(--ease-in-out) forwards; }
@keyframes pro-out { to { opacity: 0; } }

.prologue__lines {
  width: min(46em, 85vw);
  display: flex;
  flex-direction: column;
  gap: 2.2svh;
}
.prologue__lines p {
  margin: 0;
  font-size: clamp(21px, 2.7svh, 36px);
  line-height: 2.1;
  letter-spacing: .18em;
  color: #cfc2a6;
  opacity: 0;
  transform: translateY(.6cqh);
  transition: opacity 1.1s var(--ease-in-out), transform 1.1s var(--ease-out);
}
.prologue__lines p.show { opacity: 1; transform: none; }
.prologue__lines p:last-child { color: var(--amber); }
/* 文案里的空行：只贡献一个段间距，不额外撑高 */
.prologue__lines p.is-gap { height: 0; overflow: hidden; }
/* 压到 12px 还放不下（极端字体设置）：宁可内部滚动，也不裁字 */
.prologue__lines.is-scroll {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 底部轻提示：让玩家知道可以点掉开场 */
.prologue::after {
  content: "点击任意处继续";
  position: absolute;
  left: 50%;
  bottom: 6cqh;
  transform: translateX(-50%);
  font-size: .82cqw;
  letter-spacing: .3em;
  color: rgba(200, 163, 90, .55);
  /* 文字没放完之前不提示"继续"，也不响应点击 */
  opacity: 0;
}
.prologue.is-ready::after { animation: pro-hint 3.2s var(--ease-in-out) infinite; }
@keyframes pro-hint {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

.prologue__skip {
  position: absolute;
  top: 3cqh;
  right: 3cqw;
  padding: .7cqw 1.4cqw;
  font-size: .95cqw;
  letter-spacing: .24em;
  color: var(--paper-3);
  border: 1px solid rgba(200, 163, 90, .3);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.prologue__skip:hover { color: var(--amber); border-color: var(--gold); }