/**
 * observe-mode.css
 * Styling for the Observe Mode toggle button and sprite outline glow effect.
 */

.observe-toggle-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 20, 30, 0.85);
  color: #fff;
  font-size: 24px;
  z-index: 10001;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.observe-toggle-btn:hover {
  transform: scale(1.1);
}

.observe-toggle-btn.active {
  background: #4488cc;
}

/* Sprite glow when in observe mode */
body.observe-mode .entity-wrapper[data-twin="true"] {
  filter: drop-shadow(0 0 8px rgba(80, 180, 255, 0.85));
}

/* Stronger glow for the currently viewing twin */
body.observe-mode .entity-wrapper[data-twin="true"][data-viewing="true"] {
  filter: drop-shadow(0 0 12px rgba(255, 220, 100, 0.95));
}

/* Phase 2A.4: brighter ring on the FOCUSED twin (multi-twin click handler picks one of N). */
body.observe-mode .twin-focused {
  filter: drop-shadow(0 0 6px rgba(255, 235, 100, 0.9)) drop-shadow(0 0 12px rgba(255, 200, 50, 0.5)) !important;
}