/* Make the dot over the i in "Light" a live mirror of the current game light. */

.hero-card .otl-custom-dot {
  transition:
    background-color 240ms ease,
    box-shadow 240ms ease;
}

/* Idle: cool pearl with the stronger level-3 glow from the design test. */
.hero-card .otl-custom-dot {
  background: #dfe3e8;
  box-shadow:
    0 0 6px rgba(223, 227, 232, 1),
    0 0 24px rgba(223, 227, 232, 0.95),
    0 0 44px rgba(223, 227, 232, 0.62),
    0 0 64px rgba(223, 227, 232, 0.28),
    -15px 0 28px rgba(141, 47, 60, 0.24),
    0 0 22px rgba(156, 118, 41, 0.20),
    15px 0 28px rgba(48, 92, 79, 0.24);
}

/* During a session, reuse the exact game signal colors. */
body.otl-session-active.otl-light-red .hero-card .otl-custom-dot {
  background: #ef4444;
  box-shadow:
    0 0 3px rgba(239, 68, 68, 0.95),
    0 0 12px rgba(239, 68, 68, 0.88),
    0 0 24px rgba(239, 68, 68, 0.62),
    0 0 42px rgba(239, 68, 68, 0.30);
}

body.otl-session-active.otl-light-yellow .hero-card .otl-custom-dot {
  background: #f59e0b;
  box-shadow:
    0 0 3px rgba(245, 158, 11, 0.95),
    0 0 12px rgba(245, 158, 11, 0.88),
    0 0 24px rgba(245, 158, 11, 0.62),
    0 0 42px rgba(245, 158, 11, 0.30);
}

body.otl-session-active.otl-light-green .hero-card .otl-custom-dot {
  background: #22c55e;
  box-shadow:
    0 0 3px rgba(34, 197, 94, 0.95),
    0 0 12px rgba(34, 197, 94, 0.88),
    0 0 24px rgba(34, 197, 94, 0.62),
    0 0 42px rgba(34, 197, 94, 0.30);
}

@media (prefers-reduced-motion: reduce) {
  .hero-card .otl-custom-dot {
    transition: none;
  }
}