/* Celestial HUD skin (owner concept: Desktop/NU LIGHT WEB BUILD OCT 7/nu-light-hud-pack.zip, celestial-hud-concept.png).
   Loaded last, so it owns colour, type, frames and the zone layout:
     top-left team score box | top-centre compass with a minimal health/shield pair under it
     bottom-left radar | bottom-centre ABILITIES panel | bottom-right weapon.
   One ink: ivory line-art on deep navy. No red or blue: the enemy tone is amber, and only where the two sides must be told apart. */
#hud, .chub {
  --cel: #f4e4bc; --cel-2: #cdbb8e; --cel-dim: rgba(244, 228, 188, .55); --cel-line: rgba(244, 228, 188, .42); --cel-faint: rgba(244, 228, 188, .16);
  --cel-navy: rgba(11, 13, 32, .8); --cel-navy2: rgba(9, 10, 24, .62); --cel-foe: #e8a35c;
  --f-cel: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --c-red: var(--cel-foe); --c-blue: var(--cel); --c-shield: var(--cel); --c-health: var(--cel); --c-gold: var(--cel); --c-ink: #f6eedb; --c-dim: rgba(244, 228, 188, .62);
  --c-warn: #e8a35c; --c-crit: #e8a35c;
  --glass: linear-gradient(160deg, rgba(11, 13, 32, .82), rgba(9, 10, 24, .62)); --glass-line: var(--cel-line);
  --tile: 62px;
}
#hud { color: var(--c-ink); }
#hud :is(.h-weapon, .sc-row, .feed-item, .medal, .h-tut, .pu, .sc-lead, .ob, .h-prompt) { border-radius: 2px; border-color: var(--cel-line); backdrop-filter: blur(6px); }
#hud :is(.sc-mode, .sc-nm, .vit-l, .wp-name, .wps-name, .rd-place, .gt em, .ab em, .feed-item, .h-prompt, .medal, .cmp-hd) { font-family: var(--f-cel); }
#hud :is(.sc-n, .sc-clock, .vit-n, .wp-mag, .wp-res, .wps-ammo, .gt .n, .ab .pct) { font-family: var(--f-cel); font-variant-numeric: tabular-nums lining-nums; }

/* minimal float (owner reference: nothing sits in a filled box - elements ride on the scene, hairline accents only) */
#hud :is(.h-score, .h-bl, .h-weapon) { background: none; border: 0; border-radius: 0; box-shadow: none; outline: none; clip-path: none; backdrop-filter: none; }
#hud :is(.h-score, .h-bl, .h-weapon)::before, #hud :is(.h-score, .h-bl, .h-weapon)::after { display: none; }
#hud .h-score { background: rgba(9, 10, 24, .3); backdrop-filter: blur(5px); }

/* ---- top-left: team score ---- */
#hud .h-score { width: 212px; padding: 8px 13px 9px; }
#hud .sc-meta { display: flex; justify-content: center; align-items: center; gap: 12px; height: 22px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--cel-faint); font: 500 11px/1 var(--f-cel); letter-spacing: .22em; color: var(--cel); }
#hud .sc-clock { min-width: 0; font: 600 14px/1 var(--f-cel); letter-spacing: .08em; }
#hud .sc-row { grid-template-columns: 20px 1fr auto; height: 29px; margin: 0; padding: 0; border: 0; background: none; backdrop-filter: none; --tcol: var(--cel); }
#hud .sc-row .sq { width: 15px; height: 15px; border-radius: 50%; background: none !important; box-shadow: inset -4.5px 1px 0 0 var(--tcol); rotate: -18deg; }   /* crescent */
#hud .sc-row.red { --tcol: var(--cel); } #hud .sc-row.blue { --tcol: var(--cel); }
#hud .sc-nm { font: 500 12.5px/1 var(--f-cel); letter-spacing: .14em; color: var(--cel); }
#hud .sc-bar { display: none; }
#hud .sc-n { grid-column: 3; font: 500 21px/1 var(--f-cel); color: var(--cel); min-width: 2ch; }
#hud .sc-row.mine .sc-nm::after { content: '  \2022'; opacity: .8; }
#hud .sc-lead { margin-top: 8px; border: 0; border-top: 1px solid var(--cel-faint); background: none; backdrop-filter: none; height: 24px; font-family: var(--f-cel); color: var(--cel-2); }

