:root{
  --deep:#12081A;
  --bg:#241033;
  --bg2:#3A1748;
  --pink:#FFB6D5;
  --pink-hi:#FF8FBF;
  --cream:#FFF3F0;
  --lilac:#C9A7F0;
  --amber:#FFE9A8;
  --ink:#2A1B33;
  --muted:rgba(255,243,240,.62);
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.55,0,1,.45);
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--deep)}
body{
  font-family:var(--sans);color:var(--cream);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  overscroll-behavior:none;
}
img{display:block;-webkit-user-drag:none}
canvas{display:block}

#ambient{position:fixed;inset:0;z-index:1;pointer-events:none}
#stage{position:fixed;inset:0;z-index:2}
#veil{
  position:fixed;inset:0;z-index:40;background:#000;opacity:0;
  pointer-events:none;transition:opacity .45s var(--ease-out);
}
#veil.on{opacity:1}

.screen{
  position:absolute;inset:0;overflow:hidden;
  opacity:0;transition:opacity .55s var(--ease-out);
  will-change:opacity,transform;
}
.screen.live{opacity:1}
.screen.leaving{opacity:0}

/* ---------- 通用层 ---------- */
.bgimg{position:absolute;inset:-3%;background-size:cover;background-position:center;filter:saturate(1.02)}
.bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,7,24,.80) 0%,rgba(30,12,40,.30) 24%,rgba(16,7,24,.08) 46%,rgba(16,7,24,.52) 76%,rgba(10,4,16,.92) 100%)}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 42%,transparent 40%,rgba(10,4,16,.72) 100%);pointer-events:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(66% 34% at 50% 47%,rgba(14,5,22,.58) 0%,rgba(14,5,22,.26) 56%,transparent 80%)}

.title{
  font-family:var(--serif);font-weight:500;letter-spacing:.14em;
  line-height:1.55;text-shadow:0 2px 24px rgba(255,143,191,.35),0 0 60px rgba(255,143,191,.18);
}
.small{font-size:clamp(11px,3.1vw,13px);letter-spacing:.22em;color:var(--muted);line-height:1.9;text-shadow:0 1px 12px rgba(0,0,0,.55)}

.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.92em 2.1em;border-radius:999px;
  border:1px solid rgba(255,182,213,.45);
  background:rgba(255,182,213,.10);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--serif);font-size:15px;letter-spacing:.24em;color:var(--cream);
  transition:transform .35s var(--ease-out),background .35s,border-color .35s;
  cursor:pointer;
}
.pill:active{transform:scale(.96);background:rgba(255,182,213,.20)}
.pill.ghost{background:transparent;border-color:rgba(255,243,240,.22)}

/* ---------- 开屏 ---------- */
#s-curtain .inner{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;
  padding:calc(var(--sat) + 8vh) 8vw calc(var(--sab) + 8vh);
  text-align:center;
}
#s-curtain .kicker{font-size:11px;letter-spacing:.6em;color:rgba(255,182,213,.72)}
#s-curtain .big{font-size:clamp(24px,7.2vw,34px)}
#s-curtain .mid{font-size:clamp(18px,5.4vw,24px)}
#s-curtain .sub{font-size:clamp(12px,3.4vw,14px);color:rgba(255,243,240,.72);letter-spacing:.18em;line-height:2;text-shadow:0 1px 14px rgba(0,0,0,.7)}
#s-curtain .btnwrap{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 9vh);display:flex;justify-content:center}

#countdown{display:flex;gap:14px;align-items:flex-end;margin-top:6px}
#countdown .unit{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:62px}
#countdown .num{
  font-family:var(--serif);font-size:clamp(34px,11vw,48px);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--cream);text-shadow:0 0 30px rgba(255,143,191,.5);
}
#countdown .lab{font-size:10px;letter-spacing:.34em;color:rgba(255,243,240,.45)}
#countdown .colon{font-family:var(--serif);font-size:30px;color:rgba(255,182,213,.5);padding-bottom:20px}

.breath{animation:breath 4.5s ease-in-out infinite}
@keyframes breath{0%,100%{opacity:.55;transform:scale(.99)}50%{opacity:1;transform:scale(1.01)}}

.drift{animation:drift 28s linear infinite}
@keyframes drift{0%{transform:scale(1.08) translate3d(0,0,0)}100%{transform:scale(1.16) translate3d(-1.5%,-2%,0)}}

/* ---------- 序章 ---------- */
#s-prologue .wrap{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 12vh);display:block;text-align:center}
#s-prologue .dog{position:absolute;left:50%;bottom:calc(var(--sab) + 27vh);width:min(46vw,190px);margin-left:calc(min(46vw,190px) / -2);transform-origin:50% 100%}
.bubble{
  position:relative;display:inline-block;text-align:left;width:min(640px,86vw);max-width:640px;vertical-align:bottom;
  background:rgba(255,243,240,.94);color:var(--ink);
  border-radius:22px;padding:22px 24px;
  font-family:var(--serif);font-size:clamp(15px,4.3vw,18px);line-height:1.95;letter-spacing:.06em;
  box-shadow:0 18px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,182,213,.5) inset;
}
.bubble::after{
  content:"";position:absolute;left:50%;top:-9px;width:18px;height:18px;
  background:rgba(255,243,240,.94);transform:translateX(-50%) rotate(45deg);border-radius:3px;
}
.tapany{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 5vh);text-align:center;font-size:11px;letter-spacing:.4em;color:rgba(255,243,240,.38)}

/* ---------- 占位 ---------- */
.placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:8vw}
.placeholder .tag{font-size:10px;letter-spacing:.5em;color:rgba(255,182,213,.6)}
.placeholder .name{font-family:var(--serif);font-size:clamp(20px,6vw,28px);letter-spacing:.2em}
.placeholder .note{font-size:12px;color:var(--muted);letter-spacing:.1em;line-height:1.9;max-width:22em}

