:root{--bg:#040811;--panel:#071527;--cyan:#21d9ff;--blue:#1677ff;--violet:#9c4dff;--red:#ff315d;--gold:#ffc84a;--text:#f5f9ff;--muted:#91a4bd}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#02050b;color:var(--text);font-family:Inter,"Noto Sans TC",system-ui,-apple-system,sans-serif}body{display:flex;justify-content:center}.app-shell{position:relative;width:min(100%,760px);min-height:100vh;overflow:hidden;background:radial-gradient(circle at 50% 14%,#102a51 0,#071327 27%,#030812 62%,#01040a 100%);padding:20px 16px 36px}.bg-grid{position:absolute;inset:0;opacity:.25;background-image:linear-gradient(#1a6bc21c 1px,transparent 1px),linear-gradient(90deg,#1a6bc21c 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(#000,transparent 85%)}.spot{position:absolute;width:260px;height:650px;top:-180px;filter:blur(30px);opacity:.18;transform:rotate(25deg);background:#41baff}.s1{left:-90px}.s2{right:-110px;background:#ff2f70;transform:rotate(-25deg)}.hero-head{position:relative;text-align:center;padding:8px 8px 14px;z-index:2}.eyebrow{font-size:11px;letter-spacing:.24em;color:#6bdfff;font-weight:800}.hero-head h1{margin:5px 0 2px;font-size:clamp(34px,9vw,60px);line-height:1;text-shadow:0 0 18px #258cff88}.hero-head h1 span{font-size:1.28em;color:#86e8ff}.hero-head p{margin:10px 0 8px;color:#d7e8ff}.badges{display:inline-flex;gap:12px;align-items:center;border:1px solid #c692314d;padding:8px 15px;border-radius:999px;background:#171209cc;color:#ffdc7a;font-size:13px}.badges i{width:1px;height:16px;background:#725c2d}.screen{display:none;position:relative;z-index:2;animation:fade .25s ease}.screen.active{display:block}@keyframes fade{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}.arena{position:relative;margin:6px auto 18px;width:100%;height:400px;border-radius:36px;background:radial-gradient(ellipse at center,#123764 0,#071526 47%,#02060c 74%);border:1px solid #3e82b955;box-shadow:inset 0 0 40px #0aa7ff1f,0 16px 50px #000a;overflow:hidden}.arena:before{content:"";position:absolute;left:10%;right:10%;bottom:9%;height:42%;border-radius:50%;border:2px solid #50cbff66;background:radial-gradient(ellipse,#18437288 0,#08111a 60%,#000 100%);box-shadow:0 0 24px #19c6ff44,inset 0 0 35px #147cff38;transform:perspective(420px) rotateX(58deg)}.ring{position:absolute;left:50%;top:64%;width:72%;aspect-ratio:1;border-radius:50%;border:2px solid #2ee3ff66;transform:translate(-50%,-50%) rotateX(66deg);box-shadow:0 0 28px #1cc8ff55}.r2{width:52%;border-color:#a955ff66}.top{position:absolute;width:136px;height:136px;border-radius:50%;filter:drop-shadow(0 0 18px currentColor);z-index:3}.top:before,.top:after,.top span{content:"";position:absolute;inset:0;border-radius:50%}.top:before{background:conic-gradient(from 0deg,transparent 0 8%,currentColor 8% 19%,#eaf6ff 19% 28%,transparent 28% 36%,currentColor 36% 49%,#b6c8d8 49% 58%,transparent 58% 68%,currentColor 68% 82%,#f4fbff 82% 91%,transparent 91%)}.top:after{inset:20%;background:radial-gradient(circle,#0b1425 0 26%,currentColor 28% 42%,#d7e5ef 44% 54%,#121b29 56% 100%);box-shadow:inset 0 0 18px #fff4}.top span{inset:42%;background:#101a28;border:3px solid currentColor}.top-blue{color:var(--cyan);left:16%;bottom:18%;transform:rotate(-14deg)}.top-red{color:var(--red);right:16%;bottom:18%;transform:rotate(12deg)}.idle{animation:spin 2.2s linear infinite}.versus{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font-size:50px;font-style:italic;font-weight:1000;color:#fff;text-shadow:0 0 12px #63a8ff,0 0 24px #b042ff;z-index:4}@keyframes spin{to{rotate:360deg}}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 16px}.feature-grid article{padding:13px 8px;border-radius:16px;text-align:center;background:linear-gradient(180deg,#0c2037cc,#07111dcc);border:1px solid #247cc65c;box-shadow:inset 0 0 20px #13aaff10}.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{width:100%;min-height:58px;border:0;border-radius:15px;margin:8px 0;font-size:20px;font-weight:900;letter-spacing:.05em;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center}.primary{color:white;background:linear-gradient(180deg,#218cff,#0d48db);border:1px solid #75dcff;box-shadow:0 0 22px #138fff66,inset 0 0 18px #57ddff55}.primary:active{transform:scale(.985)}.secondary{color:#fff;background:#0b1524;border:1px solid #c39037;box-shadow:inset 0 0 16px #ffbd3b19}.ghost{color:#c8dbf1;background:#07111dcc;border:1px solid #294e73;font-size:15px}.disabled{color:#788492;background:#252a31;border:1px solid #4a5562;cursor:not-allowed}.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:8px 0 12px}.hud>div:last-child{text-align:right}.hud b{display:block;font-style:italic;font-size:13px}.hud em{font-size:28px;font-weight:1000;color:#fff;text-shadow:0 0 16px #7557ff}.bar{display:block;margin-top:5px;height:11px;border-radius:99px;background:#121b28;border:1px solid #41536b;overflow:hidden}.bar i{display:block;height:100%;width:86%;transition:width .4s}.cyan i{background:linear-gradient(90deg,#1eeeff,#1991ff)}.red i{background:linear-gradient(90deg,#ff405f,#b53fff)}.launch-arena{height:410px}.launch-arena .top-blue{width:180px;height:180px;left:50%;bottom:18%;transform:translateX(-50%)}.charge{animation:spin .72s linear infinite,pulse 1.2s ease-in-out infinite}.far{width:84px;height:84px;right:10%;bottom:42%;opacity:.7;animation:spin 1.2s linear infinite}@keyframes pulse{50%{filter:drop-shadow(0 0 34px currentColor) brightness(1.25)}}.charge-box{text-align:center;padding:12px 16px;border-radius:20px;background:#06111fcc;border:1px solid #225f8d}.charge-box small{color:#aac7e6}.charge-box strong{display:block;font-size:42px;margin:3px 0}.charge-track{height:14px;background:#101a28;border-radius:99px;overflow:hidden}.charge-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#10e5ff,#7a4cff);transition:width .05s}.charge-box p{margin:10px 0 0;color:#ffdb68;font-weight:800}.battle-arena{height:470px}.fighting{bottom:23%;animation:spin .26s linear infinite}.fighting.a{left:8%;animation:spin .25s linear infinite,attackA 1.15s ease-in-out infinite}.fighting.b{right:8%;animation:spin .22s linear infinite,attackB 1.15s ease-in-out infinite}.impact{position:absolute;z-index:2;left:50%;top:62%;width:90px;height:90px;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0,#ffd23c 12%,#ff4f24 34%,transparent 68%);filter:blur(1px);animation:flash .55s ease-in-out infinite}@keyframes attackA{50%{left:35%;transform:rotate(40deg) scale(1.12)}}@keyframes attackB{50%{right:35%;transform:rotate(-40deg) scale(1.1)}}@keyframes flash{50%{opacity:.2;scale:.65}}.battle-label{text-align:center;color:#d9f3ff;font-weight:900;margin:-4px 0 10px;text-shadow:0 0 10px #1cc8ff}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.stats>div{padding:12px;border-radius:14px;background:#071425;border:1px solid #2d6c9b;text-align:center}.stats small{display:block;color:#a6bdd6}.stats strong{display:block;font-size:34px;color:white}.result-screen{text-align:center;padding-top:8px}.result-title h2{font-size:42px;margin:3px 0;color:#ffd96b;text-shadow:0 0 20px #ffb92e66}.result-title small{color:#74dcff;font-weight:900;letter-spacing:.12em}.result-title p{margin-top:4px}.coupon-card{margin:20px auto 12px;padding:28px 18px;border-radius:24px;background:linear-gradient(145deg,#0a2a59,#08162e 60%);border:2px solid #3ebeff;box-shadow:0 0 28px #1d9cff66,inset 0 0 30px #27a6ff22}.coupon-card small{color:#83dbff}.coupon-card strong{display:block;font-size:clamp(34px,11vw,58px);color:#ffd55f;margin:10px 0;text-shadow:0 3px 0 #7b4c00}.coupon-card p{margin:0}.code-panel{padding:16px;border-radius:18px;background:#06111f;border:1px solid #316b9b}.code-panel small{display:block;color:#9db5d0}.code-panel code{display:block;font-size:24px;font-weight:900;color:#fff;margin:7px 0}.code-panel p{margin:0;color:#a9bed5;font-size:13px}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(40px);opacity:0;transition:.25s;background:#081426e8;color:#fff;border:1px solid #357cb2;padding:12px 18px;border-radius:12px;z-index:10;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}dialog{max-width:520px;border:1px solid #2d77ad;border-radius:18px;background:#071321;color:#fff;padding:26px;box-shadow:0 30px 80px #000c}dialog::backdrop{background:#000b}.x{float:right;border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}@media(max-width:480px){.app-shell{padding-left:12px;padding-right:12px}.arena{height:340px}.launch-arena{height:350px}.battle-arena{height:400px}.top{width:108px;height:108px}.launch-arena .top-blue{width:150px;height:150px}.feature-grid{gap:5px}.feature-grid article{padding:10px 5px}.feature-grid strong{font-size:11px}.feature-grid small{font-size:9px}.btn{min-height:54px;font-size:18px}}