:root{
  --bg:#02050b;--panel:#071527;--panel2:#0a1c31;--cyan:#24e5ff;--blue:#1687ff;--violet:#8e4dff;
  --red:#ff315d;--magenta:#e849ff;--gold:#ffc84a;--gold2:#ff9f2f;--text:#f6f9ff;--muted:#91a4bd;
  --metal:#a9bfd3;--line:#286897;--charge:0;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#01040a;color:var(--text);font-family:Inter,"Noto Sans TC","PingFang TC",system-ui,-apple-system,sans-serif}
body{display:flex;justify-content:center;overflow-x:hidden}
button,a{-webkit-tap-highlight-color:transparent}.app-shell{position:relative;width:min(100%,800px);min-height:100vh;overflow:hidden;background:radial-gradient(circle at 50% 8%,#133869 0,#08182e 27%,#030812 62%,#01040a 100%);padding:22px 18px 38px;isolation:isolate}
.bg-grid{position:absolute;inset:0;z-index:-5;opacity:.32;background-image:linear-gradient(#218dff14 1px,transparent 1px),linear-gradient(90deg,#218dff14 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(#000,transparent 88%)}
.bg-grid:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(120deg,transparent 0 80px,#40dfff08 82px 83px,transparent 84px 165px)}
.spot{position:absolute;width:300px;height:720px;top:-170px;filter:blur(34px);opacity:.18;transform:rotate(23deg);background:#41baff;z-index:-4}.s1{left:-120px}.s2{right:-130px;background:#ff2f70;transform:rotate(-23deg)}
.ambient-beam{position:absolute;top:-60px;width:26px;height:680px;background:linear-gradient(#fff0,#77dbffb5,#5ab8ff15,#fff0);filter:blur(5px);opacity:.28;z-index:-3;transform-origin:top}.beam-a{left:11%;transform:rotate(17deg)}.beam-b{right:11%;transform:rotate(-17deg);background:linear-gradient(#fff0,#ff5a8ab5,#8a4bff15,#fff0)}
.top-rail{position:relative;z-index:2;display:flex;align-items:center;gap:12px;justify-content:center;color:#5fcfff;font-size:9px;letter-spacing:.25em;font-weight:900;opacity:.9;margin-bottom:2px}.top-rail i{height:1px;width:55px;background:linear-gradient(90deg,transparent,#4fdfff)}.top-rail i:last-child{transform:scaleX(-1)}
.hero-head{position:relative;text-align:center;padding:8px 8px 16px;z-index:2}.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;letter-spacing:.25em;color:#69ddff;font-weight:900}.eyebrow span{width:28px;height:1px;background:#69ddff;box-shadow:0 0 8px #69ddff}
.hero-head h1{margin:5px 0 3px;font-size:clamp(36px,9vw,64px);line-height:1;font-weight:1000;letter-spacing:-.04em;text-shadow:0 0 18px #258cff88,0 5px 0 #07142d}.hero-head h1 span{font-size:1.26em;background:linear-gradient(#d7f8ff,#42ceff 68%,#2693ff);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 10px #31c8ff70)}.hero-head p{margin:11px 0 9px;color:#d8e9ff;font-weight:700}.badges{display:inline-flex;gap:12px;align-items:center;border:1px solid #d5a23a70;padding:8px 17px;border-radius:999px;background:linear-gradient(180deg,#251d0bd9,#0d0a05e6);color:#ffe080;font-size:13px;box-shadow:0 0 18px #ffbd2330,inset 0 0 13px #ffbd2314}.badges i{width:1px;height:16px;background:#8b6a29}
.screen{display:none;position:relative;z-index:2;animation:screenIn .34s cubic-bezier(.2,.7,.25,1)}.screen.active{display:block}@keyframes screenIn{from{opacity:.1;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.arena{position:relative;margin:6px auto 18px;width:100%;height:420px;border-radius:32px;background:radial-gradient(ellipse at 50% 12%,#20507c66 0,#0c2240 26%,#061222 53%,#02060c 76%);border:1px solid #3e82b980;box-shadow:inset 0 0 65px #0aa7ff20,0 18px 60px #000c,0 0 0 1px #59d8ff0c;overflow:hidden;perspective:800px}
.arena:before{content:"";position:absolute;left:4%;right:4%;bottom:-1%;height:45%;border-radius:50%;border:5px solid #2abfff40;background:radial-gradient(ellipse,#245e949c 0,#0a1825 45%,#020409 68%,#000 100%);box-shadow:0 0 28px #19c6ff55,inset 0 0 44px #147cff55,0 -5px 0 #385572;transform:perspective(520px) rotateX(61deg)}
.arena:after{content:"";position:absolute;left:0;right:0;top:22%;height:55%;background:repeating-linear-gradient(90deg,transparent 0 8%,#73dfff12 8.2% 8.5%,transparent 8.7% 16%),linear-gradient(transparent,#1860a312,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 72%,transparent);pointer-events:none}
.ring{position:absolute;left:50%;top:68%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) rotateX(66deg);box-shadow:0 0 28px #1cc8ff55;z-index:1}.r0{width:82%;border:1px dashed #7ee7ff36}.r1{width:69%;border:2px solid #2ee3ff6b}.r2{width:51%;border:2px solid #b452ff58;box-shadow:0 0 22px #b452ff38}
.light-column{position:absolute;top:4%;width:18px;height:64%;background:linear-gradient(#b7edff00,#66dbffcc,#1478ff33,#1ca7ff00);filter:blur(3px);opacity:.55;transform-origin:top;z-index:0}.lc1{left:24%;transform:rotate(10deg)}.lc2{right:24%;transform:rotate(-10deg);background:linear-gradient(#ffb3ce00,#ff5f86cc,#a42eff33,#e34fff00)}
.arena-screen{position:absolute;top:14%;width:128px;height:67px;padding:10px 13px;border:1px solid #2d91d666;background:linear-gradient(145deg,#09233db8,#06101b99);clip-path:polygon(8% 0,100% 0,100% 72%,90% 100%,0 100%,0 20%);z-index:1;opacity:.82}.arena-screen small{display:block;color:#4fcdff;font-size:8px;letter-spacing:.18em}.arena-screen b{display:block;font-size:11px;margin-top:7px;letter-spacing:.08em}.screen-left{left:4%}.screen-right{right:4%;transform:scaleX(-1)}.screen-right>*{display:block;transform:scaleX(-1);color:#ff7697!important}
.arena-caption,.battle-floor-copy{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.34em;color:#79dfff96;font-weight:900;z-index:4;white-space:nowrap}
/* CSS 3D spinning tops */
.top{position:absolute;width:150px;height:150px;border-radius:50%;z-index:5;filter:drop-shadow(0 16px 13px #000a);transform-style:preserve-3d;will-change:transform,filter}
.top:before{content:"";position:absolute;inset:2%;border-radius:50%;background:
  radial-gradient(circle at 50% 50%,#09111d 0 10%,#bde9ff 11% 14%,transparent 15%),
  conic-gradient(from 7deg,
    transparent 0 4%,currentColor 4% 12%,#eaf7ff 12% 18%,#25415c 18% 23%,
    transparent 23% 29%,currentColor 29% 39%,#d7efff 39% 46%,#1b334b 46% 50%,
    transparent 50% 56%,currentColor 56% 67%,#eef9ff 67% 74%,#203a52 74% 79%,
    transparent 79% 84%,currentColor 84% 94%,#d9efff 94% 100%);
  box-shadow:inset 0 0 0 6px #071222,inset 0 0 0 11px #b9d8e740,inset 0 0 34px #fff4,0 0 12px currentColor;
  clip-path:polygon(50% 0,61% 10%,76% 4%,81% 19%,96% 23%,88% 38%,100% 50%,88% 62%,96% 77%,81% 81%,76% 96%,61% 90%,50% 100%,39% 90%,24% 96%,19% 81%,4% 77%,12% 62%,0 50%,12% 38%,4% 23%,19% 19%,24% 4%,39% 10%)}
.top:after{content:"";position:absolute;inset:24%;border-radius:50%;background:conic-gradient(#07121e,currentColor,#eaf9ff,currentColor,#08111c);box-shadow:inset 0 0 0 6px #0b1522,inset 0 0 0 9px currentColor,0 0 18px currentColor;transform:translateZ(20px)}
.top span{position:absolute;inset:39%;border-radius:50%;background:radial-gradient(circle at 38% 28%,#f7fdff 0 8%,currentColor 9% 30%,#0b1422 33% 61%,#b9dded 63% 70%,#07101b 72%);border:2px solid #d6efff;box-shadow:0 0 12px currentColor,inset 0 0 8px #fff6;z-index:2;transform:translateZ(35px)}
.top span:after{content:"3D";position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:1000;color:#fff;text-shadow:0 0 8px currentColor}
.top-blue{color:#1fdcff}.top-red{color:#ff315d}.top-red:before{filter:hue-rotate(10deg) saturate(1.3)}
.top-blue.hero-top{left:12%;bottom:18%;transform:rotateX(56deg) rotateZ(-12deg) scale(1.03)}.top-red.hero-top{right:12%;bottom:18%;transform:rotateX(56deg) rotateZ(12deg) scale(1.03)}
.idle:before,.idle:after,.idle span{animation:rotorSpin 1.35s linear infinite}.top-red.idle:before,.top-red.idle:after,.top-red.idle span{animation-direction:reverse;animation-duration:1.15s}
@keyframes rotorSpin{to{rotate:360deg}}
.versus{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%) skew(-7deg);font-size:55px;font-style:italic;font-weight:1000;color:#fff;text-shadow:0 0 9px #63dfff,0 0 24px #5a77ff,4px 0 0 #1acbff,-4px 0 0 #f43dff;z-index:7;line-height:.72}.versus small{display:block;font-size:8px;letter-spacing:.28em;color:#9fe9ff;text-align:center;margin-bottom:9px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:13px 0 17px}.feature-grid article{position:relative;padding:14px 7px 13px;border-radius:14px;text-align:center;background:linear-gradient(180deg,#0c2037e8,#06101ce8);border:1px solid #2a80bd78;box-shadow:inset 0 0 20px #13aaff10,0 5px 16px #0006;overflow:hidden}.feature-grid article:before{content:"";position:absolute;top:0;left:25%;right:25%;height:1px;background:#66dcff;box-shadow:0 0 8px #66dcff}.feature-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;margin:0 auto 7px;border:1px solid #3c9bd3;color:#65dcff;font-size:9px;font-weight:1000;background:#09213b}.feature-grid strong{display:block;font-size:13px}.feature-grid small{display:block;margin-top:5px;color:var(--muted);font-size:10px;line-height:1.4}
.btn{position:relative;width:100%;min-height:61px;border:0;border-radius:14px;margin:8px 0;font-size:20px;font-weight:1000;letter-spacing:.045em;cursor:pointer;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transition:transform .14s,filter .14s,box-shadow .14s}.btn span{position:relative;z-index:2}.btn i{position:relative;z-index:2;font-size:8px;font-style:normal;letter-spacing:.24em;opacity:.7;margin-top:4px}.btn:before{content:"";position:absolute;inset:0;transform:translateX(-110%) skew(-25deg);background:linear-gradient(90deg,transparent,#fff4,transparent);transition:transform .45s}.btn:hover:before{transform:translateX(110%) skew(-25deg)}.primary{color:#fff;background:linear-gradient(180deg,#20a3ff,#105ce8 52%,#123fc9);border:1px solid #79e3ff;box-shadow:0 0 25px #1398ff55,inset 0 0 20px #57ddff55,0 4px 0 #052777}.primary.mega{min-height:72px;font-size:25px;clip-path:polygon(3% 0,97% 0,100% 25%,100% 75%,97% 100%,3% 100%,0 75%,0 25%)}.primary:active{transform:scale(.982)}.secondary{color:#fff;background:linear-gradient(180deg,#1e1a10,#0c1018);border:1px solid #d4a140;box-shadow:inset 0 0 16px #ffbd3b19,0 0 14px #ffb12c20}.ghost{color:#c8dbf1;background:#07111dcc;border:1px solid #294e73;font-size:15px;min-height:49px}.disabled{color:#788492;background:#252a31;border:1px solid #4a5562;cursor:not-allowed;box-shadow:none}
.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:8px 0 12px;padding:6px 3px}.hud>div{position:relative}.hud>div:last-child{text-align:right}.hud b{display:block;font-style:italic;font-size:13px;letter-spacing:.06em}.hud em{min-width:58px;text-align:center;font-size:25px;font-weight:1000;color:#fff;text-shadow:0 0 16px #7557ff;font-style:normal;line-height:.8}.hud em small{display:block;font-size:7px;letter-spacing:.18em;color:#84dfff;margin-bottom:5px}.bar{display:block;margin-top:5px;height:12px;border-radius:2px;background:#101927;border:1px solid #41536b;overflow:hidden;transform:skew(-12deg);box-shadow:inset 0 0 8px #000}.bar i{display:block;height:100%;width:86%;transition:width .3s;box-shadow:0 0 12px currentColor}.cyan i{background:linear-gradient(90deg,#1eeeff,#1991ff)}.red i{background:linear-gradient(90deg,#b53fff,#ff405f)}.mini-top{position:absolute;width:34px;height:34px;border-radius:50%;top:-3px;background:conic-gradient(currentColor,#dff8ff,currentColor,#08131f,currentColor);box-shadow:0 0 10px currentColor;animation:rotorSpin 1.5s linear infinite}.hud-player{padding-left:43px}.hud-enemy{padding-right:43px}.hud-enemy .mini-top{right:0}.hud-player .mini-top{left:0}.blue-mini{color:#23dfff}.red-mini{color:#ff4067;animation-direction:reverse}
.launch-arena{height:430px}.launch-arena .top-blue{width:194px;height:194px;left:50%;bottom:19%;transform:translateX(-50%) rotateX(55deg)}.charge:before,.charge:after,.charge span{animation:rotorSpin .56s linear infinite}.charge{filter:drop-shadow(0 0 28px #28ddff) drop-shadow(0 18px 13px #000c);transition:filter .15s}.charge.perfect{filter:drop-shadow(0 0 43px #fff) drop-shadow(0 0 34px #32eaff) brightness(1.2)}.far{width:92px;height:92px;right:9%;bottom:43%;opacity:.82;transform:rotateX(55deg)}.far:before,.far:after,.far span{animation:rotorSpin .8s linear infinite reverse}.launch-pad{position:absolute;left:50%;bottom:7%;width:56%;height:19%;transform:translateX(-50%) perspective(500px) rotateX(58deg);border:5px solid #173a58;border-radius:50%;background:radial-gradient(#1a6bab80,#07101a 58%);box-shadow:0 0 22px #28ccff66,inset 0 0 25px #29cfff55;z-index:2}.launch-pad i{position:absolute;inset:20%;border-radius:50%;border:2px dashed #61e6ff88;animation:rotorSpin 4s linear infinite}.energy-stream{position:absolute;left:50%;bottom:16%;width:5px;height:51%;background:linear-gradient(transparent,#5ce9ff,#fff,transparent);filter:blur(2px);opacity:.48;z-index:1;transform-origin:bottom}.es1{transform:rotate(20deg)}.es2{transform:rotate(-20deg)}
.charge-box{text-align:center;padding:14px 16px 13px;border-radius:20px;background:linear-gradient(180deg,#071727ed,#040b14ed);border:1px solid #2a719f;box-shadow:inset 0 0 28px #13b9ff13;transition:border-color .2s,box-shadow .2s}.charge-box.hot{border-color:#4ce7ff;box-shadow:0 0 22px #1fbfff30,inset 0 0 32px #23ceff22}.charge-dial{position:relative;width:180px;height:104px;margin:0 auto 3px;overflow:hidden}.charge-dial:before{content:"";position:absolute;left:11px;right:11px;top:9px;height:150px;border-radius:50%;background:conic-gradient(from 230deg,#19e8ff 0 calc(var(--charge)*1.8deg),#14263b calc(var(--charge)*1.8deg) 180deg,transparent 180deg 360deg);mask:radial-gradient(circle at 50% 50%,transparent 0 54px,#000 55px 66px,transparent 67px);transform:rotate(-90deg);filter:drop-shadow(0 0 8px #26dcff)}.dial-ring{position:absolute;left:25px;right:25px;top:24px;height:130px;border-radius:50%;border:1px solid #39769b;opacity:.6}.charge-dial small{position:absolute;top:18px;left:0;right:0;color:#8cc9e9;font-size:8px;letter-spacing:.18em}.charge-dial strong{position:absolute;top:42px;left:0;right:0;font-size:38px;line-height:1}.charge-dial span{position:absolute;top:82px;left:0;right:0;font-size:9px;color:#6bdfff;letter-spacing:.12em;font-weight:800}.charge-track{height:5px;background:#101a28;border-radius:99px;overflow:hidden}.charge-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#10e5ff,#28a7ff,#a34cff);box-shadow:0 0 10px #2bceff;transition:width .045s}.charge-box p{margin:9px 0 0;color:#ffdb68;font-weight:900;font-size:13px}
.battle-arena{height:485px;transition:transform .09s}.battle-arena.hit{animation:arenaShake .18s linear 1}@keyframes arenaShake{0%,100%{transform:translate(0)}25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,-2px)}}.fighting{bottom:24%;width:160px;height:160px}.fighting:before,.fighting:after,.fighting span{animation:rotorSpin .24s linear infinite}.fighting.a{left:7%;animation:attackA 1.05s cubic-bezier(.55,.02,.44,.98) infinite}.fighting.b{right:7%;animation:attackB 1.05s cubic-bezier(.55,.02,.44,.98) infinite}.fighting.b:before,.fighting.b:after,.fighting.b span{animation-direction:reverse;animation-duration:.2s}.impact{position:absolute;z-index:8;left:50%;top:62%;width:125px;height:125px;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0 5%,#fff29a 7%,#ffdc3c 16%,#ff5b24 31%,#ff2f5d55 50%,transparent 69%);filter:blur(.3px);animation:impactFlash .44s ease-in-out infinite;mix-blend-mode:screen}.shockwave{position:absolute;z-index:7;left:50%;top:62%;width:75px;height:75px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);animation:shock 1.05s ease-out infinite;opacity:.6}.spark{position:absolute;z-index:9;width:4px;height:52px;background:linear-gradient(#fff,#ffc14c,transparent);left:50%;top:61%;transform-origin:bottom;filter:drop-shadow(0 0 5px #ff7b27)}.sp1{transform:translate(-50%,-50%) rotate(25deg)}.sp2{transform:translate(-50%,-50%) rotate(85deg)}.sp3{transform:translate(-50%,-50%) rotate(145deg)}.sp4{transform:translate(-50%,-50%) rotate(210deg)}.spark{animation:sparkFly .68s ease-out infinite}.sp2{animation-delay:.15s}.sp3{animation-delay:.28s}.sp4{animation-delay:.42s}@keyframes attackA{0%,100%{left:7%;transform:rotateX(55deg) rotateZ(-8deg)}50%{left:35%;transform:rotateX(55deg) rotateZ(35deg) scale(1.08)}}@keyframes attackB{0%,100%{right:7%;transform:rotateX(55deg) rotateZ(8deg)}50%{right:35%;transform:rotateX(55deg) rotateZ(-35deg) scale(1.08)}}@keyframes impactFlash{50%{opacity:.28;scale:.64}}@keyframes shock{0%{scale:.4;opacity:.9}100%{scale:4;opacity:0}}@keyframes sparkFly{0%{height:12px;opacity:0}25%{opacity:1}100%{height:85px;opacity:0;translate:20px -22px}}.battle-label{display:flex;gap:12px;align-items:center;justify-content:center;text-align:center;color:#d9f3ff;font-weight:1000;margin:-4px 0 10px;text-shadow:0 0 10px #1cc8ff;letter-spacing:.08em}.battle-label span{height:1px;width:45px;background:linear-gradient(90deg,transparent,#42dfff)}.battle-label span:last-child{transform:scaleX(-1)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.stats>div{padding:12px;border-radius:12px;background:linear-gradient(180deg,#081a2e,#050c16);border:1px solid #2d6c9b;text-align:center;box-shadow:inset 0 0 14px #29cfff0c}.stats small{display:block;color:#7fb2d7;font-size:9px;letter-spacing:.1em}.stats strong{display:block;font-size:33px;color:#fff;text-shadow:0 0 11px #4ccfff}
.result-screen{text-align:center;padding-top:8px}.result-rays{position:absolute;left:50%;top:135px;width:560px;height:560px;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,#ffd65f11 0 3deg,transparent 3deg 14deg);mask-image:radial-gradient(circle,#000,transparent 70%);animation:rays 15s linear infinite;pointer-events:none}@keyframes rays{to{rotate:360deg}}.result-title{position:relative;z-index:2}.result-title h2{font-size:44px;margin:4px 0;background:linear-gradient(#fff5a5,#ffc64a 52%,#f5962f);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #6e3d00) drop-shadow(0 0 16px #ffb92e66)}.result-title small{color:#74dcff;font-weight:1000;letter-spacing:.15em}.result-title p{margin-top:4px}.coupon-card{position:relative;margin:22px auto 12px;padding:31px 19px 27px;border-radius:18px;background:linear-gradient(145deg,#0b2e5e,#081a36 54%,#071120);border:2px solid #3ebeff;box-shadow:0 0 30px #1d9cff5e,inset 0 0 36px #27a6ff21;clip-path:polygon(4% 0,96% 0,100% 16%,100% 84%,96% 100%,4% 100%,0 84%,0 16%);overflow:hidden}.coupon-card:before{content:"";position:absolute;inset:6px;clip-path:inherit;border:1px solid #8eeaff4d;pointer-events:none}.coupon-card:after{content:"";position:absolute;top:-40%;left:-20%;width:34%;height:180%;background:linear-gradient(90deg,transparent,#fff3,transparent);transform:rotate(22deg);animation:couponShine 5s ease-in-out infinite}@keyframes couponShine{0%,60%{left:-35%}86%,100%{left:120%}}.coupon-card.tier-S,.coupon-card.tier-SSR{border-color:#ffd15c;box-shadow:0 0 36px #ffb72c66,inset 0 0 38px #ffb72c1e;background:linear-gradient(145deg,#18375c,#102443 52%,#1c1308)}.coupon-card.tier-A{border-color:#be7cff;box-shadow:0 0 34px #a84cff55,inset 0 0 38px #a84cff17}.tier-badge{position:absolute;left:18px;top:15px;width:54px;height:54px;border-radius:12px;background:linear-gradient(145deg,#081221,#132d4f);border:1px solid #54cfff;display:grid;place-items:center;align-content:center;box-shadow:0 0 13px #2ec7ff38}.tier-badge small{font-size:7px;color:#8fb9d7;line-height:1}.tier-badge strong{font-size:24px;color:#fff;line-height:1.1}.coupon-tech{color:#74dfff;font-size:9px;letter-spacing:.2em}.coupon-card>strong{display:block;font-size:clamp(36px,11vw,60px);color:#ffd55f;margin:11px 0 8px;text-shadow:0 3px 0 #7b4c00,0 0 18px #ffc94a40}.coupon-card>p{margin:0}.coupon-lines{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:15px}.coupon-lines i{width:52px;height:1px;background:linear-gradient(90deg,transparent,#50d8ff)}.coupon-lines i:last-child{transform:scaleX(-1)}.coupon-lines b{width:5px;height:5px;border:1px solid #59ddff;rotate:45deg}.code-panel{padding:15px 16px;border-radius:15px;background:linear-gradient(180deg,#071626,#040b13);border:1px solid #316b9b;box-shadow:inset 0 0 20px #23bfff0d}.code-panel small{display:block;color:#8fb5d5;font-size:9px;letter-spacing:.12em}.code-row{display:flex;align-items:center;justify-content:center;gap:9px;margin:8px 0}.code-panel code{font-size:24px;font-weight:1000;color:#fff;letter-spacing:.06em;text-shadow:0 0 11px #4abfff}.code-row span{font-size:7px;color:#57d9ff;border:1px solid #276a97;padding:4px 5px;border-radius:4px}.code-panel p{margin:0;color:#a9bed5;font-size:12px}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(40px);opacity:0;transition:.25s;background:#081426f2;color:#fff;border:1px solid #357cb2;padding:12px 18px;border-radius:12px;z-index:20;pointer-events:none;box-shadow:0 14px 40px #0009}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}dialog{max-width:520px;border:1px solid #2d77ad;border-radius:18px;background:linear-gradient(180deg,#091a2c,#050c16);color:#fff;padding:27px;box-shadow:0 30px 80px #000c}dialog::backdrop{background:#000c}.x{float:right;border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}.dialog-kicker{font-size:9px;color:#61dfff;letter-spacing:.22em;font-weight:900}.game-footer{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;z-index:2;margin-top:22px;color:#52708e}.game-footer span{font-size:9px;font-weight:1000;letter-spacing:.15em}.game-footer i{width:1px;height:11px;background:#31536d}.game-footer small{font-size:7px;letter-spacing:.13em}
@media(max-width:520px){.app-shell{padding-left:12px;padding-right:12px}.top-rail{font-size:7px}.arena{height:355px;border-radius:25px}.launch-arena{height:370px}.battle-arena{height:415px}.top{width:118px;height:118px}.top-blue.hero-top{left:9%}.top-red.hero-top{right:9%}.launch-arena .top-blue{width:158px;height:158px}.fighting{width:126px;height:126px}.versus{font-size:43px}.arena-screen{width:98px;height:58px;padding:8px}.feature-grid{gap:5px}.feature-grid article{padding:10px 4px}.feature-grid strong{font-size:11px}.feature-grid small{font-size:8.5px}.feature-icon{width:24px;height:24px}.btn{min-height:56px;font-size:18px}.primary.mega{min-height:66px;font-size:22px}.charge-dial{width:164px}.result-title h2{font-size:38px}.tier-badge{width:48px;height:48px}.tier-badge strong{font-size:21px}.code-panel code{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* ===== v2.1 REAL 3D TOP ASSETS ===== */
.top{
  border-radius:0;
  background:none;
  overflow:visible;
  filter:drop-shadow(0 22px 15px #000b);
}
.top::before{
  content:"";
  position:absolute;
  inset:-14%;
  border-radius:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  box-shadow:none;
  filter:none;
  z-index:3;
  transform-origin:50% 50%;
  will-change:transform,filter;
}
.top-blue::before{background-image:url('images/player-top.webp')}
.top-red::before{background-image:url('images/challenger-top.webp')}
.top::after{
  content:"";
  position:absolute;
  left:7%;right:7%;bottom:-10%;height:30%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,currentColor 0 8%,color-mix(in srgb,currentColor 44%,transparent) 28%,transparent 72%);
  filter:blur(13px);
  opacity:.78;
  box-shadow:none;
  transform:none;
  z-index:1;
  pointer-events:none;
}
.top span{display:none!important}

/* full 3D presence instead of flattening the rendered asset */
.top-blue.hero-top{
  width:220px;height:220px;left:5%;bottom:8%;
  transform:rotateZ(-10deg) scale(1.04);
}
.top-red.hero-top{
  width:220px;height:220px;right:5%;bottom:8%;
  transform:rotateZ(10deg) scale(1.04);
}
.idle::before{animation:assetRotorBlue 1.7s linear infinite}
.top-red.idle::before{animation:assetRotorRed 1.45s linear infinite}
.idle::after{animation:glowPulse 1.5s ease-in-out infinite}

.launch-arena .top-blue{
  width:255px;height:255px;left:50%;bottom:11%;
  transform:translateX(-50%) rotateZ(-5deg);
}
.charge::before{animation:assetRotorBlue .72s linear infinite}
.charge::after{animation:chargeGlow .65s ease-in-out infinite}
.charge.perfect::before{filter:drop-shadow(0 0 20px #65edff) drop-shadow(0 0 40px #249dff) brightness(1.12)}
.far{
  width:128px;height:128px;right:5%;bottom:43%;opacity:.94;
  transform:rotateZ(9deg);
}
.far::before{animation:assetRotorRed .66s linear infinite}

.fighting{
  bottom:20%;width:205px;height:205px;
  filter:drop-shadow(0 25px 18px #000c);
}
.fighting.a{left:2%;animation:attackA3d 1.05s cubic-bezier(.55,.02,.44,.98) infinite}
.fighting.b{right:2%;animation:attackB3d 1.05s cubic-bezier(.55,.02,.44,.98) infinite}
.fighting.a::before{animation:assetRotorBlue .34s linear infinite}
.fighting.b::before{animation:assetRotorRed .29s linear infinite}
.fighting::after{animation:battleGlow .52s ease-in-out infinite alternate}

/* HUD thumbnails now use the same real top art */
.mini-top{
  border-radius:0;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  box-shadow:none;
  filter:drop-shadow(0 3px 4px #000b);
  animation:none;
}
.blue-mini{background-image:url('images/player-top.webp')}
.red-mini{background-image:url('images/challenger-top.webp')}
.hud-player .mini-top{animation:hudSpinBlue 2.5s linear infinite}
.hud-enemy .mini-top{animation:hudSpinRed 2.15s linear infinite}

@keyframes assetRotorBlue{
  from{transform:rotate(0deg) scale(1)}
  50%{filter:drop-shadow(0 0 8px #24dcff) brightness(1.04)}
  to{transform:rotate(360deg) scale(1)}
}
@keyframes assetRotorRed{
  from{transform:rotate(360deg) scale(1)}
  50%{filter:drop-shadow(0 0 8px #ff315d) brightness(1.05)}
  to{transform:rotate(0deg) scale(1)}
}
@keyframes glowPulse{50%{opacity:1;filter:blur(16px);scale:1.16}}
@keyframes chargeGlow{50%{opacity:1;filter:blur(18px);scale:1.35}}
@keyframes battleGlow{to{opacity:1;filter:blur(18px);scale:1.28}}
@keyframes hudSpinBlue{to{transform:rotate(360deg)}}
@keyframes hudSpinRed{to{transform:rotate(-360deg)}}
@keyframes attackA3d{
  0%,100%{left:2%;transform:rotateZ(-8deg) scale(.96)}
  45%{left:31%;transform:rotateZ(20deg) scale(1.09)}
  52%{left:35%;transform:rotateZ(34deg) scale(1.14)}
  60%{left:27%;transform:rotateZ(15deg) scale(1.06)}
}
@keyframes attackB3d{
  0%,100%{right:2%;transform:rotateZ(8deg) scale(.96)}
  45%{right:31%;transform:rotateZ(-20deg) scale(1.09)}
  52%{right:35%;transform:rotateZ(-34deg) scale(1.14)}
  60%{right:27%;transform:rotateZ(-15deg) scale(1.06)}
}

@media(max-width:520px){
  .top-blue.hero-top,.top-red.hero-top{width:165px;height:165px;bottom:13%}
  .top-blue.hero-top{left:1%}.top-red.hero-top{right:1%}
  .launch-arena .top-blue{width:205px;height:205px;bottom:13%}
  .far{width:105px;height:105px;right:2%}
  .fighting{width:155px;height:155px;bottom:23%}
}


/* ===== v2.2 DEPTH MOTION + BATTLE FINISH SEQUENCE ===== */
.top{transform-style:preserve-3d;perspective:900px}
.top::before{transform-style:preserve-3d;backface-visibility:visible;transform-origin:50% 54%}

/* Instead of a flat record-like spin, the rendered top now precesses in depth. */
.idle::before{animation:precessBlue 1.9s linear infinite}
.top-red.idle::before{animation:precessRed 1.62s linear infinite}
.charge::before{animation:chargePrecess .78s linear infinite}
.far::before{animation:enemyPrecess .72s linear infinite}
.fighting.a::before{animation:battlePrecessBlue .38s linear infinite}
.fighting.b::before{animation:battlePrecessRed .33s linear infinite}

@keyframes precessBlue{
  0%{transform:perspective(760px) rotateX(4deg) rotateY(-7deg) rotateZ(0deg) scale(1.01)}
  25%{transform:perspective(760px) rotateX(-3deg) rotateY(5deg) rotateZ(90deg) scale(.99,1.04)}
  50%{transform:perspective(760px) rotateX(5deg) rotateY(8deg) rotateZ(180deg) scale(1.02,.98)}
  75%{transform:perspective(760px) rotateX(-4deg) rotateY(-5deg) rotateZ(270deg) scale(.99,1.03)}
  100%{transform:perspective(760px) rotateX(4deg) rotateY(-7deg) rotateZ(360deg) scale(1.01)}
}
@keyframes precessRed{
  0%{transform:perspective(760px) rotateX(-4deg) rotateY(7deg) rotateZ(360deg) scale(1.01)}
  25%{transform:perspective(760px) rotateX(3deg) rotateY(-5deg) rotateZ(270deg) scale(.99,1.04)}
  50%{transform:perspective(760px) rotateX(-5deg) rotateY(-8deg) rotateZ(180deg) scale(1.02,.98)}
  75%{transform:perspective(760px) rotateX(4deg) rotateY(5deg) rotateZ(90deg) scale(.99,1.03)}
  100%{transform:perspective(760px) rotateX(-4deg) rotateY(7deg) rotateZ(0deg) scale(1.01)}
}
@keyframes chargePrecess{
  0%{transform:perspective(680px) rotateX(5deg) rotateY(-8deg) rotateZ(0deg) scale(1.02)}
  25%{transform:perspective(680px) rotateX(-5deg) rotateY(7deg) rotateZ(90deg) scale(.98,1.05)}
  50%{transform:perspective(680px) rotateX(6deg) rotateY(9deg) rotateZ(180deg) scale(1.04,.97)}
  75%{transform:perspective(680px) rotateX(-6deg) rotateY(-7deg) rotateZ(270deg) scale(.98,1.05)}
  100%{transform:perspective(680px) rotateX(5deg) rotateY(-8deg) rotateZ(360deg) scale(1.02)}
}
@keyframes enemyPrecess{
  0%{transform:perspective(620px) rotateX(-6deg) rotateY(9deg) rotateZ(360deg)}
  50%{transform:perspective(620px) rotateX(7deg) rotateY(-9deg) rotateZ(180deg) scale(.96,1.06)}
  100%{transform:perspective(620px) rotateX(-6deg) rotateY(9deg) rotateZ(0deg)}
}
@keyframes battlePrecessBlue{
  0%{transform:perspective(580px) rotateX(8deg) rotateY(-12deg) rotateZ(0deg) scale(1.03)}
  25%{transform:perspective(580px) rotateX(-8deg) rotateY(10deg) rotateZ(90deg) scale(.94,1.08)}
  50%{transform:perspective(580px) rotateX(10deg) rotateY(13deg) rotateZ(180deg) scale(1.06,.94)}
  75%{transform:perspective(580px) rotateX(-9deg) rotateY(-10deg) rotateZ(270deg) scale(.94,1.08)}
  100%{transform:perspective(580px) rotateX(8deg) rotateY(-12deg) rotateZ(360deg) scale(1.03)}
}
@keyframes battlePrecessRed{
  0%{transform:perspective(580px) rotateX(-8deg) rotateY(12deg) rotateZ(360deg) scale(1.03)}
  25%{transform:perspective(580px) rotateX(8deg) rotateY(-10deg) rotateZ(270deg) scale(.94,1.08)}
  50%{transform:perspective(580px) rotateX(-10deg) rotateY(-13deg) rotateZ(180deg) scale(1.06,.94)}
  75%{transform:perspective(580px) rotateX(9deg) rotateY(10deg) rotateZ(90deg) scale(.94,1.08)}
  100%{transform:perspective(580px) rotateX(-8deg) rotateY(12deg) rotateZ(0deg) scale(1.03)}
}

/* End-of-battle stage: final hit -> result reveal -> reward unlock. */
.battle-finish{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;transform:scale(.94);transition:.3s ease;background:radial-gradient(circle at center,#07162cc4 0,#02060bdc 48%,#0008 74%,transparent 100%)}
.battle-finish.show{opacity:1;transform:scale(1)}
.finish-kicker{font-size:11px;letter-spacing:.35em;font-weight:1000;color:#69ddff;text-shadow:0 0 12px #38bfff}
.finish-title{margin:8px 0 4px;font-size:clamp(34px,8vw,58px);font-weight:1000;font-style:italic;color:#fff;text-shadow:0 0 16px #40bfff,0 3px 0 #142f55;transform:scale(.82);opacity:.3;transition:.32s cubic-bezier(.2,.8,.2,1)}
.finish-sub{font-size:14px;color:#b9d8ef;font-weight:800;min-height:24px}
.battle-finish.reveal .finish-title{transform:scale(1.08);opacity:1}
.finish-progress{width:min(320px,68%);height:7px;margin-top:20px;border-radius:99px;border:1px solid #3975a1;background:#020914;overflow:hidden;box-shadow:inset 0 0 12px #000,0 0 16px #2fafff25}
.finish-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#1dd8ff,#2589ff,#b852ff);box-shadow:0 0 14px #35cfff;transition:width 1.15s cubic-bezier(.16,.75,.25,1)}
.battle-finish.unlock .finish-title{font-size:clamp(28px,7vw,48px);color:#ffd55e;text-shadow:0 0 18px #ffbd36,0 3px 0 #704500}
.battle-finish.unlock .finish-title::after{content:'獎勵解鎖';display:block}
.battle-finish.unlock .finish-title{font-size:0}
.battle-finish.unlock .finish-title::after{font-size:clamp(30px,7.5vw,50px)}

.battle-arena.final-hit{animation:finalArenaShake .46s cubic-bezier(.36,.07,.19,.97) both}
.battle-arena.final-hit .impact{opacity:1!important;transform:translate(-50%,-50%) scale(2.15)!important;filter:brightness(1.7)}
.battle-arena.final-hit .shockwave{animation:finalShock .72s ease-out 1!important}
@keyframes finalArenaShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes finalShock{0%{opacity:.95;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}}

/* Make the final outcome visible inside the arena instead of cutting straight to the coupon. */
.battle-arena.finishing .fighting{animation-play-state:paused}
.battle-arena.finish-win .fighting.a{left:21%!important;transform:rotateZ(-7deg) scale(1.08)!important;transition:.7s ease}
.battle-arena.finish-win .fighting.a::before{animation:winnerSpinBlue .58s linear infinite!important}
.battle-arena.finish-win .fighting.b{right:-24%!important;bottom:38%!important;transform:rotateZ(34deg) scale(.76)!important;opacity:.3;transition:1s cubic-bezier(.2,.8,.3,1)}
.battle-arena.finish-win .fighting.b::before{animation:loserWobbleRed .9s ease-out forwards!important}
.battle-arena.finish-lose .fighting.b{right:21%!important;transform:rotateZ(7deg) scale(1.08)!important;transition:.7s ease}
.battle-arena.finish-lose .fighting.b::before{animation:winnerSpinRed .58s linear infinite!important}
.battle-arena.finish-lose .fighting.a{left:-24%!important;bottom:38%!important;transform:rotateZ(-34deg) scale(.76)!important;opacity:.3;transition:1s cubic-bezier(.2,.8,.3,1)}
.battle-arena.finish-lose .fighting.a::before{animation:loserWobbleBlue .9s ease-out forwards!important}
.battle-arena.finish-draw .fighting.a,.battle-arena.finish-draw .fighting.b{bottom:14%!important;transition:.8s ease}
.battle-arena.finish-draw .fighting.a::before{animation:drawWobbleBlue .95s ease-in-out infinite!important}
.battle-arena.finish-draw .fighting.b::before{animation:drawWobbleRed .95s ease-in-out infinite!important}

@keyframes winnerSpinBlue{to{transform:perspective(620px) rotateX(4deg) rotateY(-6deg) rotateZ(360deg)}}
@keyframes winnerSpinRed{to{transform:perspective(620px) rotateX(-4deg) rotateY(6deg) rotateZ(-360deg)}}
@keyframes loserWobbleBlue{0%{transform:rotateZ(0) rotateY(0)}35%{transform:rotateZ(120deg) rotateY(25deg) scaleY(.76)}100%{transform:rotateZ(310deg) rotateY(55deg) scale(.62,.84)}}
@keyframes loserWobbleRed{0%{transform:rotateZ(0) rotateY(0)}35%{transform:rotateZ(-120deg) rotateY(-25deg) scaleY(.76)}100%{transform:rotateZ(-310deg) rotateY(-55deg) scale(.62,.84)}}
@keyframes drawWobbleBlue{0%,100%{transform:perspective(620px) rotateX(2deg) rotateY(-4deg) rotateZ(0)}50%{transform:perspective(620px) rotateX(17deg) rotateY(12deg) rotateZ(180deg) scaleY(.78)}}
@keyframes drawWobbleRed{0%,100%{transform:perspective(620px) rotateX(-2deg) rotateY(4deg) rotateZ(0)}50%{transform:perspective(620px) rotateX(-17deg) rotateY(-12deg) rotateZ(-180deg) scaleY(.78)}}

/* Reward page now arrives after a short reveal and pops in instead of appearing abruptly. */
.result-screen.active .result-title{animation:rewardTitleIn .55s cubic-bezier(.18,.8,.2,1) both}
.result-screen.active .coupon-card{animation:rewardCardIn .68s .12s cubic-bezier(.18,.85,.2,1.15) both}
.result-screen.active .code-panel{animation:rewardCardIn .55s .25s ease both}
@keyframes rewardTitleIn{from{opacity:0;transform:translateY(-16px) scale(.92)}to{opacity:1;transform:none}}
@keyframes rewardCardIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}

@media(max-width:520px){
  .finish-sub{font-size:12px;padding:0 16px;text-align:center}.finish-progress{width:72%}
}