:root {
  color-scheme: dark;
  --mb-bg: #191321;
  --mb-panel: #291e35;
  --mb-input: #201728;
  --mb-text: #fff4fa;
  --mb-muted: #d3bfdc;
  --mb-border: #503b60;
  --mb-pink: #ec4899;
  --mb-purple: #a855f7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, #45233c 0, transparent 45%),
    var(--mb-bg);
  color: var(--mb-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.7;
}

.mystery-shell {
  width: min(100% - 32px, 720px);
  margin: 0 auto;
  padding: 24px 0 64px;
}

.mystery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  font-size: 0.9rem;
}

.mystery-header a {
  color: var(--mb-text);
  text-decoration: none;
  padding: 8px 0;
}

.mystery-header span,
.mystery-eyebrow {
  color: var(--mb-muted);
}

h1,
h2,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 8px 0 12px;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  line-height: 1.25;
}

h2 {
  margin: 0 0 24px;
  font-size: 1.3rem;
}

.mystery-eyebrow {
  margin: 0;
  font-size: 0.9rem;
}

.mystery-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 28px 0;
  padding: 0;
}

.mystery-steps li {
  padding: 12px 8px;
  border: 1px solid var(--mb-border);
  border-radius: 12px;
  color: var(--mb-muted);
  text-align: center;
  font-size: 0.85rem;
}

.mystery-steps [aria-current="step"] {
  background: #ec48991a;
  border-color: var(--mb-pink);
  color: var(--mb-text);
}

.mystery-panel {
  padding: clamp(20px, 5vw, 36px);
  background: var(--mb-panel);
  border: 1px solid var(--mb-border);
  border-radius: 24px;
}

.mystery-field {
  margin: 0 0 24px;
  min-width: 0;
}

.mystery-field label,
.mystery-field legend {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

fieldset.mystery-field {
  padding: 0;
  border: 0;
}

.mystery-field legend {
  padding: 0;
}

#birthday-help {
  margin: 0 0 12px;
  color: var(--mb-muted);
  font-size: 0.9rem;
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--mb-border);
  border-radius: 12px;
  background: var(--mb-input);
  color: var(--mb-text);
}

input,
select {
  min-height: 48px;
}

textarea {
  min-height: 200px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #b9a6c3;
  opacity: 1;
}

:where(a, input, select, textarea, button, summary):focus-visible {
  outline: 3px solid #f9a8d4;
  outline-offset: 4px;
}

.mystery-date-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
}

.mystery-optional {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--mb-border);
  border-radius: 14px;
}

.mystery-optional summary {
  cursor: pointer;
  padding: 4px 0;
  font-weight: 600;
}

.mystery-optional[open] summary {
  margin-bottom: 20px;
}

.mystery-optional .mystery-field:last-child {
  margin-bottom: 0;
}

small {
  display: block;
  margin-top: 8px;
  color: var(--mb-muted);
  font-size: 0.85rem;
}

.mystery-notice {
  margin: 24px 0;
  color: var(--mb-muted);
  font-size: 0.9rem;
}

#mystery-status:empty {
  display: none;
}

.mystery-primary {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(110deg, #be185d, #7e22ce);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.mystery-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .mystery-header {
    margin-bottom: 28px;
  }

  .mystery-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mystery-panel {
    border-radius: 18px;
  }
}
[hidden] {
  display: none !important;
}

.mystery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.mystery-actions > button {
  flex: 1 1 180px;
  width: auto;
  min-height: 48px;
}

#design-back {
  padding: 12px 18px;
  border: 1px solid var(--mb-border);
  border-radius: 14px;
  background: var(--mb-input);
  color: var(--mb-text);
  cursor: pointer;
}

.mystery-design-summary {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--mb-border);
  border-radius: 14px;
  background: var(--mb-input);
}
.mystery-toggle {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
}

.mystery-toggle input[type="checkbox"] {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--mb-pink);
}

#balloon-fields,
#memory-fields,
#music-fields {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--mb-border);
  border-radius: 14px;
}

#balloon-fields label {
  margin-top: 16px;
}

input[type="file"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.mystery-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mystery-photo-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}

#music-fields audio {
  display: block;
  width: 100%;
  margin-top: 12px;
}
.mystery-preview-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.mystery-preview-controls > button,
#preview-restart {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--mb-border);
  border-radius: 12px;
  background: var(--mb-input);
  color: var(--mb-text);
  cursor: pointer;
  font: inherit;
}

