/* ==========================================================================
   星辉院 / Starlight Academy —— 样式表
   --------------------------------------------------------------------------
   缩放策略：所有尺寸都以「1280×720 设计稿」的 px 为准，通过 --px 换算成
   相对舞台的单位（1 设计 px = 100cqw / 1280）。舞台是定死的 16:9 容器，
   因此整套 UI 会随窗口等比缩放，不会出现某个分辨率下错位。
   ========================================================================== */

:root {
  --ink: #05060d;
  --night: #0a0f22;
  --night-2: #131a35;
  --violet: #6b5cff;
  --violet-soft: #9d91ff;
  --gold: #f0c46a;
  --gold-dim: #b98f3c;
  --star: #7fd8ff;
  --paper: #f5efe2;
  --danger: #ff6b81;
  --ui-font: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC',
    'Source Han Sans SC', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--paper);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
}

body {
  user-select: none;
  cursor: default;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   舞台：定死 16:9，居中，四周留黑边
   ========================================================================== */

#stage-wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
}

#stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  overflow: hidden;
  background: #05060d;
  container-type: size;
  --px: calc(100cqw / 1280);
  --font-scale: 1;
}

#stage.shake {
  animation: stage-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes stage-shake {
  10%,
  90% {
    transform: translate3d(calc(-2 * var(--px)), 0, 0);
  }
  20%,
  80% {
    transform: translate3d(calc(4 * var(--px)), 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(calc(-8 * var(--px)), 0, 0);
  }
  40%,
  60% {
    transform: translate3d(calc(8 * var(--px)), 0, 0);
  }
}

/* ==========================================================================
   背景层
   ========================================================================== */

.bg-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: opacity;
}

.bg-layer.on {
  opacity: 1;
}

/* 背景之上压一层暗角，让立绘与文字更立得住 */
#stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      ellipse at 50% 40%,
      rgba(0, 0, 0, 0) 42%,
      rgba(0, 0, 0, 0.42) 100%
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 26%);
  z-index: 3;
}

/* ==========================================================================
   立绘
   ========================================================================== */

#sprite-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.sprite-slot {
  position: absolute;
  bottom: 0;
  /* 必须有显式宽度：绝对定位元素没有内容时宽度为 0，
     background-size: contain 就没有可绘制的区域，立绘会完全不显示 */
  width: 46%;
  height: 96%;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  opacity: 0;
  transform: translateY(calc(14 * var(--px)));
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.3s ease;
  will-change: opacity, transform;
}

.sprite-slot[data-slot='left'] {
  left: 0;
  width: 36%;
  height: 84%;
}

.sprite-slot[data-slot='center'] {
  left: 50%;
  transform: translate(-50%, calc(14 * var(--px)));
}

.sprite-slot[data-slot='right'] {
  left: auto;
  right: 0;
  width: 36%;
  height: 84%;
}

.sprite-slot.on {
  opacity: 1;
  transform: translateY(0);
}

.sprite-slot[data-slot='center'].on {
  transform: translate(-50%, 0);
}

.sprite-slot.active {
  filter: drop-shadow(0 0 calc(10 * var(--px)) rgba(240, 196, 106, 0.35)) brightness(1.04);
}

.sprite-slot.dim {
  filter: brightness(0.62) saturate(0.8);
}

/* ==========================================================================
   全屏 CG
   ========================================================================== */

#cg-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

#cg-layer.on {
  opacity: 1;
}

/* ==========================================================================
   特效
   ========================================================================== */

#fx-flash {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

#fx-flash.fire {
  animation: fx-flash 0.42s ease-out both;
}

@keyframes fx-flash {
  0% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
  }
}

#fx-fade {
  position: absolute;
  inset: 0;
  z-index: 21;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

#fx-fade.on {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   游戏内 UI
   ========================================================================== */

#game-ui {
  position: absolute;
  inset: 0;
  z-index: 10;
}

/* 隐藏界面时，选项框**不隐藏** —— 走到选项时玩家得看得见、点得到。
   引擎到选项时也会自动恢复界面，这里是第二道保险。 */
#game-ui.hide-ui #dialogue-box,
#game-ui.hide-ui #quickbar,
#game-ui.hide-ui #hud {
  opacity: 0;
  pointer-events: none;
}

/* 隐藏界面时留在屏幕上的提示条。它自己不能被 .hide-ui 隐藏，
   否则用户根本不知道该怎么调回来。 */
