/* HUD extras (hud-extras.js): HUD Master quiet frame, condensed caps, thin outlines. Colours and font come from hud.css. */
.jx{position:absolute;inset:0;pointer-events:none;visibility:hidden;font-family:var(--js-font);color:var(--js-text);user-select:none;
 font-size:clamp(9px,min(1cqw,1.78cqh),20px)}
.jx[data-mode=touch]{font-size:clamp(9px,min(1.6cqw,2.9cqh),14px)}
.jx.on{visibility:visible}
.jx>*:not(.jx-svg){opacity:0;transition:opacity .12s}
.jx>.on{opacity:1}
.jx-cross{position:absolute;left:0;top:0;width:0;height:0;--spread:7px}
.jx-cross::before{content:"";position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#eff8dc}
.jx-cross i{position:absolute;left:0;top:0;width:5px;height:1.5px;background:rgba(239,248,220,.85);transform-origin:0 50%}
.jx-cross i:nth-child(1){transform:rotate(0deg) translateX(var(--spread))}
.jx-cross i:nth-child(2){transform:rotate(90deg) translateX(var(--spread))}
.jx-cross i:nth-child(3){transform:rotate(180deg) translateX(var(--spread))}
.jx-cross i:nth-child(4){transform:rotate(270deg) translateX(var(--spread))}
/* The HUD frame holds the other three corners (vitals, arms, kill feed); the minimap takes the free top-left one. */
.jx-mini{position:absolute;left:2.2em;top:1.7em;width:183px;height:83px;border:1px solid var(--js-line)}
/* Party status line and role card sit clear of the HUD: under its score strip and banner, under its countdown. */
.jx-status{position:absolute;left:50%;top:14.2em;transform:translateX(-50%);text-align:center;text-shadow:0 1px 6px #000c}
.jx-status strong{display:block;font:700 1.35em/1 var(--js-font);letter-spacing:.06em;text-transform:uppercase}
.jx-status small{display:block;margin-top:.35em;font:500 .95em/1.2 var(--js-font);color:#b9cbc4}
.jx-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) skewX(var(--js-skew));padding:1em 2.2em;background:var(--js-fill);border:1px solid var(--js-line);text-align:center}
.jx-card>*{display:block;transform:skewX(calc(-1 * var(--js-skew)))}
.jx-card strong{font:italic 800 2em/1 var(--js-font);color:var(--js-lime);letter-spacing:.02em}
.jx-card em{margin-top:.5em;font:600 1.05em/1.2 var(--js-font);font-style:normal;color:#ffd185}
.jx-card small{margin-top:.4em;font:500 .95em/1.3 var(--js-font);color:var(--js-muted);max-width:34em}
.jx-role{top:64%}
/* Prop hunt blind card: the death card frame with the seeker's countdown big underneath. */
.jx-blind strong{color:var(--js-text)}.jx-blind em{margin-top:.25em;font:italic 800 2.8em/1 var(--js-font);color:#ffd185}
.jx[data-mode=touch] .jx-status{top:9.8em}.jx[data-mode=touch] .jx-role{top:66%}
.jx-hint{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);font:600 .95em/1 var(--js-font);letter-spacing:.14em;color:var(--js-cyan)}
.jx-lessons{position:absolute;left:24px;top:30%;margin:0;padding:.8em 1.2em;list-style:none;background:var(--js-fill);border:1px solid var(--js-line);font:500 1em/1.9 var(--js-font)}
.jx-lessons li::before{content:"○ ";color:var(--js-muted)}
.jx-lessons li.done{color:var(--js-lime)}.jx-lessons li.done::before{content:"✓ ";color:var(--js-lime)}
.jx-lessons li.h{color:var(--js-lime);letter-spacing:.14em}.jx-lessons li.h::before{content:""}
.jx-board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:32em;border-collapse:collapse;background:rgba(8,27,33,.96);border:1px solid var(--js-line);font:500 1.05em/1 var(--js-font)}
.jx-board caption{padding:.8em;text-align:left;font:700 1.1em/1 var(--js-font);letter-spacing:.08em;background:rgba(8,27,33,.96)}
.jx-board th{padding:.6em .9em;text-align:left;font-weight:600;letter-spacing:.14em;color:var(--js-muted)}
.jx-board td{padding:.55em .9em}.jx-board tr.me td{background:rgba(197,250,105,.07)}
/* Party warning edge (bomb holder, short fuse): party.js blinks it, so it switches without the fade. */
.jx>.jx-alarm{position:absolute;inset:5px;border:10px solid rgba(255,122,107,.53);transition:none}
.jx-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jx-svg text{font:700 11px var(--js-font);text-anchor:middle;letter-spacing:.08em}
.jx-svg .aim{fill:none;stroke:rgba(223,247,189,.5);stroke-width:1;stroke-dasharray:3 6}