/* ==========================================================
   Obey The Light shared section system

   Quick Start, Settings, Events, and Trainers use the same
   structural hierarchy while retaining section-specific grids.
   ========================================================== */

:root {
  --otl-space-xs: 6px;
  --otl-space-sm: 10px;
  --otl-space-md: 14px;
  --otl-space-lg: 20px;
  --otl-space-xl: 28px;

  --otl-radius-card: 12px;
  --otl-radius-tier: 15px;

  --otl-free-rgb: 96, 165, 250;
  --otl-premium-rgb: 167, 139, 250;

  --otl-tier-heading-size: clamp(1.25rem, 1.45vw, 1.5rem);
}


/* ---------- Shared top-level section treatment ---------- */

.otl-standard-section {
  --otl-section-rgb: 96, 165, 250;

  overflow: hidden;
  border-color: rgba(var(--otl-section-rgb), .30) !important;
  background:
    linear-gradient(
      120deg,
      rgba(var(--otl-section-rgb), .045),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(17, 24, 39, .96),
      rgba(15, 23, 42, .90)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(239, 246, 255, .045),
    0 18px 55px rgba(0, 0, 0, .30),
    0 0 42px rgba(var(--otl-section-rgb), .025) !important;
}

/* Get Started keeps the stronger cyan identity while following
   the shared structural system. */
#otlGetStarted.otl-standard-section {
  --otl-section-rgb: 56, 189, 248;

  border-color:
    rgba(var(--otl-section-rgb), .50) !important;

  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(var(--otl-section-rgb), .10),
      transparent 34%
    ),
    linear-gradient(
      110deg,
      rgba(10, 24, 43, .97),
      rgba(15, 23, 42, .96) 58%,
      rgba(15, 23, 42, .97)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 0 0 1px rgba(var(--otl-section-rgb), .035),
    0 0 24px rgba(var(--otl-section-rgb), .075) !important;
}

#otlGetStarted.otl-standard-section[open] {
  border-color:
    rgba(var(--otl-section-rgb), .58) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 0 0 1px rgba(var(--otl-section-rgb), .045),
    0 0 28px rgba(var(--otl-section-rgb), .085) !important;
}

@media (hover: hover) {
  #otlGetStarted.otl-standard-section:hover {
    border-color:
      rgba(var(--otl-section-rgb), .66) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .045),
      0 0 0 1px rgba(var(--otl-section-rgb), .055),
      0 0 30px rgba(var(--otl-section-rgb), .11) !important;
  }
}

.otl-standard-section > .settings-summary {
  background: transparent !important;
  transition:
    background 180ms ease,
    box-shadow 180ms ease;
}

.otl-standard-section > .settings-summary:hover {
  background:
    linear-gradient(
      90deg,
      rgba(var(--otl-section-rgb), .085),
      rgba(var(--otl-section-rgb), .025) 52%,
      transparent
    ) !important;
}

.otl-standard-section[open] > .settings-summary {
  background:
    linear-gradient(
      90deg,
      rgba(var(--otl-section-rgb), .065),
      rgba(2, 6, 23, .10) 58%,
      transparent
    ) !important;
  box-shadow:
    inset 0 -1px 0 rgba(var(--otl-section-rgb), .09);
}

.otl-standard-section[open] > .settings-summary:hover {
  background:
    linear-gradient(
      90deg,
      rgba(var(--otl-section-rgb), .10),
      rgba(var(--otl-section-rgb), .025) 58%,
      transparent
    ) !important;
}

.otl-standard-section .settings-summary-action {
  border-color: rgba(var(--otl-section-rgb), .36) !important;
  color: #dbeafe !important;
  background: rgba(var(--otl-section-rgb), .13) !important;
}

.otl-standard-section .settings-summary-action:hover {
  border-color: rgba(var(--otl-section-rgb), .52) !important;
  background: rgba(var(--otl-section-rgb), .18) !important;
  box-shadow:
    0 0 18px rgba(var(--otl-section-rgb), .08) !important;
}


/* ---------- Shared tier hierarchy ---------- */

.otl-tier-stack {
  display: grid;
  gap: var(--otl-space-lg);
}

.otl-tier {
  display: grid;
  gap: var(--otl-space-sm);
  min-width: 0;
  margin: 0;
  padding: 0;
}

/*
  Neutral divider between Standard and Premium.
  The line separates tiers without visually belonging to either one.
*/
.otl-tier + .otl-tier {
  margin-top: 0;
  padding-top: var(--otl-space-lg);
  border-top:
    1px solid rgba(148, 163, 184, .20);
}

/* Normalize older section-specific tier dividers too. */
#otlQuickStart .quick-start-tier + .quick-start-tier,
#freeTrainerGrid + .trainer-tier-heading {
  border-top:
    1px solid rgba(148, 163, 184, .20) !important;
}

.otl-tier-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--otl-space-md) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.otl-tier-heading > strong,
.otl-tier-heading > div > strong {
  color: #f8fafc;
  font-size: var(--otl-tier-heading-size) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;
}


/* ---------- Shared tier boxes ---------- */

.otl-tier-box {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--otl-space-md);
  border: 1px solid rgba(100, 116, 139, .24);
  border-radius: var(--otl-radius-tier);
  background: rgba(15, 23, 42, .38);
}

.otl-tier--free > .otl-tier-box {
  border-color: rgba(var(--otl-free-rgb), .24);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(var(--otl-free-rgb), .055),
      transparent 42%
    ),
    rgba(15, 23, 42, .38);
}

.otl-tier--premium > .otl-tier-box {
  border-color: rgba(var(--otl-premium-rgb), .26);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(124, 58, 237, .075),
      transparent 44%
    ),
    rgba(15, 23, 42, .38);
}


/* Native grids retain their own column definitions. */
.otl-card-grid {
  min-width: 0;
  align-items: start;
}


/* ---------- Shared card anatomy ---------- */

.otl-component-card {
  box-sizing: border-box;
  min-width: 0;
  border-radius: var(--otl-radius-card) !important;
}


/* ---------- Canonical Premium pills ---------- */

.otl-tier-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  flex: 0 0 auto;

  width: fit-content;
  min-height: 0;
  margin: 0;

  padding: 4px 7px !important;
  border-radius: 999px !important;

  font-size: .61rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .07em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

.otl-tier-pill--premium {
  border:
    1px solid rgba(196, 181, 253, .38) !important;
  color: #ede9fe !important;
  background:
    rgba(109, 40, 217, .20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 14px rgba(124, 58, 237, .18),
    0 0 26px rgba(124, 58, 237, .08) !important;
}


.otl-card-tier-pill {
  margin-left: auto !important;
}


/*
  Event and Free Trainer badges used to be pseudo-elements.
  Real DOM pills are now injected by section-system.js so every
  Premium / Free badge uses the same component.
*/
#eventsPanel .premium-event-setting::after,
#freeTrainerGrid .trainer-name-row::after {
  content: none !important;
  display: none !important;
}

#eventsPanel
.premium-event-setting
> .inline-setting:first-child {
  box-sizing: border-box;
  width: 100%;
  padding-right: 0 !important;
}


/* ---------- Hint policy ---------- */

/*
  Section subtitle: keep.
  Control label: keep.
  Hint: hidden in Settings unless explicitly marked essential.
*/
.game-settings-card .hint:not(.otl-hint--essential),
.game-settings-card
.game-settings-subgroup-heading
small {
  display: none !important;
}

.game-settings-card .hint.otl-hint--essential {
  display: block !important;
  color: #94a3b8;
  font-size: .76rem;
  line-height: 1.45;
}


/* ---------- Responsive ---------- */

@media (max-width: 560px) {
  :root {
    --otl-tier-heading-size: 1.15rem;
  }

  .otl-tier-box {
    padding: var(--otl-space-sm);
  }

  .otl-tier + .otl-tier {
    padding-top: var(--otl-space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .otl-standard-section > .settings-summary {
    transition: none !important;
  }
}


/* ---------- Section header cleanup + Premium Settings flatten ---------- */

/* The top-level accordion headers are cleaner without the extra explainer line. */
details[data-section-header-icon] > summary small {
  display: none !important;
}

/* Let the icon + section title carry more weight. */
details[data-section-header-icon] > summary {
  box-sizing: border-box !important;
  height: 80px !important;
  min-height: 80px !important;
  padding: 0 20px !important;
}

details[data-section-header-icon] > summary .otl-section-icon {
  width: 28px !important;
  height: 28px !important;
}

details[data-section-header-icon] > summary strong,
details[data-section-header-icon] > summary .section-title {
  font-size: clamp(1.55rem, 2.1vw, 1.95rem) !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.018em !important;
}

/*
  Premium Settings already contains real inner cards
  (Yellow Light, Visual Effects, etc.), so the shared tier
  surface should be visually flattened there.
*/
.game-settings-card .otl-premium-settings-flat {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ---------- Larger responsive section headers ---------- */

details[data-section-header-icon]
> summary
.otl-section-title {
  gap: 12px !important;
}

details[data-section-header-icon]
> summary
.otl-section-title-text {
  display: inline-block;
  line-height: 1;
  transform: none;
}

@media (max-width: 560px) {
  details[data-section-header-icon] > summary {
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 16px !important;
  }

  details[data-section-header-icon]
  > summary
  .otl-section-icon {
    width: 24px !important;
    height: 24px !important;
  }

  details[data-section-header-icon] > summary strong,
  details[data-section-header-icon] > summary .section-title {
    font-size: 1.45rem !important;
  }
}

/* ---------- Canonical neutral section appearance ---------- */

/*
  Settings, Events, Trainers, and Saved Trainings are intentionally
  identical at the top level. Quick Start retains its cyan treatment
  and Premium retains its purple treatment.
*/
.game-settings-card.otl-standard-section,
#eventsPanel.otl-standard-section,
#trainerPanel.otl-standard-section,
#otlTrainings.otl-standard-section {
  --otl-section-rgb: 96, 165, 250;

  border-color:
    rgba(var(--otl-section-rgb), .30) !important;

  background:
    linear-gradient(
      120deg,
      rgba(var(--otl-section-rgb), .045),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(17, 24, 39, .96),
      rgba(15, 23, 42, .90)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(239, 246, 255, .045),
    0 18px 55px rgba(0, 0, 0, .30),
    0 0 42px rgba(var(--otl-section-rgb), .025) !important;
}

/* trainings.js historically makes this card a grid with its own gap. */
#otlTrainings.otl-standard-section {
  gap: 0 !important;
}

.game-settings-card.otl-standard-section > .settings-summary,
#eventsPanel.otl-standard-section > .settings-summary,
#trainerPanel.otl-standard-section > .settings-summary,
#otlTrainings.otl-standard-section > .settings-summary {
  background: transparent !important;
  box-shadow: none;
}

.game-settings-card.otl-standard-section
> .settings-summary:hover,
#eventsPanel.otl-standard-section
> .settings-summary:hover,
#trainerPanel.otl-standard-section
> .settings-summary:hover,
#otlTrainings.otl-standard-section
> .settings-summary:hover {
  background:
    linear-gradient(
      90deg,
      rgba(var(--otl-section-rgb), .085),
      rgba(var(--otl-section-rgb), .025) 52%,
      transparent
    ) !important;
}

.game-settings-card.otl-standard-section[open]
> .settings-summary,
#eventsPanel.otl-standard-section[open]
> .settings-summary,
#trainerPanel.otl-standard-section[open]
> .settings-summary,
#otlTrainings.otl-standard-section[open]
> .settings-summary {
  background:
    linear-gradient(
      90deg,
      rgba(var(--otl-section-rgb), .065),
      rgba(2, 6, 23, .10) 58%,
      transparent
    ) !important;

  box-shadow:
    inset 0 -1px 0 rgba(var(--otl-section-rgb), .09);
}

.game-settings-card.otl-standard-section
.settings-summary-action,
#eventsPanel.otl-standard-section
.settings-summary-action,
#trainerPanel.otl-standard-section
.settings-summary-action,
#otlTrainings.otl-standard-section
.settings-summary-action {
  border-color:
    rgba(var(--otl-section-rgb), .36) !important;

  color: #dbeafe !important;

  background:
    rgba(var(--otl-section-rgb), .13) !important;

  box-shadow: none !important;
}

.game-settings-card.otl-standard-section
.settings-summary-action:hover,
#eventsPanel.otl-standard-section
.settings-summary-action:hover,
#trainerPanel.otl-standard-section
.settings-summary-action:hover,
#otlTrainings.otl-standard-section
.settings-summary-action:hover {
  border-color:
    rgba(var(--otl-section-rgb), .52) !important;

  background:
    rgba(var(--otl-section-rgb), .18) !important;

  box-shadow:
    0 0 18px rgba(var(--otl-section-rgb), .08) !important;
}

/* ---------- First-paint neutral section identity ---------- */

/*
  These selectors exist in the server-rendered HTML, so the neutral
  section glow is present before section-system.js adds any classes.
  This prevents the glow from flashing off during reload.
*/
details.game-settings-card[data-section-header-icon="settings"],
details#eventsPanel[data-section-header-icon="events"],
details#trainerPanel[data-section-header-icon="trainers"],
details#otlQuickStart[data-section-header-icon="premade-trainings"],
details#otlTrainings[data-section-header-icon="saved-trainings"] {
  --otl-section-rgb: 96, 165, 250;

  overflow: hidden;

  border-color:
    rgba(var(--otl-section-rgb), .30) !important;

  background:
    linear-gradient(
      120deg,
      rgba(var(--otl-section-rgb), .045),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(17, 24, 39, .96),
      rgba(15, 23, 42, .90)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(239, 246, 255, .045),
    0 18px 55px rgba(0, 0, 0, .30),
    0 0 42px rgba(var(--otl-section-rgb), .025) !important;
}

details.game-settings-card[data-section-header-icon="settings"]
> .settings-summary,
details#eventsPanel[data-section-header-icon="events"]
> .settings-summary,
details#trainerPanel[data-section-header-icon="trainers"]
> .settings-summary,
details#otlQuickStart[data-section-header-icon="premade-trainings"]
> .settings-summary,
details#otlTrainings[data-section-header-icon="saved-trainings"]
> .settings-summary {
  background: transparent !important;
}

details.game-settings-card[data-section-header-icon="settings"]
> .settings-summary:hover,
details#eventsPanel[data-section-header-icon="events"]
> .settings-summary:hover,
details#trainerPanel[data-section-header-icon="trainers"]
> .settings-summary:hover,
details#otlQuickStart[data-section-header-icon="premade-trainings"]
> .settings-summary:hover,
details#otlTrainings[data-section-header-icon="saved-trainings"]
> .settings-summary:hover {
  background:
    linear-gradient(
      90deg,
      rgba(var(--otl-section-rgb), .085),
      rgba(var(--otl-section-rgb), .025) 52%,
      transparent
    ) !important;
}

details.game-settings-card[data-section-header-icon="settings"][open]
> .settings-summary,
details#eventsPanel[data-section-header-icon="events"][open]
> .settings-summary,
details#trainerPanel[data-section-header-icon="trainers"][open]
> .settings-summary,
details#otlQuickStart[data-section-header-icon="premade-trainings"][open]
> .settings-summary,
details#otlTrainings[data-section-header-icon="saved-trainings"][open]
> .settings-summary {
  background:
    linear-gradient(
      90deg,
      rgba(var(--otl-section-rgb), .065),
      rgba(2, 6, 23, .10) 58%,
      transparent
    ) !important;

  box-shadow:
    inset 0 -1px 0 rgba(var(--otl-section-rgb), .09);
}

details.game-settings-card[data-section-header-icon="settings"]
.settings-summary-action,
details#eventsPanel[data-section-header-icon="events"]
.settings-summary-action,
details#trainerPanel[data-section-header-icon="trainers"]
.settings-summary-action,
details#otlQuickStart[data-section-header-icon="premade-trainings"]
.settings-summary-action,
details#otlTrainings[data-section-header-icon="saved-trainings"]
.settings-summary-action {
  border-color:
    rgba(var(--otl-section-rgb), .36) !important;

  color: #dbeafe !important;

  background:
    rgba(var(--otl-section-rgb), .13) !important;
}

details.game-settings-card[data-section-header-icon="settings"]
.settings-summary-action:hover,
details#eventsPanel[data-section-header-icon="events"]
.settings-summary-action:hover,
details#trainerPanel[data-section-header-icon="trainers"]
.settings-summary-action:hover,
details#otlQuickStart[data-section-header-icon="premade-trainings"]
.settings-summary-action:hover,
details#otlTrainings[data-section-header-icon="saved-trainings"]
.settings-summary-action:hover {
  border-color:
    rgba(var(--otl-section-rgb), .52) !important;

  background:
    rgba(var(--otl-section-rgb), .18) !important;

  box-shadow:
    0 0 18px rgba(var(--otl-section-rgb), .08) !important;
}


/* ---------- Canonical top-level section dimensions ---------- */

/*
  All top-level accordion cards should have the exact same collapsed
  outer size, regardless of legacy internal layout differences.
*/
:root {
  --otl-top-section-height: 80px;
  --otl-top-section-radius: 22px;
  --otl-top-section-padding-x: 20px;
}

#otlGetStarted,
#otlQuickStart,
.game-settings-card,
#eventsPanel,
#trainerPanel,
#otlTrainings,
#otlPremium {
  box-sizing: border-box !important;
  min-height: var(--otl-top-section-height) !important;
  border-radius: var(--otl-top-section-radius) !important;
  overflow: hidden;
}