#hide-ui-hint {
  position: absolute;
  left: 50%;
  bottom: calc(26 * var(--px));
  z-index: 40;
  padding: calc(6 * var(--px)) calc(16 * var(--px));
  border: 1px solid rgba(200, 210, 255, 0.3);
  border-radius: 999px;
  background: rgba(10, 14, 30, 0.72);
  color: #cfd6f0;
  font-size: calc(13 * var(--px));
  pointer-events: none;
  transform: translateX(-50%);
  animation: hide-hint-in 0.25s ease;
}

@keyframes hide-hint-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------------- 对话框 ---------------- */

#dialogue-box {
  position: absolute;
  left: calc(52 * var(--px));
  right: calc(52 * var(--px));
  bottom: calc(28 * var(--px));
  min-height: calc(200 * var(--px));
  padding: calc(34 * var(--px)) calc(42 * var(--px)) calc(30 * var(--px));
  border-radius: calc(10 * var(--px));
  border: 1px solid rgba(240, 196, 106, 0.28);
  /* 透明度由设置页的「对话框背景」滑条控制（--dlg-alpha，0~1）。
     注意：**不能有 backdrop-filter** —— 那层磨砂是它造成的，
     背景设成全透明也还是糊的。想真正透明就得去掉它。 */
  background: linear-gradient(
    to bottom,
    rgba(10, 14, 32, calc(0.9 * var(--dlg-alpha, 1))) 0%,
    rgba(6, 9, 22, calc(0.94 * var(--dlg-alpha, 1))) 100%
  );
  box-shadow: 0 calc(12 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, 0.6),
    inset 0 0 calc(30 * var(--px)) rgba(107, 92, 255, 0.12);
  /* 背景全透明时不要磨砂 —— 有它在，调成 0 也还是糊的，看不到 CG。
     只有背景不透明时才启用磨砂。 */
  backdrop-filter: blur(calc(6 * var(--px)));
  transition: opacity 0.25s ease;
}

/* 背景透明度低于 100% 时彻底关掉磨砂，做到真正的透明 */
#game-ui.dlg-clear #dialogue-box {
  backdrop-filter: none;
  box-shadow: none;
}

/* 顶部一条金线，galgame 经典装饰 */
#dialogue-box::before {
  content: '';
  position: absolute;
  left: calc(42 * var(--px));
  right: calc(42 * var(--px));
  top: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(240, 196, 106, 0) 0%,
    rgba(240, 196, 106, 0.75) 50%,
    rgba(240, 196, 106, 0) 100%
  );
}

#nameplate {
  position: absolute;
  top: calc(-24 * var(--px));
  left: calc(38 * var(--px));
  padding: calc(7 * var(--px)) calc(26 * var(--px));
  border-radius: calc(6 * var(--px));
  border: 1px solid rgba(240, 196, 106, 0.5);
  background: linear-gradient(to bottom, #1b2246, #101532);
  color: var(--gold);
  font-size: calc(21 * var(--px));
  letter-spacing: 0.08em;
  box-shadow: 0 calc(6 * var(--px)) calc(18 * var(--px)) rgba(0, 0, 0, 0.55);
}

/* 旁白不显示名牌 */
#nameplate.narrator {
  display: none;
}

#dialogue-body {
  position: relative;
}

#dialogue-text {
  margin: 0;
  font-size: calc(23 * var(--px) * var(--font-scale));
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: #f2f0ea;
  text-shadow: 0 calc(2 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.75);
  white-space: pre-wrap;
  min-height: calc(86 * var(--px));
}

/* 旁白（无姓名）用略暗的斜体感 */
#dialogue-text.narration {
  color: #cfd3e6;
}

/* 主角心声 */
#dialogue-text.monologue {
  color: #bcd6ff;
}

#advance-cursor {
  position: absolute;
  right: 0;
  bottom: calc(-10 * var(--px));
  font-size: calc(17 * var(--px));
  color: var(--gold);
  opacity: 0;
  animation: cursor-bob 1.1s ease-in-out infinite;
}

#advance-cursor.on {
  opacity: 0.9;
}

@keyframes cursor-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(5 * var(--px)));
  }
}

/* ---------------- 选项 ---------------- */

#choice-box {
  position: absolute;
  left: 0;
  right: 0;
  /* 上下都夹住，让选项在一块固定高度的带子里垂直居中：
     这样 2 个选项和 4 个选项都不会顶到立绘的脸（上沿）或对话框（下沿）。
     上沿 196 = 立绘面部之下；下沿 240 = 对话框上沿之上。 */
  top: calc(196 * var(--px));
  bottom: calc(240 * var(--px));
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--px));
  z-index: 12;
}

#choice-box .choice-prompt {
  margin-bottom: calc(6 * var(--px));
  font-size: calc(19 * var(--px) * var(--font-scale));
  color: var(--gold);
  letter-spacing: 0.16em;
  text-shadow: 0 0 calc(14 * var(--px)) rgba(240, 196, 106, 0.4);
}

