/* Jetstick in-match HUD, "Quiet Frame" (HD-Master): thin skewed outlines, faint fills, condensed caps, lime = you, cyan = jet, red = enemy.
   Motion is driven from hud.js (deterministic, reduced-motion aware); this file only lays out and styles. */
:root{
 /* One place for the HUD face; production swaps in the self-hosted woff2 under the same family name. */
 --js-font:"Barlow Condensed","Arial Narrow",sans-serif;
 --js-text:#edf2e7;--js-lime:#c5fa69;--js-cyan:#80d9e9;--js-red:#ff927d;--js-muted:#829c9d;--js-ground:#09171e;
 --js-line:rgba(237,242,231,.2);--js-fill:rgba(9,23,30,.4);--js-skew:-14deg;
}

/* ---------- Shared buttons (05 PAUSE CONTROLS), reused by the menus ---------- */
.js-btn-primary,.js-btn-ghost{position:relative;display:inline-flex;align-items:center;gap:.7em;min-height:2.9em;padding:.55em 1.6em .5em 1.3em;border:0;background:none;cursor:pointer;
 font:700 1.35em/1 var(--js-font);letter-spacing:.06em;text-transform:uppercase;isolation:isolate}
.js-btn-primary::before,.js-btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));transition:background .12s,border-color .12s,box-shadow .12s}
.js-btn-primary{color:var(--js-ground)}
.js-btn-primary::before{background:linear-gradient(100deg,#d4ff82,var(--js-lime) 45%,#aee451);box-shadow:0 0 18px rgba(197,250,105,.25)}
.js-btn-primary:hover::before,.js-btn-primary:focus-visible::before{box-shadow:0 0 26px rgba(197,250,105,.45)}
.js-btn-ghost{color:#b9c9c6}
.js-btn-ghost::before{border:1px solid var(--js-line);background:rgba(9,23,30,.4)}
.js-btn-ghost:hover::before,.js-btn-ghost:focus-visible::before{border-color:rgba(237,242,231,.45);background:rgba(237,242,231,.06)}
.js-btn-primary:focus-visible,.js-btn-ghost:focus-visible{outline:none}
.js-btn-primary svg,.js-btn-ghost svg{width:1em;height:1em;fill:currentColor}

/* ---------- HUD root ---------- */
/* Sizes follow the query container: the game mounts the HUD in a .jhud-frame over the arena (game-hud.js), which sits inside a
   page with a header and footer, below the menu overlay. Without a container (hud-preview.html) cqw/cqh are the viewport units. */
.jhud-frame{position:absolute;inset:0;z-index:0;pointer-events:none;container-type:size}
.jhud{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;user-select:none;-webkit-user-select:none;
 font-family:var(--js-font);font-weight:600;color:var(--js-text);text-transform:uppercase;letter-spacing:.06em;
 font-size:clamp(9px,min(1cqw,1.78cqh),20px);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.jhud[data-mode=touch]{font-size:clamp(9px,min(1.6cqw,2.9cqh),14px)}
.jhud.hidden{visibility:hidden}
.jhud b,.jhud strong{font-weight:700}
.jhud svg{display:block;overflow:visible}
.jh-num{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em;line-height:.9}
.jh-lab{font-size:1.05em;letter-spacing:.14em;color:var(--js-muted);text-shadow:0 0 8px rgba(9,23,30,.9),0 1px 0 rgba(0,0,0,.5)}
.jh-sep{width:1px;align-self:stretch;background:var(--js-line);margin:.2em 1.1em}
/* Skewed outline plate behind a block; content stays upright. */
.jh-plate{position:relative;isolation:isolate}
.jh-plate::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid var(--js-line);background:var(--js-fill)}
.jh-shadow{text-shadow:0 1px 0 rgba(0,0,0,.45),0 0 14px rgba(9,23,30,.6)}

/* ---------- 01 Health + fuel ---------- */
.jh-vitals{position:absolute;left:2.2em;bottom:2em;display:flex;align-items:center;padding:.7em 1.6em .7em 1.3em}
.jh-hp{display:flex;align-items:center;gap:.5em}
.jh-hp .jh-num{font-size:4.6em;min-width:1.9em;text-align:right}
.jh-helmet{width:3em;height:2.7em;color:var(--js-text)}
.jh-helmet.off{color:rgba(237,242,231,.22)}
.jh-bars{display:flex;flex-direction:column;gap:.85em}
.jh-row{display:flex;align-items:center;gap:.9em}
.jh-row .jh-lab{width:2.1em}
.jh-bar{position:relative;width:15em;height:.95em;transform:skewX(var(--js-skew));background:rgba(237,242,231,.07);border:1px solid rgba(237,242,231,.1);overflow:hidden}
.jh-bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0)}
.jh-bar .fill{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%),var(--c,var(--js-lime))}
.jh-bar .trail{background:var(--js-red);opacity:.85}
.jh-bar.jet{width:13em;--c:var(--js-cyan)}
.jh-bar.jet.locked{--c:var(--js-red)}
.jh-val{font-size:1.25em;font-weight:700;min-width:2.6em}
.jh-vitals.low .jh-hp .jh-num{color:var(--js-red)}
.jh-vitals.low .jh-bar.hp{--c:var(--js-red)}
.jh-boost{position:absolute;left:1.3em;top:-1.9em;font-size:1em;letter-spacing:.14em;color:var(--js-lime)}