/* ---------- 蝙蝠吞屏 ---------- */
#s-swallow{background:#0A0410}
#s-swallow .bat{position:absolute;left:50%;top:-30%;width:min(56vw,240px);transform:translate(-50%,0) scale(.5);opacity:0}
#s-swallow canvas{position:absolute;inset:0;width:100%;height:100%}

/* ---------- devbar ---------- */
#devbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;gap:6px;padding:8px 10px calc(8px + var(--sab));
  background:rgba(10,4,16,.86);backdrop-filter:blur(12px);
  overflow-x:auto;font-size:11px;letter-spacing:.06em;
}
#devbar.on{display:flex}
#devbar button{
  flex:0 0 auto;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,182,213,.3);
  background:transparent;color:var(--pink);font-size:11px;font-family:var(--sans);
}
#devbar button:active{background:rgba(255,182,213,.2)}

/* ---------- 纸纹颗粒 ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:55;pointer-events:none;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- 关卡 ---------- */
.level{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding-top:calc(var(--sat) + 8px);
}
.hud{height:56px;display:flex;align-items:center;gap:10px;padding:0 14px;flex:0 0 auto}
.sunbox{
  display:flex;align-items:center;gap:7px;padding:6px 14px 6px 10px;border-radius:999px;
  background:rgba(255,243,240,.10);border:1px solid rgba(255,233,168,.35);
  font-family:var(--serif);font-size:17px;color:var(--cream);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.sunico{
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#FFF7DA,#FFE9A8 55%,#FFC978);
  box-shadow:0 0 14px rgba(255,233,168,.75);
}
.hud .lvtag{font-size:10px;letter-spacing:.42em;color:rgba(255,243,240,.5)}
.hud .progress{position:absolute;left:14px;right:14px;top:calc(var(--sat) + 60px);height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.hud .progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#FFB6D5,#FFE9A8);transition:transform .3s linear}

.field{position:relative;flex:1 1 auto;margin:6px 8px 0;overflow:visible;background:transparent}
.field::after{display:none}
.field canvas{position:absolute;left:0;top:0;width:100%}
.lvhint{
  position:absolute;left:50%;transform:translateX(-50%);top:10px;padding:8px 16px;border-radius:999px;
  background:rgba(16,6,24,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  white-space:nowrap;text-align:center;pointer-events:none;
  font-family:var(--serif);font-size:14px;letter-spacing:.12em;color:rgba(255,243,240,.92);
  text-shadow:0 2px 18px rgba(0,0,0,.7);transition:opacity .5s;
}

.cards{
  flex:0 0 auto;display:flex;gap:5px;padding:10px 9px calc(10px + var(--sab));
  overflow-x:auto;scrollbar-width:none;transition:opacity .4s;
}
.cards::-webkit-scrollbar{display:none}
.cards.fade{opacity:0}
.card{
  position:relative;flex:0 0 auto;width:64px;height:82px;border-radius:14px;
  border:1px solid rgba(255,182,213,.35);
  background:linear-gradient(180deg,rgba(255,243,240,.16),rgba(255,243,240,.06));
  overflow:hidden;cursor:pointer;transition:transform .22s var(--ease-out),box-shadow .22s,border-color .22s;
  padding:0;
}
.card img{width:100%;height:74%;object-fit:contain;margin-top:4px;pointer-events:none}
.card .cost{
  position:absolute;left:0;right:0;bottom:0;height:26%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:12px;color:#FFE9A8;background:rgba(20,8,26,.55);
}
.card .cd{position:absolute;left:0;right:0;bottom:0;height:0%;background:rgba(10,4,16,.72);pointer-events:none;transition:height .12s linear}
.card.sel{transform:translateY(-6px) scale(1.06);box-shadow:0 8px 26px rgba(255,143,191,.55),0 0 0 2px rgba(255,182,213,.85) inset}
.card.dis{opacity:.42;filter:grayscale(.35)}

/* ---------- 结算 ---------- */
.result{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:0 8vw calc(var(--sab) + 6vh);
}
.result .ticket{width:min(44vw,180px);filter:drop-shadow(0 16px 40px rgba(255,143,191,.35))}
.result .r-title{font-size:clamp(19px,5.6vw,24px);opacity:0;transform:translateY(10px);transition:all .6s var(--ease-out)}
.result .r-title.in{opacity:1;transform:none}
.result .r-sub{font-size:clamp(12px,3.4vw,14px);color:rgba(255,243,240,.62);letter-spacing:.16em;text-align:center;opacity:0;transform:translateY(8px);transition:all .6s var(--ease-out)}
.result .r-sub.in{opacity:1;transform:none}
.result .dots{display:flex;gap:9px;margin-top:6px;opacity:0;transition:opacity .5s}
.result .dots.in{opacity:1}
.result .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,243,240,.22)}
.result .dots i.on{background:var(--pink);box-shadow:0 0 10px rgba(255,143,191,.9)}
.result .r-btn{opacity:0;transform:translateY(8px);transition:all .6s var(--ease-out);margin-top:10px}
.result .r-btn.in{opacity:1;transform:none}
.result.stamp::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 40% at 50% 42%,rgba(255,182,213,.35),transparent 70%);
  animation:stamp .7s var(--ease-out) forwards;
}
@keyframes stamp{0%{opacity:0}20%{opacity:1}100%{opacity:0}}