.choice-btn {
  position: relative;
  width: calc(640 * var(--px));
  padding: calc(13 * var(--px)) calc(34 * var(--px));
  border-radius: calc(8 * var(--px));
  border: 1px solid rgba(157, 145, 255, 0.42);
  background: linear-gradient(
    to right,
    rgba(16, 21, 50, 0.9) 0%,
    rgba(28, 34, 76, 0.9) 50%,
    rgba(16, 21, 50, 0.9) 100%
  );
  color: #eef1ff;
  font-family: inherit;
  font-size: calc(21 * var(--px) * var(--font-scale));
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease,
    background 0.16s ease;
  animation: choice-in 0.32s ease both;
}

.choice-btn:hover,
.choice-btn:focus-visible {
  transform: translateY(calc(-2 * var(--px))) scale(1.015);
  border-color: var(--gold);
  background: linear-gradient(
    to right,
    rgba(30, 36, 82, 0.95) 0%,
    rgba(52, 58, 118, 0.95) 50%,
    rgba(30, 36, 82, 0.95) 100%
  );
  box-shadow: 0 0 calc(26 * var(--px)) rgba(240, 196, 106, 0.28);
  outline: none;
}

.choice-btn.disabled {
  opacity: 0.38;
  pointer-events: none;
}

.choice-btn .choice-hint {
  display: block;
  margin-top: calc(5 * var(--px));
  font-size: calc(15 * var(--px));
  color: #9aa3c7;
  letter-spacing: 0.02em;
}

@keyframes choice-in {
  from {
    opacity: 0;
    transform: translateY(calc(12 * var(--px)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------- 快捷条 / HUD ---------------- */

#quickbar {
  position: absolute;
  right: calc(40 * var(--px));
  /* 放在右上角：对话框上方那条带子是留给选项的，
     快捷条留在那里会和 3~4 个选项撞在一起 */
  top: calc(20 * var(--px));
  display: flex;
  gap: calc(8 * var(--px));
  transition: opacity 0.25s ease;
  z-index: 11;
}

.qbtn {
  padding: calc(7 * var(--px)) calc(14 * var(--px));
  border-radius: calc(6 * var(--px));
  border: 1px solid rgba(157, 145, 255, 0.3);
  background: rgba(8, 11, 26, 0.68);
  color: #c8cee8;
  font-family: inherit;
  font-size: calc(15 * var(--px));
  cursor: pointer;
  transition: all 0.16s ease;
}

.qbtn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(20, 26, 56, 0.9);
}

.qbtn.active {
  border-color: var(--gold);
  color: #10142c;
  background: var(--gold);
  font-weight: 700;
}

#hud {
  position: absolute;
  left: calc(44 * var(--px));
  top: calc(22 * var(--px));
  padding: calc(6 * var(--px)) calc(16 * var(--px));
  border-radius: calc(99 * var(--px));
  border: 1px solid rgba(127, 216, 255, 0.24);
  background: rgba(6, 9, 22, 0.6);
  color: #a9b6d8;
  font-size: calc(14 * var(--px));
  letter-spacing: 0.06em;
  transition: opacity 0.25s ease;
}

.hud-sep {
  margin: 0 calc(6 * var(--px));
  opacity: 0.5;
}

#hud-affinity {
  color: var(--star);
}

/* ==========================================================================
   卡片（章节 / 结局）
   ========================================================================== */

.card {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, rgba(10, 14, 34, 0.86), rgba(2, 3, 10, 0.96));
  backdrop-filter: blur(calc(3 * var(--px)));
}

.card-inner {
  text-align: center;
  animation: card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(calc(18 * var(--px))) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.card-num {
  margin: 0 0 calc(14 * var(--px));
  font-size: calc(17 * var(--px));
  letter-spacing: 0.42em;
  color: var(--gold-dim);
}

.card-title {
  margin: 0;
  font-size: calc(54 * var(--px));
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fff;
  text-shadow: 0 0 calc(38 * var(--px)) rgba(127, 216, 255, 0.5);
}

.card-sub {
  margin: calc(18 * var(--px)) 0 0;
  font-size: calc(20 * var(--px));
  letter-spacing: 0.2em;
  color: #9fb0d8;
}

.ending-inner .ending-kicker {
  margin: 0 0 calc(16 * var(--px));
  font-size: calc(16 * var(--px));
  letter-spacing: 0.5em;
  color: var(--gold-dim);
}

.ending-inner .ending-title {
  margin: 0;
  font-size: calc(48 * var(--px));
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 0 calc(40 * var(--px)) rgba(240, 196, 106, 0.45);
}

.ending-inner .ending-sub {
  margin: calc(14 * var(--px)) 0 0;
  font-size: calc(19 * var(--px));
  letter-spacing: 0.22em;
  color: var(--star);
}

.ending-inner .ending-quote {
  margin: calc(30 * var(--px)) auto 0;
  max-width: calc(720 * var(--px));
  font-size: calc(20 * var(--px));
  line-height: 2;
  color: #c7cde4;
}

.ending-actions {
  margin-top: calc(38 * var(--px));
}

/* ==========================================================================
   标题画面
   ========================================================================== */

.screen {
  position: absolute;
  inset: 0;
  z-index: 40;
}

#screen-title {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.title-art {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.title-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to right,
      rgba(3, 5, 14, 0.94) 0%,
      rgba(3, 5, 14, 0.72) 38%,
      rgba(3, 5, 14, 0.2) 68%,
      rgba(3, 5, 14, 0.55) 100%
    ),
    linear-gradient(to bottom, rgba(3, 5, 14, 0.5) 0%, rgba(3, 5, 14, 0) 40%);
}

