*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#1a0808;font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:#fff}
#loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a0808;transition:opacity .8s}
#loader.hide{opacity:0;pointer-events:none}.ldr-ring{width:64px;height:64px;border:2px solid rgba(212,175,55,.12);border-top-color:#d4af37;border-radius:50%;animation:spin 1s linear infinite}
.ldr-txt{font-size:24px;margin-top:16px;letter-spacing:8px;background:linear-gradient(135deg,#d4af37,#ffd700);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#app{width:100%;height:100%;position:relative;overflow:hidden}#wrap{width:100%;will-change:transform}
.page{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.page-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#1a0808;z-index:0;will-change:transform}
.page-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55) 55%,rgba(0,0,0,.85));z-index:1}
.pattern{position:absolute;inset:0;z-index:1;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d4af37' fill-opacity='.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.glow{position:absolute;z-index:1;border-radius:50%;filter:blur(100px);pointer-events:none;will-change:transform}
.glow.gold{width:300px;height:300px;background:radial-gradient(circle,#d4af37,transparent);top:5%;right:-10%;opacity:.12}
.glow.cyan{width:250px;height:250px;background:radial-gradient(circle,#00d4ff,transparent);bottom:5%;left:-10%;opacity:.1}
.glow.red{width:200px;height:200px;background:radial-gradient(circle,#ff2040,transparent);top:35%;left:30%;opacity:.15}
.content{position:relative;z-index:3;text-align:center;padding:20px 18px;width:100%;max-width:400px}
.content>*{opacity:0;transform:translateY(16px);transition:all .5s cubic-bezier(.4,0,.2,1)}
.page.enter .content>*{opacity:1;transform:translateY(0)}
.page.enter .tag{transition-delay:.08s}
.page.enter .interact-area,.page.enter #p1-seal,.page.enter #p3-wheel,.page.enter #p4-game,.page.enter #p5-audience,.page.enter #p6-dragon,.page.enter #p7-map,.page.enter #p8-gallery,.page.enter #p9-row,.page.enter #p10-artisans{transition-delay:.12s}
.page.enter .title{transition-delay:.2s}.page.enter .line{transition-delay:.3s}.page.enter .sub{transition-delay:.4s}
.page.enter .desc{transition-delay:.5s}
.tag{display:inline-block;padding:4px 12px;border:1px solid rgba(212,175,55,.25);border-radius:20px;font-size:9px;letter-spacing:3px;color:#d4af37;background:rgba(0,0,0,.35);margin-bottom:10px}
.title{font-size:clamp(20px,6vw,36px);font-weight:700;line-height:1.3;margin-bottom:6px;letter-spacing:4px;background:linear-gradient(180deg,#ffd700,#d4af37 50%,#b8860b);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sub{font-size:clamp(11px,2.4vw,13px);color:rgba(255,255,255,.6);letter-spacing:2px;font-weight:300;line-height:1.8}
.desc{font-size:clamp(10px,2vw,12px);color:rgba(255,255,255,.35);letter-spacing:2px;margin-top:8px}
.line{width:0;height:1px;margin:6px auto;background:linear-gradient(90deg,transparent,#d4af37,transparent)}
.page.enter .line{width:32px;transition:width .6s .3s cubic-bezier(.4,0,.2,1)}
.pg-num{position:absolute;top:10px;right:10px;z-index:4;font-size:9px;color:rgba(212,175,55,.25)}
.parallax-layer{will-change:transform}
#bar{position:fixed;top:0;left:0;height:2px;z-index:100;background:linear-gradient(90deg,#d4af37,#ffd700);transition:width .4s}
#dots{position:fixed;right:6px;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:5px;align-items:center}
.dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.12);cursor:pointer;transition:all .3s;position:relative}
.dot.on{background:#d4af37;box-shadow:0 0 6px rgba(212,175,55,.4);height:14px;width:3px}
.dot .dot-label{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:7px;color:rgba(255,255,255,.2);white-space:nowrap;opacity:0;pointer-events:none;letter-spacing:1px}
.dot.on .dot-label{opacity:1;color:rgba(212,175,55,.4)}
#hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;animation:fadeUp .8s 1.8s forwards;pointer-events:none}
#hint span{font-size:9px;color:rgba(255,255,255,.15);letter-spacing:2px}
.arrow{width:14px;height:14px;border-right:1.5px solid rgba(212,175,55,.2);border-bottom:1.5px solid rgba(212,175,55,.2);transform:rotate(45deg);animation:bounce 1.5s infinite}
#canvas{position:absolute;inset:0;z-index:2;pointer-events:none}
#celebration{position:fixed;inset:0;z-index:200;pointer-events:none}
.celeb-particle{position:absolute;width:5px;height:5px;border-radius:50%;animation:celebFall linear forwards}
@keyframes celebFall{0%{transform:translateY(-20px);opacity:1}100%{transform:translateY(110vh);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:rotate(45deg)}50%{transform:rotate(45deg) translateY(4px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.page[data-theme=red] .tag{border-color:rgba(255,50,50,.4);color:#ff5555}
.page[data-theme=red] .glow.gold{background:radial-gradient(circle,#ff3333,transparent);opacity:.18}
#p1-seal{width:72px;height:72px;margin:6px auto;border:3px solid #d4af37;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;cursor:pointer;position:relative;background:rgba(0,0,0,.5);z-index:5;transition:all .3s}
#p1-seal .s-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:1px solid rgba(212,175,55,.2);opacity:0}
#p1-seal .s-ring2{position:absolute;width:130%;height:130%;border-radius:50%;border:1px dashed rgba(212,175,55,.1);opacity:0}
#p1-seal .s-bar{position:absolute;bottom:-6px;left:15%;width:70%;height:2px;background:rgba(255,255,255,.08);overflow:hidden}
#p1-seal .s-fill{height:100%;width:0%;background:linear-gradient(90deg,#d4af37,#ffd700);transition:width .1s linear}
#p1-seal.ignited{border-color:#ffd700;box-shadow:0 0 50px rgba(212,175,55,.5);animation:glowPulse 1s ease-in-out infinite}
#p1-seal.ignited .s-ring{opacity:1;animation:spin 3s linear infinite}
#p1-seal.ignited .s-ring2{opacity:1;animation:spin 5s linear infinite reverse}
@keyframes glowPulse{0%,100%{box-shadow:0 0 30px rgba(212,175,55,.4)}50%{box-shadow:0 0 70px rgba(212,175,55,.7)}}
#p1-seal .s-flame{position:absolute;width:130%;height:130%;top:-15%;left:-15%;border-radius:50%;background:radial-gradient(circle,rgba(255,200,50,.2),transparent 70%);opacity:0}
#p1-seal.ignited .s-flame{opacity:1}
.p1-hint{font-size:10px;color:rgba(212,175,55,.45);margin-top:6px;letter-spacing:2px;cursor:pointer}
.p1-hint.done{color:#ffd700;animation:pulse 1.5s ease-in-out infinite;font-size:11px}
.p2-area{width:100%;height:100%;position:absolute;inset:0;z-index:2;pointer-events:none}
.p2-area .p2-l,.p2-area .p2-r{position:absolute;top:0;height:100%}
.p2-area .p2-l{left:0;width:50%;background:linear-gradient(90deg,rgba(255,200,100,.06),transparent)}
.p2-area .p2-r{right:0;width:50%;background:linear-gradient(270deg,rgba(100,200,255,.06),transparent)}
.p2-handle{position:absolute;bottom:30px;left:10%;width:80%;height:3px;background:rgba(255,255,255,.1);z-index:5;cursor:pointer}
.p2-handle .p2-thumb{width:16px;height:16px;border-radius:50%;background:#d4af37;position:relative;top:-7px;margin:0 auto;box-shadow:0 0 8px rgba(212,175,55,.3)}
.blend-label{position:absolute;z-index:5;font-size:8px;color:rgba(255,255,255,.2);bottom:42px}
.blend-label.l{left:12%}.blend-label.r{right:12%}
#p3-wheel{position:relative;width:170px;height:170px;margin:0 auto 6px}
#p3-wheel canvas{width:100%;height:100%;border-radius:50%;cursor:pointer}
#p3-name{font-size:10px;color:rgba(212,175,55,.5);height:14px}
.p3-colors{display:flex;gap:4px;justify-content:center;margin-top:4px}
.p3-c{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .2s}
.p3-c.on{border-color:#fff;transform:scale(1.15)}
#p4-game{width:100%;max-width:280px;height:100px;margin:6px auto;overflow:hidden;position:relative}
#p4-game .p4-track{position:absolute;bottom:0;left:0;right:0;height:32px;background:rgba(255,255,255,.04);border:1px solid rgba(212,175,55,.1)}
#p4-game .p4-beat{position:absolute;bottom:3px;width:6px;height:26px;border-radius:2px}
#p4-game .p4-zone{position:absolute;bottom:0;left:100px;width:32px;height:32px;border:2px dashed rgba(212,175,55,.3);z-index:2}
#p4-score{font-size:24px;color:#d4af37;font-weight:700}
#p4-combo{font-size:10px;color:rgba(255,255,255,.35)}
#p4-combo.hot{color:#ffd700}
#p4-result{font-size:11px;color:rgba(212,175,55,.5);margin-top:2px;height:14px}
#p5-audience{display:flex;gap:8px;justify-content:center;margin:6px 0;flex-wrap:wrap}
#p5-audience .p5-p{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(212,175,55,.1);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:all .2s}
#p5-audience .p5-p:active{transform:scale(1.3);background:rgba(212,175,55,.2)}
#p5-barrage{font-size:10px;color:rgba(255,255,255,.3);height:18px;overflow:hidden;margin-bottom:2px}
#p5-teapot{width:42px;height:42px;margin:4px auto;background:rgba(0,0,0,.4);border:2px solid rgba(212,175,55,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;position:relative}
#p5-teapot .steam{position:absolute;width:3px;height:12px;background:rgba(255,255,255,.12);top:-14px;left:50%;opacity:0}
#p5-teapot.hot .steam{animation:steam .6s ease-out infinite}
@keyframes steam{0%{opacity:.5}100%{opacity:0;transform:translateY(-14px)}}
#p5-speed{font-size:9px;color:rgba(212,175,55,.4);margin-top:1px}
#p6-dragon{width:80px;height:80px;margin:0 auto 4px;position:relative;cursor:pointer}
#p6-dragon .d-eye{position:absolute;width:10px;height:12px;background:#ffd700;border-radius:50%;top:38%;left:42%;box-shadow:0 0 8px rgba(255,215,0,.2);transition:all .3s}
#p6-dragon .d-eye.r{left:56%}
#p6-dragon .d-body{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(212,175,55,.25);display:flex;align-items:center;justify-content:center;font-size:38px}
#p6-dragon.awake .d-eye{box-shadow:0 0 25px rgba(255,215,0,.8);background:#fff}
#p6-dragon.awake .d-body{border-color:#ffd700;box-shadow:0 0 35px rgba(212,175,55,.4)}
#p6-btn{display:inline-block;padding:6px 20px;border:2px solid rgba(212,175,55,.35);border-radius:30px;color:#d4af37;font-size:11px;letter-spacing:3px;cursor:pointer;transition:all .3s;background:rgba(0,0,0,.4)}
#p6-btn.go{border-color:#ffd700;background:rgba(212,175,55,.15)}
#p6-btn.done{background:#d4af37;color:#1a0808}
#p6-status{font-size:10px;color:rgba(255,255,255,.3);height:14px;margin-top:2px}
.p6-scale{position:absolute;width:6px;height:6px;border-radius:50%;background:#d4af37;opacity:0}
.p6-scale.on{animation:sUp .5s forwards}
@keyframes sUp{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}
#p7-map{width:100%;max-width:280px;height:160px;margin:4px auto;overflow:hidden;border-radius:10px;background:rgba(0,0,0,.15);border:1px solid rgba(212,175,55,.1);cursor:grab;position:relative}
#p7-inner{position:absolute;transition:transform .3s;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;padding:8px;width:100%;height:100%}
#p7-inner .city{display:inline-flex;flex-direction:column;align-items:center;cursor:pointer;padding:3px 6px;border-radius:6px;min-width:60px}
#p7-inner .city:active{background:rgba(212,175,55,.1);transform:scale(1.08)}
#p7-inner .city .ci{font-size:24px}
#p7-inner .city .cn{font-size:7px;color:rgba(255,255,255,.4);margin-top:1px}
#p7-detail{font-size:9px;color:rgba(212,175,55,.4);height:12px;margin-top:1px}
.p7-zoom{display:flex;gap:4px;justify-content:center;margin-top:2px}
.p7-zoom button{width:22px;height:22px;border-radius:50%;border:1px solid rgba(212,175,55,.25);background:rgba(0,0,0,.35);color:#d4af37;font-size:12px;cursor:pointer}
#p8-gallery{width:100%;max-width:280px;overflow:hidden;position:relative;margin:4px auto}
#p8-track{display:flex;transition:transform .4s}
#p8-track .g8{min-width:100%;padding:14px;text-align:center}
#p8-track .g8 .g8i{font-size:48px;margin-bottom:6px;display:inline-block}
#p8-track .g8 .g8n{font-size:11px;color:#d4af37;letter-spacing:3px}
#p8-track .g8 .g8d{font-size:9px;color:rgba(255,255,255,.35);margin-top:4px;line-height:1.5}
#p8-indicators{display:flex;gap:3px;justify-content:center;margin-top:4px}
#p8-indicators .i8{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.12);cursor:pointer}
#p8-indicators .i8.on{background:#d4af37;width:16px}
#p9-row{display:flex;gap:4px;justify-content:center;margin:6px 0;flex-wrap:wrap}
#p9-row input{padding:6px 10px;border:1px solid rgba(212,175,55,.25);background:rgba(0,0,0,.3);color:#d4af37;font-size:13px;width:130px;text-align:center;outline:none;letter-spacing:2px}
#p9-row input::placeholder{color:rgba(212,175,55,.15);font-size:10px}
#p9-row input:focus{border-color:#ffd700}
#p9-gen{padding:6px 16px;border:2px solid #d4af37;background:rgba(212,175,55,.12);color:#d4af37;font-size:11px;letter-spacing:3px;cursor:pointer}
#p9-gen:active{background:#d4af37;color:#1a0808}
#p9-cert{width:100%;max-width:260px;margin:4px auto;padding:14px;border:1px solid rgba(212,175,55,.12);background:rgba(0,0,0,.15);min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
#p9-cert .cname{font-size:18px;color:#d4af37;letter-spacing:5px;font-weight:700}
#p9-cert .ctitle{font-size:9px;color:rgba(255,255,255,.4);margin-top:3px}
#p9-cert .ccloud{position:absolute;width:200%;height:100%;top:0;left:-50%;background:radial-gradient(ellipse at 30% 50%,rgba(212,175,55,.03),transparent 60%);animation:cdrift 5s linear infinite;pointer-events:none}
@keyframes cdrift{0%{transform:translateX(0)}100%{transform:translateX(40%)}}
#p10-artisans{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:4px 0}
#p10-artisans .art{width:62px;cursor:pointer;text-align:center;padding:4px;border-radius:6px;border:1px solid transparent}
#p10-artisans .art:active{background:rgba(212,175,55,.08);border-color:rgba(212,175,55,.15)}
#p10-artisans .art .an{font-size:8px;color:rgba(255,255,255,.35);margin-top:1px}
#p10-artisans .art .ahand{position:relative;display:inline-block}
#p10-artisans .art .ahand .ring{position:absolute;width:32px;height:32px;border-radius:50%;border:2px solid rgba(212,175,55,.25);top:-2px;left:-2px;opacity:0}
#p10-artisans .art.on .ahand .ring{opacity:1;animation:hPulse 1s ease-in-out infinite}
@keyframes hPulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.15);opacity:0}}
#p10-story{font-size:10px;color:rgba(255,255,255,.4);line-height:1.6;max-width:280px;min-height:40px;padding:6px;margin:2px auto;background:rgba(255,255,255,.02)}
.key-icon{width:40px;height:40px;margin:4px auto 0;border:2px solid rgba(212,175,55,.35);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:18px;background:rgba(0,0,0,.4);cursor:pointer;transition:all .3s}
.key-icon.pulse{animation:keyPulse .6s ease-out}
@keyframes keyPulse{0%{box-shadow:0 0 0 0 rgba(212,175,55,.6)}100%{box-shadow:0 0 0 20px rgba(212,175,55,0)}}
@media(max-width:360px){.title{letter-spacing:2px}.content{padding:14px 10px}}