/* 雨停之前 · 完整样式表。由已验证的 v2 页面拆分，保留原有视觉与响应式设置。 */
:root{
  --ink:#e9eef7;
  --dim:#8d9aae;
  --gold:#dcc9a4;
  --cyan:#8fe4ff;
  --line:rgba(255,255,255,.10);
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;height:100%;overflow:hidden;background:#05070b;color:var(--ink);
  font-family:var(--serif);-webkit-font-smoothing:antialiased;
}
#app{position:fixed;inset:0;overflow:hidden}

/* ---------- 背景 ---------- */
#bg{position:absolute;inset:0;z-index:0;transition:background 1.8s ease, opacity 1.2s ease;
  background:radial-gradient(circle at 50% 40%,#243146 0%,#0d1219 62%,#06080d 100%);}
#bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%,transparent 0%,rgba(0,0,0,.28) 78%,rgba(0,0,0,.6) 100%);
  pointer-events:none}
body[data-bg="white"] #bg{background:radial-gradient(circle at 50% 34%,#f6f9fd 0%,#c3d1e3 22%,#54647a 55%,#0b1119 100%)}
body[data-bg="corridor"] #bg{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 2px,transparent 2px 92px),
  linear-gradient(180deg,#141c28 0%,#0b111a 55%,#070a10 100%)}
body[data-bg="archive"] #bg{background:
  radial-gradient(ellipse at 30% 40%,#3a2f22 0%,#1b1610 45%,#080706 100%)}
body[data-bg="core"] #bg{background:
  radial-gradient(circle at 50% 48%,#7fe9ff33 0%,#1d5f7a22 22%,transparent 55%),
  linear-gradient(180deg,#04101a 0%,#02080e 100%)}
body[data-bg="rain"] #bg{background:
  radial-gradient(ellipse at 60% 30%,#2b4a72 0%,#14243c 40%,#070c14 100%)}
body[data-bg="red"] #bg{background:
  radial-gradient(circle at 50% 50%,#5a1a1a 0%,#210b0d 45%,#080508 100%)}
body[data-bg="night"] #bg{background:
  radial-gradient(ellipse at 50% 18%,rgba(120,164,230,.18) 0%,rgba(60,90,150,.08) 42%,transparent 68%),
  linear-gradient(180deg,#060a13 0%,#0b1322 48%,#131c2c 100%)}
body[data-bg="dawn"] #bg{background:
  radial-gradient(ellipse at 50% 82%,rgba(255,196,132,.28) 0%,rgba(255,170,110,.10) 34%,transparent 62%),
  linear-gradient(180deg,#161b2b 0%,#2b2a3c 34%,#4d3f44 62%,#7a5c49 86%,#8f6a50 100%)}
body[data-bg="void"] #bg{background:radial-gradient(circle at 50% 50%,#0d1320 0%,#03050a 70%,#000 100%)}

/* ---------- 雨 / 尘 ---------- */
#rain{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- 人影 ---------- */
#figure{position:absolute;z-index:2;right:6%;bottom:-2%;height:80vh;width:42vh;
  opacity:0;transition:transform 1.6s ease;transform:translateY(16px);
  pointer-events:none;mix-blend-mode:screen}
#figure.on{transform:translateY(0)}
#figure svg{height:100%;width:100%;display:block;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85;transform:translateY(0)}50%{opacity:1;transform:translateY(-8px)}}
@media (max-width:820px){
  #figure{right:-6%;height:62vh;width:33vh}
}

/* ---------- CG / 立绘 ---------- */
#cg{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
#cg.on{opacity:1}
#cg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
#cg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,5,9,.40) 0%,rgba(3,5,9,.02) 22%,rgba(3,5,9,.14) 60%,rgba(3,5,9,.84) 100%)}

#portrait{position:absolute;z-index:3;right:3.5%;bottom:0;height:88vh;max-width:58vw;
  opacity:0;transition:opacity .6s ease,transform .6s ease;transform:translateY(14px);pointer-events:none}
#portrait.on{opacity:1;transform:translateY(0)}
#portrait.dim.on{opacity:.52}
#portrait img{height:100%;width:auto;max-width:58vw;object-fit:contain;object-position:bottom;
  display:block;filter:drop-shadow(0 18px 46px rgba(0,0,0,.62));
  opacity:1;transition:opacity .16s ease,filter .8s ease;animation:breathe 7.5s ease-in-out infinite;will-change:transform}
#portrait[data-mood="warm"] img{filter:sepia(.15) saturate(1.11) brightness(1.04) drop-shadow(0 18px 46px rgba(0,0,0,.62))}
#portrait[data-mood="cold"] img{filter:saturate(.92) brightness(1.0) hue-rotate(-7deg) drop-shadow(0 18px 46px rgba(0,0,0,.62))}
#portrait[data-mood="cold"].on{transform:translateY(8px)}
#portrait{transition:opacity .6s ease,transform .7s ease}
#portrait img{transition:opacity .16s ease,filter .9s ease}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.005)}}
@media (max-width:820px){
  #portrait{right:-4%;height:64vh;max-width:86vw}
  #portrait img{max-width:86vw}
}
.thumb{width:100%;height:150px;object-fit:cover;display:block;background:rgba(255,255,255,.04)}

#sweetCount{color:#e79aa4;opacity:0;transition:opacity .5s ease}
#sweetCount.on{opacity:1}
.heart{position:absolute;z-index:9;color:#f0a8b0;pointer-events:none;
  text-shadow:0 0 14px rgba(240,168,176,.9);animation:floatUp 1.6s ease-out forwards}
@keyframes floatUp{
  0%{opacity:0;transform:translateY(6px) scale(.55)}
  18%{opacity:1}
  100%{opacity:0;transform:translateY(-96px) scale(1.15)}
}

/* ---------- 核心光环 ---------- */
#rings{position:absolute;z-index:2;left:50%;top:44%;width:78vmin;height:78vmin;
  transform:translate(-50%,-50%);opacity:0;pointer-events:none}
#rings.on{opacity:.75}
#rings i{position:absolute;inset:0;border:1px solid rgba(143,228,255,.42);border-radius:50%;
  animation:spin 26s linear infinite}
#rings i:nth-child(2){inset:8%;border-style:dashed;border-color:rgba(143,228,255,.26);animation-duration:18s;animation-direction:reverse}
#rings i:nth-child(3){inset:18%;border-color:rgba(143,228,255,.18);animation-duration:34s}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 通用屏幕 ---------- */
.screen{position:absolute;inset:0;z-index:5;display:none;opacity:0;transition:opacity .9s ease}
.screen.on{display:flex;opacity:1}

/* ---------- 标题 ---------- */
#title{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6vh 6vw}
#title::before{content:"";position:absolute;left:50%;top:42%;width:120vmin;height:120vmin;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(150,192,255,.13) 0%,rgba(120,160,220,.05) 38%,transparent 66%)}
#title .kicker{font-size:12px;letter-spacing:.62em;color:var(--dim);margin-bottom:2.4vh}
#title h1{font-size:clamp(34px,6.4vw,74px);font-weight:400;letter-spacing:.22em;
  margin:0 0 .18em;text-indent:.22em;
  background:linear-gradient(180deg,#ffffff,#b9cbe2 55%,#7d90a9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(160,200,255,.16)}
#title .rule{width:min(420px,64vw);height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:3vh 0}
#title .epi{font-size:clamp(13px,1.5vw,16px);line-height:2.3;color:#a6b3c6;letter-spacing:.08em;white-space:pre-line}
#title .menu{margin-top:5vh;display:flex;gap:34px;flex-wrap:wrap;justify-content:center}
#title .credit{position:absolute;bottom:3vh;font-size:11px;letter-spacing:.24em;color:#5a6678}

.tbtn{background:none;border:0;color:#cfd9e7;font-family:var(--serif);font-size:15px;
  letter-spacing:.24em;padding:10px 2px;cursor:pointer;position:relative;transition:color .3s}
.tbtn::after{content:"";position:absolute;left:50%;bottom:4px;width:0;height:1px;background:var(--gold);
  transition:width .35s ease,left .35s ease;opacity:.8}
.tbtn:hover{color:#fff}
.tbtn:hover::after{width:100%;left:0}
.tbtn.dim{color:#6d7b8f;cursor:default}
.tbtn.dim:hover::after{width:0}

/* ---------- 游戏层 ---------- */
#game{flex-direction:column;cursor:pointer}
#hud{position:absolute;top:0;left:0;right:0;z-index:8;display:flex;align-items:center;
  justify-content:space-between;padding:20px 26px 54px;font-size:12px;letter-spacing:.2em;color:#93a0b4;
  pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.95);
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 48%,transparent 100%)}
#hud .left{display:flex;align-items:center;gap:18px;pointer-events:auto}
#bar{width:110px;height:2px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
#bar i{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,#7f9fc4,var(--gold));
  transition:width .8s ease}
#hud .right{display:flex;gap:20px;pointer-events:auto}
.hbtn{background:none;border:0;color:#8996aa;font-family:var(--serif);font-size:12px;
  letter-spacing:.2em;cursor:pointer;padding:4px;transition:color .25s}
.hbtn:hover{color:#fff}
.hbtn.act{color:var(--gold)}

#stage{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;padding:0 5vw 6vh;z-index:6}
#textbox{width:min(900px,100%);position:relative;padding:30px 34px 34px;
  background:linear-gradient(180deg,rgba(8,12,19,.72),rgba(6,9,15,.88));
  border:1px solid var(--line);border-radius:2px;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  box-shadow:0 -10px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)}
#textbox::before{content:"";position:absolute;left:0;top:0;width:2px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(220,201,164,.55),transparent)}
#name{font-size:13px;letter-spacing:.34em;color:var(--gold);margin-bottom:14px;min-height:18px}
#name.empty{opacity:0}
#name[data-c="prts"]{color:var(--cyan)}
#name[data-c="amia"]{color:#a9c6ea}
#name[data-c="kal"]{color:#a5bdae}
#name[data-c="you"]{color:#e6eef9}
#text{font-size:clamp(15px,1.65vw,18.5px);line-height:2.15;letter-spacing:.045em;color:#dde5f1;
  min-height:4.6em;white-space:pre-wrap;word-break:break-word}
