/* ══════════════════════════════════════════════════════════════
   《柳絮与编译器》— 样式
   设计基调:深夜屏幕蓝 + 暖橙灯光。克制、不花哨,把注意力留给立绘和文字。
   ══════════════════════════════════════════════════════════════ */

:root {
  --ink:      #10151F;
  --ink-2:    #1A2130;
  --paper:    #F5F1E8;
  --muted:    #9AA5B4;
  --line:     rgba(255, 255, 255, .12);
  --accent:   #E8722C;
  --ui-font:  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --serif:    "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  --radius:   14px;
  --shadow:   0 18px 50px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

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

button { font-family: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

#app {
  position: relative;
  width: 100vw; height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ═══════════ 通用:淡入淡出遮罩 / toast ═══════════ */

#fade-overlay {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 900;
}

.toast {
  position: absolute; left: 50%; top: 76px;
  transform: translate(-50%, -12px);
  padding: 10px 22px;
  background: rgba(16, 21, 31, .92);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px; letter-spacing: .04em;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
  z-index: 950;
  backdrop-filter: blur(14px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ══════════════════════════════════════════════════════════════
   标题画面
   ══════════════════════════════════════════════════════════════ */

#title-screen {
  position: absolute; inset: 0;
  display: none;
  z-index: 500;
  background: #070A11;
}
#title-screen.show { display: block; }

.title-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 700px at 78% 18%, rgba(232, 114, 44, .28), transparent 62%),
    radial-gradient(900px 620px at 12% 88%, rgba(91, 141, 239, .22), transparent 60%),
    linear-gradient(155deg, #0B1220 0%, #131C2E 45%, #080C14 100%);
}
.title-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

/* 飘落的柳絮 */
.title-petals {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.title-petals::before,
.title-petals::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF8EC, rgba(255,248,236,0));
  box-shadow:
     8vw  -6vh 0 -1px rgba(255,250,240,.55),
    22vw  12vh 0 -2px rgba(255,250,240,.35),
    36vw  -3vh 0 -1px rgba(255,250,240,.5),
    51vw  18vh 0 -3px rgba(255,250,240,.28),
    64vw   4vh 0 -1px rgba(255,250,240,.45),
    78vw  22vh 0 -2px rgba(255,250,240,.32),
    91vw  -8vh 0 -1px rgba(255,250,240,.5),
    17vw  34vh 0 -2px rgba(255,250,240,.3),
    44vw  42vh 0 -1px rgba(255,250,240,.4),
    70vw  48vh 0 -2px rgba(255,250,240,.26);
  animation: petalFall 26s linear infinite;
}
.title-petals::after { animation-duration: 38s; animation-delay: -12s; opacity: .6; }
@keyframes petalFall {
  0%   { transform: translateY(-20vh) translateX(0)     rotate(0deg); }
  100% { transform: translateY(115vh) translateX(6vw)   rotate(220deg); }
}

.title-inner {
  position: relative; z-index: 3;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.15fr);
  align-items: center;
  gap: 2vw;
  padding: 0 4vw;
}

.title-left { max-width: 620px; }

.title-kicker {
  margin: 0 0 14px;
  font-size: 13px; letter-spacing: .34em;
  color: rgba(245, 241, 232, .5);
}

.title-main {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(52px, 7.2vw, 104px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.05;
  background: linear-gradient(102deg, #FFF6E8 8%, #F0B27A 48%, #E8722C 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 26px rgba(232, 114, 44, .38));
}

.title-sub {
  margin: 8px 0 4px;
  font-size: 13px; letter-spacing: .3em;
  color: rgba(245, 241, 232, .42);
  text-transform: uppercase;
}

.title-tag {
  margin: 0 0 42px;
  font-family: var(--serif);
  font-size: 15px;
  color: rgba(245, 241, 232, .6);
  letter-spacing: .08em;
}

.title-menu { display: flex; flex-direction: column; gap: 11px; max-width: 400px; }

.tm-btn {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 22px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  color: var(--paper);
  font-size: 16px; letter-spacing: .18em;
  transition: all .22s cubic-bezier(.2, .8, .3, 1);
  backdrop-filter: blur(10px);
}
.tm-btn::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
  transition: height .22s ease;
}
.tm-btn:hover:not(:disabled) {
  background: rgba(232, 114, 44, .12);
  border-color: rgba(232, 114, 44, .5);
  transform: translateX(6px);
}
.tm-btn:hover:not(:disabled)::before { height: 62%; }
.tm-btn:disabled { opacity: .32; cursor: not-allowed; }
.tm-btn.primary {
  background: linear-gradient(100deg, rgba(232,114,44,.9), rgba(200,86,32,.9));
  border-color: rgba(255, 190, 140, .5);
  color: #20100A; font-weight: 700;
  box-shadow: 0 10px 30px rgba(232, 114, 44, .3);
}
.tm-btn.primary:hover { background: linear-gradient(100deg, #F58542, #D96527); }
.tm-note { font-size: 12px; letter-spacing: .06em; opacity: .6; }

/* 标题右侧三人立绘 */
.title-right { display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.title-cast {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0; height: 88%; width: 100%;
}
.title-char {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  transition: transform .4s cubic-bezier(.2,.8,.3,1);
}
.title-char:nth-child(1) { transform: translateY(3%) scale(.9);  z-index: 1; }
.title-char:nth-child(2) { transform: translateY(0)  scale(1.02); z-index: 3; }
.title-char:nth-child(3) { transform: translateY(4%) scale(.88);  z-index: 2; }
.title-char:nth-child(1):hover { transform: translateY(-1%) scale(.96); }
.title-char:nth-child(2):hover { transform: translateY(-3%) scale(1.07); }
.title-char:nth-child(3):hover { transform: translateY(0)  scale(.94); }

.title-char img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 20px 44px rgba(0, 0, 0, .6));
}
.title-char span {
  position: absolute; bottom: 2%;
  font-family: var(--serif);
  font-size: 15px; letter-spacing: .3em;
  color: var(--c);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(8px);
  transition: all .3s ease;
}
.title-char:hover span { opacity: 1; transform: translateY(0); }

.title-footer {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 4;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 4vw;
  font-size: 12px;
  color: rgba(245, 241, 232, .34);
  letter-spacing: .04em;
}
.title-footer b { color: rgba(245, 241, 232, .62); font-weight: 600; }
.dot { opacity: .4; }

/* ═══════════ 弹窗(图鉴 / 关于) ═══════════ */

.modal {
  position: absolute; inset: 0;
  z-index: 600;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(4, 6, 10, .82);
  backdrop-filter: blur(10px);
  padding: 4vh 4vw;
}
.modal.show { display: flex; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.modal-box {
  width: min(1040px, 100%);
  max-height: 86vh;
  overflow: auto;
  padding: 34px 38px;
  background: linear-gradient(165deg, #131A28, #0C111B);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.modal-box.narrow { width: min(700px, 100%); }
.modal-box h2 {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: 26px; letter-spacing: .1em;
}
.modal-box h2 small {
  margin-left: 12px;
  font-family: var(--ui-font);
  font-size: 13px; letter-spacing: .06em;
  color: var(--muted); font-weight: 400;
}
.modal-box h3 {
  margin: 22px 0 8px;
  font-size: 14px; letter-spacing: .16em;
  color: var(--accent);
}
.modal-close {
  margin-top: 26px;
  padding: 11px 34px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--paper);
  letter-spacing: .16em; font-size: 14px;
}
.modal-close:hover { background: rgba(232,114,44,.2); border-color: rgba(232,114,44,.5); }

.collect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
}
.collect-card {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  min-height: 96px;
}
.collect-card.got {
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.collect-card.locked { opacity: .4; }
.cc-rank { font-size: 11px; letter-spacing: .2em; color: var(--c); font-weight: 700; }
.collect-card.locked .cc-rank { color: var(--muted); }
.cc-title { margin-top: 8px; font-family: var(--serif); font-size: 18px; letter-spacing: .06em; }
.cc-who { margin-top: 4px; font-size: 12px; color: var(--muted); }

.about-body { font-size: 14px; line-height: 1.9; color: rgba(245,241,232,.82); }
.about-body p { margin: 0 0 10px; }
.about-body ul { margin: 0 0 6px; padding-left: 20px; }
.about-body li { margin-bottom: 5px; }
.about-body code {
  padding: 2px 7px;
  background: rgba(232,114,44,.14);
  border: 1px solid rgba(232,114,44,.28);
  border-radius: 5px;
  font-size: 12.5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: #F0B27A;
}
.about-warn { margin-top: 18px; font-size: 12.5px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════
   游戏画面
   ══════════════════════════════════════════════════════════════ */

#game-screen {
  position: absolute; inset: 0;
  display: none;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}
#game-screen.show { display: block; }
#game-screen.shake { animation: shakeIt .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shakeIt {
  10%, 90% { transform: translateX(calc(var(--shake, 4px) * -0.35)); }
  20%, 80% { transform: translateX(calc(var(--shake, 4px) *  0.7)); }
  30%, 50%, 70% { transform: translateX(calc(var(--shake, 4px) * -1)); }
  40%, 60% { transform: translateX(var(--shake, 4px)); }
}

#bg-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity .6s ease;
}

#bg-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg, rgba(0,0,0,.24) 0%, transparent 22%, transparent 52%, rgba(0,0,0,.62) 100%);
}

#bg-label {
  position: absolute; left: 26px; top: 22px;
  font-size: 12px; letter-spacing: .22em;
  color: rgba(255, 255, 255, .34);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
  pointer-events: none;
}

