*{margin:0;padding:0;box-sizing:border-box}:root{--panel: rgba(9, 13, 21, .86);--panel-solid: #0d131e;--line: rgba(120, 150, 200, .22);--line-hi: rgba(140, 180, 255, .45);--text: #dfe7f5;--dim: #8b98ad;--gold: #ffd66e;--blue: #4c9dff;--green: #7ef29b;--red: #ff7a6a;--r: 12px}html,body{width:100%;height:100dvh;overflow:hidden;background:#070a10;color:var(--text);font-family:Rajdhani,Segoe UI,system-ui,-apple-system,sans-serif;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}button{font-family:inherit;cursor:pointer}#app{position:fixed;inset:0;width:100dvw;height:100dvh}#game,#game canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}#hud{position:absolute;inset:0;pointer-events:none;z-index:10}#hud:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.35) 100%);z-index:-1}.topbar{position:absolute;top:max(6px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;gap:6px;align-items:center;pointer-events:none}.res,.clock{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px 12px;font-weight:700;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.res{font-size:19px;color:var(--gold);display:flex;align-items:baseline;gap:6px}.res .gear{font-size:16px}.res .rate{font-size:12px;color:#b9a36a;font-weight:600}.clock{font-size:13px;color:var(--dim)}.tl{position:absolute;top:max(6px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));display:flex;gap:6px;pointer-events:none}.round{pointer-events:auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:15px;font-weight:800}.round:active{background:#223048}.minimap-wrap{position:absolute;pointer-events:none;border-radius:10px;padding:3px;background:var(--panel);border:1px solid var(--line-hi);box-shadow:0 4px 18px #00000073}#minimap{display:block;pointer-events:auto;width:124px;height:124px;border-radius:7px}.toasts{position:absolute;top:calc(max(6px,env(safe-area-inset-top)) + 44px);left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:min(92vw,380px)}.toast{pointer-events:auto;background:var(--panel-solid);border:1px solid var(--line-hi);border-radius:10px;padding:7px 14px;font-size:14px;font-weight:700;text-align:center;box-shadow:0 6px 20px #00000080;animation:toastIn .22s ease-out;transition:opacity .4s,transform .4s}.toast.good{border-color:#7ef29b99;color:var(--green)}.toast.bad{border-color:#ff6e5ab3;color:var(--red)}.toast.hint{border-color:#ffd66e99;color:#ffe7a6;font-weight:600}.toast.out{opacity:0;transform:translateY(-8px)}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}}#hud.spectator .buildbar,#hud.spectator .res{display:none}.versus{position:absolute;top:calc(max(6px,env(safe-area-inset-top)) + 38px);left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 14px;font-size:14px;font-weight:700;color:var(--dim);pointer-events:none;white-space:nowrap}.vs-blue{color:#6eb0ff}.vs-red{color:#ff8a7a}#unzoom{position:absolute;z-index:1000;border:none;background:var(--gold);color:#10141c;font-weight:800;letter-spacing:.5px}.zoombtns{position:absolute;left:max(8px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:8px;pointer-events:none}.zb{pointer-events:auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:22px;font-weight:700;line-height:1}.zb:active{background:#223048}.dock{position:absolute;display:flex;pointer-events:none}.ctx{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0 8px 6px;pointer-events:none}.chips{display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}.chip{pointer-events:auto;min-height:40px;padding:6px 14px;border-radius:20px;border:1px solid var(--line-hi);background:var(--panel);color:var(--text);font-size:14px;font-weight:700;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.chip.warn{color:var(--red)}.chip.info{color:var(--dim);border-style:dashed;pointer-events:none}.chip.active{background:#1d3b66;border-color:#6eb0ff;color:#fff}.chip:active{background:#223048}.selpanel{pointer-events:auto;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:6px 10px 6px 6px;max-width:min(94vw,360px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.selpanel .pi{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}.selpanel .pt{display:flex;flex-direction:column;gap:1px;min-width:0}.selpanel b{font-size:15px}.selpanel .rank{color:var(--gold);font-size:12px}.selpanel .hp{font-size:12px;color:var(--green);font-variant-numeric:tabular-nums}.selpanel .hint{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.selpanel .group{display:flex;flex-wrap:wrap;gap:4px 10px;padding-left:4px}.selpanel .gi{display:flex;align-items:center;gap:2px}.selpanel .gi img{width:30px;height:30px;object-fit:contain}.selpanel .gi b{font-size:13px}.queue{display:flex;gap:4px;margin-top:3px}.qi{position:relative;width:32px;height:32px;border-radius:6px;border:1px solid var(--line-hi);background:#152033;overflow:hidden}.qi img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}.qi .qp{position:absolute;left:0;right:0;bottom:0;background:#6eb0ff73}.buildbar{pointer-events:auto;display:flex;flex-direction:column;gap:6px;padding:6px 8px 8px;background:linear-gradient(180deg,#0e1420f0,#080b12f7);border:1px solid var(--line);box-shadow:0 -6px 22px #00000073}.tabs{display:flex;gap:6px}.tab{position:relative;flex:1;min-height:32px;border-radius:8px;border:1px solid transparent;background:#ffffff0a;color:var(--dim);font-weight:800;font-size:13px;letter-spacing:.4px;display:flex;align-items:center;justify-content:center;gap:5px}.tab.on{color:#fff;background:#1a2b45;border-color:var(--line-hi)}.tab .tbadge{position:absolute;top:-5px;right:4px;background:var(--blue);color:#fff;border-radius:8px;font-size:10px;min-width:16px;height:16px;line-height:16px;padding:0 4px}.tab .tbadge.hot{background:#37d67a;animation:pulse .9s infinite alternate}@keyframes pulse{to{transform:scale(1.18)}}.grid{display:flex;gap:6px}.bb{position:relative;flex:1 0 48px;max-width:76px;height:74px;border-radius:10px;border:1px solid #2c3a55;background:radial-gradient(circle at 50% 35%,#22324f,#141d2e 70%);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:2px 2px 3px;overflow:hidden;touch-action:manipulation}.bb .ic{position:absolute;top:3px;left:50%;transform:translate(-50%);width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));pointer-events:none}.bb .nm{position:relative;font-size:10px;font-weight:700;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}.bb .cost{position:relative;font-size:11px;font-weight:700;color:var(--gold);line-height:1}.bb:active{transform:scale(.96)}.bb.poor .cost{color:#b35a4e}.bb.poor .ic,.bb.busy .ic{opacity:.55}.bb.locked .ic{opacity:.3;filter:grayscale(1)}.bb.locked .nm,.bb.locked .cost{opacity:.5}.bb .lock{position:absolute;top:16px;left:50%;transform:translate(-50%);font-size:18px}.bb.ready{border-color:#37d67a;box-shadow:0 0 0 1px #37d67a inset,0 0 12px #37d67a73;animation:glow 1s infinite alternate}@keyframes glow{to{box-shadow:0 0 0 1px #37d67a inset,0 0 20px #37d67acc}}.bb.ready:after{content:"PLACE";position:absolute;top:4px;left:0;right:0;font-size:10px;font-weight:800;color:var(--green);text-shadow:0 1px 2px #000}.bb.placing{background:#1e3a2a}.bb .badge{position:absolute;top:3px;right:3px;background:var(--blue);color:#fff;border-radius:8px;font-size:11px;font-weight:800;min-width:17px;height:17px;line-height:17px;z-index:2}.bb .prog{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#7ef29b59,#7ef29b1f);border-top:1px solid rgba(126,242,155,.7);pointer-events:none}.card{position:absolute;pointer-events:auto;z-index:20;width:min(92vw,330px);background:var(--panel-solid);border:1px solid var(--line-hi);border-radius:14px;padding:12px 14px;box-shadow:0 10px 40px #0009;animation:toastIn .18s ease-out}.card .ch{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}.card .ch img{width:58px;height:58px;object-fit:contain}.card .ch b{font-size:18px}.card .ch p{font-size:13px;color:var(--dim);margin-top:2px}.card .x{margin-left:auto;border:none;background:none;color:var(--dim);font-size:18px;padding:0 4px}.card table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:6px}.card td{padding:2px 4px}.card td:nth-child(odd){color:var(--dim)}.card td:nth-child(2n){font-weight:700}.card .good{color:var(--green);font-size:13px}.card .bad{color:var(--red);font-size:13px;margin-bottom:4px}@media(orientation:portrait){.dock{left:0;right:0;bottom:0;flex-direction:column}.buildbar{border-width:1px 0 0 0;border-radius:16px 16px 0 0;padding-bottom:max(8px,env(safe-area-inset-bottom));padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}.grid{overflow-x:auto;scrollbar-width:none}.minimap-wrap{right:max(8px,env(safe-area-inset-right));top:max(6px,env(safe-area-inset-top))}.zoombtns{top:38%}@media(max-width:420px){#minimap{width:108px;height:108px}.res{font-size:17px;padding:4px 10px}}.card{left:50%;transform:translate(-50%);bottom:calc(150px + env(safe-area-inset-bottom))}.topbar{left:calc(max(8px,env(safe-area-inset-left)) + 94px);transform:none;flex-direction:column;align-items:flex-start;gap:3px}.clock{padding:1px 8px;font-size:12px}.toasts,.versus{top:calc(max(6px,env(safe-area-inset-top)) + 144px)}}@media(orientation:landscape){.dock{top:0;bottom:0;right:0;flex-direction:row;align-items:flex-end}.ctx{align-items:flex-end;padding-bottom:max(10px,env(safe-area-inset-bottom))}.buildbar{height:100%;width:calc(172px + env(safe-area-inset-right));border-width:0 0 0 1px;border-radius:16px 0 0 16px;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) 8px;overflow-y:auto;scrollbar-width:none}.tab .tl2{display:none}.tab{font-size:16px}.grid{display:grid;grid-template-columns:1fr 1fr;align-content:start}.bb{max-width:none;height:70px}.minimap-wrap{right:calc(182px + env(safe-area-inset-right));top:max(6px,env(safe-area-inset-top))}.zoombtns{top:50%;transform:translateY(-50%)}.card{right:calc(186px + env(safe-area-inset-right));top:50%;transform:translateY(-50%)}.topbar{left:calc(50% - 90px)}#minimap{width:112px;height:112px}}@media(orientation:landscape)and (max-height:420px){.bb{height:62px}.bb .ic{width:38px;height:38px}.tab{min-height:28px}}[hidden]{display:none!important}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#030509b8;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);pointer-events:auto;z-index:30}.panel{background:var(--panel-solid);border:1px solid var(--line-hi);border-radius:16px;padding:24px 28px;text-align:center;max-width:min(90vw,420px);max-height:92dvh;overflow-y:auto;box-shadow:0 20px 60px #0009}.panel h1{font-size:36px;letter-spacing:4px;margin-bottom:4px}.panel h1.win{color:var(--green);text-shadow:0 0 24px rgba(126,242,155,.5)}.panel h1.lose{color:var(--red);text-shadow:0 0 24px rgba(255,110,90,.5)}.panel .time{color:var(--dim);margin-bottom:16px}.panel table{margin:0 auto 20px;border-collapse:collapse;font-size:15px}.panel td,.panel th{padding:4px 12px;text-align:right;font-variant-numeric:tabular-nums}.panel td:first-child{text-align:left;color:var(--dim)}.cta{min-height:48px;padding:10px 30px;font-size:18px;font-weight:800;letter-spacing:.5px;color:#061018;background:linear-gradient(180deg,#6eb5ff,#3d86f0);border:none;border-radius:12px;box-shadow:0 4px 16px #3d86f066}.cta:active{transform:scale(.97)}.cta.alt{display:block;margin:10px auto 0;background:#1c2a42;color:var(--text);font-size:15px;box-shadow:none;border:1px solid var(--line)}.panel .cta{width:min(280px,100%)}.panel .cta.alt{margin-left:auto;margin-right:auto}.cta.small{min-height:36px;padding:6px 14px;font-size:14px;width:100%;margin-top:6px}.cta.warn{background:#3a1d1d;color:var(--red)}.help{text-align:left;margin-top:14px;font-size:14px;line-height:1.4;color:#c3cde0}.help h3{font-size:15px;color:var(--gold);margin:10px 0 2px}#loading{background:#070a10}.loadbox{width:min(80vw,320px);text-align:center;color:var(--dim);font-weight:700}.loadtrack{margin-top:12px;height:6px;border-radius:3px;background:#1a2233;overflow:hidden}#loadbar{height:100%;width:0;background:linear-gradient(90deg,#3d86f0,#7ef29b);transition:width .15s}.menu{position:absolute;inset:0;pointer-events:auto;overflow-y:auto;background:#070a10;z-index:40}.keyart{position:fixed;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;animation:drift 40s ease-in-out infinite alternate}.keyart:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#04060a1a,#04060a8c 45%,#04060af0 75%)}@media(orientation:landscape){.keyart:after{background:linear-gradient(90deg,#04060a33,#04060abf 55%,#04060af2)}.menu-inner{margin-left:auto!important;margin-right:max(4vw,env(safe-area-inset-right))!important}}@keyframes drift{0%{transform:scale(1.04) translate(-1%)}to{transform:scale(1.1) translate(1%,-1%)}}.menu-inner{position:relative;max-width:460px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));text-align:center;display:flex;flex-direction:column;gap:12px;min-height:100%;justify-content:flex-end}.logo{font-size:46px;line-height:.95;letter-spacing:6px;font-weight:900;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.8),0 0 40px rgba(76,157,255,.5)}.logo span{color:var(--gold);letter-spacing:9px}.sub{color:#c3cde0;font-weight:600;text-shadow:0 2px 8px #000}.maps{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none;scroll-snap-type:x mandatory}.mapcard{flex:0 0 104px;scroll-snap-align:center;border-radius:12px;border:2px solid rgba(255,255,255,.12);background:#0c121cd9;padding:4px 4px 6px;color:var(--text);display:flex;flex-direction:column;gap:2px;transition:transform .15s,border-color .15s}.mapcard img{width:100%;aspect-ratio:1;border-radius:8px;object-fit:cover;background:#1a2233}.mapcard .mn{font-weight:800;font-size:13px}.mapcard .mb{font-size:10px;color:var(--dim);text-transform:capitalize}.mapcard.on{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 6px 20px #ffd66e40}.blurb{min-height:1.3em;font-size:14px;color:#c3cde0}.seg{display:flex;background:#0c121cd9;border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}.seg button{flex:1;min-height:38px;border:none;border-radius:9px;background:transparent;color:var(--dim);font-weight:800;font-size:15px}.seg button.on{background:#1d3b66;color:#fff}.cta.big{font-size:22px;min-height:56px}.menu .row{display:flex;gap:8px}.menu .row .cta.alt{flex:1;margin:0;padding:10px 8px}.menu .help{background:#0c121ceb;border:1px solid var(--line);border-radius:12px;padding:4px 14px 12px;margin:0}.credits{font-size:11px;color:#5d6a80}@media(orientation:landscape)and (max-height:500px){.menu-inner{justify-content:center;gap:7px;max-width:440px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}.logo{font-size:30px;letter-spacing:4px}.logo br{display:none}.logo span{letter-spacing:4px;margin-left:10px}.sub,.credits{display:none}.mapcard{flex-basis:80px}.mapcard .mb{display:none}.blurb{font-size:13px}.seg button{min-height:34px}.cta.big{min-height:46px;font-size:19px}.menu .row .cta.alt{min-height:40px}}