#otlGetStarted > summary,
#otlQuickStart > summary,
.game-settings-card > summary,
#eventsPanel > summary,
#trainerPanel > summary,
#otlTrainings > summary,
#otlPremium > summary {
  box-sizing: border-box !important;
  height: var(--otl-top-section-height) !important;
  min-height: var(--otl-top-section-height) !important;
  padding: 0 var(--otl-top-section-padding-x) !important;
  display: flex !important;
  align-items: center !important;

  /*
    Reserve the disclosure divider in both collapsed and open states.
    Previously the 1px bottom border appeared only after opening,
    shrinking the fixed-height summary content box and nudging its
    centered icon/title upward by half a pixel.
  */
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: transparent !important;
}

#otlGetStarted[open] > summary,
#otlQuickStart[open] > summary,
.game-settings-card[open] > summary,
#eventsPanel[open] > summary,
#trainerPanel[open] > summary,
#otlTrainings[open] > summary {
  border-bottom-color: rgba(96, 165, 250, .16) !important;
}

#otlGetStarted[open] > summary {
  border-bottom-color: rgba(56, 189, 248, .20) !important;
}

#otlPremium[open] > summary {
  border-bottom-color: rgba(167, 139, 250, .22) !important;
}

#otlGetStarted:not([open]),
#otlQuickStart:not([open]),
.game-settings-card:not([open]),
#eventsPanel:not([open]),
#trainerPanel:not([open]),
#otlTrainings:not([open]),
#otlPremium:not([open]) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#otlGetStarted > summary .otl-section-icon,
#otlQuickStart > summary .otl-section-icon,
.game-settings-card > summary .otl-section-icon,
#eventsPanel > summary .otl-section-icon,
#trainerPanel > summary .otl-section-icon,
#otlTrainings > summary .otl-section-icon,
#otlPremium > summary .otl-section-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px;
}

#otlGetStarted > summary strong,
#otlQuickStart > summary strong,
.game-settings-card > summary strong,
#eventsPanel > summary strong,
#trainerPanel > summary strong,
#otlTrainings > summary strong,
#otlPremium > summary strong,
#otlGetStarted > summary .section-title,
#otlQuickStart > summary .section-title,
.game-settings-card > summary .section-title,
#eventsPanel > summary .section-title,
#trainerPanel > summary .section-title,
#otlTrainings > summary .section-title,
#otlPremium > summary .section-title {
  line-height: 1.1 !important;
}

/* Saved Trainings should not introduce extra collapsed height */
#otlTrainings {
  display: block !important;
  gap: 0 !important;
}

/* ---------- Premium tier heading emphasis ---------- */

/*
  The regular experience is the default, so its tier heading stays
  semantically available without adding another visible label.
*/
.otl-tier--free {
  position: relative;
  gap: 0;
}

.otl-tier-heading--free {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

/*
  Premium remains an explicit boundary and gets a restrained
  lavender identity instead of the generic white tier-heading style.
*/
.otl-tier-heading--premium {
  width: 100%;
  justify-content: center !important;
  text-align: center !important;
}

.otl-tier-heading--premium > strong,
.otl-tier-heading--premium > div > strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  color: #c4b5fd !important;

  text-shadow:
    0 0 12px rgba(167, 139, 250, .22),
    0 0 24px rgba(124, 58, 237, .08) !important;
}

.otl-tier-heading--premium > strong::before,
.otl-tier-heading--premium > div > strong::before,
.otl-tier-heading--premium > strong::after,
.otl-tier-heading--premium > div > strong::after {
  content: "✦";

  color: #a78bfa;

  font-size: .72em;
  line-height: 1;

  text-shadow:
    0 0 10px rgba(167, 139, 250, .34),
    0 0 18px rgba(124, 58, 237, .14);
}


/* ---------- Premium Training + Event identities ---------- */

/*
  Purple identifies the Premium tier itself.
  Individual Premium Trainings and Events use their own accent identities
  so Premium content does not read as one homogeneous purple collection.
*/


/* ==========================================================
   Premium Trainings
   ========================================================== */

#otlQuickStart
.quick-start-preset[data-quick-start-premium="true"] {
  --otl-card-accent-rgb: 167, 139, 250;
  --otl-card-accent: #a78bfa;
  --otl-card-accent-strong: #7c3aed;
}


/* Sissy — playful / feminine violet */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="sissy"] {
  --otl-card-accent-rgb: 192, 132, 252;
  --otl-card-accent: #c084fc;
  --otl-card-accent-strong: #9333ea;
}


/* Cock Worship — focused / electric */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="cock-worship"] {
  --otl-card-accent-rgb: 96, 165, 250;
  --otl-card-accent: #60a5fa;
  --otl-card-accent-strong: #2563eb;
}


/* Pussy Worship — sensual / rose */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="pussy-worship"] {
  --otl-card-accent-rgb: 251, 113, 133;
  --otl-card-accent: #fb7185;
  --otl-card-accent-strong: #e11d48;
}


/* Femdom — commanding / crimson */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="femdom"] {
  --otl-card-accent-rgb: 239, 68, 68;
  --otl-card-accent: #ef4444;
  --otl-card-accent-strong: #991b1b;
}


/* Mommy — softer / nurturing */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="mommy"] {
  --otl-card-accent-rgb: 249, 168, 212;
  --otl-card-accent: #f9a8d4;
  --otl-card-accent-strong: #ec4899;
}


/* Daddy — controlled / authoritative indigo */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="daddy"] {
  --otl-card-accent-rgb: 99, 102, 241;
  --otl-card-accent: #6366f1;
  --otl-card-accent-strong: #4338ca;
}


/* Gooning — hypnotic / electric */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="gooning"] {
  --otl-card-accent-rgb: 34, 211, 238;
  --otl-card-accent: #22d3ee;
  --otl-card-accent-strong: #0891b2;
}


/* Edge Marathon — tension / endurance */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="edge-marathon"] {
  --otl-card-accent-rgb: 251, 191, 36;
  --otl-card-accent: #fbbf24;
  --otl-card-accent-strong: #d97706;
}


/* Hardcore — aggressive / high intensity */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="hardcore"] {
  --otl-card-accent-rgb: 249, 115, 22;
  --otl-card-accent: #f97316;
  --otl-card-accent-strong: #c2410c;
}


/* Extreme — warning / maximum intensity */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="extreme"] {
  --otl-card-accent-rgb: 250, 204, 21;
  --otl-card-accent: #facc15;
  --otl-card-accent-strong: #ea580c;
}


/* Unpredictable — unstable / variable green */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="unpredictable"] {
  --otl-card-accent-rgb: 52, 211, 153;
  --otl-card-accent: #34d399;
  --otl-card-accent-strong: #059669;
}


/* Dungeon — dark / restrictive */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="dungeon"] {
  --otl-card-accent-rgb: 190, 18, 60;
  --otl-card-accent: #be123c;
  --otl-card-accent-strong: #7f1d1d;
}


/*
  Keep the cards predominantly dark. The accent appears around the
  perimeter and upper corner rather than flooding the whole surface.
*/
#otlQuickStart
.quick-start-preset[data-quick-start-premium="true"]:not(.is-applied) {
  border-color:
    rgba(var(--otl-card-accent-rgb), .42) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(var(--otl-card-accent-rgb), .12),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(24, 31, 48, .96),
      rgba(15, 23, 42, .97)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 0 0 1px rgba(var(--otl-card-accent-rgb), .035),
    0 0 20px rgba(var(--otl-card-accent-rgb), .055) !important;
}


/* Training icon carries the clearest identity cue. */
#otlQuickStart
.quick-start-preset[data-quick-start-premium="true"]
.quick-start-training-icon {
  --quick-start-training-icon-color:
    var(--otl-card-accent) !important;

  filter:
    drop-shadow(
      0 0 6px rgba(var(--otl-card-accent-rgb), .36)
    ) !important;
}


/* Trait chips inherit a restrained version of the card identity. */
#otlQuickStart
.quick-start-preset[data-quick-start-premium="true"]
.quick-start-traits span {
  border-color:
    rgba(var(--otl-card-accent-rgb), .20) !important;

  background:
    rgba(var(--otl-card-accent-rgb), .055) !important;
}


/* The main action gets the strongest use of the identity color. */
#otlQuickStart
.quick-start-preset[data-quick-start-premium="true"]
.quick-start-primary {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      var(--otl-card-accent),
      var(--otl-card-accent-strong)
    ) !important;

  box-shadow:
    0 6px 18px rgba(var(--otl-card-accent-rgb), .12) !important;
}


#otlQuickStart
.quick-start-preset[data-quick-start-premium="true"].is-locked:not(.is-applied) {
  border-color:
    rgba(var(--otl-card-accent-rgb), .28) !important;
}


@media (hover: hover) {
  #otlQuickStart
  .quick-start-preset[data-quick-start-premium="true"]:not(.is-applied):hover {
    border-color:
      rgba(var(--otl-card-accent-rgb), .70) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .05),
      0 12px 30px rgba(0, 0, 0, .22),
      0 0 0 1px rgba(var(--otl-card-accent-rgb), .08),
      0 0 28px rgba(var(--otl-card-accent-rgb), .16) !important;
  }

  #otlQuickStart
  .quick-start-preset[data-quick-start-premium="true"]
  .quick-start-primary:hover {
    box-shadow:
      0 8px 22px rgba(var(--otl-card-accent-rgb), .22) !important;
  }
}


/* ==========================================================
   Premium Events
   ========================================================== */

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting {
  --otl-event-accent-rgb: 167, 139, 250;
  --otl-event-accent: #a78bfa;
}


/* Punching — impact */
#eventsPanel
.premium-event-setting:has(#punchingEnabledInput) {
  --otl-event-accent-rgb: 239, 68, 68;
  --otl-event-accent: #ef4444;
}


/* Breathplay — cold / airy */
#eventsPanel
.premium-event-setting:has(#breathplayEnabledInput) {
  --otl-event-accent-rgb: 125, 211, 252;
  --otl-event-accent: #7dd3fc;
}


/* Humiliation — conspicuous / psychological */
#eventsPanel
.premium-event-setting:has(#humiliationEnabledInput) {
  --otl-event-accent-rgb: 217, 70, 239;
  --otl-event-accent: #d946ef;
}


/* Fisting — forceful */
#eventsPanel
.premium-event-setting:has(#fistingEnabledInput) {
  --otl-event-accent-rgb: 249, 115, 22;
  --otl-event-accent: #f97316;
}


/* Inflatable — bright / synthetic */
#eventsPanel
.premium-event-setting:has(#inflatableEnabledInput) {
  --otl-event-accent-rgb: 34, 211, 238;
  --otl-event-accent: #22d3ee;
}


/* Sounding — clinical / teal */
#eventsPanel
.premium-event-setting:has(#soundingEnabledInput) {
  --otl-event-accent-rgb: 20, 184, 166;
  --otl-event-accent: #14b8a6;
}


/* Nippleplay — rose */
#eventsPanel
.premium-event-setting:has(#nippleplayEnabledInput) {
  --otl-event-accent-rgb: 251, 113, 133;
  --otl-event-accent: #fb7185;
}


/* Oral — cobalt */
#eventsPanel
.premium-event-setting:has(#oralEnabledInput) {
  --otl-event-accent-rgb: 96, 165, 250;
  --otl-event-accent: #60a5fa;
}


/* Anal — amber */
#eventsPanel
.premium-event-setting:has(#analEnabledInput) {
  --otl-event-accent-rgb: 245, 158, 11;
  --otl-event-accent: #f59e0b;
}


/*
  Events use a quieter identity treatment than Trainings:
  subtle edge, subtle surface tint, small title marker.
*/
#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting {
  border-color:
    rgba(var(--otl-event-accent-rgb), .34) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(var(--otl-event-accent-rgb), .075),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      rgba(24, 31, 48, .94),
      rgba(15, 23, 42, .96)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 0 18px rgba(var(--otl-event-accent-rgb), .035) !important;
}


/* Small identity marker beside each Premium Event name. */
#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting
> .inline-setting:first-child
> strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px;
}


#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting
> .inline-setting:first-child
> strong::before {
  content: "";

  flex: 0 0 auto;
  width: 7px;
  height: 7px;

  border-radius: 999px;

  background:
    var(--otl-event-accent);

  box-shadow:
    0 0 9px rgba(var(--otl-event-accent-rgb), .42);
}


/* Native checkbox color follows the Event identity. */
#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting
input[type="checkbox"] {
  accent-color:
    var(--otl-event-accent);
}


/* Advanced disclosure controls inherit the same identity subtly. */
#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting
.otl-event-disclosure {
  border-color:
    rgba(var(--otl-event-accent-rgb), .18) !important;
}


@media (hover: hover) {
  #eventsPanel
  .event-grid[aria-label="Premium Events"]
  > .premium-event-setting:hover {
    border-color:
      rgba(var(--otl-event-accent-rgb), .52) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .04),
      0 0 22px rgba(var(--otl-event-accent-rgb), .08) !important;
  }

  #eventsPanel
  .event-grid[aria-label="Premium Events"]
  > .premium-event-setting
  .otl-event-disclosure:not(:disabled):hover {
    border-color:
      rgba(var(--otl-event-accent-rgb), .44) !important;

    background:
      rgba(var(--otl-event-accent-rgb), .07) !important;
  }
}

/* ---------- Standard Training identities ---------- */

/*
  Standard Trainings use a simple intensity ladder:
  Relaxed = green, Balanced = amber, Intense = red.
  The cards stay mostly dark, with restrained accent tinting.
*/

.quick-start-preset[data-quick-start-preset="gentle"] {
  --otl-training-accent-rgb: 74, 222, 128;
}

.quick-start-preset[data-quick-start-preset="balanced"] {
  --otl-training-accent-rgb: 251, 191, 36;
}

.quick-start-preset[data-quick-start-preset="intense"] {
  --otl-training-accent-rgb: 248, 113, 113;
}

.quick-start-preset[data-quick-start-preset="gentle"],
.quick-start-preset[data-quick-start-preset="balanced"],
.quick-start-preset[data-quick-start-preset="intense"] {
  border-color: rgba(var(--otl-training-accent-rgb), 0.26) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(var(--otl-training-accent-rgb), 0.060),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(30, 41, 59, 0.76),
      rgba(15, 23, 42, 0.82)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 0 1px rgba(var(--otl-training-accent-rgb), 0.045),
    0 14px 34px rgba(0, 0, 0, 0.20),
    0 0 26px rgba(var(--otl-training-accent-rgb), 0.080) !important;
}

.quick-start-preset[data-quick-start-preset="gentle"] .quick-start-training-icon,
.quick-start-preset[data-quick-start-preset="balanced"] .quick-start-training-icon,
.quick-start-preset[data-quick-start-preset="intense"] .quick-start-training-icon {
  --quick-start-training-icon-color: rgb(var(--otl-training-accent-rgb)) !important;

  filter:
    drop-shadow(0 0 6px rgba(var(--otl-training-accent-rgb), 0.22));
}

.quick-start-preset[data-quick-start-preset="gentle"] .quick-start-traits span,
.quick-start-preset[data-quick-start-preset="balanced"] .quick-start-traits span,
.quick-start-preset[data-quick-start-preset="intense"] .quick-start-traits span {
  border-color: rgba(var(--otl-training-accent-rgb), 0.24) !important;
  background: rgba(var(--otl-training-accent-rgb), 0.10) !important;
  color: #f8fafc !important;
}

.quick-start-preset[data-quick-start-preset="gentle"] .quick-start-primary,
.quick-start-preset[data-quick-start-preset="balanced"] .quick-start-primary,
.quick-start-preset[data-quick-start-preset="intense"] .quick-start-primary {
  border-color: rgba(var(--otl-training-accent-rgb), 0.34) !important;
  background: rgba(var(--otl-training-accent-rgb), 0.15) !important;
  color: #f8fafc !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 18px rgba(var(--otl-training-accent-rgb), 0.12) !important;
}

.quick-start-preset[data-quick-start-preset="gentle"] .quick-start-primary:hover,
.quick-start-preset[data-quick-start-preset="balanced"] .quick-start-primary:hover,
.quick-start-preset[data-quick-start-preset="intense"] .quick-start-primary:hover {
  background: rgba(var(--otl-training-accent-rgb), 0.20) !important;
  border-color: rgba(var(--otl-training-accent-rgb), 0.42) !important;
}

/* ---------- End standard Training identities ---------- */

/* ---------- Settings control-panel hierarchy ---------- */

/*
  Settings are organized by function rather than by individual-card identity.

  Playback Rules     = cyan / blue
  Audio              = cyan / blue
  Session & Outcome  = cyan / blue
  Additional         = slate

  Premium remains the architectural boundary, while individual Premium
  settings can carry their own functional accent.
*/


