/* Browser-only UI elevation: accent-aware interaction states and session ambience. */

/* --------------------------------------------------------------------------
   Accent-aware card interaction
   -------------------------------------------------------------------------- */

.game-settings-subgroup .setting-box,
#eventsPanel .event-category .event-setting,
.yellow-premium-feature,
.visual-effects-setting {
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    background-color 170ms ease,
    box-shadow 170ms ease;
}

@media (hover: hover) {
  .game-settings-subgroup .setting-box:hover {
    border-color: rgba(var(--settings-rgb), 0.40) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 11px 28px rgba(0, 0, 0, 0.20),
      0 0 24px rgba(var(--settings-rgb), 0.055);
  }

  #eventsPanel .event-category .event-setting:hover {
    border-color: rgba(var(--category-rgb), 0.40) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 11px 28px rgba(0, 0, 0, 0.20),
      0 0 24px rgba(var(--category-rgb), 0.055);
  }

  .yellow-premium-feature:hover {
    border-color: rgba(251, 191, 36, 0.56) !important;
    box-shadow:
      inset 0 1px 0 rgba(254, 243, 199, 0.085),
      0 12px 30px rgba(0, 0, 0, 0.21),
      0 0 28px rgba(245, 158, 11, 0.065);
  }

  .visual-effects-setting:hover {
    border-color: rgba(167, 139, 250, 0.48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 11px 28px rgba(0, 0, 0, 0.20),
      0 0 28px rgba(124, 58, 237, 0.07);
  }
}

/* Enabled/engaged options retain a quieter version of their accent glow. */
#eventsPanel .event-category .event-setting:has(input[type="checkbox"]:checked) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 7px 20px rgba(0, 0, 0, 0.15),
    0 0 24px rgba(var(--category-rgb), 0.045);
}

/* --------------------------------------------------------------------------
   Accent-aware focus states
   -------------------------------------------------------------------------- */

.game-settings-subgroup input[type="text"]:focus,
.game-settings-subgroup input[type="number"]:focus,
.game-settings-subgroup select:focus,
.game-settings-subgroup textarea:focus {
  border-color: rgba(var(--settings-rgb), 0.72) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.24),
    0 0 0 3px rgba(var(--settings-rgb), 0.11) !important;
}

#eventsPanel .event-category input[type="text"]:focus,
#eventsPanel .event-category input[type="number"]:focus,
#eventsPanel .event-category select:focus,
#eventsPanel .event-category textarea:focus {
  border-color: rgba(var(--category-rgb), 0.72) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.24),
    0 0 0 3px rgba(var(--category-rgb), 0.11) !important;
}

.yellow-premium-feature input[type="text"]:focus,
.yellow-premium-feature input[type="number"]:focus,
.yellow-premium-feature select:focus,
.yellow-premium-feature textarea:focus {
  border-color: rgba(245, 158, 11, 0.72) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.24),
    0 0 0 3px rgba(245, 158, 11, 0.11) !important;
}

.visual-effects-setting input[type="text"]:focus,
.visual-effects-setting input[type="number"]:focus,
.visual-effects-setting select:focus,
.visual-effects-setting textarea:focus {
  border-color: rgba(167, 139, 250, 0.72) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.24),
    0 0 0 3px rgba(124, 58, 237, 0.11) !important;
}

/* --------------------------------------------------------------------------
   Active-session ambient light around the player
   -------------------------------------------------------------------------- */

.video-shell {
  transition:
    border-color 300ms ease,
    box-shadow 300ms ease,
    filter 380ms ease;
}

body.otl-session-active.otl-light-green .video-shell {
  filter:
    drop-shadow(0 0 15px rgba(34, 197, 94, 0.17))
    drop-shadow(0 0 36px rgba(34, 197, 94, 0.075));
}

body.otl-session-active.otl-light-red .video-shell {
  filter:
    drop-shadow(0 0 16px rgba(239, 68, 68, 0.18))
    drop-shadow(0 0 38px rgba(239, 68, 68, 0.08));
}

body.otl-session-active.otl-light-yellow .video-shell {
  filter:
    drop-shadow(0 0 15px rgba(245, 158, 11, 0.17))
    drop-shadow(0 0 36px rgba(245, 158, 11, 0.075));
}

@media (prefers-reduced-motion: reduce) {
  .game-settings-subgroup .setting-box,
  #eventsPanel .event-category .event-setting,
  .yellow-premium-feature,
  .visual-effects-setting,
  .video-shell {
    transition: none !important;
  }

  .game-settings-subgroup .setting-box:hover,
  #eventsPanel .event-category .event-setting:hover,
  .yellow-premium-feature:hover,
  .visual-effects-setting:hover {
    transform: none !important;
  }
}