:root{color-scheme:dark;--ink:#0d1c1b;--paper:#f8edd9;--sage:#b9c5ad;--gold:#e8bf83;--line:#adbb9d43;--panel:#172823;--left:max(12px,env(safe-area-inset-left));--right:max(12px,env(safe-area-inset-right));--top:max(8px,env(safe-area-inset-top));--bottom:max(9px,env(safe-area-inset-bottom));font-family:"Instrument Sans","PingFang SC",system-ui,sans-serif;background:var(--ink);color:var(--paper)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0}
button,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);border-radius:6px;background:#1d342d;padding:7px 10px;font-weight:700;touch-action:manipulation}
button:hover{background:#2a4439}
button:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button[aria-pressed=true],button.selected{border-color:var(--gold);color:#ffda9b;background:#403b2d}
button:disabled{opacity:.46;cursor:default}
button.primary{background:linear-gradient(110deg,#e3b47c,#f1d39d);color:#241f1a;border-color:#f5d8a9}
h1,h2,h3,p{margin:0}
#app{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;isolation:isolate;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:#102322}
#app:fullscreen,#app.expanded{width:100%;height:100dvh}
#world,#overlay,#battle{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#overlay{pointer-events:none}
#selection{position:fixed;z-index:3;border:1px solid #e6deb2;background:#f8ebb126;pointer-events:none}
#mast{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;min-height:54px;padding:var(--top) var(--right) 7px var(--left);z-index:6;background:linear-gradient(#0a1719f2,#111c1888,transparent);pointer-events:none}
.brand,#tools{display:flex;align-items:center;gap:8px;pointer-events:auto}
.brand img{width:26px;height:26px}
.brand b{font:700 12px/1 "IBM Plex Mono",monospace;letter-spacing:.13em}
#tools button{min-width:38px;min-height:35px;display:grid;place-items:center;background:#132924e9;font-size:12px;padding:6px}
#tools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
#tools #game-seo-info{display:none}
#modal-body details{margin-top:10px}
#modal-body details summary{cursor:pointer;color:var(--gold)}
#match-score{position:absolute;left:50%;translate:-50% 0;border:1px solid var(--line);border-radius:9px;padding:6px 13px;background:#111e1dec;display:flex;align-items:center;gap:10px;font:700 14px/1.2 "IBM Plex Mono",monospace;white-space:nowrap;pointer-events:auto}
#match-score time{color:#d1c6ae;font-size:12px}
#match-score .blue{color:#98e0c0}#match-score .red{color:#e4a2c6}
#match-score:disabled{opacity:1}
#lobby{position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch;gap:clamp(14px,3vw,48px);padding:clamp(53px,10vh,100px) max(var(--right),4vw) max(var(--bottom),4vh) max(var(--left),4vw);background:radial-gradient(ellipse at 68% 38%,#31483dcb,#102623e8 45%,#0c1a1afc 77%);}
.roster,#preview{min-height:0;min-width:0;display:flex;flex-direction:column;gap:clamp(7px,1.6vh,16px)}
h1{font:600 clamp(36px,7.2vw,116px)/.96 "Instrument Serif",Georgia,"Songti SC",serif;letter-spacing:-.04em;color:#f3dec0}
.segments{display:flex;gap:5px;flex-wrap:wrap}
.segments button{padding:6px 10px;font-size:clamp(11px,1.8vw,14px)}
[data-scroll]{min-height:0;overflow:auto;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#70816e70 #132720}
#heroes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-content:start;padding:2px 4px 3px 2px}
.hero{position:relative;min-width:0;display:flex;align-items:center;gap:7px;text-align:left;min-height:50px;padding:8px 7px;background:linear-gradient(130deg,color-mix(in srgb,var(--hero) 35%,#1a2a28),#142723);border-color:#bec4a141}
.hero .emblem{display:grid;place-items:center;flex:none;width:29px;height:29px;border:1px solid var(--line);border-radius:50%;color:var(--hero-accent);font-size:17px}
.hero b{font-size:clamp(10px,1.22vw,15px);line-height:1.18;overflow-wrap:anywhere}
.hero small{display:block;color:#d0c8b6;font-size:9px;margin-top:3px}
#preview{position:relative;justify-content:flex-end}
#portrait{width:100%;min-height:65px;flex:1;display:block}
#hero-info{flex:0 1 auto;max-height:27vh;padding:0 4px 0 0}
#hero-info h2{font:600 clamp(23px,4vw,45px)/1.05 Georgia,"Songti SC",serif;color:#efcf9c}
#hero-info p{font-size:clamp(11px,1.45vw,14px);color:var(--sage);margin:4px 0}
.hero-kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:5px}
.hero-kit span{font-size:10px;color:#d4d8c6;padding:4px 6px;background:#10272199;border-radius:3px}
.setup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.setup label{display:grid;gap:3px;font-size:10px;color:#d3d7bf}
select{min-width:0;min-height:32px;background:#142a25;border:1px solid var(--line);border-radius:5px;padding:3px 5px}
#launch{display:flex;gap:6px}
#launch button{flex:1;min-height:39px;white-space:normal;font-size:clamp(11px,1.8vw,14px)}
#battle{pointer-events:none;z-index:4}
#battle button,#minimap,#joystick{pointer-events:auto;touch-action:none}
#lineup{position:absolute;left:50%;top:calc(var(--top) + 43px);translate:-50% 0;width:min(420px,56%);z-index:2;background:#11241ff2;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #08130d9c;padding:8px 10px;font-size:clamp(9px,1.6vh,13px);line-height:1.22}
#lineup>p{padding-bottom:5px;border-bottom:1px solid var(--line);color:var(--gold);text-align:center}
#lineup>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:5px}
#lineup b{color:#a9e5cb}#lineup section:nth-child(2) b{color:#efb2cf}
#lineup ul{margin:3px 0 0;padding:0;list-style:none;display:grid;gap:2px}
#lineup li{overflow-wrap:anywhere}#lineup li.player{color:var(--gold);font-weight:700}
#map-frame{position:absolute;bottom:var(--bottom);left:var(--left);width:clamp(102px,16vw,167px)}
#minimap{display:block;width:100%;aspect-ratio:1;border:1px solid #c1d8ba58;border-radius:8px;box-shadow:0 3px 14px #030d0c45}
#signals{position:absolute;inset:auto 0 calc(100% + 5px);display:flex;padding:3px;gap:3px;background:#152923d9;border-radius:6px}
#signals button{flex:1;padding:3px 1px;font-size:11px;min-width:0}
#quick{position:absolute;top:63px;left:var(--left);display:flex;gap:4px;align-items:center;max-width:calc(100% - 26px)}
#quick button{display:flex;align-items:center;justify-content:center;gap:4px;min-width:35px;min-height:34px;padding:4px 7px;background:#142820b8;border-color:#aebf9559;font-size:11px}
#quick svg,#touch-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#shop-toggle span{color:#f5ce83;font-variant-numeric:tabular-nums}
#inventory{position:absolute;z-index:3;top:108px;left:var(--left);max-height:min(42dvh,250px);width:min(232px,36vw);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:6px;pointer-events:auto}
#inventory button,#inventory p{font-size:11px}
#inventory button{min-height:36px;padding:5px;overflow-wrap:anywhere}
#inventory p{grid-column:1/-1;padding:5px}
#inventory button:not([data-touch]){touch-action:pan-y}
#roster-strip{position:absolute;top:61px;right:var(--right);display:flex;gap:3px}
#roster-strip button{height:27px;min-width:28px;display:grid;place-items:center;padding:3px;border-color:#e5e9c664;font:750 11px system-ui}
#dock{position:absolute;bottom:var(--bottom);left:50%;translate:-50% 0;display:flex;align-items:center;gap:8px;max-width:75vw;padding:7px 9px;background:#13251fed;border:1px solid #d2d9b854;border-radius:9px;box-shadow:0 8px 24px #050d0c9c}
#vitals{width:clamp(109px,13vw,188px);font-size:11px}
#vitals b{color:var(--gold);display:block;font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#vitals .meter{position:relative;display:block;height:10px;margin-top:3px;background:#141d20;border-radius:3px;overflow:hidden}
.meter i{display:block;height:100%;background:#569478}
.meter.mana i{background:#5d86b1}
.meter small{position:absolute;top:0;left:4px;font:750 8px/10px system-ui}
#skills{display:flex;gap:4px}
#skills button{position:relative;display:grid;place-items:center;min-width:36px;min-height:38px;padding:4px;font-size:11px}
#skills small{font-size:8px;color:#e4d3ab}
#skills button .plus,#touch-actions button .plus{position:absolute;top:-5px;right:-3px;padding:2px 4px;border:0;border-radius:50%;color:#31291d;background:#e9c286;cursor:pointer}
#joystick,#touch-actions,#cancel-cast{display:none}
#respawn{position:absolute;left:50%;top:28%;translate:-50% 0;text-align:center;padding:10px;background:#11211edf;border:1px solid var(--line);border-radius:8px}
#respawn p{margin-bottom:7px}
#respawn small{display:block;margin-top:4px;color:var(--sage)}
.sheet{min-width:0;min-height:0;background:#142722f5;border:1px solid #9eab926b;border-radius:10px;box-shadow:0 16px 65px #080e0daa;overflow:hidden}
.sheet>header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px}
.sheet h2{font:600 clamp(19px,3.2vw,32px)/1.1 Georgia,"Songti SC",serif;color:#f0d2a6}
.sheet header button{min-width:32px;font-size:17px;padding:2px 5px}
#shop-actions{display:flex;gap:4px;margin-inline-start:auto}
#shop-actions button{font-size:11px;padding:5px 7px}
#shop{position:absolute;z-index:8;top:calc(var(--top) + 45px);bottom:var(--bottom);left:var(--left);width:min(475px,52vw);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:5px;padding:8px 10px}
#shop-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-content:start;padding:2px}
#shop-list button{display:flex;justify-content:space-between;text-align:left;font-size:clamp(10px,1.65vw,13px);gap:4px;padding:6px}
#shop-list button small{color:#e6c78e;white-space:nowrap}
#shop-detail{font-size:12px;border-top:1px solid var(--line);padding-top:6px}
#shop-detail p{margin:3px 0 5px;color:#d4d2b9}
#shop-detail button{margin-right:4px;font-size:11px;padding:5px 7px}
.modal{position:absolute;inset:0;display:grid;place-items:center;z-index:10;background:#081715bb;padding:max(12px,var(--top)) var(--right) var(--bottom) var(--left)}
.modal .sheet{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(630px,100%);max-height:100%;gap:8px;padding:clamp(11px,2vw,24px)}
#modal-body{font-size:clamp(12px,1.6vw,15px);line-height:1.5;color:#e2dfcb}
#modal-body p{margin:0 0 6px}
#modal-footer{display:flex;gap:6px;flex-wrap:wrap}
#notice,#failure{position:absolute;z-index:16;left:50%;top:55px;translate:-50% 0;width:max-content;max-width:min(560px,83vw);text-align:center;background:#172b24f6;border:1px solid #d6bc86;border-radius:7px;padding:8px 11px;font-size:12px;pointer-events:none}
#failure{top:50%;font-size:16px}
#rotate{position:absolute;inset:0;z-index:14;display:grid;place-items:center;background:#142521f9;text-align:center;padding:24px;touch-action:none}
#rotate span{font-size:50px;color:var(--gold)}
#rotate h2{font:600 27px Georgia,"Songti SC",serif}
#rotate p{margin:8px 0 14px;color:var(--sage);font-size:13px}
#app.expanded .brand{visibility:hidden}
#app.expanded:not(.playing) #lobby{padding-top:49px}
@media(max-height:560px){
 #lobby{padding-top:45px;padding-bottom:var(--bottom);gap:12px}
 #mast{min-height:40px}
 #tools button{min-height:30px}
 #match-score{padding:4px 8px}
 #quick,#roster-strip{top:45px}
 #quick button{min-height:30px}
 #inventory{top:83px}
 #heroes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero{min-height:37px;padding:4px 5px}
 .hero .emblem{width:22px;height:22px}
 #hero-info{max-height:26vh}
 #hero-info h2{font-size:clamp(20px,3.65vw,33px)}
 #launch button{min-height:31px;padding:4px}
 .setup select{min-height:27px}
}
.touch .brand{display:none}
.touch #mast{justify-content:flex-end}
.touch #battle{--map-size:clamp(84px,min(13vw,31dvh),146px)}
.touch #map-frame{top:var(--top);bottom:auto;width:var(--map-size)}
.touch #signals{inset:0 auto auto calc(100% + 5px)}
.touch #signals button{min-width:31px;min-height:30px}
.touch #quick{top:calc(var(--top) + var(--map-size) + 5px)}
.touch #inventory{top:calc(var(--top) + var(--map-size) + 44px)}
.touch #roster-strip{top:calc(var(--top) + 38px)}
.touch #joystick{display:grid;place-items:center;position:absolute;left:calc(var(--left) + 8px);bottom:calc(var(--bottom) + 8px);width:clamp(76px,16vh,126px);aspect-ratio:1;border:1px solid #d2e3cb70;border-radius:50%;background:#1830288d;pointer-events:auto;touch-action:none}
.touch #joystick i{width:45%;height:45%;border-radius:50%;border:1px solid #ddf0cbbf;background:#91b09db8;translate:var(--jx,0px) var(--jy,0px);pointer-events:none}
.touch #touch-actions{--unit:clamp(40px,11dvh,63px);position:absolute;display:block;right:calc(var(--right) + 3px);bottom:calc(var(--bottom) + 4px);width:calc(var(--unit)*4.1);height:calc(var(--unit)*3.7)}
.touch #touch-actions button{display:grid;place-items:center;padding:0;border-radius:50%;color:#f2f3e8;border-color:#a7c2af9e}
.touch #attack{position:absolute;right:0;bottom:0;width:calc(var(--unit)*1.50);aspect-ratio:1;background:radial-gradient(circle at 36% 27%,#a17746dd,#442a1edb 74%);color:#ffedbf;border-color:#f4c77c;box-shadow:inset 0 0 0 3px #2c201f56,0 2px 8px #090d11a0}
.touch #attack svg{width:49%;height:49%;stroke-width:1.85}
.touch #mobile-skills .spell-slot{position:absolute}
.touch #mobile-skills [data-slot="0"]{right:calc(var(--unit)*2.53);bottom:calc(var(--unit)*.18)}
.touch #mobile-skills [data-slot="1"]{right:calc(var(--unit)*2.28);bottom:calc(var(--unit)*1.28)}
.touch #mobile-skills [data-slot="2"]{right:calc(var(--unit)*1.51);bottom:calc(var(--unit)*2.14)}
.touch #mobile-skills [data-slot="3"]{right:calc(var(--unit)*.44);bottom:calc(var(--unit)*2.51)}
.touch #mobile-skills .spell{width:var(--unit);aspect-ratio:1;position:relative;background:radial-gradient(circle at 38% 29%,#406a71da,#14292fed 76%);box-shadow:inset 0 0 0 2px #14242898,0 2px 6px #040d1177;font-size:calc(var(--unit)*.47);line-height:1}
.touch #mobile-skills .ultimate{width:calc(var(--unit)*1.12);color:#f6db9f;background:radial-gradient(circle at 38% 29%,#795a81ee,#292238ed 78%);border-color:#d7a8c9}
.touch #mobile-skills .spell:disabled{opacity:.57}
.touch #mobile-skills .spell.cooling{opacity:.84;background:#14212add}
.touch #mobile-skills .spell.low-mana{color:#97c1fc}
.touch #mobile-skills strong{font-size:calc(var(--unit)*.41)}
.touch #mobile-skills small{position:absolute;bottom:3px;left:0;right:0;color:#f7dfab;text-align:center;font:800 9px/1 system-ui;letter-spacing:1px}
.touch #mobile-skills .plus{top:-6px;right:-5px;width:23px;height:23px;border:1px solid #ffe5ab;background:#f1c67f;color:#2e201a;font-size:16px;z-index:1}
.touch #passive-upgrades{position:absolute;right:calc(var(--unit)*3.02);bottom:calc(var(--unit)*2.52);display:flex;gap:3px}
.touch #passive-upgrades button{min-width:30px;min-height:28px;padding:2px 5px;border-radius:12px;color:#efd8a7;background:#443722ca;font-size:11px;white-space:nowrap}
.touch #touch-actions .attack-extra{position:absolute;width:calc(var(--unit)*.78);aspect-ratio:1;background:#152c29db}
.touch #creep{right:calc(var(--unit)*1.62);bottom:calc(var(--unit)*.07)}
.touch #tower{right:0;bottom:calc(var(--unit)*1.57)}
.touch #deny{right:calc(var(--unit)*1.11);bottom:calc(var(--unit)*1.32);color:#efbc9e}
.touch #dock{background:#12241b8a;border-color:#acbe9d4d;box-shadow:none;max-width:30vw;padding:4px 6px;gap:3px}
.touch #vitals{width:clamp(86px,17vw,150px)}
.touch #skills{display:none}
.touch.aiming #cancel-cast{position:absolute;display:grid;place-items:center;top:calc(var(--top) + 70px);right:var(--right);width:66px;height:46px;border:1px solid #f2c2b5;border-radius:50%;color:#ffe3dd;background:#733c47e6;font-size:11px;pointer-events:auto}
.touch.canceling #cancel-cast{background:#a34c50}
@media(max-width:760px) and (orientation:landscape){#shop{width:min(61vw,430px)}.setup label{font-size:9px}}
.spell-slot{position:relative;display:inline-flex}
#lesson{position:absolute;top:104px;left:var(--left);width:min(195px,31vw);background:#172a23b9;border:1px solid var(--line);border-radius:7px;padding:7px;color:#e9e5cb;font-size:11px}
#lesson b{color:#f0d0a0}
#lesson p{margin:4px 0}
#lesson button{padding:3px 7px}
.touch #lesson{top:calc(var(--top) + var(--map-size) + 44px)}
#app.expanded.playing #mast{background:none;min-height:0}
#app.expanded.playing #tools button{min-height:29px;min-width:30px}
#app.expanded.playing #dock{background:#13251fbb}
.setup{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end}
#edit-build{min-height:32px;padding:4px 7px;font-size:10px}
.key-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 11px;margin-bottom:10px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 0;border-bottom:1px solid #c8c7a42a}
.setting-row button,.setting-row select{min-width:64px;max-width:72%;min-height:31px}
@media(max-height:560px){#edit-build{min-height:27px}}
#shop-detail .owned{color:#a6dcb4;text-decoration:underline;text-underline-offset:2px}
#dock button{touch-action:none}
@media(max-width:700px) and (orientation:landscape){#edit-build{font-size:9px;max-width:68px}#roster-strip button{min-width:23px}}