/* ---------- 关卡 HUD v2 ---------- */
.level{--theme:#FFB6D5}
.hud{position:relative}
.hud .lvinfo{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.hud .lvgoal{font-family:var(--serif);font-size:11px;letter-spacing:.16em;color:rgba(255,243,240,.75)}
.pausebtn{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(255,243,240,.22);background:rgba(255,243,240,.08);
  color:rgba(255,243,240,.8);font-size:12px;letter-spacing:0;line-height:1;
}
.level.paused .field::before{
  content:"暂停中";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:5;font-family:var(--serif);font-size:16px;letter-spacing:.4em;color:rgba(255,243,240,.9);
  background:rgba(14,6,22,.62);backdrop-filter:blur(6px);
}

/* 卡片：加名字与冷却数字 */
.card{width:56px;height:88px}
.card img{height:60%;margin-top:3px}
.card .cname{
  position:absolute;left:0;right:0;bottom:20px;text-align:center;
  font-size:9px;letter-spacing:.02em;color:rgba(255,243,240,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;
}
.card .cost{bottom:0;height:20px;font-size:11px;color:var(--theme,#FFE9A8)}
.card .cdn{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:20px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);
  pointer-events:none;
}
.card.sel{border-color:var(--theme)}

/* 最后一波横幅 */
.wavebanner{
  position:absolute;left:0;right:0;top:38%;z-index:6;text-align:center;
  font-family:var(--serif);font-size:clamp(20px,6vw,26px);letter-spacing:.5em;
  color:#fff;text-shadow:0 0 30px rgba(255,143,191,.95);
  animation:waveIn 2.2s var(--ease-out) forwards;pointer-events:none;
}
@keyframes waveIn{
  0%{opacity:0;transform:translateY(14px) scale(.96)}
  18%{opacity:1;transform:none}
  78%{opacity:1}
  100%{opacity:0;transform:translateY(-10px)}
}

/* ---------- 第一关开场弹窗 ---------- */
.intro{
  position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  padding:0 7vw;background:rgba(10,4,16,.40);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;transition:opacity .5s var(--ease-out);
}
.intro.in{opacity:1}
.intro-card{
  width:min(100%,340px);border-radius:24px;padding:26px 24px 20px;text-align:center;
  background:linear-gradient(180deg,rgba(48,22,62,.96),rgba(30,13,42,.97));
  border:1px solid rgba(255,182,213,.32);
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14);
  transform:translateY(18px) scale(.97);transition:transform .55s var(--ease-out);
}
.intro.in .intro-card{transform:none}
.intro-kicker{font-size:10px;letter-spacing:.6em;color:rgba(255,182,213,.7);margin-bottom:10px}
.intro-title{font-family:var(--serif);font-size:22px;letter-spacing:.28em;color:var(--cream);margin-bottom:14px}
.intro-body p{
  font-size:13px;line-height:1.95;color:rgba(255,243,240,.8);letter-spacing:.04em;
  margin-bottom:6px;text-align:left;
}
.intro-sign{
  font-family:var(--serif);font-size:13px;color:var(--pink);letter-spacing:.2em;
  margin:16px 0 20px;opacity:.92;
}
.intro-btn{width:100%;margin-bottom:10px}
.intro-skip{
  background:none;border:0;color:rgba(255,243,240,.42);font-size:11px;letter-spacing:.2em;padding:6px;
}

/* ---------- 拖拽 / 掉落 / 奖励 / 横幅 ---------- */
.ghostplant{
  position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:80;
  opacity:.85;filter:drop-shadow(0 10px 20px rgba(0,0,0,.55));
}
.banner{
  position:absolute;left:0;right:0;top:24%;z-index:20;text-align:center;pointer-events:none;
  font-family:var(--serif);color:#fff;animation:bannerIn 2.6s var(--ease-out) forwards;
}
.banner.gift{font-size:19px;letter-spacing:.42em;text-shadow:0 0 26px rgba(255,233,168,.95)}
.banner.revive-big{font-size:30px;letter-spacing:.18em;text-shadow:0 0 44px rgba(255,143,191,1),0 4px 0 rgba(110,35,70,.55)}
@keyframes bannerIn{
  0%{opacity:0;transform:translateY(16px) scale(.9)}
  16%{opacity:1;transform:none}
  76%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-12px)}
}

.drop{
  position:absolute;left:50%;top:50%;width:130px;height:130px;z-index:18;
  display:grid;place-items:center;cursor:pointer;
  animation:dropBob 2.2s ease-in-out infinite;
}
.drop-glow{
  position:absolute;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,233,168,.85),rgba(255,182,213,.34) 46%,transparent 72%);
  animation:dropPulse 1.9s ease-in-out infinite;
}
.drop-core{
  position:absolute;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#fff,#FFE9A8 60%,#FFB6D5);
  box-shadow:0 0 26px rgba(255,233,168,.95);
}
.drop-tip{
  position:absolute;top:-32px;font-size:12px;letter-spacing:.34em;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.85);animation:tipBob 1.6s ease-in-out infinite;
}
.drop.hint{animation:dropShake .5s ease-in-out 3}
@keyframes dropBob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-58%)}}
@keyframes dropPulse{0%,100%{transform:scale(.86);opacity:.72}50%{transform:scale(1.16);opacity:1}}
@keyframes tipBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes dropShake{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(-56%,-50%)}75%{transform:translate(-44%,-50%)}}