/* ═══════════ 立绘 ═══════════ */

#sprite-stage {
  position: absolute; inset: 0;
  pointer-events: none;
}

.sprite {
  position: absolute;
  bottom: 0;
  height: 96%;
  width: auto;
  aspect-ratio: 2 / 3;
  transform-origin: 50% 100%;
  transition:
    transform .55s cubic-bezier(.2, .8, .3, 1),
    opacity .45s ease,
    filter .45s ease;
  animation: breathe 5.2s ease-in-out infinite;
  will-change: transform;
}

@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(var(--s, 1)); }
  50%      { transform: translateY(-0.7%) scale(var(--s, 1)); }
}

/* 站位 */
.sprite[data-at="left"]   { left: 6%;  --s: .90; filter: saturate(.72) brightness(.7); opacity: .78; z-index: 2; }
.sprite[data-at="center"] { left: 50%; translate: -50% 0; --s: 1; z-index: 3; }
.sprite[data-at="right"]  { right: 6%; --s: .90; filter: saturate(.72) brightness(.7); opacity: .78; z-index: 2; }

.sprite.is-active { filter: saturate(1) brightness(1); opacity: 1; z-index: 4; --s: 1; }
.sprite[data-at="left"].is-active   { --s: .95; }
.sprite[data-at="right"].is-active  { --s: .95; }

/* 入场:用 CSS 动画而不是"先设 opacity:0 再靠 JS 移除类"。
   后者一旦 rAF/定时器被节流就会永久停在不可见状态(实测踩过)。 */
.sprite.sprite-enter { animation: spriteIn .5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes spriteIn {
  from { opacity: 0; transform: translateY(4%) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.sprite.sprite-exit  { opacity: 0; transform: translateY(3%) scale(.98); }

.sprite .sprite-svg {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .55));
}

.sprite-fallback {
  width: 320px; height: 480px;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed rgba(255,255,255,.3);
  border-radius: 20px;
  background: rgba(0,0,0,.3);
  font-size: 24px; color: #fff;
}

/* 头部倾斜 */
.sprite #head { transform-box: fill-box; transform-origin: 50% 82%; }
.sprite.tilt #head { transform: rotate(var(--tilt, 0deg)); transition: transform .45s cubic-bezier(.2,.8,.3,1); }

/* 说话口型 —— 只作用于嘴巴组(.mouth),不再对整张脸做压缩。
   transform-box: fill-box 让它绕自己嘴巴的中心缩放,而不是绕整张脸的底边。 */
.mouth {
  transform-box: fill-box;
  transform-origin: 50% 30%;
}
.mouth.talking { animation: mouthTalk .26s ease-in-out infinite; }
@keyframes mouthTalk {
  0%, 100% { transform: scaleY(1)    scaleX(1); }
  40%      { transform: scaleY(.55)  scaleX(1.06); }
  70%      { transform: scaleY(.82)  scaleX(1.02); }
}

/* 眨眼时被临时隐藏的眼睛 */
.eyes { transition: none; }

/* ═══════════ HUD ═══════════ */

#hud {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  z-index: 40;
  transition: opacity .3s ease;
}
#hud.dim { opacity: .16; pointer-events: none; }

#hud-affection { display: flex; gap: 14px; flex-wrap: wrap; }
.aff {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px;
  background: rgba(8, 12, 20, .58);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-size: 12.5px;
}
.aff b { color: var(--c); font-weight: 600; letter-spacing: .08em; }
.aff i { font-style: normal; color: var(--c); opacity: .85; letter-spacing: 1.5px; font-size: 11px; }

.hud-btns { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.hud-btns button {
  padding: 7px 15px;
  background: rgba(8, 12, 20, .6);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: rgba(245, 241, 232, .82);
  font-size: 12.5px; letter-spacing: .1em;
  backdrop-filter: blur(8px);
  transition: all .18s ease;
}
.hud-btns button:hover:not(:disabled) {
  background: rgba(232, 114, 44, .22);
  border-color: rgba(232, 114, 44, .55);
  color: #fff;
}
.hud-btns button.active { background: rgba(232, 114, 44, .82); color: #1A0F07; font-weight: 600; border-color: transparent; }
.hud-btns button:disabled { opacity: .35; cursor: default; }
.hud-btns .icon-btn { padding: 7px 11px; display: inline-flex; align-items: center; }

/* ═══════════ 对话框 ═══════════ */

#dialogue {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 5vw 4.2vh;
  z-index: 30;
  transition: opacity .3s ease, transform .3s ease;
}
#dialogue.hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }

.dbox {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  min-height: 172px;
  padding: 30px 42px 34px;
  background: linear-gradient(178deg, rgba(10, 14, 22, .93), rgba(8, 11, 18, .97));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.dbox::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: .9;
}
.dbox::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(600px 200px at 8% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}

.speaker {
  position: relative;
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .18em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .8);
  min-height: 26px;
}

