/* exp-activities.css
   Stitch "Soft-Modernist" reskin for the IN-GAME ACTIVITY + DIALOGUE screens.

   This complements experience.css (the shipped in-game revamp: light "chrome"
   hub on .today-home, dark "immersive" story on .saga-path). It is loaded AFTER
   experience.css so its additive overrides win on ties, and it never edits the
   per-pack theme blocks in themes.css.

   Two families of surface, exactly per the mocks:

     - LIGHT chrome  (quiz, ordering, hidden-carvings, spotter, reward/XP)
         warm off-white #F9F9F7 page, white cards, slate ink #1E293B.
     - DARK immersive (character conversation / choice)
         deep slate base already set by experience.css on .saga-path; here we add
         the Stitch portrait ring, uppercase accent eyebrow, and pill reply
         options that complement it.

   The ACCENT is the app's pack-injected var(--amber) fill with var(--on-amber)
   readable ink, so every pack recolours itself (never a hard-coded accent).
   SUCCESS is green (#16a34a family), NEVER the accent. A wrong answer is a gentle
   amber-tint "try again", never a harsh red.

   Real component roots targeted (verified in the JS, not guessed):
     - Quiz / multiple choice : js/puzzles/multiple-choice.js -> .puzzle.puzzle-mc
     - Ordering / trail marks : js/puzzles/drag-drop.js       -> .puzzle.puzzle-dd
     - Hidden carvings / tap  : js/puzzles/image-tap.js       -> .puzzle.puzzle-it
     - Spotter checklist      : css/puzzle.css + runner.js     -> .spotter
     - Daily question shell   : js/chapters/runner.js          -> .sub-body.daily
     - Reward / XP moment     : js/components/rewards-services.js (rewards.css)
     - Character conversation : js/chapters/runner.js runChoice -> .saga-path.saga-choice

   Scope: keyed on those in-game component roots and on #screen:has(...). Platform
   screens carry .platform-screen and never contain .puzzle / .spotter / .daily,
   so nothing here can reach them. Everything is additive and robust when a class
   is rendered outside a specific theme wrapper. No long dashes anywhere. */

/* ------------------------------------------------------------------ *
 * Shared Soft-Modernist tokens, scoped to the in-game activity roots.
 * The accent + its readable ink are read from the pack, like .btn-amber.
 * ------------------------------------------------------------------ */
