/* NU LIGHT HUD design system (loaded after premium.css so it owns the in-match layout).
   Everything is authored in design px on an 8 px grid and scaled by --hu (viewport x HUD-size setting, set from --ui).
   Zones:  top-left score | top-centre compass + power-ups | top-right radar | left-middle feed | right-middle medals
           bottom-left shield, health, grenade/ability tiles | bottom-right ammo + weapon | centre reticle, hit marker, prompts.
   Motion is transform/opacity only. Icons: 16/24/32 box, one 1.5 stroke (non-scaling), round joins. */
#hud, .chub {
  /* spacing (8 px grid) */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;
  --hu: clamp(.7, var(--ui, 1), 1.25);
  --m: calc(var(--s4) * var(--hu));               /* safe-area margin, scales with HUD size */
  /* icon scale + stroke */
  --i1: 16px; --i2: 24px; --i3: 32px; --sw: 1.5px;
  /* type scale (tabular numerals for every counter) */
  --t-xs: 10px; --t-s: 12px; --t-m: 16px; --t-l: 24px; --t-xl: 56px;
  --num: tabular-nums lining-nums;
  /* colour tokens */
  --c-red: #ff5b6b; --c-blue: #4fa3ff; --c-shield: #9fe8ff; --c-health: #ff7a86;
  --c-warn: #ffb347; --c-crit: #ff4d5e; --c-gold: #ffe2a8; --c-ink: #f4f1e8; --c-dim: #aab0bd;
  --glass: linear-gradient(160deg, rgba(10, 14, 24, .66), rgba(10, 14, 24, .44));
  --glass-line: rgba(255, 255, 255, .16);
  --tile: 64px;
}
/* glass panels: one radius, 1 px border, no chamfers */
#hud :is(.h-weapon, .sc-row, .feed-item, .medal, .h-tut, .pu, .sc-lead, .ob, .h-prompt) {
  clip-path: none; border-radius: 8px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: none; backdrop-filter: blur(8px);
}
#hud .h-weapon::before, #hud .h-weapon::after { display: none; }
#hud svg { stroke-linecap: round; stroke-linejoin: round; }
#hud svg:not(.ring):not(.h-reticle svg):not(.h-hit svg):not(.h-brs svg):not(.h-scope svg) path { stroke-width: var(--sw); vector-effect: non-scaling-stroke; }
#hud svg.wide { height: var(--i2); width: auto; }

/* ---- top-left: score ---- */
#hud .h-score { left: calc(var(--m) + var(--safe-l)); top: calc(var(--m) + var(--safe-t)); right: auto; bottom: auto; width: 248px; scale: var(--hu); transform-origin: 0 0; }
#hud .sc-meta { display: grid; grid-template-columns: 1fr auto; align-items: center; height: var(--s3); margin: 0 0 var(--s1); font: 500 var(--t-s)/1 var(--f-mono); letter-spacing: .16em; }
#hud .sc-clock { min-width: 5ch; text-align: right; font-variant-numeric: var(--num); font-size: var(--t-m); font-weight: 600; }
#hud .sc-row { display: grid; grid-template-columns: var(--s2) 1fr 40px 40px; align-items: center; gap: var(--s1); height: var(--s4); margin: 0 0 var(--s1); padding: 0 var(--s1); border-left: 3px solid var(--tcol); }
#hud .sc-row .sq { width: var(--s1); height: var(--s1); border-radius: 2px; justify-self: center; }
#hud .sc-nm { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .18em; }
#hud .sc-bar { grid-column: 3; height: 2px; }
#hud .sc-n { grid-column: 4; font: 600 var(--t-l)/1 var(--f-mono); font-variant-numeric: var(--num); min-width: 3ch; text-align: right; }
#hud .h-obj { margin-top: 0; }
#hud .sc-lead { height: var(--s4); padding: 0 var(--s1); gap: var(--s1); }
#hud .sc-lead svg { width: var(--i1); height: var(--i1); }