/* ---- top: compass centred, vitals minimal under it (Destiny pair: shield over health, icon + slim bar + number) ---- */
#hud .h-top { left: 0; right: 0; width: auto; translate: none; scale: none; top: calc(var(--m) * .7 + var(--safe-t)); pointer-events: none; }
#hud .h-top .compass { width: min(420px, 34vw); margin: 0 auto 5px; scale: var(--hu); transform-origin: 50% 0; }
#hud .h-top .pu-row { justify-content: center; scale: var(--hu); transform-origin: 50% 0; }
#hud .cmp-hd { background: none; backdrop-filter: none; color: var(--cel); letter-spacing: .12em; }
#hud .vit { position: relative; right: auto; top: auto; width: auto; margin: 6px auto 0; padding: 0; display: flex; justify-content: center; gap: 34px; border: 0; background: none; scale: var(--hu); transform-origin: 50% 0; }
/* each half of the pair: emblem + label + number on one line, slim bar beneath (owner reference: HP 100 / SHIELD 100) */
#hud .vit-r { display: grid; grid-template-columns: 15px auto 1fr; grid-template-rows: auto 7px; column-gap: 7px; row-gap: 5px; align-items: center; width: 154px; padding: 0; border: 0; }
#hud .vit-r.vit-hp { order: 1; } #hud .vit-r.vit-sh { order: 2; }
#hud .vit-l { grid-row: 1; grid-column: 1; display: flex; align-items: center; justify-content: center; gap: 0; color: var(--cel); text-shadow: 0 1px 6px #000; }
#hud .vit-l::after { content: none; }
#hud .vit-l svg { width: 14px; height: 14px; display: block; stroke: currentColor; stroke-width: 1.6; fill: none; }
#hud .vit-k { grid-row: 1; grid-column: 2; font: 500 10px/1 var(--f-cel); letter-spacing: .22em; color: var(--cel); text-shadow: 0 1px 6px #000; }
#hud .vit-n { grid-row: 1; grid-column: 3; justify-self: end; font: 500 12px/1 var(--f-cel); letter-spacing: .06em; color: var(--cel); text-align: right; white-space: nowrap; text-shadow: 0 1px 6px #000; }
#hud .vit .trap, #hud .vit .hp-row { grid-row: 2; grid-column: 1 / -1; height: 7px; }
#hud .vit .trap { clip-path: none; background: none; border: 1px solid var(--cel-dim); border-radius: 4px; }
#hud .vit .trap-in { inset: 1px; clip-path: none; background: rgba(9, 10, 24, .5); border-radius: 3px; }
#hud .vit .sh-ghost, #hud .vit .sh-fill, #hud .vit .sh-over { top: 0; bottom: 0; }
#hud .vit .sh-fill { background: var(--cel); box-shadow: none; }
#hud .vit .sh-ghost { background: rgba(232, 163, 92, .7); }
#hud .vit .sh-over { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .7); }
#hud .vit .trap::after { border-color: var(--cel-foe); }
#hud .vit .hp-row { gap: 0; border: 1px solid var(--cel-dim); border-radius: 4px; background: rgba(9, 10, 24, .5); padding: 1px; }
#hud .vit .hp-row i { background: none; border-right: 1px solid rgba(9, 10, 24, .9); } #hud .vit .hp-row i:last-child { border-right: 0; }
#hud .vit .hp-row i.on { background: var(--cel); box-shadow: none; }
body.low-health #hud .vit .hp-row i.on { background: var(--cel-foe); }

/* ---- bottom-left: radar ---- */
#hud .h-radar { left: calc(var(--m) + var(--safe-l)); right: auto; top: auto; bottom: calc(var(--m) + 18px * var(--hu) + var(--safe-b)); transform-origin: 0 100%; }
#hud .rd-tilt { border-color: var(--cel-faint); background: radial-gradient(circle, rgba(18, 20, 44, .34), rgba(7, 8, 20, .58) 72%); box-shadow: inset 0 0 22px rgba(0, 0, 0, .5); }
#hud .h-radar::before { border-color: var(--cel-faint); } #hud .h-radar::after { border-color: var(--cel-faint); }
#hud .rd-place { left: 0; right: 0; text-align: center; color: var(--cel); letter-spacing: .26em; }
#hud .feed { top: 30%; }
#hud .feed-item { font-family: var(--f-cel); letter-spacing: .06em; }

