/* ============================================
 * Magic Darkroom · Onboarding (spotlight tour)
 *
 * Structure (built by onboarding.js):
 *   .md-onboard[data-open]
 *     .md-onboard__veil    (dim + blur, clip-path hole)
 *     .md-onboard__ring    (glowing border around the hole)
 *     .md-onboard__catch   (transparent click swallower)
 *     .md-onboard__coach[data-pos][data-typing]
 *       .md-onboard__clip  (blob card)
 *         .md-onboard__mascot
 *         .md-onboard__title
 *         .md-onboard__body
 *         .md-onboard__dots
 *         .md-onboard__footer
 *           .md-onboard__skip
 *           .md-onboard__nav (.md-onboard__back + next)
 *
 * Plus .md-help-fab — the "?" re-watch button (placed by the page
 * next to 麻薯; look defined here, offsets set per page).
 * ============================================ */

/* ---- Root container ---- */
.md-onboard {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  pointer-events: none;
}
.md-onboard[data-open="true"] {
  display: block;
}

/* ---- Dimmed + blurred veil with a punched spotlight hole ---- */
.md-onboard__veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(12, 9, 7, 0.62);
  -webkit-backdrop-filter: blur(5px) saturate(0.92);
  backdrop-filter: blur(5px) saturate(0.92);
  animation: md-fade-in var(--dur-normal, 0.25s) ease;
}
/* Fallback when clip-path:path() is unsupported — slightly darker, no hole;
   the ring still indicates the target. */
.md-onboard__veil[data-noclip="true"] {
  background: rgba(12, 9, 7, 0.5);
}

/* ---- Glowing ring around the spotlight ---- */
.md-onboard__ring {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 2px var(--c-mochi),
    0 0 0 6px var(--c-mochi-soft),
    0 0 30px 10px var(--c-mochi-soft);
  transition: opacity 0.25s ease;
}
.md-onboard__ring::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--c-mochi);
  animation: md-onboard-pulse 2.1s ease-in-out infinite;
}
@keyframes md-onboard-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%      { transform: scale(1.035); opacity: 0.08; }
}

/* ---- Click swallower (tour is button-driven) ---- */
.md-onboard__catch {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: auto;
  background: transparent;
}

/* ---- Coach card ---- */
.md-onboard__coach {
  position: fixed;
  z-index: 4;
  pointer-events: auto;
  width: 360px;
  max-width: calc(100vw - 28px);
  filter: drop-shadow(0 18px 40px rgba(20, 14, 8, 0.45));
}
.md-onboard[data-open="true"] .md-onboard__clip {
  animation: md-onboard-pop 0.34s var(--ease-pop, cubic-bezier(0.2, 0.9, 0.3, 1.3));
}
@keyframes md-onboard-pop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Blob card ---- */
.md-onboard__clip {
  clip-path: url(#md-modal-clip);
  /* Extra bottom room lifts the footer buttons clear of the blob's
     inward-curving bottom corners (otherwise they read as cramped). */
  padding: 30px 34px 30px;
  background: var(--c-bg-content);
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---- Mascot area ---- */
.md-onboard__mascot {
  width: 104px;
  height: 104px;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.md-onboard__mascot .md-mascot-wrap {
  width: 100%;
  height: 100%;
}

/* ---- Title ---- */
.md-onboard__title {
  font-size: 21px;
  font-weight: 800;
  color: var(--c-text-h);
  margin-bottom: 8px;
}

/* ---- Body (typewriter text, no caret) ---- */
.md-onboard__body {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--c-text-2);
  min-height: 52px;
  margin-bottom: 16px;
  max-width: 320px;
  white-space: pre-line;
}

/* ---- Step dots ---- */
.md-onboard__dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.md-onboard__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-line-soft);
  transition: all var(--dur-normal, 0.25s) var(--ease-standard);
}
.md-onboard__dot--active {
  background: var(--c-mochi);
  transform: scale(1.3);
}
.md-onboard__dot--done {
  background: var(--c-mochi-soft);
}

