:root{--bg: #04131a;--panel: rgba(6, 24, 32, .82);--panel-solid: #0a2530;--line: rgba(120, 236, 228, .22);--line-strong: rgba(120, 236, 228, .5);--text: #e7fbf8;--muted: #9dbdbb;--ally: #35e3d0;--ally-deep: #0e5560;--enemy: #ff6a3a;--gold: #ffd76a;--hp: #5ff08a;--mana: #53a8ff;--danger: #ff4f43;--radius: 12px;--shadow: 0 10px 30px rgba(0, 0, 0, .45);--font: "Leelawadee UI", "Noto Sans Thai", "Sarabun", "Thonburi", Tahoma, system-ui, sans-serif;--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}#app{position:fixed;inset:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.hidden{display:none!important}svg{width:100%;height:100%;display:block}.stage,.game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.game-canvas{cursor:crosshair;touch-action:none;transition:filter .6s}#app.dead .game-canvas{filter:grayscale(.75) brightness(.8)}.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}.dmg{position:absolute;left:0;top:0;font-weight:800;font-size:17px;letter-spacing:.02em;text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.8);white-space:nowrap;will-change:transform,opacity}.dmg.dealt{color:#fff3c4}.dmg.taken{color:#ff7a6b;font-size:15px}.vignette{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .3s;box-shadow:inset 0 0 120px 30px #ff281e8c}#app.low-hp .vignette{opacity:1;animation:pulse-v 1.2s ease-in-out infinite}#app.reduced .vignette{animation:none}@keyframes pulse-v{50%{opacity:.55}}.fps{position:absolute;left:50%;bottom:6px;transform:translate(-50%);z-index:40;font:12px/1 monospace;background:#0009;padding:3px 6px;border-radius:4px;pointer-events:none}.hud{position:absolute;inset:0;z-index:10;pointer-events:none}.hud button,.hud .minimap{pointer-events:auto}.hud-tl{position:absolute;left:calc(14px + var(--safe-l));top:14px;display:flex;flex-direction:column;gap:8px}.minimap{width:196px;height:196px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow);background:#000}.minimap canvas{width:100%;height:100%;display:block}.objectives{display:flex;flex-direction:column;gap:4px;font-size:13px}.obj{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 9px;display:flex;gap:6px;align-items:center;width:max-content;max-width:196px}.obj b{color:var(--gold);font-variant-numeric:tabular-nums}.obj .dot{width:8px;height:8px;border-radius:50%;background:#6d6480}.obj .dot.live{background:var(--gold);box-shadow:0 0 8px var(--gold)}.obj.buff{flex-direction:column;align-items:flex-start}.obj.buff .ally{color:var(--ally)}.obj.buff .enemy{color:var(--enemy)}.hud-top{position:absolute;left:50%;top:12px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.scorebar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);min-width:300px}.scorebar .side{display:flex;align-items:center;gap:10px;padding:6px 16px;font-size:13px;color:var(--muted)}.scorebar .ally{justify-content:flex-end}.scorebar .ally b{color:var(--ally)}.scorebar .enemy b{color:var(--enemy)}.scorebar .side b{font-size:24px;line-height:1;font-variant-numeric:tabular-nums}.clock{display:flex;flex-direction:column;align-items:center;padding:4px 14px;border-inline:1px solid var(--line)}.clock b{font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:.04em}.clock small{font-size:11px;color:var(--muted)}.structs{display:flex;gap:14px}.st{display:flex;gap:3px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 7px}.st i{width:9px;height:13px;border-radius:2px;background:linear-gradient(to top,currentColor calc(var(--hp) * 100%),rgba(255,255,255,.12) 0)}.st0{color:var(--ally)}.st1{color:var(--enemy);flex-direction:row-reverse}.st i.down{background:#2c3434;outline:1px solid #4a5454}.st .core-pip{width:15px;height:15px;margin-inline:3px;transform:rotate(45deg);border-radius:3px;background:linear-gradient(to top,currentColor calc(var(--hp) * 100%),rgba(255,255,255,.15) 0)}.alert{font-size:20px;font-weight:700;padding:6px 18px;border-radius:999px;background:#280808cc;border:1px solid rgba(255,90,70,.5);display:none}.alert.on{display:block}.hud-tr{position:absolute;right:calc(14px + var(--safe-r));top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:340px}.hud-buttons{display:flex;gap:6px}.icon-btn{width:40px;height:40px;padding:9px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--text)}.icon-btn:hover{border-color:var(--line-strong);background:var(--panel-solid)}.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;align-items:flex-end}.feed li{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:13.5px;text-align:right;animation:feed-in .25s ease-out}.feed li:first-child{border-color:var(--line-strong)}#app.reduced .feed li{animation:none}@keyframes feed-in{0%{opacity:0;transform:translate(12px)}}.hud-bl{position:absolute;left:calc(14px + var(--safe-l));bottom:calc(14px + var(--safe-b));display:flex;gap:10px;align-items:flex-end;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:var(--shadow);width:380px}.portrait{position:relative;width:64px;height:64px;flex:none}.portrait .crest{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2fd3c3,var(--ally-deep));padding:13px;color:#eafffb}.portrait .lvl{position:absolute;right:-4px;bottom:-4px;min-width:24px;height:24px;border-radius:12px;background:#071319;border:2px solid var(--gold);color:var(--gold);font-size:13px;display:grid;place-items:center}.xp-ring{position:absolute;inset:0;transform:rotate(-90deg)}.xp-ring circle{fill:none;stroke:#ffffff1a;stroke-width:3.5}.xp-ring .xp-fill{stroke:var(--gold);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .3s}.vitals{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.name-row{display:flex;gap:8px;align-items:baseline;font-size:15px}.name-row .title{font-size:12px;color:var(--muted);flex:1}.passive{display:flex;gap:3px}.passive i{width:10px;height:10px;transform:rotate(45deg);border:1.5px solid var(--ally);border-radius:2px}.passive i.on{background:var(--ally);box-shadow:0 0 6px var(--ally)}.passive i.next.on{background:#fff;border-color:#fff}.bar{position:relative;height:16px;border-radius:5px;background:#0000008c;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.bar.mp{height:11px}.bar .fill{position:absolute;inset:0;transform-origin:left;transition:transform .12s linear}.hp .fill{background:linear-gradient(#7dff9a,#2eb85c)}.mp .fill{background:linear-gradient(#7cc1ff,#2c6ed8)}.hp .shield{position:absolute;top:0;bottom:0;background:#f0faffe6}.bar .txt{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:700;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}.mp .txt{font-size:9px}.stat-row{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted)}.gold{display:flex;gap:4px;align-items:center;color:var(--gold);font-size:15px}.gold svg{width:16px;height:16px}.items{display:flex;gap:5px}.items i{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:#00000059;padding:6px;color:var(--gold)}.hud-br{position:absolute;right:calc(14px + var(--safe-r));bottom:calc(14px + var(--safe-b));display:flex;flex-direction:column;align-items:flex-end;gap:10px}.quickbuy{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:12px;background:var(--panel);border:1px solid var(--line);text-align:left}.quickbuy .qb-icon{width:36px;height:36px;padding:7px;border-radius:8px;background:#ffd76a1f;color:var(--gold)}.quickbuy .qb-text{display:flex;flex-direction:column}.quickbuy small{font-size:11px;color:var(--muted)}.quickbuy b{font-size:14px}.quickbuy .qb-cost{color:var(--gold);font-weight:700;margin-left:6px}.quickbuy.afford{border-color:#ffd76ab3;box-shadow:0 0 14px #ffd76a40}.quickbuy:disabled{opacity:.6;cursor:not-allowed}.abilities{display:flex;gap:10px;align-items:flex-end}.ab{position:relative;width:70px;height:70px;border-radius:16px;padding:0;background:radial-gradient(circle at 50% 30%,#13434c,#081c23);border:2px solid var(--line-strong);overflow:hidden;box-shadow:var(--shadow);touch-action:none}.ab-recall{width:50px;height:50px;border-radius:14px}.ab .ab-icon{position:absolute;inset:14px;color:#cffff8}.ab-recall .ab-icon{inset:11px}.ab.ready{border-color:var(--ally);box-shadow:0 0 16px #35e3d059,var(--shadow)}.ab .ab-cd{position:absolute;inset:0;background:conic-gradient(rgba(2,10,14,.78) calc(var(--cd, 0) * 360deg),transparent 0);pointer-events:none}.ab .ab-num{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:800;text-shadow:0 2px 3px #000}.ab .ab-key{position:absolute;left:5px;top:3px;font-size:12px;font-weight:800;color:var(--gold);text-shadow:0 1px 2px #000}.ab .ab-cost{position:absolute;right:5px;bottom:3px;font-size:11px;font-weight:700;color:#9fd0ff;text-shadow:0 1px 2px #000}.ab.nomana .ab-cost{color:var(--danger)}.ab.nomana .ab-icon{opacity:.45;filter:saturate(0)}.ab .ab-lock{position:absolute;inset:0;display:none;place-items:center;align-content:center;background:#030a0ec7;color:var(--muted)}.ab .ab-lock svg{width:22px;height:22px}.ab .ab-lock small{font-size:11px}.ab.locked .ab-lock{display:grid}.ab-recall.cooling{border-color:var(--ally);animation:glow 1s ease-in-out infinite}.ab.deny{animation:deny .3s}@keyframes deny{25%{transform:translate(-4px);border-color:var(--danger)}75%{transform:translate(4px);border-color:var(--danger)}}@keyframes glow{50%{box-shadow:0 0 22px var(--ally)}}#app.reduced .ab.deny,#app.reduced .ab-recall.cooling{animation:none}.recall-bar{position:absolute;left:50%;bottom:26%;transform:translate(-50%);width:220px;display:none;flex-direction:column;align-items:center;gap:4px;font-size:13px;text-shadow:0 1px 3px #000}.recall-bar.on{display:flex}.recall-bar i{display:block;width:100%;height:8px;border-radius:4px;background:var(--ally);transform-origin:left;box-shadow:0 0 10px var(--ally);outline:1px solid rgba(0,0,0,.6)}.screen{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:20px;overflow-y:auto;touch-action:pan-y}.screen.start{background:radial-gradient(ellipse at 50% 40%,#04131a59,#020a0ee0);justify-items:start;padding-left:max(20px,7vw)}.screen.pause,.screen.end,.screen.settings{background:#020a0eb8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.start-card{max-width:560px;display:flex;flex-direction:column;gap:16px}.eyebrow{margin:0;color:var(--ally);letter-spacing:.12em;font-size:13px;text-transform:uppercase}.start-card h1{margin:0;font-size:clamp(46px,8vw,84px);line-height:1.05;background:linear-gradient(120deg,#eafffb 20%,#7ef3e6 55%,#ffd76a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(53,227,208,.25))}.start-card h1 span{display:block;font-size:.42em;letter-spacing:.08em;color:var(--gold);-webkit-text-fill-color:var(--gold)}.tagline{margin:0;color:#c6e2df;line-height:1.7;font-size:16px}.tagline b{color:var(--text)}.difficulty{display:grid;grid-template-columns:1fr 1fr;gap:10px}.difficulty button{text-align:left;padding:12px 14px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:2px}.difficulty button small{color:var(--muted);font-size:12.5px}.difficulty button[aria-checked=true]{border-color:var(--ally);box-shadow:inset 0 0 0 1px var(--ally),0 0 18px #35e3d033}.start-actions{display:flex;gap:10px}.primary,.ghost{padding:12px 22px;border-radius:var(--radius);font-size:17px;font-weight:700;border:1px solid transparent}.primary{background:linear-gradient(135deg,#3ff0dc,#19a9a0);color:#03242a;box-shadow:0 6px 24px #35e3d059}.primary:hover{filter:brightness(1.08)}.btn-play{min-width:180px;font-size:20px}.ghost{background:var(--panel);border-color:var(--line-strong);display:inline-flex;gap:8px;align-items:center;justify-content:center}.ghost svg{width:18px;height:18px}.ghost:hover{background:var(--panel-solid)}.controls{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:13.5px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}.controls div{display:flex;flex-direction:column}.controls dt{color:var(--gold);font-weight:700}.controls dd{margin:0;color:var(--muted)}.card{background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:18px;padding:24px;min-width:min(340px,100%);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}.card h2{margin:0 0 6px;text-align:center;font-size:26px}.end-card{width:min(560px,100%);text-align:center}.end-card h2{font-size:56px;color:var(--gold);margin:0}.end-card.lose h2{color:var(--enemy)}.end-card .eyebrow{text-align:center}.end-stats dl{margin:8px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.end-stats dl div{background:#00000040;border:1px solid var(--line);border-radius:10px;padding:8px 10px;text-align:left}.end-stats dt{font-size:12px;color:var(--muted)}.end-stats dd{margin:0;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}.end-actions{display:flex;gap:10px;justify-content:center}.settings-card label{display:grid;grid-template-columns:90px 1fr 48px;align-items:center;gap:10px}.settings-card label.check{grid-template-columns:auto 1fr;font-size:14px}.settings-card output{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}.settings-card input[type=range]{accent-color:var(--ally);width:100%}.settings-card input[type=checkbox]{accent-color:var(--ally);width:18px;height:18px}.seg{display:flex;gap:6px;align-items:center}.seg span{width:90px}.seg button{flex:1;padding:8px;border-radius:8px;background:var(--panel);border:1px solid var(--line)}.seg button[aria-pressed=true]{border-color:var(--ally);background:#35e3d026}.panel{position:absolute;z-index:25;left:50%;top:50%;transform:translate(-50%,-50%);background:#061820f2;border:1px solid var(--line-strong);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;max-height:calc(100% - 40px);overflow:auto;pointer-events:auto}.panel header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.panel header h2{margin:0;font-size:20px}.panel header span{flex:1;color:var(--muted);font-size:14px}.panel header .icon-btn{width:34px;height:34px;padding:0}.board{width:min(860px,calc(100% - 24px))}.board table{width:100%;border-collapse:collapse;margin-bottom:10px;font-size:14px}.board caption{text-align:left;font-weight:700;padding:6px 0}.board .team0 caption{color:var(--ally)}.board .team1 caption{color:var(--enemy)}.board th{text-align:left;font-size:12px;color:var(--muted);font-weight:400;padding:3px 6px;border-bottom:1px solid var(--line)}.board td{padding:5px 6px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}.board td small{display:block;color:var(--muted);font-size:11.5px}.board tr.me td{background:#ffd76a14}.board tr.me b{color:var(--gold)}.board tr.is-dead{opacity:.55}.board .kda{font-variant-numeric:tabular-nums;white-space:nowrap}.board-items{display:flex;gap:3px}.board-items i{width:22px;height:22px;padding:3px;border-radius:5px;background:#00000059;color:var(--gold)}.board .state{font-size:12px;color:var(--muted)}.shop{width:min(620px,calc(100% - 24px))}.shop-gold{display:flex;align-items:center;gap:5px;color:var(--gold)!important}.shop-gold svg{width:18px;height:18px}.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.shop-grid button{display:grid;grid-template-columns:40px 1fr auto;grid-template-rows:auto auto;column-gap:10px;text-align:left;padding:8px;border-radius:10px;background:#0000004d;border:1px solid var(--line)}.shop-grid .si{grid-row:span 2;width:40px;height:40px;padding:8px;border-radius:8px;background:#ffd76a1a;color:var(--gold)}.shop-grid small{grid-column:2;color:var(--muted);font-size:12px}.shop-grid .price{grid-row:1 / span 2;grid-column:3;align-self:center;color:var(--gold);font-weight:700}.shop-grid button:not(:disabled):hover{border-color:var(--gold)}.shop-grid button:disabled{opacity:.5;cursor:not-allowed}.shop-grid button.owned{opacity:.75;border-color:var(--ally)}.shop .hint{margin:8px 0 0;font-size:12px;color:var(--muted)}.touch-layer{position:absolute;inset:0;z-index:9;pointer-events:none;display:none}.touch-layer.on{display:block}body:not(.touch) .touch-layer{display:none}.stick{position:absolute;left:calc(26px + var(--safe-l));bottom:calc(40px + var(--safe-b));width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#35e3d01f,#03141a80);border:2px solid var(--line-strong);pointer-events:auto;touch-action:none}.knob{position:absolute;left:50%;top:50%;width:62px;height:62px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 35%,#7ef3e6,#1a8a86);box-shadow:0 4px 12px #00000080}.touch-buttons{position:absolute;right:calc(24px + var(--safe-r));bottom:calc(118px + var(--safe-b));pointer-events:auto}.tb-attack{width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 45% 35%,#ff9b6b,#b8401f);border:3px solid rgba(255,255,255,.35);font-size:17px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000;touch-action:none}#app:has(.hud.hidden) .touch-layer{display:none}@media(max-width:820px),(max-height:560px){.minimap{width:124px;height:124px}.hud-tl{left:calc(8px + var(--safe-l));top:8px;gap:5px}.obj{font-size:11px;padding:3px 7px;max-width:124px}.hud-top{top:8px;gap:4px}.scorebar{min-width:0}.scorebar .side{padding:4px 8px;gap:6px;font-size:11px}.scorebar .side span{display:none}.scorebar .side b{font-size:18px}.clock b{font-size:14px}.clock{padding:2px 8px}.structs{gap:6px}.st{padding:3px 4px;gap:2px}.st i{width:6px;height:10px}.st .core-pip{width:10px;height:10px}.alert{font-size:14px}.hud-tr{right:calc(8px + var(--safe-r));top:8px;max-width:46vw}.icon-btn{width:36px;height:36px;padding:8px}.feed li{font-size:11.5px;padding:3px 7px}.feed li:nth-child(n+3){display:none}.hud-bl{left:calc(8px + var(--safe-l));bottom:calc(8px + var(--safe-b));width:260px;padding:7px 9px;gap:7px;border-radius:12px}.portrait{width:46px;height:46px}.portrait .crest{inset:5px;padding:8px}.portrait .lvl{min-width:20px;height:20px;font-size:11px}.name-row{font-size:13px}.name-row .title,.stats{display:none}.bar{height:13px}.bar.mp{height:9px}.bar .txt{font-size:9.5px}.items i{width:26px;height:26px;padding:4px}.hud-br{right:calc(8px + var(--safe-r));bottom:calc(8px + var(--safe-b));gap:6px}.quickbuy{padding:4px 8px 4px 4px}.quickbuy .qb-icon{width:28px;height:28px;padding:5px}.quickbuy b{font-size:12px}.quickbuy small{display:none}.ab{width:56px;height:56px;border-radius:13px}.ab .ab-icon{inset:11px}.ab .ab-num{font-size:18px}.ab-recall{width:42px;height:42px}.abilities{gap:7px}.shop-grid{grid-template-columns:1fr}.board table{font-size:12px}.board th:nth-child(2),.board td:nth-child(2),.board th:nth-child(7),.board td:nth-child(7){display:none}.end-card h2{font-size:42px}.end-stats dd{font-size:16px}.screen.start{justify-items:center;padding-left:20px}.controls{grid-template-columns:1fr}}@media(max-width:600px){.hud-bl{bottom:auto;top:140px;left:8px;width:200px;flex-direction:column;align-items:stretch;background:#061820b3}.hud-bl .portrait,.hud-tl .objectives,.items{display:none}.scorebar .side{padding:3px 6px}.structs,.feed{display:none}body.touch .hud-br{right:calc(8px + var(--safe-r));bottom:calc(222px + var(--safe-b))}.quickbuy{position:fixed;right:calc(8px + var(--safe-r));top:56px}.bar.mp{height:11px}.mp .txt{font-size:8.5px}body.touch .abilities{flex-direction:column-reverse}body.touch .touch-buttons{bottom:calc(24px + var(--safe-b))}body.touch .stick{bottom:calc(24px + var(--safe-b));left:18px;width:136px;height:136px}.difficulty{grid-template-columns:1fr}.start-card h1{font-size:48px}}@media(max-width:600px)and (max-height:700px){.tagline{display:none}}