.text {
  position: relative;
  font-size: clamp(15px, 1.42vw, 19px);
  line-height: 2.0;
  letter-spacing: .045em;
  color: rgba(245, 241, 232, .95);
  min-height: 3.9em;
  white-space: pre-wrap;
}

#dialogue.is-narration .text {
  font-family: var(--serif);
  color: rgba(238, 232, 220, .88);
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: .07em;
}
#dialogue.is-narration .speaker { display: none; }
#dialogue.is-narration .dbox::before { background: linear-gradient(180deg, #6E7A8C, transparent); }

.next-indicator {
  position: absolute; right: 26px; bottom: 16px;
  font-size: 13px;
  color: var(--accent);
  animation: bob 1.25s ease-in-out infinite;
  opacity: .85;
}
@keyframes bob {
  0%, 100% { transform: translateY(0);   opacity: .35; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* ═══════════ 选项 ═══════════ */

#choice-overlay {
  position: absolute; inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 30px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.78));
  backdrop-filter: blur(6px);
  padding: 6vh 6vw;
}
#choice-overlay.show { display: flex; animation: fadeIn .3s ease; }

.choice-prompt {
  max-width: 900px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: .1em;
  line-height: 1.7;
  color: rgba(245, 241, 232, .92);
  text-shadow: 0 4px 24px rgba(0,0,0,.9);
  white-space: pre-wrap;
}

.choice-list {
  display: flex; flex-direction: column; gap: 13px;
  width: min(880px, 100%);
}

.choice-btn {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 19px 26px;
  text-align: left;
  background: linear-gradient(100deg, rgba(18, 24, 36, .9), rgba(12, 16, 26, .9));
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  color: var(--paper);
  font-size: clamp(14.5px, 1.32vw, 17px);
  letter-spacing: .04em;
  backdrop-filter: blur(12px);
  animation: choiceIn .42s cubic-bezier(.2,.8,.3,1) backwards;
  transition: all .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes choiceIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.choice-btn:hover {
  background: linear-gradient(100deg, rgba(232, 114, 44, .26), rgba(232, 114, 44, .1));
  border-color: rgba(232, 114, 44, .62);
  transform: translateY(-2px) scale(1.012);
  box-shadow: 0 14px 34px rgba(232, 114, 44, .22);
}

.choice-idx {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px; font-weight: 700;
  color: rgba(245, 241, 232, .7);
  transition: all .2s ease;
}
.choice-btn:hover .choice-idx {
  background: var(--accent); color: #1A0F07; border-color: transparent;
}
.choice-hint {
  font-size: 12px; letter-spacing: .14em;
  color: rgba(245, 241, 232, .48);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  white-space: nowrap;
}
.choice-btn:hover .choice-hint { color: #fff; border-color: rgba(232,114,44,.5); }

/* 路线级选项(重大抉择)更醒目 */
#choice-list[data-tier="route"] .choice-btn {
  padding: 24px 28px;
  border-color: rgba(232, 114, 44, .34);
  background: linear-gradient(100deg, rgba(24, 20, 30, .95), rgba(14, 14, 24, .95));
}
#choice-list[data-tier="route"] .choice-btn::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent);
  border-radius: 14px 0 0 14px;
}

/* ═══════════ 侧栏:回想 / 菜单 ═══════════ */

.side-panel {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(480px, 88vw);
  z-index: 80;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(11, 15, 24, .97), rgba(8, 11, 18, .99));
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
  transform: translateX(-102%);
  transition: transform .34s cubic-bezier(.2,.8,.3,1);
  box-shadow: 24px 0 60px rgba(0,0,0,.5);
}
.side-panel.right { left: auto; right: 0; border-right: none; border-left: 1px solid var(--line); transform: translateX(102%); }
.side-panel.show { transform: translateX(0); }

.side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.side-head h3 { margin: 0; font-family: var(--serif); font-size: 19px; letter-spacing: .2em; }
.side-head button {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--paper); font-size: 18px; line-height: 1;
}
.side-head button:hover { background: rgba(232,114,44,.25); }

.log-body { flex: 1; overflow-y: auto; padding: 18px 22px 40px; }
.log-line {
  padding: 11px 0;
  border-bottom: 1px dashed rgba(255,255,255,.07);
  font-size: 14px; line-height: 1.75;
}
.log-line b { display: block; margin-bottom: 4px; font-family: var(--serif); font-size: 14px; letter-spacing: .12em; }
.log-line.narr { font-family: var(--serif); color: rgba(238,232,220,.72); font-size: 13.5px; }
.log-line span { color: rgba(245,241,232,.82); }
.log-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 40px 0; }

.menu-body { flex: 1; overflow-y: auto; padding: 20px 22px 40px; display: flex; flex-direction: column; gap: 10px; }
.mbtn {
  padding: 14px 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--paper);
  font-size: 14.5px; letter-spacing: .14em;
  text-align: left;
  transition: all .18s ease;
}
.mbtn:hover { background: rgba(232,114,44,.2); border-color: rgba(232,114,44,.5); transform: translateX(4px); }

.set-group { margin-top: 16px; }
.set-group h4 {
  margin: 0 0 9px;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .16em;
  color: var(--muted);
}
.set-group input[type="range"] {
  width: 100%; height: 4px;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  outline: none;
}
.set-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(232,114,44,.2);
  cursor: pointer;
}
.set-val { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.set-group.row { display: flex; gap: 20px; margin-top: 20px; }
.set-group.row label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: rgba(245,241,232,.8); cursor: pointer; }
.set-group.row input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }

/* ══════════════════════════════════════════════════════════════
   结局画面
   ══════════════════════════════════════════════════════════════ */

#ending-overlay {
  position: absolute; inset: 0;
  z-index: 700;
  display: none;
  align-items: center; justify-content: center;
  background: radial-gradient(70% 70% at 50% 40%, rgba(10,14,24,.9), rgba(3,5,9,.98));
  backdrop-filter: blur(14px);
  padding: 6vh 5vw;
}
#ending-overlay.show { display: flex; animation: fadeIn .8s ease; }

