html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0a0a10;font-family:Verdana,Segoe UI,sans-serif;color:#eee;user-select:none}#app{width:100%;height:100%}canvas{display:block;touch-action:none}#overlay{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;background:#06060c59}#overlay.hidden{display:none}#overlay h1{margin:0;font-size:42px;letter-spacing:4px;font-weight:800;color:#ffd23c;text-shadow:0 0 18px rgba(255,180,40,.55),2px 2px 0 #000;font-style:italic}#overlay h2{margin:0;font-size:15px;color:#9fb4ff;letter-spacing:2px;font-weight:600}#overlay .panel{background:#141828d9;border:1px solid #3a4468;border-radius:10px;padding:18px 26px;max-width:560px;line-height:1.9;font-size:14px;text-align:left}#overlay kbd{background:#2a2a36;border:1px solid #555;border-bottom-width:2px;border-radius:4px;padding:1px 7px;font-size:12px;margin:0 2px}#overlay button{font:inherit;font-weight:800;letter-spacing:3px;font-size:18px;color:#111;background:linear-gradient(#ffe27a,#f5a623);border:2px solid #fff2c0;border-radius:8px;padding:12px 44px;cursor:pointer;box-shadow:0 0 22px #f5a62380}#overlay button:hover{filter:brightness(1.1)}#overlay .sub{color:#8a92ad;font-size:12px}#hud{position:absolute;inset:0;pointer-events:none;z-index:10;display:none}#hud.active{display:block}#crosshair{position:absolute;left:50%;top:46%;width:26px;height:26px;transform:translate(-50%,-50%);opacity:.9}#crosshair:before,#crosshair:after{content:"";position:absolute;background:#7cff6b;box-shadow:0 0 4px #000}#crosshair:before{left:50%;top:0;width:2px;height:100%;transform:translate(-50%)}#crosshair:after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}#hpWrap{position:absolute;left:18px;bottom:90px;width:22px;height:220px;background:#0000008c;border:2px solid #cfc9a8;border-radius:4px;display:flex;align-items:flex-end;overflow:hidden}#hpFill{width:100%;height:100%;background:linear-gradient(#d8ffb0,#7bd34a 60%,#4e9a2c);transition:height .15s}#hpWrap .cap{position:absolute;top:3px;left:3px;right:3px;height:14px;background:#7a2020;border-radius:2px}#ammoBar{position:absolute;left:16px;bottom:18px;display:flex;gap:34px;align-items:center;font-weight:800;font-size:26px;color:#f7f7f7;text-shadow:2px 2px 0 #000,0 0 8px rgba(0,0,0,.8)}#ammoBar .slot{display:flex;align-items:center;gap:10px}#ammoBar .ico{font-size:30px;filter:drop-shadow(2px 2px 0 #000)}#ammoBar .salv{color:#ffd23c}#ammoBar .key{font-size:13px;font-weight:700;line-height:1;color:#8a97b6;border:1px solid #4a5578;border-radius:4px;padding:3px 6px;text-shadow:none}#ammoBar .slot.active .key{color:#101820;background:#ffd23c;border-color:#ffd23c}#ammoBar .cost{font-size:14px;color:#ffd23c;align-self:flex-end}#ammoBar .slot.dim{opacity:.4}@media(max-width:900px){#ammoBar{gap:18px;font-size:20px}#ammoBar .ico{font-size:22px}}@media(pointer:coarse){#ammoBar .key{display:none}}.baseBar{position:absolute;top:14px;width:260px;font-size:11px;font-weight:700;letter-spacing:2px;text-shadow:1px 1px 0 #000}#baseBlue{left:16px;color:#9fc4ff}#baseRed{right:16px;color:#ff9f9f;text-align:right}.baseBar .track{margin-top:4px;height:12px;background:#0009;border:1px solid #888;border-radius:3px;overflow:hidden}#baseBlue .fill{height:100%;width:100%;background:linear-gradient(90deg,#3d7bff,#7db5ff)}#baseRed .fill{height:100%;width:100%;background:linear-gradient(90deg,#ff4a3d,#ff9a7d);float:right}#minimap{position:absolute;left:50%;transform:translate(-50%);bottom:max(18px,env(safe-area-inset-bottom));height:min(204px,38vh);width:auto;background:#080a104d;border:1px solid rgba(74,85,120,.6);border-radius:6px}#msg{position:absolute;left:50%;top:24%;transform:translate(-50%);font-size:34px;font-weight:800;letter-spacing:4px;font-style:italic;color:#ffd23c;text-shadow:2px 2px 0 #000,0 0 20px rgba(255,170,0,.5);opacity:0;transition:opacity .25s;white-space:nowrap}#buildHint{position:absolute;left:50%;transform:translate(-50%);bottom:calc(max(18px,env(safe-area-inset-bottom)) + min(204px,38vh) + 14px);background:#0a1e0ccc;border:1px solid #4cbf4c;border-radius:6px;padding:8px 18px;font-size:13px;color:#b8ffb8;letter-spacing:1px;display:none;text-align:center}#buildHint.bad{border-color:#cf4c3c;color:#ffb8a8;background:#280c08cc}#respawn{position:absolute;left:50%;top:42%;transform:translate(-50%);font-size:22px;font-weight:700;letter-spacing:3px;color:#ff6a5a;text-shadow:2px 2px 0 #000;display:none}#touchControls{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:16px;pointer-events:auto}body.touch #touchControls{display:flex}#touchControls button{width:76px;height:76px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:inherit;font-size:32px;line-height:1;color:#eee;background:#0e1220b8;border:2px solid #4a5578;box-shadow:0 0 10px #0009;-webkit-tap-highlight-color:transparent;touch-action:none}#touchControls button:active{background:#3c4a78d9;border-color:#8ab4ff}#touchControls .cost{font-size:11px;color:#ffd23c;margin-top:2px}#joystick{position:absolute;width:120px;height:120px;border-radius:50%;border:2px solid #4a5578;background:#0e122066;transform:translate(-50%,-50%);display:none}#joystick.on{display:block}#joyKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;background:#7896ff59;border:2px solid #8ab4ff;transform:translate(-50%,-50%)}.turretIco{width:1em;height:1em;display:inline-block;vertical-align:-.1em}#overlay .screen{display:flex;flex-direction:column;align-items:center;gap:16px}#overlay .screen.hidden{display:none}#overlay .screenTitle{font-size:15px;font-weight:700;letter-spacing:3px;color:#9fb4ff}#overlay.level h1,#overlay.level h2{display:none}#overlay.level{background:#06060c1a}#levelScreen.loading{visibility:hidden}#diffRow{display:flex;gap:10px}#ctrlRow{display:none;gap:10px}body.touch #ctrlRow{display:flex}#overlay #ctrlRow button,#overlay #diffRow button,#overlay #levelBtn,#overlay #levelBack,#overlay #mpBtn,#overlay #mpBack,#overlay button.ghost{font-size:13px;font-weight:700;letter-spacing:2px;color:#9fb4ff;background:#141828d9;border:1px solid #3a4468;border-radius:6px;padding:8px 22px;box-shadow:none}#overlay #ctrlRow button:hover,#overlay #diffRow button:hover,#overlay #levelBtn:hover,#overlay #levelBack:hover,#overlay #mpBtn:hover,#overlay #mpBack:hover,#overlay button.ghost:hover{border-color:#6f83c9;color:#cdd8ff;filter:none}#overlay #ctrlRow button.selected,#overlay #diffRow button.selected{color:#101427;background:linear-gradient(#cdd8ff,#7d97e8);border-color:#e6ecff;box-shadow:0 0 14px #7896ff73}#overlay #levelBtn{display:flex;align-items:center;gap:12px;padding:8px 16px}#levelBtn .lbl{font-size:11px;color:#8a92ad}#levelBtn #levelCur{color:#ffd23c}#levelBtn .chev{color:#8a92ad}#levelList{display:flex;flex-direction:column;gap:10px;width:min(440px,86vw);max-height:58vh;overflow-y:auto;padding-right:6px;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#3a4468 transparent}#levelList button{flex:none}#overlay #levelList button{display:flex;align-items:center;gap:14px;text-align:left;font-size:14px;font-weight:700;letter-spacing:2px;color:#cdd8ff;background:#14182880;border:1px solid #3a4468;border-radius:8px;padding:12px 16px;box-shadow:none}#overlay #levelBack{background:#14182880}#overlay #levelList button:hover{border-color:#6f83c9;filter:none}#overlay #levelList button.selected{border-color:#ffd23c;box-shadow:0 0 14px #ffd23c4d}#levelList button.selected .title{color:#ffd23c}#levelList .num{flex:none;font-size:12px;line-height:1;color:#8a97b6;border:1px solid #4a5578;border-radius:4px;padding:3px 7px}#levelList button.selected .num{color:#ffd23c;border-color:#ffd23c}#levelList .info{display:flex;flex-direction:column;gap:3px}#levelList .desc{font-size:12px;font-weight:400;letter-spacing:normal;color:#8a92ad;line-height:1.4}.mpHidden{display:none!important}#mpBtn .lbl{font-size:11px;color:#8a92ad}#mpBtn .chev{color:#8a92ad}#overlay #mpBtn{display:flex;align-items:center;gap:12px;padding:8px 16px}#mpStatus{font-size:12px;letter-spacing:2px;color:#8a92ad;max-width:86vw}#mpNameRow{display:flex;gap:10px}#mpNameInput{font:inherit;font-size:14px;font-weight:700;letter-spacing:2px;color:#cdd8ff;background:#141828d9;border:1px solid #3a4468;border-radius:6px;padding:10px 14px;outline:none;width:200px;text-transform:uppercase;user-select:text}#mpNameInput:focus{border-color:#6f83c9}#overlay #mpJoinBtn{font-size:13px;letter-spacing:2px;padding:10px 18px}#mpList{display:flex;flex-direction:column;gap:10px;width:min(440px,86vw);max-height:46vh;overflow-y:auto;padding-right:6px;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#3a4468 transparent}.mpRow{display:flex;align-items:center;gap:14px;flex:none;background:#14182880;border:1px solid #3a4468;border-radius:8px;padding:10px 16px}.mpRow .name{flex:1;text-align:left;font-size:14px;font-weight:700;letter-spacing:2px;color:#cdd8ff}.mpRow .st{font-size:11px;letter-spacing:1px;color:#8a92ad}#overlay .mpRow button{font-size:12px;letter-spacing:2px;padding:7px 16px}.mpRow button:disabled{filter:grayscale(1) brightness(.6);cursor:default}#mpBanner{display:flex;align-items:center;gap:14px;max-width:86vw;background:#282008e6;border:1px solid #ffd23c;border-radius:8px;padding:12px 18px;font-size:13px;letter-spacing:1px;color:#ffe8a0}#overlay #mpBanner button{font-size:12px;letter-spacing:2px;padding:7px 14px}#overlay button.ghost{padding:7px 14px;font-size:12px}#matchInfo{text-align:center;line-height:1.6}#matchInfo .vs{font-size:18px;font-weight:800;letter-spacing:3px;color:#ffd23c}#matchInfo .sub{font-size:12px;letter-spacing:1px;color:#8a92ad;margin-top:6px}body.team-red #baseBlue{color:#ff9f9f}body.team-red #baseRed{color:#9fc4ff}body.team-red #baseBlue .fill{background:linear-gradient(90deg,#ff4a3d,#ff9a7d)}body.team-red #baseRed .fill{background:linear-gradient(90deg,#3d7bff,#7db5ff)}#errOverlay{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:#06060ce6}#errOverlay h1{margin:0;font-size:26px;letter-spacing:3px;font-weight:800;font-style:italic;color:#ff8a7a;text-shadow:0 0 18px rgba(255,80,64,.45),2px 2px 0 #000}#errOverlay .errHint{margin:0;max-width:560px;line-height:1.7;font-size:14px;color:#cdd6ee}#errOverlay .errDetail{margin:0;max-width:min(720px,90vw);max-height:30vh;overflow:auto;background:#141828d9;border:1px solid #3a4468;border-radius:10px;padding:14px 18px;font:12px/1.6 ui-monospace,Menlo,Consolas,monospace;color:#9fb4ff;text-align:left;white-space:pre-wrap;word-break:break-word;user-select:text}#errOverlay .errMore{font-size:12px;color:#8a92ad;min-height:1em}#errOverlay .errBtns{display:flex;gap:12px}#errOverlay button{font:inherit;font-weight:800;letter-spacing:3px;font-size:14px;color:#111;background:linear-gradient(#ffe27a,#f5a623);border:2px solid #fff2c0;border-radius:8px;padding:10px 26px;cursor:pointer;box-shadow:0 0 22px #f5a62359}#errOverlay button.ghost{color:#cdd6ee;background:#141828cc;border-color:#3f4c74;box-shadow:none}#errOverlay button:hover{filter:brightness(1.1)}
