*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#142b35;color:#fff;font-family:Arial,Helvetica,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.55;cursor:wait}.hidden{display:none!important}#gameCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}#menuScreen{position:absolute;inset:0;z-index:20;background:linear-gradient(90deg,#081c28f5 0%,#102935d9 40%,#10293522 100%);display:flex;align-items:center;padding:6vw}.menu-box{width:385px;max-width:100%}.menu-kicker{position:absolute;top:30px;left:6vw;font-size:11px;letter-spacing:3px;color:#b1c7c8}.menu-eyebrow{font-size:10px;letter-spacing:2.5px;color:#f4be59;margin-bottom:12px}h1{font-size:76px;line-height:1;font-style:italic;letter-spacing:-5px;white-space:nowrap}h1 span{color:#ffc44e}.menu-subtitle{letter-spacing:3.8px;font-weight:bold;font-size:11px;margin:15px 0 22px}.menu-description{font-size:13px;line-height:1.6;color:#acc5cc;margin-bottom:24px;max-width:300px}.menu-box label{display:block;font-size:10px;letter-spacing:1.5px;color:#a9c0c7;margin-bottom:8px}input{border:1px solid #4a626c;background:#071e2bc9;border-radius:3px;padding:13px 15px;width:100%;color:white;outline:none;user-select:text}input:focus{border-color:#ffc34e}#btnPlay,#btnPlayAgain{width:100%;border:0;background:#ffc34e;color:#172934;padding:16px 22px;margin-top:14px;font-weight:900;letter-spacing:2px;text-align:left;box-shadow:0 5px 25px #ffb73318}#btnPlay span{float:right;font-size:22px;line-height:17px}#connectionStatus{display:flex;align-items:center;gap:8px;font-size:11px;color:#9fb7bc;margin:15px 0}.dot{width:5px;height:5px;background:#9de3af;border-radius:100%}details{font-size:11px;color:#8ea8b0}details input{margin-top:10px;padding:8px;font-size:11px}summary{cursor:pointer}.menu-controls{font-size:10px;line-height:1.8;color:#7f9ca7;margin-top:20px}.menu-footer{position:absolute;bottom:22px;left:6vw;right:6vw;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px;color:#92aab5}.menu-footer b{color:white;letter-spacing:0}#utility{position:absolute;top:12px;right:14px;z-index:40;display:flex;gap:6px}#utility button{background:#0c2431aa;border:1px solid #b8d3de44;padding:5px 9px;font-size:9px;letter-spacing:1px;border-radius:3px;min-height:28px}#hudOverlay{position:absolute;inset:0;z-index:10;pointer-events:none;text-shadow:0 1px 3px #071b28;overflow:hidden}.compass{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:350px;text-align:center}.compass-scale{display:flex;justify-content:space-between;color:#f4f9fcbb;font-size:11px;border-bottom:1px solid #fff3;padding-bottom:5px}.compass-scale span{width:30px}.heading{font-size:12px;line-height:24px;background:#0b243387;padding:3px 8px;border-radius:3px}.match-counters{position:absolute;top:16px;left:18px;display:flex;gap:1px;font-size:11px;font-weight:bold}.match-counters span{padding:7px 12px;background:#102431b8}.match-counters .kills{color:#ffc34e;border-left:2px solid #ffc34e}.net-status{position:absolute;top:51px;left:20px;color:#e1f4e1b3;font-size:9px}.minimap{position:absolute;top:55px;right:18px;width:142px;height:142px;border-radius:50%;border:3px solid #dde9e680;box-shadow:0 4px 16px #0005;pointer-events:none}.minimap.expanded{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:min(75vw,75vh);height:min(75vw,75vh);border-radius:12px;background:#143444;z-index:50}.zone-timer{position:absolute;right:16px;top:206px;font-size:9px;background:#102b3ba8;padding:7px;border-left:2px solid #f6c159}.kill-feed{position:absolute;left:18px;top:80px;font-size:11px;max-width:320px}.kill-feed div{padding:6px 9px;margin:3px 0;background:#102735ad;border-left:2px solid #7898a3}.kill-feed div.own{border-color:#ffc34e;color:#ffe7aa}.kill-feed b{color:#ffc34e}.kill-feed small{font-size:8px;color:#b4cad2;margin-left:8px}.vitals{position:absolute;bottom:57px;left:50%;transform:translateX(-50%);width:260px}.hp-label{font-size:10px;font-weight:bold;margin-bottom:4px}.health-track,.armor-track{height:7px;background:#102936bb;border:1px solid #fff4;transform:skew(-12deg);overflow:hidden}.health-track i,.armor-track i{display:block;height:100%;background:#f5faf2;width:100%;transition:width .15s}.armor-track{height:4px;margin-top:3px}.armor-track i{background:#69ccef;width:0}.armor-label{font-size:8px;margin-top:6px;color:#c8dfe5}.weapon-panel{position:absolute;bottom:50px;right:18px;text-align:right}.weapon-name{font-size:13px;font-weight:bold;letter-spacing:2px;color:#ffc34e}.ammo b{font-size:32px;font-weight:900}.ammo span{font-size:15px;color:#ccdce4}.inventory{font-size:8px;color:#c4d3d9;line-height:22px}.weapon-slots{display:flex;gap:4px;margin-top:5px}.weapon-slots button{border:1px solid #fff4;background:#0c2637a1;padding:8px 13px;color:#c6d4db;font-size:10px;pointer-events:auto;min-width:95px}.weapon-slots .active{border-color:#f3bf5d;color:#ffda88;background:#694e2687}.crosshair{position:absolute;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%)}.crosshair i{position:absolute;background:#fff;box-shadow:0 0 2px #0009}.crosshair i:nth-child(1){height:7px;width:2px;top:0;left:13px}.crosshair i:nth-child(2){height:7px;width:2px;bottom:0;left:13px}.crosshair i:nth-child(3){width:7px;height:2px;left:0;top:13px}.crosshair i:nth-child(4){width:7px;height:2px;right:0;top:13px}.crosshair b{position:absolute;left:13px;top:13px;width:2px;height:2px;background:#fff}.crosshair.ads{width:14px;height:14px}.crosshair.ads i{display:none}.crosshair.ads b{left:6px;top:6px}.hit-marker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:45px;font-weight:200;opacity:0}.damage-arrow{position:absolute;top:50%;left:50%;color:#ff554c;font-size:30px;opacity:0;text-shadow:0 0 15px #f22}.state-banner{position:absolute;top:20%;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}.state-banner small{display:block;font-size:9px;letter-spacing:3px;color:#ffe2a5}.state-banner strong{display:block;font-size:24px;font-style:italic;letter-spacing:2px;margin:5px}.state-banner span{display:block;font-size:11px;background:#1025319c;border-bottom:2px solid #ffbf4b;padding:10px 16px}.pickup-prompt{position:absolute;left:50%;bottom:23%;transform:translateX(-50%);font-size:12px;color:#ffdb86;background:#102531b3;padding:8px 14px;border-radius:3px}.pickup-prompt:empty,.progress:empty,.notice:empty{display:none}.progress{position:absolute;left:50%;top:59%;transform:translateX(-50%);font-size:12px;color:#ffe4a2;background:#112c3dd9;padding:12px}.zone-warning{position:absolute;top:15%;left:50%;transform:translateX(-50%);color:#ffca72;background:#7b3029a6;padding:9px 16px;font-size:11px;display:none}.spectate-banner{position:absolute;bottom:22%;left:50%;transform:translateX(-50%);background:#0b2330cf;border-top:2px solid #ffc34e;max-width:85vw;padding:12px 18px;font-size:11px;text-align:center}.spectate-banner:empty{display:none}.controls-help{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:9px;color:#d9e5e4aa;white-space:nowrap}.notice{position:absolute;left:50%;top:42%;transform:translateX(-50%);background:#2b3446d9;padding:10px;font-size:12px}[data-phase=lobby] .crosshair,[data-phase=lobby] .weapon-panel,[data-phase=lobby] .vitals,[data-phase=lobby] .minimap,[data-phase=lobby] .zone-timer{display:none}[data-phase=lobby] .state-banner{top:35%}#touchControls{position:absolute;inset:0;z-index:15;pointer-events:none}#cameraArea{position:absolute;inset:0 0 0 40%;pointer-events:auto;touch-action:none}#joystickArea{position:absolute;bottom:26px;left:28px;width:126px;height:126px;border:1px solid #edf8ff70;background:#edf8ff0d;border-radius:50%;pointer-events:auto;touch-action:none}#joystickArea:before{content:'';position:absolute;inset:20%;border:1px dashed #fff3;border-radius:50%}#joystickThumb{position:absolute;left:50%;top:50%;width:48px;height:48px;background:#e6f5ff50;border:2px solid #fff9;border-radius:50%;transform:translate(-50%,-50%)}.touch-btn{position:absolute;border:1px solid #f4f9fc88;background:#183c505e;color:#fff;border-radius:50%;width:44px;height:44px;font-size:20px;pointer-events:auto;touch-action:none;text-shadow:0 1px 4px #0006}.touch-btn:active{background:#ffc34e88}#btnFire{right:25px;bottom:94px;width:74px;height:74px;font-size:44px;background:#ffffff20;border:2px solid #fff9}#btnJump{right:108px;bottom:27px;width:58px;height:48px;font-size:12px;font-weight:bold}#btnCrouch{right:27px;bottom:22px}#btnReload{right:112px;bottom:164px}#btnAds{right:112px;bottom:105px}#btnHeal{left:173px;bottom:27px}#btnGrenade{left:173px;bottom:83px;font-size:13px}#btnPickup{left:50%;bottom:24%;transform:translateX(-50%);width:110px;border-radius:4px;background:#c89238a8;font-size:11px}#btnMap{right:22px;top:58px;width:42px;height:28px;font-size:9px;border-radius:3px}.touch .weapon-panel{top:50px;bottom:auto;right:182px}.touch .weapon-slots button{min-width:70px;padding:6px;font-size:9px}.touch .ammo b{font-size:25px}.touch .inventory{font-size:7px}.touch .vitals{bottom:20px;width:210px}.touch .pickup-prompt{bottom:36%}.touch .minimap{width:110px;height:110px}.touch .zone-timer{top:174px}.touch .minimap.expanded{width:min(75vw,75vh);height:min(75vw,75vh)}#endScreen{position:absolute;inset:0;z-index:30;background:radial-gradient(ellipse at 50% 30%,#283a39f5,#071d2bf8);display:flex;align-items:center;justify-content:center}.end-box{text-align:center;max-width:90vw;width:440px}.end-box small{font-size:10px;letter-spacing:4px;color:#d0b987}.end-box h2{font-size:40px;font-style:italic;letter-spacing:2px;margin:10px 0;color:#d8e6e9}.end-box h2.booyah{font-size:65px;color:#ffc34e;text-shadow:0 0 40px #ffb60035}#endPlacement{font-size:26px;font-weight:bold;margin-bottom:20px}#endKills{font-size:14px;letter-spacing:2px;color:#ffc34e}#endDamage{font-size:11px;line-height:1.7;color:#aac4cb;margin:15px 0}#btnPlayAgain{text-align:center} @media(max-height:450px){.menu-box{width:340px}h1{font-size:52px}.menu-description,.menu-controls,.menu-kicker{display:none}.menu-subtitle{margin:8px 0 14px}.menu-eyebrow{margin-bottom:5px}.menu-footer{bottom:10px}#connectionStatus{margin:9px 0}.compass{width:250px}.state-banner{top:23%}.state-banner strong{font-size:20px}.kill-feed{max-width:255px;font-size:9px}.touch .vitals{bottom:18px;width:180px}.vitals{bottom:50px;width:210px}} @media(max-width:600px) and (orientation:portrait){#menuScreen{padding:28px}.menu-kicker{left:28px;top:55px;font-size:9px;letter-spacing:2px}.menu-box{width:100%}h1{font-size:68px}.menu-description{max-width:280px}.menu-footer{left:28px;right:28px}.menu-footer span{max-width:160px;font-size:7px;text-align:right;line-height:1.7}.compass{top:78px;width:240px}.minimap,.touch .minimap{top:115px;right:12px;width:96px;height:96px}.zone-timer,.touch .zone-timer{top:218px;right:12px;font-size:8px}.touch .weapon-panel{top:115px;left:14px;right:auto;text-align:left}.touch .weapon-slots{flex-direction:column;gap:4px}.touch .inventory{max-width:140px;font-size:7px}.touch .weapon-slots button{max-width:120px}.match-counters{top:47px;left:14px}.net-status{top:19px;left:14px}.kill-feed{top:250px;left:14px;font-size:9px;max-width:245px}.state-banner{top:37%;max-width:95vw}.state-banner strong{font-size:20px}.state-banner span{font-size:9px}.touch .vitals{bottom:210px;width:220px}#joystickArea{bottom:35px;left:18px;width:110px;height:110px}#btnFire{right:20px;bottom:104px;width:66px;height:66px}#btnJump{right:93px;bottom:38px;width:52px}#btnReload{right:99px;bottom:176px}#btnAds{right:99px;bottom:113px}#btnHeal{left:147px;bottom:42px}#btnGrenade{left:147px;bottom:99px}#btnMap{top:119px;right:14px}.touch .pickup-prompt{bottom:41%;font-size:10px}.spectate-banner{bottom:42%;width:85vw;font-size:10px}.zone-warning{top:32%;font-size:9px;white-space:nowrap}.touch .minimap.expanded{top:50%;left:50%;width:90vw;height:90vw}.end-box h2{font-size:30px}.end-box h2.booyah{font-size:52px}}
/* Interactive inventory stays above the touch look surface. */
#hudOverlay{z-index:20}#menuScreen{z-index:30}#endScreen{z-index:40}#utility{z-index:50}
.spectate-leave{position:absolute;bottom:14%;left:50%;transform:translateX(-50%);padding:9px 18px;background:#ffc34e;color:#112e3d;border:0;font-size:10px;font-weight:bold;letter-spacing:1px;pointer-events:auto;z-index:25}@media(max-width:600px) and (orientation:portrait){.spectate-leave{bottom:35%}}
@media(max-height:450px){.spectate-banner{bottom:32%}.spectate-leave{bottom:22%}}
/* Round 2: character lobby and persistent options. */
select{font:inherit;background:#123c50;color:#fff;border:1px solid #5d8ca1;border-radius:3px;padding:9px;width:100%;margin-bottom:9px;touch-action:auto}
#menuScreen{background:linear-gradient(90deg,#082239eb 0%,#082239ce 30%,#08223905 58%,#08223930);padding:5vw}.menu-box{width:305px}.menu-description{margin-bottom:14px}h1{font-size:65px}.menu-subtitle{letter-spacing:2px;margin:12px 0}.menu-controls{margin-top:9px}.mode-selector{display:flex;gap:5px;margin:10px 0}.mode-selector button{font-size:9px;border:1px solid #547180;background:#092c40;padding:9px}.mode-selector .active{color:#ffce4b;border-color:#ffce4b}.mode-selector button:disabled{cursor:default}.hero-caption{position:absolute;left:66%;bottom:15%;transform:translateX(-50%);text-align:center;text-shadow:0 2px 5px #102533}.hero-caption b{display:block;font-size:22px;font-style:italic;color:#ffe4a0}.hero-caption span{font-size:8px;letter-spacing:2px}.settings{position:absolute;top:55px;right:18px;width:220px;background:#092e47ed;border:1px solid #85c6db66;padding:12px;z-index:4}.settings label{display:block;margin-top:12px;font-size:11px}.settings input{padding:5px;accent-color:#ffcd48;touch-action:auto}.settings select{margin-top:7px}.settings:not([open]){width:auto;background:#092e4799}.menu-kicker{left:5vw}
@media(max-height:450px){#menuScreen{padding:20px 5vw}.menu-box{width:275px}h1{font-size:38px}.menu-subtitle{margin:5px 0 8px;font-size:9px}.menu-box input{padding:8px}.menu-box label{margin-bottom:4px}#btnPlay{padding:11px;margin-top:5px}.mode-selector{margin:6px 0}.mode-selector button{padding:6px}.menu-box select{padding:6px;margin-bottom:2px}#connectionStatus{margin:6px 0;font-size:9px}.menu-footer{display:none}.hero-caption{bottom:10%}.hero-caption b{font-size:17px}}
@media(max-width:600px) and (orientation:portrait){#menuScreen{background:linear-gradient(0deg,#082239fa 0%,#082239dd 47%,#08223900 80%);align-items:flex-end;padding:22px 25px 42px}.menu-box{width:100%}.menu-kicker{top:58px;left:25px}.menu-description,.menu-controls,.menu-eyebrow{display:none}h1{font-size:44px}.menu-subtitle{font-size:9px;margin:5px 0 12px}.hero-caption{display:none}.menu-footer{display:none}.settings{top:52px;right:12px}.menu-box input{padding:10px}.menu-box select{padding:8px}#btnPlay{margin-top:5px;padding:13px}}
.scope{display:none;position:absolute;left:50%;top:50%;width:72vmin;height:72vmin;border:3px solid #172c2b;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 150vmax #020b10fa,inset 0 0 22px #041b3688;z-index:-1}.scope.visible{display:block}.scope:before,.scope:after{content:'';position:absolute;background:#101915}.scope:before{width:100%;height:1px;top:50%}.scope:after{height:100%;width:1px;left:50%}.scope i{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:#e74332;transform:translate(-50%,-50%);z-index:2}.scope b{position:absolute;top:55%;height:22%;left:50%;width:20px;background:repeating-linear-gradient(0deg,transparent 0 14px,#182923 14px 15px);transform:translateX(-50%)}.scope span{position:absolute;bottom:12%;left:48%;font-size:10px}.scope.visible~.hit-marker{z-index:3}.crosshair i:nth-child(1){top:calc(0px - var(--spread,0px))}.crosshair i:nth-child(2){bottom:calc(0px - var(--spread,0px))}.crosshair i:nth-child(3){left:calc(0px - var(--spread,0px))}.crosshair i:nth-child(4){right:calc(0px - var(--spread,0px))}.loot-labels span{position:absolute;transform:translate(-50%,-100%);padding:4px 6px;border-bottom:2px solid;background:#09263ec9;font-size:10px;font-weight:bold;white-space:nowrap}.loot-labels small{color:#fff;font-size:8px}.damage-numbers b{position:absolute;top:46%;font-size:24px;color:#ffe066;text-shadow:1px 2px 2px #172333;animation:floatDamage .85s ease-out forwards;z-index:4}.damage-numbers .critical{color:#ff5945;font-size:30px}.killer-card{display:none;position:absolute;top:33%;left:50%;transform:translateX(-50%);background:#092334e8;border-top:3px solid #ffb940;padding:18px;max-width:90vw;text-align:center;font-size:14px;z-index:5}.killer-card.visible{display:block}@keyframes floatDamage{to{transform:translateY(-65px);opacity:0}}
@media(max-width:600px) and (orientation:portrait){.touch .vitals{bottom:234px}#btnPickup{bottom:35%}.touch .pickup-prompt{bottom:42%}}