/* ============================================================
   慈航市生存手册 · 视觉基调：中式都市怪谈 × 青光系统光幕
   剧情＝宋体骨白 / 系统＝等宽青光 / 血色与符黄点缀
   ============================================================ */

:root {
  --ink:        #080a0d;
  --ink-2:      #0e1216;
  --paper:      #ddd5c2;
  --paper-dim:  rgba(221, 213, 194, .68);
  --paper-faint:rgba(221, 213, 194, .38);
  --blood:      #c23a30;
  --blood-deep: #8c2420;
  --blood-glow: rgba(194, 58, 48, .35);
  --talisman:   #c9a15c;
  --sys:        #7cc7b8;
  --sys-bright: #a7e6d8;
  --sys-dim:    rgba(124, 199, 184, .45);
  --sys-med:    rgba(124, 199, 184, .78);
  --sys-line:   rgba(124, 199, 184, .6);
  --paper-med:  rgba(221, 213, 194, .85);
  --paper-line: rgba(221, 213, 194, .55);
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --kai:   "KaiTi", "STKaiti", "Noto Serif SC", serif;
  --mono:  "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;

  --text-base: clamp(1rem, .92rem + .5vw, 1.2rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-size: var(--text-base);
  line-height: 2;
  -webkit-font-smoothing: antialiased;
}

#app { position: relative; height: 100%; isolation: isolate; }

/* ---------------- 氛围层 ---------------- */

#stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.layer { position: absolute; inset: 0; }

.sky {
  background:
    radial-gradient(120% 80% at 50% -10%, #161d26 0%, #0c1015 42%, #07090c 100%);
  transition: filter 1.2s ease, opacity 1.2s ease;
}

/* 雨：两组斜向细线，不同速度 */
.rain {
  inset: -60%;
  background-image: repeating-linear-gradient(
    108deg,
    transparent 0 8px,
    rgba(178, 198, 218, .055) 8px 9px,
    transparent 9px 16px);
}
.rain-a { animation: rain-fall .42s linear infinite; }
.rain-b {
  opacity: .55;
  background-image: repeating-linear-gradient(
    108deg,
    transparent 0 12px,
    rgba(178, 198, 218, .04) 12px 13px,
    transparent 13px 26px);
  animation: rain-fall .8s linear infinite;
}
@keyframes rain-fall { to { transform: translate3d(3.2%, 4.2%, 0); } }

/* 雾：两团冷灰缓慢漂移 */
.fog {
  background:
    radial-gradient(45% 38% at 18% 78%, rgba(150, 168, 180, .09), transparent 70%),
    radial-gradient(50% 42% at 84% 66%, rgba(120, 140, 158, .07), transparent 70%);
  animation: fog-drift 34s ease-in-out infinite alternate;
}
@keyframes fog-drift {
  from { transform: translate3d(-2.5%, 1%, 0) scale(1.05); }
  to   { transform: translate3d(2.5%, -2%, 0) scale(1.12); }
}

/* 颗粒噪点 */
.grain {
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift .6s steps(3) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2%, 1.5%); }
  66% { transform: translate(1.5%, -2%); }
  100% { transform: translate(0, 0); }
}

.vignette {
  background: radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(0, 0, 0, .62) 100%);
}