.title-inner {
  position: relative;
  padding-left: calc(96 * var(--px));
  max-width: calc(720 * var(--px));
}

.title-kicker {
  margin: 0;
  font-size: calc(15 * var(--px));
  letter-spacing: 0.46em;
  color: var(--gold-dim);
  text-transform: uppercase;
}

.title-main {
  margin: calc(10 * var(--px)) 0 calc(6 * var(--px));
  font-size: calc(86 * var(--px));
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #fff;
  text-shadow: 0 0 calc(52 * var(--px)) rgba(127, 216, 255, 0.42),
    0 calc(4 * var(--px)) calc(20 * var(--px)) rgba(0, 0, 0, 0.7);
}

.title-sub {
  margin: 0 0 calc(40 * var(--px));
  font-size: calc(19 * var(--px));
  letter-spacing: 0.14em;
  color: #9fb0d8;
}

.title-menu {
  display: flex;
  flex-direction: column;
  gap: calc(11 * var(--px));
  width: calc(340 * var(--px));
}

.title-foot {
  margin: calc(34 * var(--px)) 0 0;
  font-size: calc(13.5 * var(--px));
  letter-spacing: 0.05em;
  color: #6e7ba0;
}

/* ==========================================================================
   按钮
   ========================================================================== */

.btn {
  padding: calc(13 * var(--px)) calc(26 * var(--px));
  border-radius: calc(7 * var(--px));
  border: 1px solid rgba(157, 145, 255, 0.34);
  background: rgba(12, 16, 38, 0.72);
  color: #dfe4fb;
  font-family: inherit;
  font-size: calc(18 * var(--px));
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}

.btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: #fff;
  background: rgba(30, 36, 78, 0.9);
  transform: translateX(calc(4 * var(--px)));
}

.btn.primary {
  border-color: rgba(240, 196, 106, 0.72);
  background: linear-gradient(to right, rgba(120, 92, 30, 0.55), rgba(52, 44, 96, 0.6));
  color: #ffe9bd;
  font-weight: 700;
}

.btn.primary:hover {
  background: linear-gradient(to right, rgba(158, 122, 40, 0.72), rgba(70, 58, 130, 0.7));
}

.btn.ghost {
  border-color: rgba(157, 145, 255, 0.16);
  color: #8c97b8;
}

.btn.small {
  padding: calc(8 * var(--px)) calc(15 * var(--px));
  font-size: calc(14.5 * var(--px));
  letter-spacing: 0.04em;
}

.btn.small:hover:not(:disabled) {
  transform: none;
}

.btn.danger {
  border-color: rgba(255, 107, 129, 0.45);
  color: #ffc2cc;
}

.btn.danger:hover {
  border-color: var(--danger);
  background: rgba(90, 24, 40, 0.8);
  color: #fff;
}

.btn:disabled {
  opacity: 0.36;
  cursor: default;
}

.icon-btn {
  width: calc(34 * var(--px));
  height: calc(34 * var(--px));
  border-radius: calc(7 * var(--px));
  border: 1px solid rgba(157, 145, 255, 0.28);
  background: rgba(10, 13, 30, 0.7);
  color: #c8cee8;
  font-size: calc(16 * var(--px));
  cursor: pointer;
  transition: all 0.16s ease;
  line-height: 1;
}

.icon-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ==========================================================================
   模态
   ========================================================================== */

.modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(2, 4, 12, 0.74);
  backdrop-filter: blur(calc(4 * var(--px)));
  animation: modal-in 0.22s ease both;
}