#text .em{color:var(--gold)}
#caret{display:inline-block;width:7px;height:15px;background:var(--gold);opacity:.7;
  margin-left:4px;vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:.7}50%,100%{opacity:0}}

#choices.many .choice{padding:11px 20px 11px 24px;font-size:clamp(13px,1.45vw,15px)}
#choices.many .choice .star{display:none}
#choices{width:min(900px,100%);margin-top:18px;display:flex;flex-direction:column;gap:10px}
.choice{position:relative;text-align:left;padding:15px 22px 15px 26px;cursor:pointer;
  background:rgba(10,15,24,.62);border:1px solid var(--line);color:#ccd7e6;
  font-family:var(--serif);font-size:clamp(14px,1.5vw,16px);letter-spacing:.06em;line-height:1.6;
  transition:background .28s,border-color .28s,color .28s,transform .28s;
  animation:cin .5s ease both}
.choice:nth-child(2){animation-delay:.07s}
.choice:nth-child(3){animation-delay:.14s}
.choice:nth-child(4){animation-delay:.21s}
@keyframes cin{from{transform:translateY(10px)}to{transform:translateY(0)}}
.choice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gold);
  opacity:0;transition:opacity .28s}
.choice:hover{background:rgba(28,40,58,.8);border-color:rgba(220,201,164,.4);color:#fff;transform:translateX(3px)}
.choice:hover::before{opacity:1}
.choice .star{color:var(--gold);font-size:11px;margin-left:8px;opacity:.55}

/* ---------- 章节卡 ---------- */
#chapter{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;
  align-items:center;justify-content:center;background:rgba(4,6,10,.94);cursor:pointer}