/* 氛围 mood：停电 / 真三楼 */
body.mood-blackout .sky {
  background: radial-gradient(120% 80% at 50% 0%, #100f12 0%, #08070a 50%, #040405 100%);
}
body.mood-sanctum .sky {
  background:
    radial-gradient(90% 60% at 50% 12%, rgba(74, 34, 30, .28), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #120b0c 0%, #0a0607 55%, #050304 100%);
}
body.mood-blackout .rain,
body.mood-sanctum .rain { opacity: .25; }

/* 全屏闪光 / 黑场 */
#fx-overlay {
  position: absolute; inset: 0; z-index: 5;
  background: #fff; opacity: 0; pointer-events: none;
}
#fx-overlay.flash-white { animation: flash-white .7s ease-out; }
#fx-overlay.flash-red   { background: var(--blood); animation: flash-red .9s ease-out; }
#fx-overlay.to-black    { background: #000; opacity: 0; animation: to-black 1.4s ease-in-out; }
@keyframes flash-white { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes flash-red   { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes to-black    { 0% { opacity: 0; } 45% { opacity: .96; } 100% { opacity: 0; } }

#fx-rewind {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  font-family: var(--mono);
  letter-spacing: .6em; text-indent: .6em;
  color: var(--sys-bright);
  font-size: clamp(1rem, 3.4vw, 1.8rem);
  text-shadow: 0 0 28px var(--sys-dim), 0 0 60px rgba(124, 199, 184, .3);
  opacity: 0; pointer-events: none;
}
#fx-rewind.go { animation: rewind 1.3s cubic-bezier(.2, .7, .3, 1); }
@keyframes rewind {
  0% { opacity: 0; transform: scale(1.18); filter: blur(6px); }
  35% { opacity: 1; transform: scale(1); filter: blur(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: scale(.94); }
}

/* ---------------- HUD ---------------- */

#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem);
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(rgba(5, 7, 9, .75), transparent);
}
/* 作者样式 display:flex 会盖过 hidden 的 UA 规则，需显式补回 */
#hud[hidden] { display: none; }
.hud-item { display: flex; align-items: baseline; gap: .55rem; }
.hud-label {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .28em;
  color: var(--sys-dim);
}
.hud-value {
  font-family: var(--mono);
  font-size: 1.05rem; color: var(--sys-bright);
  text-shadow: 0 0 14px rgba(124, 199, 184, .35);
  min-width: 1.6em;
}
#btn-sound, #btn-textmode, #btn-home, #btn-history, #btn-archive {
  background: transparent;
  border: 1px solid var(--sys-line);
  color: var(--sys-med);
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .2em; padding: .35rem .8rem;
  cursor: pointer; transition: all .25s;
}
.hud-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
#btn-sound:hover, #btn-textmode:hover, #btn-home:hover, #btn-history:hover, #btn-archive:hover { color: var(--sys-bright); border-color: var(--sys); }

/* ---------------- 标题画面 ---------------- */

#title-screen {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  /* 不透明：游戏中回首页时，底层正文不得透出 */
  background: radial-gradient(90% 70% at 50% 38%, #0d1316, var(--ink) 78%);
  animation: title-fade 1.6s ease both;
}
@keyframes title-fade { from { opacity: 0; } to { opacity: 1; } }

.title-kicker {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .55em; text-indent: .55em;
  color: var(--paper-faint);
  margin-bottom: 2.2rem;
}
.game-title {
  font-size: clamp(2.8rem, 9vw, 5.6rem);
  font-weight: 700;
  letter-spacing: .14em; text-indent: .14em;
  line-height: 1.15;
  color: var(--paper);
  text-shadow: 0 0 40px rgba(0, 0, 0, .8), 0 2px 0 rgba(0, 0, 0, .6);
}
.title-accent {
  display: block;
  color: var(--blood);
  text-shadow: 0 0 34px var(--blood-glow), 0 0 80px rgba(140, 36, 32, .4);
}
/* 印章去除后的留白：保持原标题构图，不挤压按钮位置 */
.title-spacer { flex: none; height: clamp(2.6rem, 6vh, 4.4rem); }
.title-sub {
  font-size: 1rem; letter-spacing: .42em; text-indent: .42em;
  color: var(--paper-dim);
}
.title-buttons {
  display: flex; flex-direction: column;
  align-items: center; gap: 1.1rem;
  margin-top: 3rem;
}
.title-sub-buttons {
  display: flex; gap: 1.2rem;
}
.title-sub-buttons .title-btn {
  padding: .62rem 1.7rem;
  font-size: .82rem; letter-spacing: .28em; text-indent: .28em;
}
.title-btn {
  background: transparent;
  border: 1px solid var(--paper-faint);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1rem; letter-spacing: .34em; text-indent: .34em;
  padding: .85rem 2.4rem;
  cursor: pointer;
  transition: all .3s;
}
.title-btn:hover {
  border-color: var(--blood);
  color: #fff;
  background: rgba(140, 36, 32, .22);
  box-shadow: 0 0 26px rgba(140, 36, 32, .25);
}
.title-btn.ghost { border-color: var(--sys-line); color: var(--sys); }
.title-btn.ghost:hover { border-color: var(--sys); color: var(--sys-bright); background: rgba(124, 199, 184, .08); }
.title-credit {
  position: absolute; bottom: 2rem;
  font-size: .78rem; letter-spacing: .16em;
  color: var(--paper-faint);
}

/* ---------------- 游戏主区（纵向三段，互不遮挡） ---------------- */

#game {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  padding-top: clamp(3.6rem, 8vh, 4.6rem);
}