.ending-card {
  width: min(680px, 100%);
  padding: 46px 48px;
  text-align: center;
  background: linear-gradient(170deg, rgba(19, 26, 40, .95), rgba(9, 13, 21, .98));
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  animation: endingIn .9s cubic-bezier(.2,.8,.3,1);
}
@keyframes endingIn {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ending-rank {
  display: inline-block;
  padding: 5px 18px;
  border-radius: 999px;
  font-size: 11.5px; letter-spacing: .34em; font-weight: 700;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  color: var(--muted);
}
.ending-title {
  margin: 20px 0 10px;
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: .1em;
  background: linear-gradient(100deg, #FFF6E8, #F0B27A);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ending-who-row { font-size: 13px; letter-spacing: .2em; color: var(--muted); margin-bottom: 26px; }
.ending-text {
  font-family: var(--serif);
  font-size: 16px; line-height: 2.15;
  letter-spacing: .06em;
  color: rgba(245, 241, 232, .88);
  white-space: pre-wrap;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 0 22px;
}
.ending-progress-row { font-size: 12.5px; letter-spacing: .14em; color: var(--muted); margin-bottom: 26px; }
.ending-progress-row b { color: var(--accent); font-size: 15px; }

.ending-btns { display: flex; gap: 12px; justify-content: center; }
.ebtn {
  padding: 13px 32px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--paper);
  font-size: 14.5px; letter-spacing: .16em;
  transition: all .2s ease;
}
.ebtn:hover { background: rgba(232,114,44,.22); border-color: rgba(232,114,44,.55); }
.ebtn.primary {
  background: linear-gradient(100deg, #E8722C, #C85620);
  border-color: transparent; color: #1A0F07; font-weight: 700;
  box-shadow: 0 10px 28px rgba(232,114,44,.28);
}
.ebtn.primary:hover { background: linear-gradient(100deg, #F58542, #D96527); }

/* ═══════════ 滚动条 ═══════════ */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(232,114,44,.45); }

/* ═══════════ 响应式 ═══════════ */
@media (max-width: 980px) {
  .title-inner { grid-template-columns: 1fr; align-content: center; gap: 0; padding-top: 4vh; }
  .title-right { display: none; }
  .title-tag { margin-bottom: 28px; }
  .sprite { height: 78%; }
  .sprite[data-at="left"]  { left: -2%; }
  .sprite[data-at="right"] { right: -2%; }
  .dbox { padding: 22px 24px 28px; min-height: 148px; }
  .text { line-height: 1.85; }
  #dialogue { padding: 0 3vw 3vh; }
}
@media (max-width: 620px) {
  .hud-btns button { padding: 6px 10px; font-size: 11.5px; }
  #hud-affection .aff { padding: 4px 9px; font-size: 11px; }
  .choice-btn { grid-template-columns: 32px 1fr; padding: 15px 18px; }
  .choice-hint { grid-column: 2; justify-self: start; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .sprite { animation: none; }
  .title-petals::before, .title-petals::after { animation: none; opacity: .3; }
  .next-indicator { animation: none; }
}


/* ═══════════ 位图立绘(AI 生成那套) ═══════════ */
.png-sprite {
  position: relative;
  width: 100%; height: 100%;
  /* AI 位图的头部占比比手绘 SVG 大,96% 的画布高度会把头顶裁掉 */
  --pngScale: .84;
  scale: var(--pngScale);
  animation: pngBreathe 5.4s ease-in-out infinite;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .55));
}
.png-sprite > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  transition: opacity .28s ease;
  will-change: opacity;
}
.png-sprite > img.png-base { position: relative; }

@keyframes pngBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-0.5%) scale(1.006); }
}

/* 位图版的眨眼:极短地压一下纵向,看起来就是眯了一下 */
.png-sprite.blink-png { animation: pngBlink .1s ease-in-out; }
@keyframes pngBlink {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.965) translateY(.4%); }
}

/* 位图版的说话:很轻的呼吸式缩放,不要夸张 */
.png-sprite.talking-png { animation: pngTalk .5s ease-in-out infinite; }
@keyframes pngTalk {
  0%, 100% { transform: translateY(0)   scale(1); }
  50%      { transform: translateY(.35%) scale(1.008); }
}


/* ═══════════ 启动指示层 ═══════════ */
#boot-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 60% at 50% 40%, #131c2e, #070a11);
  transition: opacity .35s ease;
}
#boot-overlay.gone { opacity: 0; pointer-events: none; }
.boot-box { text-align: center; max-width: min(560px, 86vw); padding: 0 20px; }
.boot-title {
  font-family: var(--serif); font-size: clamp(26px, 4.4vw, 42px);
  letter-spacing: .16em; color: #F0B27A; margin-bottom: 18px;
}
.boot-msg { font-size: 15px; letter-spacing: .12em; color: rgba(245,241,232,.8); }
.boot-hint { margin-top: 12px; font-size: 12.5px; line-height: 1.8; color: rgba(245,241,232,.42); }
#boot-overlay.failed .boot-msg { color: #FF8A73; }
#boot-overlay.failed .boot-hint { color: rgba(245,241,232,.72); }
.boot-msg::after {
  content: ''; display: inline-block; width: 1em; text-align: left;
  animation: bootDots 1.4s steps(4, end) infinite;
}
@keyframes bootDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
#boot-overlay.failed .boot-msg::after { content: ''; animation: none; }


/* 眨眼层里的肤色补丁:边缘羽化,避免出现"方块"。
   立绘的脸有渐变,任何硬边矩形都会露馅,所以用 mask 把四边揉开。 */
.sprite-svg .skin-fill {
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 55%, transparent 100%);
}


/* ═══════════ 剧情选择 / 存档槽 / 账号 ═══════════ */
/* 这三块是"多故事线 + 账号"那次改动加的,样式沿用标题页的暗色玻璃质感 */

.modal-box.wide { width: min(1180px, 100%); }