/* ==========================================================
   Standard Settings: flatten the redundant outer tier box
   ========================================================== */

.game-settings-card
.otl-tier--free
> .otl-tier-box {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* More separation between functional groups, less separation
   between controls belonging to the same group. */
.game-settings-card
.settings-grid.otl-organized-settings {
  display: grid !important;
  gap: 20px !important;
}


/* ==========================================================
   Functional Settings groups
   ========================================================== */

.game-settings-card .game-settings-subgroup {
  --settings-rgb: 96, 165, 250;

  display: grid;
  gap: 13px;

  box-sizing: border-box;
  min-width: 0;
  padding: 16px;

  border:
    1px solid rgba(var(--settings-rgb), .25);
  border-radius: 15px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(var(--settings-rgb), .075),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(22, 30, 46, .76),
      rgba(15, 23, 42, .66)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .03),
    0 0 24px rgba(var(--settings-rgb), .035);
}


/* Playback Rules */
.game-settings-card
.game-settings-subgroup[data-settings-group="playback"] {
  --settings-rgb: 56, 189, 248;
}


/* Audio */
.game-settings-card
.game-settings-subgroup[data-settings-group="audio"] {
  --settings-rgb: 56, 189, 248;
}


/* Session & Outcome */
.game-settings-card
.game-settings-subgroup[data-settings-group="session"] {
  --settings-rgb: 56, 189, 248 !important;
}


/* Fallback for anything added later. */
.game-settings-card
.game-settings-subgroup[data-settings-group="other"] {
  --settings-rgb: 148, 163, 184;
}


/* ==========================================================
   Group headings
   ========================================================== */

.game-settings-card .game-settings-subgroup-heading {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;

  min-width: 0;
  margin: 0 !important;
  padding: 0 1px !important;
}


/*
  The existing signal element becomes the compact group icon.
  No new JS or image assets are required.
*/
.game-settings-card .game-settings-subgroup-signal {
  position: relative;

  display: grid !important;
  place-items: center;

  flex: 0 0 auto;
  width: 31px !important;
  height: 31px !important;

  border:
    1px solid rgba(var(--settings-rgb), .30) !important;
  border-radius: 9px !important;

  color:
    rgb(var(--settings-rgb)) !important;

  background:
    rgba(var(--settings-rgb), .085) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 0 14px rgba(var(--settings-rgb), .08) !important;
}


.game-settings-card
.game-settings-subgroup-signal::before {
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}


/* Playback / sequencing */
.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
.game-settings-subgroup-signal::before {
  content: "▶";
  transform: translateX(1px);
}


/* Audio */
.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
.game-settings-subgroup-signal::before {
  content: "♪";
  font-size: 17px;
}


/* Session duration / outcome */
.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.game-settings-subgroup-signal::before {
  content: "◷";
  font-size: 18px;
}


/* Additional Settings */
.game-settings-card
.game-settings-subgroup[data-settings-group="other"]
.game-settings-subgroup-signal::before {
  content: "•";
  font-size: 20px;
}


/* Heading copy gets a clear title/subtitle hierarchy. */
.game-settings-card .game-settings-subgroup-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0;
}


.game-settings-card
.game-settings-subgroup-copy
> strong {
  color: #f8fafc !important;

  font-size: 1rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
}



/* ==========================================================
   Quiet individual Settings cards
   ========================================================== */

.game-settings-card
.game-settings-subgroup
.game-settings-subgrid {
  gap: 10px !important;
}


.game-settings-card
.game-settings-subgroup
.game-settings-subgrid
> .setting-box,
.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
.otl-audio-left-stack
> .setting-box {
  border-color:
    rgba(100, 116, 139, .18) !important;

  background:
    rgba(2, 6, 23, .20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .018) !important;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}


/* Keep Session child cards visually quiet so the shared
   Settings-group treatment owns the section identity. */
.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.game-settings-subgrid
> .setting-box {
  border-color:
    rgba(100, 116, 139, .18) !important;
}


/* Keep Outcome Total as a useful status accent. */
.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.outcome-total {
  border-color:
    rgba(var(--settings-rgb), .28) !important;

  color: #bae6fd !important;

  background:
    rgba(var(--settings-rgb), .075) !important;
}


/* Controls subtly inherit the group identity. */
.game-settings-card
.game-settings-subgroup
input[type="checkbox"],
.game-settings-card
.game-settings-subgroup
input[type="radio"],
.game-settings-card
.game-settings-subgroup
input[type="range"] {
  accent-color:
    rgb(var(--settings-rgb));
}


@media (hover: hover) {
  .game-settings-card
  .game-settings-subgroup
  .game-settings-subgrid
  > .setting-box:hover,
  .game-settings-card
  .game-settings-subgroup[data-settings-group="audio"]
  .otl-audio-left-stack
  > .setting-box:hover {
    border-color:
      rgba(var(--settings-rgb), .27) !important;

    background:
      rgba(var(--settings-rgb), .035) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .025),
      0 0 16px rgba(var(--settings-rgb), .035) !important;
  }
}


/* ==========================================================
   Premium Settings identities
   ========================================================== */

/*
  Premium heading/container remain purple.
  Feature cards inside the section use functional identities.
*/
.game-settings-card
#otlGamePremiumGrid
> * {
  --premium-setting-rgb: 167, 139, 250;
  --premium-setting-accent: #a78bfa;

  border-color:
    rgba(var(--premium-setting-rgb), .30) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(var(--premium-setting-rgb), .075),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(23, 29, 46, .88),
      rgba(15, 23, 42, .92)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .03),
    0 0 20px rgba(var(--premium-setting-rgb), .045) !important;
}


/* Yellow Light — amber rather than generic Premium purple. */
.game-settings-card
#otlGamePremiumGrid
> .yellow-premium-feature,
.game-settings-card
#otlGamePremiumGrid
> *:has(#yellowEnabledInput) {
  --premium-setting-rgb: 250, 204, 21;
  --premium-setting-accent: #facc15;
}


/* Visual Effects — vivid violet/magenta. */
.game-settings-card
#otlGamePremiumGrid
> .visual-effects-setting,
.game-settings-card
#otlGamePremiumGrid
> *:has(#otlFxMaster),
.game-settings-card
#otlGamePremiumGrid
> *:has(#visualEffectsEnabledInput) {
  --premium-setting-rgb: 217, 70, 239;
  --premium-setting-accent: #d946ef;
}


/* Premium controls inherit their feature's color where appropriate. */
.game-settings-card
#otlGamePremiumGrid
> *
input[type="checkbox"],
.game-settings-card
#otlGamePremiumGrid
> *
input[type="radio"],
.game-settings-card
#otlGamePremiumGrid
> *
input[type="range"] {
  accent-color:
    var(--premium-setting-accent);
}


@media (hover: hover) {
  .game-settings-card
  #otlGamePremiumGrid
  > *:hover {
    border-color:
      rgba(var(--premium-setting-rgb), .46) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .035),
      0 0 24px rgba(var(--premium-setting-rgb), .075) !important;
  }
}


/* Visual Effects contains many nested controls. Keep those nested surfaces
   quieter so the main feature card remains the dominant boundary. */
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-effect {
  border-color:
    rgba(100, 116, 139, .20) !important;

  background:
    rgba(2, 6, 23, .22) !important;
}


.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-effect.enabled {
  border-color:
    rgba(var(--premium-setting-rgb), .34) !important;

  background:
    rgba(var(--premium-setting-rgb), .045) !important;
}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 560px) {
  .game-settings-card .game-settings-subgroup {
    padding: 13px;
  }

  .game-settings-card .game-settings-subgroup-signal {
    width: 29px !important;
    height: 29px !important;
  }
}

/* ---------- End Settings control-panel hierarchy ---------- */

/* ---------- Visual Effects personality ---------- */

/*
  Visual Effects is a major Premium feature, not merely another
  setting row. Give it an electric magenta / violet identity while
  keeping the overall Premium tier boundary purple.
*/

.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting {
  --otl-fx-personality-rgb: 217, 70, 239;
  --otl-fx-personality-secondary-rgb: 139, 92, 246;

  position: relative;
  overflow: hidden;

  gap: 15px !important;

  border-color:
    rgba(var(--otl-fx-personality-rgb), .36) !important;

  background:
    radial-gradient(
      circle at 5% 0%,
      rgba(var(--otl-fx-personality-rgb), .14),
      transparent 30%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(var(--otl-fx-personality-secondary-rgb), .09),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(27, 25, 48, .94),
      rgba(15, 23, 42, .94)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 0 0 1px rgba(var(--otl-fx-personality-rgb), .035),
    0 0 28px rgba(var(--otl-fx-personality-rgb), .075) !important;
}


/* ==========================================================
   Feature title
   ========================================================== */

.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;

  min-height: 32px;
}


/*
  Distinct from the diamonds used by the Premium tier heading:
  this is the Visual Effects feature symbol.
*/
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading::before {
  content: "✧";

  display: inline-grid;
  place-items: center;

  flex: 0 0 auto;

  width: 27px;
  height: 27px;

  color: #f0abfc;

  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;

  text-shadow:
    0 0 8px rgba(var(--otl-fx-personality-rgb), .65),
    0 0 18px rgba(var(--otl-fx-personality-rgb), .28);

  transform: translateY(-1px);
}


.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading
> strong {
  color: #f5d0fe !important;

  font-size:
    clamp(1.22rem, 1.45vw, 1.36rem) !important;

  font-weight: 875 !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em !important;

  text-shadow:
    0 0 14px rgba(var(--otl-fx-personality-rgb), .18),
    0 0 28px rgba(var(--otl-fx-personality-secondary-rgb), .08);
}


/* Feature description behaves like the Yellow Light subtitle. */
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
> p {
  max-width: 760px;

  margin-top: -5px !important;

  color: #a8a9c4 !important;

  font-size: .90rem !important;
  line-height: 1.5 !important;
}


/* ==========================================================
   Master control
   ========================================================== */

.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-lock-row {
  box-sizing: border-box;

  min-height: 48px;
  padding: 10px 12px;

  border:
    1px solid rgba(var(--otl-fx-personality-rgb), .28);
  border-radius: 11px;

  background:
    linear-gradient(
      110deg,
      rgba(var(--otl-fx-personality-rgb), .105),
      rgba(var(--otl-fx-personality-secondary-rgb), .045) 62%,
      rgba(2, 6, 23, .18)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 0 18px rgba(var(--otl-fx-personality-rgb), .045);
}


.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-master {
  color: #f5d0fe !important;

  font-size: .88rem !important;
  font-weight: 825 !important;
}


.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-master
input[type="checkbox"] {
  accent-color: #d946ef !important;
}


/* ==========================================================
   Light targeting
   ========================================================== */

.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-targets {
  border-color:
    rgba(var(--otl-fx-personality-rgb), .17) !important;

  background:
    rgba(2, 6, 23, .24) !important;
}


.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-targets
> strong {
  color: #e9d5ff !important;
}


/* ==========================================================
   Individual effects stay subordinate to the parent feature
   ========================================================== */

.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-list {
  gap: 8px !important;
}


.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-effect {
  border-color:
    rgba(100, 116, 139, .20) !important;

  background:
    rgba(2, 6, 23, .23) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .018) !important;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}


.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-effect.enabled {
  border-color:
    rgba(var(--otl-fx-personality-rgb), .38) !important;

  background:
    linear-gradient(
      110deg,
      rgba(var(--otl-fx-personality-rgb), .065),
      rgba(2, 6, 23, .24)
    ) !important;

  box-shadow:
    inset 3px 0 0 rgba(var(--otl-fx-personality-rgb), .62),
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 0 16px rgba(var(--otl-fx-personality-rgb), .04) !important;
}


.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-effect.enabled
.otl-fx-effect-head {
  color: #f5d0fe;
}


@media (hover: hover) {
  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .otl-fx-effect:not(.enabled):hover {
    border-color:
      rgba(var(--otl-fx-personality-rgb), .28) !important;

    background:
      rgba(var(--otl-fx-personality-rgb), .03) !important;
  }

  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .otl-fx-lock-row:hover {
    border-color:
      rgba(var(--otl-fx-personality-rgb), .40);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .04),
      0 0 20px rgba(var(--otl-fx-personality-rgb), .07);
  }
}


@media (max-width: 560px) {
  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .visual-effects-heading
  > strong {
    font-size: 1.2rem !important;
  }

  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .visual-effects-heading::before {
    width: 24px;
    height: 24px;
    font-size: 1.1rem;
  }
}

/* ---------- End Visual Effects personality ---------- */

/* ---------- Session & Outcome icon centering ---------- */
/*
  The signal box is already geometrically centered with CSS Grid.
  The clock glyph itself sits slightly low because of its font metrics,
  so apply only a small optical vertical correction.
*/
.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.game-settings-subgroup-signal::before {
  line-height: 1 !important;
  transform: translateY(-1.5px) !important;
}
/* ---------- End Session & Outcome icon centering ---------- */



/* ---------- Visual Effects cleanup override ---------- */

/*
  Visual Effects should feel distinct from the Premium tier itself.
  Use a distinct pink / rose identity, clean up the heading layout,
  and make the master enable control compact instead of full-width.
*/

.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting {
  --otl-fx-personality-rgb: 244, 114, 182;
  --otl-fx-personality-secondary-rgb: 251, 113, 133;

  border-color: rgba(var(--otl-fx-personality-rgb), 0.28) !important;

  background:
    radial-gradient(
      circle at 5% 0%,
      rgba(var(--otl-fx-personality-rgb), 0.10),
      transparent 30%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(var(--otl-fx-personality-secondary-rgb), 0.08),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(16, 24, 40, 0.95),
      rgba(15, 23, 42, 0.92)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 0 1px rgba(var(--otl-fx-personality-rgb), 0.05),
    0 16px 36px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(var(--otl-fx-personality-rgb), 0.08) !important;
}

/* Keep the heading clean and left-aligned */
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  text-align: left !important;
}

/* Slightly smaller / cleaner than the previous oversized version */
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading
> strong {
  color: #dbeafe !important;
  font-size: clamp(1.18rem, 1.35vw, 1.32rem) !important;
  font-weight: 875 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  text-shadow:
    0 0 12px rgba(var(--otl-fx-personality-rgb), 0.16),
    0 0 24px rgba(var(--otl-fx-personality-secondary-rgb), 0.08) !important;
}

/* Effects symbol */
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading::before {
  content: "✦";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: #7dd3fc;
  font-size: 1.05rem;
  line-height: 1;
  text-shadow:
    0 0 10px rgba(var(--otl-fx-personality-rgb), 0.30),
    0 0 20px rgba(var(--otl-fx-personality-secondary-rgb), 0.14);
}

/* Description stays subordinate */
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading
+ .hint,
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
> p,
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
> .setting-description {
  color: rgba(226, 232, 240, 0.74) !important;
}

/*
  Make the "Enable Visual Effects" row compact instead of stretching
  across the full width like a giant banner.
*/
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
> *:has(#otlFxMaster) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  align-self: flex-start !important;
  padding: 10px 14px !important;
  border-color: rgba(var(--otl-fx-personality-rgb), 0.28) !important;
  background:
    linear-gradient(
      145deg,
      rgba(var(--otl-fx-personality-rgb), 0.10),
      rgba(var(--otl-fx-personality-secondary-rgb), 0.08)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 18px rgba(var(--otl-fx-personality-rgb), 0.08) !important;
}

/* Make sure the master label itself doesn't force extra width */
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
#otlFxMaster {
  flex: 0 0 auto;
}

/* Keep individual effect rows full width and visually subordinate */
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.effect-toggle-row,
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effect-row,
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
> .inline-setting {
  border-color: rgba(148, 163, 184, 0.14) !important;
}

@media (max-width: 760px) {
  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .visual-effects-heading
  > strong {
    font-size: 1.12rem !important;
  }

  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .visual-effects-heading::before {
    width: 20px;
    height: 20px;
    font-size: 1rem;
  }
}

/* ---------- End Visual Effects cleanup override ---------- */

/* ---------- Premium feature header alignment ---------- */

/*
  Yellow Light and Visual Effects are sibling Premium features.
  Their feature titles should match each other and remain subordinate
  to the larger Premium Settings tier heading.
*/


/* ==========================================================
   Shared feature-title typography
   ========================================================== */

.game-settings-card
#otlGamePremiumGrid
.yellow-feature-title-row
> strong,

.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading
> strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;

  color: #f8fafc !important;

  font-size: 1.28rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: -.012em !important;

  text-shadow: none !important;
}


/* ==========================================================
   Yellow Light identity
   ========================================================== */

/* Small signal lamp instead of a decorative symbol. */
.game-settings-card
#otlGamePremiumGrid
#yellowLightTitle::before {
  content: "";

  display: block;

  flex: 0 0 auto;
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: #fbbf24;

  box-shadow:
    0 0 7px rgba(251, 191, 36, .72),
    0 0 15px rgba(245, 158, 11, .26);
}


/* ==========================================================
   Visual Effects header structure
   ========================================================== */

/*
  Recreate the Yellow Light title-left / enable-right structure
  using the existing Visual Effects DOM.
*/
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr) auto !important;

  column-gap: 18px !important;
  row-gap: 0 !important;

  align-items: start !important;
}