/* ---------- 场景标签（细一条） ---------- */

#scene-tag {
  flex: none;
  display: flex; gap: .8rem; align-items: baseline;
  padding: .35rem clamp(1.2rem, 8vw, 6rem) 0;
  font-family: var(--mono);
}
#scene-id { font-size: .72rem; letter-spacing: .2em; color: var(--blood); opacity: .85; }
#scene-name { font-family: var(--kai); font-size: .92rem; letter-spacing: .3em; color: var(--paper-faint); }

/* ---------- 正文区：本区滚动回看 ---------- */

#text-box {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: .9rem clamp(1.2rem, 8vw, 6rem) .7rem;
  background: linear-gradient(rgba(5, 7, 9, .22), rgba(5, 7, 9, .5));
  outline: none;
}

#lines { max-width: 760px; margin: 0 auto; }

.line {
  margin-bottom: 1.1rem;
  opacity: 0;
  animation: line-in .5s ease forwards;
}
@keyframes line-in { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
/* 点击跳过时：剩余行立即成形，不播淡入 */
.line.instant, .panel.instant { animation: none; opacity: 1; transform: none; }

.line.dialogue { display: flex; gap: .4rem; align-items: baseline; }
.line .name {
  flex: none;
  font-weight: 700;
  color: var(--blood);
  letter-spacing: .12em;
}
.line .name.ning { color: var(--talisman); }
.line .name.sys  { color: var(--sys-bright); }
.line.thought {
  color: var(--paper-dim);
  font-style: normal;
}
.line.thought::before { content: "「"; color: var(--paper-faint); }
.line.thought::after  { content: "」"; color: var(--paper-faint); }

.typing-cursor {
  display: inline-block;
  width: .42em; height: 1em;
  margin-left: 2px;
  vertical-align: -.14em;
  background: var(--blood);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* 系统面板：青光光幕 */
.panel {
  max-width: 760px;
  margin: 0 auto 1.2rem;
  padding: 1.3rem 1.7rem;
  font-family: var(--mono);
  font-size: .86rem;
  line-height: 2.1;
  color: var(--sys-bright);
  background: rgba(7, 18, 20, .66);
  border: 1px solid var(--sys-dim);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 0 0 30px rgba(124, 199, 184, .12), inset 0 0 40px rgba(124, 199, 184, .04);
  position: relative;
  opacity: 0;
  animation: line-in .5s ease forwards;
}
.panel::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(124, 199, 184, .045) 0 1px, transparent 1px 4px);
}
.panel .p-title { color: #eafff9; text-shadow: 0 0 12px var(--sys-dim); }
.panel .p-dim { color: var(--sys-dim); }

#continue-hint {
  max-width: 760px; margin: .2rem auto 0;
  text-align: right;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .22em;
  color: var(--paper-faint);
  opacity: 0; transition: opacity .3s;
}
#continue-hint.show { opacity: 1; animation: hint-bob 1.6s ease-in-out infinite; }
@keyframes hint-bob { 50% { transform: translateY(3px); } }

/* ---------------- 选项区（独立底栏） ---------------- */

#choices {
  flex: none;
  padding: .7rem clamp(1.2rem, 8vw, 6rem) 1.1rem;
  border-top: 1px solid rgba(201, 161, 92, .22);
  background: linear-gradient(rgba(5, 7, 9, .72), rgba(5, 7, 9, .96));
}
#choices:empty { display: none; }
#choices .choices-inner {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: .65rem;
}
.choice {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  width: 100%;
  background: rgba(14, 18, 22, .6);
  border: 1px solid rgba(221, 213, 194, .18);
  border-left: 2px solid var(--blood-deep);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1rem;
  text-align: left;
  padding: .82rem 1.3rem;
  cursor: pointer;
  transition: all .28s ease;
}
.choice .c-index {
  font-family: var(--mono); font-size: .78rem;
  color: var(--paper-faint);
  transition: color .28s;
}
.choice:hover, .choice:focus-visible {
  transform: translateX(.5em);
  border-color: rgba(221, 213, 194, .5);
  border-left-color: var(--blood);
  background: rgba(28, 22, 22, .72);
  box-shadow: 0 0 24px rgba(140, 36, 32, .18);
  outline: none;
}
.choice:hover .c-index { color: var(--blood); }

