html,body,#root{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#070a12;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#dfe8ff;-webkit-user-select:none;user-select:none}#game-root{position:fixed;inset:0}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#ui-overlay{position:absolute;inset:0;pointer-events:none}#ui-overlay .overlay,#ui-overlay .overlay *{pointer-events:auto}.crosshair{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#e8f6ff;box-shadow:0 0 4px #22e0ff,0 0 1px #fff}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#e8f6ffd9;box-shadow:0 0 3px #22e0ff}.crosshair:before{left:-7px;top:1px;width:18px;height:2px}.crosshair:after{left:1px;top:-7px;width:2px;height:18px}.hitmark{position:absolute;left:-9px;top:-9px;width:22px;height:22px;opacity:0;pointer-events:none}.hitmark.on{animation:hitpop .22s ease-out}.hitmark:before,.hitmark:after{content:"";position:absolute;left:10px;top:0;width:2px;height:22px;background:#ffd23d}.hitmark:before{transform:rotate(45deg)}.hitmark:after{transform:rotate(-45deg)}@keyframes hitpop{0%{opacity:1;transform:scale(1.3)}to{opacity:0;transform:scale(.8)}}.hud-bl{position:absolute;left:28px;bottom:22px;display:grid;grid-template-columns:auto auto;column-gap:26px;align-items:end}.hud-bl .hp,.hud-bl .armor{font-size:52px;font-weight:800;line-height:1;text-shadow:0 0 14px rgba(34,224,255,.5);font-variant-numeric:tabular-nums}.hud-bl .hp{color:#7dffa8}.hud-bl .hp.low{color:#ff4d5e;animation:pulse .8s infinite}.hud-bl .armor{color:#ffd23d}@keyframes pulse{50%{opacity:.55}}.hud-label{grid-row:2;font-size:11px;letter-spacing:2px;color:#8fa3c8}.hud-br{position:absolute;right:28px;bottom:22px;text-align:right}.hud-br .ammo{font-size:52px;font-weight:800;line-height:1;color:#dfe8ff;text-shadow:0 0 14px rgba(255,138,42,.5);font-variant-numeric:tabular-nums}.hud-br .ammo.low{color:#ff4d5e}.hud-br .hud-label{font-size:13px}.hud-tc{position:absolute;top:16px;left:50%;transform:translate(-50%);text-align:center}.hud-tc .timer{font-size:26px;font-weight:700;letter-spacing:2px;font-variant-numeric:tabular-nums}.hud-tc .frags{margin-top:2px;font-size:12px;letter-spacing:1.5px;color:#9db1d6}.killfeed{position:absolute;top:16px;left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px}.killrow{background:#0a0e1ab8;border:1px solid rgba(120,150,220,.18);border-radius:4px;padding:3px 10px;animation:feedin .25s ease-out,feedout .6s ease-in 5.5s forwards}@keyframes feedout{to{opacity:0;transform:translate(-10px)}}@keyframes feedin{0%{transform:translate(-14px);opacity:0}}.killrow .me{color:#ff9d3d;font-weight:700}.killrow .bot{color:#8fd8ff}.killrow .wep{color:#68789c;margin:0 6px}.center-msg{position:absolute;top:30%;left:50%;transform:translate(-50%);font-size:44px;font-weight:900;letter-spacing:6px;color:#fff;text-shadow:0 0 24px #22e0ff;animation:msgpop .4s ease-out}@keyframes msgpop{0%{transform:translate(-50%) scale(1.6);opacity:0}}.hurt-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px 40px #ff283c8c;animation:hurtfade .5s ease-out forwards}@keyframes hurtfade{0%{opacity:1}to{opacity:0}}.scoreboard{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:380px;background:#080c18e0;border:1px solid rgba(120,150,220,.3);border-radius:10px;padding:18px 22px}.scoreboard.inline{position:static;transform:none;margin:14px 0;background:#080c1880}.sb-title{font-size:13px;letter-spacing:3px;color:#8fa3c8;margin-bottom:10px;text-align:center}.sb-row{display:grid;grid-template-columns:24px 14px 1fr 52px 52px;align-items:center;gap:8px;padding:4px 6px;border-radius:4px;font-size:15px}.sb-row.me{background:#ff9d3d1f}.sb-rank{color:#68789c;font-size:12px}.sb-dot{width:10px;height:10px;border-radius:50%}.sb-frags{text-align:right;font-weight:800;color:#7dffa8}.sb-deaths{text-align:right;color:#ff8896}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.overlay.dim{background:#04060c8c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.menu{display:flex;flex-direction:column;gap:12px;align-items:center;background:#080c18d1;border:1px solid rgba(120,150,220,.3);border-radius:14px;padding:38px 54px;box-shadow:0 0 60px #22e0ff1f}.menu h1.title{margin:0;font-size:42px;font-weight:900;letter-spacing:3px;text-align:center;color:#ff9d3d;text-shadow:0 0 30px rgba(255,157,61,.6)}.menu h1.title .vs{color:#8fa3c8;font-size:22px;font-weight:400}.menu h2{margin:0;font-size:30px;letter-spacing:4px}.menu h2.win{color:#7dffa8;text-shadow:0 0 24px rgba(81,255,122,.6)}.menu h2.lose{color:#ff5c5c;text-shadow:0 0 24px rgba(255,92,92,.6)}.subtitle{font-size:13px;letter-spacing:4px;color:#8fa3c8;margin-bottom:10px}.btn{min-width:260px;padding:12px 30px;font-size:17px;font-weight:700;letter-spacing:2px;color:#dfe8ff;background:#1e2842d9;border:1px solid rgba(120,150,220,.4);border-radius:8px;cursor:pointer;transition:all .12s}.btn:hover{background:#324268f2;border-color:#22e0ff;box-shadow:0 0 18px #22e0ff59}.btn.primary{background:linear-gradient(180deg,#ff9d3d,#e06f14);border-color:#ffb86b;color:#1a0e02}.btn.primary:hover{box-shadow:0 0 26px #ff9d3d8c;background:linear-gradient(180deg,#ffae55,#f07c1c)}.hint{margin-top:12px;font-size:12.5px;line-height:1.8;color:#7488b0;text-align:center}.menu.settings{min-width:460px;align-items:stretch}.menu.settings h2{text-align:center;margin-bottom:8px}.menu.settings .row{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#b9c8e8}.menu.settings .row.check{flex-direction:row;justify-content:space-between;align-items:center}.menu.settings input[type=range]{width:100%;accent-color:#ff9d3d}.menu.settings input[type=checkbox]{width:20px;height:20px;accent-color:#ff9d3d}.seg{display:flex;gap:8px}.segbtn{flex:1;padding:8px;background:#1e2842d9;border:1px solid rgba(120,150,220,.4);border-radius:6px;color:#b9c8e8;cursor:pointer;font-weight:600}.segbtn.on{background:#ff9d3d40;border-color:#ff9d3d;color:#ffcf9a}.menu.settings .btn{align-self:center;margin-top:8px}.touch-controls{display:none}@media(any-pointer:coarse),(hover:none){.touch-controls{position:absolute;inset:0;display:block;z-index:10;pointer-events:none;user-select:none;-webkit-user-select:none}.touch-controls .touch-button,.touch-stick,.touch-look{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}.touch-look{position:absolute;inset:0 0 0 45%}.touch-top{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));display:flex;gap:8px}.touch-button{min-width:56px;min-height:48px;padding:8px;color:#e8f6ff;font:600 12px system-ui,sans-serif;border:1px solid #8fcfff88;border-radius:14px;background:#14213ac7;text-shadow:0 1px 2px #000}.touch-button:active{background:#3a659fdd}.touch-stick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(100px,calc(env(safe-area-inset-bottom) + 100px));width:112px;height:112px;display:grid;place-items:center;border:1px solid #8fcfff66;border-radius:50%;background:#14213a66}.touch-stick-knob{width:42px;height:42px;border:1px solid #c0e5ffbb;border-radius:50%;background:#8fcfff55;pointer-events:none}.touch-stick-label{position:absolute;top:116px;font-size:11px}.touch-actions{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(100px,calc(env(safe-area-inset-bottom) + 100px));display:grid;grid-template-columns:repeat(2,62px);gap:8px}.touch-fire{grid-column:1 / -1;min-height:58px;border-color:#ff9d3d;background:#613710b8}.touch-look-label{position:absolute;bottom:max(280px,calc(env(safe-area-inset-bottom) + 280px));right:18px;font-size:11px;color:#c7daf6}.hint{font-size:12px}.hud-tc{top:max(68px,calc(env(safe-area-inset-top) + 68px))}.killfeed{top:126px;max-width:75vw;font-size:11px}.menu{max-height:85dvh;overflow-y:auto;box-sizing:border-box}.scoreboard{max-width:calc(100vw - 24px);box-sizing:border-box}}@media(any-pointer:coarse)and (max-height:500px),(hover:none)and (max-height:500px){.touch-stick{bottom:max(75px,env(safe-area-inset-bottom));width:100px;height:100px}.touch-stick-label{top:103px}.touch-actions{bottom:max(75px,env(safe-area-inset-bottom));grid-template-columns:repeat(3,60px);gap:5px}.touch-fire{grid-column:auto;grid-row:span 2}.touch-look-label{bottom:192px}.touch-top{left:max(12px,env(safe-area-inset-left))}.hud-tc{top:10px}.killfeed{top:58px}}.touch-menu-hint{display:none}@media(any-pointer:coarse),(hover:none){.desktop-hint{display:none}.touch-menu-hint{display:block}}