*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
:root{
  --bg0:#070810; --bg1:#0e0c18; --bg2:#171128;
  /* 动效/语义色 token（P3）：主出场/柔出/退场/弹簧/翻面 + boss红/绿区/冷银 */
  --ease-out:var(--ease-out); --ease-soft:var(--ease-soft);
  --ease-exit:cubic-bezier(.4,0,.2,1); --ease-spring:var(--ease-spring);
  --ease-flip:var(--ease-flip);
  --red:var(--red); --green:var(--green); --greenD:var(--greenD); --cool:150,172,215;
  --ink:#e9e6f2; --dim:#8a8aa0; --faint:#54546a;
  --gold:#ffd34d; --goldL:#fff0b8; --blue:#5aa6ff; --violet:#bd7dff;
  --rc:#9aa3b2;
}
html,body{height:100%;overflow:hidden;background:var(--bg0);color:var(--ink);
  font-family:"Noto Serif SC",serif;-webkit-font-smoothing:antialiased;touch-action:none}
#app{position:fixed;inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--bg2), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, #100b1c, transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  transition:background 1.2s ease}
/* 全局氛围随进度升温 */
#app.warm{--bg2:#1c1430}
#app.hot{--bg2:#241636}
/* 背景纹路：胶片噪点 + 同心环水印（呼应牌背），都极淡，只给底色加质感 */
#app::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}
#app::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-radial-gradient(circle at 50% 36%,
      transparent 0 88px, rgba(255,255,255,.016) 88px 89px),
    radial-gradient(circle at 50% 36%, rgba(255,211,77,.025), transparent 46%)}

/* ── 顶部：终极目标主进度条 ── */
#top{position:fixed;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 14px) 22px 0;
  z-index:30;opacity:0;transition:opacity .8s ease;pointer-events:none}
#top.show{opacity:1}
.toplabel{display:flex;justify-content:space-between;align-items:baseline;
  font-family:"Cinzel",serif;font-size:11px;letter-spacing:.18em;color:var(--dim);margin-bottom:6px}
#goalName{color:var(--faint);transition:color .6s,text-shadow .6s}
#top.reveal #goalName{color:var(--gold);text-shadow:0 0 14px rgba(255,211,77,.5)}
.bar{height:5px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.bar>i{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--violet),var(--gold));
  box-shadow:0 0 12px rgba(255,211,77,.45);transition:width .5s var(--ease-out)}

/* ── HUD：分数 / 等级 / 心力 ── */
#hud{position:fixed;top:calc(env(safe-area-inset-top) + 46px);left:0;right:0;
  display:flex;justify-content:center;gap:18px;z-index:30;pointer-events:none;
  font-family:"Cinzel",serif;font-size:12px;letter-spacing:.06em}
.chip{opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .5s;
  color:var(--dim);display:flex;align-items:center;gap:5px}
.chip.show{opacity:1;transform:none}
/* 新元素上线提示：三次金光脉冲 + 微弹（一次性，2.6s 后摘除） */
.newin{animation:newin 1.3s ease-in-out 2}
@keyframes newin{0%,100%{filter:none;transform:none}
  35%{filter:drop-shadow(0 0 10px var(--gold)) brightness(1.35);transform:scale(1.07)}
  55%{filter:drop-shadow(0 0 5px var(--gold)) brightness(1.15);transform:scale(1.02)}}
.chip b{color:var(--goldL);font-weight:700;font-variant-numeric:tabular-nums}
#energyDots{display:flex;gap:3px}
#energyDots i{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 6px rgba(255,211,77,.6);transition:opacity .3s,transform .3s}
#energyDots i.spent{opacity:.16;transform:scale(.7);box-shadow:none}

/* ── 卡片 ── */
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;
  padding-bottom:7vh}                                   /* 牌居中略抬，底部留旁白/提示紧凑区 */
@media(max-height:700px){ #stage>.card{width:min(66vw,250px)} }   /* 矮屏微缩（只缩主牌，别压选牌小卡） */
/* 选牌小卡在 #stage 内的宽度（ID 权重显式压住，防主牌规则串味） */
#stage .chooseWrap .ccard .card{width:min(40vw,180px)}
#stage .chooseWrap.n3 .ccard .card{width:min(34vw,150px)}   /* 品字两列，卡可更大 */
#stage .chooseWrap.n4 .ccard .card{width:min(36vw,150px)}
.card{width:min(76vw,290px);aspect-ratio:1/1.618;position:relative;perspective:1400px;container-type:inline-size;
  will-change:transform,opacity;scale:1;transition:scale .3s var(--ease-spring)}  /* 松手回弹（轻微过冲） */
.card.pressed{scale:.96;transition:scale .12s ease}                                         /* 按下收缩，即时反馈 */
.card.in{animation:cardin .5s var(--ease-out)}
@keyframes cardin{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s var(--ease-flip)}
.flip.flipped{transform:rotateY(180deg)}
.card.flippop{animation:cardpop .5s ease}
@keyframes cardpop{0%{transform:scale(.93)}45%{transform:scale(1.05)}100%{transform:scale(1)}}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.back{background:linear-gradient(160deg,#15182a,#0d0a16);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 50px rgba(0,0,0,.6)}
.back::before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.06);
  border-radius:12px;pointer-events:none}                              /* 卡背内细线框（常驻） */
.back::after{content:"❖";position:absolute;top:4.1cqw;left:0;right:0;text-align:center;
  font-size:3.1cqw;color:rgba(255,255,255,.14);pointer-events:none}       /* 上沿小徽记 */
.back .bpat{position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 10px,transparent 10px 20px)}
.back .bring{position:absolute;width:46%;aspect-ratio:1;border:1px solid rgba(255,255,255,.07);
  border-radius:50%;opacity:.45;transition:opacity .6s;pointer-events:none}   /* 中心环常驻淡显 */