/* ---------------- 章节卡 ---------------- */

#chapter-card {
  position: absolute; inset: 0; z-index: 15;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  background: rgba(4, 5, 7, .7);
  backdrop-filter: blur(2px);
}
#chapter-card[hidden] { display: none; }
.cc-kicker {
  font-family: var(--mono); font-size: .78rem;
  letter-spacing: .5em; text-indent: .5em;
  color: var(--paper-faint);
  margin-bottom: 1.4rem;
}
.cc-title {
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  letter-spacing: .3em; text-indent: .3em;
  color: var(--paper);
  text-shadow: 0 0 40px rgba(0, 0, 0, .9);
  animation: cc-title-in 1.4s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes cc-title-in {
  from { opacity: 0; letter-spacing: .8em; filter: blur(8px); }
  to   { opacity: 1; letter-spacing: .3em; filter: blur(0); }
}
.cc-hint {
  margin-top: 2.6rem;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .3em; color: var(--paper-faint);
  animation: hint-bob 2s ease-in-out infinite;
}

/* ---------------- BE 结算 ---------------- */

#be-block {
  position: absolute; inset: 0; z-index: 16;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.8rem; padding: 2rem;
  background: radial-gradient(80% 60% at 50% 46%, rgba(24, 6, 5, .75), rgba(3, 3, 4, .95));
  animation: line-in .6s ease both;
}
#be-block[hidden] { display: none; }
.be-head { display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap; justify-content: center; }
.deadtag {
  font-family: var(--mono); font-size: clamp(1.6rem, 5vw, 2.8rem);
  letter-spacing: .24em;
  color: var(--blood);
  text-shadow: 0 0 30px var(--blood-glow);
}
.be-name {
  font-family: var(--kai); font-size: clamp(1.2rem, 3.4vw, 1.9rem);
  letter-spacing: .24em; color: var(--paper-dim);
}
.intel-panel {
  max-width: 560px; width: 100%;
  padding: 1.3rem 1.6rem;
  font-family: var(--mono);
  border: 1px solid var(--sys-dim);
  background: rgba(7, 18, 20, .6);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.intel-label { font-size: .74rem; letter-spacing: .18em; color: var(--sys); margin-bottom: .7rem; }
.intel-text { font-size: .86rem; line-height: 2; color: var(--sys-bright); }
.intel-note { margin-top: .8rem; font-size: .7rem; letter-spacing: .12em; color: var(--paper-faint); }

.action-btn {
  background: transparent;
  border: 1px solid var(--blood);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1rem; letter-spacing: .4em; text-indent: .4em;
  padding: .85rem 2.6rem;
  cursor: pointer;
  transition: all .3s;
}
.action-btn:hover {
  background: rgba(140, 36, 32, .28);
  box-shadow: 0 0 30px var(--blood-glow);
  color: #fff;
}

/* ---------------- Demo 结束 ---------------- */

#end-block {
  position: absolute; inset: 0; z-index: 16;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.2rem;
  background: rgba(4, 5, 7, .9);
}
#end-block[hidden] { display: none; }
.end-title {
  font-size: clamp(2rem, 5vw, 3rem); letter-spacing: .24em; text-indent: .24em;
  color: var(--paper);
}
.end-sub {
  font-family: var(--mono); font-size: .82rem;
  letter-spacing: .3em; color: var(--paper-faint);
}
.end-status {
  margin: 1.2rem 0;
  font-family: var(--mono); font-size: .86rem; line-height: 2.3;
  color: var(--sys-bright); text-align: center;
  border: 1px solid var(--sys-dim);
  padding: 1.2rem 2rem;
  background: rgba(7, 18, 20, .5);
}

/* ---------------- 断章导流页 ---------------- */

