/* ZAVOD HUD — owned by the HUD agent. DOM+CSS, MW2019-style: restrained, condensed, motion via transform/opacity only. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/barlow-condensed-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/barlow-600.woff2") format("woff2"); }

#hud {
  --hs: 1;                                  /* hud scale, set by JS = clamp(innerHeight/1080) */
  --safe-x: 3.4vw; --safe-y: 3.8vh;         /* 16:9 / 21:9 safe zone */
  --fg: #e9ecef; --dim: rgba(233,236,239,.58); --faint: rgba(233,236,239,.26); --line: rgba(233,236,239,.14);
  --acc: #e9a23b; --red: #e8392b; --ink: #05070a;
  --fc: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --fb: "Barlow", "Segoe UI", Roboto, system-ui, sans-serif;
  --fm: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --xs: calc(11px * var(--hs)); --s: calc(12px * var(--hs)); --m: calc(14px * var(--hs)); --l: calc(18px * var(--hs));
  --ease: cubic-bezier(.2,.7,.2,1);
  position: fixed; inset: 0; z-index: 10; overflow: hidden; pointer-events: none;
  color: var(--fg); font-family: var(--fb); font-size: var(--m); line-height: 1.2;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
#hud * { box-sizing: border-box; margin: 0; padding: 0; }
#hud button { appearance: none; -webkit-appearance: none; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; letter-spacing: inherit; }
#hud button:focus { outline: none; }
#hud kbd { display: inline-block; font: 500 var(--xs)/1 var(--fb); letter-spacing: .06em; padding: calc(3px * var(--hs)) calc(6px * var(--hs)); min-width: calc(20px * var(--hs)); text-align: center; border: 1px solid rgba(233,236,239,.42); color: var(--fg); margin: 0 .35em 0 0; vertical-align: middle; }
#hud .u { text-transform: uppercase; }
#hud .fc { font-family: var(--fc); }

/* ---------- layers ---------- */
#hud .layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility 0s linear .28s; }
#hud .layer.on { opacity: 1; visibility: visible; transition: opacity .28s var(--ease), visibility 0s; }
#hud .layer.ui.on { pointer-events: auto; }
#hud .layer.game { transition-duration: .18s; }

/* =========================================================
   IN-GAME
   ========================================================= */
#hud .game { text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6); }
#hud .game .xh i, #hud .game .hm i, #hud .game .hp .bar i { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.8)); }
#hud .game .wpn .sub .gr svg, #hud .game .feed .k svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.8)); }

/* compass */
#hud .compass { position: absolute; top: var(--safe-y); left: 50%; width: calc(600px * var(--hs)); height: calc(46px * var(--hs)); transform: translateX(-50%); }
#hud .compass::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-14px * var(--hs)); height: calc(52px * var(--hs)); background: radial-gradient(ellipse at 50% 50%, rgba(5,7,10,.32), rgba(5,7,10,0) 72%); }
#hud .compass canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
#hud .compass .bearing { position: absolute; left: 50%; top: calc(30px * var(--hs)); transform: translateX(-50%); font: 600 var(--s)/1 var(--fc); letter-spacing: .12em; color: var(--fg); padding: calc(2px * var(--hs)) calc(5px * var(--hs)); background: rgba(5,7,10,.45); font-variant-numeric: tabular-nums; }
#hud .compass .mark { position: absolute; left: 50%; top: calc(-2px * var(--hs)); width: 0; height: 0; transform: translateX(-50%); border-left: calc(4px * var(--hs)) solid transparent; border-right: calc(4px * var(--hs)) solid transparent; border-top: calc(5px * var(--hs)) solid var(--acc); }

/* objective / wave line, top-left */
#hud .obj { position: absolute; top: var(--safe-y); left: var(--safe-x); display: flex; align-items: center; gap: calc(12px * var(--hs)); font: 500 var(--s)/1 var(--fb); letter-spacing: .16em; color: var(--dim); }
#hud .obj b { font: 600 var(--l)/1 var(--fc); letter-spacing: .08em; color: var(--fg); font-variant-numeric: tabular-nums; }
#hud .obj i { display: block; width: 1px; height: calc(16px * var(--hs)); background: var(--line); }
#hud .obj .hostile { color: var(--dim); }
#hud .obj .hostile b { color: var(--red); }

/* kill feed */
#hud .feed { position: absolute; top: var(--safe-y); right: var(--safe-x); display: flex; flex-direction: column; align-items: flex-end; gap: calc(4px * var(--hs)); }
#hud .feed .k { font: 500 var(--s)/1 var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); padding: calc(6px * var(--hs)) calc(10px * var(--hs)); background: rgba(5,7,10,.5); border-right: 2px solid var(--acc); display: flex; align-items: center; gap: .6em; white-space: nowrap; animation: feedin .28s var(--ease) both; will-change: transform, opacity; }
#hud .feed .k.out { animation: feedout .45s var(--ease) both; }
#hud .feed .k svg { width: calc(14px * var(--hs)); height: calc(14px * var(--hs)); fill: var(--red); }
#hud .feed .k svg.ar { width: calc(16px * var(--hs)); height: calc(8px * var(--hs)); fill: var(--dim); }
#hud .feed .k .me { color: var(--acc); }
@keyframes feedin { from { opacity: 0; transform: translateX(calc(18px * var(--hs))); } to { opacity: 1; transform: none; } }
@keyframes feedout { to { opacity: 0; transform: translateX(calc(10px * var(--hs))); } }