.s-backorn .back .bpat{opacity:1}
.s-backorn .back .bring{opacity:1}
.back .glyph{font-size:14.5cqw;color:var(--faint);transition:opacity .25s;z-index:1}
.back .uphint{position:absolute;bottom:6.9cqw;font-size:4.1cqw;color:var(--faint);letter-spacing:.1em;z-index:1}
.card[data-r="R"] .back{box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 16px -6px var(--rc)}   /* R 蓝缘微光 */
.card[data-r="R"] .back .glyph{color:var(--rc)}

.front{transform:rotateY(180deg);display:block;
  background:linear-gradient(165deg,#16121f,#0b0810);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 50px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  transition:box-shadow .5s,border-color .5s}
.front::before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.055);
  border-radius:12px;pointer-events:none;z-index:1}                    /* 卡面内细线框（常驻；s-frame 亮版叠加） */
/* 容器-内容分层：HD 画作窗（纯画面，稀有度标识不再压它） */
.front .artwin{position:absolute;left:8px;right:8px;top:30px;height:47%;border-radius:9px;overflow:hidden;background:#0a0810}
.front .artwin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;   /* 图下主色细线 */
  background:linear-gradient(90deg,transparent,var(--rc,#9aa3b2),transparent);opacity:.3}
/* 模糊铺底（cover 填满，无黑边）*/
.front .artbg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
  transition:opacity .7s;filter:blur(16px) brightness(.55) saturate(1.1);transform:scale(1.12)}
.front.art-on .artbg{opacity:.85}
/* 清晰层：完整展示画作（contain，不裁切）*/
.front .artfg{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:0;
  transition:opacity .7s;filter:saturate(1.06) contrast(1.02)}
.front.art-on .artfg{opacity:1}
.front.art-on .artbg{opacity:1}
.front .artgrad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(11,8,16,.55) 80%,#0b0810)}
/* 文字台 */
.front .plate{position:absolute;left:0;right:0;top:calc(47% + 11.7cqw);bottom:9cqw;z-index:2;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2.1cqw;padding:1.4cqw 6.2cqw 0}
.front .divider{margin-top:auto}                       /* 介绍紧贴图片；大字在剩余空间居中 */
.front .poem{margin-bottom:auto}
/* 稀有度抬头条：卡牌上沿（档名左 / 星级右） */
.front .crown{position:absolute;top:8px;left:16px;right:16px;
  display:flex;justify-content:space-between;align-items:baseline;
  z-index:3;opacity:0;transition:opacity .55s .2s}
.front .crown .rt{font-family:"Cinzel",serif;font-size:3.4cqw;letter-spacing:.14em;color:var(--rc)}
.front .crown .stars{color:var(--rc);font-size:3.4cqw;letter-spacing:.12em;text-shadow:0 0 8px var(--rc)}
.r-on .front .crown{opacity:1}
.front .big{font-size:9.7cqw;font-weight:500;line-height:1.4;color:var(--ink);text-align:center;
  font-family:"Noto Serif SC",serif;text-shadow:0 2px 12px rgba(0,0,0,.65);transition:color .4s,text-shadow .4s}
.front .divider{width:32%;height:1px;opacity:0;transition:opacity .55s .34s;
  background:linear-gradient(90deg,transparent,var(--rc),transparent)}
.s-divider .front .divider{opacity:.6}
.front .meta{font-family:"Cormorant Garamond","Noto Serif SC",serif;font-size:4.3cqw;letter-spacing:.04em;
  color:var(--ink);text-align:left;opacity:0;transition:opacity .55s .3s}
.front.art-on .meta{opacity:.92}                                       /* 介绍贴图下，左对齐 */
.front .tagline{font-family:"Cormorant Garamond","Noto Serif SC",serif;font-size:4cqw;
  color:var(--dim);text-align:left;opacity:0;transition:opacity .55s .42s;
  margin-top:-4px;line-height:1.45}
.front.art-on .tagline{opacity:.8}
.front .big{align-self:center}
.front .divider{align-self:center}
.front .pline{font-family:"Cormorant Garamond","Noto Serif SC",serif;font-size:4.1cqw;
  color:var(--goldL);text-align:center;opacity:0;transition:opacity .55s .46s;margin-top:-2px;
  text-shadow:0 1px 8px #000}                              /* 原则招供句：跟在原则名下 */
.front.art-on .pline{opacity:.85}
.front .poem{font-family:"Cormorant Garamond","Noto Serif SC",serif;font-size:4.8cqw;line-height:1.55;
  color:var(--ink);text-align:center;opacity:0;transform:translateY(6px);
  transition:opacity .55s .5s,transform .55s .5s;text-shadow:0 1px 8px #000}   /* 剧情行=设计师正体白字，与金斜体招供句拉开 */
.front.story .poem{opacity:.9;transform:none}
/* 卡面装饰：随机制解锁逐层叠加 */
.front .frame{position:absolute;inset:5px;border:1px solid rgba(255,255,255,.14);border-radius:12px;
  opacity:0;transition:opacity .5s;pointer-events:none;z-index:1}
.s-frame .front .frame{opacity:1}
.front .corner{position:absolute;width:14px;height:14px;border:1.5px solid var(--rc);opacity:0;
  transition:opacity .5s;pointer-events:none;z-index:3}
.front .corner.c1{left:5px;top:5px;border-right:0;border-bottom:0;border-top-left-radius:12px}
.front .corner.c2{right:5px;top:5px;border-left:0;border-bottom:0;border-top-right-radius:12px}
.front .corner.c3{left:5px;bottom:5px;border-right:0;border-top:0;border-bottom-left-radius:12px}
.front .corner.c4{right:5px;bottom:5px;border-left:0;border-top:0;border-bottom-right-radius:12px}
.s-corners .front .corner{opacity:.85}
/* 底栏：序列号左对齐 / 限量年份右对齐，留边不贴 */
.front .serial{position:absolute;bottom:9px;left:0;right:0;z-index:3;display:flex;justify-content:space-between;
  padding:0 16px;font-family:"Cinzel",serif;font-size:2.9cqw;letter-spacing:.16em;color:var(--faint);opacity:.6}
.front .serial .ed{opacity:.75}
/* 稀有度：描边/辉光随档升级 */
.r-on .front{border-color:var(--rc)}
.r-on[data-r="R"] .front{box-shadow:0 0 0 1px var(--rc),0 0 18px -6px var(--rc),0 18px 50px rgba(0,0,0,.6)}
.r-on[data-r="SR"] .front{box-shadow:0 0 0 1px var(--rc),0 0 30px -4px var(--rc),0 18px 50px rgba(0,0,0,.6)}
.r-on[data-r="SSR"] .front{box-shadow:0 0 0 1px var(--rc),0 0 48px -2px var(--rc),0 18px 50px rgba(0,0,0,.6)}
.r-on[data-r="SR"] .front .big{color:#efe9ff}
.r-on[data-r="SSR"] .front .big{color:var(--goldL);text-shadow:0 0 18px rgba(255,211,77,.35),0 2px 12px rgba(0,0,0,.6)}
.r-on[data-r="R"] .front .frame{border-color:rgba(90,166,255,.4)}
.r-on[data-r="SR"] .front .frame{border-color:rgba(189,125,255,.5)}
.r-on[data-r="SSR"] .front .frame{border-color:rgba(255,211,77,.6)}
.r-on[data-r="SSR"] .front .corner{border-width:2px}
/* 金箔：SR/SSR 静态流光 */
.front .foil{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:overlay;background-size:220% 220%;
  background:linear-gradient(125deg,transparent 18%,rgba(255,255,255,.4) 36%,transparent 46%,transparent 56%,rgba(255,211,77,.35) 66%,transparent 82%)}
.s-foil[data-r="SR"] .front .foil,.s-foil[data-r="SSR"] .front .foil{opacity:.5;animation:foilshift 6s linear infinite}
@keyframes foilshift{0%{background-position:0 0}100%{background-position:220% 220%}}
.front .holo{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  background-size:300% 300%}
.front.sheen .holo{animation:sheen .7s ease}
@keyframes sheen{from{opacity:.7;background-position:120% 0}to{opacity:0;background-position:-40% 0}}
/* 揭示光环：翻面瞬间从中心扩散 */
.front .ring{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;
  border:2px solid var(--rc);border-radius:50%;opacity:0;pointer-events:none;z-index:3}
.front.sheen .ring{animation:ringout .65s ease-out}
@keyframes ringout{0%{opacity:.85;transform:scale(.3)}100%{opacity:0;transform:scale(3.6)}}
/* 翻面后内容错峰升起 */
.card.flippop .front .big{animation:bigrise .55s var(--ease-soft) .12s both}
@keyframes bigrise{0%{opacity:0;transform:translateY(12px) scale(.92)}100%{opacity:1;transform:none}}
.card.float .flip{animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotateY(180deg) translateY(0)}50%{transform:rotateY(180deg) translateY(-7px)}}
/* 高级牌留背等手翻：SR 紫辉快现，SSR 金光慢酝酿（蓄力时长=中奖预期） */
.card.wait-sr .back{animation:srin .3s ease both,breathe 1.8s .3s ease-in-out infinite}
.card.wait-sr .back .glyph{color:var(--rc);text-shadow:0 0 22px var(--rc)}
.card.wait-ssr .back{animation:srin .6s ease both,breathe 1.3s .6s ease-in-out infinite}
.card.wait-ssr .back .glyph{color:var(--gold);text-shadow:0 0 32px var(--gold);animation:breatheglyph 1.3s ease-in-out infinite}
@keyframes srin{from{box-shadow:0 0 0 rgba(0,0,0,0)}to{box-shadow:0 0 34px -4px var(--rc)}}
@keyframes breatheglyph{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes breathe{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--rc,#ffd34d) 28%,transparent),0 18px 50px rgba(0,0,0,.6)}
  50%{box-shadow:0 0 30px 2px color-mix(in srgb,var(--rc,#ffd34d) 62%,transparent),0 18px 50px rgba(0,0,0,.6)}}

/* 紧张感：四周泛红脉动（稀缺/危险） */
#danger{position:fixed;inset:0;z-index:14;pointer-events:none;opacity:0;transition:opacity .6s;
  box-shadow:inset 0 0 150px 36px rgba(214,46,46,.5);
  background:radial-gradient(120% 92% at 50% 50%, transparent 52%, rgba(176,22,22,.3))}
#danger.on{opacity:1;animation:dangerpulse 1.25s ease-in-out infinite}
@keyframes dangerpulse{0%,100%{opacity:.5}50%{opacity:1}}
/* 闪光 */
#flash{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%, var(--bc,#fff), transparent 55%)}
#flash.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:var(--int,.4)}100%{opacity:0}}
.burstdot{position:fixed;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--pc,var(--gold));box-shadow:0 0 8px var(--pc,var(--gold));z-index:16;pointer-events:none;
  animation:burst .9s ease-out forwards}
@keyframes burst{to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}
/* 飘分 */
.scorepop{position:fixed;left:50%;top:42%;transform:translateX(-50%);z-index:17;pointer-events:none;
  font-family:"Cinzel",serif;font-weight:700;font-size:26px;color:var(--goldL);
  text-shadow:0 0 16px var(--gold);animation:popup 1s ease-out forwards}
@keyframes popup{from{opacity:0;transform:translate(-50%,10px)}
  20%{opacity:1}to{opacity:0;transform:translate(-50%,-46px)}}

/* 作者署名：结局页底部，点击去 GitHub */
#end .author{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 20px);left:50%;
  transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;
  font-family:"Cinzel",serif;font-size:12px;letter-spacing:.2em;white-space:nowrap;
  color:var(--goldL);text-decoration:none;padding:9px 20px;border-radius:22px;
  border:1px solid rgba(255,211,77,.5);background:rgba(255,211,77,.08);
  box-shadow:0 0 18px -4px rgba(255,211,77,.35);
  opacity:0;transition:opacity .8s 1.4s,box-shadow .3s,background .3s;
  animation:authorglow 3s ease-in-out infinite}
#end .author b{color:var(--gold);font-weight:600}
#end .author .adot{color:var(--gold);font-size:10px}
#end .author .aarr{color:var(--gold)}
#end.show .author{opacity:1}
#end .author:hover{background:rgba(255,211,77,.16);box-shadow:0 0 26px -2px rgba(255,211,77,.55)}
@keyframes authorglow{0%,100%{box-shadow:0 0 18px -4px rgba(255,211,77,.3)}
  50%{box-shadow:0 0 24px -2px rgba(255,211,77,.5)}}

/* ── 死亡屏（魂系幽默版）+ ∞ 心力 ── */
.deadveil{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;background:rgba(0,0,0,.0);opacity:0;transition:opacity .8s;pointer-events:none}
.deadveil.on{opacity:1;background:rgba(0,0,0,.86)}
.deadveil .dt{font-family:"Cinzel","Noto Serif SC",serif;font-size:54px;letter-spacing:.22em;
  color:#a31f1f;text-shadow:0 0 34px rgba(163,31,31,.6);transform:scale(.92);transition:transform 2.2s ease}
.deadveil.on .dt{transform:scale(1.04)}
.deadveil .ds{font-size:14px;color:var(--dim)}
#energyDots .inf{color:var(--gold);font-size:15px;text-shadow:0 0 10px var(--gold);vertical-align:middle}
/* 玻璃表面层（终幕黑镜）：边缘雾水珠向心收 + 全场灯光压暗 */
.mfx{position:fixed;inset:0;z-index:18;width:100vw;height:100vh;pointer-events:none;
  opacity:0;transform:scale(1.12);transition:opacity 2.8s ease,transform 6s cubic-bezier(.2,.6,.3,1)}
.mfx.on{opacity:1;transform:scale(1)}
#app.lights-off{transition:filter 2s}                       /* 压亮度：反射更显 */
/* 屏幕级镜框：淡金属斜切边，潜意识把整块屏认作一面镜子 */
.mframe{position:fixed;inset:7px;z-index:19;pointer-events:none;border-radius:24px;
  border:1.5px solid rgba(190,200,215,.16);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.07),inset -1px -1px 0 rgba(0,0,0,.5),
    inset 0 0 0 3px rgba(120,128,145,.05);
  opacity:0;transition:opacity 2.6s}
.mframe.on{opacity:1}
.mframe::before{content:"";position:absolute;inset:5px;border-radius:20px;
  border:1px solid rgba(255,255,255,.05)}                   /* 内圈第二道斜切 */
#app.lights-off #top,#app.lights-off #hud,#app.lights-off #say{opacity:.12;transition:opacity 2s}

/* ── 终幕：黑镜牌 + SSS《你》卡 ── */
.card.blackmirror{transform:scale(.4);opacity:0;transition:transform 3.4s cubic-bezier(.25,.6,.3,1),opacity 1s}
.card.blackmirror.grow{transform:scale(1.06);opacity:1}
.card.blackmirror::before{content:"";position:absolute;inset:-34%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle, rgba(var(--cool),.14), rgba(var(--cool),.05) 45%, transparent 68%);
  animation:mhalo 4s ease-in-out infinite}                      /* 冷光背晕：黑牌从黑底里浮出来 */
@keyframes mhalo{0%,100%{opacity:.7}50%{opacity:1}}
.card.blackmirror .mface{position:absolute;inset:0;border-radius:16px;background:#000;
  border:1px solid rgba(var(--cool),.2);                       /* 边缘提亮：冷银勾边 */
  box-shadow:0 24px 80px rgba(0,0,0,.9),0 0 34px -6px rgba(var(--cool),.25),
    inset 0 0 0 1px rgba(255,255,255,.03);overflow:hidden}
.card.blackmirror .mgloss{position:absolute;inset:0;                           /* 一道极淡斜光：暗示镜面 */
  background:linear-gradient(118deg,transparent 42%,rgba(255,255,255,.045) 50%,transparent 58%)}
.card.sss{opacity:0;transform:translateY(26px) scale(.94)}
.card.sss.in{opacity:1;transform:none;transition:opacity .7s,transform .7s var(--ease-out)}
.card.sss .sssin{position:absolute;inset:0;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:22px;
  background:linear-gradient(160deg,#191227,#0a0814 60%,#120e20)}
.card.sss .sssin::before{content:"";position:absolute;inset:-30%;pointer-events:none;   /* 指纹纹理：限量 1/1 = 你的指纹 */
  background:
    repeating-radial-gradient(ellipse 60% 78% at 50% 46%, transparent 0 7px, rgba(255,255,255,.028) 7px 8.5px),
    repeating-radial-gradient(ellipse 70% 60% at 52% 55%, transparent 0 9px, rgba(255,211,77,.02) 9px 10.5px);
  transform:rotate(-8deg)}
.card.sss::before{content:"";position:absolute;inset:-3px;border-radius:19px;z-index:-1;   /* 旋转彩虹描边 */
  background:conic-gradient(from var(--ha,0deg),#ffd34d,#ff7ab8,#8a6bff,#5ad7ff,var(--green),#ffd34d);
  animation:huespin 5s linear infinite;filter:blur(.5px)}
@property --ha{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes huespin{to{--ha:360deg}}
.card.sss{box-shadow:0 0 60px -8px rgba(255,180,255,.45),0 24px 80px rgba(0,0,0,.8)}
.card.sss .crown{display:flex;justify-content:space-between;width:100%;font-family:"Cinzel",serif;font-size:11px;letter-spacing:.14em}
.card.sss .crown .rt{background:linear-gradient(90deg,#ffd34d,#ff7ab8,#8a6bff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.card.sss .crown .stars{background:linear-gradient(90deg,#5ad7ff,var(--green),#ffd34d);-webkit-background-clip:text;background-clip:text;color:transparent}
.card.sss .ybig{font-size:88px;font-weight:500;font-family:"Noto Serif SC",serif;line-height:1.1;
  background:linear-gradient(135deg,#fff6d8,#ffd34d 35%,#ff9ad0 65%,#9bd8ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(255,211,77,.35))}
.card.sss .ymeta{font-size:11.5px;color:var(--ink);opacity:.9;text-align:center}
.card.sss .ytag{font-family:"Cormorant Garamond","Noto Serif SC",serif;font-size:15px;
  background:linear-gradient(90deg,#ffd34d,#ff9ad0);-webkit-background-clip:text;background-clip:text;color:transparent}
.card.sss .yserial{position:absolute;bottom:14px;left:18px;right:18px;display:flex;justify-content:space-between;
  font-family:"Cinzel",serif;font-size:9px;letter-spacing:.18em;color:var(--dim)}

/* ── 启动加载 ── */
#boot{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;background:var(--bg,#0b0a12);transition:opacity .5s}
#boot.off{opacity:0;pointer-events:none}
#boot .bttl{font-family:"Cinzel",serif;font-size:13px;letter-spacing:.3em;color:var(--gold)}
#boot .bb{width:min(52vw,210px);height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
#boot #bootFill{display:block;height:100%;width:0;background:var(--gold);
  box-shadow:0 0 8px var(--gold);transition:width .25s ease}

/* ── 设计师旁白 ── */
#say{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 44px);
  z-index:25;text-align:center;padding:0 28px;pointer-events:none}
#say .line{font-size:15px;line-height:1.5;color:var(--ink);opacity:0;
  transform:translateY(8px);transition:opacity .55s,transform .55s;
  text-shadow:0 2px 14px rgba(0,0,0,.7)}
#say .line.show{opacity:1;transform:none}
#say .line.dim{color:var(--dim)}
/* 层尾洞见 */
#insight{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 44px);
  z-index:26;text-align:center;padding:0 30px;opacity:0;transition:opacity .6s;pointer-events:none}
#insight.show{opacity:1}
#insight.cinema{bottom:50%;transform:translateY(50%);transition:opacity 1.1s}   /* 片头字幕：屏幕正中，缓显 */
#insight .txt{position:relative}
#insight .iline{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s var(--ease-out)}
#insight .iline.on{opacity:1;transform:none}
#insight .iline.sh{position:absolute;left:0;right:0;top:0;pointer-events:none;
  transform:translateY(-16px);transition:transform .9s ease}            /* 旧句整行上移 */
#insight .iline .chx{display:inline-block;white-space:pre}
#insight .iline.sh .chx{animation:chshat .85s ease-out forwards}        /* 逐字破碎飘散 */
@keyframes chshat{to{transform:translate(var(--dx,0),var(--dy,-20px)) rotate(var(--rt,0));
  opacity:0;filter:blur(2px)}}
#insight.cinema .txt{letter-spacing:.06em;line-height:1.9;max-width:21em;margin:0 auto}
#insight.cinema .iline.cur{animation:insbreath 4s ease-in-out infinite}
@keyframes insbreath{0%,100%{text-shadow:0 0 14px rgba(233,230,242,.12)}50%{text-shadow:0 0 22px rgba(233,230,242,.22)}}
#insight .txt .k{color:var(--gold);font-style:normal;
  text-shadow:0 0 14px rgba(255,211,77,.45)}                                      /* 重点词：金色发光 */
#insight.cinema .txt .k{font-size:1.12em}
#insight .txt{font-family:"Cormorant Garamond","Noto Serif SC",serif;
  font-size:19px;color:var(--goldL);text-shadow:0 0 18px rgba(255,211,77,.35)}

/* ── 手势提示 ── */
#hint{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 14px);
  z-index:24;text-align:center;color:var(--faint);font-size:12px;letter-spacing:.12em;
  opacity:0;transition:opacity .5s}
#hint.show{opacity:1}
#hint .arr{display:inline-block;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-6px);opacity:1}}

#touchlayer{position:fixed;inset:0;z-index:40;background:transparent}

/* ── 哲学 / 结局覆盖层 ── */
.veil{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:40px 32px;
  background:radial-gradient(120% 90% at 50% 40%,#0c0a16,#050509);
  pointer-events:none}                       /* veil 在 touchlayer(z40) 之上：放行触摸给手势层，按钮单独收 */
.veil.show{display:flex}
.veil .ebtn,.veil .author,.veil .ccard{pointer-events:auto}
#philo .pl{font-size:20px;line-height:2;color:var(--ink);opacity:0;
  transform:translateY(10px);transition:opacity 1s,transform 1s;max-width:22em}
#philo .pl.show{opacity:1;transform:none}
#philo .pl.key{color:var(--goldL);text-shadow:0 0 20px rgba(255,211,77,.4)}
#philo .go{margin-top:34px;font-size:13px;color:var(--faint);letter-spacing:.14em;
  opacity:0;transition:opacity .8s}
#philo .go.show{opacity:.8}

/* 语言选择（开局钩子） */
#lang{gap:0}
#lang .langttl{font-family:"Cinzel",serif;font-size:13px;letter-spacing:.22em;color:var(--gold);margin-bottom:6px}
#lang .langsub{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.24em;color:var(--dim);margin-bottom:38px}
#lang .langcards{display:flex;gap:24px;align-items:center;justify-content:center}
@media(hover:hover){  }
                                  /* 语言卡按下反馈 */
/* ── 通用 N 选一 ── */
.chooseWrap{display:flex;gap:24px;align-items:center;justify-content:center}
.chooseWrap.n3{display:grid;grid-template-columns:repeat(2,auto);gap:14px;justify-content:center}
.chooseWrap.n3 .ccard:first-child{grid-column:1/3;justify-self:center}   /* 品字：上一下二 */
.chooseWrap.n4{display:grid;grid-template-columns:repeat(2,auto);gap:16px;justify-content:center}
.chooseWrap .ccard{cursor:pointer;animation:cardin .7s var(--ease-out) both}
.chooseWrap .ccard:nth-child(2){animation-delay:.13s}
.chooseWrap .ccard:nth-child(3){animation-delay:.26s}
.chooseWrap .ccard:nth-child(4){animation-delay:.39s}
.chooseWrap .ccard .card{position:relative;width:min(40vw,180px)}
.chooseWrap.n3 .ccard .card{width:min(28vw,140px)}
.chooseWrap.n4 .ccard .card{width:min(38vw,160px)}
.chooseWrap .ccard:active .card{scale:.96}
.chooseWrap .settle .card{transform:none!important;scale:1!important;       /* 选中先回原位齐平再翻 */
  transition:transform .22s ease,scale .22s ease,filter .22s;filter:none!important}
.chooseWrap .card.waiting .back{animation:breathe 2.2s ease-in-out infinite}  /* 牌背微光候选 */
.chooseWrap .ccard-out{transition:opacity .5s,transform .5s;opacity:0;transform:scale(.9);pointer-events:none}
.chooseWrap .chint{margin-top:14px;text-align:center;font-size:13px;letter-spacing:.3em;
  color:var(--dim);transition:opacity .4s}                            /* 牌背题注（翻面即淡出） */
.chooseWrap .nudge-pick .card .back{animation:breathe 1.4s ease-in-out infinite}  /* 引导位：呼吸更急更亮 */
.chooseWrap .nudge-pick .chint{color:var(--goldL)}
/* 小牌强制排版：chooser/pick 卡宽 ~140-180px，字号锁死防溢出（!important 压内联） */
.chooseWrap .card .plate{gap:5px;padding:0 10px;bottom:14px}
.chooseWrap .card .poem{display:none}                                /* 小牌不放剧情行 */
.chooseWrap .card .meta,.chooseWrap .card .tagline{text-align:center}  /* 选牌小卡介绍仍居中 */
/* 目标梯度：进度 ≥70% 末段视觉加速（更亮+脉冲+填充提速感） */
#top.tierup #goalFill{filter:brightness(1.7) drop-shadow(0 0 12px var(--gold))}
#top.gg #goalFill{filter:brightness(1.25) drop-shadow(0 0 6px var(--gold));
  animation:ggpulse 1s ease-in-out infinite;transition:width .25s ease-out}
@keyframes ggpulse{0%,100%{opacity:1}50%{opacity:.82}}
/* 终极目标满条：进度条高光脉冲（climax 时刻全场只看它） */
#top.climax{transform:scale(1.12);transform-origin:center top;transition:transform .8s var(--ease-out)}
#top.climax #goalFill{animation:goalblaze 1.2s ease-in-out infinite}
@keyframes goalblaze{0%,100%{box-shadow:0 0 10px var(--gold)}50%{box-shadow:0 0 30px var(--gold),0 0 60px rgba(255,211,77,.5)}}
/* boss beat：上 Boss 牌探头 / 下蓄力牌变小；绿区指示；冲撞打击感 */
.bossArena{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;padding:0 0 12vh}
/* 宽度同时受 vw 与 vh 约束：矮屏自动缩，双牌永不相撞（卡高=宽×1.618） */
#stage .bossArena .card.bossTop{width:min(78vw,300px,30vh);margin-top:-16vh}  /* Boss 巨大压顶，只露下半（压迫感） */
#stage .bossArena .card.chargeCard{width:min(54vw,210px,24vh)}                /* 蓄力牌居中待命 */
.card.bossTop .back{animation:breathe 1.6s ease-in-out infinite}
.card.bossTop .back .glyph{color:var(--red);text-shadow:0 0 28px var(--red);font-size:15cqw}
.card.chargeCard .back .glyph{color:var(--gold);text-shadow:0 0 18px var(--gold)}
/* 蓄力表：卡右侧独立竖表，绿带=安全区（卡背图案零重叠） */
.chargeRow{position:relative;display:flex;justify-content:center}        /* 牌正居中 */
.cgauge{position:absolute;left:calc(100% + 12px);top:0;bottom:0;width:7px;  /* 蓄力表贴牌右侧，不挤占居中 */
  border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.cgauge .gzone{position:absolute;left:0;right:0;background:rgba(122,255,170,.16);
  border-top:1.5px solid var(--greenD);border-bottom:1.5px solid var(--greenD)}
.cgauge .gfill{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:4px;
  background:linear-gradient(to top,#caa53d,#ffd34d);box-shadow:0 0 10px rgba(255,211,77,.7);transition:height .05s linear}
.cgauge.inzone .gfill{background:linear-gradient(to top,#3fd97a,#8effb8);box-shadow:0 0 12px var(--green)}
.cgauge.overheat .gfill{background:linear-gradient(to top,#ff2a2a,#ff7a3a);box-shadow:0 0 14px #ff2a2a}
.card.chargeCard.inzone .back{box-shadow:0 0 36px -4px var(--green)}
.card.chargeCard.inzone .back .uphint{color:var(--green)}
.card.chargeCard.overheat .back{box-shadow:0 0 44px -2px #ff2a2a}
/* 打击感：冲撞-顿帧-震退 */
.card.chargeCard.lunge-weak{animation:lungeweak .8s cubic-bezier(.3,.7,.4,1)}
@keyframes lungeweak{0%{transform:none}28%{transform:translateY(-46%)}      /* 冲一半 */
  45%{transform:translateY(-40%)}100%{transform:none}}                       /* 滑落弹回 */
.card.bossTop.mock{animation:mock .5s ease}
@keyframes mock{0%,100%{transform:none}30%{transform:rotate(-4deg)}65%{transform:rotate(3deg)}}
.card.chargeCard.lunge-hit{animation:lungehit .24s cubic-bezier(.5,0,1,.6) forwards}
@keyframes lungehit{to{transform:translateY(-88%) scale(.97)}}               /* 全速冲撞 */
.card.chargeCard.recoil{animation:recoil .5s var(--ease-soft) .08s forwards}  /* 顿帧 80ms 后回弹 */
@keyframes recoil{from{transform:translateY(-88%) scale(.97)}to{transform:none}}
.card.bossTop.staggered{animation:stagger .55s var(--ease-soft) .08s}
@keyframes stagger{0%{transform:none}25%{transform:translateY(-26px) scale(1.07) rotate(2deg)}
  55%{transform:translateY(-8px) scale(1.02) rotate(-1.5deg)}100%{transform:none}}
.card.chargeCard.blast{animation:blastout .85s ease}
.card.chargeCard.blast .back{filter:brightness(.45) sepia(.6) hue-rotate(-30deg)}
@keyframes blastout{0%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(.94) rotate(2deg)}
  50%{transform:scale(1.04) rotate(-2deg)}100%{transform:scale(1)}}
/* 选牌 beat：选后揭示全部——错过的高级牌发光，其余压暗（near-miss 视觉核心） */
.pickWrap{padding:0 10px}
.pickWrap .ccard{cursor:pointer}
.pickWrap .missed{filter:grayscale(.7) brightness(.5);transition:filter .6s}
.pickWrap .chosen{position:relative}
.pickWrap .chosen .card{outline:1.5px solid rgba(233,230,242,.65);outline-offset:4px;border-radius:16px}
.pickWrap .chosen::before{content:attr(data-label);position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.18em;color:var(--ink);white-space:nowrap;text-shadow:0 1px 6px #000}
.pickWrap .missed-hot{animation:misshot 1.6s ease-in-out infinite}
@keyframes misshot{0%,100%{filter:brightness(1.05) drop-shadow(0 0 18px var(--rc))}
  50%{filter:brightness(1.25) drop-shadow(0 0 34px var(--rc))}}
#lang .langtip{margin-top:34px;font-family:"Cinzel",serif;font-size:11px;letter-spacing:.18em;color:var(--faint);opacity:0;animation:langfade 1s 1.1s forwards}
@keyframes langfade{to{opacity:.65}}
/* 选择 */
#choice .q{font-size:22px;color:var(--ink);margin-bottom:46px;opacity:0;transition:opacity 1s}
#choice .q.show{opacity:1}
#choice .opts{display:flex;flex-direction:column;gap:26px;opacity:0;transition:opacity 1s .4s}
#choice .opts.show{opacity:1}
#choice .opt{display:flex;align-items:center;gap:12px;justify-content:center;
  font-size:17px;color:var(--dim)}
#choice .opt .g{font-family:"Cinzel",serif;font-size:12px;letter-spacing:.1em;
  color:var(--gold);border:1px solid rgba(255,211,77,.4);border-radius:20px;padding:5px 12px}

/* 结局卡 */
#end .card-final{width:min(80vw,300px);aspect-ratio:1/1.618;border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  position:relative;overflow:hidden;animation:cardin .8s ease;
  box-shadow:0 24px 70px rgba(0,0,0,.7)}
#end .card-final .ec{font-size:88px;font-weight:300}
#end .card-final .el{font-family:"Cormorant Garamond","Noto Serif SC",serif;
  font-size:22px;text-align:center;padding:0 26px;line-height:1.5}
#end .card-final .tag{position:absolute;bottom:18px;font-family:"Cinzel",serif;
  font-size:10px;letter-spacing:.2em;opacity:.6}
#end .ebtns{margin-top:34px;display:flex;gap:16px;opacity:0;transition:opacity .8s .5s}
#end .ebtns.show{opacity:1}
#end .ebtn{font-family:"Cinzel",serif;font-size:13px;letter-spacing:.1em;color:var(--ink);
  border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:11px 22px;
  background:rgba(255,255,255,.04);cursor:pointer;transition:background .2s,border-color .2s,transform .2s,color .2s}

/* 分享弹层 */
#share{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(5,5,9,.86);backdrop-filter:blur(8px);padding:24px;flex-direction:column;gap:18px}
#share.show{display:flex}
#share canvas{max-width:min(86vw,360px);max-height:64vh;border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.7)}
#share .srow{display:flex;gap:14px}
#share .srow[hidden]{display:none}
#share .sbtn{font-family:"Cinzel",serif;font-size:13px;letter-spacing:.08em;color:var(--ink);
  border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:11px 22px;background:rgba(255,255,255,.05);
  cursor:pointer;transition:background .2s,border-color .2s,transform .2s,color .2s}
@media(hover:hover){ .sbtn:hover,.ebtn:hover{background:rgba(255,211,77,.12);border-color:rgba(255,211,77,.55);color:#fff;transform:translateY(-2px)}
  #mute:hover{opacity:1!important}
  #choice .opt{transition:color .2s} #choice .opt:hover{color:var(--goldL);cursor:pointer} }
#share .tip{color:var(--dim);font-size:12px}

#mute{position:fixed;top:calc(env(safe-area-inset-top) + 12px);right:14px;z-index:45;
  color:var(--faint);font-size:18px;opacity:.5;pointer-events:auto}
#kbd{position:fixed;bottom:8px;left:0;right:0;text-align:center;font-size:10px;
  color:var(--faint);opacity:.35;z-index:20}

/* 中文不用斜体；英文界面恢复（CJK 斜体=机械倾斜，难看） */
:lang(en) .front .tagline,:lang(en) .front .pline,:lang(en) .deadveil .ds,
:lang(en) .card.sss .ytag,:lang(en) #say .line.dim,:lang(en) #insight .txt,
:lang(en) #end .card-final .el{font-style:italic}

/* 开场金粒：缓升微光（宣告氛围，结束移除） */
.floatdot{position:fixed;bottom:-3vh;width:4px;height:4px;border-radius:50%;z-index:24;
  background:var(--gold);box-shadow:0 0 8px rgba(255,211,77,.55);opacity:0;
  pointer-events:none;transition:opacity 1.2s;animation:floatup 12s linear infinite}
@keyframes floatup{0%{transform:translateY(0);opacity:0}12%{opacity:.5}
  85%{opacity:.35}100%{transform:translateY(-108vh);opacity:0}}

/* 首页分享按钮：淡金胶囊，置语言卡下方 */
.sharegame{margin-top:26px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:"Cinzel","Noto Serif SC",serif;font-size:11px;letter-spacing:.2em;color:var(--dim);
  padding:8px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);transition:color .3s,border-color .3s,background .3s;pointer-events:auto}
.sharegame:hover{color:var(--goldL);border-color:rgba(255,211,77,.5);background:rgba(255,211,77,.08)}