/* ---- Footer ---- */
.md-onboard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  /* Inset the row so 跳过 / 开始探索 pull toward center instead of sitting
     against the blob's inward-curving side edges. */
  padding: 0 18px;
}
.md-onboard__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Skip = quiet text button */
.md-onboard__skip.md-btn {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--c-text-3);
  padding: 6px 8px;
}
.md-onboard__skip.md-btn:hover {
  background: transparent;
  color: var(--c-text-2);
  transform: none;
}

/* ============================================
 * Story / intro variants (the "what is this?" tour)
 * ============================================ */
.md-onboard__coach[data-variant="story"],
.md-onboard__coach[data-variant="hero-q"] {
  width: 432px;
}
.md-onboard__coach[data-variant="story"] .md-onboard__clip,
.md-onboard__coach[data-variant="hero-q"] .md-onboard__clip {
  /* Hard ceiling so the card itself never exceeds the screen. Content is
     sized (esp. the photo, below) to stay under this, so no scroll appears. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Big centered question for the opening step */
.md-onboard__coach[data-variant="hero-q"] .md-onboard__title {
  font-size: 27px;
  line-height: 1.25;
  background: linear-gradient(120deg, var(--c-mochi-deep), var(--c-mochi));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}

/* ---- Extra HTML slot (lists / mission line) ---- */
.md-onboard__extra:empty {
  display: none;
}
.md-onboard__extra {
  width: 100%;
  margin-bottom: 14px;
}
.md-onboard__lede {
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.6;
  color: var(--c-text-2);
  margin-bottom: 12px;
}
.md-onboard__lede b {
  color: var(--c-mochi-deep);
}

/* ---- ❌ / ✅ feature lists (staggered fade-in) ---- */
.md-onboard__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  width: 100%;
}
.md-onboard__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-text);
  padding: 9px 13px;
  border-radius: 13px;
  opacity: 0;
  transform: translateY(8px);
  animation: md-list-in 0.42s var(--ease-pop, cubic-bezier(0.2, 0.9, 0.3, 1.3)) forwards;
}
.md-onboard__list li:nth-child(1) { animation-delay: 0.10s; }
.md-onboard__list li:nth-child(2) { animation-delay: 0.24s; }
.md-onboard__list li:nth-child(3) { animation-delay: 0.38s; }
.md-onboard__list li:nth-child(4) { animation-delay: 0.52s; }
.md-onboard__li-ic {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1.5;
}
.md-onboard__list--bad li {
  background: rgba(208, 74, 62, 0.09);
}
.md-onboard__list--good li {
  background: rgba(54, 156, 94, 0.11);
}
@keyframes md-list-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- "魔法冲洗" highlight with an "AI" hover tooltip ---- */
.md-magic {
  position: relative;
  font-weight: 800;
  color: var(--c-mochi-deep);
  background: linear-gradient(transparent 58%, var(--c-mochi-soft) 58%);
  padding: 0 3px;
  border-radius: 4px;
  cursor: help;
}
.md-magic[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%) translateY(4px);
  background: var(--c-mochi-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.md-magic[data-tip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--c-mochi-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.md-magic:hover::after,
.md-magic:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Photo slot + "develop" reveal ---- */
.md-onboard__media[hidden] {
  display: none;
}
.md-onboard__media {
  width: 100%;
  margin-bottom: 14px;
}
.md-onboard__photo {
  position: relative;
  /* Bound the photo by viewport height (so the whole card always fits with
     no scroll), and derive width from the cover's own ratio to avoid leaving
     side gaps. aspect-ratio matches prompts/fuji-film-portrait/cover.png. */
  height: clamp(160px, 32vh, 300px);
  aspect-ratio: 941 / 1672;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(20, 14, 8, 0.28);
}
.md-onboard__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 1.5s ease, transform 1.5s ease;
}
.md-onboard__photo[data-blur="true"] img {
  filter: blur(17px) saturate(1.08);
  transform: scale(1.08);
}
.md-onboard__photo[data-blur="false"] img {
  filter: blur(0);
  transform: scale(1);
}
/* subtle red darkroom wash that lifts as the photo develops */
.md-onboard__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(180, 40, 30, 0.18), rgba(20, 8, 6, 0.4));
  opacity: 0;
  transition: opacity 1.3s ease;
  pointer-events: none;
}
.md-onboard__photo[data-blur="true"]::after {
  opacity: 1;
}
.md-onboard__caption {
  margin-top: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-text-3);
}