/* crosshair */
#hud .xh { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --gap: 7px; --len: 8px; --w: 2px; transition: opacity .12s; }
#hud .xh i { position: absolute; left: 0; top: 0; background: var(--fg); box-shadow: 0 0 2px rgba(0,0,0,.9); will-change: transform; }
#hud .xh i:nth-child(1), #hud .xh i:nth-child(2) { width: var(--w); height: var(--len); margin-left: calc(var(--w) / -2); }
#hud .xh i:nth-child(3), #hud .xh i:nth-child(4) { width: var(--len); height: var(--w); margin-top: calc(var(--w) / -2); }
#hud .xh i:nth-child(1) { transform: translateY(calc(-1 * (var(--gap) + var(--len)))); }
#hud .xh i:nth-child(2) { transform: translateY(var(--gap)); }
#hud .xh i:nth-child(3) { transform: translateX(calc(-1 * (var(--gap) + var(--len)))); }
#hud .xh i:nth-child(4) { transform: translateX(var(--gap)); }
#hud .xh.ads { opacity: 0; }

/* hit marker */
#hud .dmgnums { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 3; }
#hud .dmgnums span { position: absolute; left: 0; top: 0; opacity: 0; font: 700 calc(11px + 6px * var(--hs, 1))/1 var(--fb); color: #f2f2f2; text-shadow: 0 1px 2px rgba(0,0,0,.9); will-change: transform, opacity; white-space: nowrap; }
#hud .dmgnums span.head { color: #ffd27a; font-size: calc(13px + 7px * var(--hs, 1)); }
#hud .dmgnums span.kill { color: #ff5a4a; font-size: calc(14px + 7px * var(--hs, 1)); }
#hud .hm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; --c: #fff; --g: 5px; --l: 9px; }
#hud .hm i { position: absolute; left: 0; top: 0; width: 2px; height: var(--l); background: var(--c); margin-left: -1px; transform-origin: 1px 0; box-shadow: 0 0 2px rgba(0,0,0,.9); }
#hud .hm i:nth-child(1) { transform: rotate(45deg) translateY(calc(-1 * (var(--g) + var(--l)))); }
#hud .hm i:nth-child(2) { transform: rotate(-45deg) translateY(calc(-1 * (var(--g) + var(--l)))); }
#hud .hm i:nth-child(3) { transform: rotate(45deg) translateY(var(--g)); }
#hud .hm i:nth-child(4) { transform: rotate(-45deg) translateY(var(--g)); }
#hud .hm.kill { --c: var(--red); --g: 6px; --l: 11px; }

/* damage arcs canvas + vignette */
#hud .dmg { position: absolute; left: 50%; top: 50%; width: calc(420px * var(--hs)); height: calc(420px * var(--hs)); transform: translate(-50%, -50%); }
#hud .vig { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(120,0,0,0) 40%, rgba(150,8,4,.55) 78%, rgba(120,0,0,.85) 100%); opacity: var(--v, 0); animation: heartbeat var(--hb, 1.1s) ease-in-out infinite; will-change: opacity; }
@keyframes heartbeat { 0% { opacity: calc(var(--v) * .55); } 12% { opacity: var(--v); } 26% { opacity: calc(var(--v) * .6); } 40% { opacity: calc(var(--v) * .9); } 66% { opacity: calc(var(--v) * .55); } 100% { opacity: calc(var(--v) * .55); } }
#hud .flash { position: absolute; inset: 0; background: rgba(230,40,30,.55); opacity: 0; }

/* health, bottom-left */
#hud .hp { position: absolute; left: var(--safe-x); bottom: var(--safe-y); display: flex; flex-direction: column; gap: calc(7px * var(--hs)); opacity: 0; transition: opacity .6s var(--ease); }
#hud .hp.on { opacity: 1; transition-duration: .12s; }
#hud .hp .lab { font: 500 var(--xs)/1 var(--fb); letter-spacing: .2em; color: var(--dim); display: flex; gap: .8em; align-items: baseline; }
#hud .hp .lab b { font: 600 var(--l)/1 var(--fc); color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
#hud .hp .bar { display: flex; gap: 2px; width: calc(200px * var(--hs)); height: calc(5px * var(--hs)); }
#hud .hp .bar i { flex: 1; background: rgba(233,236,239,.16); position: relative; overflow: hidden; }
#hud .hp .bar i::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(var(--f, 1)); transition: transform .12s linear; }
#hud .hp.low .bar i::after { background: var(--red); }
#hud .hp.low .lab b { color: var(--red); }

