/* ===== magnifier.css — осмотр сцены с лупой ===== */
.mag-box { display: flex; flex-direction: column; gap: 12px; }
.mag-hintline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mag-counter {
  background: var(--dt-panel2);
  border: 1px solid var(--dt-line);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: .86rem;
  color: var(--dt-gold);
  font-weight: 700;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}

.mag-scene {
  position: relative;
  border-radius: var(--dt-radius);
  overflow: hidden;
  border: 1.5px solid var(--dt-line);
  aspect-ratio: 16 / 9;
  max-height: min(520px, 60dvh);
  touch-action: none;           /* pointer events — RESPONSIVE №5 */
  user-select: none;
  -webkit-user-select: none;
  cursor: none;                  /* лупа вместо курсора */
  background: #0d0b12;
}
.mag-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Лупа */
.mag-lens {
  position: absolute;
  top: 0;
  left: 0;
  width: 92px;
  height: 92px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 5;
}
.mag-lens.mag-active { opacity: 1; }
.mag-lens-glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 5px solid var(--dt-gold);
  background: radial-gradient(circle at 32% 30%, rgba(255, 240, 200, .30), rgba(232, 163, 61, .08) 55%, rgba(0, 0, 0, .22));
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5), inset 0 0 22px rgba(255, 235, 180, .14);
}
.mag-lens-handle {
  position: absolute;
  width: 44px;
  height: 11px;
  background: linear-gradient(90deg, #8a6a30, var(--dt-gold));
  border-radius: 8px;
  bottom: 4px;
  right: -30px;
  transform: rotate(-45deg);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}

/* Скрытые улики */
.mag-spot {
  position: absolute;
  width: 46px;
  height: 46px;
  min-width: 46px;
  transform: translate(-50%, -50%);
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 6;
  padding: 0;
  opacity: 0;
  pointer-events: none;          /* клик ловит сцена; кнопка — доступность */
}
.mag-spot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.5rem;
  background: rgba(243, 233, 210, .95);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(232, 163, 61, .35), 0 4px 16px rgba(0, 0, 0, .5);
}
.mag-spot.mag-near {
  opacity: 1;
  pointer-events: auto;
  animation: spotPulse 1s infinite;
}
.mag-spot.mag-found {
  opacity: 1;
  pointer-events: none;
  animation: spotFound .5s ease forwards;
}
.mag-spot.mag-found .mag-spot-icon {
  background: rgba(46, 139, 87, .95);
  box-shadow: 0 0 0 5px rgba(46, 139, 87, .4);
}

/* Лог улик */
.mag-log { display: flex; flex-direction: column; gap: 6px; }
.mag-log-item {
  background: var(--dt-panel);
  border: 1.5px solid var(--dt-line);
  border-left: 4px solid var(--dt-green);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: .88rem;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .3s ease, transform .3s ease;
}
.mag-log-item.mag-log-in { opacity: 1; transform: none; }

@keyframes spotPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.14); }
}
@keyframes spotFound {
  0% { transform: translate(-50%, -50%) scale(1); }
  60% { transform: translate(-50%, -50%) scale(1.35); }
  100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

/* Фолбэк: без hover/точного указателя (тач) лупа чуть больше */
@media (pointer: coarse) {
  .mag-scene { cursor: default; }
  .mag-lens { width: 108px; height: 108px; }
  .mag-lens-handle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mag-spot.mag-near { animation: none; }
  .mag-lens { transition: none; }
}