:root{--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--ui-bottom: max(var(--safe-bottom), 2.6vh);--text-main: #f4f7ff;--text-muted: #b9beca;--red: #d91f27;--gold: #f8b81f}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%}body{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:var(--safe-top) 0 var(--ui-bottom);overflow:hidden;font-family:PingFang TC,Noto Sans TC,sans-serif;color:var(--text-main);background:#020202}.viewport-bg{position:fixed;inset:0;background:radial-gradient(circle at 80% 15%,rgba(26,57,115,.45),transparent 45%),radial-gradient(circle at 14% 82%,rgba(108,12,20,.36),transparent 40%),#020202;z-index:0}.app-shell{position:relative;z-index:1;width:min(100vw,calc((100svh - var(--safe-top) - var(--ui-bottom)) * (9 / 16)));aspect-ratio:9 / 16;overflow:hidden;border-radius:2.4vh;box-shadow:0 24px 48px #00000073;background:#06080d}.stage{position:absolute;inset:0;display:none;overflow:hidden}.stage.is-active{display:block}.stage>.asset-slot[style],.stage>.btn[style]{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:translate(-50%,-50%)}h1,h2,h3,p{margin:0}.copy{text-align:center;line-height:1.35}.copy h1{font-size:clamp(2.4vh,2.9vh,3.2vh);letter-spacing:.05em}.copy h2{margin-top:.8vh;font-size:clamp(1.75vh,2.1vh,2.35vh);color:#eef1f9}.copy p{margin-top:1.2vh;font-size:clamp(1.35vh,1.62vh,1.8vh);color:var(--text-muted)}.copy--landing{position:absolute;left:50%;top:44%;width:86%;transform:translate(-50%,-50%)}.copy--top{position:absolute;left:50%;top:8%;width:90%;transform:translate(-50%,-50%)}.copy--center{position:absolute;left:50%;top:22%;width:88%;transform:translate(-50%,-50%)}.asset-slot{width:100%;height:100%;display:grid;place-items:center;border:1px dashed rgba(255,255,255,.44);border-radius:1.4vh;font-size:clamp(1.2vh,1.5vh,1.7vh);color:#ffffffc7;background:#ffffff0d;letter-spacing:.04em}.btn{border:0;border-radius:1.35vh;padding:.95em 1.3em;font-size:clamp(1.55vh,1.9vh,2.1vh);font-weight:700;letter-spacing:.07em;cursor:pointer}.btn:active{transform:translateY(1px)}.btn--primary{color:#fff;background:linear-gradient(180deg,#f23943,#b6101a);box-shadow:0 .45vh 1.4vh #f625326b}.btn--light{color:#151a22;background:linear-gradient(180deg,#f8fbff,#dce2e8)}.btn--ghost{color:#f0f4ff;background:#ffffff14;border:1px solid rgba(255,255,255,.42)}.btn--disabled{color:#dee3eb;background:#878b95;cursor:not-allowed}.btn:disabled{cursor:not-allowed;opacity:.92}.stage-dim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.24),transparent 34%),linear-gradient(to top,#00000094,#0000001a 42%,#000000a6)}.stage--landing{background:#040404}.landing-marquee{position:absolute;inset:-8% -28%}.landing-marquee__row{position:absolute;left:0;width:200%;height:24%;transform:rotate(-8deg)}.landing-marquee__row:nth-child(1){top:-5%}.landing-marquee__row:nth-child(2){top:19%}.landing-marquee__row:nth-child(3){top:43%}.landing-marquee__row:nth-child(4){top:67%}.landing-marquee__track{display:flex;align-items:center;gap:1.4%;width:max-content;height:100%}.landing-marquee__card{width:20.6vh;height:100%;border-radius:1.35vh;border:1px solid rgba(255,255,255,.2);background:linear-gradient(145deg,#ffffff2b,#ffffff0d);display:grid;place-items:center;color:#ffffffc7;font-size:clamp(1.1vh,1.35vh,1.55vh)}.landing-marquee__row[data-row="0"] .landing-marquee__track,.landing-marquee__row[data-row="2"] .landing-marquee__track{animation:marquee-left 34s linear infinite}.landing-marquee__row[data-row="1"] .landing-marquee__track,.landing-marquee__row[data-row="3"] .landing-marquee__track{animation:marquee-right 36s linear infinite}@keyframes marquee-left{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes marquee-right{0%{transform:translate(-50%)}to{transform:translate(0)}}.stage--select{background:linear-gradient(180deg,#5b5b5b,#282828 46%,#070707);padding-top:16%}.theme-grid{position:absolute;left:50%;top:59%;width:86%;transform:translate(-50%,-50%);display:grid;grid-template-columns:1fr 1fr;gap:1.2vh}.theme-card{border:1px solid rgba(255,255,255,.5);background:#00000070;border-radius:0;overflow:hidden;color:#fff;text-align:center;padding:0;min-height:28vh;cursor:pointer}.theme-card .asset-slot{border:0;border-bottom:1px solid rgba(255,255,255,.2);border-radius:0;min-height:21vh}.theme-card h3{padding:1.2vh .8vh 1.5vh;font-size:clamp(1.7vh,2.1vh,2.35vh)}.stage--choose{background:linear-gradient(180deg,#000,#05070b 72%,#000)}.choose-deck{position:absolute;left:50%;top:42%;width:86%;height:56%;transform:translate(-50%,-50%);perspective:900px}.choose-card{position:absolute;inset:0;border-radius:3vh;overflow:hidden;background:linear-gradient(180deg,#141820,#0e1116);border:1px solid rgba(255,255,255,.2);box-shadow:0 1.8vh 3.2vh #0000005c}.choose-card .asset-slot{border:0;border-radius:0;min-height:80%}.choose-card h2{position:absolute;left:7%;bottom:14%;font-size:clamp(3vh,3.8vh,4.2vh);letter-spacing:.08em;text-shadow:0 .4vh .8vh rgba(0,0,0,.4)}.choose-card--back{transform:translate(-6%) scale(.96) rotate(-8deg);opacity:.72}.choose-card--front{touch-action:none;cursor:grab;transition:transform .2s ease}.choose-card--front.is-animating{transition:transform .38s ease}.choose-controls{position:absolute;left:50%;top:77%;width:72%;transform:translate(-50%,-50%);display:flex;justify-content:space-between}.choice-btn{width:7.6vh;height:7.6vh;border-radius:50%;border:0;font-size:3.2vh;cursor:pointer}.choice-btn--left{color:#fff;background:#1167e0}.choice-btn--star{color:#fff;background:#f1b007}.choice-btn--right{color:#fff;background:#d92b3b}.choose-caption{position:absolute;left:50%;bottom:4.6%;width:86%;transform:translate(-50%);text-align:center;font-size:clamp(1.48vh,1.76vh,1.95vh);line-height:1.4;color:#f7f9ff}.choose-fx{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%) scale(.8);opacity:0;font-size:10vh;text-shadow:0 1.2vh 2.4vh rgba(0,0,0,.35);transition:opacity .24s ease,transform .24s ease;pointer-events:none}.choose-fx.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.stage--video,.stage--video-done{background:#000}.video-shell{position:absolute;left:50%;top:42%;width:80%;height:60%;transform:translate(-50%,-50%);border-radius:3.5vh;border:1px solid rgba(255,255,255,.35);overflow:hidden;background:#0a0f14}.video-shell video{width:100%;height:100%;object-fit:cover;background:#000}.video-mask{position:absolute;inset:0;border:0;border-radius:0}#videoStatus{position:absolute;left:50%;top:76%;width:82%;transform:translate(-50%);text-align:center;font-size:clamp(1.45vh,1.75vh,1.95vh);color:#e6e9f0}#videoPlayBtn{position:absolute;left:50%;top:84%;width:44%;transform:translate(-50%,-50%);color:#fff;background:#1f2430}#videoNextDisabled{position:absolute;left:50%;top:91%;width:60%;transform:translate(-50%,-50%)}.stage--video-done .btn--primary{position:absolute;left:50%;top:89%;width:56%;transform:translate(-50%,-50%)}.stage--unlock{background:linear-gradient(180deg,#04060a94,#04060aad),radial-gradient(circle at 64% 18%,rgba(255,174,41,.23),transparent 36%),#0a0d14}.stage--card{background:radial-gradient(circle at 52% 46%,rgba(70,114,252,.44),transparent 30%),linear-gradient(180deg,#010206,#061033 62%,#05070d)}.draw-grid{position:absolute;left:50%;top:52%;width:76%;transform:translate(-50%,-50%);display:grid;grid-template-columns:1fr 1fr;gap:2.1vh}.draw-card{aspect-ratio:.73;border:1px solid rgba(255,255,255,.55);border-radius:1.7vh;background:linear-gradient(145deg,#ffffff0f,#ffffff03),#090d15;color:#fff;font-size:clamp(1.8vh,2.2vh,2.45vh);font-weight:700;letter-spacing:.1em;cursor:pointer;box-shadow:0 0 1.35vh #a1c1ff66}.draw-card.is-picked{border-color:#ffd45a;box-shadow:0 0 3.2vh #ffd45aa6}.card-reveal{position:absolute;inset:0;background:radial-gradient(circle at center,#ffeca0e6,#fff0);opacity:0;transform:scale(.85);transition:opacity .35s ease,transform .35s ease;pointer-events:none}.card-reveal.is-visible{opacity:.85;transform:scale(1.08)}.stage--result{background:radial-gradient(circle at 80% 16%,rgba(255,207,91,.3),transparent 38%),linear-gradient(180deg,#070707,#252525 70%,#4f4f4f)}.prize-panel{position:absolute;left:50%;top:45%;width:78%;transform:translate(-50%,-50%);background:#50545cc7;border:1px solid rgba(255,255,255,.62);border-radius:2vh;text-align:center;padding:2vh 4.4%}.prize-panel h2{font-size:clamp(2.5vh,3.2vh,3.5vh);margin-bottom:1.2vh}.prize-panel .asset-slot{min-height:22vh;margin-bottom:1.5vh}.prize-panel p{font-size:clamp(1.35vh,1.62vh,1.8vh);line-height:1.45}.result-actions{position:absolute;left:50%;bottom:11.2%;width:84%;transform:translate(-50%);display:flex;gap:1.2vh}.result-actions .btn{flex:1}.stage--result>.btn--ghost{position:absolute;left:50%;bottom:3.6%;width:40%;transform:translate(-50%)}.stage--gift{background:linear-gradient(180deg,#060608,#0b111f 42%,#4c4c4c)}.rule-panel{position:absolute;left:50%;top:42%;width:82%;transform:translate(-50%,-50%);text-align:left;line-height:1.6;font-size:clamp(1.45vh,1.72vh,1.95vh)}.rule-panel p+p{margin-top:.8vh}.stage--gift .result-actions{bottom:12.5%}.stage--redeem{background:linear-gradient(180deg,#040406,#1c1f27 40%,#4d4d4d)}.redeem-panel{position:absolute;left:50%;top:44%;width:84%;min-height:73%;transform:translate(-50%,-50%);padding:2vh 5%;background:#f4f4f5;border-radius:2.4vh;color:#1e1f24;text-align:center}.redeem-panel h1{font-size:clamp(2.6vh,3.1vh,3.45vh);color:#bf1d2a}.redeem-panel p{margin-top:.7vh;font-size:clamp(1.35vh,1.62vh,1.82vh)}.redeem-panel h2{margin-top:1.2vh;font-size:clamp(2vh,2.4vh,2.65vh);color:#52535c}.redeem-display{margin:1vh auto 1.4vh;width:94%;min-height:5.6vh;border-radius:1.1vh;background:#e2e2e3;display:grid;place-items:center;font-size:clamp(2.2vh,2.6vh,2.9vh);letter-spacing:.24em;color:#252a31}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:1vh}.key{min-height:7.1vh;border:0;border-radius:50%;font-size:clamp(2.8vh,3.5vh,4vh);font-weight:800;color:#fff;background:linear-gradient(180deg,#1d2129,#0b0d12);cursor:pointer}.key--text,.key--confirm{border-radius:3vh;font-size:clamp(1.7vh,2.05vh,2.35vh);letter-spacing:.05em}.key--confirm{background:linear-gradient(180deg,#f23943,#b6101a)}.redeem-note{margin-top:1.4vh;text-align:left;font-size:clamp(1.16vh,1.35vh,1.52vh);color:#2f3035}.stage--redeem>.btn--ghost{position:absolute;left:50%;bottom:3.5%;width:32%;transform:translate(-50%)}.stage--error{background:#000000d6}.dialog{position:absolute;left:50%;top:50%;width:72%;transform:translate(-50%,-50%);background:#fff;color:#cf111f;border-radius:1.8vh;text-align:center;padding:2.4vh 6%}.dialog h1{font-size:clamp(2.2vh,2.75vh,3vh)}.dialog p{margin-top:1vh;color:#d31722;font-size:clamp(1.6vh,1.9vh,2.15vh)}.dialog .btn{margin-top:1.8vh;width:48%}.stage--success{background:linear-gradient(180deg,#00000061,#0006),radial-gradient(circle at 80% 15%,rgba(30,78,157,.35),transparent 40%),#111}.success-actions{position:absolute;left:50%;top:70%;width:64%;transform:translate(-50%,-50%);display:grid;gap:1.2vh}.success-actions .btn{width:100%}@media(max-height:700px){.app-shell{border-radius:0}.copy h1{font-size:2.2vh}.copy h2{font-size:1.8vh}}