#chapter.on{display:flex}
@keyframes cfade{from{opacity:0}to{opacity:1}}
#chapter .num{font-size:12px;letter-spacing:.7em;color:#6d7b8f;margin-bottom:20px;text-indent:.7em}
#chapter .ttl{font-size:clamp(26px,4.2vw,46px);letter-spacing:.34em;color:#e8eef8;text-indent:.34em}
#chapter .ln{width:70px;height:1px;background:rgba(220,201,164,.5);margin-top:28px}

/* ---------- 模态 ---------- */
#modal{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  background:rgba(3,5,9,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:5vh 5vw}
#modal.on{display:flex}
#mbox{width:min(760px,100%);max-height:84vh;overflow:auto;padding:34px 38px;
  background:linear-gradient(180deg,rgba(12,18,28,.96),rgba(7,10,16,.98));
  border:1px solid var(--line)}
#mbox h2{font-size:15px;font-weight:400;letter-spacing:.4em;color:var(--gold);margin:0 0 26px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
#mbox .close{margin-top:30px;text-align:right}
.entry{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px;line-height:1.95;color:#b9c5d6}
.entry b{color:#e6eef8;font-weight:400;letter-spacing:.1em;display:block;margin-bottom:5px}
.entry.locked{color:#4d5868}
.entry.locked b{color:#5a6577}
.entry .q{color:#8fa0b8;font-style:italic}
.logline{font-size:14px;line-height:1.95;color:#b9c5d6;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.logline i{color:var(--gold);font-style:normal;letter-spacing:.14em;font-size:12px;margin-right:10px}

/* ---------- 结局 ---------- */
#ending{position:absolute;inset:0;z-index:30;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:8vh 8vw;background:#04060a}
#ending.on{display:flex}
#ending .tag{font-size:11px;letter-spacing:.56em;color:#5f6c80;margin-bottom:26px;text-indent:.56em}
#ending h2{font-size:clamp(30px,5.6vw,58px);font-weight:400;letter-spacing:.3em;margin:0;
  text-indent:.3em;color:#f0f4fa}
#ending .ln{width:1px;height:56px;background:linear-gradient(180deg,rgba(220,201,164,.6),transparent);margin:34px 0}
#ending p{max-width:620px;font-size:14.5px;line-height:2.25;color:#98a6ba;letter-spacing:.05em;margin:0 0 12px}
#ending .menu{margin-top:46px;display:flex;gap:34px}

/* 滚动条 */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:rgba(220,201,164,.28)}
::-webkit-scrollbar-track{background:transparent}
/* ================= 排版 v2 · 参考 galgame / 乙女向 ================= */

/* 顶部：左边章节名，右边状态 */
#hud{display:flex;align-items:flex-start;justify-content:space-between;
  padding:20px 30px 54px;background:linear-gradient(180deg,rgba(0,0,0,.74),rgba(0,0,0,.30) 52%,transparent);
  font-size:11px;letter-spacing:.2em;color:#c8d3e3;text-shadow:0 1px 3px rgba(0,0,0,1),0 2px 14px rgba(0,0,0,1)}
#hud .chap{letter-spacing:.4em;color:#93a0b4;padding-top:3px;white-space:nowrap;overflow:hidden}
#hud .stat{display:flex;align-items:center;gap:22px;white-space:nowrap}
#hud .s{display:flex;align-items:center;gap:9px}
#hud em{font-style:normal;color:#66748a;letter-spacing:.24em}
#bar{display:inline-block;width:78px;height:2px;background:rgba(255,255,255,.13)}

/* 对话框 */
#stage{padding:0 0 4.6vh;justify-content:flex-end;align-items:center}
#textbox{position:relative;width:min(1180px,94vw);padding:38px 52px 34px;
  background:linear-gradient(180deg,rgba(9,13,21,.90) 0%,rgba(5,8,13,.95) 100%);
  border:1px solid rgba(255,255,255,.10);border-radius:2px;
  box-shadow:0 26px 80px rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#textbox::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(220,201,164,.55),transparent)}
#textbox::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(220,201,164,.5),transparent 70%)}

/* 名牌：斜角标签，骑在对话框上沿 */
#name{position:absolute;left:36px;top:-18px;margin:0;min-height:0;
  padding:8px 34px 8px 16px;font-size:12.5px;letter-spacing:.32em;
  color:var(--gold);background:linear-gradient(180deg,#1d2839,#131b26);
  border:1px solid rgba(220,201,164,.45);border-bottom:none;
  clip-path:polygon(0 0,100% 0,calc(100% - 15px) 100%,0 100%)}
#name.empty{display:none}

#text{font-size:clamp(15px,1.72vw,19px);line-height:2.06;letter-spacing:.045em;
  min-height:3.1em;padding-right:26px;
  max-height:calc(62vh - 110px);overflow-y:auto;overscroll-behavior:contain}

/* 推进指示 */
#advance{position:absolute;right:26px;bottom:17px;font-size:9px;color:var(--gold);
  opacity:0;transition:opacity .3s}
#textbox.ready #advance{opacity:.75;animation:blink 1.7s steps(1) infinite}
#game.choosing #advance{opacity:0}

/* 选项：居中浮层 */
#veil{position:absolute;inset:0;z-index:10;opacity:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(3,6,11,.34),rgba(3,6,11,.66));
  transition:opacity .4s ease}
#veil.on{opacity:1}
#choices{position:absolute;z-index:12;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(620px,86vw);margin:0;display:flex;flex-direction:column;gap:15px}
.choice{text-align:center;padding:17px 30px;letter-spacing:.1em;
  background:rgba(9,14,23,.82);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:clamp(14px,1.45vw,15.5px);color:#cfdae9}
.choice::before{display:none}
.choice:hover{background:rgba(30,44,66,.9);border-color:rgba(220,201,164,.65);
  color:#fff;transform:none;box-shadow:0 0 0 1px rgba(220,201,164,.18),0 8px 30px rgba(0,0,0,.5)}
#choices.many .choice{padding:12px 24px;font-size:14px}

/* 控制条：对话框下方右对齐 */
#controls{position:absolute;right:max(3vw,20px);bottom:1.3vh;z-index:9;
  display:flex;gap:22px;pointer-events:auto}
#controls::before{content:"";position:absolute;inset:-14px -18px -10px -18px;z-index:-1;
  background:radial-gradient(ellipse at 100% 100%,rgba(0,0,0,.62),rgba(0,0,0,.22) 45%,transparent 72%)}
.cbtn{background:none;border:0;padding:3px 0;color:#6f7d91;font-family:var(--serif);
  font-size:11px;letter-spacing:.3em;cursor:pointer;transition:color .25s}
.cbtn:hover{color:#e8eef7}
.cbtn.act{color:var(--gold)}

/* 标题主按钮 */
#title .tbtn.primary{border:1px solid rgba(220,201,164,.5);padding:11px 34px;
  color:#f4ecdc;letter-spacing:.3em}
#title .tbtn.primary:hover{background:rgba(220,201,164,.09)}

@media (max-width:820px){
  #textbox{width:96vw;padding:32px 24px 30px}
  #name{left:20px}
  #choices{top:40%}
  #controls{gap:16px}
}
/* 贴纸 */
#sticker{position:absolute;left:6%;bottom:51vh;z-index:7;width:148px;opacity:0;
  transform:scale(.55) rotate(-10deg);pointer-events:none;
  transition:opacity .22s ease,transform .38s cubic-bezier(.2,1.7,.45,1);
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.65))}
#sticker.on{opacity:1;transform:scale(1) rotate(-5deg)}
#sticker img{width:100%;display:block;border-radius:10px}
@media (max-width:820px){ #sticker{width:100px;left:4%;bottom:50vh} }

/* 侧故事隐藏数值 */
#game.side .stat{display:none}
/* ---------- 场景时间 ---------- */
#hud .chap{display:flex;flex-direction:column;gap:7px}
#hud .day{font-size:10px;letter-spacing:.34em;color:#5d6b80;text-shadow:0 1px 3px #000}

/* ---------- 共感 ---------- */
#mindBtn{position:absolute;right:-1px;top:-17px;padding:7px 18px 7px 20px;
  background:linear-gradient(180deg,#1a2230,#0d1219);color:#d3a8ba;
  border:1px solid rgba(220,170,190,.55);border-bottom:none;cursor:pointer;
  font-family:var(--serif);font-size:11px;letter-spacing:.28em;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%);
  opacity:0;pointer-events:none;transition:opacity .3s,color .25s}