/* ---------- 02 Score + timer ---------- */
.jh-score{position:absolute;top:1.6em;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.jh-sbar{display:flex;align-items:center;padding:.35em 2.2em .3em}
.jh-sbar .jh-num{font-size:3.3em;min-width:1.4em;text-align:center}
.jh-sbar .you{color:var(--js-lime)}.jh-sbar .opp{color:var(--js-red)}.jh-sbar .time{min-width:2.5em;color:var(--js-text)}
.jh-sbar .jh-sep{margin:.25em 1.2em}
.jh-score.ot .time{color:var(--js-red)}
.jh-ssub{display:flex;justify-content:space-between;width:100%;padding:.3em 2.4em 0;font-size:.95em;letter-spacing:.16em;color:var(--js-muted)}
.jh-ssub .mid{color:var(--js-muted)}
/* Solo (practice): one number, so its two labels centre under it instead of spreading to the corners. */
.jh-score.solo .jh-ssub{justify-content:center;gap:1.2em}
.jh-score.ot .jh-ssub .mid{color:var(--js-red)}
.jh-top{display:flex;gap:1.4em;margin-top:.35em;font-size:1em;letter-spacing:.1em;color:var(--js-muted)}
.jh-top span.me{color:var(--js-lime)}
.jh-top em{font-style:normal;color:var(--js-text);margin-left:.35em}

/* ---------- Kill feed ---------- */
.jh-feed{position:absolute;top:1.8em;right:2.2em;display:flex;flex-direction:column;align-items:flex-end;gap:.4em}
.jh-kill{display:flex;align-items:center;gap:.6em;padding:.28em 1.1em .24em;font-size:1.1em;letter-spacing:.08em;white-space:nowrap}
.jh-kill .a,.jh-kill .v{font-weight:700;color:var(--js-text)}
.jh-kill .me{color:var(--js-lime)}.jh-kill .foe{color:var(--js-red)}
.jh-kill .w{width:3.2em;height:1.1em;color:#c9d6d2}
.jh-kill .sk{width:1em;height:1em;color:var(--js-red)}
.jh-kill.mine::before{border-color:rgba(197,250,105,.35)}

/* ---------- 03 Weapons + ammo, 04 dash ---------- */
.jh-arms{position:absolute;right:2.2em;bottom:2em;display:flex;align-items:center}
.jh-slots{display:flex;gap:.6em}
.jh-slot{position:relative;width:7.6em;height:4.1em;display:flex;align-items:center;justify-content:center;color:#7f9597;isolation:isolate}
.jh-slot::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid rgba(237,242,231,.16);background:rgba(9,23,30,.3)}
.jh-slot svg{width:5.6em;height:1.75em}
/* Five or six weapons (both pickups on a full loadout) narrow the desktop slots so the row stays clear of the vitals (touch shows
   only the active slot). */
.jhud:not([data-mode=touch]) .jh-slots:has(>.jh-slot:nth-child(5)) .jh-slot{width:6.4em}
.jhud:not([data-mode=touch]) .jh-slots:has(>.jh-slot:nth-child(5)) .jh-slot svg{width:4.8em;height:1.5em}
.jhud:not([data-mode=touch]) .jh-slots:has(>.jh-slot:nth-child(6)) .jh-slot{width:5.6em}
.jhud:not([data-mode=touch]) .jh-slots:has(>.jh-slot:nth-child(6)) .jh-slot svg{width:4.2em;height:1.3em}
.jh-slot .key{position:absolute;left:.7em;top:.3em;font-size:.85em;color:rgba(237,242,231,.35)}
.jh-slot.on{color:var(--js-text)}
.jh-slot.on::before{border-color:var(--js-lime);background:rgba(197,250,105,.08)}
/* Lime corner accents on the active slot (top-left and bottom-right), as on the board. */
.jh-slot.on::after{content:"";position:absolute;inset:-2px;z-index:1;transform:skewX(var(--js-skew));
 background:linear-gradient(135deg,var(--js-lime) 0 .55em,transparent .56em) top left/1.1em 1.1em no-repeat,linear-gradient(-45deg,var(--js-lime) 0 .55em,transparent .56em) bottom right/1.1em 1.1em no-repeat}
.jh-slot .name{position:absolute;top:calc(100% + .35em);left:0;right:0;text-align:center;font-size:1.05em;font-weight:700;color:var(--js-text);letter-spacing:.1em;display:none}
.jh-slot.on .name{display:block}
.jh-slot .tbar{position:absolute;left:.6em;right:.6em;bottom:.35em;height:.22em;background:rgba(237,242,231,.12);display:none}
.jh-slot .tbar i{position:absolute;inset:0;background:var(--js-lime);transform-origin:0 50%}
.jh-slot.timed .tbar{display:block}
.jh-slot .tleft{position:absolute;right:.6em;top:.3em;font-size:.9em;color:var(--js-lime);display:none}
.jh-slot.timed .tleft{display:block}
.jh-ammo{position:relative;display:flex;align-items:baseline;gap:.35em;min-width:8em}
.jh-ammo .jh-num{font-size:4.6em}
.jh-ammo .mag{font-size:2.1em;font-weight:700;color:var(--js-text);opacity:.85}
.jh-ammo.empty .jh-num{color:var(--js-red)}
.jh-rel{position:absolute;left:0;right:0;bottom:-.75em;height:.28em;transform:skewX(var(--js-skew));background:rgba(237,242,231,.1);display:none}
.jh-rel i{position:absolute;inset:0;background:var(--js-lime);transform-origin:0 50%}
.jh-ammo .state{position:absolute;left:0;top:-1.5em;font-size:1em;letter-spacing:.16em;color:var(--js-muted);display:none}
.jh-ammo.reloading .jh-rel,.jh-ammo.reloading .state{display:block}
.jh-ammo.reloading .jh-num{opacity:.4}
.jh-dash{display:flex;align-items:stretch;gap:.8em;min-width:8.5em;margin-right:1.6em}
.jh-dash .edge{width:.28em;transform:skewX(var(--js-skew));background:var(--js-lime)}
.jh-dash .txt{display:flex;flex-direction:column;justify-content:center;padding-left:.5em}
.jh-dash .lab{font-size:1.1em;letter-spacing:.14em;color:#a9bcbd;text-shadow:0 0 8px rgba(9,23,30,.95),0 1px 0 rgba(0,0,0,.6)}
.jh-dash .st{font-size:2em;font-weight:700;color:var(--js-lime);line-height:1}
.jh-dash.cool .st,.jh-slot .tleft,.jh-boost{text-transform:none}
.jh-dash .cbar{margin-top:.35em;width:8em;height:.3em;transform:skewX(var(--js-skew));background:rgba(237,242,231,.1);position:relative;display:none}
.jh-dash .cbar i{position:absolute;inset:0;background:var(--js-red);transform-origin:0 50%}
.jh-dash.cool .edge{background:rgba(128,217,233,.45)}
.jh-dash.cool .st{color:var(--js-text)}
.jh-dash.cool .cbar{display:block}
.jh-dash .key{font-size:.85em;color:rgba(237,242,231,.6);letter-spacing:.14em}

/* ---------- 06 Hit feedback, banners, countdown ---------- */
/* A faint dark backing under the bottom band keeps small labels legible over bright backgrounds without opaque panels. */
.jh-band{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(to top,rgba(9,23,30,.25),rgba(9,23,30,.14) 45%,rgba(9,23,30,0))}
.jhud[data-mode=touch] .jh-band{height:14%}
.jh-fx{position:absolute;inset:0}
.jh-hit{position:absolute;width:3.4em;height:3.4em;margin:-1.7em 0 0 -1.7em;opacity:0}
.jh-hit .x{stroke:var(--js-text);stroke-width:2.2;stroke-linecap:round}
.jh-hit.kill .x{stroke:var(--js-red);stroke-width:2.8}
.jh-hit .ring,.jh-hit .skull{display:none}
.jh-hit.head .ring{display:block;stroke:var(--js-text);stroke-width:1.6;fill:none}
.jh-hit.head .skull{display:block;fill:var(--js-red)}
.jh-hit.head .x{display:none}
/* HEADSHOT tag sits beside the reticle (hud.js positions it), about 60 % of a banner, gone within 700 ms. */
.jh-hs{position:absolute;left:50%;top:50%;opacity:0;display:flex;align-items:center;gap:.35em;isolation:isolate;white-space:nowrap}
.jh-hs .splash{position:absolute;left:50%;top:50%;width:15.6em;height:5.4em;transform:translate(-46%,-52%) rotate(-8deg);z-index:-1}
.jh-hs strong{font:italic 800 2.2em/1 var(--js-font);letter-spacing:.08em;color:var(--js-text);text-shadow:0 2px 0 rgba(60,0,0,.5)}
.jh-hs .sk{width:1.45em;height:1.45em;color:var(--js-red)}
.jh-banner{position:absolute;left:50%;top:19%;transform:translate(-50%,-50%);opacity:0;padding:.35em 2.2em .3em 2em}
.jh-banner::before{border-left:3px solid var(--tone,var(--js-lime))}
.jh-banner strong{font:italic 800 3.1em/1 var(--js-font);letter-spacing:.1em;color:var(--tone,var(--js-lime));white-space:nowrap}
.jh-banner small{display:block;text-align:center;font-size:1.05em;letter-spacing:.3em;color:var(--js-muted);margin-top:.25em}
.jh-count{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);opacity:0;text-align:center}
.jh-count strong{display:block;font:italic 800 10em/.9 var(--js-font);color:var(--js-lime);letter-spacing:.02em;text-shadow:0 0 40px rgba(197,250,105,.25)}
.jh-count small{display:block;font-size:1.25em;letter-spacing:.42em;color:var(--js-muted);margin-top:.4em}
.jh-edge{position:absolute;inset:0;width:100%;height:100%}
.jh-edge .arc{fill:none;stroke:var(--js-red);stroke-linecap:round}
.jh-edge .arc.core{stroke:#ffd0c4}
.jh-edge .threat{fill:none;stroke:var(--js-red);stroke-width:2.5;stroke-linejoin:round}
.jh-edge .threat.fill{fill:var(--js-red);stroke:rgba(9,23,30,.7);stroke-width:1.5}
.jh-vig{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,rgba(158,27,27,0) 55%,rgba(158,27,27,.55) 100%)}

/* ---------- Touch: compact, clear of mobile.js controls and the notch ---------- */
.jhud[data-mode=touch] .jh-vitals{left:max(14px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));bottom:auto;padding:.45em 1.2em .45em .9em}
.jhud[data-mode=touch] .jh-hp .jh-num{font-size:2.8em;min-width:1.6em}
.jhud[data-mode=touch] .jh-helmet{width:2.2em;height:2em}
.jhud[data-mode=touch] .jh-bar{width:7em;height:.75em}
.jhud[data-mode=touch] .jh-bar.jet{width:6em}
.jhud[data-mode=touch] .jh-val{min-width:2.2em;font-size:1.1em}
.jhud[data-mode=touch] .jh-row .jh-lab{width:1.9em;font-size:.95em}
.jhud[data-mode=touch] .jh-bars{gap:.6em}
.jhud[data-mode=touch] .jh-sep{margin:.15em .8em}
.jhud[data-mode=touch] .jh-score{top:max(10px,env(safe-area-inset-top))}
.jhud[data-mode=touch] .jh-sbar .jh-num{font-size:2.5em}
.jhud[data-mode=touch] .jh-top{display:none}
/* Top-right belongs to the mobile toolbar (two 44 px buttons); the feed sits below it. */
.jhud[data-mode=touch] .jh-feed{top:calc(max(10px,env(safe-area-inset-top)) + 54px);right:max(12px,env(safe-area-inset-right))}
.jhud[data-mode=touch] .jh-kill{font-size:1em}
.jhud[data-mode=touch] .jh-kill:nth-child(n+3){display:none}
/* Weapons live with the button cluster: a compact chip just above the DASH / weapon buttons. */
.jhud[data-mode=touch] .jh-arms{left:50%;right:auto;bottom:calc(max(26px,calc(env(safe-area-inset-bottom) + 12px)) + 78px);transform:translateX(-50%);padding:.25em 1.2em .3em}
.jhud[data-mode=touch] .jh-slot:not(.on),.jhud[data-mode=touch] .jh-dash{display:none}
.jhud[data-mode=touch] .jh-slot{width:5.4em;height:2.8em}
.jhud[data-mode=touch] .jh-slot svg{width:4em;height:1.4em}
.jhud[data-mode=touch] .jh-slot .name,.jhud[data-mode=touch] .jh-slot .key{display:none}
.jhud[data-mode=touch] .jh-ammo{min-width:0}
.jhud[data-mode=touch] .jh-ammo .jh-num{font-size:2.6em}
.jhud[data-mode=touch] .jh-ammo .mag{font-size:1.3em}
.jhud[data-mode=touch] .jh-ammo .state{top:-1.3em;font-size:.85em}
.jhud[data-mode=touch] .jh-count strong{font-size:7em}
@media (orientation:portrait){
 .jhud[data-mode=touch]{font-size:clamp(9px,2.5cqw,12px)}
 .jhud[data-mode=touch] .jh-score{left:max(14px,env(safe-area-inset-left));transform:none;top:calc(max(10px,env(safe-area-inset-top)) + 6.4em);align-items:flex-start}
 .jhud[data-mode=touch] .jh-sbar{padding:.2em 1.4em .2em 1em}
 .jhud[data-mode=touch] .jh-ssub{padding:.2em 1em 0}
 .jhud[data-mode=touch] .jh-arms{bottom:calc(max(32px,env(safe-area-inset-bottom)) + 136px)}
 .jhud[data-mode=touch] .jh-kill:nth-child(n+2){display:none}
 .jhud[data-mode=touch] .jh-banner strong{font-size:2.4em}
}