/* weapon, bottom-right */
#hud .wpn { position: absolute; right: var(--safe-x); bottom: var(--safe-y); display: flex; flex-direction: column; align-items: flex-end; gap: calc(5px * var(--hs)); }
#hud .wpn .name { font: 500 var(--s)/1 var(--fb); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: .9em; }
#hud .wpn .name .mode { color: var(--fg); padding: calc(2px * var(--hs)) calc(5px * var(--hs)); border: 1px solid rgba(233,236,239,.35); font-size: var(--xs); letter-spacing: .16em; }
#hud .wpn .ammo { display: flex; align-items: baseline; gap: .12em; font-family: var(--fc); font-variant-numeric: tabular-nums; line-height: 1; }
#hud .wpn .ammo .mag { font-size: calc(52px * var(--hs)); font-weight: 600; letter-spacing: -.01em; color: var(--fg); transition: color .15s; }
#hud .wpn .ammo .sep { font-size: calc(26px * var(--hs)); font-weight: 400; color: var(--faint); margin: 0 .05em; }
#hud .wpn .ammo .res { font-size: calc(22px * var(--hs)); font-weight: 500; color: var(--dim); }
#hud .wpn.low .ammo .mag { color: var(--red); }
#hud .wpn.empty .ammo .mag { color: var(--red); animation: blink .5s steps(2, jump-none) infinite; }
@keyframes blink { to { opacity: .35; } }
#hud .wpn .sub { display: flex; align-items: center; gap: calc(14px * var(--hs)); font: 500 var(--s)/1 var(--fb); letter-spacing: .16em; color: var(--dim); }
#hud .wpn .sub .gr { display: flex; align-items: center; gap: .45em; color: var(--fg); }
#hud .wpn .sub .gr svg { width: calc(13px * var(--hs)); height: calc(15px * var(--hs)); fill: var(--fg); opacity: .9; }
#hud .wpn .sub .gr b { font: 600 var(--l)/1 var(--fc); font-variant-numeric: tabular-nums; }
#hud .wpn .sub .slot { display: flex; gap: 3px; }
#hud .wpn .sub .slot i { width: calc(14px * var(--hs)); height: 2px; background: rgba(233,236,239,.22); }
#hud .wpn .sub .slot i.on { background: var(--acc); }

/* center prompts (reload / pointer lock / toast) */
#hud .prompt { position: absolute; left: 50%; top: calc(50% + 46px * var(--hs)); transform: translate(-50%, 0); font: 600 var(--m)/1 var(--fc); letter-spacing: .22em; text-transform: uppercase; color: var(--fg); opacity: 0; transition: opacity .12s; white-space: nowrap; display: flex; align-items: center; gap: .5em; }
#hud .prompt.on { opacity: 1; animation: promptpulse 1s ease-in-out infinite; }
#hud .prompt.red { color: var(--red); }
#hud .prompt kbd { border-color: currentColor; font-family: var(--fc); font-weight: 600; font-size: var(--s); }
@keyframes promptpulse { 50% { opacity: .6; } }
#hud .lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; background: rgba(5,7,10,.35); }
#hud .lock.on { opacity: 1; visibility: visible; pointer-events: auto; cursor: pointer; transition: opacity .2s, visibility 0s; }
#hud .lock div { font: 600 calc(22px * var(--hs))/1 var(--fc); letter-spacing: .3em; text-transform: uppercase; padding: calc(14px * var(--hs)) calc(30px * var(--hs)); border: 1px solid rgba(233,236,239,.4); }
#hud .toast { position: absolute; left: 50%; bottom: calc(var(--safe-y) + 120px * var(--hs)); transform: translateX(-50%); font: 500 var(--s)/1 var(--fb); letter-spacing: .2em; text-transform: uppercase; color: var(--fg); padding: calc(7px * var(--hs)) calc(14px * var(--hs)); background: rgba(5,7,10,.55); border-left: 2px solid var(--acc); opacity: 0; transition: opacity .2s; white-space: nowrap; }
#hud .toast.on { opacity: 1; }

/* score popups */
#hud .pops { position: absolute; left: calc(50% + 34px * var(--hs)); top: calc(50% - 18px * var(--hs)); }
#hud .pops div { position: absolute; left: 0; top: 0; font: 600 var(--l)/1 var(--fc); letter-spacing: .08em; color: var(--fg); white-space: nowrap; animation: popup 1.1s var(--ease) both; will-change: transform, opacity; }
#hud .pops div.hs { color: var(--acc); }
@keyframes popup { 0% { opacity: 0; transform: translateY(6px) scale(.9); } 12% { opacity: 1; transform: translateY(0) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-24px * var(--hs))); } }

