:root{
  --bg:#120d03; --bg2:#1d1606; --ink:#fff6dc; --muted:rgba(255,246,220,.7); --rose:#ffb3c4; --rose2:#ff8fab;
  --y:#f7c948; --y2:#ffdf6e; --y3:#e0a812; --gold:#c9972b;
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans:-apple-system,"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
#app{position:fixed;inset:0;overflow:hidden}

/* 背景 */
.bg{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#2b2108 0%,var(--bg) 60%)}
.bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;animation:float 14s ease-in-out infinite}
.bg i:nth-child(1){width:60vw;height:60vw;background:#f7c948;left:-15vw;top:-10vw}
.bg i:nth-child(2){width:50vw;height:50vw;background:#ff9fb3;right:-20vw;top:40vh;animation-delay:-5s;opacity:.18}
.bg i:nth-child(3){width:70vw;height:70vw;background:#ffe08a;left:10vw;bottom:-40vw;animation-delay:-9s;opacity:.2}
@keyframes float{50%{transform:translate(6vw,4vh) scale(1.1)}}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}

.eyebrow{font-size:11px;letter-spacing:.35em;color:var(--y);opacity:.85;text-transform:uppercase}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none;transition:opacity .8s ease;padding:calc(var(--safe-t) + 24px) 20px calc(var(--safe-b) + 24px)}
.screen.active{opacity:1;pointer-events:auto}

/* ---------- 开场 ---------- */
#intro{justify-content:center;gap:42px}
.intro-top{text-align:center}
.intro-title{font-family:var(--serif);font-size:40px;font-weight:600;letter-spacing:.2em;margin-top:12px;background:linear-gradient(180deg,#fff3c4,#f7c948 60%,#c9972b);-webkit-background-clip:text;background-clip:text;color:transparent}
.envelope{position:relative;width:min(78vw,320px);aspect-ratio:1.45;perspective:900px}
.env-back,.env-front,.env-flap{position:absolute;inset:0;border-radius:10px}
.env-back{background:#e9b929}
.env-paper{position:absolute;left:7%;right:7%;top:8%;bottom:8%;background:#fffaf0;border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;color:#6b4e0b;font-family:var(--serif);font-size:16px;line-height:1.9;transition:transform 1s cubic-bezier(.2,.8,.2,1) .5s;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.env-front{background:linear-gradient(155deg,#ffd75e 0%,#f2bf2e 100%);clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -20px 40px rgba(150,100,0,.25)}
.env-flap{background:linear-gradient(180deg,#ffe07a,#f0bb28);clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:top;transition:transform .9s cubic-bezier(.5,0,.2,1);z-index:3;filter:drop-shadow(0 4px 6px rgba(120,80,0,.3))}
.seal{position:absolute;left:50%;top:52%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;z-index:4;background:radial-gradient(circle at 35% 30%,#d2412f,#8f1d12 70%);color:#ffd9a0;font-family:var(--serif);font-size:24px;font-weight:700;box-shadow:0 6px 16px rgba(80,10,0,.5),inset 0 -4px 8px rgba(0,0,0,.3),inset 0 3px 6px rgba(255,255,255,.2);animation:pulse 2.2s ease-in-out infinite;transition:transform .5s,opacity .5s}
@keyframes pulse{50%{transform:scale(1.08);box-shadow:0 6px 30px rgba(247,201,72,.6),inset 0 -4px 8px rgba(0,0,0,.3)}}
.envelope.open .seal{transform:scale(1.6);opacity:0;animation:none}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:0}
.envelope.open .env-paper{transform:translateY(-62%);z-index:2}
.tap-hint{color:#ffe9a8;font-size:13px;letter-spacing:.2em;animation:blink 2s infinite}
@keyframes blink{50%{opacity:.3}}

/* ---------- 主界面 ---------- */
#hub{justify-content:flex-start;overflow-y:auto}
.hub-head{text-align:center;margin-top:6px}
.hub-title{font-family:var(--serif);font-size:30px;letter-spacing:.15em;margin:8px 0 18px}
.digits{display:flex;gap:10px;justify-content:center}
.digits span{width:42px;height:52px;border-radius:10px;border:1px solid rgba(247,201,72,.35);background:rgba(247,201,72,.06);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:var(--y);font-family:var(--serif);transition:all .5s}
.digits span.on{background:linear-gradient(160deg,#ffe58f,#f2b818);color:#3a2a03;border-color:transparent;box-shadow:0 0 20px rgba(247,201,72,.5);animation:pop .6s}
@keyframes pop{40%{transform:scale(1.25)}}
.digits-tip{font-size:12px;color:var(--muted);margin-top:10px;letter-spacing:.05em}
.boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 14px;width:100%;max-width:400px;margin:30px auto 24px}
.box{position:relative;aspect-ratio:.85;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px}
.box .cube{position:relative;width:78%;aspect-ratio:1;transition:transform .4s}
.box .lid,.box .body{position:absolute;left:0;right:0;border-radius:8px}
.box .body{bottom:0;height:72%;background:linear-gradient(160deg,#ffd95a,#e5a50e);box-shadow:inset -8px -8px 16px rgba(140,80,0,.35),0 10px 20px rgba(0,0,0,.4)}
.box .lid{top:6%;height:30%;left:-6%;right:-6%;background:linear-gradient(160deg,#ffe58f,#f0b519);box-shadow:inset 0 -6px 10px rgba(140,80,0,.3),0 4px 8px rgba(0,0,0,.25);z-index:2;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.box .ribbon{position:absolute;left:50%;width:16%;margin-left:-8%;top:6%;bottom:0;background:linear-gradient(180deg,#d93a2b,#a01f14);z-index:3}
.box .bow{position:absolute;left:50%;top:-6%;width:44%;height:22%;margin-left:-22%;z-index:4}
.box .bow:before,.box .bow:after{content:"";position:absolute;top:0;width:50%;height:100%;border:5px solid #d93a2b;border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.box .bow:before{left:0;transform:rotate(-20deg)}.box .bow:after{right:0;transform:rotate(20deg)}
.box .num{font-family:var(--serif);font-size:12px;color:var(--muted);letter-spacing:.2em}
.box .lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:6;font-size:22px}
.box.locked .cube{filter:grayscale(.85) brightness(.45)}
.box.locked .lock:before{content:"";width:22px;height:18px;border-radius:4px;background:rgba(255,246,220,.85);box-shadow:0 0 0 0 transparent;position:relative;top:6px}
.box.locked .lock:after{content:"";position:absolute;width:14px;height:14px;border:3px solid rgba(255,246,220,.85);border-bottom:0;border-radius:10px 10px 0 0;transform:translateY(-9px)}
.box.current .cube{animation:bob 1.8s ease-in-out infinite}
.box.current:before{content:"";position:absolute;left:50%;top:45%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(247,201,72,.55),transparent 65%);animation:glow 1.8s ease-in-out infinite}
.box.current .num{color:var(--y)}
@keyframes bob{50%{transform:translateY(-8px) rotate(-2deg)}}
@keyframes glow{50%{opacity:.4;transform:translate(-50%,-50%) scale(1.15)}}
.box.done .lid{transform:translateY(-30%) rotate(-14deg)}
.box.done .cube{filter:none}
.box.done .thumb{position:absolute;left:12%;right:12%;bottom:30%;height:56%;border-radius:4px;background-size:cover;background-position:center;z-index:1;box-shadow:0 0 12px rgba(255,220,120,.7);transform:rotate(4deg)}
.album-btn{margin:0 auto;padding:12px 26px;border-radius:999px;border:1px solid rgba(247,201,72,.45);color:var(--y);font-size:14px;letter-spacing:.1em;background:rgba(247,201,72,.06)}
.album-btn b{margin-left:6px;font-weight:600}

/* ---------- 通用浮层 ---------- */
.sheet{position:absolute;inset:0;z-index:20;background:rgba(14,10,2,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transform:translateY(30px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1);overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet.active{opacity:1;pointer-events:auto;transform:none}
.close{position:fixed;left:14px;top:calc(var(--safe-t) + 12px);z-index:30;font-size:15px;color:var(--muted);padding:8px 10px}
.level-inner,.detail-inner,.album-inner{min-height:100%;padding:calc(var(--safe-t) + 64px) 22px calc(var(--safe-b) + 40px);display:flex;flex-direction:column;align-items:center;text-align:center}
.sheet-title{font-family:var(--serif);font-size:26px;letter-spacing:.12em;margin:10px 0 8px}
.lv-desc{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:22px}
.lv-q{font-family:var(--serif);font-size:20px;line-height:1.7;margin:6px 0 20px}
.answer{display:flex;gap:10px;width:100%;max-width:340px}
.answer input{flex:1;min-width:0;height:48px;border-radius:12px;border:1px solid rgba(247,201,72,.4);background:rgba(255,255,255,.05);color:var(--ink);padding:0 14px;font-size:16px;outline:none;-webkit-user-select:text;user-select:text}
.answer input:focus{border-color:var(--y);box-shadow:0 0 0 3px rgba(247,201,72,.15)}
.btn{height:48px;padding:0 22px;border-radius:12px;background:linear-gradient(160deg,#ffe07a,#f0b519);color:#3a2a03;font-weight:600;letter-spacing:.05em;box-shadow:0 6px 20px rgba(247,201,72,.25)}
.btn.ghost{background:transparent;color:var(--y);border:1px solid rgba(247,201,72,.45);box-shadow:none}
.hint{min-height:24px;margin-top:14px;font-size:14px;color:var(--y2);transition:opacity .3s}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.links{margin-top:18px;display:flex;gap:18px;font-size:13px;color:var(--muted)}
.links button{text-decoration:underline;text-underline-offset:3px;color:var(--muted)}

/* 滑块拼图 */
.puzzle{position:relative;width:min(84vw,340px);aspect-ratio:1;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(247,201,72,.3)}
.puzzle .tile{position:absolute;width:33.333%;height:33.333%;background-size:300% 300%;transition:transform .18s ease;border:1px solid rgba(0,0,0,.35)}
.puzzle.solved .tile{border-color:transparent}
.puzzle .peek{position:absolute;inset:0;background-size:cover;opacity:0;transition:opacity .3s;pointer-events:none}
.puzzle.peeking .peek{opacity:1}
.moves{margin-top:14px;font-size:13px;color:var(--muted)}

/* 模糊照片 */
.blurpic{width:min(80vw,320px);aspect-ratio:3/4;border-radius:14px;background-size:cover;background-position:center;filter:blur(14px) saturate(.6);transition:filter 1.6s ease;margin-bottom:22px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.blurpic.clear{filter:none}

/* 歌词 */
.lyric{font-family:var(--serif);font-size:22px;line-height:2;margin:20px 0 26px}
.lyric u{display:inline-block;min-width:3.5em;border-bottom:2px solid var(--y);text-decoration:none;color:var(--y)}

/* 长按驱雾 */
.fogwrap{position:relative;width:min(80vw,320px);aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#ffe9a8,#f2b818);margin-bottom:26px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.fogwrap img{position:absolute;left:18%;bottom:4%;width:64%;opacity:.95}
.fogwrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.hold{position:relative;width:96px;height:96px;border-radius:50%;background:rgba(247,201,72,.1);border:1px solid rgba(247,201,72,.4);color:var(--y);font-size:14px;letter-spacing:.1em;touch-action:none}
.hold svg{position:absolute;inset:-4px;width:104px;height:104px;transform:rotate(-90deg)}
.hold circle{fill:none;stroke:var(--y);stroke-width:4;stroke-dasharray:314;stroke-dashoffset:314;stroke-linecap:round}

/* 密码键盘 */
.pin{display:flex;gap:12px;justify-content:center;margin:10px 0 26px}
.pin span{width:52px;height:62px;border-radius:12px;border:1px solid rgba(247,201,72,.45);display:flex;align-items:center;justify-content:center;font-size:30px;font-family:var(--serif);color:var(--y)}
.pin span.f{background:rgba(247,201,72,.12)}
.keypad{display:grid;grid-template-columns:repeat(3,72px);gap:14px;justify-content:center}
.keypad button{height:60px;border-radius:16px;background:rgba(255,246,220,.06);font-size:24px;font-family:var(--serif);border:1px solid rgba(255,246,220,.08)}
.keypad button:active{background:rgba(247,201,72,.25)}
.fragments{display:flex;gap:8px;margin-bottom:18px}
.fragments i{font-style:normal;width:34px;height:40px;border-radius:8px;background:linear-gradient(160deg,#ffe58f,#f2b818);color:#3a2a03;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--serif);transform:rotate(var(--r))}

/* ---------- 揭晓 ---------- */
.reveal{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--safe-t) + 20px) 20px calc(var(--safe-b) + 24px);overflow:hidden}
.burst{position:absolute;left:50%;top:45%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;background:repeating-conic-gradient(from 0deg,rgba(247,201,72,.18) 0 6deg,transparent 6deg 18deg);border-radius:50%;opacity:0;transform:scale(.2);pointer-events:none;-webkit-mask:radial-gradient(circle,#000 0,transparent 45%);mask:radial-gradient(circle,#000 0,transparent 45%)}
.reveal.active .burst.go{animation:burst 1.4s ease-out forwards, spin 30s linear infinite}
@keyframes burst{0%{opacity:0;transform:scale(.2)}30%{opacity:1}100%{opacity:.7;transform:scale(1)}}
@keyframes spin{to{rotate:360deg}}
.reveal-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.reveal-actions{position:relative;z-index:2;display:flex;gap:12px;margin-top:28px;opacity:0;transition:opacity .6s .2s}
.reveal-actions.show{opacity:1}
.bigbox{position:relative;width:180px;height:180px;margin-top:80px}
.bigbox .lid,.bigbox .body,.bigbox .ribbon{position:absolute;border-radius:12px}
.bigbox .body{left:0;right:0;bottom:0;height:72%;background:linear-gradient(160deg,#ffd95a,#e5a50e);box-shadow:inset -14px -14px 24px rgba(140,80,0,.35),0 30px 60px rgba(0,0,0,.5)}
.bigbox .lid{left:-6%;right:-6%;top:4%;height:30%;background:linear-gradient(160deg,#ffe58f,#f0b519);z-index:2;box-shadow:inset 0 -8px 14px rgba(140,80,0,.3)}
.bigbox .ribbon{left:50%;width:16%;margin-left:-8%;top:4%;bottom:0;background:linear-gradient(180deg,#d93a2b,#a01f14);z-index:3;border-radius:0}
.bigbox.shake{animation:bshake .5s ease-in-out 3}
@keyframes bshake{25%{transform:rotate(-6deg) scale(1.03)}75%{transform:rotate(6deg) scale(1.03)}}
.bigbox.open .lid,.bigbox.open .ribbon{transition:transform .8s cubic-bezier(.3,0,.2,1),opacity .8s}
.bigbox.open .lid{transform:translate(40px,-220px) rotate(40deg);opacity:0}
.bigbox.open .ribbon{opacity:0}
.bigbox.open .body{transition:transform .8s .2s,opacity .8s .2s;transform:translateY(160px) scale(.8);opacity:0}
.reveal-sub{margin-top:24px;color:var(--muted);font-size:13px;letter-spacing:.2em}

/* ---------- 全息卡 ---------- */
.card-wrap{perspective:1000px;width:min(72vw,300px);aspect-ratio:63/88}
.card{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;--o:0;--pos:50% 50%;position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(var(--ry)) rotateX(var(--rx));transition:transform .15s ease-out;will-change:transform}
.card.intro{animation:cardIn 1.2s cubic-bezier(.2,.9,.2,1) both}
@keyframes cardIn{0%{transform:translateY(120px) rotateY(540deg) scale(.4);opacity:0}60%{opacity:1}100%{transform:none}}
.face{position:absolute;inset:0;border-radius:4.5%/3.2%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face.back{transform:rotateY(180deg);background:radial-gradient(circle at 50% 50%,#ffe58f,#e5a50e 70%,#a87408);display:flex;align-items:center;justify-content:center}
.face.back:after{content:"璐";font-family:var(--serif);font-size:64px;color:#7a5200;width:110px;height:110px;border-radius:50%;border:3px solid #7a5200;display:flex;align-items:center;justify-content:center}
.front{background:linear-gradient(170deg,#2a2009,#120d03);border:6px solid transparent;background-clip:padding-box;box-shadow:0 0 0 1px rgba(247,201,72,.6),0 30px 60px rgba(0,0,0,.55),0 0 40px rgba(247,201,72,.25)}
.front .frame{position:absolute;inset:0;border-radius:inherit;padding:5%;display:flex;flex-direction:column}
.front .top{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.2em;color:var(--y)}
.front .rar{padding:2px 8px;border-radius:999px;background:linear-gradient(90deg,#ffe58f,#f2b818);color:#3a2a03;font-weight:700;letter-spacing:.1em}
.front .art{position:relative;flex:1;margin:4% 0;border-radius:6px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#3b2d0c,#140f04)}
.front .art img{width:100%;height:100%;object-fit:cover;display:block}
.front .art.contain img{object-fit:contain;padding:8%}
.front .art.figure{background:radial-gradient(circle at 50% 40%,#ffe9a8,#f2b818)}
.front .art.figure img{object-fit:contain;object-position:bottom;padding:8% 6% 0}
.front .art.figure:after{content:"?";position:absolute;right:10%;top:6%;font-size:54px;font-family:var(--serif);color:#3a2a03;opacity:.6}
.front .name{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);text-align:left;letter-spacing:.06em}
.front .sub{font-size:12px;color:var(--y);text-align:left;margin-top:4px;letter-spacing:.06em}
.front .desc{font-size:11px;color:var(--muted);text-align:left;margin-top:6px;line-height:1.6}
.shine,.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.shine{background:
  repeating-linear-gradient(110deg,#ff7773 0%,#ffed5f 10%,#a8ff5f 20%,#83fff7 30%,#7894ff 40%,#d875ff 50%,#ff7773 60%),
  repeating-linear-gradient(-45deg,#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,29%,66%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12%);
  background-size:400% 400%,300% 300%;background-position:var(--pos),var(--pos);background-blend-mode:hue;mix-blend-mode:color-dodge;opacity:calc(.25 + var(--o)*.45);filter:brightness(.7) contrast(1.4) saturate(1.2)}
.glare{background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.75) 5%,rgba(255,255,255,.2) 25%,rgba(0,0,0,.35) 90%);mix-blend-mode:overlay;opacity:calc(.35 + var(--o)*.5)}
.card.flipped{transform:rotateY(calc(180deg + var(--ry))) rotateX(var(--rx))}
.card-tip{margin-top:16px;font-size:12px;color:var(--muted);letter-spacing:.15em}

/* 万能卡 */
.front.wild{background:linear-gradient(160deg,#171207,#050402)}
.wild .art{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#3a2c08,#0b0803);border:1px solid rgba(247,201,72,.3)}
.wild .big{font-family:var(--serif);font-size:44px;letter-spacing:.2em;background:linear-gradient(180deg,#fff3c4,#f7c948 50%,#b07d14);-webkit-background-clip:text;background-clip:text;color:transparent;padding-left:.2em}
.wild .serial{font-size:10px;letter-spacing:.3em;color:var(--y);margin-top:10px;opacity:.8}
.wild .pledge{font-family:var(--serif);font-size:17px;color:var(--ink);margin-top:14px;letter-spacing:.1em}
.wild canvas.scratch{position:absolute;inset:0;width:100%;height:100%;touch-action:none;border-radius:6px}
.stamp{position:absolute;right:8%;bottom:14%;padding:6px 10px;border:3px solid #e2483a;color:#e2483a;font-weight:800;letter-spacing:.15em;font-size:16px;transform:rotate(-14deg);border-radius:6px;opacity:0;scale:2;transition:all .35s cubic-bezier(.3,1.6,.5,1);text-align:center;line-height:1.2}
.stamp small{display:block;font-size:9px;letter-spacing:.05em;font-weight:600}
.stamp.on{opacity:.9;scale:1}

/* ---------- 详情：相册 ---------- */
.stack{position:relative;width:min(78vw,320px);aspect-ratio:3/4;margin:18px 0 10px}
.stack .ph{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 20px 40px rgba(0,0,0,.5),0 0 0 1px rgba(247,201,72,.35);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s;touch-action:none}
.stack .ph img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.stack .ph .cap{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.75));font-family:var(--serif);font-size:15px;text-align:left;letter-spacing:.05em}
.stack .ph .glare{border-radius:14px}
.counter{font-size:12px;color:var(--muted);letter-spacing:.2em;margin-top:8px}

/* 3D 鼠标 */
.stage3d{position:relative;width:min(86vw,360px);height:300px;perspective:900px;margin:10px 0;touch-action:none}
.stage3d .floor{position:absolute;left:15%;right:15%;bottom:30px;height:40px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.6),transparent 70%);filter:blur(6px)}
.stage3d .ring{position:absolute;left:50%;bottom:40px;width:300px;height:80px;margin-left:-150px;border-radius:50%;border:1px solid rgba(247,201,72,.5);box-shadow:0 0 30px rgba(247,201,72,.4),inset 0 0 30px rgba(247,201,72,.2);transform:rotateX(70deg)}
.stage3d .obj{position:absolute;left:50%;top:40px;width:260px;margin-left:-130px;transform-style:preserve-3d;transition:transform .1s linear}
.stage3d .obj img{width:100%;display:block;filter:drop-shadow(0 20px 20px rgba(0,0,0,.5))}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:340px;margin-top:14px}
.specs div{padding:12px;border-radius:12px;background:rgba(255,246,220,.05);border:1px solid rgba(247,201,72,.18);text-align:left}
.specs b{display:block;font-size:15px;color:var(--y)}
.specs span{font-size:12px;color:var(--muted)}

/* 歌 */
.vinyl{position:relative;width:min(70vw,280px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 2px,#1c1c1c 2px 4px);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 6px rgba(247,201,72,.15);display:flex;align-items:center;justify-content:center;margin:20px 0 26px;animation:spin2 8s linear infinite;animation-play-state:paused}
.vinyl.playing{animation-play-state:running}
@keyframes spin2{to{transform:rotate(360deg)}}
.vinyl .label{width:42%;aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;border:4px solid #f7c948}
.lyrics-show{font-family:var(--serif);font-size:17px;line-height:2.1;color:var(--ink)}
.lyrics-show em{font-style:normal;color:var(--y)}

/* 信：卷轴 */
.scroll{position:relative;width:min(88vw,380px);margin-top:10px}
.scroll .rod{position:relative;height:22px;border-radius:11px;background:linear-gradient(180deg,#8a5a12,#e0a812 40%,#8a5a12);box-shadow:0 6px 14px rgba(0,0,0,.5);z-index:2}
.scroll .rod:before,.scroll .rod:after{content:"";position:absolute;top:-4px;width:18px;height:30px;border-radius:6px;background:linear-gradient(180deg,#5a3a08,#b8860b,#5a3a08)}
.scroll .rod:before{left:-10px}.scroll .rod:after{right:-10px}
.scroll .paper{position:relative;margin:0 10px;max-height:0;overflow:hidden;background:linear-gradient(90deg,#efe0b9,#fbf3dc 10%,#fbf3dc 90%,#efe0b9);color:#4a3508;transition:max-height 3.2s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 0 30px rgba(140,100,30,.25)}
.scroll.open .paper{max-height:6000px}
.scroll .txt{padding:30px 26px 34px;text-align:left;font-family:var(--serif);font-size:16px;line-height:2.05;letter-spacing:.03em}
.scroll .txt p{text-indent:2em;margin-bottom:.6em}
.scroll .txt .to{text-indent:0;font-weight:600;margin-bottom:1em}
.scroll .txt .sign{text-align:right;text-indent:0;margin-top:1.4em}
.scroll .txt .date{text-align:right;text-indent:0;font-size:13px;opacity:.7}

/* 卡册 */
.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:400px;margin-top:20px}
.album-grid .slot{aspect-ratio:63/88;border-radius:8px;border:1px dashed rgba(247,201,72,.3);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;overflow:hidden;position:relative}
.album-grid .slot.got{border:0;box-shadow:0 0 0 1px rgba(247,201,72,.6),0 10px 20px rgba(0,0,0,.4)}
.album-grid .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.album-grid .slot .lbl{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 6px;background:linear-gradient(transparent,rgba(0,0,0,.8));font-size:11px;color:var(--ink);font-family:var(--serif)}
.album-grid .slot.wildslot{background:radial-gradient(circle at 50% 30%,#3a2c08,#0b0803)}
.album-grid .slot.wildslot:before{content:"万能";font-family:var(--serif);font-size:20px;color:var(--y);letter-spacing:.2em}
.album-grid .slot.figslot{background:radial-gradient(circle at 50% 40%,#ffe9a8,#f2b818)}
.album-grid .slot.figslot img{object-fit:contain;object-position:bottom}
.album-foot{margin-top:26px;font-family:var(--serif);font-size:16px;line-height:1.9;color:var(--y2)}

.toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 40px);transform:translate(-50%,20px);padding:10px 18px;border-radius:999px;background:rgba(255,246,220,.95);color:#3a2a03;font-size:14px;opacity:0;transition:all .35s;z-index:99;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

.final-wish{font-family:var(--serif);font-size:28px;letter-spacing:.15em;margin-top:30px;background:linear-gradient(180deg,#fff3c4,#f7c948 60%,#c9972b);-webkit-background-clip:text;background-clip:text;color:transparent}

.scroll .pola{display:block;width:44%;background:#fff;padding:6px 6px 22px;box-shadow:0 6px 14px rgba(80,50,0,.28);position:relative;margin:6px 0 10px}
.scroll .pola.r{float:right;margin-left:14px;transform:rotate(4deg)}
.scroll .pola.l{float:left;margin-right:14px;transform:rotate(-4deg)}
.scroll .pola img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.scroll .pola:before{content:"";position:absolute;left:50%;top:-9px;width:54px;height:18px;margin-left:-27px;background:rgba(247,201,72,.75);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.1)}

/* 鞋 */
.shoes{width:100%;margin-top:46px;padding-top:30px;border-top:1px solid rgba(247,201,72,.18);display:flex;flex-direction:column;align-items:center}
.shoes-title{font-family:var(--serif);font-size:24px;letter-spacing:.12em;margin:8px 0 8px}
.flow{position:relative;width:100%;max-width:380px;height:230px;perspective:900px;transform-style:preserve-3d;margin:4px 0 6px;touch-action:pan-y}
.shoe{position:absolute;left:50%;top:0;width:220px;margin-left:-110px;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s;cursor:pointer}
.shoe-stage{position:relative;width:220px;height:200px;border-radius:20px;background:radial-gradient(circle at 50% 45%,#fff,#f3ead2 70%,#e8d9ae);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.shoe.on .shoe-stage{box-shadow:0 0 0 2px var(--y),0 0 40px rgba(247,201,72,.45),0 18px 40px rgba(0,0,0,.45)}
.shoe-stage img{width:92%;height:88%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .2s}
.shoe-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);background-size:250% 100%;animation:sweep 3.2s ease-in-out infinite;pointer-events:none}
@keyframes sweep{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.shoe-no{text-align:center;margin-top:8px;font-family:var(--serif);font-size:12px;color:var(--muted);letter-spacing:.2em}
.shoe.on .shoe-no{color:var(--y)}
.frame-dots{display:flex;gap:6px;margin:6px 0 14px}
.frame-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,246,220,.25);transition:all .3s}
.frame-dots i.on{width:16px;border-radius:3px;background:var(--y)}
.shoe-info{text-align:center}
.shoe-name{font-family:var(--serif);font-size:20px;letter-spacing:.06em}
.shoe-color{font-size:13px;color:var(--muted);margin-top:4px}
.shoe-price{margin-top:10px;font-size:18px;color:var(--y);font-weight:600}
.shoe-price span{margin-left:10px;font-size:12px;color:var(--muted);font-weight:400}
.shoe-acts{display:flex;gap:12px;margin-top:18px}

/* ===== 打磨：触感反馈 & 色彩 ===== */
.bg:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.bg:before{content:"";position:absolute;inset:-50%;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.btn,.box,.keypad button,.close,.links button,.hold,.answer input{transition:transform .16s cubic-bezier(.3,1.5,.6,1),filter .16s,box-shadow .2s,background .2s}
.btn:active,.keypad button:active,.close:active,.links button:active{transform:scale(.94);filter:brightness(.92)}
.box:active .cube{transform:scale(.9)}
.hold:active{transform:scale(.96)}
.btn{position:relative;overflow:hidden;-webkit-transform:translateZ(0)}
.btn:not(.ghost):after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:btnshine 3.6s ease-in-out infinite;pointer-events:none}
@keyframes btnshine{0%,70%{left:-60%}100%{left:130%}}
.btn:disabled{filter:saturate(.4) brightness(.8)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:ripple .55s ease-out forwards;pointer-events:none}
.btn.ghost .ripple{background:rgba(247,201,72,.35)}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.answer.ok input{border-color:#ffd96a;box-shadow:0 0 0 4px rgba(247,201,72,.25),0 0 24px rgba(247,201,72,.4)}
.answer.bad input{border-color:var(--rose2);box-shadow:0 0 0 3px rgba(255,143,171,.2)}
.hint{color:var(--rose)}
.hint.good{color:var(--y2)}
.box.current:after{content:"点我";position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.15em;padding:3px 8px;border-radius:999px;background:var(--rose);color:#4a1726;font-weight:600;z-index:8;animation:bubble 1.8s ease-in-out infinite;white-space:nowrap}
@keyframes bubble{50%{transform:translate(-50%,-4px)}}
.close{background:rgba(255,246,220,.08);border-radius:999px;padding:8px 14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.toast{box-shadow:0 10px 30px rgba(0,0,0,.4)}
.pin span.f{background:rgba(247,201,72,.16);box-shadow:0 0 14px rgba(247,201,72,.3);animation:pop .25s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.8)}100%{transform:scale(1)}}
.sheet-title{background:linear-gradient(180deg,#fff6dc,#ffd76a);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion:reduce){.btn:not(.ghost):after,.box.current:after{animation:none}}