:root{--bg:#0b0d18;--panel:#0e1120e0;--edge:#3a4268;--gold:#ffd84a;--blue:#4fd1ff;--red:#ff5a5a;--green:#7be06a;--ink:#eef1ff;--dim:#98a0c8}*{box-sizing:border-box}html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:var(--bg);height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;margin:0;font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;overflow:hidden}.hidden{display:none!important}#game{position:fixed;inset:0}#game canvas{image-rendering:pixelated;touch-action:none;display:block}button,.minimap{touch-action:manipulation}#hud-root{pointer-events:none;position:fixed;inset:0}#menu-root{position:fixed;inset:0}button{font:inherit;color:var(--ink);border:2px solid var(--edge);cursor:pointer;background:#232a4a;border-radius:6px;padding:9px 16px;font-weight:700;transition:transform 50ms,background .1s;box-shadow:0 3px #11142a}button:hover:not(:disabled){background:#2d3560}button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #11142a}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:#2f7a3a;border-color:#5fd070;box-shadow:0 3px #173d1d}button.primary:hover:not(:disabled){background:#3a9648}button.danger{background:#8a2f2f;border-color:#e06a6a;box-shadow:0 3px #3d1717}button.big{padding:13px 20px;font-size:20px}.menu-bg{background:radial-gradient(at 50% 120%,#7a2e6a 0%,#0000 55%),linear-gradient(#0b0820,#231545 55%,#5a2a62 100%);justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0;overflow-y:auto}.menu-bg:before{content:"";clip-path:polygon(0 40%,8% 20%,17% 45%,28% 10%,40% 50%,52% 15%,63% 45%,75% 5%,86% 40%,100% 18%,100% 100%,0 100%);background:linear-gradient(#1c1233,#0b0716);height:28%;position:absolute;inset:auto 0 0}.menu-card{text-align:center;background:var(--panel);border:3px solid var(--edge);border-radius:10px;flex-direction:column;gap:12px;width:min(420px,100%);padding:28px;display:flex;position:relative;box-shadow:0 0 0 4px #0b0d18,0 20px 60px #0009}.menu-card.wide{width:min(640px,100%)}.logo{letter-spacing:3px;color:var(--gold);text-shadow:3px 3px #7a3a10,0 0 20px #ffb43c66;margin:0;font-size:46px;line-height:1}.logo span{color:var(--blue);text-shadow:3px 3px #123a6a;font-size:38px}h2{color:var(--gold);letter-spacing:1px;margin:0}h3{color:var(--blue);text-align:left;margin:10px 0 0;font-size:15px}.sub{color:var(--dim);margin:0}.sub.small{text-align:left;font-size:12px}.credit{text-align:center;color:#6a6f95;width:100%;font-size:12px;position:absolute;bottom:8px}.diff{text-align:left;border-left-width:8px;flex-direction:column;gap:2px;display:flex}.diff small{color:var(--dim);font-weight:400}.diff.easy{border-left-color:#6adf6a}.diff.normal{border-left-color:#ffd84a}.diff.hard{border-left-color:#ff5a5a}.code{letter-spacing:10px;color:var(--gold);border:2px dashed var(--edge);-webkit-user-select:text;user-select:text;background:#0b0d18;border-radius:8px;padding:12px 0 12px 10px;font:700 46px monospace}.codein{letter-spacing:8px;text-align:center;text-transform:uppercase;color:var(--gold);border:2px solid var(--edge);-webkit-user-select:text;user-select:text;background:#0b0d18;border-radius:8px;width:100%;padding:10px;font:700 40px monospace}.status{min-height:22px;font-size:14px}.status.info{color:var(--dim)}.status.ok{color:var(--green)}.status.error{color:var(--red)}.howto{text-align:left;font-size:14px;line-height:1.45}.howto p{margin:0 0 8px}.keys{border-collapse:collapse;width:100%;margin-top:10px;font-size:13px}.keys td{vertical-align:top;border-top:1px solid #2a3050;padding:4px 6px}kbd{color:var(--gold);background:#2a3050;border:1px solid #4a5280;border-bottom-width:2px;border-radius:4px;padding:0 5px;font:700 12px monospace}.form{text-align:left;flex-direction:column;gap:10px;display:flex}.form label{justify-content:space-between;align-items:center;gap:12px;display:flex}.form label.chk{justify-content:flex-start}.form input[type=text],.form input[type=number]{max-width:300px;color:var(--ink);border:2px solid var(--edge);font:inherit;-webkit-user-select:text;user-select:text;background:#0b0d18;border-radius:6px;flex:1;padding:6px 8px}.form input[type=range]{flex:1;max-width:300px}code{background:#0b0d18;border-radius:4px;padding:1px 5px}.hud-layer{transform-origin:0 0;pointer-events:none;text-shadow:0 1px 2px #000;padding:0;font-size:14px;position:absolute;top:0;left:0}.hud-layer button,.hud-layer .tooltip,.hud-layer canvas,.hud-layer .overlay,.hud-layer .gold,.hud-layer .xpwrap,.hud-layer .debug,.hud-layer .slot{pointer-events:auto}.top{height:58px;padding-top:env(safe-area-inset-top);background:linear-gradient(#080a16d9,#0000);justify-content:space-between;align-items:center;gap:8px;padding:0 12px;display:flex;position:absolute;top:0;left:0;right:0}.res{flex:none;align-items:center;gap:12px;display:flex}.gold{color:var(--gold);align-items:center;gap:8px;min-width:96px;font-size:24px;display:flex}.coin{background:radial-gradient(circle at 35% 35%,#fff2a8,#f5c542 55%,#b8841a);border:2px solid #7a5410;border-radius:50%;width:20px;height:20px}.xpbar{border:2px solid var(--edge);background:#0b0d18;border-radius:5px;width:240px;height:22px;position:relative;overflow:hidden}.xpbar i{background:linear-gradient(#7ee0ff,#2a8ad8);position:absolute;inset:0 auto 0 0}.xpbar span{place-items:center;font-size:12px;font-weight:700;display:grid;position:absolute;inset:0}.hps{align-items:center;gap:10px;display:flex}.hpbar{border:2px solid var(--edge);background:#0b0d18;border-radius:5px;width:250px;height:22px;position:relative;overflow:hidden}.hpbar i{position:absolute;inset:0 auto 0 0}.hpbar.me i{background:linear-gradient(#6af08a,#1f9a46)}.hpbar.them i{background:linear-gradient(#ff8a8a,#b82a2a);inset:0 0 0 auto}.hpbar span{place-items:center;font-size:12px;font-weight:700;display:grid;position:absolute;inset:0}.vs{flex-direction:column;align-items:center;min-width:190px;line-height:1.1;display:flex}.vs b{font-size:12px}.vs small{color:var(--dim);font-size:11px}.tools{flex:none;justify-content:flex-end;align-items:center;gap:6px;display:flex}.tools button{padding:4px 10px;font-size:14px}.ping{color:var(--dim);margin-right:6px;font-size:12px}.minimap{border:2px solid var(--edge);cursor:pointer;border-radius:5px;width:min(700px,52%);height:26px;position:absolute;top:62px;left:50%;transform:translate(-50%)}.fps{color:var(--green);font:700 12px monospace;position:absolute;top:62px;right:12px}.toast{border:2px solid var(--red);color:#ffd0d0;opacity:0;background:#000c;border-radius:6px;padding:6px 16px;font-weight:700;transition:opacity .2s;position:absolute;bottom:168px;left:50%;transform:translate(-50%)}.toast.show{opacity:1}.banner{border:2px solid var(--gold);color:var(--gold);background:#281400e6;border-radius:8px;padding:10px 24px;font-size:18px;font-weight:700;display:none;position:absolute;top:110px;left:50%;transform:translate(-50%)}.banner.show{display:block}.bottom{min-height:152px;padding:8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));background:linear-gradient(#0000,#060812eb 25%);gap:10px;display:flex;position:absolute;bottom:0;left:0;right:0}.panel{background:var(--panel);border:2px solid var(--edge);pointer-events:auto;border-radius:8px;padding:6px 10px 8px;position:relative}.panel h4{letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin:0 0 4px;font-size:11px}.panel.units,.panel.turrets{flex:none}.panel.actions{flex:1;justify-content:space-around;align-items:center;gap:8px;display:flex}.ubtns,.tbtns,.slots,.queue{gap:6px;display:flex}.ubtn,.tbtn{place-items:center;width:84px;height:70px;padding:4px;display:grid;position:relative}.tbtn{width:84px;height:56px}.ubtn img,.tbtn img{image-rendering:pixelated;transform-origin:50%;filter:drop-shadow(0 2px #00000080);max-width:60px;height:auto;max-height:44px;transform:scale(1.3)}.ubtn.super{border-color:#ff4fb8;box-shadow:0 3px #3d1030,0 0 12px #ff4fb880}.ubtn .key,.tbtn .key,.special .key,.evolve .key{color:var(--dim);font:700 11px monospace;position:absolute;top:2px;left:4px}.ubtn .cost,.tbtn .cost{color:var(--gold);font-size:13px;font-weight:700;position:absolute;bottom:2px;right:5px}.ubtn.disabled,.tbtn.disabled{opacity:.45;filter:grayscale(.7)}.queue{margin-top:4px}.qcell{background:#0b0d18;border:2px solid #2a3050;border-radius:5px;place-items:center;width:42px;height:28px;display:grid;position:relative;overflow:hidden}.qcell img{image-rendering:pixelated;visibility:hidden;max-width:30px;max-height:26px}.qcell.full img{visibility:visible}.qcell i{background:var(--green);width:0;height:4px;position:absolute;bottom:0;left:0}.slots{margin-top:4px}.slot{background:#0b0d18;border-style:dashed;place-items:center;width:62px;height:40px;padding:2px;display:grid;position:relative}.slot img{image-rendering:pixelated;max-width:52px;max-height:34px}.slot img:not([src]){visibility:hidden}.slot .lbl{color:var(--gold);font-size:11px;position:absolute;bottom:1px}.slot.empty .lbl{color:var(--dim)}.slot.locked{opacity:.7}.slot.locked img{position:absolute;top:2px}.slot.afford{border-color:var(--green)}.slot:not(.empty):not(.locked){border-style:solid;border-color:#5a6490}.special{border:3px solid var(--edge);background:#151a34;border-radius:50%;place-items:center;width:96px;height:96px;padding:0;display:grid;position:relative}.special .ring{background:conic-gradient(var(--blue) var(--p,0deg), #1b2040 0);border-radius:50%;position:absolute;inset:-6px;-webkit-mask:radial-gradient(circle,#0000 54%,#000 56%);mask:radial-gradient(circle,#0000 54%,#000 56%)}.special img{width:54px;height:54px;image-rendering:pixelated}.special em{color:#fff;text-shadow:0 0 6px #000,0 0 3px #000;font:700 26px monospace;position:absolute}.special .key{background:#0b0d18;border-radius:4px;padding:0 4px;top:-4px;left:50%;transform:translate(-50%)}.special.ready{border-color:var(--blue);animation:1.2s infinite pulse;box-shadow:0 0 18px #4fd1ffb3}.special.ready .ring{background:var(--blue)}.evolve{flex-direction:column;justify-content:center;align-items:center;width:150px;height:84px;font-size:18px;display:flex;position:relative}.evolve small{color:var(--dim);font-size:12px;font-weight:400}.evolve.ready{border-color:var(--gold);background:#8a6a10;animation:.9s infinite pulse;box-shadow:0 0 20px #ffd84ab3}.evolve.ready small{color:#fff}@keyframes pulse{50%{filter:brightness(1.35)}}.overlay{background:#04050cb8;place-items:center;display:grid;position:absolute;inset:0}.card{background:var(--panel);border:3px solid var(--edge);text-align:center;border-radius:10px;flex-direction:column;gap:12px;min-width:340px;padding:24px 32px;display:flex;box-shadow:0 0 0 4px #0b0d18}.card h2,.card h1{margin:0}.card p{color:var(--dim);max-width:380px;margin:0}.card .row{justify-content:center;gap:10px;display:flex}.card.result h1{letter-spacing:4px;font-size:54px}h1.win{color:var(--gold);text-shadow:3px 3px #7a3a10,0 0 24px #ffc83c99}h1.lose{color:var(--red);text-shadow:3px 3px #4a1010}.card table{border-collapse:collapse;width:100%;margin:4px 0}.card th{color:var(--dim);text-transform:uppercase;font-size:12px}.card td,.card th{border-bottom:1px solid #2a3050;padding:4px 10px}.card td:first-child{text-align:left;color:var(--dim)}.tooltip{z-index:50;border:2px solid var(--edge);background:#080a16f5;border-radius:8px;max-width:300px;padding:8px 12px;font-size:13px;position:fixed;box-shadow:0 6px 24px #0009;pointer-events:none!important}.tooltip h5{color:var(--gold);margin:0 0 4px;font-size:14px}.tooltip p{margin:0 0 4px}.tooltip .dim{color:var(--dim);font-size:12px}.tooltip table{border-collapse:collapse;font-size:12px}.tooltip td{padding:1px 10px 1px 0}.tooltip td:first-child{color:var(--dim)}.debug{border:2px solid var(--green);color:var(--green);background:#000c;border-radius:6px;padding:8px;font:12px monospace;position:absolute;top:100px;left:10px}.debug pre{margin:6px 0}.debug button{margin-right:4px;padding:3px 8px;font-size:12px}@media (pointer:coarse){.key,.hud-layer .special .key{display:none!important}button:hover:not(:disabled){background:#232a4a}.menu-bg{-webkit-overflow-scrolling:touch}}.rotate{z-index:100;text-align:center;pointer-events:auto;background:#0b0d18;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.rotate span{color:var(--gold);font-size:72px;animation:2.5s ease-in-out infinite spin;display:block}.rotate p{color:var(--ink);max-width:260px;margin:8px auto 0;font-size:18px}@keyframes spin{50%{transform:rotate(-90deg)}}.hud-layer .overlay{pointer-events:auto}.hud-layer.compact{font-size:12px}.compact .top{height:40px;padding:0 8px}.compact .res{gap:8px}.compact .gold{min-width:62px;font-size:18px}.compact .coin{width:15px;height:15px}.compact .xpbar{width:140px;height:18px}.compact .xpbar span,.compact .hpbar span{font-size:11px}.compact .hpbar{width:150px;height:18px}.compact .vs{display:none}.compact .hps{gap:6px}.compact .tools button{min-width:34px;min-height:30px;padding:3px 9px;font-size:14px}.compact .ping{margin-right:2px}.compact .minimap{width:min(560px,46%);height:18px;top:44px}.compact .fps{top:44px}.compact .toast{bottom:100px}.compact .banner{padding:6px 14px;font-size:14px;top:70px}.compact .bottom{min-height:0;padding-top:6px;padding-bottom:max(6px, env(safe-area-inset-bottom));gap:6px}.compact .panel{padding:5px 6px}.compact .panel h4{display:none}.compact .ubtns,.compact .tbtns,.compact .slots,.compact .queue{gap:4px}.compact .ubtn{width:58px;height:54px;padding:2px}.compact .tbtn{width:58px;height:46px;padding:2px}.compact .ubtn img,.compact .tbtn img{max-width:44px;max-height:34px;transform:scale(1.15)}.compact .ubtn .cost,.compact .tbtn .cost{font-size:11px;bottom:0;right:3px}.compact .qcell{width:58px;height:22px}.compact .qcell img{max-height:18px}.compact .slots{margin-top:3px}.compact .slot{width:43px;height:28px}.compact .slot img{max-width:36px;max-height:22px}.compact .slot .lbl{font-size:9px}.compact .queue{margin-top:3px}.compact .panel.actions{justify-content:space-around;gap:6px;min-width:150px}.compact .special{width:68px;height:68px}.compact .special img{width:38px;height:38px}.compact .special em{font-size:20px}.compact .evolve{width:96px;height:58px;font-size:14px}.compact .evolve small{font-size:10px}.compact .card{gap:8px;min-width:260px;padding:14px 20px}.compact .card.result h1{font-size:34px}.compact .card td,.compact .card th{padding:2px 8px;font-size:12px}.compact .debug{top:66px}.menu-bg{align-items:flex-start}.menu-card{margin:auto}@media (height<=560px){.menu-bg{padding:10px}.menu-card{gap:7px;padding:12px 16px}.logo{letter-spacing:2px;font-size:28px}.logo span{font-size:24px}.menu-card .sub{font-size:13px}h2{font-size:20px}button{padding:7px 14px}button.big{padding:9px 14px;font-size:16px}.code{padding:6px 0 6px 8px;font-size:30px}.codein{padding:5px;font-size:28px}.howto{font-size:12.5px}.keys,.credit{display:none}}input,textarea,.code{-webkit-touch-callout:default;-webkit-user-select:text!important;user-select:text!important}