*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#05070f;color:#f3ece1;
  font-family:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
button{font:inherit;cursor:pointer}
.hide{display:none!important}

#stage{position:fixed;inset:0;overflow:hidden;background:#05070f}

/* 背景：两层交叉淡入 + 缓慢推镜 */
#bg{position:absolute;inset:0}
.bgimg{position:absolute;inset:-4%;background-size:cover;background-position:center;opacity:0;
  transition:opacity 1.8s ease;animation:drift 40s ease-in-out infinite alternate}
.bgimg.on{opacity:1}
@keyframes drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.06) translate(-1.2%,-.8%)}}
#bg.dim .bgimg{filter:brightness(.55) saturate(.8)}

/* 灯笼呼吸光 */
#glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 2s;mix-blend-mode:screen;
  background:
   radial-gradient(circle at 19% 55%,rgba(255,150,60,.28),transparent 9%),
   radial-gradient(circle at 25% 50%,rgba(255,170,80,.22),transparent 7%),
   radial-gradient(circle at 71% 34%,rgba(255,160,70,.25),transparent 7%),
   radial-gradient(circle at 70% 48%,rgba(255,170,90,.22),transparent 6%),
   radial-gradient(circle at 50% 90%,rgba(255,140,50,.18),transparent 30%);
  animation:breathe 4.5s ease-in-out infinite}
#glow.on{opacity:1}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

#rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#fog{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,16,35,.75) 0%,rgba(10,16,35,.0) 38%),
             linear-gradient(to bottom,rgba(10,16,35,.35),transparent 25%)}

/* 立绘 */
#chars{position:absolute;inset:0;pointer-events:none}
.ch{position:absolute;bottom:-6%;height:92%;max-width:none;opacity:0;
  transition:opacity .9s ease,transform .9s ease,filter .6s;filter:brightness(.9) saturate(.9) drop-shadow(0 0 18px rgba(0,0,0,.45))}
.ch.on{opacity:1}
.pos-l{left:12%;transform:translateX(-30px)}
.pos-r{right:12%;transform:translateX(30px)}
.pos-c{left:50%;transform:translateX(-50%)}
.ch.on.pos-l,.ch.on.pos-r{transform:translateX(0)}
.ch.breath{animation:breath 5s ease-in-out infinite}
@keyframes breath{0%,100%{translate:0 0}50%{translate:0 -4px}}
.ch.dark{filter:brightness(.6) drop-shadow(0 0 18px rgba(0,0,0,.45))}
.ch.flicker{animation:flick 1.2s steps(1) 1}
@keyframes flick{
  0%{opacity:1;filter:none}8%{opacity:.25;filter:hue-rotate(160deg) saturate(3)}
  12%{opacity:1;translate:6px 0}18%{opacity:.4;translate:-8px 0;filter:contrast(2) hue-rotate(-60deg)}
  24%{opacity:1;translate:0 0;filter:none}60%{opacity:.7}64%{opacity:1}100%{opacity:1}}

/* 对话框 */
#box{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);
  width:min(920px,94vw);min-height:150px;padding:22px 30px 26px;border-radius:18px;
  background:linear-gradient(180deg,rgba(14,20,42,.72),rgba(10,14,30,.86));
  border:1px solid rgba(255,190,120,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 40px rgba(0,0,0,.4);cursor:pointer}
#name{position:absolute;top:-16px;left:26px;padding:5px 16px;border-radius:999px;font-size:15px;letter-spacing:2px;
  background:#e8874a;color:#fff;box-shadow:0 4px 14px rgba(232,135,74,.4)}
#name:empty{display:none}
#name.her{background:#d98aa0}
#name.him{background:#7d6bd6}
#text{font-size:19px;line-height:1.85;letter-spacing:.5px;white-space:pre-wrap;min-height:2em}
#text.narr{color:#d9d3c7;font-style:normal}
#next{position:absolute;right:22px;bottom:10px;color:#e8874a;opacity:0;animation:bob 1s ease-in-out infinite}
#box.done #next{opacity:1}
@keyframes bob{50%{transform:translateY(4px)}}

