/* Marksman optic overlay — pure DOM, zero draw calls.
 *
 * Everything here is gated on `#hud.scoped`, which hud.js mirrors from
 * playerState.scoped every frame. Nothing in this sheet knows about three.js
 * and nothing in the renderer knows about this sheet; the sim flag is the only
 * contract between them.
 *
 * .scope-overlay is deliberately the FIRST child of #hud, so it darkens the
 * canvas but paints UNDER the health bar, ammo, objective, prompt and reticle.
 * A scope that hides the ROE chip would be a scope that hides the whole point
 * of the game.
 *
 * The lens is not opaque outside the glass (.86, not 1.0). This is a
 * third-person game: blacking out the surround would delete the player's own
 * body and every flanking contact, which is a bug dressed as an effect.
 */

.scope-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease-out;

  /* Lens RADIUS, and the single number every other rule here is derived from.
     Pure vmin sizes a true circle but reads as a porthole on a 9:19.5 phone —
     a small disc marooned in two enormous dead bands. The vmax term lets the
     lens overrun the short edge on tall screens (the sides simply clip, which
     is what looking through glass does anyway) while vmin keeps it inside the
     frame on a landscape monitor. Whichever wins, the ring and the range
     readout below follow it instead of guessing at the viewport. */
  --lens: max(40vmin, 28vmax);
}
#hud.scoped .scope-overlay { opacity: 1; }

.scope-lens {
  position: absolute;
  inset: 0;
  background:
    /* faint warm wash inside the glass — coated optics, not clean air */
    radial-gradient(circle var(--lens) at 50% 50%,
      rgba(216, 195, 154, .05) 0%,
      rgba(216, 195, 154, .05) 55%,
      rgba(216, 195, 154, 0) 72%),
    /* the surround */
    radial-gradient(circle var(--lens) at 50% 50%,
      rgba(10, 9, 6, 0) 58%,
      rgba(10, 9, 6, .26) 76%,
      rgba(10, 9, 6, .66) 92%,
      rgba(10, 9, 6, .78) 100%);
}

/* Eyepiece ring + the four cardinal ticks that sit on it. Drawn with one
   element and its two pseudo-elements: no extra nodes, no images. */
.scope-edge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--lens) * 2);
  height: calc(var(--lens) * 2);
  margin: calc(var(--lens) * -1) 0 0 calc(var(--lens) * -1);
  border-radius: 50%;
  border: 1px solid rgba(216, 195, 154, .22);
  box-shadow:
    inset 0 0 0 1px rgba(10, 9, 6, .5),
    inset 0 0 7vmin rgba(10, 9, 6, .45);
  transform: scale(1.06);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
#hud.scoped .scope-edge { transform: scale(1); }

/* cardinal ticks: four short marks at 12/3/6/9 on the ring */
.scope-edge::before,
.scope-edge::after {
  content: '';
  position: absolute;
  background: rgba(216, 195, 154, .38);
}
.scope-edge::before {           /* vertical pair */
  left: 50%;
  top: -1px;
  width: 1px;
  height: calc(100% + 2px);
  margin-left: -.5px;
  background: linear-gradient(to bottom,
    rgba(216, 195, 154, .5) 0 2.6%, rgba(216, 195, 154, 0) 2.6% 97.4%,
    rgba(216, 195, 154, .5) 97.4% 100%);
}
.scope-edge::after {            /* horizontal pair */
  top: 50%;
  left: -1px;
  height: 1px;
  width: calc(100% + 2px);
  margin-top: -.5px;
  background: linear-gradient(to right,
    rgba(216, 195, 154, .5) 0 2.6%, rgba(216, 195, 154, 0) 2.6% 97.4%,
    rgba(216, 195, 154, .5) 97.4% 100%);
}

/* Range is aim geometry, not PID. Keep both lines in the upper glass, clear
   of dialogue and the bottom HUD in either phone orientation. */
.scope-rng {
  position: absolute;
  left: 50%;
  top: calc(50% - min(17vh, var(--lens) * .55));
  transform: translateX(-50%);
  line-height: 1.5;
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(10, 9, 6, .72);
  color: var(--sand);
  text-shadow: 0 1px 2px rgba(10, 9, 6, .9);
  white-space: pre-line;
  width: max-content;
  max-width: min(80vw, 300px);
}

/* The landscape tutorial occupies the upper-left glass. Keep the range
   inside the right half of the lens, clear of the action column. */
@media (orientation: landscape) and (max-height: 500px) {
  body.touch-ui .scope-rng {
    left: calc(50% + min(10vw, var(--lens) * .36));
  }
}

/* --- fine reticle -----------------------------------------------------------
 * Rides the CURSOR, not the screen centre, because the cursor is where the aim
 * point actually is on this camera. It nests inside .reticle (a zero-size
 * anchor the HUD already moves every frame), so it costs no extra positioning
 * work — and it deliberately surrounds the existing PID ring rather than
 * replacing it: the ring's colour and its dwell arc are the ROE language and
 * must stay legible through the optic.
 */
.ret-scope {
  position: absolute;
  left: -58px;
  top: -58px;
  width: 116px;
  height: 116px;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity .16s ease-out, transform .22s cubic-bezier(.2, .7, .3, 1);
  background:
    /* vertical hairline, broken around the centre so the PID ring reads */
    linear-gradient(to bottom,
      rgba(232, 224, 204, 0) 0 4%,
      rgba(232, 224, 204, .8) 4% 33%,
      rgba(232, 224, 204, 0) 33% 67%,
      rgba(232, 224, 204, .8) 67% 96%,
      rgba(232, 224, 204, 0) 96% 100%) 50% 0 / 1px 100% no-repeat,
    /* horizontal hairline */
    linear-gradient(to right,
      rgba(232, 224, 204, 0) 0 4%,
      rgba(232, 224, 204, .8) 4% 33%,
      rgba(232, 224, 204, 0) 33% 67%,
      rgba(232, 224, 204, .8) 67% 96%,
      rgba(232, 224, 204, 0) 96% 100%) 0 50% / 100% 1px no-repeat;
  filter: drop-shadow(0 0 1px rgba(10, 9, 6, .95));
}
#hud.scoped .ret-scope { opacity: 1; transform: scale(1); }

/* mil ticks along the horizontal hairline — the "this is glass" tell */
.ret-scope::before {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 7px;
  margin-top: -3px;
  background: repeating-linear-gradient(to right,
    rgba(232, 224, 204, .75) 0 1px, rgba(232, 224, 204, 0) 1px 14px);
  -webkit-mask-image: linear-gradient(to right, #000 0 30%, transparent 30% 70%, #000 70% 100%);
  mask-image: linear-gradient(to right, #000 0 30%, transparent 30% 70%, #000 70% 100%);
}

/* Reduced motion: the optic still comes up, it just doesn't travel to get here.
   (a11y.css owns the html[data-motion] switch; this only answers it.) */
html[data-motion="reduced"] .scope-edge,
html[data-motion="reduced"] .ret-scope {
  transition: opacity .16s ease-out;
  transform: none;
}

/* Phones: a 116px reticle is most of a thumb on a 390px-wide screen. */
body.touch-ui .ret-scope {
  left: -42px;
  top: -42px;
  width: 84px;
  height: 84px;
}
body.touch-ui .ret-scope::before {
  background: repeating-linear-gradient(to right,
    rgba(232, 224, 204, .75) 0 1px, rgba(232, 224, 204, 0) 1px 10px);
}