#mindBtn.on{opacity:1;pointer-events:auto}
#mindBtn:hover{color:#f0c4d2}
#mindBubble{position:absolute;z-index:9;right:4%;bottom:44vh;max-width:34vw;
  padding:18px 22px;background:rgba(30,20,30,.9);border:1px solid rgba(220,170,190,.3);
  border-radius:2px;color:#e6c8d4;font-size:14px;line-height:1.95;letter-spacing:.04em;
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;
  pointer-events:none;box-shadow:0 16px 40px rgba(0,0,0,.6)}
#mindBubble.on{opacity:1;transform:translateY(0)}
#mindBubble::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(230,180,200,.6),transparent)}

/* ---------- 限时选项 ---------- */
#timerBox{position:absolute;z-index:13;left:50%;top:0;transform:translateX(-50%);
  display:none;align-items:center;gap:12px;width:min(300px,60vw)}
#timerBox.on{display:flex}
#timerNum{font-size:13px;letter-spacing:.1em;color:#e0b9a8;min-width:20px;text-align:right;
  text-shadow:0 1px 6px #000;font-variant-numeric:tabular-nums}
#timerTrack{flex:1;height:2px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
#timerFill{position:absolute;left:0;top:0;bottom:0;width:100%;
  background:linear-gradient(90deg,#c98a7a,#e8c9a8)}
#choices{top:44%}

@media (max-width:820px){
  #mindBubble{max-width:60vw;right:5%;bottom:46vh;font-size:13px}
}
/* ---------- 免责声明 ---------- */
#legal{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(3,5,9,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:5vh 5vw}
#legal.on{display:flex}
#legal .card{width:min(720px,100%);max-height:88vh;overflow:auto;padding:38px 44px 30px;
  background:linear-gradient(180deg,rgba(12,17,26,.98),rgba(7,10,16,.99));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.8)}
