/* Scope, sight and spyglass overlays - owned by the Weapons module (src/ui/scopeOverlay.js).
   Sizes derive from two custom properties written by the overlay:
     --tube  diameter of the telescope image in px (matches the PostFX round mask)
     --vh    viewport height in px (the reticle SVG is a --vh square in angular units) */

#ui-root > .scope-overlay { pointer-events: none !important; }
.scope-overlay {
  --brass: #c9a24a;
  --brass-dark: #6b4f1f;
  --ink: #0b0a08;
  --tube: 84vh;
  --vh: 100vh;
  --raise: 0;
  position: fixed;
  inset: 0;
  display: none;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  font-family: var(--font-sc, 'IM Fell English SC', Georgia, serif);
  color: #e9dcc0;
  user-select: none;
}
.scope-overlay.on { display: block; }
.scope-overlay > * { position: absolute; pointer-events: none; }

/* ------------------------------------------------------------------ tube (telescopes, spyglass) */

.so-tube {
  left: 50%;
  top: 50%;
  width: var(--tube);
  height: var(--tube);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  display: none;
}
.scope-overlay[data-type="davidson"] .so-tube,
.scope-overlay[data-type="malcolm"] .so-tube,
.scope-overlay[data-type="spyglass"] .so-tube { display: block; }

/* lens fall-off toward the tube wall + a faint warm cast of old crown glass */
.so-vignette {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 236, 196, 0.035) 0%, rgba(255, 236, 196, 0) 45%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(8, 6, 4, 0.28) 80%, rgba(4, 3, 2, 0.78) 95%, #000 100%);
}
.scope-overlay[data-type="malcolm"] .so-vignette {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 236, 196, 0.03) 0%, rgba(255, 236, 196, 0) 40%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(8, 6, 4, 0.34) 78%, rgba(4, 3, 2, 0.85) 94%, #000 100%);
}

/* the eyepiece's brass edge catching light just outside the field stop */
.so-rim {
  position: absolute;
  inset: calc(var(--vh) * -0.012);
  border-radius: 50%;
  border: calc(var(--vh) * 0.007) solid transparent;
  background: conic-gradient(from 200deg, #5c4318, #d6b25e 12%, #8a672a 24%, #3b2a0f 40%, #a98238 58%, #e4c578 66%, #6b4f1f 80%, #5c4318) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  opacity: 0.5;
}
.scope-overlay[data-type="spyglass"] .so-rim {
  inset: calc(var(--vh) * -0.016);
  border-width: calc(var(--vh) * 0.011);
  opacity: 0.62;
}
/* inner draw-tube stop of the field glass */
.scope-overlay[data-type="spyglass"] .so-vignette {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 228, 170, 0.05) 0%, rgba(255, 228, 170, 0) 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 66%, rgba(10, 7, 3, 0.3) 84%, rgba(30, 22, 10, 0.75) 93%, rgba(120, 90, 40, 0.35) 95.5%, rgba(4, 3, 2, 0.9) 97%, #000 100%);
}

/* fallback black surround when there is no PostFX mask */
.so-fill { display: none; }
.scope-overlay.nomask[data-type="davidson"] .so-fill,
.scope-overlay.nomask[data-type="malcolm"] .so-fill,
.scope-overlay.nomask[data-type="spyglass"] .so-fill {
  display: block;
  left: 50%;
  top: 50%;
  width: var(--tube);
  height: var(--tube);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 200vmax #000;
}

/* ------------------------------------------------------------------ reticle (angular units) */