/* Title */
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading {
  grid-column: 1 !important;
  grid-row: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: auto !important;
  min-height: 0 !important;
  align-self: center !important;

  margin: 0 !important;
  padding: 0 !important;
}


/*
  Remove every earlier pseudo-icon from the heading itself.
  The new icon belongs directly beside the title.
*/
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading::before {
  content: none !important;
  display: none !important;
}


/* Description directly below the title. */
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
> p {
  grid-column: 1 !important;
  grid-row: 2 !important;

  max-width: 760px;

  margin: 0 !important;

  color: #94a3b8 !important;

  font-size: .88rem !important;
  line-height: 1.5 !important;
}


/* ==========================================================
   Visual Effects eye / lens icon
   ========================================================== */

/*
  CSS-drawn eye/lens:
  no emoji, no external asset, and visually unrelated to the
  diamond/star language used for Premium.
*/
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading
> strong::before {
  content: "";

  display: inline-block;

  flex: 0 0 auto;

  width: 13px;
  height: 13px;

  border: 1.4px solid #f9a8d4;
  border-radius: 70% 0 70% 0;

  background:
    radial-gradient(
      circle at center,
      #fdf2f8 0 1.4px,
      #f472b6 1.8px 3px,
      transparent 3.4px
    );

  box-shadow:
    0 0 6px rgba(244, 114, 182, .20);

  transform: rotate(45deg);
}


/* ==========================================================
   Compact master enable control on the right
   ========================================================== */

.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-lock-row {
  grid-column: 2 !important;
  grid-row: 1 !important;

  align-self: center !important;
  justify-self: end !important;

  display: inline-flex !important;
  align-items: center !important;

  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 9px 12px !important;

  border:
    1px solid rgba(244, 114, 182, .34) !important;
  border-radius: 999px !important;

  background:
    rgba(157, 23, 77, .14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 0 14px rgba(244, 114, 182, .06) !important;
}


.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-master {
  white-space: nowrap;

  color: #fce7f3 !important;

  font-size: .84rem !important;
  font-weight: 800 !important;
}


/* Main Visual Effects controls resume full width below the header. */
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-content {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;

  margin-top: 8px !important;
}


/* ==========================================================
   Keep Yellow Light title and control at comparable scale
   ========================================================== */

.game-settings-card
#otlGamePremiumGrid
.yellow-enable-label {
  padding: 8px 11px !important;

  font-size: .84rem !important;
  font-weight: 800 !important;
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 680px) {
  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting {
    grid-template-columns: 1fr !important;
    row-gap: 6px !important;
  }

  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .visual-effects-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  > p {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .otl-fx-lock-row {
    grid-column: 1 !important;
    grid-row: 2 !important;

    justify-self: start !important;

    margin-top: 5px !important;
  }

  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .otl-fx-content {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .game-settings-card
  #otlGamePremiumGrid
  .yellow-feature-title-row
  > strong,

  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .visual-effects-heading
  > strong {
    font-size: 1.12rem !important;
  }
}

/* ---------- End Premium feature header alignment ---------- */

/* ---------- Event title icon system ---------- */

/*
  Every Event has its own icon.
  Premium Events no longer use the generic colored title dot.
*/

#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting
> .inline-setting:first-child
> strong,

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting
> .inline-setting:first-child
> strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}


#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting
> .inline-setting:first-child
> strong::before,

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting
> .inline-setting:first-child
> strong::before {
  content: "" !important;

  display: inline-block !important;

  flex: 0 0 auto;
  width: 15px !important;
  height: 15px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    var(--otl-event-icon-color, #cbd5e1) !important;

  box-shadow:
    none !important;

  -webkit-mask:
    var(--otl-event-icon) center / contain no-repeat;

  mask:
    var(--otl-event-icon) center / contain no-repeat;
}


/* Standard Events */

#eventsPanel .event-setting:has(#edgingEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/edging.svg?v=2");
}

#eventsPanel .event-setting:has(#tastingEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/tasting.png?v=8");
}

#eventsPanel .event-setting:has(#flickingEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/flicking.png?v=1");
}

#eventsPanel .event-setting:has(#slappingEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/slapping.png?v=6");
}

#eventsPanel .event-setting:has(#spankingEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/spanking.png?v=8");
}

#eventsPanel .event-setting:has(#milkingEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/milking.png?v=6");
}


/* Premium Events */

#eventsPanel .premium-event-setting:has(#punchingEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/punching.png?v=4");
  --otl-event-icon-color: #ef4444;
}

#eventsPanel .premium-event-setting:has(#breathplayEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/breathplay.png?v=6");
  --otl-event-icon-color: #7dd3fc;
}

#eventsPanel .premium-event-setting:has(#humiliationEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/humiliation.svg?v=2");
  --otl-event-icon-color: #d946ef;
}

#eventsPanel .premium-event-setting:has(#fistingEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/fisting.png?v=6");
  --otl-event-icon-color: #f97316;
}

#eventsPanel .premium-event-setting:has(#inflatableEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/inflatable.png?v=4");
  --otl-event-icon-color: #22d3ee;
}

#eventsPanel .premium-event-setting:has(#soundingEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/sounding.png?v=4");
  --otl-event-icon-color: #14b8a6;
}

#eventsPanel .premium-event-setting:has(#nippleplayEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/nippleplay.png?v=7");
  --otl-event-icon-color: #fb7185;
}

#eventsPanel .premium-event-setting:has(#oralEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/oral.png?v=8");
  --otl-event-icon-color: #60a5fa;
}

#eventsPanel .premium-event-setting:has(#analEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/anal.png?v=6");
  --otl-event-icon-color: #f59e0b;
}


/* Standard Event icons should stay neutral grey.
   Premium Events keep their individual accent identities. */
#eventsPanel .event-grid[aria-label="Free Events"] .event-setting {
  --otl-event-icon-color: #94a3b8 !important;
}

/* Advanced Premium Events */

#eventsPanel .premium-event-setting:has(#chastityEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/chastity.png?v=3");
}

#eventsPanel .premium-event-setting:has(#vibratorEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/vibrator.png?v=1");
}

#eventsPanel .premium-event-setting:has(#mouthGagEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/mouth-gag.png?v=1");
}

#eventsPanel .premium-event-setting:has(#buttPlugEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/butt-plug.png?v=1");
}

#eventsPanel .premium-event-setting:has(#fleshlightEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/fleshlight.png?v=1");
}

#eventsPanel .premium-event-setting:has(#nippleClampsEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/nipple-clamps.png?v=1");
}

#eventsPanel .premium-event-setting:has(#bondageEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/bondage.png?v=3");
}

#eventsPanel .premium-event-setting:has(#feminizationEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/feminization.png?v=1");
}


#eventsPanel .premium-event-setting:has(#penisPumpEnabledInput) {
  --otl-event-icon:
    url("/assets/icons/events/penis-pump.png?v=1");
}



/*
  These three source icons are relatively tall/narrow,
  so enlarge the artwork inside the existing 15px icon slot.
*/
#eventsPanel
.premium-event-setting:has(#bondageEnabledInput)
> .inline-setting:first-child
> strong::before,

#eventsPanel
.premium-event-setting:has(#vibratorEnabledInput)
> .inline-setting:first-child
> strong::before,

#eventsPanel
.premium-event-setting:has(#feminizationEnabledInput)
> .inline-setting:first-child
> strong::before {
  -webkit-mask-size: 125% !important;
  mask-size: 125% !important;
}

/* ---------- End Event title icon system ---------- */

/* ---------- Event color hierarchy refresh ---------- */
/*
  Standard Events now use muted individual accents.
  Premium Events keep stronger, more vibrant identities.
  Both tiers remain mostly dark so the UI still feels clean.
*/

/* -------------------- Standard Events (muted) -------------------- */
#eventsPanel .event-grid[aria-label="Free Events"] .event-setting {
  --otl-event-accent-rgb: 148, 163, 184;
  --otl-event-icon-color: rgb(var(--otl-event-accent-rgb)) !important;

  border-color: rgba(var(--otl-event-accent-rgb), 0.20) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(var(--otl-event-accent-rgb), 0.050),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(30, 41, 59, 0.74),
      rgba(15, 23, 42, 0.82)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 0 1px rgba(var(--otl-event-accent-rgb), 0.035),
    0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

#eventsPanel .event-grid[aria-label="Free Events"] .event-setting:has(#flickingEnabledInput) {
  --otl-event-accent-rgb: 103, 171, 173; /* muted teal */
}

#eventsPanel .event-grid[aria-label="Free Events"] .event-setting:has(#slappingEnabledInput) {
  --otl-event-accent-rgb: 184, 128, 150; /* muted rose */
}

#eventsPanel .event-grid[aria-label="Free Events"] .event-setting:has(#spankingEnabledInput) {
  --otl-event-accent-rgb: 188, 116, 110; /* muted coral-red */
}

#eventsPanel .event-grid[aria-label="Free Events"] .event-setting:has(#edgingEnabledInput) {
  --otl-event-accent-rgb: 112, 176, 124; /* muted green */
}

#eventsPanel .event-grid[aria-label="Free Events"] .event-setting:has(#tastingEnabledInput) {
  --otl-event-accent-rgb: 194, 162, 92; /* muted amber */
}

#eventsPanel .event-grid[aria-label="Free Events"] .event-setting:has(#milkingEnabledInput) {
  --otl-event-accent-rgb: 116, 150, 188; /* muted cool blue */
}

/* -------------------- Premium Events (more vibrant) -------------------- */
#eventsPanel .event-grid[aria-label="Premium Events"] .premium-event-setting {
  --otl-event-accent-rgb: 167, 139, 250;
  --otl-event-icon-color: rgb(var(--otl-event-accent-rgb)) !important;

  border-color: rgba(var(--otl-event-accent-rgb), 0.34) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(var(--otl-event-accent-rgb), 0.110),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(27, 32, 52, 0.92),
      rgba(15, 23, 42, 0.90)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 1px rgba(var(--otl-event-accent-rgb), 0.070),
    0 14px 34px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(var(--otl-event-accent-rgb), 0.11) !important;
}

/* Premium identities */
#eventsPanel .event-grid[aria-label="Premium Events"] .premium-event-setting:has(#punchingEnabledInput) {
  --otl-event-accent-rgb: 248, 113, 113; /* vivid red */
}

#eventsPanel .event-grid[aria-label="Premium Events"] .premium-event-setting:has(#breathplayEnabledInput) {
  --otl-event-accent-rgb: 96, 165, 250; /* vivid blue */
}

#eventsPanel .event-grid[aria-label="Premium Events"] .premium-event-setting:has(#humiliationEnabledInput) {
  --otl-event-accent-rgb: 217, 70, 239; /* vivid magenta */
}

#eventsPanel .event-grid[aria-label="Premium Events"] .premium-event-setting:has(#nippleplayEnabledInput) {
  --otl-event-accent-rgb: 244, 114, 182; /* vivid pink */
}

#eventsPanel .event-grid[aria-label="Premium Events"] .premium-event-setting:has(#oralEnabledInput) {
  --otl-event-accent-rgb: 56, 189, 248; /* bright cyan-blue */
}

#eventsPanel .event-grid[aria-label="Premium Events"] .premium-event-setting:has(#analEnabledInput) {
  --otl-event-accent-rgb: 251, 191, 36; /* bright amber */
}

#eventsPanel .event-grid[aria-label="Premium Events"] .premium-event-setting:has(#fistingEnabledInput) {
  --otl-event-accent-rgb: 249, 115, 22; /* vivid orange */
}

#eventsPanel .event-grid[aria-label="Premium Events"] .premium-event-setting:has(#inflatableEnabledInput) {
  --otl-event-accent-rgb: 34, 211, 238; /* electric cyan */
}

#eventsPanel .event-grid[aria-label="Premium Events"] .premium-event-setting:has(#soundingEnabledInput) {
  --otl-event-accent-rgb: 45, 212, 191; /* vivid aqua */
}
/* ---------- End Event color hierarchy refresh ---------- */

/* ---------- Event card anatomy polish ---------- */

/*
  Event cards use the same underlying controls as before.
  This layer changes visual hierarchy only.

  IMPORTANT:
  Tier identity belongs to the section heading.
  Individual cards do not display "Premium Event" / "Standard Event".
*/


/* ==========================================================
   Base card surface
   ========================================================== */

#eventsPanel
.event-grid
> .event-setting {
  position: relative;

  box-sizing: border-box;
  overflow: hidden;

  padding: 14px !important;

  border-radius: 14px !important;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}


/* Standard — muted color identity, mostly neutral body. */

#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting {
  border-color:
    rgba(var(--otl-event-accent-rgb), .22) !important;

  background:
    radial-gradient(
      circle at 18px 18px,
      rgba(var(--otl-event-accent-rgb), .050),
      transparent 112px
    ),
    linear-gradient(
      145deg,
      rgba(20, 28, 43, .92),
      rgba(12, 18, 31, .94)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 10px 26px rgba(0, 0, 0, .18) !important;
}


/* Premium — same architecture, stronger color presence. */

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting {
  border-color:
    rgba(var(--otl-event-accent-rgb), .38) !important;

  background:
    radial-gradient(
      circle at 18px 18px,
      rgba(var(--otl-event-accent-rgb), .095),
      transparent 125px
    ),
    linear-gradient(
      145deg,
      rgba(22, 27, 44, .96),
      rgba(11, 17, 31, .96)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 12px 30px rgba(0, 0, 0, .22),
    0 0 20px rgba(var(--otl-event-accent-rgb), .055) !important;
}


/* ==========================================================
   Event header
   ========================================================== */

#eventsPanel
.event-setting
> .inline-setting:first-child {
  display: flex !important;
  align-items: center !important;

  width: 100%;
  min-height: 40px;

  margin: 0 !important;

  gap: 12px !important;
}


/*
  Put the Event identity on the left and its master enable
  checkbox on the far right.
*/

#eventsPanel
.event-setting
> .inline-setting:first-child
> strong {
  position: relative;

  display: inline-flex !important;
  align-items: center !important;

  order: 1;

  min-width: 0;
  min-height: 38px;

  padding-left: 48px;

  color: #f8fafc !important;

  font-size: 1rem !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -.012em !important;
}


/*
  Event master enable control.
  Keep the existing checkbox semantics/behavior, but present it as
  a compact textless toggle pill instead of a square checkbox.
*/
#eventsPanel
.event-setting
> .inline-setting:first-child
> input[type="checkbox"] {
  order: 2;

  flex: 0 0 auto;

  -webkit-appearance: none !important;
  appearance: none !important;

  box-sizing: border-box;

  width: 38px !important;
  height: 22px !important;

  margin:
    0 0 0 auto !important;

  border:
    1px solid rgba(148, 163, 184, .38) !important;

  border-radius:
    999px !important;

  background:
    radial-gradient(
      circle at 8px 50%,
      #94a3b8 0 5px,
      transparent 5.5px
    ),
    rgba(15, 23, 42, .72) !important;

  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .025) !important;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}


#eventsPanel
.event-setting
> .inline-setting:first-child
> input[type="checkbox"]:checked {
  border-color:
    rgba(var(--otl-event-accent-rgb), .62) !important;

  background:
    radial-gradient(
      circle at calc(100% - 8px) 50%,
      #f8fafc 0 5px,
      transparent 5.5px
    ),
    linear-gradient(
      90deg,
      rgba(var(--otl-event-accent-rgb), .34),
      rgba(var(--otl-event-accent-rgb), .22)
    ) !important;

  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .18),
    0 0 10px rgba(var(--otl-event-accent-rgb), .14) !important;
}


@media (hover: hover) {
  #eventsPanel
  .event-setting
  > .inline-setting:first-child
  > input[type="checkbox"]:not(:disabled):hover {
    border-color:
      rgba(var(--otl-event-accent-rgb), .62) !important;
  }
}


#eventsPanel
.event-setting
> .inline-setting:first-child
> input[type="checkbox"]:focus-visible {
  outline:
    2px solid rgba(var(--otl-event-accent-rgb), .68);

  outline-offset:
    3px;
}


#eventsPanel
.event-setting
> .inline-setting:first-child
> input[type="checkbox"]:disabled {
  opacity: .48;
  cursor: not-allowed;
}


/* ==========================================================
   Icon tile
   ========================================================== */

/*
  The old ::before element drew the icon itself.
  It now becomes the colored tile behind the icon.
*/

#eventsPanel
.event-setting
> .inline-setting:first-child
> strong::before {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  top: 50% !important;

  display: block !important;

  width: 38px !important;
  height: 38px !important;

  border:
    1px solid rgba(var(--otl-event-accent-rgb), .26) !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      145deg,
      rgba(var(--otl-event-accent-rgb), .14),
      rgba(var(--otl-event-accent-rgb), .050)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 0 14px rgba(var(--otl-event-accent-rgb), .045) !important;

  -webkit-mask: none !important;
  mask: none !important;

  transform:
    translateY(-50%) !important;
}


/* The actual Event artwork sits inside the tile. */