/* ---- bottom-centre: ability discs (icon-first: disc + key chip, no name labels, no panel) ---- */
#hud .h-bl { left: 50%; translate: -50% 0; width: auto; min-width: 0; padding: 0; transform-origin: 50% 100%; bottom: calc(var(--m) * .8 + var(--safe-b)); }
#hud .h-bl .h-tiles { position: relative; display: flex; gap: 30px; margin: 0; padding: 0 0 30px; justify-content: center; }
#hud .h-bl .h-tiles::before { content: none; }   /* no ABILITIES caption: the discs + key chips are the label (icon-first) */
#hud .h-tiles .h-abil { order: 1; } #hud .h-tiles .h-gren { order: 2; }
#hud .gt, #hud .ab.nova, #hud .ab.blink { --acc: var(--cel); color: var(--cel); border-radius: 50%; }
#hud .gt::before, #hud .ab::before { inset: 0; border-radius: 50%; clip-path: none; background: none; border: 1px solid var(--cel-dim); z-index: -1; }
#hud .gt::after, #hud .ab::after { inset: 4px; border-radius: 50%; clip-path: none; background: radial-gradient(circle, #14163a, #090a1c 78%); border: 1px solid var(--cel-line); z-index: -1; }
#hud .gt.sel::before { background: none; border-color: var(--cel); box-shadow: 0 0 12px rgba(244, 228, 188, .45); }
#hud .gt.cd::after, #hud .ab.cast::after { background: radial-gradient(circle, #2a2440, #0c0b1e 78%); }
#hud .gt { opacity: .55; } #hud .gt.sel { opacity: 1; }
#hud .gt .ic, #hud .ab .ic { width: 28px; height: 28px; color: var(--cel); stroke: var(--cel); fill: none; }
#hud .ab.nova .ic, #hud .ab.nova .pxi.ic { translate: 0 0; }
#hud .gt .celi, #hud .ab .celi { position: absolute; inset: 0; width: 100%; height: 100%; grid-area: 1 / 1; border-radius: 50%; pointer-events: none; }
#hud .gt .ring .tr, #hud .ab.nova .ring .tr { stroke: transparent; }
#hud .gt .ring .pg, #hud .ab.nova .ring .pg { stroke: var(--cel); stroke-width: 2.5; }
#hud .gt.cd .ring .pg { stroke: var(--cel-foe); }
#hud .gt em, #hud .ab em { top: calc(var(--tile) + 9px); font: 500 8.5px/1.2 var(--f-cel); letter-spacing: .12em; color: var(--cel-dim); }
#hud .gt .kd, #hud .ab .kd { top: auto; bottom: -9px; right: auto; left: 50%; translate: -50% 0; height: 15px; min-width: 15px; padding: 0 4px; border-radius: 2px; background: #0b0d20; color: var(--cel); border: 1px solid var(--cel-line); box-shadow: none; font: 600 9px/1 var(--f-cel); z-index: 2; }
#hud .gt em, #hud .ab em { top: calc(var(--tile) + 11px); }
#hud .gt .n { right: -5px; bottom: auto; top: -3px; min-width: 18px; height: 18px; border-radius: 50%; background: #0b0d20; color: var(--cel); border: 1px solid var(--cel-line); font: 600 10px/1 var(--f-cel); }
#hud .ab.nova .pct { bottom: 9px; font: 600 8.5px/1 var(--f-cel); color: var(--cel); letter-spacing: .04em; }
#hud .ab.nova:not(.ready):not(.cast) .ic { opacity: .45; translate: 0 -5px; }
#hud .ab.nova.ready .pct, #hud .ab.nova.cast .pct { display: none; }
#hud .ab.nova.ready::before, #hud .ab.blink.ready::before { border-color: var(--cel); box-shadow: 0 0 14px rgba(244, 228, 188, .5); }
#hud .ab.ready .ic { filter: drop-shadow(0 0 5px rgba(244, 228, 188, .8)); }
#hud .ab.blink .pips { bottom: 7px; } #hud .ab.blink .pips i { width: 26px !important; height: 2px; }
#hud .ab.blink .pips i::after { background: var(--cel); box-shadow: none; }
#hud .ab.blink.ready .pips { display: none; }