.so-reticle {
  left: 50%;
  top: 50%;
  width: var(--vh);
  height: var(--vh);
  overflow: visible;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.so-reticle g { display: none; }
.scope-overlay[data-type="davidson"] .r-davidson,
.scope-overlay[data-type="malcolm"] .r-malcolm { display: inline; }
.r-wire {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.1px;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  opacity: 0.95;
}
.r-wire-heavy { stroke-width: 2.6px; }
.r-stadia { stroke-width: 1px; }
.r-num { fill: var(--ink); font-family: var(--font-sc, Georgia, serif); opacity: 0.85; }
.r-drop {
  fill: rgba(206, 58, 34, 0.9);
  stroke: rgba(255, 238, 214, 0.75);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

/* ------------------------------------------------------------------ powder smoke haze */

.so-haze {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--vh) * 1.5);
  height: calc(var(--vh) * 1.1);
  margin-left: calc(var(--vh) * -0.75);
  margin-top: calc(var(--vh) * -0.55);
  opacity: 0;
  will-change: transform, opacity;
}
.so-haze-clip { inset: 0; }
.scope-overlay[data-type="davidson"] .so-haze-clip,
.scope-overlay[data-type="malcolm"] .so-haze-clip {
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 calc(var(--tube) * 0.5), transparent calc(var(--tube) * 0.5 + 1px));
  mask: radial-gradient(circle at 50% 50%, #000 calc(var(--tube) * 0.5), transparent calc(var(--tube) * 0.5 + 1px));
}
.so-haze-puff {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(214, 208, 196, 0.92) 0%, rgba(198, 192, 180, 0.6) 34%, rgba(186, 180, 168, 0.22) 58%, rgba(180, 174, 162, 0) 72%);
}
.so-haze-puff.p0 { left: 18%; top: 22%; width: 62%; height: 70%; }
.so-haze-puff.p1 { left: 40%; top: 8%; width: 48%; height: 60%; opacity: 0.85; }
.so-haze-puff.p2 { left: 6%; top: 44%; width: 46%; height: 52%; opacity: 0.75; }
.so-haze-puff.p3 { left: 46%; top: 40%; width: 44%; height: 56%; opacity: 0.8; }

/* ------------------------------------------------------------------ Sharps peep sight */

.so-peep, .so-notch { inset: 0; display: none; }
.scope-overlay[data-type="peep"] .so-peep { display: block; }
.scope-overlay[data-type="notch"] .so-notch { display: block; }

/* out-of-focus rear aperture: a soft dark ring with a faint diffraction halo */
.peep-ring {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 240, 214, 0) calc(var(--vh) * 0.17), rgba(255, 240, 214, 0.08) calc(var(--vh) * 0.192), rgba(255, 240, 214, 0) calc(var(--vh) * 0.215)),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) calc(var(--vh) * 0.19), rgba(16, 13, 9, 0.75) calc(var(--vh) * 0.228), rgba(10, 8, 6, 0.97) calc(var(--vh) * 0.27), rgba(6, 5, 4, 0.995) calc(var(--vh) * 0.42));
}
/* front blade: the aim point is its tip, exactly at the centre of the screen */
.peep-blade {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--vh) * 0.012);
  height: calc(var(--vh) * 0.26);
  transform: translateX(-50%);
  background: linear-gradient(90deg, #0d0b08, #2c261d 46%, #15120d 60%, #0a0907);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  filter: blur(0.5px);
}
/* barrel top seen through the aperture, well out of focus */
.peep-barrel {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--vh) * 0.11);
  width: calc(var(--vh) * 0.1);
  height: calc(var(--vh) * 0.5);
  transform: translateX(-50%);
  background: linear-gradient(90deg, #0b0a07, #2a2219 30%, #3a3024 50%, #221b13 70%, #0b0a07);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  filter: blur(calc(var(--vh) * 0.006));
}

/* ------------------------------------------------------------------ Colt notch sight */

/* octagonal barrel running out to the front sight (its far end at the centre), wide enough near
   the eye to show either side of the hammer */
.notch-barrel {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--vh) * 0.012);
  width: calc(var(--vh) * 0.3);
  height: calc(var(--vh) * 0.5);
  transform: translateX(-50%);
  background: linear-gradient(90deg, #07080a 0%, #191c21 22%, #3b4249 44%, #4a525a 50%, #2b3036 58%, #15181c 78%, #07080a 100%);
  clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%);
  filter: blur(calc(var(--vh) * 0.004));
}
/* brass cone front sight of the Navy Colt; its tip is the aim point */
.notch-front {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--vh) * 0.012);
  height: calc(var(--vh) * 0.022);
  transform: translateX(-50%);
  background: linear-gradient(90deg, #4a3613, #b9913e 40%, #e8c97a 52%, #6a4c1a);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  border-radius: 45% 45% 0 0;
  filter: blur(0.4px);
}
/* hammer nose with its sighting notch: the closest thing to the eye, narrow, rounded and soft.
   The tops of the notch shoulders line up with the tip of the front sight. */