#cta-block {
  position: absolute; inset: 0; z-index: 16;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(.7rem, 1.8vh, 1.15rem);
  padding: clamp(1rem, 4vh, 2.2rem) 1.4rem;
  overflow-y: auto;
  background:
    radial-gradient(70% 42% at 50% 110%, rgba(40, 110, 100, .2), transparent 70%),
    radial-gradient(90% 70% at 50% 30%, rgba(10, 14, 16, .92), rgba(2, 3, 4, .98));
  animation: line-in .6s ease both;
}
#cta-block[hidden] { display: none; }
.cta-next {
  font-family: var(--kai);
  font-size: clamp(1.1rem, 3.2vw, 1.55rem);
  line-height: 1.9;
  letter-spacing: .12em;
  color: var(--paper-dim);
  text-align: center;
  max-width: 640px;
}
.cta-next-name {
  color: var(--paper);
  white-space: nowrap;
  text-shadow: 0 0 26px rgba(124, 199, 184, .28);
}
.cta-desc {
  max-width: 520px;
  font-size: .9rem; line-height: 2;
  color: var(--paper-dim); text-align: center;
}
.alias-box {
  width: min(460px, 100%);
  padding: 1.1rem 1.5rem 1.25rem;
  text-align: center;
  border: 1px solid var(--sys-dim);
  background: rgba(7, 18, 20, .6);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.cta-guide-text {
  margin: 0 0 .8rem;
  font-size: .85rem; line-height: 1.9;
  color: var(--paper-dim);
}
.cta-keyword {
  font-family: var(--kai); font-size: clamp(1.1rem, 3.6vw, 1.55rem);
  letter-spacing: .14em;
  color: var(--sys-bright);
  text-shadow: 0 0 22px rgba(124, 199, 184, .3);
  overflow-wrap: anywhere;
}
.cta-keyword-fallback {
  margin-top: .65rem;
  font-size: .72rem; line-height: 1.7;
  letter-spacing: .06em; color: var(--paper-faint);
}
.cta-actions {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: .7rem 1rem;
}
.cta-actions .action-btn:not(.primary) {
  border-color: var(--sys-line);
  color: var(--sys-med);
}
.cta-actions .action-btn:not(.primary):hover {
  background: rgba(35, 90, 82, .18);
  box-shadow: 0 0 24px rgba(124, 199, 184, .18);
  color: var(--sys-bright);
}
.action-btn.primary {
  border-color: var(--sys);
  color: var(--sys-bright);
}
.action-btn.primary:hover {
  background: rgba(35, 90, 82, .32);
  box-shadow: 0 0 32px rgba(124, 199, 184, .28);
}
.cta-row {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: .7rem 1rem;
}
.action-btn.ghost {
  border-color: var(--paper-line);
  color: var(--paper-med);
  font-size: .8rem; letter-spacing: .22em; text-indent: .22em;
  padding: .62rem 1.3rem;
}
.action-btn.ghost:hover {
  background: rgba(120, 120, 120, .14);
  box-shadow: none; color: var(--paper);
}
.cta-foot {
  margin-top: .3rem;
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .18em; color: var(--paper-faint);
}

/* ---------------- 死亡回响档案浮层 ---------------- */

#archive-overlay {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 5vh, 3rem) clamp(.8rem, 6vw, 4rem);
  background: rgba(3, 4, 6, .78);
  backdrop-filter: blur(3px);
  animation: fade-in .25s ease both;
}
#archive-overlay[hidden] { display: none; }
#archive-panel {
  width: min(620px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  border: 1px solid rgba(124, 199, 184, .5);
  background: linear-gradient(180deg, rgba(16, 26, 28, .98), rgba(9, 13, 15, .99));
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 0 0 50px rgba(0, 0, 0, .75), 0 0 26px rgba(124, 199, 184, .14);
}
.arc-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid rgba(124, 199, 184, .22);
}
.arc-head h2 {
  font-family: var(--kai); font-size: 1.15rem; letter-spacing: .4em;
  color: var(--sys-bright);
  text-shadow: 0 0 14px rgba(124, 199, 184, .35);
}
#btn-arc-close {
  background: transparent; border: none;
  color: var(--paper-faint); font-size: 1rem;
  cursor: pointer; padding: .2rem .4rem;
  transition: color .2s;
}
#btn-arc-close:hover { color: var(--blood); }
#archive-body {
  overflow-y: auto;
  padding: 1.1rem 1.5rem 1.5rem;
}
.arc-sec + .arc-sec { margin-top: 1.4rem; }
.arc-sec-title {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .22em;
  color: var(--paper-dim); margin-bottom: .8rem;
}
.arc-list { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.arc-empty {
  font-family: var(--mono); font-size: .82rem;
  color: var(--paper-faint);
}
.arc-ach {
  font-family: var(--kai); font-size: .95rem; letter-spacing: .18em;
  color: var(--talisman);
  padding-left: 1.1rem;
  position: relative;
}
.arc-ach::before {
  content: '◆'; font-size: .6rem;
  position: absolute; left: 0; top: .25rem;
  color: var(--talisman);
}
.arc-item {
  border: 1px solid rgba(124, 199, 184, .32);
  background: rgba(10, 22, 24, .55);
  padding: .7rem .95rem;
}
.arc-item.locked {
  border-color: rgba(221, 213, 194, .08);
  background: rgba(8, 9, 11, .5);
}
.arc-item-head {
  display: flex; gap: .8rem; align-items: baseline;
  font-family: var(--mono);
}
.arc-idx { font-size: .72rem; color: var(--paper-faint); letter-spacing: .1em; }
.arc-item.seen .arc-idx { color: var(--sys-dim); }
.arc-name {
  font-family: var(--kai); font-size: .95rem; letter-spacing: .2em;
  color: var(--paper-faint);
}
.arc-item.seen .arc-name { color: var(--paper-dim); }
.arc-intel {
  margin-top: .55rem;
  font-size: .84rem; line-height: 1.9;
  color: var(--sys-bright);
}
.arc-item.locked .arc-name { letter-spacing: .3em; }

/* ---------- 剧情记录浮层 ---------- */

#history-overlay {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 5vh, 3rem) clamp(.8rem, 6vw, 4rem);
  background: rgba(3, 4, 6, .78);
  backdrop-filter: blur(3px);
  animation: fade-in .25s ease both;
}
#history-overlay[hidden] { display: none; }
#history-panel {
  width: min(720px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  border: 1px solid rgba(124, 199, 184, .5);
  background: linear-gradient(180deg, rgba(16, 26, 28, .98), rgba(9, 13, 15, .99));
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 0 0 50px rgba(0, 0, 0, .75), 0 0 26px rgba(124, 199, 184, .14);
}
#btn-hist-close {
  background: transparent; border: none;
  color: var(--paper-faint); font-size: 1rem;
  cursor: pointer; padding: .2rem .4rem;
  transition: color .2s;
}
#btn-hist-close:hover { color: var(--blood); }
#history-body {
  overflow-y: auto;
  padding: 1.1rem 1.5rem 1.5rem;
}
.hist-scene {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  color: var(--sys-dim);
  margin: 1.15rem 0 .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(124, 199, 184, .18);
}
.hist-scene:first-child { margin-top: 0; }
.hist-line {
  font-size: .88rem; line-height: 1.9;
  color: var(--paper);
}
.hist-line.be { color: rgba(194, 58, 48, .8); }

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