.reward{
  position:absolute;inset:0;z-index:32;display:grid;place-items:center;
  background:rgba(10,4,16,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .4s var(--ease-out);
}
.reward.in{opacity:1}
.reward-in{
  width:min(80vw,300px);padding:24px 20px 18px;border-radius:24px;text-align:center;
  background:linear-gradient(180deg,#FFF7F3,#F6E4EA);color:#2A1B33;
  box-shadow:0 30px 70px rgba(0,0,0,.62),0 0 0 2px rgba(255,214,180,.55) inset;
  transform:scale(.86);transition:transform .45s cubic-bezier(.22,1.6,.36,1);
}
.reward.in .reward-in{transform:scale(1)}
.reward-in img{width:46%;margin:0 auto 6px;display:block}
.reward-k{font-size:11px;letter-spacing:.32em;color:#B08497}
.reward-t{font-family:var(--serif);font-size:22px;letter-spacing:.26em;margin:6px 0 12px}
.reward-s{font-size:12px;line-height:1.9;color:#7A6470;margin-bottom:16px}
.reward-btn{width:100%;background:rgba(255,143,191,.18);border-color:rgba(216,88,140,.5);color:#B4436E}

.field.reviving::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.92),transparent 66%);
  animation:revFlash .9s ease-out forwards;
}
@keyframes revFlash{0%{opacity:0}22%{opacity:1}100%{opacity:0}}

/* ---------- 结算：糖纸 → 钥匙 ---------- */
.result{gap:10px}
.ticketwrap{position:relative;width:min(50vw,200px);height:min(50vw,200px);display:grid;place-items:center;margin-bottom:6px}
.rk-ticket{
  width:100%;height:100%;object-fit:contain;
  opacity:0;transform:translateY(-40px) rotate(-10deg) scale(.9);
  transition:opacity .4s var(--ease-out),transform .8s cubic-bezier(.22,1.3,.36,1),filter .6s;
  filter:drop-shadow(0 18px 40px rgba(255,143,191,.28));
}
.rk-ticket.drop{opacity:1;transform:translateY(0) rotate(0) scale(1)}
.rk-ticket.open{opacity:.05;filter:blur(3px) drop-shadow(0 0 40px rgba(255,233,168,.6))}
.rk-key{
  position:absolute;width:80%;height:80%;object-fit:contain;
  opacity:0;transform:scale(.2) rotate(-114deg);
  transition:opacity .5s var(--ease-out),transform .7s cubic-bezier(.22,1.5,.36,1);
  filter:drop-shadow(0 0 26px rgba(255,233,168,.9));
  background:radial-gradient(closest-side,rgba(24,9,34,.62),rgba(24,9,34,.28) 58%,rgba(24,9,34,0) 76%);
  border-radius:50%;
  padding:6%;
  box-sizing:content-box;
}
.rk-key.rise{opacity:1;transform:scale(1.05) rotate(-90deg);filter:drop-shadow(0 0 14px rgba(255,233,168,.95)) drop-shadow(0 6px 14px rgba(90,30,60,.7)) contrast(1.12) saturate(1.05)}
.rk-spark{
  position:absolute;width:150%;height:150%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,233,168,.85),rgba(255,182,213,.3) 45%,transparent 70%);
  opacity:0;transform:scale(.5);transition:opacity .5s,transform .8s var(--ease-out);
}
.rk-spark.on{opacity:.30;transform:scale(1)}
.rk-label{
  font-size:10px;letter-spacing:.36em;color:rgba(255,233,168,.85);
  opacity:0;transform:translateY(6px);transition:all .5s var(--ease-out);
}
.rk-label.in{opacity:1;transform:none}

