#sniperScope {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle at center,
    transparent 0 min(33vmin, 42vw, 42vh),
    #030404 min(33.25vmin, 42.25vw, 42.25vh));
}

.scope-lens {
  position: relative;
  width: min(66vmin, 84vw, 84vh);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid #b4aa8e;
  border-radius: 50%;
  background: radial-gradient(circle at center, #69716912 0, #11150f20 74%, #03040420 100%);
  box-shadow: 0 0 18px #000;
}

.scope-lens::before,
.scope-lens::after {
  position: absolute;
  z-index: 1;
  content: "";
  opacity: 0.84;
}

.scope-lens::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, #a99f83 12%, #a99f83 47%, #1b1a15 48%, #1b1a15 52%, #a99f83 53%, #a99f83 88%, transparent);
}

.scope-lens::after {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a99f83 12%, #a99f83 47%, #1b1a15 48%, #1b1a15 52%, #a99f83 53%, #a99f83 88%, transparent);
}

.scope-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border: 1px solid #c8bd9f;
  border-radius: 50%;
  background: #17171355;
}

body.sniper-scoped #crosshair {
  display: none;
}