:root{color-scheme:dark;--cream:#f3ead5;--mint:#9ce6ca;--gold:#e9c47e;--muted:#a1b8b7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 10%,#253b3d,#101921 70%);color:var(--cream);font-family:system-ui,-apple-system,'PingFang TC',sans-serif}main{max-width:1520px;margin:auto;padding:0 40px}header{height:80px;border-bottom:1px solid #ffffff17;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none;font-size:24px;font-weight:800}.brand>span{background:var(--gold);color:#182c2e;border-radius:10px;padding:3px 9px}.brand small,.edition{font-size:9px;letter-spacing:2px;color:#93aaa7}.brand small{margin-left:10px}.page-heading{display:flex;align-items:center;justify-content:space-between;padding:24px 0}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--gold);font-weight:800}h1{font-size:30px;margin:7px 0 0}h1 span{font-size:12px;font-weight:400;color:var(--muted);margin-left:15px}.mode-pill{border:1px solid #ffffff25;border-radius:30px;font-size:11px;padding:10px 15px}.mode-pill i{color:var(--gold);margin:0 10px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #ffffff25;background:#1c3035;border-radius:10px;padding:10px 14px;touch-action:none;user-select:none}button:disabled{cursor:wait;opacity:.55}button:hover{filter:brightness(1.13)}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}.arena{position:relative;border:1px solid #71898666;border-radius:20px;overflow:hidden;isolation:isolate;background:#263b34;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}canvas{width:100%;aspect-ratio:16/9;display:block;touch-action:none}.arena:fullscreen{border:0;border-radius:0;width:100vw;height:100dvh}.arena:fullscreen canvas{width:100%;height:100%;aspect-ratio:auto}.scoreboard{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:2;display:flex;pointer-events:none}.team{display:flex;align-items:center;gap:11px;padding:8px 18px;background:#10272ceb;min-width:120px}.team b{font-size:27px}.team small{font-size:10px}.blue{color:#93e8cc;border-radius:12px 0 0 12px}.red{color:#ffa2ac;border-radius:0 12px 12px 0}.clock{display:flex;flex-direction:column;justify-content:center;text-align:center;background:#111f27f2;padding:7px 20px}.clock b{font-size:20px;font-variant-numeric:tabular-nums}.clock small{font-size:8px;color:#becec5;margin-top:2px}.top-actions{position:absolute;right:16px;top:18px;display:flex;gap:6px;z-index:6}.top-actions a,.top-actions button{width:36px;height:39px;display:grid;place-items:center;padding:0;background:#112329cf;color:inherit;border:1px solid #a6beb633;border-radius:9px;text-decoration:none;font-size:19px}.status{position:absolute;top:83px;left:50%;transform:translateX(-50%);font-size:11px;white-space:nowrap;border:1px solid #d1dec117;border-radius:20px;background:#10252ad9;padding:6px 14px;pointer-events:none;color:#e0e9d4}.feed{position:absolute;top:150px;right:20px;max-width:210px;font-size:10px;line-height:1.7;color:#d6c4a8;pointer-events:none}.player-hud{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);padding:7px 13px 7px 4px;border:1px solid #a7cdb433;border-radius:12px;background:#12262ce8;display:flex;align-items:center;gap:7px;pointer-events:none}.player-hud img{width:52px;height:52px;object-fit:contain}.vitals{width:160px}.vitals>div:first-child{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:6px}.vitals #level{font-size:9px;color:var(--gold)}.hp-track{height:14px;background:#0d1c26;position:relative;border-radius:4px;overflow:hidden}.hp-track i{display:block;height:100%;background:linear-gradient(90deg,#429983,#8dddd0);transition:width .1s linear}.hp-track span{position:absolute;inset:0;font-size:8px;display:grid;place-items:center;color:#f1fff1;text-shadow:0 1px 2px #000}.xp-track{height:3px;background:#ffffff12;margin-top:4px}.xp-track i{display:block;height:100%;background:#e5c17b;width:0}#kda{font-size:9px;color:#acbfbd;margin-left:9px;white-space:nowrap}.utility{position:absolute;bottom:26px;left:24px;display:flex;align-items:center;gap:8px;z-index:3}.utility button{background:#173135e6;font-size:10px}.utility button>span{font-size:18px;color:var(--gold);margin-right:6px}.utility button small{font-size:8px;display:block;color:#c4d3c7;margin-top:2px}.utility b{font-size:13px}.abilities{position:absolute;right:23px;bottom:25px;display:flex;align-items:flex-end;gap:10px;z-index:3}.ability{position:relative;width:72px;height:72px;border-radius:23px;border:2px solid #7596a5;padding:5px;background:conic-gradient(#85cdd1 var(--progress,0%),#273844 0);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px}.ability.ready{background:#24585c;border-color:#a5e3d5}.ability.ultimate{border-radius:50%;border-color:#ad8cd0;background:conic-gradient(#bba1eb var(--progress,0%),#32334c 0);width:83px;height:83px}.ability.ultimate.ready{background:#66517d;border-color:#e1c4ff}.ability>span{font-size:22px;line-height:24px}.ability b{font-size:10px;font-variant-numeric:tabular-nums}.ability small{font-size:8px;white-space:nowrap}.ability em{position:absolute;top:-5px;right:-4px;font-size:9px;font-style:normal;background:#122129;border:1px solid #68847c;border-radius:5px;padding:2px 4px}.lobby{position:absolute;inset:0;z-index:5;display:flex;align-items:center;padding:65px 7% 30px;gap:30px;background:linear-gradient(100deg,#101f28fb,#142830e8 50%,#132b3177)}.lobby-copy{width:55%}.lobby h2{font-size:clamp(29px,3.3vw,48px);line-height:1.3;margin:15px 0}.lobby-copy>p:not(.eyebrow){font-size:12px;line-height:1.9;color:#b6c9c6}.rules{display:flex;gap:8px;margin:16px 0}.rules span{font-size:9px;color:#d9d5bc;padding:5px 8px;border:1px solid #a9bea632;border-radius:6px}.primary{display:block;background:var(--gold);color:#23322d;font-weight:800;text-align:left;min-width:210px;padding:16px 22px;border:0;box-shadow:0 4px 0 #937245;margin-top:20px}.primary span{float:right}.text-button{border:0;background:transparent!important;padding:8px 0;font-size:10px;color:#c9b493;text-decoration:underline}.control-tip{font-size:9px!important}.hero-select{width:45%;text-align:center}.hero-display{height:155px;position:relative;display:flex;align-items:center;justify-content:center}.hero-display img{height:165px;width:165px;object-fit:contain;position:relative;filter:drop-shadow(0 13px 20px #0005)}.hero-ring{position:absolute;width:172px;height:172px;border:1px solid #aed4a833;border-radius:50%;box-shadow:0 0 55px #b4d9a61a,inset 0 0 40px #92cbb50e}.hero-role{font-size:9px;letter-spacing:2px;color:#b4d9ba}.hero-select h3{font-size:24px;margin:5px 0}.hero-select>p{font-size:10px;color:#a4bfba;margin:4px 0 9px}.hero-skills{display:flex;justify-content:center;gap:6px;margin:10px 0 14px;flex-wrap:wrap}.hero-skills span{font-size:8px;padding:4px 6px;border-radius:5px;border:1px solid #9bd6c92b;color:#c9dfd1}.hero-skills i{font-style:normal;color:var(--gold);margin-right:3px}.hero-cards{display:grid;grid-template-columns:repeat(3,82px);gap:7px;justify-content:center}.hero-card{width:82px;padding:4px 5px 7px;background:#14282fbd;border:1px solid #b8cab62b}.hero-card img{width:45px;height:45px;object-fit:contain;display:block;margin:auto}.hero-card span{font-size:8px}.hero-card.selected{border:2px solid #dfc688;background:#384a3c;box-shadow:0 0 18px #d3b57d18}.touch-controls{display:none}.modal{position:absolute;inset:0;z-index:8;background:#101f28f2;display:grid;place-items:center;padding:30px;overflow:auto}.modal>div{max-width:610px}.modal h2{font-size:29px}.modal p,.modal li{font-size:12px;line-height:1.9;color:#b8d0c8}.modal ol{padding-left:20px}.modal .muted{font-size:10px;color:#83a5a1}.shop-panel{position:absolute;inset:75px 8% 90px;z-index:7;border:1px solid #bdc4a755;border-radius:17px;padding:22px;background:#12262bf7;overflow:auto}.shop-heading{display:flex;align-items:center;justify-content:space-between}.shop-heading .eyebrow{margin:0;font-size:8px}.shop-heading h2{font-size:22px;margin:8px 0}.shop-heading h2 span{font-size:13px;color:var(--gold);margin-left:12px}.shop-heading>button{font-size:23px;padding:3px 12px}.shop-tip{font-size:10px;color:#a2bdb6;margin:3px 0 14px}.shop-items{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.item{border:1px solid #97baa32e;border-radius:10px;padding:13px;background:#1c3437;text-align:left}.item h3{font-size:13px;margin:0 0 6px}.item p{font-size:10px;line-height:1.7;color:#b1c8be;margin:4px 0 10px;min-height:30px}.item span{font-size:12px;color:var(--gold)}.item.owned{border-color:#87c8a477;opacity:.65}.item:disabled{cursor:default}.respawn{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:4;padding:22px 28px;border-radius:13px;background:#14232cf2;border:1px solid #dda8bd66;font-size:20px;text-align:center}.toast{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);z-index:10;background:#17332eee;border:1px solid #b5dbb477;border-radius:10px;padding:12px 22px;font-size:12px;pointer-events:none}.rotate-overlay{display:none}footer{display:flex;justify-content:space-between;padding:21px 0;color:#759490;font-size:9px;letter-spacing:1px}.arena:has(.lobby:not([hidden])) .player-hud,.arena:has(.lobby:not([hidden])) .utility,.arena:has(.lobby:not([hidden])) .abilities,.arena:has(.lobby:not([hidden])) .touch-controls,.arena:has(.lobby:not([hidden])) .status{visibility:hidden}
@media(max-width:950px),(pointer:coarse){html,body{height:100%;overflow:hidden;overscroll-behavior:none}main{padding:0;max-width:none;width:100%;height:100%}header,.page-heading,footer{display:none}.arena{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;border:0;border-radius:0}canvas{height:100%;width:100%;aspect-ratio:auto}.scoreboard{top:max(9px,env(safe-area-inset-top))}.team{min-width:87px;padding:6px 11px;gap:8px}.team b{font-size:22px}.team small{font-size:9px}.clock{padding:5px 13px}.clock b{font-size:16px}.clock small{font-size:7px}.top-actions{top:max(9px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));gap:5px}.top-actions a,.top-actions button{width:33px;height:35px;font-size:17px}.status{top:61px;padding:5px 10px;font-size:9px}.feed{top:63px;right:18px;max-width:145px;font-size:8px}.player-hud{bottom:max(12px,env(safe-area-inset-bottom));padding:5px 8px 5px 2px;gap:4px}.player-hud img{width:36px;height:36px}.vitals{width:108px}.vitals>div:first-child{font-size:9px;margin-bottom:4px}.vitals #level{font-size:8px}.hp-track{height:11px}.hp-track span{font-size:7px}#kda{display:none}.utility{left:max(22px,env(safe-area-inset-left));bottom:140px;gap:6px;align-items:flex-end}.utility button{font-size:8px;padding:6px 10px}.utility button>span{font-size:14px;margin-right:4px}.utility b{font-size:11px}.utility button small{font-size:7px}#auto-aim{position:absolute;left:0;bottom:53px;font-size:8px;padding:5px 8px}.abilities{position:absolute;inset:0;pointer-events:none}.ability{pointer-events:auto;position:absolute;width:59px;height:59px;border-radius:19px;padding:4px}.ability>span{font-size:18px;line-height:19px}.ability b{font-size:9px}.ability small{font-size:7px}.ability em{display:none}#ability0{right:max(157px,calc(env(safe-area-inset-right) + 145px));bottom:52px}#ability1{right:max(107px,calc(env(safe-area-inset-right) + 95px));bottom:128px}#ability2{right:max(27px,env(safe-area-inset-right));bottom:144px;width:65px;height:65px}.touch-controls{display:flex;position:absolute;left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));justify-content:space-between;z-index:3;pointer-events:none}.stick{position:relative;width:112px;height:112px;border:1px solid #9fe4d269;background:#20494055;border-radius:50%;pointer-events:auto;touch-action:none}.stick.aim{border-color:#dfadba77;background:#693d5655}.stick i{pointer-events:none;position:absolute;left:50%;top:50%;margin:-24px;width:48px;height:48px;border:1px solid #e1fff48c;border-radius:50%;background:linear-gradient(145deg,#b7ddd0,#4f9c91);box-shadow:0 4px 10px #0003}.stick.aim i{background:linear-gradient(145deg,#edb5c9,#a35f89)}.stick small{pointer-events:none;position:absolute;width:100%;text-align:center;bottom:7px;font-size:8px}.stick>span{pointer-events:none;display:grid;place-items:center;font-size:75px;color:#e6bbc326;height:100%}.stick.held{border-color:#d9ffed;box-shadow:0 0 24px #8bdab83d}.stick.aim.held{border-color:#ffd9e7;box-shadow:0 0 24px #dc8dc34a}.lobby{padding:54px max(30px,env(safe-area-inset-right)) 12px max(30px,env(safe-area-inset-left));gap:18px}.lobby-copy{width:56%}.lobby-copy>.eyebrow{display:none}.lobby h2{font-size:28px;margin:9px 0}.lobby-copy>p:not(.eyebrow){font-size:10px;line-height:1.7}.rules{margin:10px 0;gap:5px}.rules span{font-size:8px;padding:4px 6px}.primary{min-width:190px;padding:12px 18px;margin-top:12px}.text-button{font-size:9px;padding:7px 0}.control-tip{font-size:8px!important}.hero-select{width:44%}.hero-display{height:67px}.hero-display img{width:90px;height:80px}.hero-ring{width:82px;height:82px}.hero-role{font-size:8px}.hero-select h3{font-size:17px;margin:3px 0}.hero-select>p{display:none}.hero-skills{gap:3px;margin:5px 0 7px}.hero-skills span{font-size:7px;padding:2px 4px}.hero-cards{grid-template-columns:repeat(3,65px);gap:4px}.hero-card{width:65px;padding:3px 4px 4px}.hero-card img{width:32px;height:32px}.hero-card span{font-size:8px}.modal{padding:18px}.modal h2{font-size:23px;margin:8px 0}.modal p,.modal li{font-size:10px;line-height:1.7}.modal .primary{padding:10px 16px}.shop-panel{inset:52px max(20px,env(safe-area-inset-right)) 18px max(20px,env(safe-area-inset-left));padding:12px 17px}.shop-heading h2{font-size:18px;margin:4px 0}.shop-heading .eyebrow{font-size:7px}.shop-tip{font-size:8px;margin:4px 0 8px}.shop-items{gap:6px}.item{padding:8px 10px}.item h3{font-size:10px;margin-bottom:3px}.item p{font-size:8px;line-height:1.4;margin:4px 0;min-height:23px}.item span{font-size:10px}.respawn{font-size:17px;padding:18px}.arena:has(.modal:not([hidden])) .touch-controls{visibility:hidden}}
@media(max-height:360px) and (orientation:landscape){.lobby h2{font-size:24px}.hero-display{height:45px}.hero-display img{height:56px}.hero-ring{width:60px;height:60px}.control-tip{display:none}.rules{margin:7px 0}.hero-card img{width:28px;height:28px}.utility{bottom:128px}.stick{width:100px;height:100px}#ability2{bottom:127px}#ability1{bottom:117px}#ability0{bottom:41px}}
@media(max-width:950px) and (orientation:portrait),(pointer:coarse) and (orientation:portrait){.rotate-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;background:radial-gradient(circle,#2c4943,#10212a 75%)}.rotate-overlay>div{font-size:63px;color:#e1c78a;margin-bottom:30px}.rotate-overlay h2{font-size:24px}.rotate-overlay p{font-size:12px;line-height:1.8;color:#c0d7c8}.arena>*:not(canvas):not(.rotate-overlay){visibility:hidden}}

.hero-name-row{display:flex;align-items:center;justify-content:center;gap:8px}.kit-open{font-size:8px;background:transparent;border:0;border-bottom:1px solid #d4be7e77;border-radius:0;padding:3px 0;color:var(--gold)}.kit-details{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.kit-details>div{border-top:1px solid #bedaca25;padding-top:6px}.kit-details b{font-size:12px;color:#e6d199}.kit-details p{margin:3px 0;font-size:11px;line-height:1.6}.kit-details>div:first-child{grid-column:1/-1}@media(max-width:950px),(pointer:coarse){.kit-details{gap:5px 14px}.kit-details b{font-size:10px}.kit-details p{font-size:9px}.kit-open{font-size:7px}.hero-name-row{gap:6px}#kit-panel>div{max-width:680px;width:100%}#kit-panel h2{font-size:19px}}