#legal h2{font-size:15px;font-weight:400;letter-spacing:.5em;color:var(--gold);
  margin:0 0 26px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1);text-indent:.5em}
#legal .body p{font-size:13.5px;line-height:2.05;color:#9fadc0;margin:0 0 15px;letter-spacing:.02em}
#legal .body strong{color:#dbe4f0;font-weight:400}
#legal .foot{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);
  font-size:12px;letter-spacing:.12em;color:#63718a}
#legal .act{margin-top:22px;text-align:center}
#legal .act .tbtn{font-size:14px;letter-spacing:.34em}
@media (max-width:820px){
  #legal .card{padding:26px 22px 22px}
  #legal .body p{font-size:12.5px;line-height:1.95}
}
#legal h3{font-size:13px;font-weight:400;letter-spacing:.42em;color:#c8b48c;
  margin:30px 0 16px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08);text-indent:.42em}
#legal .src p{font-size:12.5px;line-height:1.95;color:#8d9bb0;margin:0 0 10px}
#legal .src b{color:#c3cfdf;font-weight:400}
#legal .src .note{color:#6b788c;font-size:12px;font-style:italic}
/* ---------- 她的日记 ---------- */
#diaryScreen{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center;
  background:rgba(3,5,9,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4vh 5vw}
#diaryScreen.on{display:flex}
.dwrap{width:min(1000px,100%);height:min(84vh,760px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(13,18,27,.99),rgba(8,11,17,.99));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.8)}
.dhead{display:flex;align-items:baseline;gap:20px;padding:26px 34px 16px}
.dhead h2{font-size:15px;font-weight:400;letter-spacing:.5em;color:var(--gold);margin:0;text-indent:.5em}
.dprog{margin-left:auto;font-size:13px;letter-spacing:.16em;color:#8d9bb0}
.dprog i{font-style:normal;color:#4a5668;margin:0 6px}
#dClose{font-size:13px;letter-spacing:.2em}
.dbar{height:2px;background:rgba(255,255,255,.07);margin:0 34px}
#dBar{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a6f4a,var(--gold));transition:width .6s ease}
.dtabs{display:flex;gap:6px;padding:16px 34px 0}
.dtab{background:none;border:1px solid rgba(255,255,255,.10);color:#7d8b9f;cursor:pointer;
  font-family:var(--serif);font-size:12px;letter-spacing:.2em;padding:7px 18px;transition:.25s}
.dtab:hover{color:#dbe4f0;border-color:rgba(255,255,255,.25)}
.dtab.on{color:var(--gold);border-color:rgba(220,201,164,.5);background:rgba(220,201,164,.06)}
.dmain{flex:1;display:flex;gap:0;min-height:0;padding:18px 34px 30px}
.dlist{width:300px;overflow-y:auto;padding-right:14px;border-right:1px solid rgba(255,255,255,.08)}
.dcard{display:block;width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;
  padding:11px 12px;cursor:pointer;transition:.2s;margin-bottom:2px}
.dcard:hover{background:rgba(255,255,255,.04);border-left-color:rgba(220,201,164,.5)}
.dcard.sel{background:rgba(220,201,164,.07);border-left-color:var(--gold)}
.dcard .dt{display:block;font-size:13px;letter-spacing:.16em;color:#cfdae9;margin-bottom:4px}
.dcard .dp{display:block;font-size:11.5px;color:#65728a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard.locked{cursor:default;opacity:.45}
.dcard.locked .dt{color:#5d6a7d}
.dread{flex:1;overflow-y:auto;padding:8px 0 0 34px}
.dday{font-size:12px;letter-spacing:.36em;color:var(--gold);margin-bottom:22px}
.dtext{font-size:15.5px;line-height:2.25;color:#c7d2e2;letter-spacing:.04em}
.dempty{margin-top:24%;text-align:center;font-size:14px;line-height:2.2;color:#4e5a6d;letter-spacing:.1em}
.dempty span{font-size:12px;color:#3f4a5a}

/* 拾取散落的页 */
#pagePick{position:absolute;z-index:14;left:7%;top:26vh;display:none;align-items:center;gap:10px;
  padding:12px 18px;background:rgba(26,22,16,.92);border:1px solid rgba(220,201,164,.55);
  border-radius:2px;cursor:pointer;color:var(--gold);font-size:12.5px;letter-spacing:.18em;
  box-shadow:0 0 0 1px rgba(220,201,164,.12),0 14px 40px rgba(0,0,0,.6);
  animation:bob 2.4s ease-in-out infinite}
#pagePick.on{display:flex}
#pagePick:hover{background:rgba(46,38,26,.96)}
.pp-ico{font-size:16px;opacity:.9}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
#pageToast{position:absolute;z-index:41;left:50%;bottom:22vh;transform:translateX(-50%) translateY(8px);
  padding:10px 24px;background:rgba(20,26,36,.95);border:1px solid rgba(220,201,164,.4);
  color:var(--gold);font-size:13px;letter-spacing:.22em;opacity:0;pointer-events:none;
  transition:opacity .4s ease,transform .4s ease}
#pageToast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:820px){
  .dmain{flex-direction:column;padding:14px 18px 20px}
  .dlist{width:100%;height:40%;border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding:0 0 10px}
  .dread{padding:16px 0 0}
}
/* 相册（卡片） */
.dcards{display:none;flex:1;min-height:0;overflow-y:auto;padding:18px 34px 30px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;align-content:start}
#diaryScreen.cards .dcards{display:grid}
#diaryScreen.cards .dmain{display:none}
.dcard2{margin:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
  padding:10px 10px 14px;transition:.25s;cursor:default}
.dcard2:hover{border-color:rgba(220,201,164,.45);background:rgba(220,201,164,.05);transform:translateY(-3px)}
.dcard2 img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;object-position:center top;
  filter:saturate(.96);border:1px solid rgba(255,255,255,.06)}
.dcard2 figcaption{padding:10px 4px 0}
.dcard2 b{display:block;font-size:12.5px;letter-spacing:.2em;color:var(--gold);margin-bottom:6px;font-weight:400}
.dcard2 span{display:block;font-size:11.5px;line-height:1.85;color:#7d8b9f}
@media (max-width:820px){ .dcards{padding:14px 18px 20px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px} }
/* 标题主视觉 */
#titleKey{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#titleKey img{width:100%;height:100%;object-fit:cover;object-position:center 26%;
  opacity:.62;filter:saturate(.95) contrast(1.05)}
#titleKey::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 44%,rgba(4,6,10,.28) 0%,rgba(4,6,10,.84) 60%,rgba(4,6,10,.97) 100%)}
#title .kicker,#title h1,#title .rule,#title .epi,#title .menu{position:relative;z-index:2}
#title .credit{z-index:2}

/* v2: reading and small-screen layout */
#app{height:100dvh}
#text{font-size:var(--reading-size,18px)}
#choices{max-height:calc(100dvh - 180px);overflow-y:auto;overscroll-behavior:contain;padding:5px 4px}
#choices .choice{flex-shrink:0;min-height:44px}
#controls{bottom:max(8px,env(safe-area-inset-bottom));gap:18px}
.cbtn,.hbtn{min-height:36px;color:#b0bdd0}
#stage{padding-bottom:calc(50px + env(safe-area-inset-bottom))}
#hud{padding-top:max(16px,env(safe-area-inset-top))}
#hud .day{color:#a3afc1}
#title{overflow-y:auto;min-height:0}
#title .menu{gap:12px 25px;max-width:860px}
#title .credit{position:relative;bottom:auto;margin-top:26px}
#mbox{max-height:88dvh}
#text{max-height:calc(60dvh - 100px)}
#pagePick{min-height:44px}
.save-actions{display:flex;gap:12px 24px;flex-wrap:wrap}
#mbox button[aria-pressed="true"]{color:var(--gold);text-decoration:underline}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#imageViewer{position:fixed;inset:0;z-index:100;display:none;overflow:auto;background:rgba(0,0,0,.97);padding:70px 20px 24px;text-align:center;touch-action:pan-x pan-y pinch-zoom}
#imageViewer.on{display:block}
#imageViewer img{max-width:100%;height:auto;max-height:none;object-fit:contain}
#closeViewer{position:fixed;right:24px;top:max(12px,env(safe-area-inset-top));background:#111a26;padding:12px 20px}
.thumb,#dCards img{cursor:zoom-in}
.reduce-motion *, .reduce-motion *::before,.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:600px){
 #hud{padding-left:12px;padding-right:12px;font-size:10px}
 #hud .stat{gap:9px}#bar{width:42px}#hud .chap{max-width:43vw;letter-spacing:.12em}
 #textbox{padding:28px 18px 24px}#text{padding-right:6px;line-height:1.9;max-height:calc(58dvh - 90px)}
 #choices{width:92vw;gap:10px;top:43%;max-height:calc(100dvh - 190px)}
 #controls{left:12px;right:12px;justify-content:flex-end;gap:20px}.cbtn{letter-spacing:.1em;font-size:12px}
 #mindBubble{max-width:85vw}#mbox{padding:24px 20px}
 .dhead{padding:18px 16px 10px;gap:8px}.dhead h2{font-size:13px;letter-spacing:.18em}.dtabs{padding:12px 12px 0;gap:4px;flex-wrap:wrap}.dtab{padding:8px 10px}.dprog{font-size:11px}
 #title h1{font-size:42px}#title .menu{margin-top:20px}
}
@media(max-height:520px){
 #title{justify-content:flex-start;padding:20px 5vw}#title .rule{margin:10px}#title .epi{font-size:12px;line-height:1.7}#title .kicker{margin-bottom:8px}#title h1{font-size:34px}#title .menu{margin-top:12px}#title .credit{margin-top:12px}
 #hud{padding-top:10px}#textbox{padding:23px 22px 20px}#text{max-height:calc(100dvh - 155px);min-height:0;line-height:1.7}
 #choices{top:65px;transform:translateX(-50%);max-height:calc(100dvh - 210px);gap:6px;width:min(620px,88vw)}.choice,#choices.many .choice{padding:8px 18px;min-height:40px}
 #timerBox{top:55px!important}#pagePick{top:70px;left:16px;padding:8px 12px}#sticker{display:none}
 #stage{padding-bottom:44px}#mindBubble{bottom:48%;max-height:35dvh;overflow:auto}
 #ending{padding:20px}#ending .ln{height:15px;margin:12px}#ending .menu{margin-top:12px}
}