.mystery-stage {
  margin: 20px 0;
  padding: 24px 16px;
  border: 1px solid var(--mb-border);
  border-radius: 18px;
  background: var(--mb-input);
}

.mystery-stage h3 {
  font-size: 1.4rem;
}

.mystery-story-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mystery-stage > .mystery-primary {
  margin-top: 24px;
}

.mystery-wish-cards {
  display: grid;
  gap: 12px;
}

.mystery-wish-cards button:disabled {
  opacity: 1;
  cursor: default;
}

.mystery-cake {
  margin: 16px 0;
  font-size: 5rem;
  text-align: center;
}

.mystery-reduced-motion *,
.mystery-reduced-motion *::before,
.mystery-reduced-motion *::after {
  animation: none !important;
  transition: none !important;
}
.mb-opening-art {
  display: grid;
  place-items: center;
  height: 230px;
  margin: 12px 0 28px;
  perspective: 700px;
  animation: mb-appear 650ms ease-out both;
}

.mb-art-shape {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--art-main);
  color: var(--art-accent);
  box-shadow: 0 20px 35px #0004;
}

.mb-art-mark {
  position: relative;
  z-index: 2;
  font-size: 2.4rem;
  line-height: 1;
}

/* Gift box */

.mb-art-box .mb-art-shape {
  width: 160px;
  height: 130px;
  border: 2px solid var(--art-accent);
  border-radius: 8px 8px 16px 16px;
  transform: rotateY(-14deg) rotateX(8deg);
}

.mb-art-box .mb-art-shape::before {
  content: "";
  position: absolute;
  top: -18px;
  left: -9px;
  right: -9px;
  height: 30px;
  border: 2px solid var(--art-accent);
  border-radius: 7px;
  background: var(--art-main);
  box-shadow: 0 6px 8px #0003;
}

.mb-art-box .mb-art-shape::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 24px;
  margin: auto;
  background: var(--art-accent);
  opacity: 0.6;
}

.mb-art-box .mb-art-mark {
  padding: 10px;
  border-radius: 50%;
  background: var(--art-main);
}

/* Envelope */

.mb-art-envelope .mb-art-shape {
  width: min(230px, 90%);
  height: 145px;
  border: 2px solid var(--art-accent);
  border-radius: 10px;
}

.mb-art-envelope .mb-art-shape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--art-accent);
  clip-path: polygon(0 0, 100% 0, 50% 62%);
  opacity: 0.8;
}

.mb-art-envelope .mb-art-mark {
  margin-top: 35px;
  padding: 12px;
  border-radius: 50%;
  background: var(--art-main);
}

/* Seal */

.mb-art-seal .mb-art-shape {
  width: 125px;
  height: 125px;
  border: 6px double var(--art-accent);
  border-radius: 50%;
  transform: rotate(-8deg);
}

.mb-art-seal .mb-art-mark {
  max-width: 100px;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 2rem;
}

.mb-opening-art[data-design="floral"] .mb-art-shape {
  outline: 2px dashed var(--art-accent);
  outline-offset: 6px;
}

.mb-opening-art[data-design="magic"] .mb-art-shape {
  box-shadow: 0 0 35px #a78bfa66;
}

.mb-opening-art[data-design="minimal"] .mb-art-shape {
  box-shadow: none;
}

@keyframes mb-appear {
  from {
    opacity: 0;
    translate: 0 18px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mb-opening-art {
    animation: none;
  }
}
/* Box lid lifts away */

.mb-art-box.mb-opening .mb-art-shape::before {
  animation: mb-lid-open 800ms ease-in-out forwards;
}

.mb-art-box.mb-opening .mb-art-mark {
  animation: mb-gift-glow 800ms ease forwards;
}

@keyframes mb-lid-open {
  to {
    transform: translateY(-65px) rotate(-18deg);
    opacity: 0;
  }
}

@keyframes mb-gift-glow {
  50% {
    box-shadow: 0 0 32px var(--art-accent);
  }

  to {
    transform: translateY(-12px);
  }
}

/* Envelope flap opens upward */

.mb-art-envelope .mb-art-shape::before {
  transform-origin: center top;
  backface-visibility: visible;
}

.mb-art-envelope.mb-opening .mb-art-shape::before {
  animation: mb-envelope-open 800ms ease forwards;
}

.mb-art-envelope.mb-opening .mb-art-mark {
  animation: mb-envelope-mark 800ms ease forwards;
}

@keyframes mb-envelope-open {
  to {
    transform: rotateX(170deg);
    opacity: 0.35;
  }
}

@keyframes mb-envelope-mark {
  to {
    transform: translateY(20px);
    opacity: 0;
  }
}

/* Seal splits into two pieces */

.mb-art-seal.mb-opening .mb-art-shape {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.mb-art-seal.mb-opening .mb-art-shape::before,
.mb-art-seal.mb-opening .mb-art-shape::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 6px double var(--art-accent);
  border-radius: 50%;
  background: var(--art-main);
}

.mb-art-seal.mb-opening .mb-art-shape::before {
  clip-path: polygon(0 0, 56% 0, 45% 45%, 58% 70%, 45% 100%, 0 100%);
  animation: mb-seal-left 800ms ease forwards;
}

.mb-art-seal.mb-opening .mb-art-shape::after {
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 45% 100%, 58% 70%, 45% 45%);
  animation: mb-seal-right 800ms ease forwards;
}