@keyframes modal-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-panel {
  width: calc(880 * var(--px));
  max-width: 92%;
  max-height: 88%;
  display: flex;
  flex-direction: column;
  padding: calc(26 * var(--px)) calc(30 * var(--px)) calc(24 * var(--px));
  border-radius: calc(12 * var(--px));
  border: 1px solid rgba(240, 196, 106, 0.26);
  background: linear-gradient(to bottom, rgba(14, 19, 44, 0.98), rgba(7, 10, 24, 0.99));
  box-shadow: 0 calc(24 * var(--px)) calc(70 * var(--px)) rgba(0, 0, 0, 0.7);
  animation: panel-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.modal-panel.wide {
  width: calc(1040 * var(--px));
}

/* ---------------- 激活码（试玩版门） ---------------- */

.gate-panel {
  width: calc(620 * var(--px));
  text-align: center;
}

.gate-prompt {
  margin: calc(6 * var(--px)) 0 calc(18 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: 1.7;
  color: #d8dff5;
  white-space: pre-wrap;
}

.gate-field {
  display: flex;
  gap: calc(10 * var(--px));
  align-items: stretch;
  justify-content: center;
}

.gate-input {
  flex: 1;
  min-width: 0;
  padding: calc(12 * var(--px)) calc(14 * var(--px));
  border-radius: calc(8 * var(--px));
  border: 1px solid rgba(240, 196, 106, 0.4);
  background: rgba(6, 9, 22, 0.9);
  color: #f6f0dd;
  font-family: inherit;
  font-size: calc(19 * var(--px));
  letter-spacing: calc(2.5 * var(--px));
  text-transform: uppercase;
  text-align: center;
}

.gate-input:focus {
  outline: none;
  border-color: #f0c46a;
  box-shadow: 0 0 calc(14 * var(--px)) rgba(240, 196, 106, 0.28);
}

.gate-input.bad {
  border-color: #ff7b7b;
  box-shadow: 0 0 calc(14 * var(--px)) rgba(255, 90, 90, 0.3);
}

.gate-status {
  min-height: calc(22 * var(--px));
  margin: calc(12 * var(--px)) 0 0;
  font-size: calc(13.5 * var(--px));
  color: #8892b5;
}

.gate-status.err {
  color: #ff9b9b;
}

.gate-status.ok {
  color: #8fe0a4;
}

.gate-hint {
  margin: calc(4 * var(--px)) 0 0;
  font-size: calc(12.5 * var(--px));
  color: #6d7799;
  line-height: 1.6;
}

.gate-panel .modal-foot {
  justify-content: center;
}

@keyframes gate-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(calc(-7 * var(--px))); }
  40% { transform: translateX(calc(6 * var(--px))); }
  60% { transform: translateX(calc(-4 * var(--px))); }
  80% { transform: translateX(calc(2 * var(--px))); }
}

.gate-input.shake {
  animation: gate-shake 0.32s ease;
}

/* ---------------- 剧本校验错误的浮层 ---------------- */

#script-issues {
  position: fixed;
  top: calc(56 * var(--px));
  left: 50%;
  z-index: 9999;
  width: min(calc(780 * var(--px)), 92vw);
  max-height: 62vh;
  overflow-y: auto;
  padding: calc(14 * var(--px)) calc(18 * var(--px));
  border: 1px solid rgba(255, 120, 120, 0.45);
  border-radius: calc(10 * var(--px));
  background: rgba(26, 11, 18, 0.97);
  color: #ffd9d9;
  font-size: calc(13.5 * var(--px));
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
}

#script-issues .si-head {
  margin-bottom: calc(8 * var(--px));
  font-weight: 700;
  color: #ff9a9a;
}

#script-issues .si-row {
  padding: calc(3 * var(--px)) 0;
  border-bottom: 1px dashed rgba(255, 120, 120, 0.18);
  word-break: break-all;
}

#script-issues .si-close {
  margin-top: calc(10 * var(--px));
  padding: calc(5 * var(--px)) calc(14 * var(--px));
  border: 1px solid rgba(255, 120, 120, 0.5);
  border-radius: calc(7 * var(--px));
  background: transparent;
  color: #ffd9d9;
  cursor: pointer;
}

/* ---------------- 角色一览 ---------------- */

.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(132 * var(--px)), 1fr));
  gap: calc(12 * var(--px));
  margin-top: calc(10 * var(--px));
}

.char-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(140, 160, 220, 0.18);
  border-radius: calc(9 * var(--px));
  background: rgba(9, 13, 30, 0.7);
  color: inherit;
  cursor: pointer;
  text-align: center;
}

.char-card.locked {
  opacity: 0.6;
  cursor: default;
}

.char-card .char-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #0a0f22 center / cover no-repeat;
  border-bottom: 1px solid rgba(140, 160, 220, 0.14);
}

