*{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}.kill-gun{display:inline-flex;align-items:center;vertical-align:middle;margin:0 4px}.kill-gun svg{width:22px;height:10px;fill:#ffc34e;filter:drop-shadow(0 1px 2px #000)}.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}.dual-gear-track{display:flex;gap:3px;margin-top:3px}.dual-gear-track .armor-track,.dual-gear-track .helmet-track{flex:1;height:5px;background:#102936bb;border:1px solid #fff3;transform:skew(-12deg);overflow:hidden}.armor-track i{display:block;height:100%;background:#69ccef;width:0;transition:width .15s}.helmet-track i{display:block;height:100%;background:#ffd15a;width:0;transition:width .15s}.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:58%;transform:translateX(-50%);min-width:210px;background:#0d2330ea;border:1px solid #ffc34e88;border-radius:4px;padding:6px 10px;box-shadow:0 4px 18px #0008;pointer-events:none;z-index:25}.progress-bar{position:relative;height:16px;background:#071822cc;border-radius:2px;overflow:hidden;display:flex;align-items:center;justify-content:center}.progress-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#ff9800,#ffc34e);transition:width .1s linear}.progress-bar span{position:relative;z-index:1;font-size:9px;font-weight:bold;letter-spacing:1px;color:#fff;text-shadow:0 1px 2px #000}.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}
#btnVehicle{left:172px;bottom:139px;width:58px;height:42px;border-radius:5px;font-size:9px;font-weight:900;letter-spacing:.4px;background:#355c42c9;border-color:#b9d789}
#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%}}
/* Squad action: stays clear of movement and firing controls on narrow screens. */
#btnRevive{left:50%;bottom:31%;transform:translateX(-50%);width:118px;height:42px;border-radius:4px;background:#4f9b68d9;border-color:#d4f1a7;font-size:10px;font-weight:900;letter-spacing:.7px;box-shadow:0 3px 15px #132b1baa}
#btnRevive:active{background:#83bd61}
#btnMark{left:172px;bottom:195px;width:58px;height:42px;border-radius:5px;background:#755c2fc9;border-color:#f4d577;font-size:8px;font-weight:900;letter-spacing:.3px}
@media(max-width:600px) and (orientation:portrait){#btnRevive{bottom:38%;width:112px;height:39px;font-size:9px}}
@media(max-width:600px) and (orientation:portrait){#btnMark{left:147px;bottom:158px;width:56px;height:39px}}
/* Compact, readable squad health without covering the minimap or touch controls. */
.squad-panel{position:absolute;top:75px;left:18px;width:138px;background:#0a2635c7;border-left:2px solid #80b9c6;padding:7px 8px;font-size:9px}.squad-panel>small{display:block;color:#a9dbe5;letter-spacing:1.4px;font-size:8px;margin-bottom:4px}.squad-member{display:grid;grid-template-columns:1fr 25px;gap:2px 5px;align-items:center;margin-top:4px}.squad-member b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.squad-member i{grid-column:1/2;height:3px;background:#173d4c;overflow:hidden}.squad-member i em{display:block;height:100%;background:#75c67f}.squad-member span{grid-column:2;grid-row:1/3;font-size:7px;color:#d9e9eb;text-align:right}.squad-member.downed i em{background:#e5ad49}.squad-member.downed span{color:#ffd484}.squad-member.dead{opacity:.45}.squad-member.dead i em{width:0!important;background:#bf5c57}.squad-member.dead span{color:#f49a91}@media(max-width:600px) and (orientation:portrait){.squad-panel{top:74px;left:13px;width:122px;font-size:8px}.squad-member b{font-size:8px}.squad-member{margin-top:3px}.touch .squad-panel{top:243px;left:13px}}
/* El código se expande por elección del jugador; el menú permite desplazarlo. */
#menuScreen{overflow-y:auto}.friends-room{font-size:10px;margin:8px 0;color:#c6dce6}.friends-room summary{cursor:pointer;padding:5px 0}.friends-room label{margin-top:8px;font-size:8px}.friends-room input{text-transform:uppercase}.friends-room small{display:block;margin:5px 0;line-height:1.4;color:#b5d0da}
@media(max-height:450px){.friends-room{margin:2px 0;font-size:9px}.friends-room summary{padding:2px 0}}
/* Giro del operador desde la vista libre, sin cubrir formulario ni ajustes. */
.hero-turn{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}.hero-turn button{border:1px solid #aec6cd55;background:#0a293dcc;border-radius:50%;width:36px;height:36px;font-size:22px}.hero-turn small{font-size:8px;color:#d4e3e9;letter-spacing:1px}.hero-drag-hint{display:none}
@media(max-width:600px) and (orientation:portrait){.hero-drag-hint{display:block;position:absolute;top:88px;left:25px;font-size:8px;letter-spacing:1.2px;color:#d2e4e8;text-shadow:0 1px 3px #102b35;pointer-events:none}}
.operator-info{display:block;max-width:340px;font-size:9px;line-height:1.4;color:#c4d6dc;margin:-2px 0 8px;min-height:27px}
#btnAbility{left:240px;bottom:28px;width:62px;height:43px;border-radius:5px;background:#3e516bd9;border-color:#a9c9ee;font-size:9px;font-weight:bold;padding:3px}
#btnAbility:disabled{opacity:.6;cursor:default}.ability-status{position:absolute;left:18px;bottom:18px;font-size:10px;color:#b9d5ee}.touch .ability-status{display:none}
@media(max-height:450px){.operator-info{font-size:8px;line-height:1.25;margin-bottom:4px;min-height:23px}}
@media(max-width:600px) and (orientation:portrait){#btnAbility{left:20px;bottom:174px;width:63px;height:42px}.operator-info{font-size:9px;min-height:27px}}
/* Dejar separación entre subir, habilidad y marcador en teléfonos verticales. */
@media(max-width:600px) and (orientation:portrait){#btnVehicle{left:94px;bottom:174px;width:48px;height:42px}}
#touchControls.conduciendo :is(#btnFire,#btnAds,#btnJump,#btnReload,#btnHeal,#btnGrenade,#btnCrouch,#btnProne,#btnSprint,#btnAbility){display:none}
/* Símbolos vectoriales propios: no dependen de glifos instalados en el teléfono. */
#btnFire svg{width:62%;height:62%;vertical-align:middle}#btnFullscreen svg{width:14px;height:14px;vertical-align:middle}
#btnFire svg,#btnFullscreen svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* Free Legacy: disposición horizontal medida en Samsung, dibujo e interfaz propios. */
@media (orientation:landscape){
#hudOverlay,#touchControls{--edge:max(10px,env(safe-area-inset-left));--map:clamp(116px,15vw,220px);--control:clamp(44px,4.2vw,66px)}
#hudOverlay .minimap{left:var(--edge);right:auto;top:10px;width:var(--map);height:var(--map);border-radius:0;border:2px solid #dce8dc99;box-shadow:0 2px 9px #07161d80}
#hudOverlay .minimap.expanded{left:50%;top:50%;width:min(80vh,70vw);height:min(80vh,70vw);transform:translate(-50%,-50%);z-index:55}
#hudOverlay .net-status{left:var(--edge);top:calc(var(--map) + 15px);font-size:clamp(8px,.75vw,12px);color:#c3eadc;background:#10202585;padding:3px 5px}
#hudOverlay .compass{top:9px;width:clamp(210px,29vw,450px)}
#hudOverlay .compass-scale{font-size:clamp(9px,.85vw,14px)}
#hudOverlay .heading{font-size:clamp(11px,1vw,16px);background:transparent}
#hudOverlay .match-counters{left:auto;right:68px;top:10px;gap:2px;font-size:clamp(15px,1.65vw,26px);font-variant-numeric:tabular-nums}
#hudOverlay .match-counters span{padding:5px 9px;background:#0b202bb3;border:0;letter-spacing:.5px}
#hudOverlay .match-counters .alive{color:#6ce9f3;border-top:2px solid #6ce9f3}
#hudOverlay .match-counters .kills{color:#ff6966;border-top:2px solid #ff6966}
.hud-settings{position:absolute;right:12px;top:9px;width:44px;height:44px;background:#10263099;border:1px solid #dae4e755;font-size:24px;pointer-events:auto}
.hud-options{position:absolute;right:12px;top:58px;background:#102630ed;padding:8px;z-index:60;pointer-events:auto;border:1px solid #ffffff55;display:flex;gap:6px}
.hud-options button{min-height:44px;padding:8px;background:#233d49;border:1px solid #ffffff55;font-size:11px}
#hudOverlay .weapon-panel{top:clamp(55px,8vh,65px);right:14px;bottom:auto;width:clamp(210px,23vw,350px);text-align:right;background:linear-gradient(90deg,transparent,#0b202b80);padding:4px 7px}
#hudOverlay .weapon-name{font-size:clamp(11px,1.05vw,17px);letter-spacing:1px;color:white;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hudOverlay .ammo{line-height:1.1}
#hudOverlay .ammo b{font-size:clamp(28px,3vw,46px);font-variant-numeric:tabular-nums}
#hudOverlay .ammo span{font-size:clamp(12px,1.2vw,18px)}
#hudOverlay .inventory{font-size:clamp(8px,.65vw,11px);line-height:18px;color:#cedde3}
#hudOverlay .weapon-slots{gap:4px;margin-top:3px;align-items:stretch}
#hudOverlay .weapon-slots button{min-width:0;min-height:44px;flex:1;padding:4px 5px 8px;position:relative;background:#10253085;border:1px solid #e6edef55;color:#fff;display:grid;grid-template-columns:1fr auto;gap:0 3px;text-align:left;font-size:clamp(8px,.65vw,11px);touch-action:none}
#hudOverlay .weapon-slots button>span:not(.gun-icon){grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hudOverlay .weapon-slots .gun-icon{font-size:18px;line-height:12px;transform:skew(-15deg)}
#hudOverlay .weapon-slots b{grid-column:2;grid-row:1;font-size:11px}
#hudOverlay .weapon-slots i{position:absolute;left:5px;right:5px;bottom:3px;height:3px;background:linear-gradient(90deg,#fff var(--load),#ffffff30 var(--load))}
#hudOverlay .weapon-slots .active{background:#60777980;border-color:#fff;box-shadow:inset 0 0 0 1px #fff5}
#hudOverlay .weapon-slots button:disabled{opacity:.45;cursor:default}
.unarmed-slot{width:42px;display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:8px;color:#d3dfe3;border:1px solid #ffffff35;background:#10253065}.unarmed-slot b{font-size:20px!important}
#hudOverlay .supply-panel{position:absolute;left:var(--edge);top:43%;width:65px;text-align:center}
.backpack{border:1px solid #ffffff55;border-radius:8px 8px 2px 2px;background:#142d3780;padding:5px 2px;position:relative}
.backpack:before{content:'';position:absolute;top:-5px;left:35%;width:30%;height:5px;border:1px solid #ffffff88;border-bottom:0;border-radius:3px 3px 0 0}
.backpack span{display:block;font-size:8px;letter-spacing:.6px}.backpack b{font-size:20px;font-variant-numeric:tabular-nums}.backpack small{display:block;font-size:6px;line-height:1.4;color:#d7e3e8}
.medkit-count{font-size:14px;padding-top:7px;color:#e9f4ec}.medkit-count b{font-size:12px}
#hudOverlay .zone-timer{top:66px;left:50%;right:auto;transform:translateX(-50%) skew(-8deg);max-width:34vw;font-size:clamp(8px,.8vw,12px);border-left:3px solid #ffcf76;padding:6px 10px;background:#192932bc;white-space:nowrap}
#hudOverlay .zone-timer:before{content:'△ ';color:#ffcf76}
#hudOverlay .kill-feed{top:99px;left:50%;transform:translateX(-50%);width:30vw;max-width:390px;font-size:clamp(8px,.8vw,12px)}
#hudOverlay .kill-feed div{padding:3px 6px;background:#10273580}
#hudOverlay .squad-panel{top:calc(var(--map) + 43px);left:var(--edge);width:clamp(116px,13vw,175px);font-size:8px;padding:4px;background:#10273570}
#hudOverlay .vitals{bottom:18px;left:50%;width:clamp(210px,29vw,440px)}
#hudOverlay .hp-label{font-size:clamp(10px,.9vw,14px);margin-bottom:4px;letter-spacing:.5px}
#hudOverlay .health-track{height:5px;border:0;transform:none;background:#0008;box-shadow:0 1px 2px #0008}
#hudOverlay .health-track i{background:#f4f4e9}
#hudOverlay .armor-label{font-size:clamp(7px,.65vw,10px);margin-top:4px}
#hudOverlay .armor-track{height:2px;transform:none;border:0}
#hudOverlay .controls-help{bottom:1px;font-size:8px}
#hudOverlay .ability-status{bottom:92px;left:18px;font-size:9px}
#hudOverlay .state-banner{top:29%;max-width:55vw;white-space:normal}
#hudOverlay .state-banner strong{font-size:clamp(18px,2vw,30px)}
#hudOverlay .state-banner span{font-size:clamp(9px,.9vw,13px);padding:7px}
#hudOverlay .zone-warning{top:24%;font-size:10px;padding:5px 10px}
#hudOverlay .pickup-prompt{bottom:26%;font-size:10px}
#touchControls .touch-btn{width:var(--control);height:var(--control);border:1px solid #f4f9fc80;background:#192f3b4d;box-shadow:inset 0 0 0 3px #ffffff0a,0 1px 3px #0003;font-size:clamp(20px,2.4vw,34px);padding:0;display:flex;align-items:center;justify-content:center;line-height:1;user-select:none}
#touchControls .touch-btn small{position:absolute;bottom:5px;font-size:7px;letter-spacing:.4px}
#touchControls .touch-btn[aria-pressed=true]{border-color:#f8da8c;background:#b4954c80;box-shadow:0 0 0 2px #ffe9b733}
#touchControls .touch-btn:active{background:#ffffff66}
#touchControls .touch-btn:disabled{opacity:.3;cursor:default;border-style:dashed}
#touchControls #joystickArea{left:clamp(70px,8vw,130px);bottom:clamp(27px,7vh,65px);width:clamp(96px,10vw,150px);height:clamp(96px,10vw,150px);border:2px solid #e8f1ee55;background:#10232f33}
#joystickArea:after{content:'▲';position:absolute;top:7px;left:44%;font-size:12px;color:#fff9;pointer-events:none}
#touchControls #joystickThumb{width:38%;height:38%;background:#edf1e65c;border:1px solid #fff9}
#touchControls #btnSprint{left:clamp(95px,11vw,176px);bottom:calc(clamp(27px,7vh,65px) + clamp(96px,10vw,150px) + 9px);font-size:28px}
#touchControls #btnFire{right:clamp(72px,8vw,135px);top:45%;bottom:auto;width:clamp(72px,7.3vw,112px);height:clamp(72px,7.3vw,112px);border:2px solid #ffffffe0;background:#e7eef51f}
#touchControls #btnAds{right:15px;top:47%;bottom:auto}
#touchControls #btnReload{right:clamp(153px,17vw,270px);top:39%;bottom:auto}
#touchControls #btnGrenade{left:auto;right:clamp(153px,17vw,270px);bottom:clamp(35px,9vh,70px);width:clamp(50px,5vw,80px);height:clamp(50px,5vw,80px)}
#touchControls #btnJump{right:17px;bottom:calc(clamp(20px,5vh,38px) + var(--control) + 14px);font-size:19px;font-weight:bold}
#touchControls #btnCrouch{right:calc(27px + var(--control));bottom:clamp(20px,5vh,38px)}
#touchControls #btnProne{right:15px;bottom:clamp(20px,5vh,38px)}
#touchControls #btnHeal{left:18px;bottom:clamp(31px,8vh,65px);font-size:26px}
#btnHeal:after,#btnGrenade:after{content:attr(data-count);position:absolute;right:0;bottom:0;min-width:15px;border-radius:8px;background:#1b303ceb;font-size:10px;padding:2px}
#touchControls #btnMark{left:clamp(184px,20vw,320px);bottom:20px;font-size:8px;width:44px;height:44px;border-radius:5px}
#touchControls #btnAbility{left:clamp(184px,20vw,320px);bottom:73px;font-size:8px;width:54px;height:44px;border-radius:5px;padding:3px}
#touchControls #btnVehicle{left:27%;bottom:35%;width:65px;height:44px;border-radius:5px;font-size:9px}
#touchControls #btnMap{left:var(--edge);right:auto;top:10px;width:44px;height:44px;border-radius:0;background:#10293688;font-size:8px}
#touchControls #btnPickup,#touchControls #btnRevive{left:50%;right:auto;width:110px;height:44px;border-radius:5px;font-size:10px}
#touchControls #btnPickup{bottom:32%}#touchControls #btnRevive{bottom:45%}
#utility{top:auto;bottom:3px;right:8px}#utility button{min-height:28px;font-size:8px}
.conduciendo #btnProne{display:none!important}
}
/* Vectores trazados para este HUD; ninguna imagen de la referencia. */
.touch-btn svg{width:57%;height:57%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.gun-icon svg{width:44px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1}
@media(orientation:landscape){
body:has(#hudOverlay:not(.hidden)) #utility{display:none}
#hudOverlay .squad-panel{left:calc(var(--map) + var(--edge) + 10px);top:12px}
}
/* Lectura de conducción: datos reales del snapshot, velocidad en valor absoluto. */
.speedometer{position:absolute;left:50%;bottom:82px;transform:translateX(-50%);min-width:120px;text-align:center;padding:8px 14px;background:#142b36d9;border-bottom:3px solid #789c9f;font-variant-numeric:tabular-nums}
.speedometer b{font-size:34px;line-height:1}.speedometer span{font-size:10px;margin-left:5px;color:#c0d7d9}.speedometer small{display:block;font-size:9px;margin-top:6px;letter-spacing:.08em}.speedometer i{display:block;height:3px;margin-top:6px;background:linear-gradient(90deg,#f0ca7b var(--speed,0%),#ffffff26 0)}
@media(orientation:landscape) and (max-height:450px){.speedometer{bottom:70px;padding:5px 10px}.speedometer b{font-size:27px}}
/* Horizontal bajo: inventario termina antes de la zona de acciones del pulgar. */
@media(orientation:landscape) and (max-height:450px){
#hudOverlay.touch,#touchControls{--control:44px;--action-top:max(146px,47vh);--safe-right:max(12px,env(safe-area-inset-right))}
#hudOverlay.touch .weapon-panel{top:52px;right:var(--safe-right);width:236px;height:84px;padding:4px 6px;display:grid;grid-template-columns:minmax(0,1fr) 76px;grid-template-rows:26px 46px;gap:2px 6px;background:#102630aa}
#hudOverlay.touch .weapon-name{grid-column:1;align-self:center;text-align:left;font-size:11px;line-height:13px;letter-spacing:.035em}
#hudOverlay.touch .ammo{grid-column:2;grid-row:1;align-self:center;line-height:1;white-space:nowrap}
#hudOverlay.touch .ammo b{font-size:24px}#hudOverlay.touch .ammo span{font-size:10px}
#hudOverlay.touch .inventory{display:none}
#hudOverlay.touch .weapon-slots{grid-column:1/-1;grid-row:2;margin:0;gap:4px;height:46px}
#hudOverlay.touch .weapon-slots button{height:46px;min-height:44px;padding:4px 5px 8px;grid-template-rows:16px 12px;font-size:9px;line-height:12px}
#hudOverlay.touch .weapon-slots .gun-icon{height:16px;line-height:16px;transform:none}
#hudOverlay.touch .weapon-slots .gun-icon svg{width:39px;height:16px}
#hudOverlay.touch .weapon-slots .unarmed-slot{width:38px;font-size:8px}
#touchControls #btnFire{right:90px;top:calc(var(--action-top) + 5px);bottom:auto;width:68px;height:68px}
#touchControls #btnJump{right:var(--safe-right);top:var(--action-top);bottom:auto;width:44px;height:44px;font-size:13px}
#touchControls #btnAds{right:var(--safe-right);top:calc(var(--action-top) + 52px);bottom:auto}
#touchControls #btnReload{right:181px;top:calc(var(--action-top) + 5px);bottom:auto}
#touchControls #btnCrouch{right:calc(var(--safe-right) + 52px);bottom:12px;top:auto}
#touchControls #btnProne{right:var(--safe-right);bottom:12px;top:auto}
#touchControls #btnGrenade{right:177px;bottom:24px;top:auto;width:48px;height:48px}
#hudOverlay.touch .supply-panel{width:58px}
#hudOverlay.touch .backpack b{font-size:18px}
#hudOverlay.touch .backpack small{font-size:6px}
#hudOverlay.touch .zone-timer{top:58px;left:50%;font-size:9px;max-width:33vw;overflow:hidden;text-overflow:ellipsis}
#hudOverlay.touch .kill-feed{top:86px;width:27vw;font-size:8px}
#hudOverlay.touch .state-banner{top:35%;max-width:44vw}
#hudOverlay.touch .state-banner strong{font-size:17px}
}
#endReward{color:#f5d18a;margin:16px 0;font-weight:700;line-height:1.5}
#endScreen{padding:8px;overflow:auto}.end-box{max-height:calc(100dvh - 16px);overflow-y:auto}
@media(max-height:450px){.end-box h2{font-size:28px;margin:5px 0}.end-box h2.booyah{font-size:38px}#endPlacement{font-size:22px;margin-bottom:6px}#endDamage{margin:8px 0}#endReward{font-size:12px;margin:8px 0}#btnPlayAgain{min-height:44px;padding:12px 18px;margin-top:8px}}
/* Conducción sustituye el arsenal por el velocímetro en cualquier tamaño. */
#hudOverlay.conduciendo .weapon-panel{display:none}
.mods-tag { font-size: 0.72rem; color: #ffca28; font-weight: 700; letter-spacing: 0.05em; background: rgba(0,0,0,0.45); padding: 1px 4px; border-radius: 3px; }