/* ---- top-centre: compass + power-ups ---- */
#hud .h-top { top: calc(var(--m) + var(--safe-t)); width: min(440px, 38vw); scale: var(--hu); transform-origin: 50% 0; }
#hud .pu-row { gap: var(--s1); margin-top: var(--s1); }
#hud .pu { height: var(--s4); padding: 0 var(--s1); gap: var(--s1); display: flex; align-items: center; font: 500 var(--t-s)/1 var(--f-mono); font-variant-numeric: var(--num); }
#hud .pu svg { width: var(--i2); height: var(--i2); color: var(--c); flex: none; }
#hud .pu { position: relative; border-left: 2px solid var(--c); min-width: 150px; gap: 8px; animation: puIn .45s var(--ease); }
#hud .pu .pu-t { display: grid; gap: 3px; flex: 1; } #hud .pu small { font: 600 10px/1 var(--f-mono); letter-spacing: .16em; color: var(--c); }
#hud .pu i { display: block; height: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; } #hud .pu b { display: block; height: 100%; background: var(--c); transform-origin: 0 50%; box-shadow: 0 0 8px var(--c); }
#hud .pu span { font: 600 17px/1 var(--f-mono); min-width: 2ch; text-align: right; }
#hud .pu.low { animation: puLow .5s steps(2, jump-none) infinite; }
@keyframes puIn { 0% { opacity: 0; transform: translateY(-8px) scale(1.25); filter: brightness(2.5); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes puLow { 50% { opacity: .35; } }
/* active camo: cool edge vignette + drifting scanlines so you always know you are cloaked */
.h-cloak { inset: 0; opacity: 0; transition: opacity .35s; background: radial-gradient(ellipse at center, transparent 52%, rgba(90, 225, 255, .17) 100%), repeating-linear-gradient(0deg, rgba(150, 240, 255, .03) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 60px rgba(127, 230, 255, .22); }
body.camo .h-cloak { opacity: 1; animation: cloakDrift 3s linear infinite; } @keyframes cloakDrift { to { background-position: 0 0, 0 20px; } }

/* ---- top-right: radar (Destiny / Halo minimal motion tracker) ---- */
#hud .h-radar { left: auto; bottom: auto; right: calc(var(--m) + var(--safe-r)); top: calc(var(--m) + var(--safe-t)); width: 136px; height: 136px; scale: var(--hu); transform-origin: 100% 0; }
#hud .rd-tilt { inset: 0; transform: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: radial-gradient(circle, rgba(14, 18, 28, .65), rgba(5, 7, 12, .88) 75%); box-shadow: 0 0 20px rgba(0, 0, 0, .6), inset 0 0 14px rgba(0, 0, 0, .7); backdrop-filter: blur(10px); }
#hud .h-radar::before, #hud .h-radar::after { display: none; }
#hud .rd-place { left: auto; right: 0; bottom: -20px; font: 600 10px/1 var(--f-mono); letter-spacing: .24em; color: var(--c-gold); opacity: .85; text-transform: uppercase; }

/* ---- left-middle: kill feed ---- */
#hud .feed { left: calc(var(--m) + var(--safe-l)); top: 38%; bottom: auto; width: 320px; max-height: calc(30vh / var(--hu)); scale: var(--hu); transform-origin: 0 0; gap: var(--s1); }
#hud .feed-item { height: var(--s4); padding: 0 var(--s1) 0 var(--s2); gap: var(--s1); font: 600 var(--t-s)/1 var(--f-hud); border-left: 3px solid var(--tc); }
#hud .feed-item svg { width: var(--i2); height: var(--i2); flex: none; }
#hud .feed-item svg.wide { height: var(--i2); }
#hud .feed-item svg.sk, #hud .feed-item svg.pf { width: var(--i1); height: var(--i1); }

/* ---- right-middle: tutorial card + medals ---- */
#hud .h-tut { left: auto; right: calc(var(--m) + var(--safe-r)); top: 22%; width: 232px; padding: var(--s2); scale: var(--hu); transform-origin: 100% 0; }
#hud .tt-r { height: var(--s3); padding: 0; gap: var(--s2); }
#hud .h-medals { left: auto; right: calc(var(--m) + var(--safe-r)); top: 62%; translate: none; align-items: flex-end; gap: 6px; scale: var(--hu); transform-origin: 100% 0; }
#hud .medal { height: 32px; padding: 0 14px 0 8px; gap: 8px; display: flex; align-items: center; border-radius: 16px; border: 1px solid rgba(255, 226, 168, .4); background: rgba(14, 18, 28, .78); backdrop-filter: blur(10px); box-shadow: 0 2px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .2); font: 600 11px/1 var(--f-mono); letter-spacing: .14em; color: #f4f1e8; }
#hud .medal svg { width: 18px; height: 18px; padding: 0; color: var(--c-gold); flex: none; filter: drop-shadow(0 0 5px rgba(255, 226, 168, .5)); border: none; }

/* ---- bottom-left: shield + health + tiles ---- */
#hud .h-bl { position: absolute; left: calc(var(--m) + var(--safe-l)); bottom: calc(var(--m) + var(--safe-b)); width: 296px; scale: var(--hu); transform-origin: 0 100%; display: grid; row-gap: var(--s1); }
/* under the compass: shield + health, big and numeric (markup: js/hud.js .vit) */
#hud .vit { position: relative; display: grid; row-gap: 6px; margin-top: var(--s1); padding: 10px 14px 10px 12px; border-left: 2px solid var(--c-gold); background: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .5)); }
#hud .vit-r { display: grid; grid-template-columns: 58px 1fr 52px; align-items: center; column-gap: var(--s1); }
#hud .vit-l { font: 600 10px/1 var(--f-mono); letter-spacing: .22em; color: var(--c-dim); }
#hud .vit-n { font: 600 30px/1 var(--f-mono); font-variant-numeric: var(--num); letter-spacing: -.02em; text-align: right; }
#hud .vit-shn { color: var(--c-shield); text-shadow: 0 0 14px rgba(159, 232, 255, .45); }
#hud .vit-hpn { color: var(--c-health); text-shadow: 0 0 14px rgba(255, 122, 134, .4); }
#hud .vit .trap { position: relative; height: 14px; padding: 0; border-radius: 0; background: rgba(255, 255, 255, .16); box-shadow: none; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
#hud .vit .trap-in { inset: 1px; border-radius: 0; background: rgba(0, 0, 0, .55); backdrop-filter: none; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
#hud .vit .sh-ghost, #hud .vit .sh-fill, #hud .vit .sh-over { top: 2px; bottom: 2px; left: 0; max-width: 100%; }
#hud .vit .trap::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--c-crit); opacity: 0; pointer-events: none; }
#hud .vit .hp-row { display: flex; gap: 3px; height: 14px; margin: 0; }
#hud .vit .hp-row i { flex: 1; height: 100%; border-radius: 0; background: rgba(255, 255, 255, .16); }
#hud .vit .hp-row i.on { background: linear-gradient(90deg, #ff6b8a, #ff9a8a); box-shadow: 0 0 8px rgba(255, 107, 138, .5); }
#hud .h-tiles { display: flex; align-items: flex-start; gap: var(--s2); margin-top: var(--s2); padding-bottom: var(--s3); }
#hud .h-tiles .h-gren, #hud .h-tiles .h-abil { position: static; display: flex; gap: var(--s2); align-items: flex-start; scale: none; right: auto; bottom: auto; }
#hud .h-tiles .h-abil { padding-left: var(--s2); border-left: 1px solid var(--glass-line); }
#hud .gt, #hud .ab.nova, #hud .ab.blink { position: relative; isolation: isolate; width: var(--tile); height: var(--tile); display: grid; place-items: center; padding: 0; gap: 0; border-radius: 0; background: none; box-shadow: none; scale: none; color: var(--acc); }
/* per-tile accent (gold / black / white family only): nova gold, blink warm white, frag amber, plasma pale gold */
#hud .ab.nova { --acc: #ffe2a8; } #hud .ab.blink { --acc: #fff4e0; } #hud .gt.frag { --acc: #ffb347; } #hud .gt.plasma { --acc: #f6e7b4; }
#hud .gt.sel { scale: none; box-shadow: none; }
#hud .gt { opacity: .6; } #hud .gt.sel { opacity: 1; }
#hud .gt .ring, #hud .ab.nova .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
#hud .gt .ring circle, #hud .ab.nova .ring circle { fill: none; stroke-width: 2; }
#hud .gt .ring .pg, #hud .ab.nova .ring .pg { stroke-width: 3; }
#hud .gt .ic, #hud .ab .ic { position: static; width: var(--i3); height: var(--i3); margin: 0; grid-area: 1 / 1; opacity: 1; stroke-width: var(--sw); }
#hud .gt .n { right: -4px; top: auto; bottom: 14px; min-width: var(--s3); height: var(--s3); padding: 0; display: grid; place-items: center; border-radius: 12px; font: 700 var(--t-s)/1 var(--f-mono); font-variant-numeric: var(--num); }
#hud .gt em, #hud .ab em { position: absolute; left: 50%; top: calc(var(--tile) + var(--s1)); bottom: auto; translate: -50% 0; font: 500 var(--t-xs)/16px var(--f-mono); letter-spacing: .2em; text-indent: 0; color: var(--c-dim); white-space: nowrap; }
#hud .gt .kd, #hud .ab .kd { top: -10px; left: auto; right: -6px; translate: 0 0; transform: none; height: 18px; min-width: 18px; width: max-content; white-space: nowrap; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; border-radius: 3px; background: var(--c-gold); color: #0b0904; border: 0; box-shadow: 0 2px 0 #7a5a22; font: 700 10px/1 var(--f-mono); }
#hud .gt .kd:empty, #hud .ab .kd:empty { display: none; }
#hud .ab.nova .pct { position: absolute; top: auto; bottom: 8px; left: 0; right: 0; font-size: 9px; }
#hud .ab.nova .ic { margin: 0; }
#hud .ab.blink .pips { position: absolute; bottom: 10px; left: 50%; translate: -50% 0; gap: 4px; }
#hud .ab.blink .pips i { width: 12px; height: 4px; transform: none; border-radius: 2px; }
/* shield low: pulse an outline (opacity only) instead of recolouring the fill */
body.low-shield #hud .sh-fill { animation: none; }
body.low-shield #hud .vit .trap::after { animation: hudLow .6s ease-in-out infinite alternate; }

/* ---- bottom-right: ammo + weapon ---- */
#hud .h-weapon { top: auto; left: auto; right: calc(var(--m) + var(--safe-r)); bottom: calc(var(--m) + var(--safe-b)); width: 296px; padding: var(--s2); text-align: left; scale: var(--hu); transform-origin: 100% 100%; display: grid; row-gap: var(--s1); }
#hud .wp-top { display: grid; grid-template-columns: 1fr auto auto; align-items: end; column-gap: var(--s1); }
#hud .wp-icon { justify-content: flex-start; align-items: center; padding: 0; min-width: 0; height: 56px; }
#hud .wsil { height: 40px; max-width: 112px; }
#hud .wsil.nuicon { width: 112px; height: 56px; max-width: 112px; object-fit: contain; }   /* square icon-library PNGs: keep the old wide footprint */
#hud .wsil.nuicon.sec { width: 64px; height: 32px; }
#hud .wp-mag { min-width: 2.2ch; text-align: right; font: 300 var(--t-xl)/1 var(--f-hud); font-variant-numeric: var(--num); letter-spacing: -.02em; }
#hud .wp-res { display: flex; align-items: center; justify-content: flex-start; gap: 4px; min-width: 5.5ch; height: var(--s4); padding: 0; font: 500 var(--t-m)/1 var(--f-mono); font-variant-numeric: var(--num); }
#hud .wp-res svg.am { width: var(--i1); height: var(--i1); flex: none; opacity: .8; }
#hud .wp-name { display: flex; align-items: center; gap: var(--s1); height: var(--s3); margin: 0; border-top: 1px solid var(--glass-line); padding-top: var(--s1); font: 500 var(--t-s)/1 var(--f-mono); letter-spacing: .2em; opacity: 1; }
#hud .wp-name svg.cls { width: var(--i2); height: var(--i2); flex: none; }
#hud .wp-reload { height: var(--s2); line-height: var(--s2); font-size: var(--t-xs); }
#hud .wp-mag.low { animation: hudFlash .5s steps(1) infinite; }
#hud .wp-mag.low { color: var(--c-crit); }

/* ---- centre: reticle, hit marker, damage numbers share the screen centre exactly ---- */
#hud .h-reticle, #hud .h-hit { left: 50%; top: 50%; translate: -50% -50%; }
/* kill confirm: one short gold ring at the reticle, 0.24 s (js/hud.js skips it under reduced motion) */
#hud .k-ring { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; translate: -50% -50%; border-radius: 50%; border: 2px solid var(--c-gold); box-shadow: 0 0 14px rgba(255, 226, 168, .5); opacity: 0; pointer-events: none; }
#hud .k-ring.on { animation: killRing .24s var(--ease) both; }
@keyframes killRing { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.05); } }
#hud .h-reticle svg { transition: transform .08s linear; }
#hud .h-prompt { top: 72%; height: var(--s5); padding: 0 var(--s2); display: flex; align-items: center; gap: var(--s1); }

/* ---- first-match hint strip (goal 117): one row of key chips under the reticle, dismissible ---- */
#hud .h-hint { position: absolute; left: 50%; top: 58%; translate: -50% 0; display: none; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); scale: var(--hu); transform-origin: 50% 0; pointer-events: auto; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 8px; backdrop-filter: blur(8px); }
#hud .h-hint.on { display: flex; }
#hud .h-hint .hh-items { display: flex; align-items: center; gap: var(--s2); }
#hud .h-hint .hh { display: flex; align-items: center; gap: 6px; }
#hud .h-hint .hh em { font: 600 var(--t-xs)/1 var(--f-hud); letter-spacing: .18em; color: var(--c-dim); font-style: normal; }
#hud .h-hint .hh-x { width: 22px; height: 22px; display: grid; place-items: center; font: 600 var(--t-xs)/1 var(--f-hud); color: var(--c-dim); background: transparent; border: 1px solid var(--glass-line); border-radius: 4px; cursor: pointer; }
#hud .h-hint .hh-x:hover { color: var(--c-ink); border-color: var(--c-gold); }

@keyframes hudLow { from { opacity: 0; } to { opacity: 1; } }
@keyframes hudFlash { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { body.low-shield #hud .vit .trap::after, #hud .wp-mag.low { animation: none; opacity: 1; } }
@media (max-height: 520px), (max-width: 900px) {
  #hud .h-tut { display: none !important; }
  #hud .h-bl { width: 232px; } #hud .h-weapon { width: 240px; }
  #hud .h-tiles { padding-bottom: 0; } #hud .gt em, #hud .ab em { display: none; }
}
body.touch-on #hud .h-bl { display: none; }
#hud .h-tiles .h-abil { order: 2; } #hud .h-tiles .h-gren { order: 1; }
/* tiles: one 4-column grid so tiles and labels land on identical centres */
#hud .h-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; justify-items: center; }
#hud .h-tiles .h-gren, #hud .h-tiles .h-abil { display: contents; padding: 0; border: 0; }
#hud .gt em, #hud .ab em { letter-spacing: .08em; font-size: 9px; }
#hud .gt .ic, #hud .ab .ic { width: var(--i2); height: var(--i2); }
#hud .ab.nova .pct { bottom: 6px; }
#hud .ab.nova .ic { translate: 0 -4px; }
#hud .h-cam { left: 50%; right: auto; bottom: calc(var(--m) + var(--safe-b)); translate: -50% 0; transform-origin: 50% 100%; }
#hud .rd-place { bottom: -20px; }

/* Characters screen (phase 1) */
.chars .ch-list { display: grid; gap: var(--s1); }
.chars .ch-row { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--t-m); }
.chars .ch-row .ch-name { flex: 1; font-variant-numeric: var(--num); letter-spacing: .08em; }
.chars .ch-row .ch-name em { font-style: normal; font-size: var(--t-s); color: var(--c-gold); margin-left: var(--s1); }
.chars .ch-row .ch-meta { font-size: var(--t-s); color: var(--c-dim); }
.chars .ch-row.active { border-color: var(--c-shield); }
.chars .ch-row.empty .ch-name { color: var(--c-dim); }
.chars .ch-row.act { font-size: var(--t-s); }
.chars .ch-row.danger .ch-name { color: var(--c-crit); }
.chars .ch-msg { min-height: var(--s3); margin-top: var(--s2); font-size: var(--t-s); color: var(--c-shield); }
.chars .ch-msg.bad { color: var(--c-warn); }
.chars .ch-sec, .chars .ch-who, .chars .ch-note, .chars .ch-list .ch-msg, .chars .ch-row.act.wide { grid-column: 1 / -1; }
.chars .ch-sec { margin: var(--s3) 0 var(--s1); font-size: var(--t-s); letter-spacing: .18em; color: var(--c-dim); border-top: 1px solid var(--glass-line); padding-top: var(--s2); }
.chars .ch-who { font-size: var(--t-m); letter-spacing: .08em; color: var(--c-gold); margin-bottom: var(--s1); }
.chars .ch-note { margin: var(--s1) 0; font-size: var(--t-s); color: var(--c-dim); line-height: 1.5; }
.chars .ch-row .ac-ic { align-self: center; flex: none; }
.chars .ch-row.off { opacity: .5; cursor: not-allowed; }
.chars .ch-paste { width: 100%; margin-top: var(--s1); box-sizing: border-box; background: rgba(0, 0, 0, .35); color: var(--c-ink); border: 1px solid var(--glass-line); font: var(--t-s) monospace; padding: var(--s1); }

/* ---- Character hub (js/charhub.js): same tokens as the HUD, sizes scale with --hu via --u ---- */
.chub { --u: calc(1px * var(--hu)); position: absolute; inset: calc(24 * var(--u)) calc(32 * var(--u)); display: grid; gap: calc(12 * var(--u)); color: var(--c-ink);
  grid-template-columns: minmax(calc(250 * var(--u)), 25%) 1fr minmax(calc(260 * var(--u)), 25%); grid-template-rows: auto minmax(0, 1fr) clamp(calc(190 * var(--u)), 34%, calc(300 * var(--u))) auto; font-family: var(--f-hud); }
#charhub.screen { padding: 0; }
#charhub.screen::after { background: linear-gradient(90deg, rgba(6, 9, 18, .62), transparent 28%, transparent 72%, rgba(6, 9, 18, .62)), linear-gradient(0deg, rgba(6, 9, 18, .7), transparent 40%) !important; }
.chub > * { min-width: 0; min-height: 0; }
.chub button { font: inherit; color: inherit; cursor: pointer; }
.chub-top { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: 8px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(8px); }
.chub-id { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.chub-id .cid { display: grid; min-width: calc(180 * var(--u)); } .chub-id b { font: 700 calc(18 * var(--u))/1.1 var(--f-disp); letter-spacing: .16em; } .chub-id span { font: 500 calc(11 * var(--u))/16px var(--f-mono); color: var(--c-dim); letter-spacing: .08em; }
.chub .cb { background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-line); border-radius: 6px; padding: calc(6 * var(--u)) calc(12 * var(--u)); font: 500 calc(11 * var(--u))/16px var(--f-mono); letter-spacing: .14em; }
.chub .cb:hover:not(:disabled), .chub .cb.pri { border-color: var(--c-shield); } .chub .cb:disabled { opacity: .35; cursor: default; }
.chub .ch-prev svg { rotate: -90deg; } .chub .ch-next svg { rotate: 90deg; } .chub .cb svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke: currentColor; fill: none; stroke-width: 1.5; }
.chub-tabs { display: flex; gap: calc(4 * var(--u)); margin: 0 auto; }
.chub .ct { background: none; border: 0; border-bottom: 2px solid transparent; padding: calc(8 * var(--u)) calc(16 * var(--u)); font: 600 calc(12 * var(--u))/16px var(--f-disp); letter-spacing: .24em; color: var(--c-dim); }
.chub .ct.on { color: #fff; border-color: var(--c-shield); } .chub .ct.kf { box-shadow: 0 0 0 1px var(--c-shield); outline: none; } .chub .ct i { font-style: normal; margin-left: calc(8 * var(--u)); font: 500 calc(10 * var(--u)) var(--f-mono); opacity: .7; }
.chub-wallet { display: flex; align-items: center; gap: calc(12 * var(--u)); font: 500 calc(12 * var(--u))/16px var(--f-mono); letter-spacing: .08em; font-variant-numeric: var(--num); }
.chub-wallet .xp-bar { width: calc(96 * var(--u)); } .chub-wallet em { font-style: normal; color: var(--c-gold); }
.chub-l, .chub-r { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(10 * var(--u)); border-radius: 8px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(8px); overflow: hidden auto; scrollbar-width: thin; }
.chub .slot { position: relative; flex: 1 1 0; min-height: calc(48 * var(--u)); max-height: calc(80 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); text-align: left; padding: 0 calc(10 * var(--u)) 0 calc(12 * var(--u)); border-radius: 6px; border: 1px solid transparent; background: rgba(255, 255, 255, .04); }
.chub .slot:hover, .chub .kf { border-color: var(--c-shield); background: rgba(159, 232, 255, .1); outline: none; }
.chub .slot.flt:not(.kf) { border-color: rgba(159, 232, 255, .35); }
.chub .slot .rb { position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--rc, transparent); }
.chub .wt { position: relative; flex: none; width: calc(56 * var(--u)); height: calc(40 * var(--u)); display: grid; place-items: center; }
.chub .wt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .chub .wt svg.wi { width: 70%; height: 70%; fill: none; stroke: var(--c-dim); stroke-width: var(--sw); vector-effect: non-scaling-stroke; opacity: .5; } .chub .wt svg { stroke-linecap: round; stroke-linejoin: round; }
.chub .wt > svg:not(.wi) { width: 60%; height: 60%; stroke: var(--c-dim); fill: none; stroke-width: 1.5; }
.chub .sl-t { display: grid; gap: 1px; min-width: 0; } .chub .sl-t em { font: normal 500 calc(10 * var(--u))/14px var(--f-mono); letter-spacing: .2em; color: var(--c-dim); }
.chub .sl-t b { font: 700 calc(13 * var(--u))/16px var(--f-disp); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chub .sl-t small { font: 500 calc(10 * var(--u))/14px var(--f-mono); color: var(--c-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: var(--num); }
.chub .slot.empty .sl-t b, .chub .slot.kit .sl-t b { color: var(--c-dim); font-weight: 500; } .chub .slot.kit .sl-t b { font-size: calc(11 * var(--u)); }
.chub .slot.cos { flex: none; height: calc(48 * var(--u)); } .chub .sw { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; background: var(--c, #888); box-shadow: 0 0 12px var(--c); flex: none; margin: 0 calc(4 * var(--u)); }
.chub .r-h { font: 600 calc(10 * var(--u))/16px var(--f-mono); letter-spacing: .3em; color: var(--c-dim); padding: calc(4 * var(--u)) calc(4 * var(--u)) 0; flex: none; }
.chub .stat { flex: none; display: grid; grid-template-columns: calc(96 * var(--u)) 1fr calc(28 * var(--u)); align-items: center; gap: calc(8 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: 6px; border: 1px solid transparent; background: none; text-align: left; }
.chub .stat:hover, .chub .stat.kf { border-color: var(--c-shield); background: rgba(159, 232, 255, .1); outline: none; } .chub .stat span { font: 600 calc(10 * var(--u)) var(--f-mono); letter-spacing: .16em; } .chub .stat b { font: 700 calc(13 * var(--u)) var(--f-mono); text-align: right; font-variant-numeric: var(--num); }
.chub .bar { height: calc(6 * var(--u)); background: rgba(255, 255, 255, .12); border-radius: 3px; overflow: hidden; } .chub .bar i { display: block; height: 100%; background: var(--c-shield); border-radius: 3px; }
.chub-c { position: relative; cursor: grab; touch-action: none; border-radius: 8px; outline: none; } .chub-c:active { cursor: grabbing; } .chub-c.kf { box-shadow: inset 0 0 0 1px var(--c-shield); }
.chub-hint { position: absolute; left: calc(8 * var(--u)); bottom: calc(14 * var(--u)); text-align: left; font: 500 calc(10 * var(--u)) var(--f-mono); letter-spacing: .3em; color: var(--c-dim); pointer-events: none; }
.chub .emo { position: absolute; right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); }
.chub-b { grid-column: 1 / -1; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(8 * var(--u)); padding: calc(10 * var(--u)); border-radius: 8px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(8px); }
.chub-f { display: flex; align-items: center; gap: calc(6 * var(--u)); flex-wrap: nowrap; overflow: hidden; } .chub-f .sp { flex: 1; } .chub-f .cnt { font: 500 calc(11 * var(--u)) var(--f-mono); color: var(--c-dim); margin-left: calc(8 * var(--u)); font-variant-numeric: var(--num); }
.chub .fc { background: rgba(255, 255, 255, .05); border: 1px solid transparent; border-radius: 14px; padding: calc(3 * var(--u)) calc(10 * var(--u)); font: 500 calc(10 * var(--u))/16px var(--f-mono); letter-spacing: .12em; white-space: nowrap; } .chub .fc.on { border-color: var(--c-shield); color: var(--c-shield); } .chub .fc:hover { border-color: var(--glass-line); }
.chub-bm { display: grid; grid-template-columns: 1fr clamp(calc(220 * var(--u)), 28%, calc(340 * var(--u))); gap: calc(12 * var(--u)); min-height: 0; }
.chub .cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(104 * var(--u)), 1fr)); grid-auto-rows: calc(92 * var(--u)); gap: calc(8 * var(--u)); align-content: start; overflow: hidden auto; padding: 2px; scrollbar-width: thin; }
.chub .tile { position: relative; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 1px; padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u)); border-radius: 6px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .04); min-width: 0; }
.chub .tile .wt { width: 100%; height: 100%; } .chub .tile b { font: 700 calc(10 * var(--u))/12px var(--f-disp); letter-spacing: .06em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chub .tile small { font: 500 calc(9 * var(--u))/12px var(--f-mono); color: var(--c-dim); letter-spacing: .1em; }
.chub .tile .rb { position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; background: var(--rc); border-radius: 2px; }
.chub .tile.eq { background: rgba(159, 232, 255, .12); } .chub .tile.eq small { color: var(--c-shield); } .chub .tile.sel, .chub .tile:hover { border-color: var(--rc); } .chub .tile.kf { border-color: var(--c-shield); box-shadow: 0 0 0 1px var(--c-shield); outline: none; }
.chub .cgrid .empty { grid-column: 1 / -1; font: 500 calc(12 * var(--u)) var(--f-mono); color: var(--c-dim); padding: calc(16 * var(--u)); }
.chub-d { display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(4 * var(--u)) calc(4 * var(--u)) 0 calc(14 * var(--u)); border-left: 1px solid var(--glass-line); overflow: hidden auto; scrollbar-width: thin; }
.chub-d .dk { font: 600 calc(10 * var(--u))/14px var(--f-mono); letter-spacing: .22em; color: var(--c-shield); } .chub-d .dn2 { font: 700 calc(16 * var(--u))/20px var(--f-disp); letter-spacing: .08em; }
.chub-d .dr { display: flex; justify-content: space-between; font: 500 calc(11 * var(--u))/16px var(--f-mono); color: var(--c-ink); font-variant-numeric: var(--num); } .chub-d .dn { margin: 0; font: 500 calc(11 * var(--u))/16px var(--f-hud); color: var(--c-dim); }
.chub-d .dbtn { display: flex; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); flex-wrap: wrap; } .chub-d .dbtn .cb:empty { display: none; }
.chub-d .cmsg { margin-top: auto; min-height: calc(16 * var(--u)); font: 500 calc(11 * var(--u))/16px var(--f-mono); color: var(--c-shield); } .chub-d .cmsg.bad { color: var(--c-warn); }
.chub-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(16 * var(--u)); } .chub-foot .btn { padding: calc(8 * var(--u)) calc(24 * var(--u)); font-size: calc(11 * var(--u)); }
.chub-keys { font: 500 calc(10 * var(--u)) var(--f-mono); letter-spacing: .14em; color: var(--c-dim); }
.chub .skills { grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto; overflow: auto; } .chub .sk-note { display: grid; gap: calc(6 * var(--u)); align-content: start; font: 500 calc(11 * var(--u))/16px var(--f-mono); color: var(--c-dim); } .chub .sk-note b { color: var(--c-gold); letter-spacing: .2em; }
.chub .sk-tree { text-align: center; } .chub .sk-tree h4 { margin: 0 0 calc(6 * var(--u)); font: 600 calc(11 * var(--u)) var(--f-disp); letter-spacing: .24em; } .chub .sk-row { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); height: calc(30 * var(--u)); position: relative; } .chub .sk-row em { position: absolute; left: calc(8 * var(--u)); font: normal 500 calc(9 * var(--u)) var(--f-mono); color: var(--c-dim); }
.chub .node { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; border: 1.5px solid var(--glass-line); background: rgba(255, 255, 255, .04); }
.chub .pop { animation: chubPop .5s cubic-bezier(.2, .9, .3, 1.2); } @keyframes chubPop { 0% { box-shadow: 0 0 0 0 rgba(159, 232, 255, .8); scale: 1; } 40% { scale: 1.04; } 100% { box-shadow: 0 0 0 calc(14 * var(--u)) rgba(159, 232, 255, 0); scale: 1; } }
.chub-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(4, 6, 14, .6); backdrop-filter: blur(4px); }
.cm-box { width: min(420px, 92vw); display: grid; gap: 16px; padding: 24px; border-radius: 8px; background: rgba(10, 14, 24, .92); border: 1px solid rgba(255, 255, 255, .16); } .cm-box h3 { margin: 0; font: 700 14px var(--f-disp); letter-spacing: .24em; }
.cm-row { display: flex; gap: 8px; } .cm-row input { flex: 1; } .cm-row.focus { outline: 1px solid #9fe8ff; outline-offset: 4px; } .cm-ch { display: flex; gap: 8px; } .cm-ch.focus { outline: 1px solid #9fe8ff; outline-offset: 4px; }
.cm-box .fc { background: rgba(255, 255, 255, .06); border: 1px solid transparent; border-radius: 14px; padding: 4px 14px; font: 500 11px var(--f-mono); letter-spacing: .12em; color: #f4f1e8; cursor: pointer; } .cm-box .fc.on { border-color: #9fe8ff; color: #9fe8ff; }
.cm-box .cb { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; color: #f4f1e8; font: 500 11px var(--f-mono); cursor: pointer; padding: 6px 12px; }
.cm-err { min-height: 16px; font: 500 11px var(--f-mono); color: #ffb347; } .cm-act { display: flex; justify-content: flex-end; gap: 8px; } .cm-act .btn { padding: 8px 20px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .chub .pop { animation: none; } }
.nuicon { object-fit: contain; }
.nuicon.opic { width: calc(32 * var(--u, 1px)); height: calc(32 * var(--u, 1px)); border-radius: 50%; flex: none; object-fit: cover; }
.sh-card .nuicon.opic, .tv .nuicon.opic { width: 42px; height: 42px; }

/* ---- bottom-left tiles: angled black plates with a thin gold edge, gold corner brackets, keycaps ---- */
#hud .gt::before, #hud .ab::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, #fff1c4, #b8862f 45%, #ffe2a8 68%, #6e4f1c); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
#hud .gt::after, #hud .ab::after { content: ''; position: absolute; inset: 2px; z-index: -1; background: linear-gradient(160deg, #1b1709, #060606 58%, #0c0b07); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
#hud .gt.sel::before { background: linear-gradient(135deg, #fffaf0, #ffe2a8 50%, #fff6d8); }
#hud .gt.cd::after, #hud .ab.cast::after { background: linear-gradient(160deg, #241a08, #070605 58%, #0c0b07); }
/* corner brackets sit on the bounding box, outside the chamfer */
#hud .fx { position: absolute; inset: -5px; pointer-events: none;
  background:
    linear-gradient(var(--c-gold), var(--c-gold)) 0 0 / 12px 1.5px no-repeat, linear-gradient(var(--c-gold), var(--c-gold)) 0 0 / 1.5px 12px no-repeat,
    linear-gradient(var(--c-gold), var(--c-gold)) 100% 0 / 12px 1.5px no-repeat, linear-gradient(var(--c-gold), var(--c-gold)) 100% 0 / 1.5px 12px no-repeat,
    linear-gradient(var(--c-gold), var(--c-gold)) 0 100% / 12px 1.5px no-repeat, linear-gradient(var(--c-gold), var(--c-gold)) 0 100% / 1.5px 12px no-repeat,
    linear-gradient(var(--c-gold), var(--c-gold)) 100% 100% / 12px 1.5px no-repeat, linear-gradient(var(--c-gold), var(--c-gold)) 100% 100% / 1.5px 12px no-repeat; }
/* ready: a ring pings out from the icon and a light sweep crosses the plate */
#hud .fx::before { content: ''; position: absolute; inset: 14px; border: 1.5px solid var(--acc); border-radius: 50%; opacity: 0; }
#hud .fx::after { content: ''; position: absolute; inset: 5px; opacity: 0; background: linear-gradient(105deg, transparent 36%, rgba(255, 248, 226, .55) 50%, transparent 64%); transform: translateX(-115%); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
#hud .ab.ready .fx::before { animation: tkPing 1.5s ease-out infinite; }
#hud .ab.ready .fx::after { opacity: 1; animation: tkSweep 2.8s ease-in-out infinite; }
#hud .ab.ready .ic { filter: drop-shadow(0 0 5px var(--acc)); }
#hud .gt .ic, #hud .ab .ic { color: var(--acc); }
#hud .ab.nova .ring .pg, #hud .gt .ring .pg { stroke: var(--acc); }
#hud .gt.cd .ring .pg { stroke: var(--c-warn); }
#hud .ab.blink .pips i::after { background: var(--acc); box-shadow: 0 0 6px var(--acc); }
@keyframes tkPing { 0% { opacity: .9; scale: .8; } 100% { opacity: 0; scale: 1.5; } }
@keyframes tkSweep { 0%, 35% { transform: translateX(-115%); } 75%, 100% { transform: translateX(115%); } }
@media (prefers-reduced-motion: reduce) { #hud .ab.ready .fx::before, #hud .ab.ready .fx::after { animation: none; } #hud .ab.ready .fx::after { opacity: 0; } }

/* ---- bottom-right: secondary weapon row under the primary (Destiny-style) ---- */
#hud .wp-sec { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; column-gap: var(--s1); height: 40px; padding: 0 var(--s1); border: 1px solid var(--glass-line); border-left: 2px solid var(--c-gold); background: rgba(255, 255, 255, .05); }
#hud .wps-icon { display: flex; align-items: center; height: 100%; min-width: 0; }
#hud .wp-sec .wsil.nuicon.sec, #hud .wp-sec .wsil { width: 48px; height: 22px; max-width: 48px; object-fit: contain; opacity: .8; }
#hud .wps-name { min-width: 0; font: 600 11px/1 var(--f-mono); letter-spacing: .16em; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud .wps-ammo { display: flex; align-items: baseline; gap: 4px; font: 500 var(--t-s)/1 var(--f-mono); font-variant-numeric: var(--num); color: var(--c-dim); white-space: nowrap; }
#hud .wps-mag { font: 600 18px/1 var(--f-mono); color: var(--c-ink); }
#hud .wps-mag.low { color: var(--c-crit); }

/* ---- kill badges: clean, high-tech glass plate, centre-high (js/hud.js badge()) ---- */
#hud .h-badge { position: absolute; left: 50%; top: 24%; translate: -50% -50%; scale: var(--hu); display: none; pointer-events: none; z-index: 6; }
#hud .h-badge.on { display: block; }
#hud .h-badge .bd { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 4px; min-width: 220px; padding: 8px 24px 10px; text-align: center;
  background: rgba(14, 18, 28, .82); border: 1px solid rgba(255, 226, 168, .4); border-radius: 4px; backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .2); animation: bdSlam .32s cubic-bezier(.2, .9, .3, 1.1) both; }
#hud .h-badge .bd::before { display: none; }
#hud .h-badge .bd::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%); transform: translateX(-120%); animation: bdShine .8s .2s ease-out both; }
#hud .h-badge small { font: 600 10px/1 var(--f-mono); letter-spacing: .28em; text-indent: .28em; color: var(--c-gold); text-transform: uppercase; }
#hud .h-badge .bd-r { display: flex; align-items: center; gap: 10px; }
#hud .h-badge svg { width: 22px; height: 22px; flex: none; color: var(--c-gold); filter: drop-shadow(0 0 6px rgba(255, 226, 168, .5)); }
#hud .h-badge b { font: 700 26px/1 var(--f-disp); letter-spacing: .08em; white-space: nowrap; color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
#hud .h-badge.l0 b { font-size: 22px; }
#hud .h-badge.l1 b { font-size: 28px; }
#hud .h-badge.l2 b { font-size: 32px; color: #ffe2a8; }
#hud .h-badge.l2 .bd { min-width: 280px; padding: 10px 30px 12px; border-color: rgba(255, 226, 168, .7); box-shadow: 0 4px 28px rgba(255, 196, 107, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
#hud .h-badge.out .bd { animation: bdOut .28s ease-in forwards; }
@keyframes bdSlam { 0% { opacity: 0; transform: scale(1.15) translateY(-6px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes bdShine { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes bdOut { to { opacity: 0; transform: scale(0.95) translateY(-6px); } }
/* ---- centre: reticle hit tick (goal 118/29) ---- */
#hud .h-reticle { transition: none; }
#hud .h-reticle.tick { animation: retTick .12s var(--ease) both; }
@keyframes retTick { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* shield-break flash: visually distinct from health hit (amber vs white/red) */
#hud .h-flash.sb { background: radial-gradient(ellipse at center, transparent 40%, rgba(255, 226, 168, .55)); animation: flash .35s; }
@media (prefers-reduced-motion: reduce) { #hud .h-reticle.tick { animation: none; } #hud .h-flash.sb { animation: none; opacity: .35; } }
/* ---- centre-right: stats overlay (goal 133), toggled by hud.setStats(on) ---- */
#hud .h-stats { position: absolute; right: calc(var(--m) + var(--safe-r)); top: calc(var(--m) + var(--safe-t) + 64px); width: 150px; display: grid; gap: var(--s1); pointer-events: none; opacity: 0; transition: opacity .25s; }
body.stats-on #hud .h-stats { opacity: 1; }
#hud .h-stats .st-row { display: flex; justify-content: space-between; gap: var(--s1); padding: 4px var(--s1); background: rgba(0,0,0,.45); border: 1px solid var(--glass-line); border-radius: 6px; font: 600 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; color: var(--c-ink); }
#hud .h-stats .st-l { color: var(--c-dim); font-size: var(--t-xs); }
#hud .h-stats .st-v.bad { color: var(--c-crit); } #hud .h-stats .st-v.mid { color: var(--c-warn); } #hud .h-stats .st-v.good { color: var(--c-shield); }
#hud .h-stats .st-spark { width: 100%; height: 24px; display: block; opacity: .6; }
@keyframes stPing { 0% { opacity: .25; } 100% { opacity: .9; } }