/* super tile: the ring glows brighter as it fills, a full super breathes and throws halos, a live one spins a bright arc */
#hud .ab.nova .ring .pg { filter: drop-shadow(0 0 calc(2px + var(--ult, 0) * 6px) rgba(244, 228, 188, calc(.3 + var(--ult, 0) * .65))); transition: stroke-dashoffset .3s ease-out; }
#hud .ab.nova:not(.ready):not(.cast) { animation: celCharge 3.4s ease-in-out infinite; }
#hud .ab.nova .fx { display: block; inset: -6px; border-radius: 50%; }
#hud .ab.nova .fx::before { inset: 6px; }
#hud .ab.nova .fx::after { inset: 6px; border-radius: 50%; clip-path: circle(50%); background: linear-gradient(105deg, transparent 36%, rgba(255, 248, 226, .5) 50%, transparent 64%); }
#hud .ab.nova.ready { animation: celReady 1.7s ease-in-out infinite; }
#hud .ab.nova.ready::before { border-width: 2px; }
#hud .ab.nova.ready .fx::before { animation: tkPing 1.7s ease-out infinite; }
#hud .ab.nova.ready .fx::after { opacity: 1; animation: tkSweep 2.6s ease-in-out infinite; }
#hud .ab.nova.cast::before { border-color: transparent; background: conic-gradient(from 0deg, transparent 0 30%, var(--cel) 72%, transparent 76% 100%); -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%); mask: radial-gradient(circle, transparent 64%, #000 66%); animation: celSpin 1.1s linear infinite; }
#hud .ab.nova.cast { filter: drop-shadow(0 0 12px rgba(244, 228, 188, .75)); }
@keyframes celCharge { 0%, 100% { filter: drop-shadow(0 0 1px rgba(244, 228, 188, .08)); } 50% { filter: drop-shadow(0 0 calc(3px + var(--ult, 0) * 8px) rgba(244, 228, 188, calc(.15 + var(--ult, 0) * .4))); } }
@keyframes celReady { 0%, 100% { filter: drop-shadow(0 0 6px rgba(244, 228, 188, .55)); scale: 1; } 50% { filter: drop-shadow(0 0 17px rgba(255, 240, 200, .95)); scale: 1.05; } }
@keyframes celSpin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { #hud .ab.nova, #hud .ab.nova.ready, #hud .ab.nova.cast::before, #hud .ab.nova.ready .fx::before, #hud .ab.nova.ready .fx::after { animation: none; } }

/* ---- bottom-right: weapon (owner reference: hairline thumbs + star + big ammo, name as a whisper caption) ---- */
#hud .h-weapon { width: 244px; padding: 0; }
#hud .wp-thumbs { display: flex; gap: 8px; justify-content: flex-end; }
#hud .wp-slot { width: 66px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cel-line); border-radius: 2px; background: rgba(8, 9, 24, .38); backdrop-filter: blur(4px); }
#hud .wp-slot.sel { border-color: var(--cel); box-shadow: 0 0 12px rgba(244, 228, 188, .25); }
#hud .wp-slot .pxi { max-width: 56px; max-height: 30px; width: auto; height: auto; display: block; }
#hud .wp-ammo { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; margin-top: 7px; }
#hud .wp-star { width: 13px; height: 13px; align-self: center; background: var(--cel); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 5px rgba(244, 228, 188, .7)); }
#hud .wp-mag { font: 400 38px/1 var(--f-cel); color: var(--cel); letter-spacing: 0; }
#hud .wp-res { color: var(--cel-2); font: 500 14px/1 var(--f-cel); }
#hud .wp-res .am { display: none; }   /* ammo-type glyph reads as "00" at caption size - the star + numbers are the readout */
#hud .wp-name { display: flex; align-items: center; justify-content: flex-end; gap: 5px; border-top: 0; margin-top: 3px; padding: 0; color: var(--cel-2); letter-spacing: .22em; font: 500 9px/1.2 var(--f-cel); text-align: right; white-space: nowrap; overflow: hidden; }
#hud .wp-name .cls { width: 11px; height: 11px; flex: none; opacity: .75; }
#hud .wp-name span { overflow: hidden; text-overflow: ellipsis; }
#hud .wp-reload { text-align: right; }
#hud .wp-sec { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; border: 0; border-top: 1px solid var(--cel-faint); margin: 5px 0 0; padding: 5px 0 0; background: none; backdrop-filter: none; border-radius: 0; }
#hud .wps-name { color: var(--cel-2); letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; font: 500 9px/1.2 var(--f-cel); }
#hud .wps-ammo { display: inline-flex; align-items: baseline; gap: 4px; font: 500 11px/1 var(--f-cel); color: var(--cel-2); white-space: nowrap; }
#hud .wp-mag.low { color: var(--cel-foe); }
#hud .h-weapon .pxi.wsil, #hud .h-weapon .wsil { image-rendering: auto; filter: grayscale(1) sepia(.55) brightness(1.5) contrast(.9); }
#hud .h-weapon .gr-row { display: none; }   /* grenade counts live on the ABILITIES tiles */

/* ---- centre ---- */
#hud .h-reticle { color: var(--cel); } #hud .k-ring { border-color: var(--cel); border-width: 1px; }
#hud .h-prompt { font-family: var(--f-cel); letter-spacing: .12em; }
#hud .h-cam { font-family: var(--f-cel); }

@media (max-height: 620px), (max-width: 1100px) {
  #hud .vit { gap: 22px; } #hud .vit-r { width: 130px; grid-template-columns: 12px auto 1fr; column-gap: 5px; }
  #hud .h-bl .h-tiles { gap: 18px; }
}
@media (max-height: 520px), (max-width: 900px) { #hud .h-bl { width: auto; } #hud .h-weapon { width: 230px; } }

/* ability tiles: icon disc + key chip under it (owner reference: LB / Y / LT / A chips, no name labels) */
#hud .fx { display: none; }
#hud .h-bl { padding-bottom: 0; } #hud .h-bl .h-tiles { padding-bottom: 26px; }
#hud .gt .kd, #hud .ab .kd { bottom: auto; top: calc(var(--tile) + 8px); display: inline-flex; align-items: center; justify-content: center; height: 15px; min-width: 15px; padding: 0 5px; border: 1px solid var(--cel-line); border-radius: 3px; background: rgba(8, 9, 24, .5); font: 600 8.5px/1 var(--f-cel); letter-spacing: .1em; color: var(--cel-2); }
#hud .gt em, #hud .ab em { display: none; }
#hud .h-cam { left: calc(var(--m) + var(--safe-l)); right: auto; bottom: auto; top: calc(var(--m) + 150px * var(--hu) + var(--safe-t)); translate: none; transform-origin: 0 0; color: var(--cel-dim); letter-spacing: .14em; }
#hud .h-tut { border-radius: 0; background: var(--cel-navy); font-family: var(--f-cel); } #hud .h-tut .tt-h { font-family: var(--f-cel); letter-spacing: .24em; color: var(--cel); }
#hud .h-tut .tt-r span { font-family: var(--f-cel); letter-spacing: .12em; }

/* ---- pause (owner concept: celestial-pause-concept.png): one framed card, serif gold title, centred rows split by hairlines ---- */
#pause .panel.narrow { position: relative; width: min(460px, 92vw); padding: 42px 44px 34px; text-align: center; clip-path: none; border-radius: 0; background: rgba(8, 9, 24, .9); border: 1px solid rgba(244, 228, 188, .6); outline: 1px solid rgba(244, 228, 188, .22); outline-offset: 6px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); }
#pause .panel.narrow::before { content: ''; display: block; width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%; box-shadow: inset -9px 3px 0 0 #f4e4bc; rotate: -20deg; position: static; background: none; clip-path: none; inset: auto; border: 0; }
#pause .panel-head { display: block; margin: 0 0 6px; padding: 0 0 18px; border-bottom: 1px solid rgba(244, 228, 188, .35); animation: none; }
#pause .panel-head::after { display: none; }
#pause .panel-head .idx { display: none; }
#pause .panel-head h2 { font: 500 clamp(40px, 6vh, 58px)/1.1 'Cinzel', 'Cormorant Garamond', serif; letter-spacing: .06em; background: linear-gradient(180deg, #fff3cf, #d9b45e); -webkit-background-clip: text; background-clip: text; color: transparent; }
#pause .panel-head h2::after { display: none; }
#pause .panel-head .sub { display: block; margin-top: 8px; font: 500 11px/1.4 'Cinzel', serif; letter-spacing: .16em; color: rgba(244, 228, 188, .6); white-space: normal; }
#pause #pauseMenu { display: block; }
#pause #pauseMenu .menu-item, #pause #pauseMenu.menu .menu-item.sm { display: flex; justify-content: center; gap: 0; width: 100%; margin: 0; padding: 15px 4px !important; opacity: 1; clip-path: none; border: 0; border-bottom: 1px solid rgba(244, 228, 188, .2); border-radius: 0; background: none; box-shadow: none; font: 500 19px/1.2 'Cinzel', 'Cormorant Garamond', serif; letter-spacing: .16em; color: #f4e4bc; text-align: center; transform: none; transition: color .15s, letter-spacing .2s, text-shadow .2s; }
#pause #pauseMenu .menu-item:last-child { border-bottom: 0; }
#pause #pauseMenu .menu-item::before, #pause #pauseMenu .menu-item::after { display: none; }
#pause #pauseMenu .menu-item > :is(.n, svg, .arrow, i, .ar) { display: none; }
#pause #pauseMenu .menu-item:hover, #pause #pauseMenu .menu-item.focus, #pause #pauseMenu .menu-item.primary.focus { color: #fff; background: none; letter-spacing: .22em; text-shadow: 0 0 18px rgba(255, 226, 168, .75); }
#pause #pauseMenu .menu-item.primary { color: #fff3cf; background: none; }

/* the global BACK button never sits over the HUD while paused: ESC or RESUME closes the card */
body:has(#pause.active) #globalBack { display: none; }
#pause .panel.narrow { padding-bottom: 20px; }

/* aiming down sights: only the centre dot stays (the weapon is held off the centre column) */
#hud .h-reticle.ads:not(.sight):not(.third-person) svg > :not(circle) { display: none; }
#hud .h-reticle.ads:not(.sight):not(.third-person) svg > circle { r: 1.4px; }
/* ...except guns with a sight picture: the optic you are looking through, sized like a real bezel at arm's length.
   Each weapon family gets its own housing (holographic window / red-dot tube / peep ring / chevron post / crescent /
   shotgun bead), so the aim state of a VK-77 and an M4 no longer look like the same crosshair with a different glyph. */
#hud .h-reticle.ads.sight { width: 86px; height: 86px; }
#hud .h-reticle.ads.sight[data-sight="bead"] { width: 76px; height: 76px; }
#hud .h-reticle.ads.sight svg { stroke-width: 1.1; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .75)) drop-shadow(0 0 4px rgba(124, 238, 255, .35)); animation: sightIn .14s ease-out; }
#hud .h-reticle.ads.sight .sd { filter: drop-shadow(0 0 4px currentColor); animation: sightDot 1.8s ease-in-out infinite; }
@keyframes sightIn { from { opacity: 0; scale: 1.18; } to { opacity: 1; scale: 1; } }
@keyframes sightDot { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@media (prefers-reduced-motion: reduce) { #hud .h-reticle.ads.sight svg, #hud .h-reticle.ads.sight .sd { animation: none; } }
@media (max-width: 1100px), (max-height: 620px) { #hud .h-reticle.ads.sight { width: 64px; height: 64px; } #hud .h-reticle.ads.sight[data-sight="bead"] { width: 70px; height: 70px; } }

/* Destiny framing (docs/FPS_FRAMING.md): nothing sits in the centre column. The pickup prompt lives above the weapon panel. */
#hud .h-prompt { left: auto; right: calc(var(--m) + var(--safe-r)); top: auto; bottom: calc(var(--m) + 236px * var(--hu) + var(--safe-b)); translate: none; transform: none; scale: var(--hu); transform-origin: 100% 100%; }

/* a local animated pack viewmodel (js/packvm.js) brings its own optic: no overlay sight while aimed */
body.pack-vm .h-reticle.ads:not(.third-person) { opacity: 0 !important; }

/* ---- sleek futuristic sniper scope (.h-scope) & frameless smart-link tactical optic (.h-brs) ---- */
#hud .h-scope { inset: 0; display: none; pointer-events: none; color: #e8f6ff; --sc: #7ceeff; }
#hud .h-scope.on { display: grid; place-items: center; animation: scopeIn .15s var(--ease); }
#hud .h-scope::before { display: none; }
#hud .h-scope .sc-win { position: relative; width: min(80vh, 72vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(124, 238, 255, .035), rgba(6, 12, 24, .12) 70%, rgba(2, 5, 14, .55) 100%);
  box-shadow: 0 0 0 100vmax rgba(2, 4, 10, .86), inset 0 0 48px 10px rgba(0, 0, 0, .62); }
#hud .h-scope .sc-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
#hud .h-scope .sc-outer { stroke: rgba(124, 238, 255, .38); stroke-width: 1.1; }
#hud .h-scope .sc-ring { stroke: var(--sc); stroke-opacity: .24; stroke-width: .85; stroke-dasharray: 18 10; }
#hud .h-scope .sc-mid { stroke: rgba(244, 228, 188, .16); stroke-width: .75; stroke-dasharray: 4 10; }
#hud .h-scope .sc-ticks { stroke: rgba(124, 238, 255, .55); stroke-width: 1.2; }
#hud .h-scope .sc-hair { stroke: rgba(232, 246, 255, .48); stroke-width: .75; }
#hud .h-scope .sc-mil { stroke: var(--sc); stroke-opacity: .62; stroke-width: .95; }
#hud .h-scope .sc-bdc { stroke: rgba(244, 228, 188, .52); stroke-width: .9; }
#hud .h-scope .sc-chev { stroke: var(--sc); stroke-width: 1.5; filter: drop-shadow(0 0 4px var(--sc)); }
#hud .h-scope .sc-dot { fill: #ff4a58; stroke: none; filter: drop-shadow(0 0 4px #ff4a58); }
#hud .h-scope .zt { position: absolute; left: 14%; top: calc(50% - 26px); font: 600 clamp(14px, 2vh, 20px) var(--f-mono); letter-spacing: .18em; color: var(--sc); opacity: .88; text-shadow: 0 0 8px rgba(0, 0, 0, .85); }
#hud .h-scope .rg, #hud .h-scope .am { position: absolute; right: 14%; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-shadow: 0 0 8px rgba(0, 0, 0, .85); }
#hud .h-scope .rg { top: calc(50% - 34px); } #hud .h-scope .am { top: calc(50% + 8px); }
#hud .h-scope small { font: 500 8px var(--f-mono); letter-spacing: .38em; color: rgba(232, 246, 255, .55); }
#hud .h-scope b { font: 600 clamp(13px, 1.8vh, 18px) var(--f-mono); letter-spacing: .12em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .92); }
#hud .h-scope.lock { --sc: #ff4a58; } #hud .h-scope.lock .rg b { color: #ff4a58; }

#hud .h-brs { inset: 0; display: none; pointer-events: none; color: #e8f6ff; --sc: #7ceeff;
  background: radial-gradient(ellipse at center, transparent 46%, rgba(4, 8, 20, .48) 100%); }
#hud .h-brs.on { display: grid; place-items: center; animation: brIn .14s var(--ease); }
#hud .brs-win { position: relative; width: min(56vw, 100vh); aspect-ratio: 2 / 1; border-radius: 0; background: none; box-shadow: none; }
#hud .brs-win::before, #hud .brs-win::after { display: none; }
#hud .brs-win svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: .95; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .85)); }
#hud .brs-win svg .arc { stroke: var(--sc); stroke-opacity: .38; stroke-width: 1.05; }
#hud .brs-win svg .ring { stroke: var(--sc); stroke-opacity: .68; stroke-width: 1.1; stroke-dasharray: 18 6.5; }
#hud .brs-win svg .dr { stroke: var(--sc); stroke-opacity: .58; stroke-width: 1; }
#hud .brs-win svg .chev { stroke: var(--sc); stroke-width: 1.6; filter: drop-shadow(0 0 4px var(--sc)); }
#hud .brs-win svg .dot { fill: #ff4a58; stroke: none; filter: drop-shadow(0 0 4px #ff4a58); }
#hud .h-brs.lock { --sc: #ff4a58; } #hud .h-brs.lock .brs-rg b { color: #ff4a58; }
#hud .brs-zt { position: absolute; left: 21%; top: 28%; font: 600 clamp(12px, 1.7vh, 16px) var(--f-mono); letter-spacing: .18em; color: var(--sc); opacity: .85; text-shadow: 0 0 6px #000; }
#hud .brs-rg, #hud .brs-am { position: absolute; right: 21%; display: grid; justify-items: end; gap: 1px; text-shadow: 0 0 6px #000; }
#hud .brs-rg { top: 27%; } #hud .brs-am { bottom: 27%; }
#hud .brs-win small { font: 500 7.5px var(--f-mono); letter-spacing: .36em; color: rgba(232, 246, 255, .52); }
#hud .brs-win b { font: 600 clamp(12px, 1.7vh, 16px) var(--f-mono); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .9); }

/* ==== OPTICS v2 (docs/WEAPONS_IDENTITY.md): per-weapon sight pictures, tint, breathing, fringe, hit flare, perk glyph ==== */
#hud .h-reticle { --st: #7ceeff; --bw: 1; }
#hud .h-reticle .t { stroke: var(--st); } #hud .h-reticle .tf { fill: var(--st); } #hud .h-reticle .tfa { fill: var(--st); fill-opacity: .16; }
#hud .h-reticle .fl { stroke: var(--st); opacity: 0; transform-box: fill-box; transform-origin: center; }
/* sleek, small glass: the bezel should read like an optic at arm's length, not a window taped to the screen */
#hud .h-reticle.ads.sight { width: clamp(70px, 8.6vh, 96px); height: clamp(70px, 8.6vh, 96px); }
#hud .h-reticle.ads.sight:is([data-sight="bead"], [data-sight="breacher"], [data-sight="twin"]) { width: clamp(78px, 9.6vh, 106px); height: clamp(78px, 9.6vh, 106px); }
#hud .h-reticle.ads.sight:is([data-sight="iris"], [data-sight="ring3"]) { width: clamp(64px, 8vh, 88px); height: clamp(64px, 8vh, 88px); }
#hud .h-reticle.ads.sight svg { stroke-width: 1.1;
  /* chromatic fringe (red / cyan split) + a soft glow in the weapon's own colour, over a dark seat for bright skies */
  filter: drop-shadow(-.6px 0 0 rgba(255, 70, 110, .5)) drop-shadow(.6px 0 0 rgba(70, 225, 255, .5)) drop-shadow(0 0 1.6px rgba(0, 0, 0, .9)) drop-shadow(0 0 5px color-mix(in srgb, var(--st) 55%, transparent));
  animation: sightIn .16s ease-out, sightBreathe 3.6s .16s ease-in-out infinite; }
#hud .h-reticle.ads.sight .sd { filter: drop-shadow(0 0 3px var(--st)); animation: sightDot 1.8s ease-in-out infinite; }
#hud .h-reticle.ads.sight .hand { transform-origin: 0 0; animation: chronoHand 2.4s steps(12) infinite; }
@keyframes sightBreathe { 0%, 100% { transform: translate(0, 0) scale(1); } 35% { transform: translate(calc(.45px * var(--bw)), calc(-.7px * var(--bw))) scale(1.01); } 70% { transform: translate(calc(-.35px * var(--bw)), calc(.45px * var(--bw))) scale(.996); } }
@keyframes chronoHand { to { rotate: 360deg; } }
/* hit-confirm flare: the sight's ring blooms outward once in its own colour */
#hud .h-reticle.ads.sight.flare .fl { animation: sightFlare .26s cubic-bezier(.1, .8, .2, 1) both; }
#hud .h-reticle.ads.sight.flare .sd { animation: sightDotHit .2s ease-out both; }
@keyframes sightFlare { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes sightDotHit { 0% { filter: drop-shadow(0 0 7px #fff) brightness(2); } 100% { filter: drop-shadow(0 0 3px var(--st)); } }
#hud .h-reticle.ads.sight.enemy .sd { fill: #ff4a58; stroke: #ff4a58; }
/* perk proc glyph: tiny, beside the reticle, gone in 0.7 s */
#hud .h-perk { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; translate: 34px 30px; opacity: 0; pointer-events: none; color: var(--pk, #f4e4bc); }
#hud .h-perk svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 1px #000); }
#hud .h-perk.on { animation: perkPulse .72s cubic-bezier(.1, .8, .2, 1) both; }
@keyframes perkPulse { 0% { opacity: 0; scale: .5; } 18% { opacity: 1; scale: 1.25; } 60% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 1; } }
/* sniper glass: bigger window, chromatic rim fringe, edge vignette; readouts removed (stage pips only) */
#hud .h-scope .sc-win { width: min(90vh, 78vw);
  box-shadow: 0 0 0 100vmax rgba(2, 4, 10, .9), inset 0 0 60px 14px rgba(0, 0, 0, .66), inset 3px 0 6px -1px rgba(255, 60, 100, .35), inset -3px 0 6px -1px rgba(60, 220, 255, .35), 0 0 0 2px rgba(124, 238, 255, .12); }
#hud .h-scope .sc-win::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .5), color-mix(in srgb, var(--sc) 35%, transparent) 30%, transparent 62%); }
#hud .h-scope .sc-chev, #hud .h-scope .sc-mil { stroke: var(--sc); }
#hud :is(.h-scope .rg, .h-scope .am, .brs-rg, .brs-am) { display: none; }
#hud .h-scope .zt, #hud .brs-zt { font-size: 9px; letter-spacing: .3em; opacity: .7; }
/* lens bloom on scope entry and on every zoom stage change */
#hud .h-scope.zin .sc-win::after { animation: lensBloom .3s ease-out both; }
#hud .h-brs::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sc) 40%, transparent), transparent 45%); }
#hud .h-brs.zin::after { animation: lensBloom .26s ease-out both; }
@keyframes lensBloom { 0% { opacity: .85; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #hud .h-reticle.ads.sight svg, #hud .h-reticle.ads.sight .sd, #hud .h-reticle.ads.sight .hand, #hud .h-perk.on, #hud .h-scope.zin .sc-win::after, #hud .h-brs.zin::after { animation: none; } }

/* The aim mark is fixed at the actual screen centre, even during a hit confirm. */
#hud .h-reticle.ads.sight svg, #hud .h-reticle.ads.sight .sd { animation: none; filter: none; }
#hud .h-reticle.ads.sight.tick, #hud .h-reticle.ads.sight.enemy { animation: none; }
#hud .h-reticle.ads.sight.enemy .sd { stroke: #24070a; }
/* Keep the magnified optics' range markings, but drop decorative rings and flare. */
#hud :is(.sc-mid, .sc-ring, .sc-chev, .brs-win .arc, .brs-win .ring, .brs-win .dr, .brs-win .chev) { display: none; }
#hud .h-brs { background: none; }
#hud .h-brs.zin::after, #hud .h-scope.zin .sc-win::after { animation: none; }