:root{--bg:#070812;--panel:rgba(17,20,38,.92);--line:rgba(160,180,255,.16);--text:#f4f4ff;--muted:#959ab3;--violet:#7c52ff;--cyan:#39d7ff;--gold:#ffc85a;--red:#ff4d70;--green:#58e09b}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;background:#05060c;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}body{overflow-x:hidden;background:radial-gradient(circle at 50% 0,#272054 0,transparent 38%),#05060c}button{font:inherit;color:inherit;border:0;cursor:pointer}.screen{min-height:100dvh;max-width:520px;margin:auto;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(4,5,12,.08),#070812 72%)}.screen:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(#fff 0.6px,transparent .8px);background-size:29px 29px}.topbar{position:relative;z-index:5;padding:calc(12px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:950;letter-spacing:.08em;font-size:19px}.brand i{font-style:normal;color:var(--cyan)}.currency{display:flex;gap:6px}.pill{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(8,10,20,.82);font-size:12px;font-weight:800}.hero-stage{height:42dvh;min-height:300px;position:relative;background:url('/assets/source/art-000.png') center 24%/cover no-repeat;mask-image:linear-gradient(#000 68%,transparent)}.hero-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,218,255,.15),transparent 45%,rgba(255,40,90,.13))}.profile{margin:-78px 14px 0;position:relative;z-index:2;padding:15px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,rgba(26,27,52,.94),rgba(10,12,25,.96));box-shadow:0 18px 50px #0008}.row{display:flex;align-items:center;gap:12px}.grow{flex:1}.avatar{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#42d8ff,#7b4dff);display:grid;place-items:center;font-weight:950;box-shadow:0 0 28px #694cff66}.rank{font-size:11px;color:var(--cyan);font-weight:850;letter-spacing:.08em}.xp{height:6px;margin-top:8px;border-radius:8px;background:#272a3e;overflow:hidden}.xp i{display:block;width:68%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet))}.season{margin:12px 14px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:url('/assets/source/art-003.png') center/cover;position:relative;overflow:hidden}.season:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080914e8,#08091450)}.season>*{position:relative}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--gold);font-weight:900}.season h2{font-size:18px;margin:4px 0}.season p{font-size:11px;color:#d2d4e5;margin:0}.play{margin:0 14px 12px;width:calc(100% - 28px);padding:17px;border-radius:18px;background:linear-gradient(100deg,#6f49ff,#25c9ff);font-weight:950;letter-spacing:.06em;box-shadow:0 12px 35px #664cff55;position:relative}.play small{display:block;font-size:10px;opacity:.78;margin-top:3px}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 14px 94px}.tile{min-height:74px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,#191c31,#0d0f1d);padding:10px 6px;text-align:center}.tile b{font-size:22px;display:block;margin-bottom:5px}.tile span{font-size:10px;color:#c4c7d8}.nav{position:fixed;z-index:20;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);padding:8px 8px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);background:rgba(8,9,18,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line)}.nav button{background:none;padding:6px 2px;color:#777d98;font-size:9px}.nav b{display:block;font-size:19px;margin-bottom:2px}.nav .active{color:var(--cyan)}.page{padding:0 14px 100px}.page h1{font-size:27px;margin:12px 0 4px}.subtitle{color:var(--muted);font-size:12px;margin-bottom:18px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.card,.arena-card,.product{border:1px solid var(--line);border-radius:18px;background:#121527;overflow:hidden}.card-art{height:155px;background-image:url('/assets/source/art-005.png');background-size:300% 200%;position:relative}.card:nth-child(3n+2) .card-art{background-image:url('/assets/source/art-006.png')}.card:nth-child(3n) .card-art{background-image:url('/assets/source/art-009.png')}.card-body{padding:10px}.card-body b{font-size:13px}.tag{font-size:9px;color:var(--cyan);text-transform:uppercase}.arena-card{height:190px;padding:14px;display:flex;flex-direction:column;justify-content:end;background-size:cover;background-position:center}.arena-card b{font-size:16px;text-shadow:0 2px 10px #000}.arena-card small{color:#ddd}.product{padding:16px;margin-bottom:10px}.product .price{color:var(--gold);font-weight:950}.premium{background:linear-gradient(145deg,#32235d,#13162c);box-shadow:inset 0 0 50px #8b58ff22}.cta{padding:11px 14px;border-radius:12px;background:linear-gradient(100deg,#7d4dff,#36cfff);font-weight:850}.back{background:#16192b;border:1px solid var(--line);border-radius:12px;padding:8px 11px}.match{display:grid;place-items:center;text-align:center;background:radial-gradient(circle,#302268 0,transparent 52%),#070812}.portal{width:210px;height:210px;border:4px solid #77dfff;border-radius:50%;box-shadow:0 0 30px #47d9ff, inset 0 0 50px #7a50ff;animation:spin 3s linear infinite;position:relative}.portal:after{content:"";position:absolute;inset:18px;border:2px dashed #bd8cff;border-radius:50%}.match h1{margin:34px 0 5px}.dots{color:var(--cyan);letter-spacing:7px;animation:pulse 1s infinite}.battle{max-width:none;background:#080912;overflow:hidden}.arena-bg{position:absolute;inset:0;background:url('/assets/source/art-003.png') center/cover;filter:saturate(1.25)}.arena-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#05061088,#05061015 35%,#050610 93%)}.battle-ui{position:relative;z-index:2;height:100dvh;padding:calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column}.fighters{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}.fighter{text-shadow:0 2px 8px #000;font-size:11px;font-weight:800}.fighter.right{text-align:right}.hp{height:11px;border:1px solid #ffffff40;background:#111;border-radius:10px;margin-top:5px;overflow:hidden}.hp i{height:100%;display:block;background:linear-gradient(90deg,#3de796,#a7ff77);transition:width .25s}.right .hp i{margin-left:auto;background:linear-gradient(90deg,#ff866e,#ff375f)}.timer{font-size:26px;font-weight:950}.field{position:relative;flex:1;overflow:hidden}.orb{position:absolute;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px;box-shadow:0 0 22px currentColor;border:2px solid #ffffff99;animation:fall linear forwards;user-select:none}.orb.ether{background:#29b9e8;color:#84eeff}.orb.flame{background:#e53d38;color:#ffaf54}.orb.void{background:#7135be;color:#c58aff}.orb.seal{background:#e5b444;color:#fff4a0}.combo{text-align:center;font-weight:950;color:var(--gold);height:24px}.hand{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.skill{position:relative;height:92px;border:1px solid #ffffff33;border-radius:14px;background:linear-gradient(160deg,#293050,#101322);overflow:hidden;padding:8px 4px;text-align:center}.skill:nth-child(2){background:linear-gradient(160deg,#592b28,#1b1118)}.skill:nth-child(3){background:linear-gradient(160deg,#4d2b69,#17101e)}.skill:nth-child(4){background:linear-gradient(160deg,#615125,#1c1910)}.skill b{font-size:10px;display:block;margin-top:30px}.cost{position:absolute;top:5px;left:6px;background:#35aaff;border-radius:20px;padding:2px 6px;font-size:11px;font-weight:950}.mana{margin:8px 0;height:8px;border-radius:8px;background:#24273a;overflow:hidden}.mana i{display:block;height:100%;background:linear-gradient(90deg,#426bff,#35dcff);transition:width .2s}.result{position:fixed;z-index:50;inset:0;background:#05060cdc;display:grid;place-items:center;padding:22px}.result-box{width:min(380px,100%);border:1px solid #8ddfff66;border-radius:26px;padding:28px;background:linear-gradient(150deg,#20264a,#0d1020);text-align:center;box-shadow:0 0 70px #5e56ff55}.result-box h1{font-size:38px;color:var(--gold);margin:8px}.reward{display:flex;justify-content:center;gap:12px;margin:22px 0}.reward span{padding:10px 13px;border-radius:12px;background:#ffffff0c}.hidden{display:none!important}#toast{position:fixed;z-index:100;left:50%;bottom:100px;transform:translate(-50%,30px);opacity:0;transition:.25s;background:#e9ecff;color:#111528;border-radius:12px;padding:10px 15px;font-weight:800;font-size:12px;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}@keyframes fall{to{transform:translateY(75dvh) rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.3}}@media(min-width:700px) and (orientation:landscape){.battle-ui{max-width:1000px;margin:auto}.field{min-height:260px}.hand{max-width:560px;margin:auto;width:100%}.mana{max-width:560px;margin:8px auto;width:100%}}