/* BLACK / tactical glass HUD. Original artwork; thumb-zone layout informed by
   the official COD Mobile control guide and Garena's custom-HUD guidance. */
:root{
 --hud-accent:#ffc568;--hud-paper:#f8f5ec;--hud-muted:#c1c5c5;
 --hud-glass:#081117b8;--hud-edge:#e8eee62e;
 --hud-left:max(20px,env(safe-area-inset-left));
 --hud-right:max(20px,env(safe-area-inset-right));
 --hud-top:max(12px,env(safe-area-inset-top));
 --hud-bottom:max(22px,env(safe-area-inset-bottom));
}
.hud{padding:0;color:var(--hud-paper);text-shadow:0 1px 3px #000c;pointer-events:none}
.hud-topline{position:absolute;left:28px;right:28px;top:21px;height:22px}
.hud-brand{font-size:9px;letter-spacing:1.3px;color:#f4f4e9}
.hud-brand b{color:var(--hud-accent)}
.performance{font-size:9px;letter-spacing:.5px}
.compass{top:0;gap:13px;opacity:.85}.compass strong{font-size:12px}
.objective-panel{
 left:50%;top:57px;transform:translateX(-50%);width:360px;max-width:44vw;
 padding:10px 15px 11px;border:1px solid var(--hud-edge);border-top:2px solid var(--hud-accent);
 border-left:1px solid var(--hud-edge);border-radius:3px;background:linear-gradient(180deg,#081117d6,#0811177d);
 text-align:center;
}
.objective-panel .chapter-badge{font-size:8px;letter-spacing:1px;color:var(--hud-accent);margin-bottom:4px}
.objective-panel .hud-label{font-size:7px;letter-spacing:1.4px;color:#b8c0c1}
.objective-panel h2{font-size:14px;line-height:1.25;margin:6px 0 4px;letter-spacing:.25px;color:#fff8e9}
.objective-panel p{font-size:10px;line-height:1.4;max-width:none;margin:0;color:#c5cdce}
.objective-track{width:100%;height:3px;margin:8px 0 0;background:#fff2}
.objective-track>div{background:var(--hud-accent);box-shadow:none}
.health-panel{
 left:28px;top:58px;bottom:auto;width:158px;padding:9px 11px 10px;
 border-left:2px solid var(--hud-accent);background:linear-gradient(90deg,#081117c9,#08111722);transform:none;
}
.health-heading{gap:7px}.medical-cross{font-size:20px;color:var(--hud-accent)}
.health-heading strong{font-size:25px;letter-spacing:-.8px}
.health-heading .hud-label{font-size:7px;letter-spacing:.8px;color:#d3d8d4}
.health-track{height:4px;margin-top:7px;background:#ffffe52e;border-radius:2px;overflow:hidden}
.health-track>div{background:var(--hud-accent)}
.health-caption{font-size:6px;letter-spacing:.8px;margin-top:6px;color:#b4c2bc}
.score-panel{right:28px;top:61px;gap:4px}.score-panel .hud-label{font-size:7px;letter-spacing:1px}
.score-panel strong{font-size:23px}.score-panel>span:last-child{font-size:8px}
.ammo-panel{
 top:auto;right:28px;bottom:47px;width:195px;min-width:0;max-width:195px;
 padding:11px 13px 10px;border-bottom:2px solid var(--hud-accent);transform:none;
 background:linear-gradient(270deg,#081117ce,#08111722);border-radius:3px 3px 0 0;
}
.weapon-name{display:block;font-size:9px;letter-spacing:.8px;color:#e3e7e2}
.ammo-count{gap:7px;margin:5px 0 6px;line-height:.95}
.ammo-count strong{font-size:43px;letter-spacing:-1.5px;font-weight:800}
.ammo-slash{font-size:21px;color:#d3ad70}.ammo-count>span:last-child{font-size:18px;color:#c7cecb}
.ammo-footer{font-size:7px;letter-spacing:.2px;gap:13px;color:#bcc6c2}
.grenade-count{gap:4px}.grenade-count b{font-size:12px}.grenade-count>span{font-size:10px}
.boss-panel{top:176px;max-width:390px;width:36vw;padding:9px 13px;border-radius:3px;background:#101016d9}
.boss-heading strong{font-size:11px}.boss-panel p{font-size:10px}.boss-track{height:4px;margin:7px 0 6px}
.interaction{top:62%;font-size:11px;padding:10px 14px;border-radius:3px;max-width:65vw}
.toast{top:35%;font-size:11px;padding:11px 16px;border-radius:2px;letter-spacing:.25px;max-width:65vw}
.killfeed{top:133px;right:28px;max-width:205px;font-size:9px;line-height:1.5;letter-spacing:.15px}
.hud-bottomline{left:28px;right:28px;bottom:20px;font-size:8px;letter-spacing:1px}

/* The full-screen wrapper and empty gaps never capture touches. Only the
   joystick, free-look region, toolbar and the individual action buttons do. */
.touch-mode .touch-controls{--fire-size:84px;--stick-size:124px;pointer-events:none}
.touch-mode .look-pad{inset:75px 0 0 40%;z-index:1;pointer-events:auto;touch-action:none;background:none}
.touch-mode .look-pad span{display:none}
.touch-mode .joystick{
 left:var(--hud-left);bottom:var(--hud-bottom);width:var(--stick-size);height:var(--stick-size);z-index:3;
 border:1px solid #edf2e969;background:radial-gradient(circle,#07131b2e 48%,#f0f0dd0d 49%,#f0f0dd0d 64%,#07131b5e 65%);
 box-shadow:0 1px 5px #0005,inset 0 0 0 7px #050b112b;pointer-events:auto;touch-action:none;
}
.touch-mode .joystick:before{height:82px;background:#f3efdf21}
.touch-mode .joystick:after{width:82px;background:#f3efdf21}
.touch-mode .joystick-knob{
 left:50%;top:50%;width:46px;height:46px;border:1px solid #fff6dd9c;background:#e8e2d448;
 transform:translate(calc(-50% + var(--jx,0px)),calc(-50% + var(--jy,0px)));
 box-shadow:0 2px 8px #0005;pointer-events:none;
}
.touch-mode .touch-run{
 left:calc(var(--hud-left) + 26px);bottom:calc(var(--hud-bottom) + 139px);height:44px;min-width:72px;
 border-radius:22px;border:1px solid #f2eee451;background:#0a141ab5;color:#f0eddf;font:700 9px system-ui;
 letter-spacing:.5px;z-index:4;pointer-events:auto;touch-action:manipulation;
}
.touch-mode .touch-run[aria-pressed="true"]{background:var(--hud-accent)!important;color:#1b1913!important;box-shadow:0 0 0 3px #ffc56822}
.touch-mode .touch-toolbar{
 top:var(--hud-top);right:var(--hud-right);gap:7px;z-index:5;pointer-events:none;
}
.touch-mode .touch-toolbar button{
 height:44px;min-width:44px;padding:0 11px;border:1px solid #edf0e33d;border-radius:5px;
 background:#09131ab2;color:#f4f2e8;font:700 9px system-ui;letter-spacing:.3px;
 pointer-events:auto;touch-action:manipulation;
}
.touch-mode .touch-toolbar [data-action="weapon"]{min-width:74px;border-bottom:2px solid var(--hud-accent);touch-action:none}
.touch-mode .touch-pause{position:static;width:44px;height:44px;font-size:19px}
.touch-mode .touch-actions{
 position:absolute;right:var(--hud-right);bottom:var(--hud-bottom);width:234px;height:168px;
 display:block;z-index:4;pointer-events:none;
}
.touch-mode .touch-actions button{
 position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
 width:48px;height:48px;min-width:0;min-height:0;padding:0;border-radius:50%;border:1px solid #fff4d78c;
 background:#07131b8c;color:#fff7e6;box-shadow:0 2px 6px #0005;touch-action:none;pointer-events:auto;
 font-size:0;line-height:1;letter-spacing:0;grid-column:auto;
}
.touch-mode .touch-actions button:before{
 content:"";display:block;width:23px;height:23px;background:currentColor;pointer-events:none;
 mask:var(--control-icon) center/contain no-repeat;-webkit-mask:var(--control-icon) center/contain no-repeat;
}
.touch-mode .touch-actions button:after{content:var(--control-label);display:block;font:700 7px/1 system-ui;letter-spacing:.6px;pointer-events:none}
.touch-mode .touch-actions button:active{background:#f9d494d4;color:#171c1c;border-color:#fff1d0;transform:scale(.96)}
.touch-mode .touch-actions [data-action="fire"]{
 right:4px;bottom:59px;width:var(--fire-size);height:var(--fire-size);border-radius:50%;
 background:radial-gradient(circle at 40% 32%,#ffe5aeba,#ffc5689e 70%);color:#171b1c;border:2px solid #ffe6b9cc;
 box-shadow:0 0 0 5px #ffd18b13,0 3px 10px #0006;font-size:0;
 --control-label:"TIRO";--control-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2.2'%3E%3Ccircle cx='16' cy='16' r='8'/%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Cpath d='M16 1v8m0 14v8M1 16h8m14 0h8'/%3E%3C/g%3E%3C/svg%3E");
}
.touch-mode .touch-actions [data-action="fire"]:before{width:34px;height:34px}
.touch-mode .touch-actions [data-action="fire"]:after{font-size:9px;letter-spacing:1px}
.touch-mode .touch-actions [data-action="aim"]{
 right:106px;bottom:67px;width:58px;height:58px;border-radius:50%;font-size:0;
 --control-label:"MIRA";--control-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Cpath d='M16 1v9m0 12v9M1 16h9m12 0h9'/%3E%3Ccircle cx='16' cy='16' r='1.6' fill='black'/%3E%3C/g%3E%3C/svg%3E");
}
.touch-mode .touch-actions [data-action="interact"]{
 right:177px;bottom:72px;width:50px;height:50px;border-color:#ffd48d99;
 --control-label:"AÇÃO";--control-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M12 15V7a2 2 0 014 0v8-4a2 2 0 014 0v5-2a2 2 0 014 0v8c0 4-3 7-7 7h-2c-3 0-5-2-7-4l-5-6c-2-3 1-5 3-3l6 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.touch-mode .touch-actions [data-action="jump"]{
 right:12px;bottom:0;
 --control-label:"PULO";--control-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16l9-10 9 10M16 6v20M5 28h22'/%3E%3C/g%3E%3C/svg%3E");
}
.touch-mode .touch-actions [data-action="reload"]{
 right:76px;bottom:0;
 --control-label:"RECARGA";--control-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 12a10 10 0 10.3 8M25 5v8h-8'/%3E%3Cpath d='M14 11h4v11h-4z'/%3E%3C/g%3E%3C/svg%3E");
}
.touch-mode .touch-actions [data-action="grenade"]{
 right:140px;bottom:0;
 --control-label:"GRANADA";--control-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 8V4h8v4M17 4l8 5M12 10h8l3 5v11l-3 3h-8l-3-3V15zM10 17h12M10 23h12M16 11v17'/%3E%3C/g%3E%3C/svg%3E");
}
.touch-mode .hud-topline{left:var(--hud-left);right:auto;top:calc(var(--hud-top) + 2px);height:18px;gap:0}
.touch-mode .hud-brand{font-size:8px;letter-spacing:1px}.touch-mode .performance{font-size:8px;margin-left:10px}
.touch-mode .objective-panel{
 top:var(--hud-top);left:50%;width:min(34vw,320px);max-width:calc(100vw - 380px);min-width:230px;
 padding:8px 12px 9px;border-radius:3px;max-height:none;overflow:visible;
}
.touch-mode .objective-panel .hud-label{display:none}
.touch-mode .objective-panel .chapter-badge{font-size:7px;line-height:1.3;margin-bottom:3px;letter-spacing:.8px}
.touch-mode .objective-panel h2{font-size:12px;line-height:1.25;margin:4px 0;color:#fff7e9;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.touch-mode .objective-panel p{font-size:9px;line-height:1.35;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.touch-mode .objective-track{margin-top:6px;height:3px}
.touch-mode .health-panel{left:var(--hud-left);top:calc(var(--hud-top) + 35px);bottom:auto;width:132px;padding:7px 10px 9px;transform:none}
.touch-mode .health-heading strong{font-size:23px}.touch-mode .health-heading .hud-label{font-size:6px;letter-spacing:.4px}
.touch-mode .health-caption{display:none}.touch-mode .health-track{margin-top:6px;height:4px}
.touch-mode .ammo-panel{
 top:auto;bottom:calc(var(--hud-bottom) + 188px);right:var(--hud-right);left:auto;
 width:190px;min-width:0;max-width:190px;padding:9px 11px;transform:none;text-align:right;
}
.touch-mode .weapon-name{font-size:9px;letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.touch-mode .ammo-count{margin:5px 0 5px;gap:6px;line-height:.95}.touch-mode .ammo-count strong{font-size:36px;letter-spacing:-1px}
.touch-mode .ammo-count>span:last-child{font-size:16px}.touch-mode .ammo-slash{font-size:19px}
.touch-mode .ammo-footer,.touch-mode .grenade-count{font-size:7px}.touch-mode .grenade-count b{font-size:11px}
.touch-mode .boss-panel{top:calc(var(--hud-top) + 109px);width:min(34vw,320px);max-width:340px;padding:8px 11px;max-height:none;border-radius:3px}
.touch-mode .boss-heading strong{font-size:10px}.touch-mode .boss-track{margin:6px 0}.touch-mode .boss-panel p{font-size:9px;line-height:1.35}
.touch-mode .killfeed{top:calc(var(--hud-top) + 55px);right:var(--hud-right);font-size:8px;max-width:190px;line-height:1.5}
.touch-mode .toast{top:42%;max-width:48%;font-size:10px;line-height:1.4;padding:8px 11px;letter-spacing:.1px}
.touch-mode .interaction{top:61%;max-width:44%;font-size:10px;padding:8px 12px;line-height:1.4}
.touch-mode .hud-bottomline{display:flex;left:42%;right:42%;bottom:calc(var(--hud-bottom) + 2px);justify-content:center;font-size:8px;letter-spacing:.6px}
.touch-mode .hud-bottomline>span:first-child{display:none}
.touch-mode .compass,.touch-mode .score-panel,.touch-mode .reload-hint{display:none}

@media(max-width:600px) and (orientation:portrait){
 :root{--hud-left:max(16px,env(safe-area-inset-left));--hud-right:max(16px,env(safe-area-inset-right));--hud-bottom:max(26px,env(safe-area-inset-bottom))}
 .touch-mode .touch-controls{--stick-size:112px;--fire-size:82px}
 .touch-mode .hud-topline{top:calc(var(--hud-top) + 3px)}.touch-mode .hud-brand{font-size:8px}.touch-mode .performance{display:none}
 .touch-mode .touch-toolbar{gap:6px}.touch-mode .touch-toolbar button{min-width:44px;height:44px;padding:0 8px;font-size:8px}
 .touch-mode .touch-toolbar [data-action="weapon"]{min-width:66px}.touch-mode .touch-pause{width:44px;height:44px}
 .touch-mode .health-panel{top:calc(var(--hud-top) + 47px);width:132px}
 .touch-mode .objective-panel{top:calc(var(--hud-top) + 108px);width:calc(100vw - 32px);min-width:0;max-width:calc(100vw - 32px);padding:10px 13px}
 .touch-mode .objective-panel h2{font-size:13px}.touch-mode .objective-panel p{font-size:10px}
 .touch-mode .boss-panel{top:calc(var(--hud-top) + 214px);width:calc(100vw - 64px);max-width:360px}
 .touch-mode .look-pad{inset:185px 0 0 35%;z-index:1}
 .touch-mode .touch-run{left:calc(var(--hud-left) + 20px);bottom:calc(var(--hud-bottom) + 132px)}
 .touch-mode .touch-actions{width:234px;height:168px;right:var(--hud-right);bottom:var(--hud-bottom)}
 .touch-mode .ammo-panel{bottom:calc(var(--hud-bottom) + 198px);width:185px;max-width:185px}
 .touch-mode .killfeed{top:calc(var(--hud-top) + 48px);max-width:185px;font-size:8px}
 .touch-mode .toast{top:39%;max-width:82%;font-size:10px}
 .touch-mode .interaction{top:58%;max-width:80%;font-size:11px}
 .touch-mode .hud-bottomline{left:40%;right:40%;bottom:calc(var(--hud-bottom) + 4px)}
 .touch-mode .diagnostics-panel{top:calc(var(--hud-top) + 49px);right:var(--hud-right);font-size:10px;max-height:calc(100dvh - 280px);overflow:auto}
}
@media(max-height:360px) and (orientation:landscape){
 .touch-mode .touch-controls{--fire-size:72px;--stick-size:108px}
 .touch-mode .touch-actions{height:151px}.touch-mode .touch-actions [data-action="fire"]{bottom:54px}
 .touch-mode .touch-actions [data-action="aim"]{bottom:60px;width:52px;height:52px}
 .touch-mode .touch-actions [data-action="interact"]{bottom:60px;width:48px;height:48px}
 .touch-mode .ammo-panel{bottom:calc(var(--hud-bottom) + 159px);padding:7px 10px}
 .touch-mode .ammo-count strong{font-size:30px}.touch-mode .ammo-footer{display:none}
 .touch-mode .objective-panel p{display:none}.touch-mode .boss-panel{top:calc(var(--hud-top) + 80px)}
 .touch-mode .touch-run{bottom:calc(var(--hud-bottom) + 121px)}
}
@media(max-width:380px) and (orientation:portrait){
 /* Lift interaction out of the left thumb's arc on narrow phones. Its new
    column also stays to the right of sprint, including a 320 CSS-pixel screen. */
 .touch-mode .touch-actions [data-action="interact"]{right:136px;bottom:140px}
 .touch-mode .hud-brand{font-size:0}.touch-mode .hud-brand:after{content:"BLACK";font:800 8px system-ui;letter-spacing:1px}
 .touch-mode .killfeed{max-width:calc(100vw - 180px)}
 .touch-mode .ammo-panel{width:calc(50vw - 28px);max-width:160px;padding:7px 9px}
 .touch-mode .ammo-count strong{font-size:30px}.touch-mode .weapon-name{font-size:8px}
}
@media(max-width:380px) and (max-height:650px) and (orientation:portrait){
 .touch-mode .objective-panel{top:calc(var(--hud-top) + 95px);padding:7px 12px}
 .touch-mode .objective-panel h2{font-size:12px;-webkit-line-clamp:1}
 .touch-mode .objective-panel p{font-size:9px;-webkit-line-clamp:1}
 .touch-mode .boss-panel{top:calc(var(--hud-top) + 190px);padding:6px 10px}
 .touch-mode .boss-panel p{font-size:8px}.touch-mode .boss-track{margin:5px 0}
}
@media(max-width:340px) and (orientation:portrait){
 .touch-mode .touch-controls{--stick-size:104px}
 .touch-mode .touch-actions [data-action="grenade"]{right:120px}
 .touch-mode .touch-actions [data-action="reload"]{right:64px}
 .touch-mode .touch-actions [data-action="jump"]{right:8px}
}
@media(prefers-reduced-motion:reduce){.hud *,.touch-controls *{transition:none!important;animation:none!important}}