.speedbtn{
  width:38px;height:34px;border-radius:10px;flex:0 0 auto;margin-right:6px;
  border:1px solid rgba(255,243,240,.22);background:rgba(255,243,240,.08);
  color:rgba(255,243,240,.8);font-family:var(--serif);font-size:12px;letter-spacing:0;
}
.speedbtn.on{background:rgba(255,182,213,.24);border-color:rgba(255,182,213,.6);color:#fff}

/* ---------- 钥匙合体 / 开门 ---------- */
.door{position:absolute;inset:0;overflow:hidden}
.dk-arch{
  position:absolute;left:50%;top:50%;width:min(78vw,360px);height:min(74vh,620px);
  transform:translate(-50%,-50%);
  border-radius:190px 190px 18px 18px;
  border:1px solid rgba(255,182,213,.13);
  box-shadow:inset 0 0 90px rgba(255,143,191,.07),0 0 70px rgba(255,143,191,.05);
}
.dk-arch::before{
  content:"";position:absolute;inset:9px;border-radius:inherit;
  border:1px solid rgba(255,233,168,.07);
}
.dk{
  position:absolute;left:50%;top:44%;width:200px;height:575px;
  transform:translate(-50%,-50%) scale(.74);
  transform-origin:50% 50%;
  transition:transform 1.1s cubic-bezier(.34,.9,.26,1),opacity .45s .45s,filter .7s;
  filter:drop-shadow(0 0 0 rgba(255,233,168,0));
}
.dk.ready{animation:keyfloat 4.5s ease-in-out infinite}
@keyframes keyfloat{
  0%,100%{transform:translate(-50%,-50%) scale(.74)}
  50%{transform:translate(-50%,-54.5%) scale(.74)}
}
.dk.lit{filter:drop-shadow(0 0 20px rgba(255,233,168,.5)) drop-shadow(0 0 60px rgba(255,143,191,.22))}
.dk-core{position:relative;width:100%;height:100%;transition:transform .9s cubic-bezier(.34,1.25,.4,1)}
.dk-part{position:absolute;left:50%;object-fit:contain;will-change:transform,opacity}
.dk-part.handle{top:0;width:170px;margin-left:-85px}
.dk-part.shaft{top:148px;width:82px;margin-left:-41px}
.dk-part.tooth{top:320px;width:130px;margin-left:-65px}
.dk.goto{
  animation:none;
  transform:translate(-50%,-50%) translateY(26vh) scale(.34) rotate(90deg);
  opacity:0;
  transition:transform 1.05s cubic-bezier(.5,0,.72,.35),opacity .45s .5s;
}
.khole{
  position:absolute;left:50%;top:73%;width:30px;height:44px;
  transform:translate(-50%,-50%) scale(.7);opacity:0;
  transition:opacity .5s,transform .7s var(--ease-out);
}
.khole::before{
  content:"";position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,233,168,.30),rgba(255,143,191,.10) 46%,transparent 72%);
  opacity:0;transition:opacity .9s;
}
.khole::after{
  content:"";position:absolute;inset:0;border-radius:16px 16px 4px 4px;
  background:#050208;
  box-shadow:0 0 20px rgba(255,182,213,.5),inset 0 0 9px rgba(255,143,191,.45);
}
.khole.in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.khole.in::before{opacity:1}
.dk-tip{
  position:absolute;left:0;right:0;bottom:16%;text-align:center;
  font-family:var(--serif);font-size:14px;letter-spacing:.5em;text-indent:.5em;
  color:rgba(255,243,240,.9);opacity:0;transform:translateY(8px);
  transition:all .7s var(--ease-out);
  text-shadow:0 2px 20px rgba(255,143,191,.6);
}
.dk-tip.in{opacity:1;transform:none;animation:breath 3.4s ease-in-out infinite}
.kflash{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 58%,rgba(255,247,236,.92) 0%,rgba(255,216,178,.5) 20%,rgba(255,143,191,.24) 42%,transparent 66%);
  transition:opacity .6s var(--ease-out);
}
.kflash.on{opacity:.6}
.kflash.white{
  opacity:.94;
  background:radial-gradient(120% 110% at 50% 55%,#FFF7EC 0%,#FFE0CC 55%,#2A1038 100%);
  transition:opacity 1s var(--ease-out);
}

/* ================= 横屏：转屏守卫 / 星空 ================= */
.rotguard{position:absolute;inset:0;z-index:60;display:none;place-items:center;background:rgba(7,3,12,.94);text-align:center;padding:24px}
.rotguard.on{display:grid}
.rotbox{display:flex;flex-direction:column;align-items:center}
.roticon{
  width:56px;height:94px;border:2px solid rgba(255,182,213,.55);border-radius:13px;
  position:relative;margin-bottom:20px;animation:rot 3.2s ease-in-out infinite;
  box-shadow:0 0 30px rgba(255,143,191,.25),inset 0 0 20px rgba(255,143,191,.12);
}
.roticon::after{content:"";position:absolute;left:50%;bottom:7px;width:16px;height:2px;border-radius:2px;background:rgba(255,182,213,.7);transform:translateX(-50%)}
@keyframes rot{0%,26%{transform:rotate(0)}58%,100%{transform:rotate(-90deg)}}
.rott{font-family:var(--serif);font-size:16px;letter-spacing:.34em;margin-bottom:10px;text-indent:.34em}
.rots{font-size:11px;letter-spacing:.2em;color:var(--muted)}

.skybg{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 18%,#2A1038 0%,#140A1E 52%,#06030A 100%)}
.skybg.fin{background:radial-gradient(115% 105% at 50% 28%,#36134A 0%,#170A23 50%,#050208 100%)}
.skycanvas{position:absolute;inset:0}

/* ================= 星轨入口 ================= */
.sf-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.sf-kicker{font-size:11px;letter-spacing:.7em;color:rgba(255,182,213,.68);text-indent:.7em}
.sf-title{font-size:clamp(22px,7.2vh,34px);letter-spacing:.2em;text-indent:.2em;color:var(--cream)}
.sf-days{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.sf-num{font-family:var(--serif);font-size:clamp(46px,17vh,84px);line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#FFF3F0,#FFB6D5 60%,#FFE9A8);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,143,191,.45))}
.sf-unit{font-family:var(--serif);font-size:14px;letter-spacing:.3em;color:rgba(255,243,240,.7);text-indent:.3em}
.sf-sub{font-size:12px;letter-spacing:.3em;color:rgba(255,243,240,.6);margin-top:8px;text-indent:.3em}
.sf-hint{position:absolute;left:0;right:0;bottom:26px;text-align:center;font-size:10px;letter-spacing:.5em;text-indent:.5em;
  color:rgba(255,243,240,.38);animation:breath 3.4s ease-in-out infinite}

/* ================= 回忆星轨 · 浮现 ================= */
.memtop{position:absolute;left:22px;top:12px;right:22px;display:flex;align-items:baseline;gap:14px;z-index:4}
.memtitle{font-size:clamp(14px,3.6vh,18px);letter-spacing:.18em;color:rgba(255,243,240,.92)}
.memsub{margin-left:auto;font-size:10px;letter-spacing:.16em;color:rgba(255,243,240,.5);font-variant-numeric:tabular-nums}
.memstaff{position:absolute;inset:0;z-index:1;pointer-events:none}
.memstage{position:absolute;inset:0;z-index:2}

.memphoto{
  position:absolute;width:44vh;height:54vh;
  transform:translate(-50%,-50%) scale(.94);
  opacity:0;filter:blur(10px);
  transition:opacity 1.15s var(--ease-out),filter 1.2s var(--ease-out),transform 1.2s var(--ease-out);
  border-radius:16px;overflow:hidden;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 22px 50px rgba(0,0,0,.55);
}
.memphoto.show{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
.mframe{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2%;overflow:hidden}
.mblur{position:absolute;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;
  filter:blur(24px) brightness(.5) saturate(1.1)}
.mmain{position:relative;max-width:100%;max-height:100%;object-fit:contain;z-index:1}
.mframe.two .mmain{max-width:48%}

.memtext{
  position:absolute;width:32vw;transform:translate(-50%,-50%);
  font-family:var(--serif);font-size:clamp(11px,2.9vh,14px);line-height:1.95;letter-spacing:.04em;
  color:rgba(255,243,240,.92);opacity:0;transition:opacity .9s;
  text-shadow:0 2px 18px rgba(0,0,0,.65);
}
.memtext.show{opacity:1}

.membar{position:absolute;left:50%;bottom:16px;width:32vw;height:1px;margin-left:-16vw;
  background:rgba(255,255,255,.15);z-index:5}
.membar-fill{height:100%;width:0;background:linear-gradient(90deg,#FFB6D5,#FFE9A8);transition:width .9s var(--ease-out)}
.memcount{position:absolute;right:22px;bottom:10px;z-index:5;font-size:9px;letter-spacing:.2em;
  color:rgba(255,243,240,.45);font-variant-numeric:tabular-nums}
.memhint{position:absolute;left:0;right:0;bottom:34px;text-align:center;z-index:5;
  font-size:10px;letter-spacing:.22em;color:rgba(255,243,240,.4);transition:opacity .9s}
.memhint.gone{opacity:0}

.memend{
  position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(70% 70% at 50% 50%,rgba(8,3,14,.55),rgba(8,3,14,.9));
  opacity:0;pointer-events:none;transition:opacity 1s;
}
.memend.on{opacity:1;pointer-events:auto}
.memend-t{font-family:var(--serif);font-size:clamp(16px,4.2vh,24px);letter-spacing:.24em;text-indent:.24em}
.memend-btns{display:flex;gap:14px}

/* ================= 终章 ================= */
.finfx{position:absolute;inset:0;pointer-events:none}
.fin-top{position:absolute;left:0;right:0;top:9%;text-align:center;transform-origin:50% 0;
  transition:transform 1.1s var(--ease-out),top 1.1s}
.fin-title{font-size:clamp(20px,7vh,32px);line-height:1.5;letter-spacing:.14em;text-indent:.14em;
  opacity:0;transform:translateY(10px);transition:all 1.1s var(--ease-out)}
.fin-title.in{opacity:1;transform:none}
#s-finale.s2 .fin-top{transform:scale(.5)}
.fin-lines{position:absolute;left:0;right:0;bottom:14%;text-align:center;opacity:0;transition:opacity .9s}
.fin-lines.in{opacity:1}
.fin-line{font-family:var(--serif);font-size:clamp(12px,3.2vh,15px);line-height:1.85;letter-spacing:.14em;
  color:rgba(255,243,240,.86);opacity:0;transform:translateY(8px);transition:all .9s var(--ease-out)}
.fin-line.in{opacity:1;transform:none}
#s-finale.s3 .fin-lines{opacity:0}
.fin-center{position:absolute;left:50%;top:48%;width:0;height:0}
.fin-monster{position:absolute;left:0;top:0;height:17vh;transform:translate(-50%,-50%);opacity:0;
  transition:opacity .8s,transform .8s;filter:drop-shadow(0 0 20px rgba(255,143,191,.35)) blur(.3px)}
#s-finale.s3 .fin-monster{opacity:.62}
#s-finale .fin-monster.go{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
.fin-plush{position:absolute;left:0;top:0;height:33vh;transform:translate(-50%,-50%) scale(.18) rotate(-6deg);
  opacity:0;transition:transform 1.15s cubic-bezier(.2,1.35,.38,1),opacity .7s;
  filter:drop-shadow(0 0 26px rgba(255,233,168,.4)) drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.fin-plush.in{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
.fin-heart{
  position:absolute;left:0;top:-3vh;width:56vh;height:52vh;transform:translate(-50%,-50%) scale(.35);
  opacity:0;transition:opacity 1.2s,transform 1.2s cubic-bezier(.2,1.2,.4,1);
  filter:drop-shadow(0 0 38px rgba(255,143,191,.55));
}
.fin-heart.in{opacity:.46;transform:translate(-50%,-50%) scale(1);animation:heartbeat 3.6s ease-in-out infinite}
@keyframes heartbeat{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  12%{transform:translate(-50%,-50%) scale(1.045)}
  24%{transform:translate(-50%,-50%) scale(1.005)}
  36%{transform:translate(-50%,-50%) scale(1.03)}
}
.fin-heart::before,.fin-heart::after{
  content:"";position:absolute;top:0;width:50%;height:78%;
  border-radius:50% 50% 0 0;
  background:linear-gradient(160deg,#FFB6D5,#FF8FBF 58%,#FFE9A8);
}
.fin-heart::before{left:50%;transform:rotate(-45deg);transform-origin:0 100%}
.fin-heart::after{left:0;transform:rotate(45deg);transform-origin:100% 100%}
.fin-card{position:absolute;left:0;top:19vh;transform:translateX(-50%);text-align:center;width:54vw;opacity:0;
  transition:opacity .9s}
.fin-card.in{opacity:1}
.fin-card-l1{font-family:var(--serif);font-size:clamp(14px,4vh,20px);letter-spacing:.3em;text-indent:.3em;color:var(--cream);
  text-shadow:0 0 24px rgba(255,143,191,.5)}
.fin-card-l2{font-family:var(--serif);font-size:clamp(12px,3.2vh,16px);letter-spacing:.32em;text-indent:.32em;
  color:rgba(255,233,168,.92);margin-top:5px}
.fin-card-back{margin-top:8px;font-size:11px;letter-spacing:.18em;color:rgba(255,243,240,.5);opacity:0;transition:opacity 1s}
.fin-card.back .fin-card-back{opacity:1}
.fin-mute{position:absolute;right:18px;top:14px;z-index:12;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,182,213,.25);background:rgba(10,4,16,.45);color:rgba(255,243,240,.75);
  font-family:var(--serif);font-size:14px;line-height:1;backdrop-filter:blur(6px)}
.fin-mute.off{color:rgba(255,243,240,.3);border-color:rgba(255,243,240,.12)}
.fin-again{position:absolute;left:50%;bottom:16px;transform:translateX(-50%) translateY(10px);
  padding:.55em 1.5em;font-size:11px;opacity:0;pointer-events:none;transition:all .8s}
.fin-again.in{opacity:1;transform:translateX(-50%);pointer-events:auto}
.fin-toast{position:absolute;left:50%;bottom:9%;transform:translate(-50%,8px);width:max-content;max-width:80vw;
  padding:10px 18px;border-radius:999px;background:rgba(12,5,19,.72);border:1px solid rgba(255,182,213,.28);
  font-family:var(--serif);font-size:12px;letter-spacing:.14em;color:rgba(255,243,240,.9);
  opacity:0;pointer-events:none;transition:all .6s}
.fin-toast.on{opacity:1;transform:translate(-50%,0)}

/* 让戳心彩蛋能点在毛绒上 */
.fin-plush,.fin-monster{pointer-events:none}
.fin-heart{pointer-events:auto}

/* ---------- 手拧钥匙 ---------- */
.dk-core{transform:rotate(0deg);will-change:transform}
.dk.in-hole{
  transform:translate(-50%,-50%) translateY(9vh) scale(.66);
  transition:transform .5s var(--ease-out);
}
.khole{transition:transform .7s var(--ease-out)}
.khole.leak::before{opacity:.8}
.dk-tip.hint{
  color:#FFE9A8;
  text-shadow:0 0 18px rgba(255,233,168,.85);
  animation:breath 1.8s ease-in-out infinite;
}

/* ---------- 钥匙收集 / 图鉴 ---------- */
.keybox{
  display:flex;align-items:center;gap:4px;flex:0 0 auto;
  padding:3px 8px 3px 4px;border-radius:999px;
  background:rgba(255,243,240,.08);border:1px solid rgba(255,233,168,.3);
}
.keybox img{width:15px;height:auto;filter:drop-shadow(0 0 6px rgba(255,233,168,.55))}
.keybox b{font-family:var(--serif);font-size:10px;letter-spacing:.06em;color:#FFE9A8;font-weight:500}

.codexpop{
  position:absolute;right:10px;top:calc(var(--sat) + 66px);width:198px;z-index:6;
  display:flex;gap:8px;align-items:center;padding:10px;
  border-radius:12px;background:rgba(14,6,22,.84);border:1px solid rgba(255,182,213,.34);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transform:translateX(120%);opacity:0;pointer-events:none;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .45s;
}
.codexpop.in{transform:translateX(0);opacity:1}
.codexpop>img{width:42px;height:42px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 0 10px rgba(255,143,191,.45))}
.codexpop .cx-side{min-width:0}
.codexpop .cx-top{display:flex;justify-content:space-between;align-items:baseline;font-size:8px;letter-spacing:.12em;color:rgba(255,182,213,.8)}
.codexpop .cx-no{font-family:var(--serif);font-size:9px;color:#FFE9A8}
.codexpop .cx-name{font-family:var(--serif);font-size:13px;letter-spacing:.16em;margin:2px 0 3px}
.codexpop .cx-line{font-size:9.5px;line-height:1.55;color:rgba(255,243,240,.72)}

/* 星轨补光：中心光晕 / 两端淡出 */
.memglow{
  position:absolute;left:50%;top:50%;width:56vh;height:56vh;margin:-28vh 0 0 -28vh;border-radius:50%;
  background:radial-gradient(circle,rgba(255,143,191,.16),rgba(201,167,240,.08) 45%,transparent 68%);
  filter:blur(6px);z-index:1;pointer-events:none;
}
.memvp::before,.memvp::after{
  content:"";position:absolute;top:0;bottom:0;width:9vw;z-index:3;pointer-events:none;
}
.memvp::before{left:0;background:linear-gradient(90deg,#140A1E,transparent)}
.memvp::after{right:0;background:linear-gradient(-90deg,#140A1E,transparent)}

/* ================= 终章 v2 ================= */
.finfog{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 55%,rgba(255,143,191,.10),transparent 72%)}
.finfx{position:absolute;inset:0;z-index:2;pointer-events:none}
.finheart{position:absolute;inset:0;z-index:3;pointer-events:none}
.fin-top{position:absolute;left:0;right:0;top:7%;text-align:center;z-index:5}
.fin-title{font-size:clamp(17px,6.2vh,28px);line-height:1.55;letter-spacing:.16em;text-indent:.16em;
  opacity:0;transform:translateY(12px);transition:all 1.2s var(--ease-out)}
.fin-title.in{opacity:1;transform:none}
.fin-lines{position:absolute;left:0;right:0;bottom:20%;text-align:center;z-index:5;opacity:0;transition:opacity .9s}
.fin-lines.in{opacity:1}
.fin-line{font-family:var(--serif);font-size:clamp(11px,3vh,14px);line-height:1.9;letter-spacing:.14em;
  color:rgba(255,243,240,.86);opacity:0;transform:translateY(8px);transition:all .9s var(--ease-out)}
.fin-line.in{opacity:1;transform:none}
.fin-stage{position:absolute;inset:0;z-index:4;pointer-events:none}
.fin-char{position:absolute;left:50%;top:50%;height:var(--sz,10vh);
  transform:translate(-50%,-50%) translate(var(--x,0),var(--y,0)) scale(.9);
  opacity:0;transition:opacity .9s,transform 1.2s var(--ease-out);
  filter:drop-shadow(0 0 18px rgba(255,143,191,.35)) blur(.2px)}
.fin-char.in{opacity:.9}
.fin-char.go{opacity:0;transform:translate(-50%,-50%) scale(.32)}
.fin-plush{position:absolute;left:50%;top:50%;height:34vh;z-index:6;pointer-events:none;
  transform:translate(-50%,-50%) scale(.2);opacity:0;
  transition:transform 1.2s cubic-bezier(.2,1.35,.38,1),opacity .8s,filter 1s;
  filter:drop-shadow(0 0 22px rgba(255,233,168,.35))}
.fin-plush.in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fin-plush.out{opacity:0;transform:translate(-50%,-50%) scale(.86)}
.fin-plush.glow{filter:drop-shadow(0 0 46px rgba(255,233,168,.8)) drop-shadow(0 0 20px rgba(255,143,191,.55))}
.fin-gift{
  position:absolute;left:50%;top:50%;width:36vh;height:42vh;z-index:7;
  transform:translate(-50%,-50%) scale(.92) rotate(3deg);opacity:0;pointer-events:auto;
  border-radius:18px;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(160deg,rgba(60,28,78,.86),rgba(20,10,30,.92));
  border:1px solid rgba(255,182,213,.35);
  box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity .9s,transform .9s var(--ease-out);
}
.fin-gift.in{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(3deg)}
.fin-gift img{width:56%;height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.fg-l1{font-family:var(--serif);font-size:clamp(13px,3.4vh,18px);letter-spacing:.28em;text-indent:.28em;color:var(--cream)}
.fg-l2{font-family:var(--serif);font-size:clamp(11px,2.9vh,15px);letter-spacing:.3em;text-indent:.3em;color:rgba(255,233,168,.92)}
.fg-back{display:none;padding:0 10px;text-align:center;font-family:var(--serif);font-size:clamp(10px,2.7vh,13px);line-height:1.9;color:rgba(255,243,240,.85)}
.fin-gift.flip img,.fin-gift.flip .fg-l1,.fin-gift.flip .fg-l2{display:none}
.fin-gift.flip .fg-back{display:block}
.fin-eggline{position:absolute;left:0;right:0;top:26%;z-index:8;text-align:center;
  font-family:var(--serif);font-size:clamp(15px,4.4vh,24px);letter-spacing:.2em;text-indent:.2em;
  color:var(--cream);opacity:0;transform:translateY(10px);transition:all 1s var(--ease-out);
  text-shadow:0 0 30px rgba(255,143,191,.6)}
.fin-eggline.on{opacity:1;transform:none}
.fin-mute{position:absolute;right:16px;top:12px;z-index:9;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,182,213,.25);background:rgba(10,4,16,.4);color:rgba(255,243,240,.7);font-size:13px}
.fin-mute.off{color:rgba(255,243,240,.28)}
.fin-end{position:absolute;right:16px;bottom:12px;z-index:9;display:flex;gap:8px;opacity:0;pointer-events:none;transition:opacity .8s}
.fin-end.in{opacity:1;pointer-events:auto}
.fin-mini{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,243,240,.22);
  background:transparent;color:rgba(255,243,240,.6);font-size:10px;letter-spacing:.14em;font-family:var(--serif)}
.fin-hint{position:absolute;left:0;right:0;bottom:16px;text-align:center;z-index:8;
  font-size:10px;letter-spacing:.3em;color:rgba(255,243,240,.4);opacity:0;transition:opacity 1s}
.fin-hint.in{opacity:1}

/* 终章：标题变小 / 卡片模式 */
.fin-top{transition:transform 1.2s var(--ease-out),top 1.2s var(--ease-out),opacity 1s}
.fin-top.small{transform:scale(.68);top:4%}
.cardmode .fin-top{opacity:.4}
.cardmode .fin-lines{opacity:0}
.fin-gift{top:56%;width:34vh;height:40vh}
.cardmode .fin-hint{opacity:0}

/* 终章：栗子光 + 3D 卡片 */
.fin-flash{
  position:absolute;left:50%;top:52%;width:64vh;height:64vh;margin:-32vh 0 0 -32vh;border-radius:50%;
  background:radial-gradient(circle,rgba(255,233,168,.55),rgba(216,106,80,.35) 28%,rgba(168,68,47,.16) 55%,transparent 72%);
  opacity:0;transform:scale(.45);z-index:5;pointer-events:none;mix-blend-mode:screen;
  transition:opacity .5s var(--ease-out),transform 1.5s var(--ease-out);
}
.fin-flash.on{opacity:1;transform:scale(1.06)}
.fin-flash.fade{opacity:0;transition:opacity 2.2s}
.fin-gift{
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) perspective(900px) rotateX(9deg) rotateY(-16deg) scale(.86);
}
.fin-gift.in{animation:cardFloat 7.5s ease-in-out infinite}
@keyframes cardFloat{
  0%,100%{transform:translate(-50%,-50%) perspective(900px) rotateX(9deg) rotateY(-16deg) translateY(0)}
  50%{transform:translate(-50%,-50%) perspective(900px) rotateX(6deg) rotateY(10deg) translateY(-7px)}
}
.fin-gift::before{
  content:"";position:absolute;inset:-16%;border-radius:26px;z-index:-1;
  background:radial-gradient(circle,rgba(216,106,80,.30),rgba(168,68,47,.12) 50%,transparent 72%);
  filter:blur(16px);
}
.fin-gift::after{
  content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,233,168,.20) 50%,transparent 62%);
  transform:translateX(-130%);animation:sweep 6s 1.6s infinite;
}
@keyframes sweep{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
.fin-gift.flip{background:linear-gradient(160deg,rgba(86,36,48,.96),rgba(24,10,16,.98));border-color:rgba(255,233,168,.4)}
.heartmode .fin-top{opacity:.4}
.cardmode .fin-top{opacity:0}
.cardmode .finheart{opacity:.42;transition:opacity 1.6s}
.fin-gift{width:38vh;height:44vh}

/* 终章：更柔的进场（去扫光 / 去硬闪） */
.fin-gift::after{display:none}
.fin-gift{transition:opacity 1.4s var(--ease-out),transform 1.4s var(--ease-out),filter 1.4s}
.fin-gift.in{filter:none}
.fin-plush{
  transform:translate(-50%,-50%) scale(.55);opacity:0;
  filter:blur(8px) drop-shadow(0 0 18px rgba(255,233,168,.25));
  transition:transform 1.7s cubic-bezier(.2,1,.3,1),opacity 1.4s,filter 1.7s;
}
.fin-plush.in{transform:translate(-50%,-50%) scale(1);opacity:1;filter:blur(0) drop-shadow(0 0 22px rgba(255,233,168,.35))}
.fin-flash.on{opacity:.42;transform:scale(1.02)}
.fin-line{transition:all 1.4s var(--ease-out)}

/* 玩偶出现方案 B：糖纸 */
.fin-wrap2{
  position:absolute;left:50%;top:50%;width:30vh;height:30vh;margin:-15vh 0 0 -15vh;z-index:7;
  display:grid;place-items:center;pointer-events:none;
  transform:scale(0) rotate(-24deg);opacity:0;
  transition:transform 1.1s cubic-bezier(.2,1.3,.4,1),opacity .6s;
}
.fin-wrap2 img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))}
.fin-wrap2.in{transform:scale(1) rotate(0);opacity:1}
.fin-wrap2.open{transform:scale(1.45) rotate(14deg);opacity:0;transition:transform .9s ease-in,opacity .9s}
.heartmode .fin-top{opacity:.12}
.finheart3d{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity 1.2s}
.finheart3d.on{opacity:1}
.finheart.off{opacity:0;transition:opacity .8s}