/* ── 剧情卡片 ── */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  gap: 16px;
}
.story-card {
  display: flex; flex-direction: column;
  padding: 18px 18px 16px;
  background: linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--line);
  border-left: 3px solid var(--c);
  border-radius: 14px;
  transition: transform .25s cubic-bezier(.2,.8,.3,1), border-color .25s, background .25s;
}
.story-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 10%, transparent), rgba(255,255,255,.015));
}
.story-card.lesson { border-left-style: double; border-left-width: 5px; }
.sc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sc-kind {
  font-size: 11px; letter-spacing: .16em; padding: 3px 9px; border-radius: 999px;
  color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.sc-min { font-size: 11px; color: var(--dim); letter-spacing: .06em; }
.sc-title { margin: 0 0 4px; font-family: var(--serif); font-size: 21px; letter-spacing: .04em; color: #EAF0FA; }
.sc-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--c); letter-spacing: .05em; }
.sc-blurb { margin: 0 0 12px; font-size: 12.5px; line-height: 1.75; color: var(--dim); }
.sc-know { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.sc-know span {
  font-size: 10.5px; padding: 2px 7px; border-radius: 5px;
  color: #B9C6DA; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06);
}
.sc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sc-tags em {
  font-style: normal; font-size: 10.5px; color: #8FA0B8;
  padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.035);
}
.sc-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: var(--dim); padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.055); margin-bottom: 12px;
}
.sc-prog { color: #C6D3E6; }
.sc-has { color: #7FD6A0; }
.sc-none { color: #64748B; }
.sc-actions { display: flex; gap: 8px; margin-top: auto; }
.scbtn {
  flex: 1; padding: 9px 14px; cursor: pointer;
  font-family: inherit; font-size: 13px; letter-spacing: .08em;
  color: #D6E0EE; background: rgba(255,255,255,.055);
  border: 1px solid var(--line); border-radius: 9px;
  transition: all .2s ease;
}
.scbtn:hover { background: rgba(255,255,255,.11); color: #fff; }
.scbtn.primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 65%, #101722));
}
.scbtn.primary:hover { filter: brightness(1.12); }
.scbtn.danger { color: #F09A9A; border-color: rgba(240,120,120,.3); }
.scbtn.danger:hover { background: rgba(240,120,120,.14); }

/* ── 存档槽 ── */
.load-body { display: flex; flex-direction: column; gap: 18px; }
.load-hint { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.7; }
.load-group { border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px 16px; }
.lg-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;
  padding-left: 10px; border-left: 3px solid var(--c);
}
.lg-head b { font-family: var(--serif); font-size: 15.5px; color: #E7EEF9; letter-spacing: .05em; }
.lg-head span { font-size: 11px; color: var(--dim); letter-spacing: .12em; }
.lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.slot {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 11px 13px; cursor: pointer; position: relative;
  font-family: inherit; color: inherit;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line); border-radius: 10px;
  transition: all .2s ease;
}
.slot:disabled { cursor: default; opacity: .45; }
.slot.filled:not(:disabled):hover {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border-color: color-mix(in srgb, var(--c) 50%, transparent);
  transform: translateY(-1px);
}
.slot.no { font-size: 10.5px; letter-spacing: .12em; color: var(--c); }
.slot-no { font-size: 10.5px; letter-spacing: .12em; color: var(--c); }
.slot.auto .slot-no { color: #C9A227; }
.slot-ch { font-size: 12.5px; color: #DCE5F2; }
.slot-prev {
  font-size: 11.5px; color: var(--dim); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-at { font-size: 10.5px; color: #5F6E82; }
.slot-empty-t { font-size: 12px; color: #566274; padding: 6px 0; }
.slot-act {
  position: absolute; right: 11px; top: 10px;
  font-size: 10.5px; color: var(--c); opacity: 0; transition: opacity .2s;
}
.slot.writable:hover .slot-act { opacity: 1; }
.load-sync {
  display: flex; align-items: center; gap: 12px; padding-top: 4px;
  font-size: 12px; color: var(--dim);
}
.load-sync .scbtn { flex: 0 0 auto; }

/* ── 账号面板 ── */
.account-body { display: flex; flex-direction: column; gap: 18px; font-size: 13px; }
.ac-warn {
  padding: 13px 15px; border-radius: 11px;
  background: rgba(240,170,60,.09); border: 1px solid rgba(240,170,60,.3);
}
.ac-warn b { display: block; margin-bottom: 6px; color: #F5C46A; font-size: 13px; }
.ac-warn p { margin: 0; font-size: 12px; line-height: 1.75; color: #D9C79E; }
.ac-warn b + p b { display: inline; color: #F5C46A; }
.ac-server {
  font-size: 12px; color: var(--dim);
  padding: 7px 12px; border-radius: 8px; background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
.ac-server.ok b { color: #6FD79B; }
.ac-server.bad b { color: #F09A9A; }
.ac-list h4, .ac-form h4, .ac-sync h4 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; color: var(--dim); font-weight: 500;
}
.ac-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px; margin-bottom: 7px;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
}
.ac-item.cur { border-color: rgba(120,200,150,.4); background: rgba(120,200,150,.07); }
.ac-name { flex: 1; color: #E3EBF6; font-size: 13.5px; }
.ac-at { font-size: 11px; color: #5F6E82; }
.ac-tag {
  font-size: 10.5px; color: #6FD79B; padding: 2px 8px;
  border: 1px solid rgba(120,200,150,.4); border-radius: 999px;
}
.acbtn {
  padding: 4px 11px; cursor: pointer; font-family: inherit; font-size: 11.5px;
  color: #C6D3E6; background: rgba(255,255,255,.06);
  border: 1px solid var(--line); border-radius: 7px; transition: all .2s;
}
.acbtn:hover { background: rgba(255,255,255,.13); color: #fff; }
.acbtn.danger { color: #E89090; border-color: rgba(230,130,130,.28); }
.acbtn.danger:hover { background: rgba(230,130,130,.14); }
.ac-form { display: flex; flex-direction: column; gap: 9px; }
.ac-form input {
  padding: 10px 13px; font-family: inherit; font-size: 13px;
  color: #E6EDF7; background: rgba(255,255,255,.045);
  border: 1px solid var(--line); border-radius: 9px; outline: none;
  transition: border-color .2s, background .2s;
}
.ac-form input:focus {
  border-color: rgba(140,170,220,.55); background: rgba(255,255,255,.075);
}
.ac-btns { display: flex; gap: 8px; }
.ac-btns .scbtn { flex: 0 1 auto; }
.ac-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--dim); min-height: 1.2em; }
.ac-note.ok { color: #6FD79B; }
.ac-note.bad { color: #F09A9A; }
.ac-sync { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ac-sync .ac-note { flex: 1 1 100%; }

/* ── 图鉴分组 ── */
.collect-group { margin-bottom: 26px; }
.cg-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; padding-left: 11px; border-left: 3px solid var(--c);
}
.cg-head b { font-family: var(--serif); font-size: 16px; color: #E9F0FA; letter-spacing: .05em; }
.cg-head span { font-size: 11.5px; color: var(--dim); }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; }

/* ── 回想的可重播条目 ── */
.log-line.has-voice { cursor: pointer; }
.log-line.has-voice:hover { background: rgba(255,255,255,.05); }
.log-voice {
  margin-left: 6px; font-style: normal; font-size: 10px;
  color: var(--accent, #7FA6D8); opacity: .5;
}
.log-line.has-voice:hover .log-voice { opacity: 1; }

/* ── 游戏内菜单的账号条目 ── */
.mbtn .mnote {
  float: right; font-size: 11px; color: var(--dim); letter-spacing: .06em;
}

@media (max-width: 720px) {
  .story-grid { grid-template-columns: 1fr; }
  .lg-grid { grid-template-columns: 1fr 1fr; }
  .collect-group .cg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}


/* ══════════════════════════════════════════════════════════════════════
   Apple 风格设计系统(覆盖层)
   ──────────────────────────────────────────────────────────────────────
   为什么做成"末尾覆盖层"而不是逐条改原规则:
     整站的深色暖橙基调散在 1100 多行里,零散替换必然新旧混杂。
     收成一层设计系统,风格来源单一,不满意整体删掉即可回退。

   取法 Apple 的六件事:
     1. 字体      优先 SF Pro / -apple-system,中文走苹方 —— 系统字体本身就是 Apple 味
     2. 材质      毛玻璃(backdrop-filter: blur + saturate),层级靠"材料"而不是描边
     3. 形状      连续圆角:iOS 卡片 18-20px、控件 10-12px、胶囊 999px
     4. 深度      阴影极浅且大扩散(Apple 的浮层几乎不靠投影,靠材料差)
     5. 颜色      中性灰做底,彩色只用于强调;强调色取 systemBlue(#0A84FF)
     6. 动效      短时长 + ease-out,微位移,按压缩放 0.97
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 字体:系统字体栈。中文优先苹方,西文优先 SF Pro ── */
  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --sf-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                "PingFang SC", system-ui, sans-serif;
  --sf-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* 标题不再用宋体 —— 那是最"非 Apple"的一处 */
  --serif: var(--sf-display);

  /* ── 系统色 ── */
  --sys-blue:   #0A84FF;
  --sys-green:  #30D158;
  --sys-orange: #FF9F0A;
  --sys-red:    #FF453A;
  --sys-yellow: #FFD60A;
  --sys-purple: #BF5AF2;
  --sys-teal:   #64D2FF;
  --sys-gray:   #8E8E93;

  /* ── 材质与文字(深色外观下的 Apple 语义色) ── */
  --label:        rgba(255, 255, 255, .96);
  --label-2:      rgba(235, 235, 245, .62);
  --label-3:      rgba(235, 235, 245, .34);
  --label-4:      rgba(235, 235, 245, .20);
  --fill-1:       rgba(120, 120, 128, .22);
  --fill-2:       rgba(120, 120, 128, .16);
  --fill-3:       rgba(120, 120, 128, .11);
  --separator:    rgba(84, 84, 88, .55);
  --material:     rgba(28, 28, 32, .72);
  --material-2:   rgba(44, 44, 50, .62);

  /* ── 形状与深度 ── */
  --r-card:  20px;
  --r-ctrl:  12px;
  --r-small: 9px;
  --radius:  var(--r-card);
  --shadow:      0 24px 70px rgba(0, 0, 0, .52);
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, .30);
  --line:        var(--separator);
  --muted:       var(--label-2);
  --paper:       var(--label);

  /* ── 动效:Apple 的曲线偏 ease-out,短且克制 ── */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur:  .34s;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ui-font);
  font-feature-settings: "tnum" 1, "cv01" 1;
  letter-spacing: -.006em;
}

/* 焦点环:Apple 用系统色细环,不用橙色粗框 */
button:focus-visible,
.ac-form input:focus-visible {
  outline: 2px solid var(--sys-blue);
  outline-offset: 2px;
  border-radius: var(--r-ctrl);
}

/* ── 毛玻璃工具类 ── */
/* 注意:.dbox 不在毛玻璃名单里。
   对话框背后就是立绘,backdrop-filter 会把立绘一起采样并放大饱和度,
   在框外形成一条可见的灰色矩形带(实测)。深色场景上对话框用不透明底即可。 */
.modal-box, .side-panel, .toast, #hud, .boot-box {
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}

/* ══════════ 弹层 ══════════ */
.modal { background: rgba(0, 0, 0, .52); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal.show { animation: appleFade .28s var(--ease); }
@keyframes appleFade { from { opacity: 0 } to { opacity: 1 } }

.modal-box {
  padding: 32px 34px 28px;
  background: var(--material);
  border: .5px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  box-shadow: var(--shadow);
  animation: appleSheet .42s var(--ease);
}
/* 弹出层从下方轻微上浮 —— iOS 的 sheet 手感 */
@keyframes appleSheet {
  from { opacity: 0; transform: translateY(14px) scale(.985) }
  to   { opacity: 1; transform: none }
}
.modal-box h2 {
  font-family: var(--sf-display);
  font-size: 24px; font-weight: 600; letter-spacing: -.022em;
  margin: 0 0 6px;
}
.modal-box h2 small {
  display: block; margin-top: 5px;
  font-size: 13px; font-weight: 400; letter-spacing: 0;
  color: var(--label-2);
}
.modal-close {
  margin-top: 22px;
  padding: 11px 26px; font-size: 15px; font-weight: 500;
  color: var(--label); background: var(--fill-2);
  border: none; border-radius: var(--r-ctrl);
  transition: background var(--dur) var(--ease), transform .12s var(--ease);
}
.modal-close:hover { background: var(--fill-1); }
.modal-close:active { transform: scale(.97); }

/* ══════════ 标题页 ══════════ */
.title-main {
  font-family: var(--sf-display);
  font-weight: 700;
  letter-spacing: -.03em;
  /* Apple 的大标题是紧字距、重字重,不用宋体的衬线对比 */
  text-shadow: none;
}
.title-sub, .title-kicker, .title-tag { letter-spacing: .01em; }
.title-kicker { color: var(--label-2); font-weight: 500; font-size: 12.5px; }
.title-tag { color: var(--label-2); }
.title-footer { color: var(--label-3); border-top: .5px solid var(--separator); }
.title-footer b { color: var(--label-2); font-weight: 600; }

/* 侧栏菜单按钮 —— iOS 列表行的观感 */
.tm-btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  font-size: 15.5px; font-weight: 500; letter-spacing: 0;
  color: var(--label);
  background: var(--fill-3);
  border: .5px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  transition: background var(--dur) var(--ease), transform .12s var(--ease),
              border-color var(--dur) var(--ease);
}
.tm-btn:hover { background: var(--fill-2); border-color: rgba(255, 255, 255, .14); }
.tm-btn:active { transform: scale(.985); }
.tm-btn.primary {
  color: #fff;
  background: var(--sys-blue);
  border-color: transparent;
  box-shadow: 0 6px 22px rgba(10, 132, 255, .34);
}
.tm-btn.primary:hover { background: #0A7BEC; }
.tm-note {
  font-size: 12.5px; font-weight: 400; letter-spacing: 0;
  color: var(--label-2);
}
.tm-btn.primary .tm-note { color: rgba(255, 255, 255, .78); }
.tm-btn[disabled] { opacity: .4; }
.tm-btn[disabled]:hover { background: var(--fill-3); }

/* ══════════ 剧情卡片 ══════════ */
.story-grid { gap: 14px; }
.story-card {
  padding: 20px 20px 18px;
  background: var(--fill-3);
  border: .5px solid rgba(255, 255, 255, .08);
  border-left: .5px solid rgba(255, 255, 255, .08);   /* 去掉原来的彩色左边条 */
  border-radius: var(--r-card);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.story-card:hover {
  transform: translateY(-2px);
  background: var(--fill-2);
  box-shadow: var(--shadow-soft);
  border-color: rgba(255, 255, 255, .14);
}
.story-card.lesson { border-left: .5px solid rgba(255, 255, 255, .08); }
.sc-kind {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px;
  color: var(--c); border: none;
  background: color-mix(in srgb, var(--c) 20%, transparent);
}
.sc-min { font-size: 12px; color: var(--label-2); letter-spacing: 0; }
.sc-title {
  font-family: var(--sf-display);
  font-size: 19px; font-weight: 620; letter-spacing: -.02em;
  color: var(--label);
}
.sc-sub { font-size: 13px; font-weight: 500; color: var(--c); letter-spacing: 0; }
.sc-blurb { font-size: 13px; line-height: 1.66; color: var(--label-2); }
.sc-know span, .sc-tags em {
  font-size: 11px; letter-spacing: 0;
  padding: 3px 9px; border-radius: 999px;
  color: var(--label-2); background: var(--fill-3);
  border: none;
}
.sc-foot { font-size: 12px; color: var(--label-3); border-top: .5px solid var(--separator); }
.sc-prog { color: var(--label-2); }
.sc-has { color: var(--sys-green); }
.sc-none { color: var(--label-3); }

.scbtn {
  padding: 10px 18px; font-size: 14px; font-weight: 500; letter-spacing: 0;
  color: var(--label); background: var(--fill-2);
  border: none; border-radius: var(--r-ctrl);
  transition: background var(--dur) var(--ease), transform .12s var(--ease);
}
.scbtn:hover { background: var(--fill-1); color: #fff; }
.scbtn:active { transform: scale(.97); }
.scbtn.primary {
  color: #fff; background: var(--sys-blue);
  box-shadow: 0 4px 16px rgba(10, 132, 255, .30);
}
.scbtn.primary:hover { background: #0A7BEC; filter: none; }
.scbtn.danger { color: var(--sys-red); background: color-mix(in srgb, var(--sys-red) 16%, transparent); }
.scbtn.danger:hover { background: color-mix(in srgb, var(--sys-red) 26%, transparent); }

/* ══════════ 存档槽 ══════════ */
.load-group { border: .5px solid rgba(255, 255, 255, .08); border-radius: var(--r-card); background: var(--fill-3); }
.lg-head { border-left: none; padding-left: 0; }
.lg-head b { font-family: var(--sf-display); font-size: 16px; font-weight: 620; letter-spacing: -.015em; }
.lg-head span { font-size: 12px; color: var(--label-2); letter-spacing: 0; }
.slot {
  padding: 13px 15px; border-radius: 14px;
  background: var(--fill-3);
  border: .5px solid rgba(255, 255, 255, .07);
  transition: background var(--dur) var(--ease), transform .12s var(--ease), border-color var(--dur) var(--ease);
}
.slot.filled:not(:disabled):hover {
  background: var(--fill-2); border-color: rgba(255, 255, 255, .16);
  transform: translateY(-1px);
}
.slot:active:not(:disabled) { transform: scale(.985); }
.slot-no { font-size: 11px; font-weight: 600; color: var(--c); letter-spacing: 0; }
.slot.auto .slot-no { color: var(--sys-yellow); }
.slot-ch { font-size: 13.5px; font-weight: 500; color: var(--label); }
.slot-prev { font-size: 12px; color: var(--label-2); }
.slot-at { font-size: 11px; color: var(--label-3); }
.slot-empty-t { font-size: 13px; color: var(--label-3); }
.slot-act { font-size: 11px; color: var(--sys-blue); font-weight: 500; }

/* ══════════ 账号面板 ══════════ */
.account-body { font-size: 14px; gap: 20px; }
.ac-warn {
  padding: 15px 17px; border-radius: 16px;
  background: color-mix(in srgb, var(--sys-orange) 14%, transparent);
  border: .5px solid color-mix(in srgb, var(--sys-orange) 34%, transparent);
}
.ac-warn b { color: var(--sys-orange); font-size: 14px; font-weight: 620; letter-spacing: -.01em; }
.ac-warn p { font-size: 12.5px; line-height: 1.66; color: color-mix(in srgb, var(--sys-orange) 62%, #fff); }
.ac-warn b + p b { color: var(--sys-orange); }
.ac-server { font-size: 12.5px; background: var(--fill-3); border: none; border-radius: 10px; padding: 9px 13px; }
.ac-server.ok b { color: var(--sys-green); }
.ac-server.bad b { color: var(--sys-red); }
.ac-list h4, .ac-form h4, .ac-sync h4 {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--label-2);
}
.ac-item {
  padding: 11px 14px; border-radius: 13px; margin-bottom: 8px;
  background: var(--fill-3); border: none;
}
.ac-item.cur { background: color-mix(in srgb, var(--sys-green) 14%, transparent); border: none; }
.ac-name { font-size: 14.5px; font-weight: 500; color: var(--label); }
.ac-at { font-size: 11.5px; color: var(--label-3); }
.ac-tag {
  font-size: 11px; font-weight: 600; color: var(--sys-green);
  background: color-mix(in srgb, var(--sys-green) 18%, transparent);
  border: none; padding: 3px 10px;
}
.acbtn {
  padding: 6px 13px; font-size: 12.5px; font-weight: 500;
  color: var(--label); background: var(--fill-2);
  border: none; border-radius: 999px;
  transition: background var(--dur) var(--ease), transform .12s var(--ease);
}
.acbtn:hover { background: var(--fill-1); color: #fff; }
.acbtn:active { transform: scale(.96); }
.acbtn.danger { color: var(--sys-red); background: color-mix(in srgb, var(--sys-red) 15%, transparent); }
.acbtn.danger:hover { background: color-mix(in srgb, var(--sys-red) 24%, transparent); }
.ac-form input {
  padding: 13px 16px; font-size: 15px; border-radius: 13px;
  color: var(--label); background: var(--fill-3);
  border: .5px solid rgba(255, 255, 255, .08);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ac-form input::placeholder { color: var(--label-3); }
.ac-form input:focus {
  background: var(--fill-2);
  border-color: color-mix(in srgb, var(--sys-blue) 60%, transparent);
}
.ac-note { font-size: 12.5px; color: var(--label-2); }
.ac-note.ok { color: var(--sys-green); }
.ac-note.bad { color: var(--sys-red); }

/* ══════════ 结局图鉴 ══════════ */
.cg-head { border-left: none; padding-left: 0; }
.cg-head b { font-family: var(--sf-display); font-size: 17px; font-weight: 620; letter-spacing: -.018em; }
.cg-head span { font-size: 12px; color: var(--label-2); }
.collect-card {
  border-radius: 16px;
  background: var(--fill-3);
  border: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.collect-card:hover { transform: translateY(-2px); background: var(--fill-2); }
.cc-rank { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.cc-title { font-weight: 600; letter-spacing: -.01em; }
.cc-who { font-size: 11.5px; color: var(--label-2); }

/* ══════════ 游戏内 HUD ══════════ */
#hud { gap: 8px; }
#hud button {
  padding: 8px 15px; font-size: 13px; font-weight: 500; letter-spacing: 0;
  color: var(--label); background: var(--fill-3);
  border: .5px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  transition: background var(--dur) var(--ease), transform .12s var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
#hud button:hover { background: var(--fill-2); border-color: rgba(255, 255, 255, .18); }
#hud button:active { transform: scale(.96); }
#hud button.active {
  color: #fff; background: var(--sys-blue); border-color: transparent;
  box-shadow: 0 3px 14px rgba(10, 132, 255, .34);
}
.aff { font-size: 12.5px; font-weight: 500; }

/* ══════════ 对话框 ══════════ */
.dbox {
  border-radius: 22px;
  /* 不带 backdrop-filter —— 原因见上方注释 */
  background: rgba(20, 20, 24, .90);
  border: .5px solid rgba(255, 255, 255, .10);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .44);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.speaker {
  font-family: var(--sf-display);
  font-size: 16px; font-weight: 620; letter-spacing: -.012em;
  margin-bottom: 10px;
}
.text {
  font-size: 17px; font-weight: 400; line-height: 1.82;
  letter-spacing: .004em;
  color: rgba(255, 255, 255, .94);
}
.dbox.is-narration .text { color: var(--label-2); font-style: normal; }
.next-indicator { color: var(--sys-blue); }

/* ══════════ 选项按钮 ══════════ */
.choice-prompt {
  font-size: 15px; font-weight: 500; color: var(--label-2);
  letter-spacing: 0;
}
.choice-btn {
  padding: 17px 22px;
  border-radius: 16px;
  background: var(--material-2);
  border: .5px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--shadow-soft);
  transition: background var(--dur) var(--ease), transform .14s var(--ease),
              border-color var(--dur) var(--ease);
  animation: appleChoice .34s var(--ease) both;
}
@keyframes appleChoice {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: none }
}
.choice-btn:hover {
  background: rgba(70, 70, 78, .74);
  border-color: color-mix(in srgb, var(--sys-blue) 50%, transparent);
  transform: translateY(-1px);
}
.choice-btn:active { transform: scale(.985); }
.choice-idx {
  font-size: 12px; font-weight: 600; color: var(--sys-blue);
  background: color-mix(in srgb, var(--sys-blue) 20%, transparent);
  border: none; border-radius: 999px;
}
.choice-text { font-size: 15.5px; font-weight: 500; letter-spacing: -.008em; }
.choice-hint { font-size: 12.5px; color: var(--label-2); font-style: normal; }

/* ══════════ 侧栏(回想 / 菜单) ══════════ */
.side-panel {
  background: var(--material);
  border: none;
  border-left: .5px solid rgba(255, 255, 255, .10);
  box-shadow: -20px 0 60px rgba(0, 0, 0, .42);
}
.side-head h3 {
  font-family: var(--sf-display);
  font-size: 20px; font-weight: 650; letter-spacing: -.02em;
}
.side-head button {
  border-radius: 999px; background: var(--fill-2); border: none;
  width: 30px; height: 30px;
  transition: background var(--dur) var(--ease), transform .12s var(--ease);
}
.side-head button:hover { background: var(--fill-1); }
.side-head button:active { transform: scale(.94); }
.mbtn {
  padding: 13px 16px; font-size: 14.5px; font-weight: 500;
  border-radius: 13px; background: var(--fill-3);
  border: none;
  transition: background var(--dur) var(--ease), transform .12s var(--ease);
}
.mbtn:hover { background: var(--fill-2); }
.mbtn:active { transform: scale(.985); }
.set-group h4 { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--label-2); }
.set-val { font-size: 12.5px; color: var(--label-2); font-variant-numeric: tabular-nums; }
/* 滑杆做成 iOS 的样子 */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 999px;
  background: var(--fill-1);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(0, 0, 0, .06);
  transition: transform .12s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.12); }

/* 回想条目 */
.log-line {
  border-radius: 12px; padding: 10px 13px;
  transition: background var(--dur) var(--ease);
}
.log-line b { font-weight: 600; letter-spacing: -.01em; }
.log-line span { line-height: 1.72; }
.log-line.has-voice:hover { background: var(--fill-3); }
.log-voice { color: var(--sys-blue); }

/* ══════════ 结局卡 / 启动层 / toast ══════════ */
.ending-card {
  border-radius: 28px;
  background: var(--material);
  border: .5px solid rgba(255, 255, 255, .12);
  box-shadow: var(--shadow);
}
.ending-rank { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.ending-title { font-family: var(--sf-display); font-weight: 700; letter-spacing: -.028em; }
.ebtn {
  padding: 12px 24px; font-size: 15px; font-weight: 500;
  border-radius: var(--r-ctrl); border: none;
  background: var(--fill-2); color: var(--label);
  transition: background var(--dur) var(--ease), transform .12s var(--ease);
}
.ebtn:hover { background: var(--fill-1); }
.ebtn:active { transform: scale(.97); }
.ebtn.primary { background: var(--sys-blue); color: #fff; }
.ebtn.primary:hover { background: #0A7BEC; }

.boot-box { border-radius: 24px; background: var(--material); border: .5px solid rgba(255, 255, 255, .10); }
.boot-title { font-family: var(--sf-display); font-weight: 650; letter-spacing: -.02em; }
.boot-msg { font-size: 14px; color: var(--label-2); }
.boot-hint { font-size: 12.5px; color: var(--label-3); }

.toast {
  background: var(--material);
  border: .5px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -.008em;
  box-shadow: var(--shadow-soft);
}

/* ══════════ 滚动条:iOS 的细长浮条 ══════════ */
.modal-box::-webkit-scrollbar, .side-panel::-webkit-scrollbar, .log-body::-webkit-scrollbar {
  width: 8px;
}
.modal-box::-webkit-scrollbar-thumb, .side-panel::-webkit-scrollbar-thumb, .log-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18); border-radius: 999px;
}
.modal-box::-webkit-scrollbar-track, .side-panel::-webkit-scrollbar-track, .log-body::-webkit-scrollbar-track {
  background: transparent;
}

/* ══════════ 减少动效偏好 ══════════ */
@media (prefers-reduced-motion: reduce) {
  .modal.show, .modal-box, .choice-btn { animation: none; }
  .story-card:hover, .collect-card:hover, .slot:hover { transform: none; }
}

/* ── 修正:剧情卡片的按钮被网格拉伸成整行(实测) ── */
/* 卡片是 flex 列,但 .sc-actions 里的按钮参与了外层网格的 1fr 拉伸,
   结果"开始"按钮横跨整张卡且顶到卡片高度。给它明确的宽度约束。 */
.sc-actions { display: flex; gap: 8px; }
.sc-actions .scbtn { flex: 0 0 auto; min-width: 96px; }
.story-card { min-height: 0; }

/* 卡片网格:每行放得下 3-4 张,不要被 minmax 下限挤成 1 列 */
.story-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .story-grid { grid-template-columns: 1fr; } }

/* 弹层不要顶满屏幕 */
.modal-box { max-height: 82vh; padding: 28px 30px 24px; }
.modal-box.wide { width: min(1120px, 100%); }
.load-group { padding: 16px 18px 18px; }

/* ── 修正:结局图鉴的分组布局 ── */
/* 原来是横向一长条(.collect-grid 内部 flex 排列)。改成按故事线分组后,
   必须让分组**纵向堆叠**、每组内部的卡片自己排网格,否则四组会被挤成四列窄条。 */
#collection-grid.collect-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.collect-group { margin-bottom: 20px; }
.collect-group:last-child { margin-bottom: 0; }
.cg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.collect-card {
  min-height: 84px;
  padding: 14px 15px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.collect-card.locked { opacity: .42; }
.cc-rank { color: var(--c, var(--label-2)); }
.cc-title { font-size: 14.5px; color: var(--label); }
.collect-card.locked .cc-title { color: var(--label-3); }

/* ── 修正:主标题不要被拆成"柳絮与编译 / 器" ── */
/* 原来字号是固定的,窄一点的屏就把最后一个字挤到第二行,一个孤字很难看。
   Apple 的做法是标题始终单行、字号随宽度收缩。 */
.title-main {
  white-space: nowrap;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.08;
}
@media (max-width: 900px) { .title-main { font-size: clamp(28px, 7vw, 44px); } }

/* ── 窄屏:隐藏标题页立绘,让菜单占满 ── */
/* 竖屏/窄窗口时两栏会挤压,立绘被推出画面只露一角。Apple 的做法是
   小屏只保留主要内容,不硬塞装饰。 */
@media (max-width: 980px) {
  .title-right { display: none; }
  .title-inner { grid-template-columns: 1fr; }
  .title-left { max-width: 100%; }
}