@import url("themes.css");

/* --------------------------------------------------------------------------
   Celebrate Florist — Experience Player
   Romantic scrapbook aesthetic · mobile-first · theme-aware
   -------------------------------------------------------------------------- */

/* --- Page shell --------------------------------------------------------- */

.page-experience {
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
  color: var(--flor-cream, #fff9f2);
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, var(--flor-glow, rgba(255, 255, 255, .2)) 0%, transparent 55%),
    linear-gradient(168deg, var(--flor-bg, #5c2430) 0%, var(--flor-bg-mid, #7a3545) 38%, var(--flor-bg-soft, #9a4a58) 100%);
}

.page-experience *,
.page-experience *::before,
.page-experience *::after {
  box-sizing: border-box;
}

.experience-root {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

/* --- Scene container ---------------------------------------------------- */

.scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  padding:
    max(1.25rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  text-align: center;
  color: var(--flor-cream, #fff9f2);
  overflow-x: clip;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
  animation: sceneIn .45s ease;
  isolation: isolate;
}

.scene > *:not(.scene-bg):not(.scene-atmos):not(.scene-bg-photo):not(.petals):not(.bokeh):not(.hearts):not(.balloons) {
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.scene::before,
.scene::after {
  content: "";
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  pointer-events: none;
}

.scene.scroll::before,
.scene.scroll::after,
.scene.frame::before,
.scene.frame::after,
.scene.cover::before,
.scene.cover::after {
  content: none;
  display: none;
  flex: 0 0 auto;
}

.scene.scroll {
  justify-content: flex-start;
  gap: 1.1rem;
}

@keyframes sceneIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Scene atmosphere --------------------------------------------------- */

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 20% 15%, rgba(255, 255, 255, .12) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 85% 75%, var(--flor-glow, rgba(255, 255, 255, .15)) 0%, transparent 55%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .08) 100%);
}

.scene-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.scene-deco img,
.scene-deco [role="presentation"] {
  position: absolute;
  max-width: min(42vw, 11rem);
  height: auto;
  opacity: .55;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .18));
}

.scene-deco img:nth-child(1) { top: 4%; left: -4%; transform: rotate(-12deg); }
.scene-deco img:nth-child(2) { top: 8%; right: -6%; transform: rotate(8deg); }
.scene-deco img:nth-child(3) { bottom: 10%; left: 2%; transform: rotate(6deg); }
.scene-deco img:nth-child(4) { bottom: 6%; right: -2%; transform: rotate(-6deg); }

/* --- Content column ----------------------------------------------------- */

.flor-stack {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 26rem;
  min-width: 0;
  margin-inline: auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.15rem;
  padding: .35rem 0 1.75rem;
  overflow: hidden;
}

.flor-stack > .flor-kicker,
.flor-stack > .scene-kicker,
.flor-stack > .flor-title,
.flor-stack > h1,
.flor-stack > .flor-subtitle,
.flor-stack > .flor-script,
.flor-stack > .flor-body,
.flor-stack > .flor-divider,
.flor-stack > .flor-gift-box,
.flor-stack > .flor-rose-bouquet,
.flor-stack > .flor-plush-tap {
  align-self: center;
  max-width: 100%;
}