.mb-art-seal.mb-opening .mb-art-mark {
  animation: mb-seal-mark 800ms ease forwards;
}

@keyframes mb-seal-left {
  to {
    transform: translate(-35px, 20px) rotate(-25deg);
    opacity: 0;
  }
}

@keyframes mb-seal-right {
  to {
    transform: translate(35px, 20px) rotate(25deg);
    opacity: 0;
  }
}

@keyframes mb-seal-mark {
  to {
    opacity: 0;
    transform: scale(0.7);
  }
}
/* Letter paper */

.mystery-stage[data-scene="letter"] {
  padding: clamp(24px, 6vw, 42px);
  color: #422b35;
  background: #fff7ed;
  border-color: #e4cdbb;
  box-shadow: 0 12px 28px #0002;
}

.mystery-stage[data-scene="letter"] h3 {
  color: inherit;
}

.mystery-stage[data-scene="letter"] .mystery-story-text {
  line-height: 2;
  font-size: 1.05rem;
}

.mystery-stage[data-scene="letter"] time {
  display: block;
  margin-top: 20px;
  font-size: 0.9rem;
}

.mystery-stage[data-paper="romantic"] {
  background: #fff1f2;
  color: #831843;
  border: 2px solid #f9a8d4;
}

.mystery-stage[data-paper="classic"] {
  background: #fff8e7;
  color: #573c29;
  font-family: Georgia, "Noto Serif Bengali", serif;
}