#eventsPanel
.event-setting
> .inline-setting:first-child
> strong::after {
  content: "";

  position: absolute;

  left: 9px;
  top: 50%;

  display: block;

  width: 20px;
  height: 20px;

  background:
    var(--otl-event-icon-color) !important;

  -webkit-mask:
    var(--otl-event-icon)
    center / contain
    no-repeat;

  mask:
    var(--otl-event-icon)
    center / contain
    no-repeat;

  transform:
    translateY(-50%);
}


/* Premium icon tiles get a little more presence. */

#eventsPanel
.event-grid[aria-label="Premium Events"]
.premium-event-setting
> .inline-setting:first-child
> strong::before {
  border-color:
    rgba(var(--otl-event-accent-rgb), .40) !important;

  background:
    linear-gradient(
      145deg,
      rgba(var(--otl-event-accent-rgb), .20),
      rgba(var(--otl-event-accent-rgb), .065)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 0 18px rgba(var(--otl-event-accent-rgb), .085) !important;
}


/* ==========================================================
   Enabled state
   ========================================================== */

/*
  Enabled Events gain a slim color rail and stronger border.
  The card does not need an extra badge or label to communicate state.
*/

#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting:has(
  > .inline-setting:first-child
  > input[type="checkbox"]:checked
) {
  border-color:
    rgba(var(--otl-event-accent-rgb), .44) !important;

  box-shadow:
    inset 3px 0 0 rgba(var(--otl-event-accent-rgb), .58),
    inset 0 1px 0 rgba(255, 255, 255, .03),
    0 12px 28px rgba(0, 0, 0, .20),
    0 0 18px rgba(var(--otl-event-accent-rgb), .060) !important;
}


#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(
  > .inline-setting:first-child
  > input[type="checkbox"]:checked
) {
  border-color:
    rgba(var(--otl-event-accent-rgb), .62) !important;

  box-shadow:
    inset 3px 0 0 rgba(var(--otl-event-accent-rgb), .82),
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 14px 32px rgba(0, 0, 0, .23),
    0 0 24px rgba(var(--otl-event-accent-rgb), .13) !important;
}


/* ==========================================================
   Configuration body
   ========================================================== */

/*
  Identity lives above the divider.
  Light/chance configuration lives below it.
*/

#eventsPanel
.event-setting
> .event-options:not(:empty) {
  margin-top: 12px !important;
  padding-top: 12px !important;

  border-top:
    1px solid rgba(148, 163, 184, .12);
}


/*
  Light targeting becomes a quiet embedded control surface rather
  than competing visually with the Event card itself.
*/

#eventsPanel
.event-setting
.otl-event-light-targets {
  padding: 10px !important;

  border-color:
    rgba(148, 163, 184, .14) !important;

  border-radius:
    9px !important;

  background:
    rgba(2, 6, 23, .20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .018) !important;
}


#eventsPanel
.event-setting
.otl-event-light-heading
strong {
  color: #d6deea !important;

  font-size: .74rem !important;
  font-weight: 800 !important;
}


#eventsPanel
.event-setting
.otl-event-light-heading
small {
  color: #64748b !important;
}


/* ==========================================================
   Advanced-options footer
   ========================================================== */

#eventsPanel
.event-setting
.otl-event-disclosure {
  min-height: 44px !important;

  margin-top: 10px !important;
  padding: 8px 10px !important;

  border-color:
    rgba(var(--otl-event-accent-rgb), .20) !important;

  border-radius:
    9px !important;

  color:
    #cbd5e1 !important;

  background:
    linear-gradient(
      110deg,
      rgba(var(--otl-event-accent-rgb), .045),
      rgba(2, 6, 23, .24)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .02) !important;
}


@media (hover: hover) {

  #eventsPanel
  .event-grid
  > .event-setting:hover {
    transform:
      translateY(-1px);
  }


  #eventsPanel
  .event-setting
  .otl-event-disclosure:not(:disabled):hover {
    border-color:
      rgba(var(--otl-event-accent-rgb), .42) !important;

    background:
      linear-gradient(
        110deg,
        rgba(var(--otl-event-accent-rgb), .085),
        rgba(2, 6, 23, .25)
      ) !important;
  }
}


/* ==========================================================
   Do not show tier labels on individual Premium Event cards
   ========================================================== */

#eventsPanel
.event-grid[aria-label="Premium Events"]
.premium-event-setting
.otl-card-tier-pill {
  display: none !important;
}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 560px) {

  #eventsPanel
  .event-grid
  > .event-setting {
    padding: 12px !important;
  }


  #eventsPanel
  .event-setting
  > .inline-setting:first-child
  > strong {
    min-height: 34px;

    padding-left: 43px;

    font-size: .96rem !important;
  }


  #eventsPanel
  .event-setting
  > .inline-setting:first-child
  > strong::before {
    width: 34px !important;
    height: 34px !important;

    border-radius:
      10px !important;
  }


  #eventsPanel
  .event-setting
  > .inline-setting:first-child
  > strong::after {
    left: 8px;

    width: 18px;
    height: 18px;
  }
}


/* ---------- End Event card anatomy polish ---------- */

/* ---------- Event header specificity correction ---------- */

/*
  The original Event icon system uses highly-specific selectors
  with !important. Match that specificity here so the new icon
  tile fully replaces the old inline 15px icon treatment.
*/


/* ==========================================================
   Event names
   ========================================================== */

#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting
> .inline-setting:first-child
> strong,

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting
> .inline-setting:first-child
> strong {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;

  min-height: 50px !important;

  padding-left: 62px !important;

  gap: 0 !important;

  color: #f8fafc !important;

  font-size: 1.28rem !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  letter-spacing: -.015em !important;
}


/* ==========================================================
   Icon tile
   ========================================================== */

#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting
> .inline-setting:first-child
> strong::before,

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting
> .inline-setting:first-child
> strong::before {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  top: 50% !important;

  display: block !important;

  flex: none !important;

  width: 50px !important;
  height: 50px !important;

  border:
    1px solid rgba(
      var(--otl-event-accent-rgb),
      .30
    ) !important;

  border-radius: 11px !important;

  background:
    linear-gradient(
      145deg,
      rgba(var(--otl-event-accent-rgb), .16),
      rgba(var(--otl-event-accent-rgb), .055)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 14px rgba(
      var(--otl-event-accent-rgb),
      .055
    ) !important;

  -webkit-mask: none !important;
  mask: none !important;

  transform: translateY(-50%) !important;
}


/* ==========================================================
   Actual icon artwork
   ========================================================== */

#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting
> .inline-setting:first-child
> strong::after,

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting
> .inline-setting:first-child
> strong::after {
  content: "" !important;

  position: absolute !important;
  left: 11px !important;
  top: 50% !important;

  display: block !important;

  width: 28px !important;
  height: 28px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    var(--otl-event-icon-color, #cbd5e1) !important;

  box-shadow: none !important;

  -webkit-mask:
    var(--otl-event-icon)
    center / contain
    no-repeat !important;

  mask:
    var(--otl-event-icon)
    center / contain
    no-repeat !important;

  transform: translateY(-50%) !important;
}


/* Premium tiles stay more vivid than Standard tiles. */

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting
> .inline-setting:first-child
> strong::before {
  border-color:
    rgba(
      var(--otl-event-accent-rgb),
      .44
    ) !important;

  background:
    linear-gradient(
      145deg,
      rgba(var(--otl-event-accent-rgb), .23),
      rgba(var(--otl-event-accent-rgb), .075)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 18px rgba(
      var(--otl-event-accent-rgb),
      .095
    ) !important;
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 560px) {

  #eventsPanel
  .event-grid[aria-label="Free Events"]
  > .event-setting
  > .inline-setting:first-child
  > strong,

  #eventsPanel
  .event-grid[aria-label="Premium Events"]
  > .premium-event-setting
  > .inline-setting:first-child
  > strong {
    min-height: 44px !important;

    padding-left: 56px !important;

    font-size: 1.14rem !important;
  }


  #eventsPanel
  .event-grid[aria-label="Free Events"]
  > .event-setting
  > .inline-setting:first-child
  > strong::before,

  #eventsPanel
  .event-grid[aria-label="Premium Events"]
  > .premium-event-setting
  > .inline-setting:first-child
  > strong::before {
    width: 44px !important;
    height: 44px !important;
  }


  #eventsPanel
  .event-grid[aria-label="Free Events"]
  > .event-setting
  > .inline-setting:first-child
  > strong::after,

  #eventsPanel
  .event-grid[aria-label="Premium Events"]
  > .premium-event-setting
  > .inline-setting:first-child
  > strong::after {
    left: 10px !important;

    width: 24px !important;
    height: 24px !important;
  }
}


/* ---------- End Event header specificity correction ---------- */

/* ---------- Open Trainers header hover normalization ---------- */
/*
  When Trainers is already open, hovering its summary should not
  introduce an additional color/glow shift. Keep the same appearance
  as the normal open state.
*/
#trainerPanel.otl-standard-section[open]
> .settings-summary:hover,

details#trainerPanel[data-section-header-icon="trainers"][open]
> .settings-summary:hover {
  background:
    linear-gradient(
      90deg,
      rgba(var(--otl-section-rgb), .065),
      rgba(2, 6, 23, .10) 58%,
      transparent
    ) !important;

  box-shadow:
    inset 0 -1px 0 rgba(var(--otl-section-rgb), .09) !important;
}
/* ---------- End Open Trainers header hover normalization ---------- */

/* ---------- Quiet Event card color system ---------- */

/*
  Event color identifies the Event itself, not the entire card.

  Core and Premium Events use the same neutral card anatomy.
  Premium status is communicated by the surrounding Premium tier.

  Event color remains on:
  - icon artwork
  - icon tile
  - checkbox
  - card outline on hover

  Whole-card washes, colored glows, and enabled accent rails are removed.
*/


/* ==========================================================
   Shared neutral Event card
   ========================================================== */

#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting,

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting {
  border-color:
    rgba(100, 116, 139, .24) !important;

  background:
    linear-gradient(
      145deg,
      rgba(22, 30, 46, .90),
      rgba(12, 18, 31, .94)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 10px 26px rgba(0, 0, 0, .18) !important;
}


/* ==========================================================
   Event icon identity
   ========================================================== */

#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting
> .inline-setting:first-child
> strong::before,

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting
> .inline-setting:first-child
> strong::before {
  border-color:
    rgba(var(--otl-event-accent-rgb), .25) !important;

  background:
    rgba(var(--otl-event-accent-rgb), .075) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}


#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting
> .inline-setting:first-child
> strong::after,

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting
> .inline-setting:first-child
> strong::after {
  opacity: .78;

  transition:
    opacity 150ms ease,
    transform 150ms ease;
}


/* ==========================================================
   Enabled state
   ========================================================== */

/*
  Enabled Events do not light up the whole card.
  Only their icon tile/artwork becomes more assertive.
*/

#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting:has(
  > .inline-setting:first-child
  > input[type="checkbox"]:checked
),

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(
  > .inline-setting:first-child
  > input[type="checkbox"]:checked
) {
  border-color:
    rgba(100, 116, 139, .24) !important;

  background:
    linear-gradient(
      145deg,
      rgba(22, 30, 46, .90),
      rgba(12, 18, 31, .94)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 10px 26px rgba(0, 0, 0, .18) !important;
}


#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting:has(
  > .inline-setting:first-child
  > input[type="checkbox"]:checked
)
> .inline-setting:first-child
> strong::before,

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(
  > .inline-setting:first-child
  > input[type="checkbox"]:checked
)
> .inline-setting:first-child
> strong::before {
  border-color:
    rgba(var(--otl-event-accent-rgb), .40) !important;

  background:
    rgba(var(--otl-event-accent-rgb), .13) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}


#eventsPanel
.event-grid[aria-label="Free Events"]
> .event-setting:has(
  > .inline-setting:first-child
  > input[type="checkbox"]:checked
)
> .inline-setting:first-child
> strong::after,

#eventsPanel
.event-grid[aria-label="Premium Events"]
> .premium-event-setting:has(
  > .inline-setting:first-child
  > input[type="checkbox"]:checked
)
> .inline-setting:first-child
> strong::after {
  opacity: 1;
}


/* ==========================================================
   Hover identity
   ========================================================== */

@media (hover: hover) {

  #eventsPanel
  .event-grid[aria-label="Free Events"]
  > .event-setting:hover,

  #eventsPanel
  .event-grid[aria-label="Premium Events"]
  > .premium-event-setting:hover {
    border-color:
      rgba(var(--otl-event-accent-rgb), .56) !important;

    background:
      linear-gradient(
        145deg,
        rgba(22, 30, 46, .90),
        rgba(12, 18, 31, .94)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .025),
      0 10px 26px rgba(0, 0, 0, .18) !important;

    transform:
      translateY(-1px);
  }


  #eventsPanel
  .event-grid[aria-label="Free Events"]
  > .event-setting:hover
  > .inline-setting:first-child
  > strong::before,

  #eventsPanel
  .event-grid[aria-label="Premium Events"]
  > .premium-event-setting:hover
  > .inline-setting:first-child
  > strong::before {
    border-color:
      rgba(var(--otl-event-accent-rgb), .44) !important;

    background:
      rgba(var(--otl-event-accent-rgb), .12) !important;
  }


  #eventsPanel
  .event-grid[aria-label="Free Events"]
  > .event-setting:hover
  > .inline-setting:first-child
  > strong::after,

  #eventsPanel
  .event-grid[aria-label="Premium Events"]
  > .premium-event-setting:hover
  > .inline-setting:first-child
  > strong::after {
    opacity: 1;
  }
}


/* ==========================================================
   Keep configuration surfaces neutral
   ========================================================== */

#eventsPanel
.event-setting
.otl-event-light-targets,

#eventsPanel
.event-setting
.otl-event-disclosure,

#eventsPanel
.event-setting
.otl-pace-depth-row,

#eventsPanel
.event-setting
.otl-variant-section {
  box-shadow:
    none !important;
}


/*
  Advanced disclosure controls remain neutral even though
  the Event itself has an identity color.
*/
#eventsPanel
.event-setting
.otl-event-disclosure {
  border-color:
    rgba(100, 116, 139, .20) !important;

  background:
    rgba(2, 6, 23, .24) !important;
}


@media (hover: hover) {
  #eventsPanel
  .event-setting
  .otl-event-disclosure:not(:disabled):hover {
    border-color:
      rgba(148, 163, 184, .32) !important;

    background:
      rgba(15, 23, 42, .40) !important;

    box-shadow:
      none !important;
  }
}


/* Checked Event hover specificity fix */
/*
  Checked Events use a more-specific :has(:checked) selector.
  Explicitly define their hover state so the Event-colored outline
  can override the neutral enabled-state border.
*/
@media (hover: hover) {

  #eventsPanel
  .event-grid[aria-label="Free Events"]
  > .event-setting:has(
    > .inline-setting:first-child
    > input[type="checkbox"]:checked
  ):hover,

  #eventsPanel
  .event-grid[aria-label="Premium Events"]
  > .premium-event-setting:has(
    > .inline-setting:first-child
    > input[type="checkbox"]:checked
  ):hover {
    border-color:
      rgba(var(--otl-event-accent-rgb), .56) !important;

    background:
      linear-gradient(
        145deg,
        rgba(22, 30, 46, .90),
        rgba(12, 18, 31, .94)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .025),
      0 10px 26px rgba(0, 0, 0, .18) !important;
  }
}
/* End checked Event hover specificity fix */

/* ---------- End Quiet Event card color system ---------- */

/* ---------- Canonical tier divider spacing ---------- */

/*
  Standard/Premium tier separation should be identical in every
  tiered section. The divider-to-heading distance belongs to the
  shared section system, not to Quick Start / Settings / Events /
  Trainers individually.
*/
.otl-tier-stack
> .otl-tier
+ .otl-tier {
  margin-top: 0 !important;
  padding-top: var(--otl-space-lg) !important;

  border-top:
    1px solid rgba(148, 163, 184, .20) !important;
}

@media (max-width: 560px) {
  .otl-tier-stack
  > .otl-tier
  + .otl-tier {
    padding-top: var(--otl-space-md) !important;
  }
}

/* ---------- End canonical tier divider spacing ---------- */


/* ---------- Canonical premium feature parity ---------- */

/*
  Yellow Light and Visual Effects are sibling Premium systems.
  They use identical emphasis strength and differ only by hue.

  Yellow Light    = amber / gold
  Visual Effects  = pink / rose
*/

/* Feature identities */
.game-settings-card
#otlGamePremiumGrid
> .yellow-premium-feature {
  --otl-feature-rgb: 250, 204, 21;
  --otl-feature-secondary-rgb: 245, 158, 11;
}

.game-settings-card
#otlGamePremiumGrid
> .visual-effects-setting {
  --otl-feature-rgb: 244, 114, 182;
  --otl-feature-secondary-rgb: 251, 113, 133;

  /* Keep all Visual Effects controls on the same pink identity. */
  --premium-setting-rgb: 244, 114, 182;
  --premium-setting-accent: #f472b6;

  --otl-fx-personality-rgb: 244, 114, 182;
  --otl-fx-personality-secondary-rgb: 251, 113, 133;
}


/* ==========================================================
   Equal feature-shell emphasis
   ========================================================== */

.game-settings-card
#otlGamePremiumGrid
> .yellow-premium-feature,

.game-settings-card
#otlGamePremiumGrid
> .visual-effects-setting {
  border-color:
    rgba(var(--otl-feature-rgb), .38) !important;

  background:
    radial-gradient(
      circle at 5% 0%,
      rgba(var(--otl-feature-rgb), .115),
      transparent 31%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(var(--otl-feature-secondary-rgb), .075),
      transparent 39%
    ),
    linear-gradient(
      145deg,
      rgba(22, 27, 43, .95),
      rgba(12, 18, 32, .95)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 0 0 1px rgba(var(--otl-feature-rgb), .035),
    0 14px 32px rgba(0, 0, 0, .20),
    0 0 24px rgba(var(--otl-feature-rgb), .065) !important;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}


@media (hover: hover) {
  .game-settings-card
  #otlGamePremiumGrid
  > .yellow-premium-feature:hover,

  .game-settings-card
  #otlGamePremiumGrid
  > .visual-effects-setting:hover {
    border-color:
      rgba(var(--otl-feature-rgb), .50) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .04),
      0 0 0 1px rgba(var(--otl-feature-rgb), .045),
      0 14px 32px rgba(0, 0, 0, .20),
      0 0 28px rgba(var(--otl-feature-rgb), .095) !important;
  }
}


/* ==========================================================
   Equal enable-control emphasis
   ========================================================== */

.game-settings-card
#otlGamePremiumGrid
.yellow-premium-feature
.yellow-enable-label,

.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-lock-row {
  min-height: 0 !important;

  padding:
    9px 12px !important;

  border:
    1px solid
    rgba(var(--otl-feature-rgb), .34) !important;

  border-radius:
    999px !important;

  background:
    rgba(var(--otl-feature-rgb), .105) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 0 14px rgba(var(--otl-feature-rgb), .055) !important;
}


@media (hover: hover) {
  .game-settings-card
  #otlGamePremiumGrid
  .yellow-premium-feature
  .yellow-enable-label:hover,

  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .otl-fx-lock-row:hover {
    border-color:
      rgba(var(--otl-feature-rgb), .47) !important;

    background:
      rgba(var(--otl-feature-rgb), .14) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .045),
      0 0 18px rgba(var(--otl-feature-rgb), .085) !important;
  }
}


/* ==========================================================
   Equal icon prominence
   ========================================================== */

/* Yellow signal lamp */
.game-settings-card
#otlGamePremiumGrid
#yellowLightTitle::before {
  width: 12px !important;
  height: 12px !important;

  background:
    rgb(var(--otl-feature-rgb)) !important;

  box-shadow:
    0 0 7px rgba(var(--otl-feature-rgb), .70),
    0 0 14px rgba(var(--otl-feature-rgb), .25) !important;
}


/* Pink eye / lens */
.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading
> strong::before {
  width: 15px !important;
  height: 15px !important;

  border:
    1.25px solid rgb(var(--otl-feature-rgb)) !important;

  background:
    radial-gradient(
      circle at center,
      #fff1f7 0 1.25px,
      rgb(var(--otl-feature-rgb)) 1.7px 2.8px,
      transparent 3.2px
    ) !important;

  box-shadow:
    0 0 6px rgba(var(--otl-feature-rgb), .22) !important;
}


/* ==========================================================
   Visual Effects responsive card grid
   ========================================================== */

/*
  The effect names are short enough to scan horizontally and
  do not justify a tall single-column list.

  Mobile             = 1 column
  Desktop            = 2 columns
  Wide desktop       = 3 columns
  Very wide desktop  = 4 columns
*/

.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-list {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap:
    9px 10px !important;

  align-items:
    start !important;
}


.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.otl-fx-list
> .otl-fx-effect {
  min-width: 0;
}


/* Wide screens have enough room for three fully usable cards. */
@media (min-width: 1400px) {
  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .otl-fx-list {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}


/*
  Very wide screens can use four columns without making expanded
  Visual Effect controls too narrow.
*/
@media (min-width: 1600px) {
  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .otl-fx-list {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }
}


/* Phones / narrow tablets return to the natural single column. */
@media (max-width: 759px) {
  .game-settings-card
  #otlGamePremiumGrid
  .visual-effects-setting
  .otl-fx-list {
    grid-template-columns:
      1fr !important;
  }
}

/* ---------- End canonical premium feature parity ---------- */


/* ---------- Event master toggle checkmark cleanup ---------- */

/*
  Event master controls are custom pill switches.
  Suppress any legacy checkbox checkmark/pseudo-element styling
  so the only visible indicator is the sliding pill knob.
*/

#eventsPanel
.event-setting
> .inline-setting:first-child
> input[type="checkbox"]::before,

#eventsPanel
.event-setting
> .inline-setting:first-child
> input[type="checkbox"]::after {
  content: none !important;
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  border: 0 !important;
  background: none !important;
  box-shadow: none !important;

  -webkit-mask: none !important;
  mask: none !important;

  transform: none !important;
}

/* ---------- End Event master toggle checkmark cleanup ---------- */


/* ---------- Premium feature content alignment ---------- */

/*
  Yellow Light's title and subtitle sit slightly farther inside
  their feature shell than Visual Effects.

  Match that inset for the Visual Effects title + description only.
  Do not move the Enable control or the effect-card grid.
*/

.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
.visual-effects-heading
> strong {
  margin-left: 10px !important;
}

.game-settings-card
#otlGamePremiumGrid
.visual-effects-setting
> p {
  margin-left: 10px !important;
}

/* ---------- End Premium feature content alignment ---------- */


/* ---------- Quick Start catalog hierarchy refresh ---------- */

/*
  Quick Start hierarchy:

  Standard Trainings
  - remain the dominant three-card entry path.

  Premium Trainings
  - grouped inside one restrained Premium surface
  - four columns on wide screens
  - quieter individual card shells
  - per-Training identity reserved for icon, accent edge,
    and primary Start Session action
*/


/* ==========================================================
   Premium Trainings parent surface
   ========================================================== */

#otlQuickStart
.premium-quick-start-tier {
  box-sizing: border-box;

  gap: 14px !important;

  padding:
    16px !important;

  border:
    1px solid rgba(167, 139, 250, .20) !important;

  border-radius:
    18px !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(139, 92, 246, .075),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(20, 25, 42, .72),
      rgba(10, 16, 30, .62)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 0 28px rgba(124, 58, 237, .035) !important;
}


/*
  The parent surface is now the Premium boundary, so remove any
  old divider treatment that competes with that boundary.
*/
#otlQuickStart
.quick-start-tier
+ .premium-quick-start-tier {
  margin-top:
    0 !important;

  border-top:
    1px solid rgba(167, 139, 250, .20) !important;
}


/* Give the Premium heading a little breathing room. */
#otlQuickStart
.premium-quick-start-tier
.quick-start-tier-heading {
  padding:
    1px 2px 2px !important;
}


/* ==========================================================
   Premium grid density
   ========================================================== */

#otlQuickStartPremiumGrid {
  gap:
    10px !important;
}


/*
  Keep the existing 3-column Standard Training row.

  Premium:
  <= 620px       1 column  (existing responsive behavior)
  621–900px      2 columns (existing responsive behavior)
  901–1399px     3 columns
  1400px+        4 columns
*/
@media (min-width: 901px) and (max-width: 1399px) {
  #otlQuickStartPremiumGrid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}


@media (min-width: 1400px) {
  #otlQuickStartPremiumGrid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }
}


/* ==========================================================
   Quieter Premium Training cards
   ========================================================== */

#otlQuickStart
#otlQuickStartPremiumGrid
> .quick-start-preset[data-quick-start-premium="true"] {
  position: relative;

  box-sizing: border-box;

  grid-template-rows:
    auto minmax(3.15em, auto) auto auto !important;

  gap:
    9px !important;

  padding:
    13px !important;
}


/*
  Individual colors no longer own the whole shell.

  The card stays neutral and receives only a slim identity edge
  plus a very faint accent wash near the upper-left corner.
*/
#otlQuickStart
#otlQuickStartPremiumGrid
> .quick-start-preset[data-quick-start-premium="true"]:not(.is-applied) {
  border-color:
    rgba(100, 116, 139, .24) !important;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(var(--otl-card-accent-rgb), .045),
      transparent 37%
    ),
    linear-gradient(
      145deg,
      rgba(24, 31, 48, .91),
      rgba(12, 19, 34, .95)
    ) !important;

  box-shadow:
    inset 3px 0 0 rgba(var(--otl-card-accent-rgb), .66),
    inset 0 1px 0 rgba(255, 255, 255, .028),
    0 9px 22px rgba(0, 0, 0, .15) !important;
}


/* Locked Premium cards remain quiet rather than looking disabled. */
#otlQuickStart
#otlQuickStartPremiumGrid
> .quick-start-preset[data-quick-start-premium="true"].is-locked:not(.is-applied) {
  border-color:
    rgba(100, 116, 139, .20) !important;
}


/* Hover reveals identity without repainting the whole card. */
@media (hover: hover) {
  #otlQuickStart
  #otlQuickStartPremiumGrid
  > .quick-start-preset[data-quick-start-premium="true"]:not(.is-applied):hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(var(--otl-card-accent-rgb), .36) !important;

    background:
      radial-gradient(
        circle at 0% 0%,
        rgba(var(--otl-card-accent-rgb), .065),
        transparent 38%
      ),
      linear-gradient(
        145deg,
        rgba(25, 33, 50, .94),
        rgba(12, 19, 34, .96)
      ) !important;

    box-shadow:
      inset 3px 0 0 rgba(var(--otl-card-accent-rgb), .82),
      inset 0 1px 0 rgba(255, 255, 255, .035),
      0 11px 26px rgba(0, 0, 0, .19),
      0 0 18px rgba(var(--otl-card-accent-rgb), .045) !important;
  }
}