.char-card .char-name {
  padding: calc(7 * var(--px)) calc(6 * var(--px));
  font-size: calc(14 * var(--px));
  color: #e8ecff;
}

.char-card.locked .char-name {
  color: #6d7799;
}

.char-lock {
  position: absolute;
  top: calc(6 * var(--px));
  right: calc(6 * var(--px));
  padding: 1px calc(7 * var(--px));
  border-radius: 999px;
  font-size: calc(11.5 * var(--px));
  color: #9aa4c4;
  background: rgba(10, 14, 30, 0.82);
}

.char-detail-main {
  display: flex;
  gap: calc(16 * var(--px));
  margin-top: calc(10 * var(--px));
}

.char-detail-art {
  flex: 0 0 44%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(6 * var(--px));
  border: 1px solid rgba(140, 160, 220, 0.16);
  border-radius: calc(9 * var(--px));
  background: #0a0f22 center / contain no-repeat;
}

.char-detail-side {
  flex: 1;
  min-width: 0;
}

.char-stats {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--px));
  margin-top: calc(6 * var(--px));
}

.char-stat {
  display: flex;
  align-items: baseline;
  gap: calc(6 * var(--px));
  padding: calc(4 * var(--px)) calc(10 * var(--px));
  border-radius: calc(7 * var(--px));
  background: rgba(107, 92, 255, 0.14);
}

.char-stat .cs-label {
  font-size: calc(12.5 * var(--px));
  color: #9aa4c4;
}

.char-stat .cs-value {
  font-size: calc(16 * var(--px));
  color: var(--gold);
}

.char-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(120 * var(--px)), 1fr));
  gap: calc(8 * var(--px));
}

.char-gallery-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: calc(4 * var(--px));
  border: 1px solid rgba(140, 160, 220, 0.16);
  border-radius: calc(7 * var(--px));
  background: #0a0f22 center / cover no-repeat;
}

@keyframes panel-in {
  from {
    transform: translateY(calc(14 * var(--px))) scale(0.99);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--px));
  padding-bottom: calc(16 * var(--px));
  margin-bottom: calc(18 * var(--px));
  border-bottom: 1px solid rgba(157, 145, 255, 0.16);
}

.modal-title {
  margin: 0;
  font-size: calc(24 * var(--px));
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #fff;
}

.modal-foot {
  display: flex;
  gap: calc(10 * var(--px));
  justify-content: flex-end;
  padding-top: calc(16 * var(--px));
  margin-top: calc(16 * var(--px));
  border-top: 1px solid rgba(157, 145, 255, 0.16);
}

.modal-hint {
  margin: calc(14 * var(--px)) 0 0;
  font-size: calc(14 * var(--px));
  color: #8c97b8;
  letter-spacing: 0.04em;
}

/* ---------------- 存档槽 ---------------- */

.slot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(13 * var(--px));
  overflow-y: auto;
  padding-right: calc(6 * var(--px));
}

.slot {
  display: grid;
  grid-template-columns: calc(150 * var(--px)) 1fr;
  gap: calc(14 * var(--px));
  padding: calc(12 * var(--px));
  border-radius: calc(8 * var(--px));
  border: 1px solid rgba(157, 145, 255, 0.22);
  background: rgba(9, 13, 30, 0.7);
  cursor: pointer;
  transition: all 0.16s ease;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.slot:hover {
  border-color: var(--gold);
  background: rgba(24, 30, 66, 0.85);
}

.slot.empty {
  grid-template-columns: 1fr;
  place-items: center;
  min-height: calc(120 * var(--px));
  color: #66739a;
  font-size: calc(15 * var(--px));
  letter-spacing: 0.1em;
  cursor: default;
}

.slot.empty:hover {
  border-color: rgba(157, 145, 255, 0.22);
  background: rgba(9, 13, 30, 0.7);
}

/* 存档缩略：用当时的背景 + 立绘拼一个小预览，不需要截图 */
.slot-thumb {
  position: relative;
  height: calc(88 * var(--px));
  border-radius: calc(5 * var(--px));
  overflow: hidden;
  background: #0a0e20;
  background-size: cover;
  background-position: center;
}

.slot-thumb .thumb-sprite {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
}

.slot-meta {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--px));
  min-width: 0;
}

.slot-title {
  font-size: calc(15.5 * var(--px));
  color: var(--gold);
  letter-spacing: 0.06em;
}

.slot-time {
  font-size: calc(13 * var(--px));
  color: #7c88ad;
}

.slot-preview {
  font-size: calc(14 * var(--px));
  line-height: 1.6;
  color: #c3cae2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.slot-affinity {
  font-size: calc(12.5 * var(--px));
  color: var(--star);
}