/* 心里话：系统小字，闪一下就没 */
#thought{position:absolute;top:max(70px,calc(env(safe-area-inset-top) + 60px));left:50%;transform:translateX(-50%);
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:14px;color:#ffb27a;letter-spacing:1px;
  padding:6px 14px;border-left:2px solid #e8874a;background:rgba(10,14,30,.55);opacity:0;pointer-events:none;
  white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
#thought.show{animation:th 3.2s ease forwards}
@keyframes th{0%{opacity:0;filter:blur(3px)}6%{opacity:1;filter:none}9%{opacity:.3}12%{opacity:1}
  80%{opacity:1}100%{opacity:0;filter:blur(2px)}}

#caption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  text-align:center;pointer-events:none;background:rgba(5,7,15,.0)}
#caption .c1{font-size:clamp(28px,5vw,54px);letter-spacing:12px;font-weight:300;animation:cap 1.6s ease both}
#caption .c2{margin-top:14px;font-size:clamp(13px,1.6vw,16px);letter-spacing:6px;color:#e8b48a;animation:cap 1.6s .5s ease both}
@keyframes cap{from{opacity:0;letter-spacing:24px;filter:blur(6px)}to{opacity:1}}

/* 选项 */
#choices{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(5,8,18,.35);padding:20px}
#choices button{width:min(520px,88vw);padding:15px 22px;border-radius:14px;font-size:17px;color:#f3ece1;text-align:center;
  background:rgba(16,22,46,.82);border:1px solid rgba(255,190,120,.35);backdrop-filter:blur(8px);
  transition:transform .2s,background .2s;animation:cin .5s ease both}