.mystery-stage[data-paper="birthday"] {
  background:
    radial-gradient(circle at 10% 8%, #fbcfe8 0 5px, transparent 6px),
    radial-gradient(circle at 88% 12%, #fde68a 0 6px, transparent 7px),
    radial-gradient(circle at 92% 85%, #ddd6fe 0 5px, transparent 6px),
    #fff7fc;
  color: #702445;
}

.mystery-stage[data-paper="friendship"] {
  background: #ecfdf5;
  color: #14534b;
  border: 2px dashed #6ee7b7;
}

.mystery-stage[data-paper="royal"] {
  background: #faf5ff;
  color: #4c1d95;
  border: 6px double #a16207;
}

.mystery-stage[data-paper="floral"] {
  background:
    radial-gradient(ellipse at top left, #fbcfe8, transparent 35%),
    radial-gradient(ellipse at bottom right, #d1fae5, transparent 35%),
    #fffaf5;
  color: #633c4b;
  border-color: #f0b5ca;
}

.mystery-stage[data-paper="secret"] {
  background: #24213c;
  color: #ede9fe;
  border: 2px dashed #a78bfa;
}

.mystery-stage[data-paper="minimal"] {
  background: #fff;
  color: #1f2937;
  border: 1px solid #d1d5db;
  box-shadow: none;
}

.mb-letter-enter {
  animation: mb-letter-arrive 600ms ease-out both;
}

@keyframes mb-letter-arrive {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mb-letter-enter {
    animation: none;
  }
}
.mb-constellation {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(circle, #45243f, #191321 75%);
}

.mb-constellation span {
  position: absolute;
  left: var(--heart-x);
  top: var(--heart-y);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fbcfe8;
  box-shadow: 0 0 8px #f472b6;
  animation: mb-heart-gather 1100ms ease-out both;
  animation-delay: var(--delay);
}

@keyframes mb-heart-gather {
  from {
    opacity: 0;
    transform: translate(var(--start-x), var(--start-y));
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mb-constellation span {
    animation: none;
  }
}
.mb-birthday-cake {
  position: relative;
  width: min(100%, 240px);
  height: 220px;
  margin: 24px auto;
}

.mb-candles {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 32px;
  z-index: 3;
}

.mb-candle {
  position: relative;
  width: 12px;
  height: 48px;
  border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(
    45deg,
    #fff1f2 0 7px,
    #f472b6 7px 14px
  );
}

.mb-flame {
  position: absolute;
  bottom: calc(100% + 4px);
  left: -1px;
  width: 14px;
  height: 23px;
  border-radius: 60% 40% 55% 45%;
  background: #fde68a;
  box-shadow: 0 0 16px #fb923c;
  transform-origin: bottom center;
  animation: mb-flame-dance 900ms ease-in-out infinite alternate;
}

.mb-cake-top {
  position: absolute;
  top: 70px;
  left: 10px;
  right: 10px;
  height: 45px;
  border-radius: 50%;
  background: #ffe4e6;
  border: 3px solid #fda4af;
  z-index: 2;
}

.mb-cake-base {
  position: absolute;
  top: 90px;
  left: 10px;
  right: 10px;
  height: 100px;
  border-radius: 0 0 35% 35%;
  background: linear-gradient(
    to bottom,
    #f9a8d4 0 35%,
    #fff1f2 35% 48%,
    #ec4899 48% 80%,
    #be185d 80%
  );
}

.mb-cake-plate {
  position: absolute;
  top: 175px;
  left: 0;
  right: 0;
  height: 35px;
  border-radius: 50%;
  background: #ddd6fe;
  z-index: -0;
  box-shadow: 0 10px 18px #0003;
}

.mb-cake-base {
  z-index: 1;
}

.mb-candles-out .mb-flame {
  display: none;
}

.mb-cake-wish {
  text-align: center;
  color: #fbcfe8;
}

@keyframes mb-flame-dance {
  from {
    transform: rotate(-5deg) scale(0.95);
  }

  to {
    transform: rotate(5deg) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mb-flame {
    animation: none;
  }
}
.mb-fireworks {
  position: relative;
  height: 190px;
  overflow: hidden;
  pointer-events: none;
}

.mb-firework-burst {
  position: absolute;
}

.mb-firework-burst span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  animation: mb-firework-expand 1500ms ease-out both;
  animation-delay: var(--spark-delay);
}

@keyframes mb-firework-expand {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }

  15% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.5);
  }
}

.mystery-reduced-motion .mb-firework-burst span {
  opacity: 1;
  transform: translate(var(--spark-x), var(--spark-y));
}

@media (prefers-reduced-motion: reduce) {
  .mb-firework-burst span {
    animation: none;
    opacity: 1;
    transform: translate(var(--spark-x), var(--spark-y));
  }
}
.mystery-share-result {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--mb-border);
  border-radius: 16px;
}

.mystery-share-result a {
  color: #f9a8d4;
  overflow-wrap: anywhere;
}

.mystery-share-result button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--mb-border);
  border-radius: 12px;
  background: var(--mb-input);
  color: var(--mb-text);
  cursor: pointer;
}

.mystery-share-result input {
  font-size: 0.9rem;
}
/* Follow Wishora's Light / Dark / System setting */

html[data-theme="light"] {
  color-scheme: light;
  --mb-bg: #fff8fc;
  --mb-panel: #ffffff;
  --mb-input: #fffafd;
  --mb-text: #38243c;
  --mb-muted: #6e5575;
  --mb-border: #e6d4e4;
  --mb-pink: #be185d;
  --mb-purple: #7e22ce;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --mb-bg: #191321;
  --mb-panel: #291e35;
  --mb-input: #201728;
  --mb-text: #fff4fa;
  --mb-muted: #d3bfdc;
  --mb-border: #503b60;
  --mb-pink: #ec4899;
  --mb-purple: #a855f7;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at top right, #fce7f3, transparent 45%),
    var(--mb-bg);
}

html[data-theme="light"] .mystery-panel {
  box-shadow: 0 12px 36px #7033540a;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #806b86;
}

html[data-theme="light"] .mystery-steps [aria-current="step"] {
  background: #fce7f3;
  border-color: #be185d;
}

html[data-theme="light"] .mystery-share-result a {
  color: #9d174d;
}

html[data-theme="light"] .mb-cake-wish {
  color: #9d174d;
}

html[data-theme="light"]
:where(a, input, select, textarea, button, summary):focus-visible {
  outline-color: #9d174d;
}

.mystery-preview-controls > button,
.mystery-actions > button,
.mystery-share-result button {
  min-height: 48px;
}

.mystery-stage {
  overflow-wrap: anywhere;
}

.mystery-stage > .mystery-primary {
  white-space: normal;
}

.mystery-stage h3 {
  line-height: 1.5;
}

@media (max-width: 480px) {
  .mystery-shell {
    width: calc(100% - 24px);
    padding-top: 16px;
  }

  .mystery-preview-controls {
    gap: 10px;
  }

  .mystery-preview-controls > button {
    flex: 1 1 140px;
  }

  .mystery-actions {
    gap: 10px;
  }

  .mystery-actions > button {
    flex-basis: 100%;
  }
}
/* Birthday finale */

#preview-stage[data-scene="finale"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 24px 24px 36px;
  text-align: center;
  border: 1px solid #b778a0;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 20%, #783d6855, transparent 65%),
    linear-gradient(145deg, #302039, #211728);
  box-shadow: 0 16px 40px #0002;
}

html[data-theme="light"] #preview-stage[data-scene="finale"] {
  border-color: #ecc8dc;
  background:
    radial-gradient(ellipse at 50% 20%, #fff0bd99, transparent 65%),
    linear-gradient(145deg, #fff5fa, #f6efff);
  box-shadow: 0 16px 40px #9d174d0d;
}

#preview-stage[data-scene="finale"] h3 {
  position: relative;
  margin: 8px auto 16px;
  max-width: 540px;
  color: #fff0f8;
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.4;
  text-wrap: balance;
}

html[data-theme="light"]
#preview-stage[data-scene="finale"] h3 {
  color: #72264f;
}