.slot.auto .slot-title::before {
  content: 'AUTO ';
  color: var(--star);
}

/* ---------------- 设置 ---------------- */

.settings-body {
  overflow-y: auto;
  padding-right: calc(6 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--px));
}

.set-group h3 {
  margin: 0 0 calc(12 * var(--px));
  font-size: calc(16 * var(--px));
  letter-spacing: 0.2em;
  color: var(--gold);
  font-weight: 600;
}

.set-row {
  display: grid;
  grid-template-columns: calc(190 * var(--px)) 1fr calc(74 * var(--px));
  align-items: center;
  gap: calc(14 * var(--px));
  padding: calc(7 * var(--px)) 0;
  font-size: calc(15.5 * var(--px));
  color: #d3d9ef;
}

.set-row.check {
  grid-template-columns: calc(24 * var(--px)) 1fr;
  cursor: pointer;
}

.set-row.check input {
  width: calc(17 * var(--px));
  height: calc(17 * var(--px));
  accent-color: var(--gold);
  cursor: pointer;
}

.set-row input[type='range'] {
  width: 100%;
  accent-color: var(--violet-soft);
  cursor: pointer;
}

.set-row output {
  font-size: calc(14 * var(--px));
  color: var(--star);
  text-align: right;
}

.set-actions {
  display: flex;
  gap: calc(10 * var(--px));
}

.set-note {
  margin: calc(6 * var(--px)) 0 0;
  font-size: calc(13.5 * var(--px));
  line-height: 1.7;
  color: #7c88ad;
}

.set-note code {
  padding: 1px calc(5 * var(--px));
  border-radius: calc(4 * var(--px));
  background: rgba(107, 92, 255, 0.16);
  color: #b9b0ff;
  font-size: calc(12.5 * var(--px));
}

/* ---------------- 第三方素材署名 ---------------- */

.credit-row {
  padding: calc(9 * var(--px)) calc(12 * var(--px));
  margin-bottom: calc(8 * var(--px));
  border-radius: calc(7 * var(--px));
  border-left: 2px solid rgba(240, 196, 106, 0.45);
  background: rgba(9, 13, 30, 0.6);
}

.credit-title {
  font-size: calc(14.5 * var(--px));
  color: #e8ecff;
}

.credit-meta {
  margin-top: calc(3 * var(--px));
  font-size: calc(13 * var(--px));
  color: var(--gold);
}

.credit-link {
  display: block;
  margin-top: calc(3 * var(--px));
  font-size: calc(12 * var(--px));
  color: var(--star);
  word-break: break-all;
  text-decoration: none;
}

.credit-link:hover {
  text-decoration: underline;
}

.credit-slots {
  margin-top: calc(4 * var(--px));
  font-size: calc(12 * var(--px));
  color: #7c88ad;
}

/* ---------------- CG 画廊 ---------------- */

.cg-grid {
  display: grid;
  /* 固定 4 列 × 2 行 = 每页 8 张，配合翻页条 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(13 * var(--px));
  /* 关键：默认 stretch 会把格子拉得比 16:9 高，cover 又把图裁掉一截，
     看着就像"图被遮挡"。start 让格子保持自己的比例，整张图完整显示。 */
  align-items: start;
  padding-right: calc(6 * var(--px));
}

.cg-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--px));
  margin-top: calc(14 * var(--px));
}

.cg-pager .cg-page {
  font-size: calc(13.5 * var(--px));
  color: #cfd6f0;
}

.cg-cell {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: calc(7 * var(--px));
  border: 1px solid rgba(157, 145, 255, 0.22);
  background: rgba(9, 13, 30, 0.7) center/cover no-repeat;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.18s ease;
  padding: 0;
}

.cg-cell:hover:not(.locked) {
  border-color: var(--gold);
  transform: scale(1.025);
  box-shadow: 0 0 calc(24 * var(--px)) rgba(240, 196, 106, 0.3);
}

.cg-cell.locked {
  cursor: default;
  background: repeating-linear-gradient(
    45deg,
    rgba(20, 26, 56, 0.85),
    rgba(20, 26, 56, 0.85) calc(9 * var(--px)),
    rgba(14, 18, 40, 0.85) calc(9 * var(--px)),
    rgba(14, 18, 40, 0.85) calc(18 * var(--px))
  );
}

.cg-cell .cg-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(7 * var(--px)) calc(10 * var(--px));
  font-size: calc(13 * var(--px));
  color: #dfe4fb;
  background: linear-gradient(to top, rgba(2, 4, 12, 0.92), rgba(2, 4, 12, 0));
  text-align: left;
}

.cg-cell.locked .cg-label {
  color: #5c678a;
}