/* wave banner */
#hud .wave { position: absolute; left: 0; right: 0; top: 24%; text-align: center; opacity: 0; pointer-events: none; }
#hud .wave .t { font: 600 calc(48px * var(--hs))/1 var(--fc); letter-spacing: .32em; text-transform: uppercase; color: var(--fg); padding-left: .32em; }
#hud .wave .s { margin-top: calc(10px * var(--hs)); font: 500 var(--m)/1 var(--fb); letter-spacing: .34em; text-transform: uppercase; color: var(--red); padding-left: .34em; }
#hud .wave .ln { width: calc(160px * var(--hs)); height: 1px; background: var(--fg); margin: calc(14px * var(--hs)) auto 0; opacity: .6; }
#hud .wave.on { animation: wavefade 3.2s var(--ease) both; }
#hud .wave.on .t { animation: wavetrack 3.2s var(--ease) both; }
#hud .wave.on .ln { animation: waveline 3.2s var(--ease) both; }
@keyframes wavefade { 0% { opacity: 0; } 10% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wavetrack { 0% { letter-spacing: .7em; } 20% { letter-spacing: .32em; } 100% { letter-spacing: .38em; } }
@keyframes waveline { 0% { transform: scaleX(0); } 22% { transform: scaleX(1); } 100% { transform: scaleX(1); } }

/* scoreboard (Tab) */
#hud .board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: calc(360px * var(--hs)); background: rgba(5,7,10,.72); border-top: 2px solid var(--acc); padding: calc(18px * var(--hs)) calc(26px * var(--hs)); opacity: 0; transition: opacity .12s; }
#hud .board.on { opacity: 1; }
#hud .board h3 { font: 600 var(--l)/1 var(--fc); letter-spacing: .28em; text-transform: uppercase; color: var(--fg); margin-bottom: calc(14px * var(--hs)); }
#hud .board .row { display: flex; justify-content: space-between; gap: calc(30px * var(--hs)); padding: calc(7px * var(--hs)) 0; border-top: 1px solid var(--line); font: 500 var(--s)/1 var(--fb); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
#hud .board .row b { font: 600 var(--l)/1 var(--fc); color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* =========================================================
   MENUS
   ========================================================= */
#hud .backdrop { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,10,.94) 0%, rgba(5,7,10,.78) 34%, rgba(5,7,10,.42) 62%, rgba(5,7,10,.5) 100%); }
#hud .backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, transparent 30%, rgba(5,7,10,.55) 100%); }
#hud .pause .backdrop { background: rgba(5,7,10,.55); backdrop-filter: blur(10px) saturate(.7); -webkit-backdrop-filter: blur(10px) saturate(.7); }
#hud .pause .backdrop::after { background: linear-gradient(90deg, rgba(5,7,10,.5), transparent 60%); }

#hud .col { position: absolute; left: var(--safe-x); top: var(--safe-y); bottom: var(--safe-y); width: calc(420px * var(--hs)); display: flex; flex-direction: column; justify-content: center; }
#hud .eyebrow { font: 500 var(--s)/1 var(--fb); letter-spacing: .34em; text-transform: uppercase; color: var(--acc); display: flex; align-items: center; gap: calc(10px * var(--hs)); }
#hud .eyebrow::before { content: ""; width: calc(22px * var(--hs)); height: 1px; background: var(--acc); }
#hud .title { font: 700 calc(128px * var(--hs))/.9 var(--fc); letter-spacing: .04em; text-transform: uppercase; color: var(--fg); margin: calc(10px * var(--hs)) 0 0 calc(-4px * var(--hs)); }
#hud .title.sm { font-size: calc(72px * var(--hs)); }
#hud .subtitle { font: 500 var(--m)/1 var(--fb); letter-spacing: .36em; text-transform: uppercase; color: var(--dim); margin-top: calc(8px * var(--hs)); display: flex; align-items: center; gap: calc(14px * var(--hs)); }
#hud .subtitle::after { content: ""; flex: 1; height: 1px; background: var(--line); transform-origin: left; }
#hud .menu { margin-top: calc(44px * var(--hs)); display: flex; flex-direction: column; gap: calc(2px * var(--hs)); }
#hud .mi { position: relative; display: flex; align-items: center; height: calc(46px * var(--hs)); padding-left: calc(22px * var(--hs)); font: 600 calc(26px * var(--hs))/1 var(--fc); letter-spacing: .16em; text-transform: uppercase; color: rgba(233,236,239,.6); transition: color .15s, letter-spacing .25s var(--ease); overflow: hidden; }
#hud .mi::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(233,236,239,.13), rgba(233,236,239,0) 80%); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
#hud .mi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acc); transform: scaleY(0); transition: transform .22s var(--ease); }
#hud .mi span { position: relative; }
#hud .mi small { position: relative; font: 500 var(--xs)/1 var(--fm); letter-spacing: .1em; color: var(--faint); margin-right: calc(16px * var(--hs)); transition: color .15s; }
#hud .mi.sel { color: var(--fg); letter-spacing: .2em; }
#hud .mi.sel::before { transform: scaleX(1); }
#hud .mi.sel::after { transform: scaleY(1); }
#hud .mi.sel small { color: var(--acc); }
#hud .mi.primary.sel { color: #fff; }

/* corner tags */
#hud .tag-bl { position: absolute; left: var(--safe-x); bottom: var(--safe-y); font: 500 var(--xs)/1.6 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
#hud .tag-bl b { color: var(--dim); font-weight: 500; }
#hud .tag-br { position: absolute; right: var(--safe-x); bottom: var(--safe-y); display: flex; gap: calc(22px * var(--hs)); font: 500 var(--xs)/1 var(--fb); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
#hud .tag-br span { display: flex; align-items: center; }
#hud .tag-tr { position: absolute; right: var(--safe-x); top: var(--safe-y); text-align: right; font: 500 var(--xs)/1.7 var(--fb); letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
#hud .tag-tr b { color: var(--fg); font-weight: 600; }
#hud .tag-tr i { display: inline-block; width: 6px; height: 6px; background: var(--acc); margin-right: .6em; vertical-align: 1px; animation: blink 1.6s steps(2, jump-none) infinite; }

/* entrance stagger */
#hud .layer.ui .in { opacity: 0; transform: translateX(calc(-14px * var(--hs))); }
#hud .layer.ui.on .in { animation: slidein .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + 60ms); }
#hud .layer.ui .in.up { transform: translateY(calc(12px * var(--hs))); }
#hud .layer.ui.on .in.up { animation-name: slideup; }
@keyframes slidein { from { opacity: 0; transform: translateX(calc(-14px * var(--hs))); } to { opacity: 1; transform: none; } }
@keyframes slideup { from { opacity: 0; transform: translateY(calc(12px * var(--hs))); } to { opacity: 1; transform: none; } }

/* ---------- side panel (settings / controls) ---------- */
#hud .panel { position: absolute; top: 50%; left: calc(var(--safe-x) + 470px * var(--hs)); width: calc(480px * var(--hs)); max-height: calc(100% - 2 * var(--safe-y)); min-height: calc(300px * var(--hs)); --ty: -50%; background: linear-gradient(180deg, rgba(5,7,10,.62), rgba(5,7,10,.5)); border-left: 1px solid rgba(233,236,239,.12); padding: calc(26px * var(--hs)) calc(30px * var(--hs)); opacity: 0; visibility: hidden; transform: translate(calc(14px * var(--hs)), var(--ty)); transition: opacity .28s var(--ease), transform .32s var(--ease), visibility 0s .3s; overflow: hidden; display: flex; flex-direction: column; }
#hud .panel.on { opacity: 1; visibility: visible; transform: translate(0, var(--ty)); transition: opacity .28s var(--ease), transform .32s var(--ease), visibility 0s; }
#hud .panel h2 { font: 600 calc(28px * var(--hs))/1 var(--fc); letter-spacing: .22em; text-transform: uppercase; color: var(--fg); padding-bottom: calc(12px * var(--hs)); border-bottom: 1px solid rgba(233,236,239,.18); display: flex; justify-content: space-between; align-items: baseline; }
#hud .panel h2 small { font: 500 var(--xs)/1 var(--fb); letter-spacing: .2em; color: var(--dim); }
#hud .panel .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; margin-top: calc(6px * var(--hs)); }
#hud .panel .body::-webkit-scrollbar { display: none; }
#hud .panel h4 { font: 500 var(--xs)/1 var(--fb); letter-spacing: .3em; text-transform: uppercase; color: var(--acc); margin: calc(20px * var(--hs)) 0 calc(6px * var(--hs)); }
#hud .row { display: flex; align-items: center; justify-content: space-between; height: calc(40px * var(--hs)); border-bottom: 1px solid var(--line); padding: 0 calc(8px * var(--hs)); transition: background .12s; }
#hud .row:hover, #hud .row:focus-within { background: rgba(233,236,239,.05); }
#hud .row label { font: 500 var(--s)/1 var(--fb); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
#hud .row:hover label { color: var(--fg); }
#hud .ctl { display: flex; align-items: center; gap: calc(10px * var(--hs)); width: calc(210px * var(--hs)); justify-content: flex-end; }
#hud .ctl .val { font: 600 var(--m)/1 var(--fc); letter-spacing: .08em; color: var(--fg); min-width: calc(44px * var(--hs)); text-align: right; font-variant-numeric: tabular-nums; }
#hud input[type=range] { -webkit-appearance: none; appearance: none; width: calc(150px * var(--hs)); height: 2px; background: linear-gradient(90deg, var(--fg) var(--p, 50%), rgba(233,236,239,.2) var(--p, 50%)); outline: none; cursor: pointer; }
#hud input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: calc(14px * var(--hs)); background: var(--fg); border: 0; }
#hud input[type=range]:hover::-webkit-slider-thumb, #hud input[type=range]:focus::-webkit-slider-thumb { background: var(--acc); }
#hud .cyc { display: flex; align-items: center; justify-content: space-between; width: calc(150px * var(--hs)); height: calc(26px * var(--hs)); }
#hud .cyc button { width: calc(22px * var(--hs)); height: 100%; display: flex; align-items: center; justify-content: center; color: var(--dim); font: 500 calc(22px * var(--hs))/1 var(--fc); transition: color .12s; }
#hud .cyc button:hover { color: var(--acc); }
#hud .cyc .val { flex: 1; text-align: center; font: 600 var(--m)/1 var(--fc); letter-spacing: .2em; text-transform: uppercase; color: var(--fg); min-width: 0; }
#hud .cyc .val.off { color: var(--dim); }
#hud .cyc .val.on { color: var(--acc); }
#hud .panel .foot { margin-top: calc(14px * var(--hs)); padding-top: calc(12px * var(--hs)); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font: 500 var(--xs)/1 var(--fb); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
#hud .panel .foot button { color: var(--dim); letter-spacing: .18em; text-transform: uppercase; font: 500 var(--xs)/1 var(--fb); transition: color .12s; }
#hud .panel .foot button:hover { color: var(--acc); }

/* controls list */
#hud .panel.controls { width: max-content; min-width: calc(480px * var(--hs)); max-width: calc(100vw - var(--safe-x) - 470px * var(--hs) - 24px); }
#hud .keys { display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); column-gap: calc(28px * var(--hs)); }
#hud .keys .row { min-height: calc(36px * var(--hs)); height: auto; gap: calc(16px * var(--hs)); padding: calc(4px * var(--hs)) calc(8px * var(--hs)); }
#hud .keys .row label { white-space: nowrap; }
#hud .keys .row .ctl { width: auto; flex-shrink: 0; white-space: nowrap; gap: calc(4px * var(--hs)); }
#hud .keys kbd { margin: 0; }

/* ---------- buttons (dead / victory) ---------- */
#hud .btns { display: flex; gap: calc(14px * var(--hs)); margin-top: calc(38px * var(--hs)); }
#hud .btn { font: 600 var(--l)/1 var(--fc); letter-spacing: .24em; text-transform: uppercase; padding: calc(13px * var(--hs)) calc(34px * var(--hs)) calc(13px * var(--hs)) calc(36px * var(--hs)); border: 1px solid rgba(233,236,239,.42); color: var(--fg); transition: background .15s, color .15s, border-color .15s, transform .15s var(--ease); position: relative; }
#hud .btn:hover, #hud .btn.sel { border-color: var(--fg); background: rgba(233,236,239,.1); }
#hud .btn.primary { background: var(--fg); color: var(--ink); border-color: var(--fg); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
#hud .btn.primary:hover, #hud .btn.primary.sel { background: var(--acc); border-color: var(--acc); color: var(--ink); }

/* ---------- stats block ---------- */
#hud .stats { display: flex; gap: calc(26px * var(--hs)); margin-top: calc(30px * var(--hs)); }
#hud .stats div { display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--hs)); min-width: calc(84px * var(--hs)); }
#hud .stats label { font: 500 var(--xs)/1 var(--fb); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
#hud .stats b { font: 600 calc(44px * var(--hs))/1 var(--fc); letter-spacing: .02em; color: var(--fg); font-variant-numeric: tabular-nums; }
#hud .stats b.red { color: var(--red); }

/* ---------- death ---------- */
#hud .dead .backdrop { background: rgba(5,7,10,.62); }
#hud .dead .backdrop::after { background: radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(60,4,2,.7) 100%); }
#hud .dead.on .flash { animation: redflash .9s ease-out both; }
@keyframes redflash { 0% { opacity: 1; } 100% { opacity: 0; } }
#hud .center { position: absolute; left: var(--safe-x); right: var(--safe-x); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; }
#hud .center .stats { justify-content: center; }
#hud .kia { font: 700 calc(150px * var(--hs))/.9 var(--fc); letter-spacing: .12em; padding-left: .12em; color: var(--fg); text-transform: uppercase; }
#hud .dead.on .kia { animation: kia 1.1s var(--ease) both; }
@keyframes kia { 0% { opacity: 0; letter-spacing: .5em; filter: blur(6px); } 40% { opacity: 1; filter: blur(0); } 100% { letter-spacing: .12em; } }
#hud .center .sub { margin-top: calc(6px * var(--hs)); font: 500 var(--m)/1 var(--fb); letter-spacing: .4em; text-transform: uppercase; color: var(--red); padding-left: .4em; }
#hud .center .rule { width: calc(64px * var(--hs)); height: 2px; background: var(--red); margin-top: calc(18px * var(--hs)); }

/* ---------- victory ---------- */
#hud .vic .shut { position: absolute; left: 0; right: 0; height: 50%; background: var(--ink); transform: translateY(-101%); }
#hud .vic .shut.b { top: 50%; transform: translateY(101%); }
#hud .vic .shut.t { top: 0; }
#hud .vic .seam { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--acc); transform: scaleX(0); }
#hud .vic.on .shut.t { animation: shutT 2.4s var(--ease) both; }
#hud .vic.on .shut.b { animation: shutB 2.4s var(--ease) both; }
#hud .vic.on .seam { animation: seam 2.4s var(--ease) both; }
@keyframes shutT { 0% { transform: translateY(-101%); } 28% { transform: translateY(0); } 52% { transform: translateY(0); } 100% { transform: translateY(-78%); } }
@keyframes shutB { 0% { transform: translateY(101%); } 28% { transform: translateY(0); } 52% { transform: translateY(0); } 100% { transform: translateY(78%); } }
@keyframes seam { 0% { transform: scaleX(0); opacity: 1; } 28% { transform: scaleX(0); opacity: 1; } 40% { transform: scaleX(1); } 56% { opacity: 1; } 70% { opacity: 0; transform: scaleX(1); } 100% { opacity: 0; } }
#hud .vic .backdrop { background: radial-gradient(ellipse at 50% 55%, rgba(5,7,10,.78) 20%, rgba(5,7,10,.5) 100%); opacity: 0; }
#hud .vic.on .backdrop { animation: fadein .6s 1.1s var(--ease) both; }
@keyframes fadein { to { opacity: 1; } }
#hud .vic .center { opacity: 0; }
#hud .vic.on .center { animation: fadein .1s 1.15s both; }
#hud .vic .mc { font: 700 calc(96px * var(--hs))/.95 var(--fc); letter-spacing: .16em; padding-left: .16em; text-transform: uppercase; color: var(--fg); }
#hud .vic.on .mc { animation: mc 1.2s 1.15s var(--ease) both; }
@keyframes mc { 0% { opacity: 0; letter-spacing: .5em; } 100% { opacity: 1; letter-spacing: .16em; } }
#hud .vic.on .in { animation-delay: calc(var(--i, 0) * 70ms + 1500ms) !important; }
#hud .vic .center .sub { color: var(--acc); }
#hud .vic .center .rule { background: var(--acc); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) { #hud * { animation-duration: .01s !important; transition-duration: .01s !important; } }

/* ---------- map selector ---------- */
#hud .panel.maps { width: min(calc(900px * var(--hs)), calc(100vw - var(--safe-x) - 470px * var(--hs) - 24px)); }
#hud .mapcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(250px * var(--hs)), 1fr)); gap: calc(14px * var(--hs)); padding: calc(8px * var(--hs)) 0; }
#hud .mapcard { all: unset; cursor: pointer; display: block; background: rgba(255,255,255,.03); border: 1px solid rgba(233,236,239,.14); transition: border-color .18s, background .18s, transform .18s; opacity: 0; animation: cardIn .45s var(--ease) forwards; animation-delay: calc(60ms * var(--i)); }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#hud .mapcard:hover, #hud .mapcard.sel { border-color: var(--acc); background: rgba(233,162,59,.08); transform: translateY(-2px); }
#hud .mapcard.cur { border-color: rgba(233,162,59,.55); }
#hud .mapcard.go { transform: scale(.98); opacity: .6; }
#hud .mapcard .thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(160deg, #1b2431, #0a0e15 60%, #2a1f12); }
#hud .mapcard.t-day .thumb { background: linear-gradient(160deg, #9fb3c8, #5d6b7a 55%, #c9a97a); }
#hud .mapcard .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9) contrast(1.05); transition: transform .4s var(--ease); }
#hud .mapcard:hover .thumb img { transform: scale(1.04); }
#hud .mapcard .pill { position: absolute; left: 8px; top: 8px; font: 600 var(--xs)/1 var(--fb); letter-spacing: .18em; padding: 5px 8px; background: rgba(5,7,10,.7); color: var(--fg); border: 1px solid rgba(233,236,239,.25); }
#hud .mapcard .thumb .cur { position: absolute; right: 8px; top: 8px; font: 700 var(--xs)/1 var(--fb); letter-spacing: .18em; padding: 5px 8px; background: var(--acc); color: #111; text-transform: uppercase; }
#hud .mapcard .nm { font: 700 calc(22px * var(--hs))/1.1 var(--fc); letter-spacing: .16em; text-transform: uppercase; color: var(--fg); padding: calc(12px * var(--hs)) calc(12px * var(--hs)) 2px; }
#hud .mapcard .sb { font: 500 var(--xs)/1.2 var(--fb); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); padding: 0 calc(12px * var(--hs)); }
#hud .mapcard .ds { font: 400 calc(13px * var(--hs))/1.4 var(--fb); color: var(--dim); padding: calc(8px * var(--hs)) calc(12px * var(--hs)) calc(14px * var(--hs)); }

/* ---------- loadout ---------- */
#hud .mainmenu .loadsum { font: 500 var(--xs)/1 var(--fb); letter-spacing: .28em; text-transform: uppercase; color: var(--dim); margin-top: calc(6px * var(--hs)); }
#hud .panel.loadout { width: min(calc(820px * var(--hs)), calc(100vw - var(--safe-x) - 470px * var(--hs) - 24px)); }
#hud .panel.loadout .body { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(18px * var(--hs)); }
#hud .lcol h3 { font: 600 var(--s)/1 var(--fb); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); margin: calc(10px * var(--hs)) 0 calc(8px * var(--hs)); }
#hud .wrow { all: unset; display: block; cursor: pointer; width: 100%; box-sizing: border-box; padding: calc(10px * var(--hs)) calc(12px * var(--hs)); margin-bottom: calc(8px * var(--hs)); border: 1px solid rgba(233,236,239,.12); background: rgba(255,255,255,.025); transition: border-color .18s, background .18s; opacity: 0; animation: cardIn .4s var(--ease) forwards; animation-delay: calc(50ms * var(--i)); }
#hud .wrow:hover, #hud .wrow.sel { border-color: var(--acc); background: rgba(233,162,59,.08); }
#hud .wrow.cur { border-color: rgba(233,162,59,.6); }
#hud .wrow .hd { display: flex; align-items: baseline; gap: calc(10px * var(--hs)); }
#hud .wrow .cls { font: 600 var(--xs)/1 var(--fb); letter-spacing: .2em; padding: 3px 6px; border: 1px solid rgba(233,236,239,.25); color: var(--dim); text-transform: uppercase; }
#hud .wrow .nm { font: 700 calc(20px * var(--hs))/1 var(--fc); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
#hud .wrow .tick { margin-left: auto; font: 700 var(--xs)/1 var(--fb); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
#hud .wrow .bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(8px * var(--hs)); margin-top: calc(8px * var(--hs)); }
#hud .wrow .b label { display: block; font: 600 calc(9.5px * var(--hs))/1 var(--fb); letter-spacing: .2em; color: var(--faint); margin-bottom: 3px; }
#hud .wrow .b i { display: block; height: 3px; background: rgba(233,236,239,.12); position: relative; }
#hud .wrow .b i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: var(--fg); }
#hud .wrow.cur .b i::after { background: var(--acc); }
#hud .wrow .ds { font: 400 calc(12px * var(--hs))/1.35 var(--fb); color: var(--dim); margin-top: calc(6px * var(--hs)); }

/* ---------- phones (landscape, short viewport): scrollable compact panels ---------- */
#hud .panel .body { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
@media (max-height: 560px) {
  #hud .panel.maps, #hud .panel.loadout { width: min(66vw, calc(100vw - var(--safe-x) - 300px * var(--hs) - 16px)); left: auto; right: var(--safe-x); }
  #hud .mapcards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #hud .mapcard .ds { display: none; }
  #hud .mapcard .nm { font-size: 15px; padding: 8px 8px 2px; }
  #hud .mapcard .sb { font-size: 9px; padding: 0 8px 8px; }
  #hud .panel.loadout .body { grid-template-columns: 1fr; gap: 8px; }
  #hud .wrow { padding: 7px 9px; margin-bottom: 6px; }
  #hud .wrow .ds { display: none; }
  #hud .wrow .nm { font-size: 15px; }
}

/* phones / short screens: the main + pause menus fit without scrolling */
@media (max-height: 560px) {
  #hud .title { font-size: calc(78px * var(--hs)); }
  #hud .title.sm { font-size: calc(56px * var(--hs)); }
  #hud .mainmenu .eyebrow, #hud .mainmenu .loadsum, #hud .pause .eyebrow, #hud .pause .brief, #hud .tag-bl, #hud .tag-br { display: none; }
  #hud .mi { height: calc(38px * var(--hs)); font-size: calc(22px * var(--hs)); }
}

/* sniper scope view: the scope overlay owns the reticle */
#hud.scoped .xh, #hud.scoped .compass, #hud.scoped .obj { opacity: 0 !important; }

/* ---------- mission framing ---------- */
#hud .mainmenu .brief { max-width: calc(440px * var(--hs)); margin-top: calc(14px * var(--hs)); font: 400 calc(13px * var(--hs))/1.45 var(--fb); color: var(--dim); border-left: 2px solid var(--acc); padding-left: calc(12px * var(--hs)); }
#hud .mainmenu .brief b { color: var(--acc); letter-spacing: .2em; font-weight: 600; }
#hud .deploybrief { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -10px); width: min(560px, 80vw); text-align: center; opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
#hud .deploybrief.on { opacity: 1; transform: translate(-50%, 0); }
#hud .deploybrief .k { font: 700 calc(15px * var(--hs))/1 var(--fc); letter-spacing: .32em; color: var(--acc); text-transform: uppercase; margin-bottom: 8px; }
#hud .deploybrief .v { font: 400 calc(14px * var(--hs))/1.45 var(--fb); color: var(--fg); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
@media (max-height: 560px) { #hud .mainmenu .brief { display: none; } }

/* chill mode (GTA): no Wave / Score / Mercs; death is WASTED, an arrest BUSTED — big italic script, the card after the slow-mo */
#hud.chill .obj { display: none; }
#hud .dead.gta .stats, #hud .dead.gta .rule, #hud .dead.gta .center > .grid, #hud .dead.gta [class*='stat'] { display: none !important; }
#hud .dead.gta .kia, #hud .dead.on.gta .kia { font: italic 900 clamp(64px, 13vw, 168px)/1 "Pricedown", "Impact", "Arial Black", sans-serif; letter-spacing: .02em; color: #c0141c; -webkit-text-stroke: 3px #000; text-shadow: 0 4px 0 #000; animation: gtaIn .5s 1.5s both; }
#hud .dead.gta .sub, #hud .dead.gta .btns { animation: gtaIn .5s 1.9s both; }
#hud .dead.gta .backdrop { background: rgba(0,0,0,.25); }
@keyframes gtaIn { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } }
#gtaBusted { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 60; pointer-events: none; font: italic 900 clamp(64px, 13vw, 168px)/1 "Pricedown", "Impact", "Arial Black", sans-serif; color: #1f5fd8; -webkit-text-stroke: 3px #000; text-shadow: 0 4px 0 #000; }
#gtaBusted.on { display: flex; animation: gtaIn .5s 1.4s both; }