/* Field instruments: a readable mission strip and two compact equipment plates. */
#hud{--plate:linear-gradient(135deg,#343a2ef2,#1b241df2);--brass:#c6b584;--paper:#f0e8cf;--edge:#ab9f745e;color:var(--paper);font-family:"Courier New",monospace}
body:has(#hud:not(.hidden)) #top{left:auto;width:auto;padding:0;right:max(14px,env(safe-area-inset-right));top:14px;gap:6px;border:0;background:none;height:auto;display:flex}
body:has(#hud:not(.hidden)) #top .brand,body:has(#hud:not(.hidden)) #mode{display:none}
body:has(#hud:not(.hidden)) #top button{background:#202a23ef;border:1px solid #ab9f7470;padding:12px 10px;font:10px "Courier New",monospace;color:#ede3c6}
#hud .matchtop{top:14px;left:86px;right:auto;width:min(470px,calc(100% - 292px));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 16px;padding:10px 14px;background:var(--plate);border:1px solid var(--edge);border-left:3px solid var(--brass);box-shadow:0 3px 12px #0004;text-shadow:none;letter-spacing:.7px}
#hud #mapName{grid-column:1;grid-row:1;font-size:12px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud #connection{grid-column:1;grid-row:2;font-size:9px;color:#c4c8ad;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud #timer{grid-column:2;grid-row:1;font:700 21px/.9 "Courier New",monospace;color:#f2e6be}
#hud #roundScore{grid-column:2;grid-row:2;font-size:9px;letter-spacing:0;text-align:right;white-space:nowrap}
#hud #compass{left:14px;top:14px;width:58px;height:58px;border:3px double #b4aa80;border-radius:50%;background:radial-gradient(circle,#48513bf0,#1e271ff5);box-shadow:0 2px 8px #0006;color:#ece2bd}
#hud #compass span{left:21px;top:3px;font:10px "Courier New",monospace}#hud #compass i{position:absolute;left:14px;top:16px;width:24px;height:30px;line-height:30px;margin:0;font-size:29px}
#hud #killfeed{top:88px;right:16px;left:auto;max-width:45%;padding:7px 10px;background:#20281fc9;border-left:2px solid #b5aa7d;font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#hud #killfeed:empty{display:none}
#hud .bottomhud{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(27px,env(safe-area-inset-bottom));gap:12px;align-items:end;text-shadow:none}
#hud .bottomhud>div{position:relative;background:var(--plate);border:1px solid var(--edge);box-shadow:0 3px 14px #0005;padding:12px 16px;min-width:0;border-top:3px solid var(--brass)}
#hud .conditionHUD{width:176px}#hud .weaponHUD{width:252px;max-width:none;text-align:right}
#hud .hudCaption{display:flex;align-items:center;gap:9px}.medicalMark{color:#d6c49c;font:18px Georgia!important}
#hud .bottomhud small{font:10px "Courier New",monospace;letter-spacing:1px;color:#e1d5b4}
#hud .healthReadout{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#hud .bottomhud strong{font:700 34px/1 "Courier New",monospace;margin:6px 0}
#hud .bottomhud span:not(#ammo){font-size:10px;letter-spacing:.2px;color:#c7c9b0}
#hud .conditionTrack{height:5px;margin-top:3px;background:#111a15;border:1px solid #a5ad8166}
#conditionFill{display:block;height:100%;width:100%;background:#b9c697}
#hud.critical .conditionHUD{border-top-color:#d28d68}#hud.critical #conditionFill{background:#d28d68}#hud.critical #health{color:#f2b48d}
#hud .ammoReadout{display:flex;align-items:center;justify-content:space-between;gap:16px}#hud .cartridgeMark{color:#bdae7a!important;letter-spacing:2px!important;transform:rotate(-90deg);font-size:12px!important}
#hud .weaponHUD em{font:17px "Courier New",monospace;color:#b7bba4}
#hud #weaponHint{display:block;border-top:1px solid #b2b18740;padding-top:6px;color:#d7c9a1;font-size:10px}
#hud #message{left:50%;bottom:155px;transform:translateX(-50%);padding:9px 14px;background:#20281fe8;border:1px solid var(--edge);max-width:90%;font:13px/1.5 "Courier New",monospace;text-align:center}#hud #message:empty{display:none}
#hud .desktophelp{font-size:10px;bottom:8px;letter-spacing:0;color:#dedac2;text-shadow:0 1px 3px #000}
@media(pointer:coarse){
 #hud .bottomhud{bottom:max(10px,env(safe-area-inset-bottom))}
 #hud #joystick{left:max(22px,env(safe-area-inset-left));bottom:132px;width:94px;height:94px;border:2px solid #c2b78b99;background:radial-gradient(circle,#727b4933,#1c291e66);box-shadow:inset 0 0 0 7px #202a2344}
 #hud #joystick span{left:27px;top:27px;background:#d0c39566;border:1px solid #e7dbb799}
 #hud #touch #fire{right:max(22px,env(safe-area-inset-right));bottom:157px;width:76px!important;height:76px!important;background:#726644bc!important;border:2px solid #c4b07e;font:bold 12px "Courier New",monospace!important;box-shadow:inset 0 0 0 5px #2c332799}
 #hud #touch #more{right:33px;bottom:105px;width:56px;height:40px;border-radius:3px;background:#263224ed;border:1px solid #b9ac80;color:#ede3c6;font-size:11px}
 #hud #kitActions{right:112px;bottom:126px;width:min(340px,calc(100vw - 130px));padding:9px;gap:6px;grid-template-columns:repeat(4,minmax(0,1fr));max-height:none;overflow:visible;background:#222d23f5;border:1px solid #b9ac80;border-radius:3px}
 #hud #touch.expanded #kitActions button{width:100%;min-width:0;min-height:40px;height:40px;border-radius:2px;font-size:9px;background:#62684d8c;padding:0}
 #hud #touch.expanded #kitActions #grenade{grid-column:auto;width:100%}
 #hud #lookzone{top:100px;bottom:105px}
}
@media(max-width:600px){
 body:has(#hud:not(.hidden)) #top{top:10px;right:10px}body:has(#hud:not(.hidden)) #top button{padding:10px 8px;font-size:9px}
 #hud #compass{left:10px;top:10px;width:44px;height:44px}#hud #compass span{left:14px;top:1px;font-size:8px}#hud #compass i{left:7px;top:9px;margin:0;font-size:24px;height:26px;line-height:26px}
 #hud .matchtop{top:64px;left:10px;right:10px;width:auto;padding:9px 11px;gap:6px 10px}#hud #mapName{font-size:11px}#hud #timer{font-size:21px}#hud #connection{font-size:9px}
 #hud #killfeed{top:132px;right:10px;max-width:80%;font-size:10px}
 #hud .bottomhud{left:10px;right:10px;gap:8px}#hud .bottomhud>div{padding:9px 10px}#hud .conditionHUD{width:38%}#hud .weaponHUD{width:60%}
 #hud .bottomhud small{font-size:9px;letter-spacing:.3px}#hud .bottomhud strong{font-size:29px}#hud .bottomhud span:not(#ammo){font-size:9px}#hud .weaponHUD em{font-size:15px}#hud .cartridgeMark{display:none}#hud .ammoReadout{justify-content:flex-end}
 #hud .healthReadout{gap:4px}#hud #armor{font-size:8px;white-space:nowrap}#hud #weaponHint{font-size:9px}
 #hud #message{bottom:250px;font-size:11px}
}
@media(pointer:coarse) and (max-width:600px){
 #hud #kitActions{right:12px;bottom:250px;width:220px;grid-template-columns:repeat(2,minmax(0,1fr))}#hud #touch.expanded #kitActions #grenade{grid-column:1/-1}
 #hud #lookzone{top:150px}
}
@media(pointer:coarse) and (max-height:500px){
 #hud .bottomhud>div{padding:6px 10px}#hud .bottomhud strong{font-size:25px;margin:3px 0}#hud .bottomhud{bottom:8px}
 #hud #joystick{bottom:103px;width:78px;height:78px}#hud #joystick span{left:19px;top:19px}
 #hud #touch #fire{bottom:134px;width:62px!important;height:62px!important}#hud #touch #more{bottom:87px;right:25px}
 #hud #kitActions{bottom:102px;right:102px;grid-template-columns:repeat(4,minmax(0,1fr));width:min(340px,calc(100vw - 124px))}
 #hud #message{bottom:90px}
}
@media(pointer:coarse) and (max-width:360px){
 #hud #joystick{left:14px;width:72px;height:72px}#hud #joystick span{left:16px;top:16px}
 #hud .conditionHUD{width:36%}#hud .weaponHUD{width:62%}#hud .bottomhud>div{padding:7px}#hud .medicalMark{display:none}#hud .healthReadout{display:block}#hud #armor{display:block}#hud .bottomhud strong{font-size:25px}
 #hud #kitActions{right:10px;width:min(220px,calc(100vw - 20px));bottom:244px}
}
@media(pointer:coarse) and (max-width:600px) and (max-height:500px){
 #hud #kitActions{left:10px;right:10px;width:auto;bottom:200px;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px;gap:4px}#hud #touch.expanded #kitActions button{min-height:32px;height:32px;font-size:8px}#hud #touch.expanded #kitActions #grenade{grid-column:auto}
 #hud .matchtop{top:55px}#hud #killfeed{top:117px}
}

@media(pointer:coarse){#hud #lookzone{inset:0;width:100%;height:100%}#hud .matchtop,#hud .bottomhud,#hud #compass,#hud #factionBadge{z-index:1;pointer-events:none}}