.flor-stack > .flor-panel,
.flor-stack > .quiz-card,
.flor-stack > .match-card,
.flor-stack > .score-card,
.flor-stack > .gift-content,
.flor-stack > .flor-btn,
.flor-stack > .btn,
.flor-stack > .scene-cta {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

.flor-stack--wide {
  max-width: 36rem;
}

.flor-stack--tight {
  gap: .85rem;
  padding-bottom: 1.25rem;
}

/* --- Parchment panel ---------------------------------------------------- */

.flor-panel {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 1.65rem 1.35rem 1.55rem;
  text-align: center;
  color: var(--flor-ink, #3a1212);
  overflow-wrap: anywhere;
  word-wrap: break-word;
  background:
    linear-gradient(175deg, var(--flor-cream, #fff9f2) 0%, var(--flor-paper, #faf3e8) 45%, var(--flor-paper-deep, #f0e4d4) 100%);
  border: 1.5px solid var(--flor-gold, #c9a45c);
  border-radius: .2rem;
  box-shadow: var(--flor-shadow, 0 18px 48px rgba(30, 0, 0, .28));
}

.flor-panel + .flor-gift-box,
.flor-panel + .flor-envelope {
  margin-top: .25rem;
}

.flor-panel::before,
.flor-panel::after {
  content: "";
  position: absolute;
  width: 1.35rem;
  height: 1.35rem;
  pointer-events: none;
}

.flor-panel::before {
  top: .45rem;
  left: .45rem;
  border-top: 2px solid var(--flor-gold, #c9a45c);
  border-left: 2px solid var(--flor-gold, #c9a45c);
}

.flor-panel::after {
  right: .45rem;
  bottom: .45rem;
  border-right: 2px solid var(--flor-gold, #c9a45c);
  border-bottom: 2px solid var(--flor-gold, #c9a45c);
}

.flor-panel--wide {
  width: min(36rem, 100%);
  text-align: left;
}

/* --- Typography --------------------------------------------------------- */

.flor-kicker,
.scene-kicker,
.catalog-kind {
  margin: 0 0 .7rem;
  font-family: "Lora", "Cormorant Garamond", Georgia, serif;
  font-size: .68rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--flor-gold-light, #e8d4a0);
}

.flor-panel .flor-kicker,
.quiz-card .flor-kicker,
.match-card .flor-kicker,
.score-card .flor-kicker,
.gift-content .flor-kicker {
  color: var(--flor-accent, #9b2438);
  text-shadow: none;
}

.flor-kicker::before {
  content: "// ";
  opacity: .85;
}

.catalog-kind {
  letter-spacing: .16em;
  margin-bottom: .4rem;
}

.flor-title,
.scene h1 {
  margin: .2rem 0 .75rem;
  font-family: "Cinzel", "Fraunces", "Times New Roman", serif;
  font-size: clamp(1.65rem, 5.8vw, 2.55rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: .04em;
  color: var(--flor-cream, #fff9f2);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.flor-panel .flor-title,
.flor-panel h1,
.flor-panel h2 {
  color: var(--flor-ink, #3a1212);
}

.flor-script {
  margin: 0 0 .65rem;
  font-family: "Great Vibes", "Cormorant Garamond", cursive;
  font-size: clamp(1.85rem, 7vw, 2.65rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--flor-script, #b04858);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.flor-locked-title {
  margin-bottom: .35rem;
  overflow-wrap: anywhere;
}

.flor-locked-title .flor-script {
  display: block;
  margin-top: -.15rem;
  font-size: clamp(2rem, 8vw, 2.75rem);
  max-width: 100%;
}
.flor-subtitle {
  margin: -.05rem 0 1.15rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.08rem;
  font-style: italic;
  letter-spacing: .04em;
  line-height: 1.55;
  color: color-mix(in srgb, var(--flor-cream) 82%, var(--flor-gold-light));
  max-width: 100%;
  overflow-wrap: anywhere;
}

.flor-to-from {
  display: grid;
  gap: .65rem;
  margin: .5rem 0 .25rem;
  text-align: left;
}

.flor-panel-gift {
  display: flex;
  justify-content: center;
  margin: .35rem 0 -.35rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.flor-panel-gift .flor-gift-box,
.flor-panel-gift .flor-envelope {
  transform: scale(1.05);
}

.flor-lock-badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto .85rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--flor-accent-deep, #6e1528), var(--flor-accent, #9b2438));
  color: var(--flor-gold-light, #e8d4a0);
  font-size: 1.15rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.flor-to-from p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  color: var(--flor-ink-soft, #6d4545);
}

.flor-to-from strong {
  display: block;
  margin-top: .15rem;
  font-family: "Cinzel", serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--flor-ink, #3a1212);
}

.flor-letter-frame {
  position: relative;
  width: min(26rem, 100%);
  padding: 0;
}

.flor-letter-frame::before {
  display: none;
}

.scene-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: center / cover no-repeat;
  opacity: .42;
  pointer-events: none;
}

.scene-bg-photo--letter {
  background-image: var(--flor-letter-bg);
}

.scene-atmos {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 15% 12%, rgba(255, 255, 255, .1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 88% 78%, var(--flor-glow, rgba(255, 255, 255, .12)) 0%, transparent 60%);
}

.scene-atmos--letter {
  opacity: .85;
}

.scene.letter-scene .flor-stack {
  gap: 1.25rem;
}

.scene.letter-scene .flor-letter-card {
  margin: 0;
}

.flor-letter-frame > * {
  position: relative;
  z-index: 1;
}

.flor-scene-ref {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: .18;
  pointer-events: none;
}

.scene.has-ref {
  padding: 0;
}

.scene.has-ref .flor-stack {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  max-width: none;
  height: 100%;
  padding:
    max(1.25rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  overflow-y: auto;
  justify-content: center;
}

.scene.has-ref::before,
.scene.has-ref::after {
  display: none;
}

.flor-body {
  margin: 0 auto 1rem;
  max-width: 24rem;
  font-family: "Cormorant Garamond", "Fraunces", Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--flor-cream) 92%, white);
}

.flor-panel .flor-body,
.flor-panel p,
.quiz-card p,
.match-card p,
.score-card p,
.gift-content p,
.flor-letter-card p {
  color: var(--flor-ink-soft, #6d4545);
}

.flor-panel h2,
.quiz-card h2,
.match-card h2,
.score-card h2,
.gift-content h2,
.scene h2 {
  margin: .25rem 0 .75rem;
  font-family: "Cinzel", "Fraunces", serif;
  font-size: clamp(1.2rem, 4.5vw, 1.65rem);
  font-weight: 500;
  color: var(--flor-ink, #3a1212);
}

/* --- Scene text on dark vs light themes -------------------------------- */

.theme-warm .flor-stack > .flor-kicker,
.theme-warm .flor-stack > .scene-kicker,
.theme-bloom .flor-stack > .flor-kicker,
.theme-bloom .flor-stack > .scene-kicker {
  color: var(--flor-gold-light, #e8d4a0);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

.theme-warm .flor-stack > .flor-body,
.theme-warm .flor-stack > .flor-subtitle,
.theme-bloom .flor-stack > .flor-body,
.theme-bloom .flor-stack > .flor-subtitle {
  color: color-mix(in srgb, var(--flor-cream) 94%, white);
}

.theme-warm .flor-stack > .flor-script,
.theme-bloom .flor-stack > .flor-script {
  color: color-mix(in srgb, var(--flor-cream) 55%, var(--flor-script));
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.theme-sky .flor-stack > .flor-title,
.theme-sky .flor-stack > h1.flor-title {
  color: var(--flor-ink, #1a3a6e);
}

.theme-sky .flor-stack > .flor-kicker,
.theme-sky .flor-stack > .scene-kicker {
  color: var(--flor-accent-deep, #2a5088);
  text-shadow: none;
}

.theme-sky .flor-stack > .flor-body,
.theme-sky .flor-stack > .flor-subtitle {
  color: var(--flor-ink-soft, #4a6288);
}

.theme-sky .flor-stack > .flor-script {
  color: var(--flor-script, #5a8fd0);
  text-shadow: none;
}

/* --- Farewell / done scene ---------------------------------------------- */

.scene.scene-farewell .flor-stack {
  gap: 1.35rem;
  justify-content: center;
  min-height: min(70vh, 32rem);
}

.scene.scene-farewell .flor-title {
  margin-bottom: .5rem;
}

.scene.scene-farewell .flor-body {
  max-width: 21rem;
  margin-bottom: 0;
  font-size: 1.14rem;
  line-height: 1.72;
  text-align: center;
}

/* --- Divider ------------------------------------------------------------ */

.flor-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(14rem, 80%);
  margin: .5rem auto .85rem;
}

.flor-divider::before,
.flor-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--flor-line, rgba(201, 164, 92, .45)), transparent);
}

.flor-divider__mark {
  position: relative;
  flex-shrink: 0;
  width: .55rem;
  height: .55rem;
  background: var(--flor-accent, #9b2438);
  transform: rotate(-45deg);
}

.flor-divider__mark::before,
.flor-divider__mark::after {
  content: "";
  position: absolute;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: inherit;
}

.flor-divider__mark::before { top: -.28rem; left: 0; }
.flor-divider__mark::after { left: .28rem; top: 0; }

.flor-divider--star .flor-divider__mark {
  width: .65rem;
  height: .65rem;
  background: transparent;
  transform: none;
  clip-path: polygon(50% 0%, 61% 38%, 100% 38%, 68% 59%, 79% 100%, 50% 76%, 21% 100%, 32% 59%, 0% 38%, 39% 38%);
  background-color: var(--flor-gold, #c9a45c);
}

.flor-divider--star .flor-divider__mark::before,
.flor-divider--star .flor-divider__mark::after {
  display: none;
}

/* --- Buttons ------------------------------------------------------------ */

.flor-btn,
.scene .btn.btn-brand.scene-cta,
.scene .btn.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .7rem 1.6rem;
  border: 0;
  border-radius: 999px;
  font-family: "Lora", "Cormorant Garamond", Georgia, serif;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: none;
  text-decoration: none;
  color: var(--flor-btn-text, #fff9f2);
  background: linear-gradient(135deg, var(--flor-btn-from, #8a1f2d) 0%, var(--flor-btn-to, #c9783a) 100%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.flor-btn::after,
.scene .btn.btn-brand.scene-cta::after,
.scene .btn.btn-brand::after {
  content: "";
  width: .45rem;
  height: .45rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
  opacity: .9;
}

.flor-btn--heart::before {
  content: "";
  width: .55rem;
  height: .55rem;
  background: currentColor;
  transform: rotate(-45deg);
  position: relative;
  margin-right: -.15rem;
  box-shadow: -.28rem -.14rem 0 0 currentColor, .14rem -.28rem 0 0 currentColor;
  border-radius: 50% 50% 0 50%;
  clip-path: none;
  background: transparent;
  box-shadow: none;
}

.flor-btn--heart::before {
  background: currentColor;
  border-radius: 50% 50% 0 50%;
  transform: rotate(-45deg);
  box-shadow: -.26rem -.13rem 0 -.02rem currentColor, .13rem -.26rem 0 -.02rem currentColor;
}

.flor-btn:hover,
.scene .btn.btn-brand:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}

.flor-btn:active,
.scene .btn.btn-brand:active {
  transform: translateY(0);
}

.flor-btn--outline,
.scene .btn.btn-outline {
  background: transparent;
  color: var(--flor-cream, #fff9f2);
  border: 1.5px solid rgba(255, 255, 255, .65);
  box-shadow: none;
}

.flor-btn--outline:hover,
.scene .btn.btn-outline:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--flor-cream, #fff9f2);
  filter: none;
}

.flor-btn--ghost {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: none;
  backdrop-filter: blur(4px);
}

.flor-btn--ghost::after {
  display: none;
}

.scene-cta {
  margin-top: 1.1rem;
}

.flor-panel .flor-btn,
.flor-panel .scene-cta {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin-top: .85rem;
}

.flor-panel .flor-btn-stack .flor-btn {
  margin-top: 0;
}

.flor-panel .flor-btn + .flor-btn,
.flor-panel .scene-cta + .scene-cta {
  margin-top: 0;
}

@media (max-width: 520px) {
  .scene-cta,
  .scene .flor-btn,
  .scene .btn {
    width: min(22rem, 100%);
  }
}

/* --- Floating bubbles --------------------------------------------------- */

.flor-bubbles {
  position: relative;
  width: min(26rem, 100%);
  min-height: 13rem;
  margin: 0 auto .75rem;
}

.flor-bubble {
  position: absolute;
  padding: .4rem .75rem;
  font-family: "Lora", Georgia, serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--flor-ink, #3a1212);
  background: var(--flor-chip-bg, #f5ebe0);
  border: 1px solid var(--flor-chip-border, #d8c4b0);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  white-space: nowrap;
  animation: bubbleFloat 5s ease-in-out infinite;
}

.flor-bubble:nth-child(1) { top: 2%; left: 0; animation-delay: 0s; }
.flor-bubble:nth-child(2) { top: 18%; right: -2%; animation-delay: .8s; }
.flor-bubble:nth-child(3) { bottom: 28%; left: -4%; animation-delay: 1.4s; }
.flor-bubble:nth-child(4) { bottom: 8%; right: 4%; animation-delay: 2s; }
.flor-bubble:nth-child(5) { top: 42%; left: 50%; transform: translateX(-50%); animation-delay: .4s; }

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* --- Progress stepper --------------------------------------------------- */

.flor-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: 0 auto 1rem;
  padding: 0;
  list-style: none;
}

.flor-progress-dot {
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  border: 2px solid var(--flor-gold, #c9a45c);
  background: transparent;
  transition: background .25s ease, transform .25s ease;
}

.flor-progress-dot.is-done,
.flor-progress-dot.is-active {
  background: var(--flor-gold, #c9a45c);
}

.flor-progress-dot.is-active {
  transform: scale(1.2);
  box-shadow: 0 0 0 3px var(--flor-glow, rgba(232, 180, 100, .25));
}

.flor-progress-line {
  width: 1.4rem;
  height: 1px;
  background: var(--flor-line, rgba(201, 164, 92, .45));
}

/* Legacy progress bar */
.progress-rail {
  height: 3px;
  width: min(16rem, 80%);
  margin: 0 auto 1rem;
  background: rgba(255, 255, 255, .2);
  border-radius: 999px;
  overflow: hidden;
}

.progress-rail span {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--flor-btn-from), var(--flor-gold));
  border-radius: inherit;
  transition: width .35s ease;
}

/* --- Quiz / match options ----------------------------------------------- */

.flor-option,
.option-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  margin: .45rem 0;
  padding: .85rem 1rem .85rem .85rem;
  border: 1.5px solid var(--flor-chip-border, #d8c4b0);
  border-radius: .35rem;
  background: var(--flor-cream, #fff9f2);
  font-family: "Lora", "Cormorant Garamond", Georgia, serif;
  font-size: .95rem;
  font-weight: 500;
  text-align: left;
  color: var(--flor-ink, #3a1212);
  cursor: pointer;
  min-height: 2.85rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.flor-option::before,
.option-btn::before {
  content: "";
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1.5px solid var(--flor-accent, #9b2438);
  background:
    radial-gradient(circle at 35% 35%, var(--flor-gold-light, #e8d4a0) 0%, transparent 55%),
    var(--flor-chip-bg, #f5ebe0);
}

.flor-option:hover,
.option-btn:hover {
  border-color: var(--flor-gold, #c9a45c);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.flor-option.selected,
.flor-option.is-selected,
.option-btn.selected,
.photo-choice.selected {
  border-color: var(--flor-accent, #9b2438);
  background: var(--flor-paper-deep, #f0e4d4);
  box-shadow: 0 0 0 2px var(--flor-glow, rgba(232, 180, 100, .25));
}

.flor-option.selected::before,
.option-btn.selected::before {
  background: var(--flor-accent, #9b2438);
  border-color: var(--flor-accent-deep, #6e1528);
  box-shadow: inset 0 0 0 3px var(--flor-cream, #fff9f2);
}

.flor-options {
  display: grid;
  gap: .65rem;
  margin-top: .85rem;
}

.photo-choice {
  display: block;
  margin: 0;
  padding: .4rem;
  min-height: 0;
}

.photo-choice::before {
  display: none;
}

.photo-choice img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: .2rem;
}

.match-card [data-opts] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.match-card .option-btn {
  grid-column: 1 / -1;
  margin: 0;
}

/* --- Gift box (3D tap scene) -------------------------------------------- */

.flor-gift-box {
  position: relative;
  width: min(9.5rem, 52vw);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 1rem auto;
  cursor: pointer;
  overflow: hidden;
  contain: layout paint;
  animation: giftFloat 2.4s ease-in-out infinite;
}

.flor-gift-box__base {
  position: absolute;
  inset: 18% 8% 8%;
  background: linear-gradient(160deg, var(--flor-gift-box, #8a1f2d) 0%, var(--flor-accent-deep, #6e1528) 100%);
  border-radius: .15rem;
  box-shadow:
    inset 0 -8px 16px rgba(0, 0, 0, .2),
    0 14px 28px rgba(0, 0, 0, .28);
}

.flor-gift-box__lid {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 8%;
  height: 22%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--flor-gift-box) 85%, white) 0%, var(--flor-gift-box) 100%);
  border-radius: .12rem .12rem 0 0;
  transform-origin: bottom center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.flor-gift-box__ribbon-v,
.flor-gift-box__ribbon-h {
  position: absolute;
  background: var(--flor-gold, #c9a45c);
  z-index: 2;
}

.flor-gift-box__ribbon-v {
  left: 50%;
  top: 18%;
  bottom: 8%;
  width: 14%;
  transform: translateX(-50%);
}

.flor-gift-box__ribbon-h {
  left: 8%;
  right: 8%;
  top: 50%;
  height: 12%;
  transform: translateY(-50%);
}

.flor-gift-box__bow {
  position: absolute;
  left: 50%;
  top: 2%;
  width: 2.2rem;
  height: 1.4rem;
  transform: translateX(-50%);
  z-index: 3;
}

.flor-gift-box__bow::before,
.flor-gift-box__bow::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1.1rem;
  height: 1.1rem;
  border: 3px solid var(--flor-gold, #c9a45c);
  border-radius: 50% 50% 0 50%;
  background: transparent;
}

.flor-gift-box__bow::before { left: 0; transform: rotate(-30deg); }
.flor-gift-box__bow::after { right: 0; transform: rotate(30deg) scaleX(-1); }

.flor-gift-box.is-shake,
.gift-svg.shake {
  animation: giftShake .45s ease;
}

@keyframes giftFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes giftShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* --- Rose bouquet (intro tap) ------------------------------------------- */

.flor-rose-bouquet {
  position: relative;
  display: block;
  width: min(10rem, 56vw);
  height: 8.5rem;
  margin: .65rem auto .15rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: giftFloat 2.4s ease-in-out infinite;
}

.flor-rose-bouquet__stem {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: .35rem;
  height: 42%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #5c6a51, #3d4a38);
}

.flor-rose-bouquet__leaf {
  position: absolute;
  bottom: 28%;
  width: 1.4rem;
  height: .65rem;
  border-radius: 70% 20% 70% 20%;
  background: #5c6a51;
}

.flor-rose-bouquet__leaf--l { left: 34%; transform: rotate(-28deg); }
.flor-rose-bouquet__leaf--r { right: 34%; transform: rotate(28deg) scaleX(-1); }

.flor-rose-bouquet__flower {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e85a6a, #9b1b2f 68%, #6e1528);
  box-shadow: inset 0 -4px 10px rgba(0, 0, 0, .18);
}

.flor-rose-bouquet__flower--a { width: 2.6rem; height: 2.6rem; left: 18%; top: 18%; }
.flor-rose-bouquet__flower--b { width: 3rem; height: 3rem; left: 50%; top: 8%; transform: translateX(-50%); z-index: 2; }
.flor-rose-bouquet__flower--c { width: 2.5rem; height: 2.5rem; right: 16%; top: 20%; }
.flor-rose-bouquet__flower--d { width: 2rem; height: 2rem; left: 50%; top: 34%; transform: translateX(-35%); opacity: .92; }

.flor-rose-bouquet__ribbon {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 2.8rem;
  height: .55rem;
  transform: translateX(-50%) rotate(-8deg);
  border-radius: .15rem;
  background: linear-gradient(90deg, #b8922e, #e8c86a, #b8922e);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  z-index: 3;
}

/* --- Plush tap (sky intro) ---------------------------------------------- */

.flor-plush-tap {
  position: relative;
  display: block;
  width: min(8.5rem, 50vw);
  height: 8.5rem;
  margin: .65rem auto .15rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: giftFloat 2.4s ease-in-out infinite;
}

.flor-plush-tap__head {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 5.5rem;
  height: 5.5rem;
  transform: translateX(-50%);
  border-radius: 48% 48% 44% 44%;
  background: linear-gradient(165deg, #b8d8f5, #7eb0e8);
  box-shadow: 0 10px 24px rgba(26, 58, 110, .22);
}

.flor-plush-tap__ear {
  position: absolute;
  top: 18%;
  width: 1.8rem;
  height: 2.4rem;
  border-radius: 55% 55% 40% 40%;
  background: linear-gradient(165deg, #dceeff, #9ec5ef);
  border: 2px solid #5a8fd0;
}

.flor-plush-tap__ear--l { left: 22%; transform: rotate(-18deg); }
.flor-plush-tap__ear--r { right: 22%; transform: rotate(18deg); }

.flor-plush-tap__ear::after {
  content: "";
  position: absolute;
  inset: .35rem .3rem .5rem;
  border-radius: inherit;
  background: repeating-linear-gradient(45deg, #eef5fc 0 4px, #b8d0ea 4px 8px);
  opacity: .85;
}

.flor-plush-tap__face {
  position: absolute;
  left: 50%;
  bottom: 30%;
  width: .45rem;
  height: .55rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #1a3a6e;
  box-shadow: -.75rem 0 0 #1a3a6e, .75rem 0 0 #1a3a6e;
}

.flor-plush-tap__bow {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: 1.4rem;
  height: .9rem;
  transform: translateX(-50%);
  z-index: 2;
}

.flor-plush-tap__bow::before,
.flor-plush-tap__bow::after {
  content: "";
  position: absolute;
  top: 0;
  width: .75rem;
  height: .75rem;
  border: 2px solid #3d6eb8;
  border-radius: 50% 50% 0 50%;
}

.flor-plush-tap__bow::before { left: 0; transform: rotate(-25deg); }
.flor-plush-tap__bow::after { right: 0; transform: rotate(25deg) scaleX(-1); }

.flor-tap-label {
  margin: .75rem 0 .35rem;
  font-family: "Lora", Georgia, serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--flor-accent, #9b2438);
}

.flor-panel .flor-tap-label {
  text-align: center;
}

.flor-confirm-q {
  margin-bottom: .25rem !important;
}

.flor-btn-stack {
  display: grid;
  gap: .7rem;
  width: 100%;
  margin-top: .95rem;
}

.flor-btn-stack .flor-btn,
.flor-btn-stack .scene-cta {
  width: 100%;
  margin-top: 0;
}

.flor-panel .flor-btn--ghost {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--flor-accent, #9b2438);
  min-height: 2.35rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  filter: none;
}

.flor-panel .flor-btn--ghost:hover {
  background: color-mix(in srgb, var(--flor-accent) 8%, transparent);
  transform: none;
  filter: none;
}

.flor-panel .flor-btn--ghost::after {
  display: none;
}

.flor-btn--plain::after {
  display: none;
}

/* --- Envelope ----------------------------------------------------------- */

.flor-envelope,
button.envelope,
.gift-svg.envelope {
  position: relative;
  display: block;
  width: min(15rem, 78vw);
  aspect-ratio: 5 / 4;
  margin: 1rem auto .75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.envelope-sheet,
.flor-envelope__sheet {
  position: absolute;
  inset: 22% 8% 8%;
  background: var(--flor-paper, #faf3e8);
  border: 1px solid var(--flor-ink-soft, #6d4545);
  border-radius: .1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

.envelope-flap,
.flor-envelope__flap {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 10%;
  height: 38%;
  background: var(--flor-paper-deep, #f0e4d4);
  border: 1px solid var(--flor-ink-soft, #6d4545);
  clip-path: polygon(0 0, 50% 72%, 100% 0);
}

.wax-seal,
.flor-envelope__seal {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--flor-accent) 80%, white), var(--flor-accent-deep));
  box-shadow:
    inset 0 0 0 4px var(--flor-paper, #faf3e8),
    inset 0 0 0 7px color-mix(in srgb, var(--flor-accent) 55%, transparent),
    0 6px 16px rgba(0, 0, 0, .25);
}

.gift-svg {
  width: min(13rem, 68vw);
  cursor: pointer;
  animation: giftFloat 2.4s ease-in-out infinite;
}

/* --- Letter card -------------------------------------------------------- */

.flor-letter-card,
.letter-card {
  width: min(34rem, 100%);
  padding: 1.75rem 1.4rem 1.5rem;
  text-align: left;
  font-family: "Cormorant Garamond", "Fraunces", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.72;
  color: var(--flor-ink, #3a1212);
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, var(--flor-line, rgba(201, 164, 92, .35)) 27px 28px),
    linear-gradient(180deg, var(--flor-cream, #fff9f2), var(--flor-paper, #faf3e8));
  border: 1.5px solid var(--flor-gold, #c9a45c);
  border-radius: .2rem;
  box-shadow: var(--flor-shadow, 0 18px 48px rgba(30, 0, 0, .28));
}

.flor-letter-card h2,
.letter-card h2 {
  margin: 0 0 .85rem;
  font-family: "Cormorant Garamond", "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.9rem;
  color: var(--flor-ink, #3a1212);
}

.flor-letter-card blockquote,
.letter-card blockquote,
.scene blockquote {
  margin: 0 0 1rem;
  padding: 0 0 0 .9rem;
  border-left: 2px solid var(--flor-accent, #9b2438);
  color: var(--flor-ink-soft, #6d4545);
  font-style: italic;
}

/* --- Score -------------------------------------------------------------- */

.flor-score-num,
.score-card h1 {
  margin: .25rem 0 .65rem;
  font-family: "Cinzel", "Fraunces", serif;
  font-size: clamp(2.8rem, 14vw, 4rem);
  font-weight: 500;
  line-height: 1;
  color: var(--flor-accent, #9b2438);
  animation: scorePop .55s ease;
}

@keyframes scorePop {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* --- Gift grid (treasures) ---------------------------------------------- */

.flor-gift-grid,
.gift-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  width: min(26rem, 100%);
  margin: 0 auto;
}

@media (min-width: 520px) {
  .flor-gift-grid,
  .gift-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.flor-gift-cell,
.gift-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: .5rem;
  border: 1.5px solid color-mix(in srgb, var(--flor-gift-box) 70%, black);
  border-radius: .3rem;
  background: linear-gradient(155deg, var(--flor-gift-box, #8a1f2d) 0%, var(--flor-accent-deep, #6e1528) 100%);
  color: var(--flor-cream, #fff9f2);
  font-family: "Lora", Georgia, serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
  transition: transform .2s ease, opacity .2s ease;
}

.flor-gift-cell:not(.is-opened):not(:disabled),
.gift-cell:not(.opened):not(:disabled) {
  animation: giftFloat 2.4s ease-in-out infinite;
}

.flor-gift-cell.is-final,
.gift-cell.final {
  background: linear-gradient(145deg, var(--flor-gold, #c9a45c) 0%, color-mix(in srgb, var(--flor-gold) 65%, var(--flor-accent)) 100%);
  border-color: var(--flor-gold-light, #e8d4a0);
  color: var(--flor-ink, #3a1212);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}

.flor-gift-cell.is-opened,
.gift-cell.opened {
  opacity: .48;
  animation: none;
}

.flor-gift-cell:disabled,
.gift-cell:disabled {
  opacity: .38;
  cursor: not-allowed;
  animation: none;
  filter: grayscale(.25);
}

/* --- Timeline / memories gallery ---------------------------------------- */

.flor-timeline,
.memory-reel {
  width: min(26rem, 100%);
  display: grid;
  gap: 1.5rem;
  padding-bottom: 1rem;
  text-align: left;
}

.flor-timeline-item,
.memory-still,
.memory-video {
  position: relative;
  margin: 0;
  background: var(--flor-paper, #faf3e8);
  border: 1.5px solid var(--flor-gold, #c9a45c);
  border-radius: .2rem;
  box-shadow: var(--flor-shadow, 0 12px 32px rgba(0, 0, 0, .18));
  overflow: hidden;
}

.flor-timeline-item:nth-child(odd) {
  transform: rotate(-1.2deg);
  margin-right: .5rem;
}

.flor-timeline-item:nth-child(even) {
  transform: rotate(1deg);
  margin-left: .5rem;
}

.flor-timeline-item img,
.memory-still img,
.memory-video video,
.demo-reel img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--flor-ink, #3a1212);
}

.memory-video video {
  aspect-ratio: 16 / 10;
}

.flor-timeline-item figcaption,
.memory-still figcaption,
.memory-video p {
  margin: 0;
  padding: .75rem .9rem .85rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: .95rem;
  color: var(--flor-ink-soft, #6d4545);
}

.memory-head {
  text-align: left;
}

.memory-head h1 {
  text-align: left;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  width: min(40rem, 100%);
}

.polaroid {
  background: var(--flor-cream, #fff9f2);
  border: 1.5px solid var(--flor-gold, #c9a45c);
  padding: .45rem .45rem 1.1rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
  transform: rotate(var(--rot, -1.5deg));
}

.polaroid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* --- Panel cards (quiz, match, score, gift) ----------------------------- */

.quiz-card,
.match-card,
.score-card,
.gift-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 1.5rem 1.3rem 1.45rem;
  text-align: left;
  color: var(--flor-ink, #3a1212);
  background:
    linear-gradient(175deg, var(--flor-cream, #fff9f2) 0%, var(--flor-paper, #faf3e8) 45%, var(--flor-paper-deep, #f0e4d4) 100%);
  border: 1.5px solid var(--flor-gold, #c9a45c);
  border-radius: .2rem;
  box-shadow: var(--flor-shadow, 0 18px 48px rgba(30, 0, 0, .28));
}

.quiz-card h2,
.match-card h2,
.score-card h2,
.gift-content h2 {
  margin-bottom: .65rem;
}

.score-card {
  text-align: center;
}

.gift-content img {
  width: 100%;
  margin-top: .75rem;
  border-radius: .2rem;
  border: 1px solid var(--flor-line, rgba(201, 164, 92, .45));
}

/* --- Cover scene -------------------------------------------------------- */

.scene.cover {
  padding: 0;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  touch-action: auto;
}

.scene.cover > .cover-card {
  max-width: min(28rem, 100%);
}

.cover-card {
  width: min(28rem, 100%);
  margin: 0;
  position: relative;
  background: var(--flor-ink, #3a1212);
  box-shadow: var(--flor-shadow, 0 22px 56px rgba(0, 0, 0, .4));
}

.cover-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.cover-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3.2rem 1.2rem 1.4rem;
  background: linear-gradient(180deg, transparent, rgba(20, 0, 0, .82));
  color: var(--flor-cream, #fff9f2);
  text-align: left;
}

.cover-card h1 {
  color: var(--flor-cream, #fff9f2);
  margin: 0 0 .35rem;
}

.cover-card p {
  color: color-mix(in srgb, var(--flor-cream) 75%, transparent);
  margin: 0;
}

.cover-card .scene-kicker {
  color: var(--flor-gold-light, #e8d4a0);
}

.cover-card .flor-subtitle {
  color: color-mix(in srgb, var(--flor-cream) 78%, transparent);
  margin-bottom: 0;
}

/* --- Fullscreen gallery frame ------------------------------------------- */

.scene.frame {
  padding: 0;
  justify-content: stretch;
  align-items: stretch;
  overflow: hidden;
  touch-action: auto;
}

.scene.frame > .frame-stage {
  flex: 1 1 auto;
  flex-shrink: 1;
  min-height: 0;
  max-width: none;
}

.frame-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--flor-ink, #3a1212);
}

.frame-stage img,
.frame-stage video,
.frame-stage .demo-reel,
.frame-stage .demo-reel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.frame-stage .demo-reel {
  height: 100%;
}

.reel-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .25);
}

.reel-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: var(--flor-gold-light, #e8d4a0);
}

.frame-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 1.2rem 5.6rem;
  background: linear-gradient(180deg, transparent, rgba(20, 0, 0, .88));
  color: var(--flor-cream, #fff9f2);
  text-align: left;
}

.frame-bar h2 {
  color: var(--flor-cream, #fff9f2);
  margin: 0 0 .25rem;
  font-size: 1.65rem;
}

.frame-bar p {
  color: color-mix(in srgb, var(--flor-cream) 72%, transparent);
  margin: 0;
}

.frame-bar .scene-kicker {
  color: var(--flor-gold-light, #e8d4a0);
  margin-bottom: .35rem;
}

.frame-bar .flor-subtitle {
  color: color-mix(in srgb, var(--flor-cream) 78%, transparent);
  margin: 0;
}

.scene.frame .frame-next {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: auto;
  z-index: 2;
}

/* --- Photobooth --------------------------------------------------------- */

.scene.scroll.booth-scene {
  align-items: stretch;
  justify-content: flex-start;
  padding-left: .7rem;
  padding-right: .7rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.booth {
  width: min(22rem, 100%);
  max-width: 100%;
  min-width: 0;
  min-height: min-content;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: visible;
  background: var(--flor-booth-bg, #3a0a0a);
  color: var(--flor-booth-text, #faf3e8);
  border: 1.5px solid color-mix(in srgb, var(--flor-gold) 40%, transparent);
  border-radius: .35rem;
  padding: 1rem .9rem 1.15rem;
  text-align: left;
  display: grid;
  gap: .85rem;
  margin: 0 auto;
  box-shadow: var(--flor-shadow, 0 18px 48px rgba(0, 0, 0, .35));
}

.booth,
.booth * {
  box-sizing: border-box;
}

.booth-head h2 {
  color: var(--flor-booth-text, #faf3e8);
  margin: 0;
  font-family: "Cinzel", "Fraunces", serif;
  font-size: clamp(1.2rem, 5vw, 1.45rem);
  font-weight: 500;
}

.booth-studio {
  display: grid;
  gap: 1rem;
}

.booth-filter-label {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--flor-gold-light, #e8d4a0);
}

.booth-head p {
  margin: 0 0 .25rem;
  color: var(--flor-gold-light, #e8d4a0);
  font-family: "Cormorant Garamond", Georgia, serif;
}

.booth-stage,
.booth-studio,
.booth-result,
.booth-actions,
.filter-row,
.strip-layouts {
  min-width: 0;
  max-width: 100%;
}

.booth-stage {
  position: relative;
  overflow: hidden;
  border-radius: .25rem;
  margin-bottom: .15rem;
}

.booth video,
.booth canvas,
.booth img {
  width: 100%;
  max-width: 100%;
  border-radius: .25rem;
  background: #120808;
  display: block;
}

.booth-stage video {
  width: 100%;
  max-width: 100%;
  max-height: min(38vh, 22rem);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.booth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .35rem;
}

.booth-actions .flor-btn,
.booth-actions .btn {
  width: 100%;
  flex: none;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.booth-actions .btn-text,
.booth-actions .flor-btn--ghost.btn-text {
  grid-column: 1 / -1;
  margin-top: .2rem;
}

.booth-result {
  display: grid;
  gap: .85rem;
  margin-top: .25rem;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: .15rem 0 .25rem;
  margin-top: .1rem;
}

.strip-layouts {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.booth .btn-text {
  flex: 1 1 100%;
  background: none;
  border: 0;
  color: var(--flor-gold-light, #e8d4a0);
  min-height: 2.4rem;
  font-family: "Lora", Georgia, serif;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.booth .btn-outline {
  color: var(--flor-booth-text, #faf3e8);
  border-color: color-mix(in srgb, var(--flor-booth-text) 65%, transparent);
}

.booth .btn-outline:hover {
  background: var(--flor-booth-text, #faf3e8);
  color: var(--flor-booth-bg, #3a0a0a);
}

.filter-chip {
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 999px;
  padding: .4rem .65rem;
  cursor: pointer;
  font-family: "Lora", Georgia, serif;
  font-size: .68rem;
  font-weight: 600;
  color: var(--flor-ink, #3a1212);
}

.filter-chip.active {
  outline: 2px solid var(--flor-gold-light, #e8d4a0);
  outline-offset: 1px;
}

.booth-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 4rem;
  font-family: "Cinzel", Georgia, serif;
  color: var(--flor-cream, #fff9f2);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  pointer-events: none;
}

.booth-count:empty {
  display: none;
}

.strip {
  display: grid;
  gap: .35rem;
  background: var(--flor-paper, #faf3e8);
  padding: .5rem;
}

.strip[hidden] {
  display: none;
}

.strip img {
  border-radius: 0;
}

.booth-result[hidden],
.booth-studio[hidden] {
  display: none;
}

.strip-layouts {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: .2rem 0 .55rem;
}

.layout-chip {
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 999px;
  min-height: 2.2rem;
  padding: .35rem .65rem;
  cursor: pointer;
  font-family: "Lora", Georgia, serif;
  font-size: .7rem;
  font-weight: 600;
}

.layout-chip.active {
  outline: 2px solid var(--flor-gold-light, #e8d4a0);
  outline-offset: 1px;
}

.strip-preview {
  width: min(14.5rem, 100%);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto .3rem;
  background: var(--flor-paper, #faf3e8);
  touch-action: pan-y;
}

/* --- Particles / petals ------------------------------------------------- */

.petals,
.bokeh,
.hearts,
.balloons,
.scene > .petals,
.scene > .bokeh,
.scene > .hearts,
.scene > .balloons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.petal,
.dot,
.heart,
.balloon {
  position: absolute;
  top: -5%;
  animation: fall 9s linear infinite;
}

.petal {
  width: 10px;
  height: 14px;
  border-radius: 70% 12% 70% 12%;
  background: color-mix(in srgb, var(--flor-accent) 65%, white);
  opacity: .75;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
}

.heart {
  width: 9px;
  height: 9px;
  background: var(--flor-accent, #9b2438);
  transform: rotate(-45deg);
  opacity: .7;
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: inherit;
}

.heart::before { top: -4.5px; left: 0; }
.heart::after { left: 4.5px; top: 0; }

.balloon {
  width: 16px;
  height: 22px;
  border-radius: 50% 50% 48% 48%;
  background: color-mix(in srgb, var(--flor-gold) 70%, white);
  opacity: .65;
}

.balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 1px;
  height: 6px;
  background: rgba(255, 255, 255, .4);
  transform: translateX(-50%);
}

@keyframes fall {
  to {
    transform: translateY(115vh) rotate(32deg);
    opacity: .12;
  }
}

/* --- Misc helpers ------------------------------------------------------- */

.locked-hint {
  font-size: .88rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  color: var(--flor-gold-light, #e8d4a0);
  min-height: 1.2em;
}

.exp-gate {
  background: var(--flor-wash, #f5ebe0);
}

.form-error {
  color: var(--flor-accent, #9b2438);
}

/* --- Theme: Sky (gingham, stitch borders) ------------------------------- */

.theme-sky .flor-panel,
.theme-sky .quiz-card,
.theme-sky .match-card,
.theme-sky .score-card,
.theme-sky .gift-content,
.theme-sky .flor-letter-card,
.theme-sky .letter-card {
  border-style: dashed;
  border-color: var(--flor-gold, #7eb0e8);
  background:
    linear-gradient(175deg, var(--flor-cream) 0%, var(--flor-paper) 42%, var(--flor-paper-deep) 100%);
}

.theme-sky .flor-panel--gingham,
.theme-sky .flor-panel.has-gingham {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 7px,
      color-mix(in srgb, var(--flor-gold) 12%, transparent) 7px,
      color-mix(in srgb, var(--flor-gold) 12%, transparent) 14px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 7px,
      color-mix(in srgb, var(--flor-gold) 12%, transparent) 7px,
      color-mix(in srgb, var(--flor-gold) 12%, transparent) 14px
    ),
    linear-gradient(175deg, var(--flor-cream) 0%, var(--flor-paper) 50%, var(--flor-paper-deep) 100%);
}

.theme-sky .flor-gift-cell:not(.is-final),
.theme-sky .gift-cell:not(.final) {
  background: linear-gradient(155deg, var(--flor-accent) 0%, var(--flor-accent-deep) 100%);
}

.theme-sky .scene-kicker,
.theme-sky .catalog-kind {
  color: var(--flor-gold-light, #b8d4f0);
}

/* --- Theme: Warm (deeper shadows, gold accents) ------------------------- */

.theme-warm .flor-panel,
.theme-warm .quiz-card,
.theme-warm .match-card,
.theme-warm .score-card,
.theme-warm .gift-content,
.theme-warm .flor-letter-card,
.theme-warm .letter-card {
  box-shadow:
    0 22px 56px rgba(30, 0, 0, .42),
    0 0 0 1px rgba(201, 164, 92, .18),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}

.theme-warm .flor-panel::before,
.theme-warm .flor-panel::after {
  border-color: var(--flor-gold, #c9a45c);
  width: 1.5rem;
  height: 1.5rem;
}

.theme-warm .flor-divider::before,
.theme-warm .flor-divider::after {
  background: linear-gradient(90deg, transparent, var(--flor-gold), transparent);
}

.theme-warm .flor-gift-cell:not(.is-final),
.theme-warm .gift-cell:not(.final) {
  box-shadow:
    0 10px 26px rgba(30, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .15);
}

/* --- Theme: Bloom ------------------------------------------------------- */

.theme-bloom .flor-script {
  color: var(--flor-script, #a85868);
}

/* --- Reduced motion ----------------------------------------------------- */

@media (max-width: 759px) {
  .scene {
    padding:
      max(0.85rem, env(safe-area-inset-top))
      max(0.75rem, env(safe-area-inset-right))
      max(1.35rem, env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
  }

  .scene-deco img,
  .scene-deco [role="presentation"] {
    max-width: min(32vw, 7.5rem);
    opacity: 0.35;
  }

  .scene-deco img:nth-child(1) { left: 0; }
  .scene-deco img:nth-child(2) { right: 0; }
  .scene-deco img:nth-child(3) { left: 0; }
  .scene-deco img:nth-child(4) { right: 0; }

  .flor-panel {
    padding: 1.35rem 1rem 1.25rem;
  }

  .flor-stack {
    width: 100%;
    max-width: 26rem;
    gap: 1rem;
    padding-bottom: 1.35rem;
  }

  .flor-stack--wide {
    max-width: 100%;
  }

  .scene:not(.scroll):not(.frame):not(.cover) {
    justify-content: center;
  }

  .scene:not(.scroll):not(.frame):not(.cover)::before,
  .scene:not(.scroll):not(.frame):not(.cover)::after {
    flex: 0 0 0;
    display: none;
    content: none;
    min-height: 0;
  }

  .flor-letter-card,
  .quiz-card,
  .match-card,
  .score-card,
  .gift-content {
    width: 100%;
    padding: 1.2rem 1rem 1.15rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .scene.has-ref .flor-stack {
    justify-content: flex-start;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  .booth {
    width: 100%;
    padding: 0.85rem 0.75rem 1rem;
  }

  .filter-row,
  .strip-layouts {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  .filter-chip,
  .layout-chip {
    flex: 0 0 auto;
  }

  .exp-gate {
    min-height: 100dvh;
    padding:
      max(1.5rem, env(safe-area-inset-top))
      max(1rem, env(safe-area-inset-right))
      max(1.5rem, env(safe-area-inset-bottom))
      max(1rem, env(safe-area-inset-left));
    place-content: start center;
  }

  .exp-gate .stack {
    width: 100%;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene {
    animation: none;
  }

  .flor-gift-box,
  .gift-svg,
  .flor-gift-cell:not(.is-opened):not(:disabled),
  .gift-cell:not(.opened):not(:disabled),
  .petal,
  .dot,
  .heart,
  .balloon,
  .flor-bubble {
    animation: none !important;
  }

  .flor-btn,
  .scene .btn {
    transition: none;
  }

  .score-card h1,
  .flor-score-num {
    animation: none;
  }
}