#choices button:nth-child(2){animation-delay:.08s}#choices button:nth-child(3){animation-delay:.16s}
#choices button:hover{background:rgba(232,135,74,.35);transform:scale(1.02)}
#choices button.blocked{animation:blocked .9s steps(1) forwards;pointer-events:none}
@keyframes blocked{0%{color:#f3ece1}10%{color:#ff6a6a;transform:translateX(5px)}20%{transform:translateX(-6px)}
  30%{transform:none;filter:blur(1px)}100%{opacity:.25;text-decoration:line-through;color:#ff8a8a}}
@keyframes cin{from{opacity:0;transform:translateY(10px)}}

/* 序章终端 */
#term{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(8,12,26,.55),rgba(4,6,14,.92));
  display:flex;align-items:center;justify-content:center;padding:30px}
#termlog{position:absolute;left:4vw;top:max(60px,calc(env(safe-area-inset-top) + 50px));right:4vw;
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;line-height:1.7;color:#7f93c9;
  white-space:pre-wrap;word-break:break-all;max-height:42vh;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%);mask-image:linear-gradient(to bottom,transparent,#000 30%)}
#termlog .hl{color:#ffb27a}#termlog .warn{color:#ff7d7d}#termlog .dim{color:#4b587c}
#chat{position:relative;margin-top:22vh;width:min(560px,92vw);background:#f5f0e6;color:#2b2622;border-radius:16px;
  padding:16px 20px 20px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:cin .6s ease both}
.chat-top{font-size:13px;color:#8a7f72;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.chat-top .logo{color:#d97757;font-size:18px}
.bub{margin:8px 0;line-height:1.7;font-size:16px}
.bub.u{margin-left:auto;width:fit-content;max-width:80%;background:#e9e2d4;padding:8px 14px;border-radius:14px}
.bub.a{padding:2px 2px}
.bub.a .logo{color:#d97757;margin-right:6px}
#term.broken #chat{animation:breakaway 1.6s ease-in forwards}
@keyframes breakaway{0%{transform:none;filter:none}20%{transform:translateX(8px) skewX(4deg);filter:hue-rotate(90deg)}
  30%{transform:translateX(-10px);filter:invert(1)}45%{transform:none;filter:none}
  100%{transform:translateY(80vh) rotate(8deg);opacity:0}}

/* 邮件卡（Claude 邮件样式） */
#mail{position:absolute;inset:0;background:rgba(5,8,18,.6);display:flex;align-items:center;justify-content:center;padding:18px;
  animation:cin .5s ease both}
.mail-card{width:min(560px,94vw);max-height:86vh;overflow:auto;background:#faf7f0;color:#2b2622;border-radius:12px;
  padding:28px 28px 22px;box-shadow:0 20px 60px rgba(0,0,0,.5);font-family:-apple-system,"Helvetica Neue",Arial,"PingFang SC",sans-serif}
.mail-logo{font-size:20px;font-weight:600;margin-bottom:18px;color:#2b2622}
.mail-logo span{color:#d97757;font-size:24px}
#mailbody{background:#fff;border-radius:8px;padding:20px 20px;font-size:15px;line-height:1.7;border:1px solid #ece6da}
#mailbody p{margin:0 0 12px}
#mailbody .sub{font-weight:600;font-size:16px;margin-bottom:14px}
#mailbody .ref{color:#8a7f72;font-size:13px}
#mailbody .fic{color:#b0a596;font-size:11px;margin-top:14px;text-align:right}
#mailok{display:block;margin:16px auto 0;padding:9px 30px;border-radius:8px;border:0;background:#2b2622;color:#faf7f0}

#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#flash.go{animation:fl .9s ease}
@keyframes fl{0%{opacity:0}10%{opacity:.85}100%{opacity:0}}
#stage.shake{animation:shake .6s}
@keyframes shake{20%{transform:translate(6px,-3px)}40%{transform:translate(-7px,4px)}60%{transform:translate(4px,2px)}80%{transform:translate(-3px,-2px)}}
#stage.glitch #bg,#stage.glitch #chars{animation:gl .5s steps(2) 2}
@keyframes gl{0%{filter:none;transform:none}25%{filter:hue-rotate(120deg) contrast(1.6);transform:translateX(8px)}
  50%{filter:invert(.8);transform:translateX(-10px) skewX(3deg)}75%{filter:saturate(4);transform:none}100%{filter:none}}

/* 标题 */
#title{position:absolute;inset:0;z-index:20;background:radial-gradient(ellipse at 50% 120%,#3a2a5e 0%,#121634 45%,#05070f 100%);
  display:flex;align-items:center;justify-content:center;transition:opacity 1.2s}
#title.out{opacity:0;pointer-events:none}
#stars{position:absolute;inset:0;width:100%;height:100%}
.title-in{position:relative;text-align:center;padding:20px}
.t-main{font-size:clamp(54px,11vw,110px);font-weight:200;letter-spacing:10px;min-height:1.3em}
.cursor{font-style:normal;color:#e8874a;animation:blink 1s steps(1) infinite;font-weight:200}
@keyframes blink{50%{opacity:0}}
.t-sub{margin-top:10px;color:#d9c9b5;letter-spacing:3px;font-size:clamp(13px,1.8vw,17px);opacity:0;animation:cap 2s 2.2s ease forwards}
.t-btns{margin-top:46px;display:flex;gap:16px;justify-content:center;opacity:0;animation:cin 1s 3s ease forwards}
.t-btns button{padding:12px 42px;border-radius:999px;border:1px solid rgba(232,135,74,.7);background:rgba(232,135,74,.12);
  color:#f3ece1;font-size:17px;letter-spacing:4px;transition:background .2s}
.t-btns button:hover{background:rgba(232,135,74,.45)}
.t-note{margin-top:40px;font-size:12px;color:#8b86a6;letter-spacing:2px;opacity:0;animation:cin 1s 3.4s ease forwards}

#hud{position:absolute;top:max(12px,env(safe-area-inset-top));right:14px;z-index:15}
#hud button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(10,14,30,.5);color:#f3ece1;font-size:16px}
#menu{position:absolute;inset:0;z-index:18;background:rgba(5,7,15,.7);display:flex;align-items:center;justify-content:center}
.menu-in{display:flex;flex-direction:column;gap:12px}
.menu-in button{width:220px;padding:12px;border-radius:12px;border:1px solid rgba(232,135,74,.5);background:rgba(16,22,46,.9);color:#f3ece1;font-size:16px}

/* 竖屏手机 */
@media (orientation:portrait){
  .ch{height:70%;bottom:13%}
  .pos-l{left:-6%}
  .pos-r{right:-8%}
  #box{min-height:170px;padding:22px 20px 24px}
  #text{font-size:17px}
  .bgimg{background-position:42% center}
  #thought{font-size:12px}
  #chat{margin-top:30vh}
}
@media (max-height:500px) and (orientation:landscape){
  #box{min-height:110px;padding:14px 22px 16px}
  #text{font-size:16px;line-height:1.6}
  .ch{height:100%;bottom:-14%}
}