.notch-rear {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--vh) * 0.17);
  height: calc(var(--vh) * 0.56);
  transform: translateX(-50%);
  border-radius: 38% 38% 12% 12% / 9% 9% 4% 4%;
  background:
    radial-gradient(ellipse 60% 14% at 50% 2%, rgba(150, 156, 164, 0.28), rgba(0, 0, 0, 0) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6)),
    linear-gradient(180deg, #1c1e22 0%, #0e0f11 22%, #050506 100%);
  clip-path: polygon(0 0, 41% 0, 46% 6%, 54% 6%, 59% 0, 100% 0, 100% 100%, 0 100%);
  filter: blur(calc(var(--vh) * 0.008));
}
.scope-overlay[data-type="notch"] .so-haze { opacity: 0; }

/* ------------------------------------------------------------------ instruments beside the tube */

.so-side {
  left: min(calc(50% + var(--tube) / 2 + var(--vh) * 0.035), calc(100% - var(--vh) * 0.22));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--vh) * 0.022);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.so-side.glass .so-drum,
.so-side.glass .so-breath,
.so-side.glass .so-focusmeter { display: none; }
.scope-overlay[data-type="spyglass"] .so-side { top: calc(50% + var(--vh) * 0.2); }

/* Davidson-style elevation drum: knurled brass with an engraved figure */
.so-drum {
  display: grid;
  justify-items: center;
  min-width: calc(var(--vh) * 0.1);
  padding: calc(var(--vh) * 0.008) calc(var(--vh) * 0.016) calc(var(--vh) * 0.01);
  border-radius: calc(var(--vh) * 0.006);
  color: #1b1611;
  text-shadow: 0 1px 0 rgba(255, 236, 190, 0.35);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 4px) left / calc(var(--vh) * 0.012) 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 4px) right / calc(var(--vh) * 0.012) 100% no-repeat,
    linear-gradient(180deg, #8c6a2c 0%, #e0c072 22%, #c9a24a 50%, #8a672a 82%, #5c4318 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(60, 40, 10, 0.6);
}
.so-drum.fixed { opacity: 0.55; }
.drum-label, .drum-unit { font-size: calc(var(--vh) * 0.012); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.drum-value { font-family: 'IM Fell DW Pica', var(--font-body, Georgia), serif; font-size: calc(var(--vh) * 0.036); line-height: 1.05; }

.so-wind { display: flex; align-items: center; gap: calc(var(--vh) * 0.01); font-size: calc(var(--vh) * 0.017); }
.so-wind-arrow { width: calc(var(--vh) * 0.036); height: calc(var(--vh) * 0.036); }
.so-wind .wa-ring { fill: rgba(10, 8, 5, 0.35); stroke: rgba(233, 220, 192, 0.55); stroke-width: 0.8; }
.so-wind .wa-arrow { fill: #e9dcc0; }
.so-wind.calm .wa-arrow { opacity: 0.25; }

.so-breath, .so-focusmeter { display: none; font-size: calc(var(--vh) * 0.013); letter-spacing: 0.1em; text-transform: uppercase; }
.so-breath.show, .so-focusmeter.show { display: block; }
.breath-track {
  width: calc(var(--vh) * 0.13);
  height: calc(var(--vh) * 0.006);
  margin-top: calc(var(--vh) * 0.004);
  background: rgba(233, 220, 192, 0.18);
  border: 1px solid rgba(233, 220, 192, 0.35);
}
.breath-fill { height: 100%; background: #e9dcc0; transform-origin: left center; }
.so-breath.holding .breath-fill { background: #f3e2b4; box-shadow: 0 0 6px rgba(243, 226, 180, 0.6); }
.so-breath.spent .breath-fill { background: #b0402e; }
.so-focusmeter .breath-fill { background: #d6a548; }

.so-left {
  right: min(calc(50% + var(--tube) / 2 + var(--vh) * 0.035), calc(100% - var(--vh) * 0.22));
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  justify-items: end;
  gap: calc(var(--vh) * 0.012);
  text-align: right;
  max-width: calc(var(--vh) * 0.3);
  font-size: calc(var(--vh) * 0.017);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.so-ammo.empty { color: #d8846c; }
.scope-overlay[data-type="spyglass"] .so-left { display: none; }
.so-range { color: #f0d79a; font-size: calc(var(--vh) * 0.019); }
.so-range:empty { display: none; }

.so-hint {
  left: 50%;
  top: calc(50% + var(--tube) / 2 - var(--vh) * 0.085);
  transform: translateX(-50%);
  padding: calc(var(--vh) * 0.005) calc(var(--vh) * 0.014);
  font-size: calc(var(--vh) * 0.018);
  letter-spacing: 0.05em;
  color: #f2e6c9;
  background: rgba(12, 9, 6, 0.55);
  border-top: 1px solid rgba(201, 162, 74, 0.5);
  border-bottom: 1px solid rgba(201, 162, 74, 0.5);
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.so-hint.show { opacity: 1; }
.scope-overlay[data-type="peep"] .so-hint,
.scope-overlay[data-type="notch"] .so-hint { top: auto; bottom: calc(var(--vh) * 0.12); }

/* Marksman's Focus: a warm sepia closing in from the edges, pulsing gently */
.so-focus {
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s;
  background: radial-gradient(circle at 50% 50%, rgba(120, 80, 30, 0) 40%, rgba(120, 80, 30, 0.16) 70%, rgba(70, 40, 12, 0.42) 100%);
  mix-blend-mode: multiply;
}
.scope-overlay.focus .so-focus { opacity: 1; animation: so-focus-pulse 1.1s ease-in-out infinite; }
@keyframes so-focus-pulse { 50% { opacity: 0.75; } }

/* ------------------------------------------------------------------ spyglass */

.so-glass { inset: 0; display: none; }
.scope-overlay[data-type="spyglass"] .so-glass { display: block; }
.glass-brackets {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 40px;
  opacity: 0;
  transition: opacity 0.12s;
  will-change: transform;
}
.glass-brackets.show { opacity: 1; }
.gb {
  position: absolute;
  width: 28%;
  height: 14%;
  min-width: 6px;
  min-height: 6px;
  border-color: rgba(240, 228, 200, 0.9);
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9));
}
.gb.tl { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.gb.tr { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.gb.bl { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.gb.br { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.glass-brackets.tagged .gb { border-color: #e0a63a; }
.glass-brackets.friend .gb { border-color: rgba(150, 175, 220, 0.85); }

.glass-card {
  left: min(calc(50% + var(--tube) / 2 + var(--vh) * 0.03), calc(100% - var(--vh) * 0.33));
  top: calc(50% - var(--vh) * 0.06);
  transform: translateY(-50%);
  width: calc(var(--vh) * 0.3);
  padding: calc(var(--vh) * 0.014) calc(var(--vh) * 0.018);
  color: #1b1611;
  font-family: var(--font-body, 'IM Fell English', Georgia, serif);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 250, 235, 0.5), rgba(255, 250, 235, 0) 60%),
    linear-gradient(180deg, #ecdfc3, #d9c69c);
  border: 1px solid #8a672a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 0 0 3px rgba(233, 220, 192, 0.6), inset 0 0 0 4px rgba(138, 103, 42, 0.45);
  opacity: 0;
  transition: opacity 0.15s;
}
.glass-card.show { opacity: 1; }
.gc-title { font-family: var(--font-sc, Georgia, serif); font-size: calc(var(--vh) * 0.022); line-height: 1.1; }
.gc-sub { font-style: italic; font-size: calc(var(--vh) * 0.015); opacity: 0.85; margin-top: 0.2em; }
.gc-reg { font-size: calc(var(--vh) * 0.015); margin: 0.15em 0 0.5em; padding-bottom: 0.4em; border-bottom: 1px solid rgba(138, 103, 42, 0.45); }
.gc-reg:empty { display: none; }
.gc-row { display: flex; justify-content: space-between; font-size: calc(var(--vh) * 0.016); line-height: 1.45; }
.gc-k { font-family: var(--font-sc, Georgia, serif); opacity: 0.75; }
.gc-v { font-weight: 600; }
.gc-tag { position: relative; margin-top: 0.6em; height: calc(var(--vh) * 0.022); border: 1px solid rgba(122, 20, 20, 0.6); overflow: hidden; }
.gc-tagbar { position: absolute; inset: 0; background: linear-gradient(90deg, #7a1414, #a52a1c); transform-origin: left center; transform: scaleX(0); }
.gc-tagtext { position: relative; text-align: center; font-family: var(--font-sc, Georgia, serif); font-size: calc(var(--vh) * 0.014); line-height: calc(var(--vh) * 0.021); letter-spacing: 0.14em; text-transform: uppercase; color: #1b1611; }
.glass-card.tagged .gc-tagtext { color: #f3e6c4; }
.glass-card.friend .gc-tag { border-color: rgba(43, 63, 107, 0.6); }

.glass-range { display: none; }
.scope-overlay[data-type="spyglass"] .glass-range {
  display: block;
  left: 50%;
  top: calc(50% + var(--tube) / 2 - var(--vh) * 0.07);
  transform: translateX(-50%);
  font-size: calc(var(--vh) * 0.018);
  color: rgba(240, 228, 200, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ------------------------------------------------------------------ rifle open sights (campaign arms)
   One picture for every iron-sighted rifle, like the shooter sees it with the eye on the comb: the
   rear sight a hand's breadth from the eye, far out of focus and filling the lower middle of the view
   (the breech and the stock behind it), the long barrel's breech showing either side of it, and the
   front sight sitting in the rear notch - the tip of the front sight is the aim point, exactly at
   the centre, level with the tops of the rear notch. data-type picks the rear sight:
     iron_notch   open V notch (Dimick plains rifle, Colt revolving rifle)
     iron_blade   the Springfield's small U-notched leaf over a blade on the bayonet stud
     iron_ladder  a ladder leaf: the notched slide stands higher on its rails as the sight is raised
                  (--raise 0..1: Enfield, Spencer, Henry)
   data-finish = bright | browned | blued (barrel), data-front = steel | brass (front sight). */

/* --raise is written on .scope-overlay by ScopeOverlay (default 0 there) */
.so-iron { inset: 0; display: none; }
.scope-overlay[data-type^="iron"] .so-iron { display: block; }
.scope-overlay[data-type^="iron"] .so-haze { opacity: 0; }

/* the barrel's breech either side of (and under) the rear sight */
.iron-barrel {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--vh) * 0.03);
  width: calc(var(--vh) * 0.44);
  height: calc(var(--vh) * 0.5);
  transform: translateX(-50%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #07080a 0%, #1b1e23 24%, #3a4047 45%, #4a5158 50%, #2c3137 57%, #14171b 80%, #07080a 100%);
  filter: blur(calc(var(--vh) * 0.01));
}
.scope-overlay[data-finish="bright"] .iron-barrel {
  background: linear-gradient(90deg, #0d0e10 0%, #3a3d41 20%, #8b9096 42%, #b9bec3 49%, #6c7176 58%, #2b2e32 80%, #0d0e10 100%);
}
.scope-overlay[data-finish="browned"] .iron-barrel {
  /* octagonal browned barrel: flats catch the light in bands */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 33%, rgba(255, 220, 170, 0.08) 34%, rgba(0, 0, 0, 0) 37%, rgba(0, 0, 0, 0) 63%, rgba(255, 220, 170, 0.08) 66%, rgba(0, 0, 0, 0) 67%),
    linear-gradient(90deg, #0b0806 0%, #2a2018 22%, #4a3a2b 40%, #5b4836 50%, #3a2d21 60%, #1e1711 80%, #0b0806 100%);
}
.iron-band { display: none; }

/* front sight: its tip is the aim point */
.iron-front {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--vh) * 0.011);
  height: calc(var(--vh) * 0.034);
  transform: translateX(-50%);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  border-radius: 45% 45% 0 0;
  background: linear-gradient(90deg, #121417, #4e545b 42%, #9097a0 52%, #25282c);
  filter: blur(0.4px);
}
.scope-overlay[data-front="brass"] .iron-front {
  background: linear-gradient(90deg, #4a3613, #b9913e 40%, #e8c97a 52%, #6a4c1a);
}

/* rear sight + breech: close to the eye and soft. Proper sight picture: the tops of the notch
   shoulders level with the tip of the front sight (the centre line), the front sight showing in
   the notch with light either side of it */
.iron-rear {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--vh) * 0.22);
  height: calc(var(--vh) * 0.56);
  transform: translateX(-50%);
  border-radius: 26% 26% 6% 6% / 4% 4% 2% 2%;
  background:
    radial-gradient(ellipse 55% 6% at 50% 0%, rgba(160, 166, 174, 0.3), rgba(0, 0, 0, 0) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.55)),
    linear-gradient(180deg, #202226 0%, #101113 18%, #060607 100%);
  /* open V notch: 0.04 vh wide, 0.026 vh deep (the front sight shows light either side) */
  clip-path: polygon(0 2.6%, 40.9% 0, 50% 4.64%, 59.1% 0, 100% 2.6%, 100% 100%, 0 100%);
  filter: blur(calc(var(--vh) * 0.007));
}
.scope-overlay[data-type="iron_blade"] .iron-rear {
  /* the Springfield's small leaf with a U notch, on its block over the breech */
  width: calc(var(--vh) * 0.18);
  clip-path: polygon(0 3%, 40% 0, 42.5% 2.5%, 45.5% 4%, 50% 4.64%, 54.5% 4%, 57.5% 2.5%, 60% 0, 100% 3%, 100% 100%, 0 100%);
}
.scope-overlay[data-finish="browned"] .iron-rear {
  background:
    radial-gradient(ellipse 55% 6% at 50% 0%, rgba(176, 150, 120, 0.25), rgba(0, 0, 0, 0) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.55)),
    linear-gradient(180deg, #241c15 0%, #120e0a 18%, #070504 100%);
}
.scope-overlay[data-type="iron_ladder"] .iron-rear {
  /* the ladder's notched slide only; rails and base are .iron-ladder */
  width: calc(var(--vh) * 0.12);
  height: calc(var(--vh) * 0.04);
  border-radius: 12%;
  clip-path: polygon(0 0, 35% 0, 50% 65%, 65% 0, 100% 0, 100% 100%, 0 100%);
  filter: blur(calc(var(--vh) * 0.006));
}

/* ladder leaf: two rails under the slide, standing taller as the sight is raised (folded flat on
   the battle sight), then the sight base and the breech down to the bottom of the view */
.iron-ladder { display: none; }
.scope-overlay[data-type="iron_ladder"] .iron-ladder {
  display: block;
  position: absolute;
  left: 50%;
  top: calc(50% + var(--vh) * 0.038);
  width: calc(var(--vh) * 0.12);
  height: calc(var(--vh) * (0.004 + 0.4 * var(--raise)));
  transform: translateX(-50%);
  border-left: calc(var(--vh) * 0.02) solid #0b0c0e;
  border-right: calc(var(--vh) * 0.02) solid #0b0c0e;
  filter: blur(calc(var(--vh) * 0.008));
}
.scope-overlay[data-type="iron_ladder"] .iron-ladder::after {
  content: '';
  position: absolute;
  left: calc(var(--vh) * -0.05);
  right: calc(var(--vh) * -0.05);
  top: 100%;
  height: calc(var(--vh) * 0.6);
  border-radius: 30% 30% 0 0 / 5% 5% 0 0;
  background:
    radial-gradient(ellipse 50% 4% at 50% 0%, rgba(150, 156, 164, 0.25), rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, #1c1e22 0%, #0d0e10 14%, #060607 100%);
}
.ladder-tick {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--vh) * 0.003);
  background: rgba(140, 146, 152, 0.3);
}
.ladder-tick.t0 { top: 12%; } .ladder-tick.t1 { top: 27%; } .ladder-tick.t2 { top: 42%; }
.ladder-tick.t3 { top: 57%; } .ladder-tick.t4 { top: 72%; } .ladder-tick.t5 { top: 87%; }

.scope-overlay[data-type^="iron"] .so-hint { top: auto; bottom: calc(var(--vh) * 0.12); }

/* ------------------------------------------------------------------ lens fog (breath condensation)
   Telescopes only. Opacities are driven by G.weapons.scopeFog; --wipe (0..1) is the wipe stroke:
   the cloth sweeps left to right and the glass behind it is clear. */

.so-fog {
  left: 50%;
  top: 50%;
  width: var(--tube);
  height: var(--tube);
  border-radius: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  display: none;
  --wipe: 0;
}
.scope-overlay.fogon[data-type="davidson"] .so-fog,
.scope-overlay.fogon[data-type="malcolm"] .so-fog { display: block; }
.so-fog > div { position: absolute; inset: 0; border-radius: 50%; }
.fog-soft {
  opacity: 0;
  -webkit-backdrop-filter: blur(calc(var(--vh) * 0.0035));
  backdrop-filter: blur(calc(var(--vh) * 0.0035));
  background: radial-gradient(circle at 50% 52%, rgba(206, 213, 218, 0.1) 0%, rgba(214, 220, 224, 0.26) 52%, rgba(222, 226, 230, 0.5) 84%, rgba(230, 233, 236, 0.66) 100%);
}
.fog-heavy {
  opacity: 0;
  -webkit-backdrop-filter: blur(calc(var(--vh) * 0.013));
  backdrop-filter: blur(calc(var(--vh) * 0.013));
  background: radial-gradient(circle at 48% 46%, rgba(216, 221, 225, 0.3) 0%, rgba(222, 226, 229, 0.42) 60%, rgba(230, 233, 236, 0.6) 100%);
}
.fog-frost {
  opacity: 0;
  mix-blend-mode: screen;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.018' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2.2 -0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  /* slow condensation blotches (no fine grain or bead grid: those read as a screen door) */
  background-size: 100% 100%;
}
.so-fog.wiping .fog-soft,
.so-fog.wiping .fog-heavy,
.so-fog.wiping .fog-frost {
  -webkit-mask-image: linear-gradient(105deg, rgba(0, 0, 0, 0) calc(var(--wipe) * 140% - 32%), #000 calc(var(--wipe) * 140% - 14%));
  mask-image: linear-gradient(105deg, rgba(0, 0, 0, 0) calc(var(--wipe) * 140% - 32%), #000 calc(var(--wipe) * 140% - 14%));
}
/* the sleeve / cloth crossing the eyepiece */
.fog-cloth { display: none; }
.so-fog.wiping .fog-cloth {
  display: block;
  inset: -20% auto -20% calc(var(--wipe) * 140% - 52%);
  width: 34%;
  border-radius: 40%;
  background: linear-gradient(90deg, rgba(30, 26, 20, 0) 0%, rgba(42, 36, 28, 0.9) 35%, rgba(28, 24, 18, 0.96) 60%, rgba(30, 26, 20, 0) 100%);
  filter: blur(calc(var(--vh) * 0.012));
  transform: rotate(15deg);
}

/* ------------------------------------------------------------------ hold fire (Reputation)
   A protected man under the crosshair: the wires and front sights go red, a ring marks the aim
   point and the reason shows under it. */

.so-warn, .so-warnring { display: none; }
.scope-overlay.warn .so-warn {
  display: block;
  left: 50%;
  top: calc(50% + var(--vh) * 0.07);
  transform: translateX(-50%);
  padding: calc(var(--vh) * 0.004) calc(var(--vh) * 0.014);
  font-size: calc(var(--vh) * 0.019);
  letter-spacing: 0.06em;
  color: #f6dccf;
  white-space: nowrap;
  background: rgba(96, 16, 8, 0.72);
  border-top: 1px solid rgba(220, 90, 60, 0.7);
  border-bottom: 1px solid rgba(220, 90, 60, 0.7);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.scope-overlay.warn .so-warnring {
  display: block;
  left: 50%;
  top: 50%;
  width: calc(var(--vh) * 0.07);
  height: calc(var(--vh) * 0.07);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(206, 52, 30, 0.8);
  box-shadow: 0 0 6px rgba(206, 52, 30, 0.6);
}
.scope-overlay.warn .r-wire { stroke: #8a170c; }
.scope-overlay.warn .iron-front,
.scope-overlay.warn .peep-blade,
.scope-overlay.warn .notch-front { filter: drop-shadow(0 0 3px rgba(214, 50, 26, 0.95)); }

/* ------------------------------------------------------------------ caps */

.so-caps { font-size: calc(var(--vh) * 0.015); letter-spacing: 0.06em; opacity: 0.85; }
.so-caps:empty { display: none; }
.so-caps.empty { color: #d8846c; opacity: 1; }
.so-caps.misfire { color: #e0b05a; opacity: 1; }
.gc-row.hidden { display: none; }
/* open sights fill the lower middle of the view: the warning goes above the aim point there */
.scope-overlay.warn[data-type^="iron"] .so-warn,
.scope-overlay.warn[data-type="peep"] .so-warn,
.scope-overlay.warn[data-type="notch"] .so-warn { top: calc(50% - var(--vh) * 0.11); }