#preview-stage[data-scene="finale"] .mystery-story-text {
  margin: 0 auto;
  max-width: 460px;
  color: #e6cddd;
  line-height: 1.8;
}

html[data-theme="light"]
#preview-stage[data-scene="finale"] .mystery-story-text {
  color: #73546b;
}

/* Decorative stage: no large empty space after the burst */

#preview-stage[data-scene="finale"] .mb-fireworks {
  height: clamp(150px, 30vw, 210px);
  margin: 0 auto 12px;
  max-width: 420px;
  overflow: hidden;
}

#preview-stage[data-scene="finale"] .mb-fireworks::before {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  left: 50%;
  top: 50%;
  border: 1px solid #e8ba7860;
  border-radius: 50%;
  background: radial-gradient(circle, #f5ca6d26, transparent 70%);
  transform: translate(-50%, -50%);
}

#preview-stage[data-scene="finale"] .mb-fireworks::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  color: #f2c66f;
  font-size: 92px;
  line-height: 1;
  text-shadow: 0 0 28px #f2c66f60;
  transform: translate(-50%, -50%);
  animation: mb-finale-star 1800ms ease-out both;
}

#preview-stage[data-scene="finale"] .mb-firework-burst span {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 8px currentColor;
  animation: mb-finale-spark 2300ms ease-out both;
  animation-delay: var(--spark-delay);
}

@keyframes mb-finale-star {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(-25deg);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@keyframes mb-finale-spark {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.2);
  }

  18% {
    opacity: 1;
  }

  65% {
    opacity: 1;
    transform: translate(var(--spark-x), var(--spark-y)) scale(1);
  }

  100% {
    opacity: 0.55;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.7);
  }
}

/* Receiver page action buttons */

#mystery-preview .mystery-actions > button,
#mystery-preview .mystery-actions > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--mb-border);
  border-radius: 14px;
  background: var(--mb-input);
  color: var(--mb-text);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

#mystery-preview .mystery-actions > #gift-share {
  background: linear-gradient(110deg, #be185d, #7e22ce);
  border-color: transparent;
  color: #fff;
}

#mystery-preview .mystery-actions > #mystery-create {
  background: linear-gradient(110deg, #be185d, #7e22ce);
  color: #fff;
}

.mystery-reduced-motion
#preview-stage[data-scene="finale"] .mb-fireworks::after {
  animation: none !important;
}

.mystery-reduced-motion
#preview-stage[data-scene="finale"] .mb-firework-burst span {
  animation: none !important;
  opacity: 0.7;
  transform: translate(var(--spark-x), var(--spark-y));
}

@media (prefers-reduced-motion: reduce) {
  #preview-stage[data-scene="finale"] .mb-fireworks::after {
    animation: none;
  }

  #preview-stage[data-scene="finale"] .mb-firework-burst span {
    animation: none;
    opacity: 0.7;
    transform: translate(var(--spark-x), var(--spark-y));
  }
}