#cg-viewer {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(2, 4, 12, 0.94);
}

#cg-viewer img {
  max-width: 96%;
  max-height: 92%;
  border-radius: calc(8 * var(--px));
  box-shadow: 0 0 calc(60 * var(--px)) rgba(0, 0, 0, 0.8);
}

#cg-viewer .icon-btn {
  position: absolute;
  top: calc(24 * var(--px));
  right: calc(28 * var(--px));
}

/* ---------------- 回想 ---------------- */

.backlog-list {
  overflow-y: auto;
  /* 回想列表占满大半个屏幕 —— 之前太矮，一次只看得到几行 */
  max-height: 74vh;
  padding-right: calc(6 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--px));
}

.backlog-item {
  padding: calc(11 * var(--px)) calc(15 * var(--px));
  border-left: 2px solid rgba(157, 145, 255, 0.3);
  background: rgba(9, 13, 30, 0.55);
  border-radius: 0 calc(6 * var(--px)) calc(6 * var(--px)) 0;
}

.backlog-item .bl-name {
  display: block;
  margin-bottom: calc(5 * var(--px));
  font-size: calc(14 * var(--px));
  color: var(--gold);
  letter-spacing: 0.08em;
}

.backlog-item .bl-text {
  margin: 0;
  font-size: calc(15.5 * var(--px));
  line-height: 1.75;
  color: #d3d9ef;
}

.backlog-item.narration .bl-text {
  color: #b3bad6;
}

/* ---------------- 结局收集 ---------------- */

.ending-list {
  overflow-y: auto;
  padding-right: calc(6 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--px));
}

.ending-item {
  display: grid;
  grid-template-columns: calc(56 * var(--px)) 1fr;
  gap: calc(15 * var(--px));
  align-items: center;
  padding: calc(13 * var(--px)) calc(17 * var(--px));
  border-radius: calc(8 * var(--px));
  border: 1px solid rgba(157, 145, 255, 0.2);
  background: rgba(9, 13, 30, 0.6);
}

.ending-item.unlocked {
  border-color: rgba(240, 196, 106, 0.42);
  background: rgba(24, 30, 66, 0.6);
}

.ending-item .ei-no {
  font-size: calc(26 * var(--px));
  font-weight: 700;
  color: #4c5779;
  text-align: center;
}

.ending-item.unlocked .ei-no {
  color: var(--gold);
}

.ending-item .ei-title {
  font-size: calc(17 * var(--px));
  color: #e8ecff;
  letter-spacing: 0.08em;
}

.ending-item .ei-desc {
  margin: calc(4 * var(--px)) 0 0;
  font-size: calc(13.5 * var(--px));
  line-height: 1.65;
  color: #8c97b8;
}

.ending-item.locked .ei-title {
  color: #66739a;
}

/* ==========================================================================
   提示条
   ========================================================================== */

#toast-host {
  position: fixed;
  left: 50%;
  bottom: 5vh;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  padding: 9px 20px;
  border-radius: 99px;
  border: 1px solid rgba(240, 196, 106, 0.42);
  background: rgba(8, 11, 26, 0.94);
  color: #f0e6cf;
  font-size: 14px;
  letter-spacing: 0.05em;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
  animation: toast-in 0.24s ease both;
  max-width: 70vw;
  text-align: center;
}

.toast.err {
  border-color: rgba(255, 107, 129, 0.6);
  color: #ffc9d2;
}

.toast.out {
  animation: toast-out 0.3s ease both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ==========================================================================
   启动遮罩
   ========================================================================== */

#boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, #0b1026 0%, #03040a 100%);
  transition: opacity 0.6s ease;
}

#boot.gone {
  opacity: 0;
  pointer-events: none;
}

.boot-inner {
  text-align: center;
}

.boot-star {
  width: 54px;
  height: 54px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--star) 34%, rgba(127, 216, 255, 0) 72%);
  animation: boot-pulse 1.7s ease-in-out infinite;
}

@keyframes boot-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.28);
    opacity: 1;
  }
}

.boot-text {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: #8c97b8;
}

/* ==========================================================================
   减少动效
   ========================================================================== */

#stage.reduce-motion .sprite-slot,
#stage.reduce-motion .bg-layer,
#stage.reduce-motion #cg-layer {
  transition-duration: 0.12s;
}

#stage.reduce-motion.shake {
  animation: none;
}

#stage.reduce-motion #advance-cursor {
  animation: none;
}

#stage.reduce-motion .card-inner {
  animation-duration: 0.2s;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: rgba(8, 11, 26, 0.5);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb {
  background: rgba(107, 92, 255, 0.42);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(240, 196, 106, 0.55);
}