/* ==========================================================
   Compact card anatomy
   ========================================================== */

#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-preset-heading {
  gap:
    8px !important;
}


#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-preset-heading
> div:first-child {
  gap:
    2px !important;
}


#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-preset-heading
strong {
  font-size:
    .98rem !important;

  line-height:
    1.18 !important;
}


#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-preset-heading
small {
  font-size:
    .69rem !important;

  color:
    #8998ad !important;
}


/* Duration stays useful, but should not compete with the title. */
#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-badge.duration {
  padding:
    3px 6px !important;

  font-size:
    .57rem !important;

  color:
    #cbd5e1 !important;

  background:
    rgba(2, 6, 23, .34) !important;
}


/*
  Premium status is already communicated by the parent section.
  Do not repeat it on every Training card.
*/
#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-badge.premium {
  display:
    none !important;
}


/* Description remains readable but consumes less vertical space. */
#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-preset
> p {
  min-height:
    3.15em !important;

  margin:
    0 !important;

  color:
    #b6c1d1 !important;

  font-size:
    .78rem !important;

  line-height:
    1.42 !important;
}


/* ==========================================================
   Quieter traits
   ========================================================== */

#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-traits {
  gap:
    4px !important;
}


#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-traits
span {
  padding:
    3px 6px !important;

  border-color:
    rgba(100, 116, 139, .23) !important;

  color:
    #8fa0b6 !important;

  background:
    rgba(2, 6, 23, .27) !important;

  font-size:
    .61rem !important;

  font-weight:
    700 !important;
}


/* ==========================================================
   Action hierarchy
   ========================================================== */

#otlQuickStart
.quick-start-actions {
  align-items:
    center !important;

  gap:
    7px !important;
}


/*
  Primary action remains large enough to be obvious.
  Premium color identity remains strongest here.
*/
#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-primary {
  min-height:
    36px !important;

  padding:
    7px 10px !important;

  border-radius:
    9px !important;

  font-size:
    .74rem !important;
}


/* ==========================================================
   Settings gear
   ========================================================== */

#otlQuickStart
.quick-start-customize {
  display:
    inline-grid !important;

  place-items:
    center !important;

  box-sizing:
    border-box !important;

  flex:
    0 0 auto;

  width:
    36px !important;

  min-width:
    36px !important;

  height:
    36px !important;

  min-height:
    36px !important;

  padding:
    0 !important;

  border:
    1px solid rgba(100, 116, 139, .34) !important;

  border-radius:
    9px !important;

  color:
    #94a3b8 !important;

  background:
    rgba(15, 23, 42, .48) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025) !important;

  cursor:
    pointer;
}


#otlQuickStart
.quick-start-customize-icon {
  width:
    16px;

  height:
    16px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  pointer-events:
    none;
}


@media (hover: hover) {
  #otlQuickStart
  .quick-start-customize:hover {
    border-color:
      rgba(148, 163, 184, .52) !important;

    color:
      #e2e8f0 !important;

    background:
      rgba(51, 65, 85, .48) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .035),
      0 0 13px rgba(148, 163, 184, .055) !important;
  }
}


#otlQuickStart
.quick-start-customize:focus-visible {
  outline:
    2px solid rgba(125, 211, 252, .72);

  outline-offset:
    2px;
}


/* Standard cards keep their prominence, but use the same gear utility. */
#otlQuickStartFreeGrid
.quick-start-customize {
  width:
    38px !important;

  min-width:
    38px !important;

  height:
    38px !important;

  min-height:
    38px !important;
}


/* ==========================================================
   Narrow-screen cleanup
   ========================================================== */

@media (max-width: 620px) {
  #otlQuickStart
  .premium-quick-start-tier {
    padding:
      12px !important;
  }

  #otlQuickStart
  #otlQuickStartPremiumGrid
  > .quick-start-preset[data-quick-start-premium="true"] {
    padding:
      12px !important;
  }

  #otlQuickStart
  #otlQuickStartPremiumGrid
  .quick-start-preset
  > p {
    min-height:
      0 !important;
  }
}

/* ---------- End Quick Start catalog hierarchy refresh ---------- */


/* ---------- Shared boxed Premium tier surfaces ---------- */

/*
  Premium subsections use ONE enclosing surface.

  The outer .otl-tier--premium contains:
    - the Premium heading
    - the Premium content grid

  The generated inner .otl-tier-box is flattened so we do not create
  a second nested border/surface.

  This keeps Quick Start, Settings, Events, and Trainers consistent.
*/


/* ==========================================================
   One canonical Premium subsection shell
   ========================================================== */

#otlQuickStart
.otl-tier--premium,

.game-settings-card
.otl-tier--premium,

#eventsPanel
.otl-tier--premium,

#trainerPanel
.otl-tier--premium {
  box-sizing:
    border-box !important;

  gap:
    14px !important;

  margin-top:
    0 !important;

  padding:
    16px !important;

  border:
    1px solid rgba(167, 139, 250, .20) !important;

  border-radius:
    18px !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(139, 92, 246, .075),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(20, 25, 42, .72),
      rgba(10, 16, 30, .62)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 0 28px rgba(124, 58, 237, .035) !important;
}


/* ==========================================================
   Premium heading lives inside that one shell
   ========================================================== */

#otlQuickStart
.otl-tier--premium
> .otl-tier-heading--premium,

.game-settings-card
.otl-tier--premium
> .otl-tier-heading--premium,

#eventsPanel
.otl-tier--premium
> .otl-tier-heading--premium,

#trainerPanel
.otl-tier--premium
> .otl-tier-heading--premium {
  margin:
    0 !important;

  padding:
    1px 2px 2px !important;
}


/* ==========================================================
   Remove the second / inner Premium surface
   ========================================================== */

/*
  section-system.js creates .otl-tier-box around each grid.
  Keep that DOM wrapper for layout, but make it visually transparent
  for Premium tiers because the outer tier is now the sole boundary.
*/

#otlQuickStart
.otl-tier--premium
> .otl-tier-box,

.game-settings-card
.otl-tier--premium
> .otl-tier-box,

#eventsPanel
.otl-tier--premium
> .otl-tier-box,

#trainerPanel
.otl-tier--premium
> .otl-tier-box {
  box-sizing:
    border-box !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


/*
  Premium Settings may also carry the older flattening class.
  Make its final state explicit and identical.
*/
.game-settings-card
.otl-tier--premium
> .otl-premium-settings-flat {
  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


/* ==========================================================
   Remove old Standard/Premium divider inside the new shell
   ========================================================== */

#otlQuickStart
.otl-tier
+ .otl-tier--premium,

.game-settings-card
.otl-tier
+ .otl-tier--premium,

#eventsPanel
.otl-tier
+ .otl-tier--premium,

#trainerPanel
.otl-tier
+ .otl-tier--premium {
  border-top:
    1px solid rgba(167, 139, 250, .20) !important;

  padding-top:
    16px !important;
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 620px) {
  #otlQuickStart
  .otl-tier--premium,

  .game-settings-card
  .otl-tier--premium,

  #eventsPanel
  .otl-tier--premium,

  #trainerPanel
  .otl-tier--premium {
    gap:
      11px !important;

    padding:
      12px !important;
  }

  #otlQuickStart
  .otl-tier
  + .otl-tier--premium,

  .game-settings-card
  .otl-tier
  + .otl-tier--premium,

  #eventsPanel
  .otl-tier
  + .otl-tier--premium,

  #trainerPanel
  .otl-tier
  + .otl-tier--premium {
    padding-top:
      12px !important;
  }
}

/* ---------- End Shared boxed Premium tier surfaces ---------- */


/* ---------- Premium Settings inner grid flatten ---------- */

/*
  settings-polish.css gives .game-settings-premium-grid its own
  purple border/background/padding.

  Premium Settings now uses the outer .otl-tier--premium as the
  single canonical Premium subsection shell, so this legacy inner
  grid surface must be visually flattened.
*/

.game-settings-card
.otl-tier--premium
.game-settings-premium-grid {
  box-sizing:
    border-box !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}

/* ---------- End Premium Settings inner grid flatten ---------- */


/* Keep Premium identical to the other top-level cards when collapsed. */
#otlPremium:not([open]) {
  height: var(--otl-top-section-height) !important;
  min-height: var(--otl-top-section-height) !important;
  max-height: var(--otl-top-section-height) !important;
}

#otlPremium:not([open]) > :not(summary) {
  display: none !important;
}