.puzzle,
.spotter,
.sub-body.daily,
.rewards-celebrate-stage,
.rewards-chest-open,
.rewards-surprise-card {
  --exp-a-surface: #F9F9F7;
  --exp-a-surface-variant: #F1F1EF;
  --exp-a-card: #FFFFFF;
  --exp-a-ink: #1E293B;
  --exp-a-muted: #64748B;
  --exp-a-hairline: #E2E8F0;
  --exp-a-accent: var(--amber, #f59e0b);
  --exp-a-on-accent: var(--on-amber, #2a1a00);
  --exp-a-success: #16a34a;
  --exp-a-success-tint: #DCFCE7;
  --exp-a-success-ring: #16a34a;
  --exp-a-try-bg: #FEF3C7;
  --exp-a-try-border: #F59E0B;
  --exp-a-try-ink: #92400E;
  --exp-a-radius: 24px;
  --exp-a-pill: 9999px;
  --exp-a-lift: 0 4px 20px rgba(0, 0, 0, 0.05);
  --exp-a-tap: 44px;
}

/* ================================================================== *
 *  LIGHT CHROME  ~  warm off-white page + light back bar
 * ================================================================== */

/* Fill the whole activity scroll area warm off-white, so no dark app surface
   bleeds around the light cards on any pack or palette. These :has() targets
   structurally cannot match a .platform-screen (it has no puzzle/spotter/daily). */
#screen:has(.puzzle),
#screen:has(.spotter),
#screen:has(.sub-body.daily) {
  background: var(--exp-a-surface, #F9F9F7);
}

/* Back bar reads as quiet light chrome: slate title, hairline rule. */
#screen:has(.puzzle) .sub-bar,
#screen:has(.spotter) .sub-bar,
#screen:has(.sub-body.daily) .sub-bar {
  border-bottom: 1px solid var(--exp-a-hairline, #E2E8F0);
}
#screen:has(.puzzle) .sub-title,
#screen:has(.spotter) .sub-title,
#screen:has(.sub-body.daily) .sub-title {
  color: var(--exp-a-ink, #1E293B);
  font-family: var(--font-head);
}
/* Secondary "Back" and small action chips: white pill with a hairline outline. */
#screen:has(.puzzle) .sub-bar .btn-small,
#screen:has(.spotter) .btn-small,
#screen:has(.sub-body.daily) .btn-small {
  background: var(--exp-a-card, #FFFFFF);
  color: var(--exp-a-ink, #1E293B);
  border: 1px solid var(--exp-a-hairline, #E2E8F0);
  border-radius: var(--exp-a-pill, 9999px);
  min-height: var(--exp-a-tap, 44px);
  box-shadow: var(--exp-a-lift, 0 4px 20px rgba(0, 0, 0, 0.05));
}

/* One clear primary action per screen: the big accent pill. Applies to the daily
   "Answer" button and any puzzle-hosted primary control. */
#screen:has(.puzzle) .btn-amber,
#screen:has(.spotter) .btn-amber,
#screen:has(.sub-body.daily) .btn-amber {
  background: var(--exp-a-accent, #f59e0b);
  color: var(--exp-a-on-accent, #2a1a00);
  border: none;
  border-radius: var(--exp-a-pill, 9999px);
  min-height: 56px;
  font-family: var(--font-head);
  font-weight: 700;
  box-shadow: var(--exp-a-lift, 0 4px 20px rgba(0, 0, 0, 0.05));
}

/* ================================================================== *
 *  QUIZ / MULTIPLE CHOICE   ->  .puzzle.puzzle-mc
 * ================================================================== */

.puzzle-mc { max-width: 640px; margin: 0 auto; }

/* Big characterful question title. The gold parchment box from puzzle.css is
   dropped for a clean slate headline, exactly like the mock. */
.puzzle-mc .puzzle-prompt {
  background: none;
  border: none;
  padding: 6px 4px 0;
  margin-bottom: 22px;
  color: var(--exp-a-ink, #1E293B);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  text-align: center;
}

.puzzle-mc .mc-options { gap: 14px; }

/* Answer options as full-width pill rows: white with a hairline outline and a
   trailing hollow radio, high contrast on the off-white page. */
.puzzle-mc .mc-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--exp-a-card, #FFFFFF);
  color: var(--exp-a-ink, #1E293B);
  border: 1px solid var(--exp-a-hairline, #E2E8F0);
  border-radius: var(--exp-a-pill, 9999px);
  padding: 16px 22px;
  min-height: var(--exp-a-tap, 44px);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  box-shadow: var(--exp-a-lift, 0 4px 20px rgba(0, 0, 0, 0.05));
  transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.puzzle-mc .mc-option::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--exp-a-hairline, #E2E8F0);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.puzzle-mc .mc-option:hover,
.puzzle-mc .mc-option:focus-visible {
  border-color: var(--exp-a-accent, #f59e0b);
  outline: none;
}
.puzzle-mc .mc-option:active { transform: scale(0.99); }

/* Correct = green tint + green ring + a solid green check, never the accent. */
.puzzle-mc .mc-option.correct {
  background: var(--exp-a-success-tint, #DCFCE7);
  border-color: var(--exp-a-success-ring, #16a34a);
  color: var(--exp-a-ink, #1E293B);
}
.puzzle-mc .mc-option.correct::after {
  background: var(--exp-a-success, #16a34a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  border-color: var(--exp-a-success-ring, #16a34a);
}

/* Wrong = a gentle amber-tint "try again", NO harsh red. The JS does not add a
   .wrong class today (it shows the .puzzle-retry line instead), but this is kept
   so a future marked-wrong option reads softly if the hook is added. */
.puzzle-mc .mc-option.wrong {
  background: var(--exp-a-try-bg, #FEF3C7);
  border-color: var(--exp-a-try-border, #F59E0B);
  color: var(--exp-a-try-ink, #92400E);
  animation: none;
}
.puzzle-mc .mc-option.wrong::after {
  border-color: var(--exp-a-try-border, #F59E0B);
  background: transparent;
}

/* The retry line the component actually shows (.puzzle-retry) becomes the soft
   "Try again" hint with a retry glyph, on the light quiz page. Overrides the red
   pill from puzzle.css. */
.puzzle-mc .puzzle-retry,
.sub-body.daily .puzzle-retry {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--exp-a-try-ink, #92400E);
  background: var(--exp-a-try-bg, #FEF3C7);
  border: 1px solid var(--exp-a-try-border, #F59E0B);
  border-radius: 16px;
  padding: 12px 16px;
  font-style: normal;
  font-weight: 600;
}
.puzzle-mc .puzzle-retry::before,
.sub-body.daily .puzzle-retry::before {
  content: "\21BB"; /* clockwise open circle arrow: the "try again" glyph */
  font-size: 18px;
  line-height: 1;
  color: var(--exp-a-try-border, #F59E0B);
}
.puzzle-mc .puzzle-retry.hidden,
.sub-body.daily .puzzle-retry.hidden { display: none; }

/* ================================================================== *
 *  ORDERING / TRAIL MARKS   ->  .puzzle.puzzle-dd
 * ================================================================== */

.puzzle-dd { max-width: 640px; margin: 0 auto; }

.puzzle-dd .puzzle-prompt {
  background: none;
  border: none;
  padding: 6px 4px 0;
  margin-bottom: 20px;
  color: var(--exp-a-ink, #1E293B);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
}

/* Symbol tiles = rounded white task cards with a gentle lift, per the mock. */
.puzzle-dd .dd-items {
  gap: 14px;
  justify-content: center;
  margin-top: 8px;
}
.puzzle-dd .dd-item {
  background: var(--exp-a-card, #FFFFFF);
  color: var(--exp-a-ink, #1E293B);
  border: 1px solid var(--exp-a-hairline, #E2E8F0);
  border-radius: 18px;
  padding: 16px 18px;
  min-width: var(--exp-a-tap, 44px);
  min-height: var(--exp-a-tap, 44px);
  font-weight: 700;
  box-shadow: var(--exp-a-lift, 0 4px 20px rgba(0, 0, 0, 0.05));
}
.puzzle-dd .dd-item:hover,
.puzzle-dd .dd-item:focus-visible {
  border-color: var(--exp-a-accent, #f59e0b);
  outline: none;
}
.puzzle-dd .dd-item.locked { opacity: 0.4; }

/* Drop slots = rounded dashed placeholders that glow accent when ready. */
.puzzle-dd .dd-targets { gap: 14px; margin-bottom: 20px; }
.puzzle-dd .dd-target {
  border: 2px dashed color-mix(in srgb, var(--exp-a-accent, #f59e0b) 55%, #E2E8F0);
  border-radius: 18px;
  background: var(--exp-a-surface-variant, #F1F1EF);
  color: var(--exp-a-muted, #64748B);
}
/* Correctly placed = green success, never the accent. */
.puzzle-dd .dd-target.filled {
  border-style: solid;
  border-color: var(--exp-a-success-ring, #16a34a);
  background: var(--exp-a-success-tint, #DCFCE7);
}
.puzzle-dd .dd-target-label { color: var(--exp-a-muted, #64748B); }
.puzzle-dd .dd-placed { color: var(--exp-a-success, #16a34a); font-weight: 800; }

/* The drag ghost picks up the same white-card look while it travels. */
.dd-ghost {
  background: var(--exp-a-card, #FFFFFF);
  color: var(--exp-a-ink, #1E293B);
  border: 1px solid var(--exp-a-accent, #f59e0b);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

/* ================================================================== *
 *  HIDDEN CARVINGS / TAP   ->  .puzzle.puzzle-it
 * ================================================================== */

.puzzle-it { max-width: 640px; margin: 0 auto; }

.puzzle-it .puzzle-prompt {
  background: none;
  border: none;
  padding: 6px 4px 0;
  margin-bottom: 18px;
  color: var(--exp-a-ink, #1E293B);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
}

/* The image is a big friendly 24px card with a gentle lift. */
.puzzle-it .it-stage {
  border-radius: var(--exp-a-radius, 24px);
  box-shadow: var(--exp-a-lift, 0 4px 20px rgba(0, 0, 0, 0.05));
}
/* A missing image falls back to a soft neutral placeholder, not the dark hatch. */
.puzzle-it .it-stage.it-fallback {
  background: var(--exp-a-surface-variant, #F1F1EF);
}

/* Glowing accent tap targets: a soft accent ring with a filled dot, pulsing
   gently to invite the tap (held still under reduced motion, below). */
.puzzle-it .it-hotspot {
  border: 3px solid var(--exp-a-accent, #f59e0b);
  background:
    radial-gradient(circle at 50% 50%,
      var(--exp-a-card, #FFFFFF) 0 22%,
      var(--exp-a-accent, #f59e0b) 26% 46%,
      transparent 52%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--exp-a-accent, #f59e0b) 22%, transparent);
  animation: exp-hotspot-pulse 2s ease-in-out infinite;
}
/* Found = calm green check, never the accent. */
.puzzle-it .it-hotspot.found {
  border-color: var(--exp-a-success-ring, #16a34a);
  background: var(--exp-a-card, #FFFFFF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 52% no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  animation: none;
}
@keyframes exp-hotspot-pulse {
  0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--exp-a-accent, #f59e0b) 26%, transparent); }
  50%      { box-shadow: 0 0 0 11px color-mix(in srgb, var(--exp-a-accent, #f59e0b) 6%, transparent); }
}

/* ================================================================== *
 *  SPOTTER CHECKLIST   ->  .spotter   (light rounded task cards + counter chip)
 * ================================================================== */

.spotter { max-width: 680px; margin: 0 auto; color: var(--exp-a-ink, #1E293B); }
.spotter-head { align-items: center; margin-bottom: 6px; }

/* Found-counter chip: a white pill with an accent star and accent count. */
.spotter-progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--exp-a-accent, #f59e0b);
  background: var(--exp-a-card, #FFFFFF);
  border: 1px solid var(--exp-a-hairline, #E2E8F0);
  border-radius: var(--exp-a-pill, 9999px);
  padding: 8px 14px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--exp-a-lift, 0 4px 20px rgba(0, 0, 0, 0.05));
}
.spotter-progress::before {
  content: "\2605"; /* star */
  color: var(--exp-a-accent, #f59e0b);
  font-size: 14px;
  line-height: 1;
}

/* Task rows = rounded white cards with a coloured status rail. */
.spotter .spot-card {
  background: var(--exp-a-card, #FFFFFF);
  border: 1px solid var(--exp-a-hairline, #E2E8F0);
  border-left: 6px solid var(--exp-a-accent, #f59e0b);
  border-radius: 18px;
  box-shadow: var(--exp-a-lift, 0 4px 20px rgba(0, 0, 0, 0.05));
}
.spotter .spot-card.bonus { border-left-color: var(--exp-a-accent, #f59e0b); }
.spotter .spot-card.pending { border-left-color: color-mix(in srgb, var(--exp-a-accent, #f59e0b) 60%, #E2E8F0); }
/* Confirmed = green success rail + soft green wash. */
.spotter .spot-card.confirmed {
  border-left-color: var(--exp-a-success-ring, #16a34a);
  background: var(--exp-a-success-tint, #DCFCE7);
}
.spotter .spot-check { color: var(--exp-a-success, #16a34a); }
.spotter .spot-label { color: var(--exp-a-ink, #1E293B); }
.spotter .spot-hint { color: var(--exp-a-muted, #64748B); }
.spotter .spot-geo { color: var(--exp-a-accent, #f59e0b); }
.spotter .spot-photo-hint { color: var(--exp-a-success, #16a34a); }
.spotter .spot-await { color: var(--exp-a-muted, #64748B); }

/* ================================================================== *
 *  DAILY QUESTION shell (open-text fallback)   ->  .sub-body.daily
 * ================================================================== */

.sub-body.daily { color: var(--exp-a-ink, #1E293B); }
.sub-body.daily .daily-prompt {
  color: var(--exp-a-ink, #1E293B);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 16px;
}
.sub-body.daily .daily-input {
  width: 100%;
  background: var(--exp-a-card, #FFFFFF);
  color: var(--exp-a-ink, #1E293B);
  border: 1px solid var(--exp-a-hairline, #E2E8F0);
  border-radius: 16px;
  padding: 14px 16px;
  min-height: var(--exp-a-tap, 44px);
  font-family: var(--font-body);
  font-size: 16px;
}
.sub-body.daily .daily-input:focus-visible {
  outline: none;
  border-color: var(--exp-a-accent, #f59e0b);
}
.sub-body.daily .daily-feedback { color: var(--exp-a-accent, #f59e0b); }
.sub-body.daily .daily-simplify-btn {
  color: var(--exp-a-ink, #1E293B);
  border: 1px solid var(--exp-a-hairline, #E2E8F0);
  background: var(--exp-a-card, #FFFFFF);
  border-radius: var(--exp-a-pill, 9999px);
}
.sub-body.daily .daily-simpler {
  color: var(--exp-a-ink, #1E293B);
  background: var(--exp-a-surface-variant, #F1F1EF);
  border-left: 3px solid var(--exp-a-accent, #f59e0b);
}

/* ================================================================== *
 *  REWARD / XP EARNED moment   ->  rewards-services.js celebration DOM
 *  Celebratory white card, accent number/badge, one accent continue pill.
 * ================================================================== */

.rewards-celebrate-stage,
.rewards-chest-open,
.rewards-surprise-card {
  background: var(--exp-a-card, #FFFFFF);
  color: var(--exp-a-ink, #1E293B);
  border-radius: var(--exp-a-radius, 24px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  padding: 24px;
}

/* The celebratory headline banner reads as a soft-amber XP-style chip: gentle
   #FEF3C7 field, accent ink, rounded pill. */
.rewards-celebrate-banner {
  display: inline-block;
  background: var(--exp-a-try-bg, #FEF3C7);
  color: color-mix(in srgb, var(--exp-a-accent, #f59e0b) 78%, #7c4a00);
  border-radius: var(--exp-a-pill, 9999px);
  padding: 12px 22px;
  font-family: var(--font-head);
}

/* Accent number / label for the found-reward value. */
.rewards-chest-label { color: var(--exp-a-accent, #f59e0b); }
.rewards-surprise-text { color: var(--exp-a-ink, #1E293B); }
.rewards-surprise-cosmetic { color: var(--exp-a-accent, #f59e0b); }

/* One clear continue pill. */
.rewards-chest-btn.btn-amber {
  background: var(--exp-a-accent, #f59e0b);
  color: var(--exp-a-on-accent, #2a1a00);
  border: none;
  border-radius: var(--exp-a-pill, 9999px);
  min-height: 56px;
  box-shadow: var(--exp-a-lift, 0 4px 20px rgba(0, 0, 0, 0.05));
}

/* ================================================================== *
 *  CHARACTER CONVERSATION / CHOICE (DARK)  ->  .saga-path.saga-choice
 *  Complements experience.css (which already darkens .saga-path, styles
 *  .saga-scene as the translucent panel, the accent eyebrow, and CTAs).
 *  Here we add the Stitch portrait ring, the big name headline, and the
 *  pill reply options (accent primary + ghost outline).
 * ================================================================== */

/* Portrait: a circular bust with a soft accent ring + glow, centred. */
.saga-path .saga-choice-portrait {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(248, 250, 252, 0.06);
  border: 3px solid color-mix(in srgb, var(--amber, #f59e0b) 85%, transparent);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--amber, #f59e0b) 16%, transparent),
    0 14px 34px rgba(0, 0, 0, 0.5);
}
/* The neutral silhouette fallback keeps the same ring. */
.saga-path .saga-portrait-fallback.saga-choice-portrait {
  display: grid;
  place-items: center;
  color: rgba(248, 250, 252, 0.5);
  padding: 22px;
}

/* Uppercase accent eyebrow (experience.css already colours it accent). */
.saga-path.saga-choice .saga-scene-eyebrow {
  text-align: center;
  font-weight: 800;
  letter-spacing: 2.5px;
}
/* Big characterful name / prompt headline in light ink. */
.saga-path.saga-choice .saga-scene-title {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.12;
  color: var(--exp-on-dark, #F8FAFC);
  margin: 4px 0 20px;
}

/* Reply options as Stitch pills. Keep the deliberate two-path semantic from
   experience.css: path A stays a quiet ghost outline, path B stays the accent
   primary (one clear primary action). */
.saga-path .saga-options { gap: 14px; }
.saga-path .saga-option {
  align-items: center;
  text-align: center;
  border-radius: var(--exp-a-pill, 9999px);
  padding: 16px 22px;
  min-height: var(--exp-a-tap, 44px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: transform 0.12s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
/* Ghost outline (path A): translucent on the dark base, light ink. */
.saga-path .saga-option-a {
  background: rgba(248, 250, 252, 0.06);
  border: 1px solid rgba(248, 250, 252, 0.28);
  color: var(--exp-on-dark, #F8FAFC);
}
.saga-path .saga-option-a:hover,
.saga-path .saga-option-a:focus-visible {
  background: rgba(248, 250, 252, 0.12);
  filter: none;
}
/* Accent primary (path B): flat accent fill with its paired readable ink. */
.saga-path .saga-option-b {
  background: var(--amber, #f59e0b);
  border: 1px solid var(--amber, #f59e0b);
  color: var(--on-amber, #2a1a00);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.3),
    0 0 22px color-mix(in srgb, var(--amber, #f59e0b) 30%, transparent);
}
.saga-path .saga-option-b .saga-option-hint { color: var(--on-amber, #2a1a00); opacity: 0.85; }
.saga-path .saga-option:active { transform: translateY(1px); }

/* ================================================================== *
 *  Motion safety: hold every decorative animation this file adds.
 * ================================================================== */
body.reduce-motion .puzzle-it .it-hotspot,
body.reduce-motion .puzzle-mc .mc-option,
body.reduce-motion .saga-path .saga-option { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .puzzle-it .it-hotspot { animation: none !important; }
  .puzzle-mc .mc-option,
  .puzzle-mc .mc-option::after,
  .puzzle-dd .dd-target,
  .saga-path .saga-choice-portrait,
  .saga-path .saga-option { transition: none !important; }
}