/* 微信内「浏览器打开」引导浮层样式：wx-tip.css */

/* ---------------- 响应式 ---------------- */

@media (max-width: 640px) {
  #game { padding-top: 5.6rem; }
  #hud { flex-wrap: wrap; gap: .5rem .9rem; padding: .7rem .9rem; }
  .hud-item { gap: .35rem; }
  .hud-label { font-size: .62rem; letter-spacing: .14em; }
  .hud-value { font-size: .95rem; }
  .hud-actions {
    flex-basis: 100%; margin-left: 0;
    justify-content: space-between; gap: .4rem;
  }
  .hud-actions button { flex: 1; min-width: 0; white-space: nowrap; padding: .35rem .3rem; font-size: .66rem; letter-spacing: .08em; }
  .hud-actions .btn-mode { display: none; }
  #archive-panel, #history-panel { width: 100%; }
  #archive-body, #history-body { padding: .9rem 1rem 1.2rem; }
  .arc-head { padding: .9rem 1rem; }
  #scene-tag { padding: .3rem 1rem 0; }
  #text-box { padding: .7rem 1rem .6rem; }
  #choices { padding: .6rem 1rem .9rem; }
  .choice { font-size: .94rem; padding: .72rem 1rem; gap: .7rem; }
  .title-buttons { flex-direction: column; gap: 1rem; }
  /* 窄屏 HUD 折两行，导流内容整体下移避让 */
  #cta-block { justify-content: flex-start; gap: .8rem; padding-top: 5.6rem; }
  .cta-next { font-size: 1rem; letter-spacing: .05em; line-height: 1.75; }
  .cta-desc br, .cta-guide-text br { display: none; }
  .alias-box { padding: .9rem 1rem 1rem; }
  .title-sub-buttons { gap: .8rem; }
  .cta-actions .action-btn { flex: 1 1 100%; }
  .cta-actions .action-btn.primary { box-shadow: 0 0 26px rgba(124, 199, 184, .22); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}