/* ---------- Advanced Premium Event identities v1 ---------- */

/*
  Nippleplay's Duration row is already visually separated by
  Chance by Light. Remove the second divider that came from
  .otl-existing-completion-settings.
*/
#eventsPanel
.premium-event-setting:has(#nippleplayEnabledInput)
.otl-existing-completion-settings {
  padding-top: 0 !important;
  border-top: 0 !important;
}


/*
  Each Advanced Premium Event gets its own identity.
  These values intentionally do not duplicate the existing
  Premium Event accent values.
*/

/* Chastity — indigo */
#eventsPanel
.event-grid[aria-label="Premium Events"]
.premium-event-setting:has(#chastityEnabledInput) {
  --otl-event-accent-rgb: 99, 102, 241;
  --otl-event-accent: #6366f1;
}

/* Vibrator — electric yellow */
#eventsPanel
.event-grid[aria-label="Premium Events"]
.premium-event-setting:has(#vibratorEnabledInput) {
  --otl-event-accent-rgb: 250, 204, 21;
  --otl-event-accent: #facc15;
}

/* Mouth Gag — emerald */
#eventsPanel
.event-grid[aria-label="Premium Events"]
.premium-event-setting:has(#mouthGagEnabledInput) {
  --otl-event-accent-rgb: 16, 185, 129;
  --otl-event-accent: #10b981;
}

/* Butt Plug — lime */
#eventsPanel
.event-grid[aria-label="Premium Events"]
.premium-event-setting:has(#buttPlugEnabledInput) {
  --otl-event-accent-rgb: 132, 204, 22;
  --otl-event-accent: #84cc16;
}

/* Fleshlight — peach */
#eventsPanel
.event-grid[aria-label="Premium Events"]
.premium-event-setting:has(#fleshlightEnabledInput) {
  --otl-event-accent-rgb: 251, 146, 60;
  --otl-event-accent: #fb923c;
}

/* Penis Pump — steel */
#eventsPanel
.event-grid[aria-label="Premium Events"]
.premium-event-setting:has(#penisPumpEnabledInput) {
  --otl-event-accent-rgb: 148, 163, 184;
  --otl-event-accent: #94a3b8;
}

/* Nipple Clamps — crimson */
#eventsPanel
.event-grid[aria-label="Premium Events"]
.premium-event-setting:has(#nippleClampsEnabledInput) {
  --otl-event-accent-rgb: 225, 29, 72;
  --otl-event-accent: #e11d48;
}

/* Bondage — violet */
#eventsPanel
.event-grid[aria-label="Premium Events"]
.premium-event-setting:has(#bondageEnabledInput) {
  --otl-event-accent-rgb: 139, 92, 246;
  --otl-event-accent: #8b5cf6;
}

/* Feminization — orchid */
#eventsPanel
.event-grid[aria-label="Premium Events"]
.premium-event-setting:has(#feminizationEnabledInput) {
  --otl-event-accent-rgb: 240, 171, 252;
  --otl-event-accent: #f0abfc;
}

/* ---------- End Advanced Premium Event identities v1 ---------- */

/* ==========================================================
   Settings Audio layout
   ========================================================== */

.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
.game-settings-subgrid.otl-audio-layout {
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 10px !important;
}

.game-settings-card
[data-settings-group="audio"]
.otl-audio-left-stack {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.game-settings-card
[data-settings-group="audio"]
.otl-audio-levels-panel,
.game-settings-card
[data-settings-group="audio"]
.otl-audio-metronome-panel,
.game-settings-card
[data-settings-group="audio"]
.otl-audio-transition-panel {
  box-sizing: border-box;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
}

.game-settings-card
[data-settings-group="audio"]
.otl-audio-levels-panel {
  display: grid !important;
  align-content: start;
  gap: 3px !important;
  padding: 16px !important;
}

.game-settings-card
[data-settings-group="audio"]
.otl-audio-levels-panel
> .otl-audio-flat-control:nth-child(2) {
  display: grid !important;
  gap: 24px !important;
}

.game-settings-card
[data-settings-group="audio"]
.otl-audio-flat-control {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.game-settings-card
[data-settings-group="audio"]
.otl-audio-metronome-panel {
  padding: 16px !important;
}

.game-settings-card
[data-settings-group="audio"]
.otl-audio-metronome-panel
#metronomeOptions {
  display: grid;
  gap: 18px;
  margin-top: 8px;
}

.game-settings-card
[data-settings-group="audio"]
.otl-audio-metronome-panel
#metronomeOptions > label {
  display: grid;
  gap: 8px;
}

.game-settings-card
[data-settings-group="audio"]
.otl-audio-metronome-panel
#metronomeOptions > label:first-child {
  gap: 5px;
  margin-bottom: -5px;
}

.game-settings-card
[data-settings-group="audio"]
.otl-audio-metronome-panel
#metronomeIntensityWrap[hidden],
.game-settings-card
[data-settings-group="audio"]
.otl-audio-metronome-panel
#metronomeManualBpmWrap[hidden] {
  display: none !important;
}

.game-settings-card
[data-settings-group="audio"]
.otl-audio-transition-panel {
  padding: 16px !important;
}

@media (max-width: 900px) {
  .game-settings-card
  .game-settings-subgroup[data-settings-group="audio"]
  .game-settings-subgrid.otl-audio-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   Canonical Settings typography
   ========================================================== */

/*
  Non-Premium Settings type scale:

  Group heading    1.20rem / 850
  Card heading      .98rem / 850
  Secondary label   .82rem / 650
  Control text       .90rem / normal

  Premium Settings intentionally remains outside this system.
*/


/* ---------- Playback Rules / Audio / Session & Outcome ---------- */

.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
.game-settings-subgroup-heading
.game-settings-subgroup-copy
> strong,

.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
.game-settings-subgroup-heading
.game-settings-subgroup-copy
> strong,

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.game-settings-subgroup-heading
.game-settings-subgroup-copy
> strong {
  color: #f8fafc !important;
  font-size: 1.20rem !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
}


/* No helper copy beneath these three headings. */

.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
.game-settings-subgroup-heading
small,

.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
.game-settings-subgroup-heading
small,

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.game-settings-subgroup-heading
small {
  display: none !important;
}


/* ---------- Canonical card titles ---------- */

/* Direct card headings */
.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
.setting-box
> strong,

.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
.setting-box
> strong,

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.setting-box
> strong,

/* Checkbox-led cards such as Session Timer / Session duration */
.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
.setting-box
> .inline-setting:first-child
> strong,

.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
.setting-box
> .inline-setting:first-child
> strong,

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.setting-box
> .inline-setting:first-child
> strong,

/* Audio's custom heading */
.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
.transition-sounds-heading
strong {
  color: #f8fafc !important;
  font-size: .98rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}


/* ---------- Secondary labels ---------- */

/* Light Streak Minimum / Maximum */
.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
.otl-playback-streak-row
> .otl-playback-flat-control
> strong,

/* Media timing labels */
.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
.otl-playback-media-controls
> .otl-playback-flat-control
> strong,

/* Playback Restrictions options */
.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
.otl-playback-restrictions-card
.otl-playback-lock-options
strong,

/* Ordinary labels within Audio and Session cards */
.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
.setting-box
label:not(.inline-setting)
> strong,

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.setting-box
label:not(.inline-setting)
> strong {
  color: #cbd5e1 !important;
  font-size: .88rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}


/* Transition sound rows are controls beneath Transition Sounds. */

.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
.transition-sound-row-heading
strong {
  color: #cbd5e1 !important;
  font-size: .88rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}


/* ---------- Ordinary setting text ---------- */

.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
.setting-box
.inline-setting,

.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
.setting-box
.inline-setting,

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.setting-box
.inline-setting {
  font-size: .88rem;
  line-height: 1.35;
}


/* ---------- Inputs / selects ---------- */

.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
input,

.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
select,

.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
input,

.game-settings-card
.game-settings-subgroup[data-settings-group="audio"]
select,

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
input,

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
select {
  font-size: .95rem !important;
}


/* Text adjoining numeric controls uses the secondary scale. */

.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
.otl-playback-unit,

.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
.inline-setting
> span:not(.hint),

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.probability-row
> span {
  font-size: .88rem;
  font-weight: 650;
}


@media (max-width: 560px) {
  .game-settings-card
  .game-settings-subgroup[data-settings-group="playback"]
  .game-settings-subgroup-heading
  .game-settings-subgroup-copy
  > strong,

  .game-settings-card
  .game-settings-subgroup[data-settings-group="audio"]
  .game-settings-subgroup-heading
  .game-settings-subgroup-copy
  > strong,

  .game-settings-card
  .game-settings-subgroup[data-settings-group="session"]
  .game-settings-subgroup-heading
  .game-settings-subgroup-copy
  > strong {
    font-size: 1.10rem !important;
  }
}


/* ==========================================================
   Settings Playback Rules layout
   ========================================================== */

/*
  Six columns allow the section to have:
    row 1:  50 / 50
    row 2:  33 / 33 / 33
    row 3:  full width
*/
.game-settings-card
.game-settings-subgroup[data-settings-group="playback"]
.game-settings-subgrid.otl-playback-layout {
  display: grid !important;
  grid-template-columns:
    repeat(6, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 10px !important;
}


/* ---------- shared cards ---------- */

.game-settings-card
[data-settings-group="playback"]
.otl-playback-streak-card,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-probability-card,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-anatomy-card,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-anatomy-card,

.game-settings-card
[data-settings-group="playback"]
.otl-repeat-rules-setting,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-timer-card,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-media-card,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-restrictions-card {
  box-sizing: border-box;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
}


/*
  Explicit order prevents the dynamically inserted Media Repeats
  card from disturbing the intended visual grid.
*/
.game-settings-card
[data-settings-group="playback"]
.otl-playback-streak-card {
  order: 1;
  grid-column: span 3;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-probability-card {
  order: 2;
  grid-column: span 3 !important;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-anatomy-card {
  order: 3;
  grid-column: span 3;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-restrictions-card {
  order: 4;
  grid-column: span 3;
}

.game-settings-card
[data-settings-group="playback"]
.otl-repeat-rules-setting {
  order: 5;
  grid-column: span 3;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-timer-card {
  order: 6;
  grid-column: span 3;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-segmentation-card {
  order: 7;
  grid-column: 1 / -1;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-short-replay-card {
  order: 8;
  grid-column: 1 / -1;
}


/* ---------- Light Streak ---------- */

.game-settings-card
[data-settings-group="playback"]
.otl-playback-streak-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 15px !important;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-streak-card
> strong,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-probability-card
> strong,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-anatomy-card
> strong,

.game-settings-card
[data-settings-group="playback"]
.otl-repeat-rules-setting
> strong,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-timer-card
> .otl-session-timer-heading
> strong,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-restrictions-card
> strong {
  color: #f8fafc;
  font-size: .98rem;
  font-weight: 850;
  line-height: 1.2;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-streak-row {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}


/*
  Minimum / Maximum are subordinate labels, not competing headings.
*/
.game-settings-card
[data-settings-group="playback"]
.otl-playback-streak-row
> .otl-playback-flat-control
> strong {
  color: #cbd5e1;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.25;
}


/* ---------- controls nested inside cards ---------- */

.game-settings-card
[data-settings-group="playback"]
.otl-playback-flat-control {
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ---------- Light Probability ---------- */

.game-settings-card
[data-settings-group="playback"]
.otl-playback-probability-card {
  align-content: start;
  padding: 15px !important;
}


/* ---------- compact second row ---------- */

.game-settings-card
[data-settings-group="playback"]
.otl-repeat-rules-setting,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-timer-card,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-restrictions-card {
  align-content: start;
  align-self: start;
  padding: 12px 14px !important;
}


/* User Anatomy */

.game-settings-card
[data-settings-group="playback"]
.otl-playback-anatomy-card {
  display: grid;
  gap: 9px;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-anatomy-card
> select {
  width: 100%;
  min-width: 0;
  margin: 0;
}


/* Media Repeats */

.game-settings-card
[data-settings-group="playback"]
.otl-repeat-rules-setting {
  display: grid;
  gap: 9px;
}

.game-settings-card
[data-settings-group="playback"]
.otl-repeat-rules-setting
> select {
  width: 100%;
  min-width: 0;
  margin: 0;
}


/* Session Timer */

.game-settings-card
[data-settings-group="playback"]
.otl-playback-timer-card {
  display: grid;
  gap: 9px;
}

.game-settings-card
[data-settings-group="playback"]
.otl-session-timer-heading {
  display: inline-flex;
  width: fit-content;
  margin: 0;
  align-items: center;
  gap: 8px;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-timer-card
#sessionTimerModeInput {
  width: 100%;
  min-width: 0;
  margin: 0;
}


/* Playback Restrictions */

.game-settings-card
[data-settings-group="playback"]
.otl-playback-restrictions-card {
  display: grid;
  gap: 10px;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-restrictions-card
.otl-playback-lock-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-restrictions-card
.inline-setting {
  min-width: 0;
  margin: 0;
  align-items: center;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-restrictions-card
.otl-playback-lock-options
.inline-setting
strong {
  color: #cbd5e1;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.3;
}


/* ---------- media playback controls ---------- */

.game-settings-card
[data-settings-group="playback"]
.otl-playback-segmentation-card,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-short-replay-card {
  display: grid;
  align-content: start;
  align-self: start;
  gap: 12px;
  padding: 14px !important;
}


.game-settings-card
[data-settings-group="playback"]
.otl-playback-segmentation-card
> strong,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-short-replay-card
> strong {
  color: #f8fafc;
  font-size: .98rem;
  font-weight: 850;
  line-height: 1.2;
}


.game-settings-card
[data-settings-group="playback"]
.otl-playback-segmentation-controls {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 16px;
}


.game-settings-card
[data-settings-group="playback"]
.otl-playback-segmentation-controls
> .otl-playback-flat-control {
  display: grid !important;
  align-content: start;
  gap: 8px !important;
  min-width: 0;
}


.game-settings-card
[data-settings-group="playback"]
.otl-playback-segmentation-controls
> .otl-playback-flat-control
input[type="number"] {
  width: 100%;
  min-width: 0;
}


.game-settings-card
[data-settings-group="playback"]
.otl-playback-segmentation-controls
> .otl-playback-flat-control
> strong {
  color: #cbd5e1;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.3;
}


.game-settings-card
[data-settings-group="playback"]
.otl-playback-value-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}


.game-settings-card
[data-settings-group="playback"]
.otl-playback-segmentation-controls
> .otl-playback-flat-control:first-child {
  grid-template-rows:
    auto auto;
}


.game-settings-card
[data-settings-group="playback"]
.otl-playback-segmentation-controls
> .otl-playback-flat-control:first-child
.otl-playback-value-row {
  width: 100%;
}


.game-settings-card
[data-settings-group="playback"]
.otl-playback-unit {
  color: #cbd5e1;
  font-size: .82rem;
  font-weight: 650;
  white-space: nowrap;
}


.game-settings-card
[data-settings-group="playback"]
input[type="number"],

.game-settings-card
[data-settings-group="playback"]
select {
  font-size: .90rem;
}


/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .game-settings-card
  .game-settings-subgroup[data-settings-group="playback"]
  .game-settings-subgrid.otl-playback-layout {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-streak-card,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-probability-card,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-anatomy-card,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-repeat-rules-setting,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-timer-card {
    grid-column: span 1 !important;
  }

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-restrictions-card {
    grid-column: 1 / -1 !important;
  }

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-segmentation-card,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-short-replay-card {
    grid-column: 1 / -1 !important;
  }
}


@media (max-width: 700px) {
  .game-settings-card
  .game-settings-subgroup[data-settings-group="playback"]
  .game-settings-subgrid.otl-playback-layout {
    grid-template-columns:
      1fr !important;
  }

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-streak-card,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-probability-card,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-anatomy-card,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-repeat-rules-setting,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-timer-card,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-restrictions-card,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-segmentation-card,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-short-replay-card {
    grid-column: auto !important;
  }
}


@media (max-width: 480px) {
  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-streak-row {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   Settings Session & Outcome layout
   ========================================================== */

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.game-settings-subgrid {
  display: grid !important;
  grid-template-columns:
    minmax(320px, 390px)
    minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
}


/* ---------- Session duration ---------- */

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.duration-setting {
  display: grid;
  align-content: start;
  align-self: start;

  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;

  gap: 0 !important;
  padding: 13px 14px !important;
}


.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.otl-session-duration-title {
  width: fit-content;
  margin: 0;
}


/*
  Fixed session length sits immediately under
  "Session duration" and is intentionally compact.
*/

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.otl-session-duration-value {
  display: inline-grid;
  grid-template-columns:
    82px auto;
  align-items: center;
  gap: 7px;

  width: fit-content;
  margin:
    8px
    0
    0
    36px;
}


.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.otl-session-duration-value
input {
  box-sizing: border-box;
  width: 82px;
  min-width: 82px;
}


.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.otl-session-duration-value
span {
  color: #cbd5e1;
  font-size: .88rem;
  font-weight: 650;
}


/*
  Randomization is a secondary choice, separated enough that
  it doesn't read as part of the fixed-length input.
*/

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.otl-session-randomize {
  width: fit-content;
  margin:
    16px
    0
    0
    0;
}


/* ---------- Outcome ---------- */

.game-settings-card
.game-settings-subgroup[data-settings-group="session"]
.outcome-setting {
  align-self: start;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
}


@media (max-width: 900px) {
  .game-settings-card
  .game-settings-subgroup[data-settings-group="session"]
  .game-settings-subgrid {
    grid-template-columns: 1fr !important;
  }

  .game-settings-card
  .game-settings-subgroup[data-settings-group="session"]
  .duration-setting {
    width: min(100%, 390px);
  }
}


/* ==========================================================
   Session Timer display
   ========================================================== */

#sessionTimerOverlay {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 40;

  min-width: 72px;
  padding: 8px 12px;

  border:
    1px solid rgba(226, 232, 240, .22);
  border-radius: 10px;

  color: #f8fafc;
  background:
    rgba(2, 6, 23, .76);

  box-shadow:
    0 8px 28px rgba(0, 0, 0, .30);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  font-size:
    clamp(.84rem, 1.35vw, 1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .025em;
  text-align: center;
  font-variant-numeric: tabular-nums;

  pointer-events: none;
  user-select: none;
}

#sessionTimerOverlay[hidden] {
  display: none !important;
}

.video-shell:fullscreen
#sessionTimerOverlay,
.video-shell:-webkit-full-screen
#sessionTimerOverlay {
  top: 22px;
  right: 22px;

  padding: 10px 14px;

  font-size:
    clamp(.95rem, 1.8vw, 1.2rem);
}

body.theater-mode
#sessionTimerOverlay {
  top: 20px;
  right: 20px;
}

/* ---------- Additional Local-only badges ---------- */

/*
  Video Segmentation applies only to Local video playback,
  so the Local badge belongs on the shared card heading.
  Short Media Replay applies to both Local and Library media.
*/
.game-settings-card
[data-settings-group="playback"]
.otl-playback-local-only-control
> strong::after {
  content: "Local";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 8px;
  padding: 3px 7px;

  border:
    1px solid rgba(96, 165, 250, .28);
  border-radius: 999px;

  color: #bfdbfe;
  background:
    rgba(30, 64, 175, .12);

  font-size: .60rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .045em;

  vertical-align: middle;
}


/*
  Yellow duration applies to Local media controls.
  Keep its Local badge directly beside the setting name.
*/
.yellow-controls-grid
.setting-box:has(#yellowDurationInput)
> strong::after {
  content: "Local";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 8px;
  padding: 3px 7px;

  border:
    1px solid rgba(96, 165, 250, .28);
  border-radius: 999px;

  color: #bfdbfe;
  background:
    rgba(30, 64, 175, .12);

  font-size: .60rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .045em;

  vertical-align: middle;
}


/*
  Seeking controls the native Local video element.
  Keep its Local badge directly beside the setting name.
*/
#otlPlaybackLockSetting
.inline-setting:has(#disableManualSeekingInput)
> span
> strong::after {
  content: "Local";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 8px;
  padding: 3px 7px;

  border:
    1px solid rgba(96, 165, 250, .28);
  border-radius: 999px;

  color: #bfdbfe;
  background:
    rgba(30, 64, 175, .12);

  font-size: .60rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .045em;

  vertical-align: middle;
}

/* ---------- End Additional Local-only badges ---------- */

/* ---------- Session endings heading total ---------- */

.game-settings-card
.outcome-setting
.otl-outcome-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.game-settings-card
.outcome-setting
.otl-outcome-heading
> strong {
  min-width: 0;
}

.game-settings-card
.outcome-setting
.otl-outcome-heading
.outcome-total {
  flex: 0 0 auto;
  margin: 0 !important;
}

/* ---------- End Session endings heading total ---------- */


/* ---------- Playback compact-row order ---------- */

.game-settings-card
[data-settings-group="playback"]
.otl-playback-restrictions-card {
  order: 3 !important;
}

.game-settings-card
[data-settings-group="playback"]
.otl-repeat-rules-setting {
  order: 4 !important;
}

.game-settings-card
[data-settings-group="playback"]
.otl-playback-timer-card {
  order: 5 !important;
}

/* ---------- End Playback compact-row order ---------- */


/* ---------- Quick Start minimal preset cards ---------- */

/*
  Quick Start is intentionally discovery-first:
    header
    defining Events
    action

  Descriptions and Trainer labels are omitted by the renderer.
*/
#otlQuickStart
.quick-start-preset {
  grid-template-rows:
    auto auto !important;

  gap:
    18px !important;
}


/* Bigger visual identity. */
#otlQuickStart
.quick-start-preset-heading {
  align-items:
    center !important;

  gap:
    12px !important;
}


#otlQuickStart
.quick-start-training-title {
  gap:
    10px !important;
}


#otlQuickStart
.quick-start-training-icon {
  width:
    24px !important;

  height:
    24px !important;

  filter:
    drop-shadow(
      0 0 7px
      rgba(var(--otl-card-accent-rgb, 56, 189, 248), .28)
    ) !important;
}


#otlQuickStart
.quick-start-preset-heading
strong {
  font-size:
    1.17rem !important;

  font-weight:
    850 !important;

  line-height:
    1.12 !important;
}


/*
  Duration is one of the only pieces of explanatory information
  retained, so give it stronger hierarchy in the upper-right.
*/
#otlQuickStart
.quick-start-badge.duration {
  min-height:
    28px !important;

  box-sizing:
    border-box !important;

  padding:
    5px 10px !important;

  font-size:
    .72rem !important;

  font-weight:
    850 !important;

  color:
    #e2e8f0 !important;

  background:
    rgba(2, 6, 23, .42) !important;
}


/*
  Premium cards have much less copy now, so give them enough
  padding to feel deliberate rather than merely compressed.
*/
#otlQuickStart
#otlQuickStartPremiumGrid
> .quick-start-preset[data-quick-start-premium="true"] {
  grid-template-rows:
    auto auto !important;

  align-content:
    start !important;

  gap:
    18px !important;

  min-height:
    0 !important;

  height:
    auto !important;

  padding:
    16px !important;
}


#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-training-icon {
  width:
    26px !important;

  height:
    26px !important;
}


#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-preset-heading
strong {
  font-size:
    1.2rem !important;
}


#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-badge.duration {
  min-height:
    30px !important;

  padding:
    6px 10px !important;

  font-size:
    .74rem !important;
}

#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-preset-heading {
  align-items:
    center !important;

  gap:
    10px !important;
}

#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-training-title {
  gap:
    10px !important;

  line-height:
    1.08 !important;
}

#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-training-icon {
  width:
    22px !important;

  height:
    22px !important;
}

#otlQuickStart
#otlQuickStartPremiumGrid
.quick-start-preset-heading
strong {
  line-height:
    1.08 !important;
}


@media (max-width: 620px) {
  #otlQuickStart
  #otlQuickStartPremiumGrid
  > .quick-start-preset[data-quick-start-premium="true"] {
    min-height:
      0 !important;

    height:
      auto !important;
  }
}

/* ---------- End Quick Start minimal preset cards ---------- */



/* ---------- Premium Training rainbow accents ---------- */

/*
  Final Premium Training palette.

  Cards are rendered in matching rainbow order so the grid reads
  continuously from warm hues through cool hues, violet, pink,
  and finally the BWC/BBC neutral pair.
*/


/* 01 — Femdom — crimson */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="femdom"] {
  --otl-card-accent-rgb: 239, 68, 68;
  --otl-card-accent: #ef4444;
  --otl-card-accent-strong: #b91c1c;
}


/* 02 — Cuck — vermilion */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="cuck"] {
  --otl-card-accent-rgb: 249, 115, 22;
  --otl-card-accent: #f97316;
  --otl-card-accent-strong: #c2410c;
}


/* 03 — Dungeon — orange */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="dungeon"] {
  --otl-card-accent-rgb: 251, 146, 60;
  --otl-card-accent: #fb923c;
  --otl-card-accent-strong: #ea580c;
}


/* 04 — Foot Worship — amber */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="feet-worship"] {
  --otl-card-accent-rgb: 245, 158, 11;
  --otl-card-accent: #f59e0b;
  --otl-card-accent-strong: #b45309;
}


/* 05 — Edge Marathon — gold */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="edge-marathon"] {
  --otl-card-accent-rgb: 234, 179, 8;
  --otl-card-accent: #eab308;
  --otl-card-accent-strong: #a16207;
}


/* 06 — Extreme — yellow */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="extreme"] {
  --otl-card-accent-rgb: 250, 204, 21;
  --otl-card-accent: #facc15;
  --otl-card-accent-strong: #ca8a04;
}


/* 07 — Animated — lime */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="animated-real"] {
  --otl-card-accent-rgb: 132, 204, 22;
  --otl-card-accent: #84cc16;
  --otl-card-accent-strong: #4d7c0f;
}


/* 08 — Clothed — emerald */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="clothed"] {
  --otl-card-accent-rgb: 34, 197, 94;
  --otl-card-accent: #22c55e;
  --otl-card-accent-strong: #15803d;
}