/* ============================================
 * "?" re-watch button (look only; the page sets
 * its absolute position next to the mascot)
 * ============================================ */
.md-help-fab {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--c-bg-content);
  color: var(--c-mochi-deep);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 0 var(--sh-input, rgba(0, 0, 0, 0.12)), 0 5px 12px rgba(20, 14, 8, 0.16);
  transition: transform 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard);
}
@media (hover: hover) {
  .md-help-fab:hover {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 4px 0 0 var(--sh-input, rgba(0, 0, 0, 0.12)), 0 8px 16px rgba(20, 14, 8, 0.22);
  }
}
.md-help-fab:active {
  transform: scale(0.94);
}

/* ============================================
 * "?" chooser menu (two entry points)
 *   .md-help (wrapper, page positions it)
 *     .md-help-fab
 *     .md-help-menu[data-open]
 *       .md-help-menu__title
 *       button.md-help-menu__item ×2
 * ============================================ */
.md-help {
  position: relative;
  display: inline-flex;
}
.md-help-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 250px;
  z-index: 60;
  background: var(--c-bg-content);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 14px 34px rgba(20, 14, 8, 0.28), 0 3px 0 0 var(--sh-input, rgba(0, 0, 0, 0.12));
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.9) translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s var(--ease-standard),
    transform 0.18s var(--ease-pop, cubic-bezier(0.2, 0.9, 0.3, 1.3));
}
.md-help-menu[data-open="true"] {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.md-help-menu__title {
  font-size: 12px;
  font-weight: 800;
  color: var(--c-text-3);
  padding: 2px 6px 9px;
  text-align: left;
}
.md-help-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: var(--c-bg);
  cursor: pointer;
  border-radius: 13px;
  padding: 11px 13px;
  margin-bottom: 8px;
  transition: transform 0.14s var(--ease-standard), background 0.14s ease;
}
.md-help-menu__item:last-child {
  margin-bottom: 0;
}
@media (hover: hover) {
  .md-help-menu__item:hover {
    background: var(--c-mochi-soft);
    transform: translateX(2px);
  }
}
.md-help-menu__item-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--c-text-h);
}
.md-help-menu__item-sub {
  font-size: 12px;
  color: var(--c-text-2);
  margin-top: 2px;
}

/* ============================================
 * Mobile: pin the card to top / bottom / center
 * ============================================ */
@media (max-width: 640px) {
  .md-onboard__coach {
    width: auto;
    max-width: none;
    left: 14px;
    right: 14px;
  }
  .md-onboard__coach[data-pos="bottom"] {
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .md-onboard__coach[data-pos="top"] {
    bottom: auto;
    top: calc(14px + env(safe-area-inset-bottom));
  }
  .md-onboard__coach[data-pos="center"] {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .md-onboard__clip {
    padding: 24px 26px 24px;
  }
  .md-onboard__footer {
    padding: 0 16px;
  }
  .md-onboard__mascot {
    width: 88px;
    height: 88px;
  }
  .md-onboard__title {
    font-size: 19px;
  }
  .md-onboard__body {
    font-size: 14.5px;
    min-height: 46px;
  }
  /* Story/intro cards collapse to the same full-width sheet as the rest */
  .md-onboard__coach[data-variant="story"],
  .md-onboard__coach[data-variant="hero-q"] {
    width: auto;
  }
  .md-onboard__coach[data-variant="hero-q"] .md-onboard__title {
    font-size: 22px;
  }
  .md-onboard__photo {
    height: clamp(150px, 30vh, 260px);
  }
  .md-help-menu {
    width: 244px;
    max-width: calc(100vw - 28px);
  }
}

/* ============================================
 * Reduced motion: drop the pulse + pop
 * ============================================ */
@media (prefers-reduced-motion: reduce) {
  .md-onboard__veil { animation: none; }
  .md-onboard__ring::after { animation: none; opacity: 0.35; }
  .md-onboard[data-open="true"] .md-onboard__clip { animation: none; }
  .md-onboard__list li { animation: none; opacity: 1; transform: none; }
  .md-onboard__photo img { transition: none; }
  .md-onboard__photo::after { transition: none; }
}