/* 08 — AI Addiction — teal */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="ai-addiction"] {
  --otl-card-accent-rgb: 20, 184, 166;
  --otl-card-accent: #14b8a6;
  --otl-card-accent-strong: #0f766e;
}


/* 09 — Gooning — cyan */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="gooning"] {
  --otl-card-accent-rgb: 34, 211, 238;
  --otl-card-accent: #22d3ee;
  --otl-card-accent-strong: #0891b2;
}


/* 11 — Trans — trans-flag blue */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="trans-women-cis-women"] {
  --otl-card-accent-rgb: 91, 206, 250;
  --otl-card-accent: #5bcefa;
  --otl-card-accent-strong: #0284c7;
}


/* 12 — Cock Worship — electric blue */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="cock-worship"] {
  --otl-card-accent-rgb: 59, 130, 246;
  --otl-card-accent: #3b82f6;
  --otl-card-accent-strong: #1d4ed8;
}


/* 11 — Gay — indigo */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="daddy"] {
  --otl-card-accent-rgb: 99, 102, 241;
  --otl-card-accent: #6366f1;
  --otl-card-accent-strong: #4338ca;
}


/* 12 — Sissy — violet */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="sissy"] {
  --otl-card-accent-rgb: 168, 85, 247;
  --otl-card-accent: #a855f7;
  --otl-card-accent-strong: #7e22ce;
}


/* 13 — Family — fuchsia */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="mommy"] {
  --otl-card-accent-rgb: 217, 70, 239;
  --otl-card-accent: #d946ef;
  --otl-card-accent-strong: #a21caf;
}


/* 16 — Lesbian — dusty pink */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="lesbian-straight"] {
  --otl-card-accent-rgb: 209, 98, 164;
  --otl-card-accent: #d162a4;
  --otl-card-accent-strong: #a30262;
}


/* 17 — Pussy Worship — hot pink */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="pussy-worship"] {
  --otl-card-accent-rgb: 236, 72, 153;
  --otl-card-accent: #ec4899;
  --otl-card-accent-strong: #be185d;
}


/* 15 — Breast Worship — rose */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="breast-worship"] {
  --otl-card-accent-rgb: 244, 63, 94;
  --otl-card-accent: #f43f5e;
  --otl-card-accent-strong: #be123c;
}


/* 16 — BWC Worship — silver */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="bwc-worship"] {
  --otl-card-accent-rgb: 226, 232, 240;
  --otl-card-accent: #e2e8f0;
  --otl-card-accent-strong: #94a3b8;
}


/* 17 — BBC Worship — graphite */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="bbc-worship"] {
  --otl-card-accent-rgb: 71, 85, 105;
  --otl-card-accent: #475569;
  --otl-card-accent-strong: #1e293b;
}


/* Keep the bright BWC button legible. */
#otlQuickStart
.quick-start-preset[data-quick-start-preset="bwc-worship"]
.quick-start-primary {
  color: #0f172a !important;
  text-shadow: none !important;
}

/* ---------- End Premium Training rainbow accents ---------- */


/* ---------- Short Media Replay tiers ---------- */

.otl-playback-short-replay-card
.otl-short-replay-tiers {
  display: grid;
  gap: 10px;
}


.otl-playback-short-replay-card
.otl-short-replay-tier {
  display: grid;
  grid-template-columns:
    minmax(230px, .7fr)
    minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}


.otl-playback-short-replay-card
.otl-short-replay-tier-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;

  color: #cbd5e1;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.3;
}


.otl-playback-short-replay-card
.otl-short-replay-tier-label
input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
  accent-color: var(--blue);
  cursor: pointer;
}


.otl-playback-short-replay-card
.otl-short-replay-tier
.otl-playback-value-row {
  margin: 0;
  transition: opacity 140ms ease;
}


.otl-playback-short-replay-card
.otl-short-replay-tier.is-disabled
.otl-playback-value-row {
  opacity: .46;
}


@media (max-width: 620px) {
  .otl-playback-short-replay-card
  .otl-short-replay-tier {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ---------- Playback media hierarchy refinements ---------- */

/*
  Video Segmentation and Short Media Replay are peer settings,
  so keep them side by side on wider layouts.
*/
.game-settings-card
[data-settings-group="playback"]
.otl-playback-segmentation-card,

.game-settings-card
[data-settings-group="playback"]
.otl-playback-short-replay-card {
  grid-column: span 3 !important;
}


/*
  Segmentation row labels are subordinate control copy,
  matching Playback Restrictions rather than card headings.
*/
.game-settings-card
[data-settings-group="playback"]
.otl-playback-segmentation-controls
> .otl-playback-flat-control
> strong {
  color: #cbd5e1 !important;
  font-size: .82rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}


/* Two-column playback layout at tablet widths. */
@media (max-width: 1000px) {
  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-segmentation-card,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-short-replay-card {
    grid-column: span 1 !important;
  }
}


/* Stack them only on narrow screens. */
@media (max-width: 700px) {
  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-segmentation-card,

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-short-replay-card {
    grid-column: 1 / -1 !important;
  }
}


/* ---------- Playback Rules compact two-row desktop layout ---------- */

/*
  Wide desktop:

  Row 1
  Light Streak 25% | Light Probability 50% | Playback Restrictions 25%

  Row 2
  Video Segmentation 33% | Short Media Replay 42% | Media Repeats 25%
                                                   | Session Timer

  Only horizontal allocation changes here.
  Existing typography, padding and control sizing are preserved.
*/
@media (min-width: 1201px) {
  .game-settings-card
  .game-settings-subgroup[data-settings-group="playback"]
  .game-settings-subgrid.otl-playback-layout {
    grid-template-columns:
      repeat(12, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
  }


  /* Row 1 */

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-streak-card {
    grid-column: 1 / span 3 !important;
    grid-row: 1 !important;
  }

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-probability-card {
    grid-column: 4 / span 6 !important;
    grid-row: 1 !important;
  }

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-restrictions-card {
    grid-column: 10 / span 3 !important;
    grid-row: 1 !important;
  }


  /* Row 2 */

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-segmentation-card {
    grid-column: 1 / span 4 !important;
    grid-row: 2 / span 3 !important;
  }

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-short-replay-card {
    grid-column: 5 / span 5 !important;
    grid-row: 2 / span 3 !important;
  }

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-anatomy-card {
    grid-column: 10 / span 3 !important;
    grid-row: 2 !important;
  }

  .game-settings-card
  [data-settings-group="playback"]
  .otl-repeat-rules-setting {
    grid-column: 10 / span 3 !important;
    grid-row: 3 !important;
  }

  .game-settings-card
  [data-settings-group="playback"]
  .otl-playback-timer-card {
    grid-column: 10 / span 3 !important;
    grid-row: 4 !important;
  }
}

/* ---------- Top-level accordion edge alignment ---------- */

/*
  Top-level accordion summaries should sit flush against the card shell.
  Their content areas provide their own internal padding.
*/
details[data-section-header-icon] {
  padding: 0 !important;
  overflow: hidden !important;
}

details[data-section-header-icon] > .settings-summary {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

details[data-section-header-icon] > .settings-content {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}