/* ===== Lulu's Birthday — Slideshow ===== */

:root {
  --pink-lightest: #fff0f5;
  --pink-light: #ffd6e7;
  --pink-soft: #ffb6d3;
  --pink-medium: #ff8fb8;
  --pink-deep: #e8609a;
  --pink-dark: #c44882;
  --white: #ffffff;
  --text-dark: #5a2d45;
  --text-light: #8b5c7a;
  --shadow-pink: rgba(232, 96, 154, 0.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== Chrome pages re-base the ROOT to 16px =====
   The bespoke consumer chrome (.luvw: nav, dashboard, /start, auth, admin,
   contact) and the marketing landing (.luv-landing) are authored in `rem` and
   live on their OWN routes that never embed a published gift. So the cleanest,
   zero-risk way to size them at a modern 16px is to re-base the document root
   when one of those surfaces is on the page — every `rem` then means 16px and
   the chrome looks right, with no per-rule edits. The published gift routes
   (which keep the 24px root below) never match this selector. The editor
   (.lue) is a MIXED page — its canvas renders the 24px gift blocks — so it
   keeps the 24px root and instead sizes its chrome in `em` (see editor.css). */
html:has(.luvw),
html:has(.luv-landing) {
  font-size: 16px;
}

html, body {
  min-height: 100%;
  font-family: 'Lato', 'Helvetica Neue', sans-serif;
  /* The global ROOT base stays 24px because the PUBLISHED gift experiences (the
     legacy slideshow, the .luvb-page block renderer and the six games) are
     authored almost entirely in `rem`, which always resolves against the ROOT —
     so dropping the root would shrink them and there is no per-subtree way to
     re-base `rem`. Keeping 24px here makes the published gift byte-for-byte
     unchanged with ZERO gift CSS edits.

     The APP CHROME (nav, dashboard, /start, auth, admin, contact, the editor
     chrome) was the thing that looked oversized. Each chrome SURFACE now
     re-establishes a normal ~16px context of its OWN and is authored in `em`
     (relative to that surface base) instead of root `rem`, so the chrome renders
     at a modern size regardless of this 24px root:
       • .luv-landing  — `html:has(.luv-landing){font-size:16px}` (landing.html.heex)
       • .luvw         — `.luvw{font-size:16px}` + em-based chrome (layouts.ex et al)
       • .lue          — `.lue{font-size:16px}` + em-based chrome (editor.css)
     This split is robust: gift uses root rem (24px), chrome uses surface em (16px). */
  font-size: 24px;
  background: linear-gradient(135deg, var(--pink-lightest) 0%, var(--pink-light) 50%, var(--pink-lightest) 100%);
  color: var(--text-dark);
}

/* ===== Mobile: shrink the published-gift ROOT so pages fit without zooming =====
   The 24px root looks right on desktop but was oversized on phones (the owner had
   to set the browser to 75%). Drop the root at phone widths so every gift `rem`
   (text, cover, the games) scales down together, natively. Chrome and the landing
   keep their own 16px — their `html:has(.luvw|.luv-landing)` rules out-specify this
   — and the editor canvas (which shares the 24px gift root) scales to match. */
@media (max-width: 640px) {
  html {
    font-size: 18px;
  }
}
@media (max-width: 380px) {
  html {
    font-size: 16px;
  }
}

/* i18n script coverage: Arabic + Hindi don't exist in the brand serif/sans, so
   for those locales the whole page defaults to a Noto family that does. Decorative
   headings (Playfair etc.) are re-pointed in the RTL/script polish pass; this is
   the readable baseline. */
html[lang="ar"], html[lang="ar"] body { font-family: 'Noto Sans Arabic', 'Lato', sans-serif; }
html[lang="hi"], html[lang="hi"] body { font-family: 'Noto Sans Devanagari', 'Lato', sans-serif; }

/* Language switcher (top nav, all surfaces). No-JS <details> dropdown; sized in
   em so it matches each chrome surface's 16px base, and uses logical properties
   so the menu flips correctly under RTL. */
.lang-switch { position: relative; display: inline-block; }
.lang-switch > summary { list-style: none; cursor: pointer; display: inline-flex; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch-btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.45em 0.8em; border-radius: 999px;
  font-size: 0.9em; font-weight: 700; color: #c0264b;
  background: rgba(255, 255, 255, 0.75); border: 1.5px solid #ffb3d1; white-space: nowrap;
}
.lang-switch-caret { font-size: 0.7em; opacity: 0.7; transition: transform 0.15s ease; }
.lang-switch[open] .lang-switch-caret { transform: rotate(180deg); }
.lang-switch-menu {
  position: absolute; top: calc(100% + 0.4em); inset-inline-end: 0;
  margin: 0; padding: 0.35em; list-style: none;
  background: #fff; border: 1px solid #ffd9e8; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(120, 30, 70, 0.22); z-index: 200; min-width: 9em;
}
.lang-switch-item {
  display: block; padding: 0.5em 0.8em; border-radius: 9px;
  color: #8a5e6e; text-decoration: none; font-weight: 600; font-size: 0.95em; white-space: nowrap;
}
.lang-switch-item:hover { background: #fff0f6; color: #c0264b; }
.lang-switch-item.is-active { color: #c0264b; background: #ffe3ef; }
/* On phones (≤480px) collapse the trigger to an icon-only globe so the long
   locale name (e.g. "Français") can't push the switcher off the right edge of
   the nav. The dropdown still lists every language by full name. */
@media (max-width: 480px) {
  .lang-switch-current { display: none; }
  .lang-switch-btn { padding: 0.45em 0.6em; gap: 0.3em; }
}

/* Native file inputs: the OS-default "Choose File" button renders as a grey box.
   Theme its button-part to match the pink buttons wherever a file input shows
   (e.g. the wizard photo upload). The editor's file inputs are transparent
   overlays (.lue-hidden-file) so this leaves their custom dropzone alone. The
   two pseudo-elements live in separate rules on purpose — a browser that doesn't
   recognise one would drop the whole selector list if they were combined. */
input[type="file"]::file-selector-button {
  font-family: inherit; font-weight: 700; font-size: 0.9em;
  color: #fff; background: linear-gradient(135deg, #ff5e9a, #ff86b3);
  border: none; border-radius: 999px; padding: 0.5em 1.1em;
  margin-inline-end: 0.8em; cursor: pointer; transition: filter 0.15s ease;
}
input[type="file"]::file-selector-button:hover { filter: brightness(1.06); }
input[type="file"]::-webkit-file-upload-button {
  font-family: inherit; font-weight: 700; font-size: 0.9em;
  color: #fff; background: linear-gradient(135deg, #ff5e9a, #ff86b3);
  border: none; border-radius: 999px; padding: 0.5em 1.1em;
  margin-inline-end: 0.8em; cursor: pointer; transition: filter 0.15s ease;
}
input[type="file"]::-webkit-file-upload-button:hover { filter: brightness(1.06); }

/* The full-screen, no-scroll experiences (published gift renderer, editor, the
   legacy slideshow) opt INTO locking the page; everything else (wizard, landing,
   auth, dashboard) scrolls normally. */
body.lue-no-scroll, body.luvb-locked {
  overflow: hidden;
  height: 100%;
}

h1, h2, h3, .title, .intro-title, .intro-name, .month-title, .countdown-note {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ===== Floating Hearts ===== */
.hearts-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ===== Gift Boxes Backdrop ===== */
.gifts-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.gift-icon {
  position: absolute;
  opacity: 0.15;
  animation: giftBob 5s ease-in-out infinite;
}
.gift-icon:nth-child(2) { animation-delay: 0.5s; }
.gift-icon:nth-child(3) { animation-delay: 1.1s; }
.gift-icon:nth-child(4) { animation-delay: 1.6s; }
.gift-icon:nth-child(5) { animation-delay: 2.1s; }
.gift-icon:nth-child(6) { animation-delay: 2.7s; }
.gift-icon:nth-child(7) { animation-delay: 0.3s; }
.gift-icon:nth-child(8) { animation-delay: 1.4s; }
.gift-icon:nth-child(9) { animation-delay: 3.0s; }
.gift-icon:nth-child(10) { animation-delay: 0.8s; }
.gift-icon:nth-child(11) { animation-delay: 2.3s; }
.gift-icon:nth-child(12) { animation-delay: 1.8s; }
.gift-icon:nth-child(13) { animation-delay: 0.6s; }
.gift-icon:nth-child(14) { animation-delay: 2.0s; }
.gift-icon:nth-child(15) { animation-delay: 1.2s; }
.gift-icon:nth-child(16) { animation-delay: 3.3s; }
.gift-icon:nth-child(even) {
  animation-direction: alternate-reverse;
}

@keyframes giftBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
.heart {
  position: absolute;
  bottom: -40px;
  color: var(--pink-soft);
  opacity: 0.25;
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.25; }
  100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

/* ===== Password Gate ===== */
.password-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--pink-lightest), var(--pink-light), var(--pink-soft));
}
.password-inner {
  text-align: center;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 3rem 4rem;
  box-shadow: 0 8px 40px var(--shadow-pink);
  max-width: 420px;
  width: 90%;
}
.password-lock-icon {
  font-size: 3rem;
  color: var(--pink-deep);
  margin-bottom: 1rem;
  display: block;
}
.password-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: var(--pink-dark);
  margin-bottom: 0.5rem;
}
.password-subtitle {
  font-size: 1rem;
  color: var(--pink-deep);
  margin-bottom: 2rem;
}
.password-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.password-input {
  width: 100%;
  padding: 0.8rem 1.2rem;
  border: 2px solid var(--pink-soft);
  border-radius: 12px;
  font-size: 1rem;
  text-align: center;
  outline: none;
  transition: border-color 0.3s;
  font-family: inherit;
}
.password-input:focus {
  border-color: var(--pink-deep);
}
.password-btn {
  background: linear-gradient(135deg, var(--pink-medium), var(--pink-deep));
  color: white;
  border: none;
  border-radius: 12px;
  padding: 0.8rem 2.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: 'Playfair Display', serif;
}
.password-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px var(--shadow-pink);
}
.password-error {
  color: #e74c3c;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* ===== Countdown ===== */
.countdown-container {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: center;
  height: 100vh; padding: 2rem;
}
.countdown-inner {
  text-align: center;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 3rem 4rem;
  box-shadow: 0 8px 40px var(--shadow-pink);
  max-width: 1024px; width: 100%;
}
.title {
  font-size: 2.2rem; color: var(--pink-deep);
  margin-bottom: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  animation: pulse 2s ease-in-out infinite;
}
.title-icon {
  font-size: 1.4rem;
  vertical-align: middle;
  color: var(--pink-medium);
  margin: 0 0.2rem;
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
.subtitle {
  font-size: 1.1rem; color: var(--text-light);
  margin-bottom: 2.5rem; font-style: italic;
}
.timer { display:flex; justify-content:center; gap:1.2rem; margin-bottom:2rem; flex-wrap:wrap; }
.time-block {
  background: linear-gradient(145deg, var(--pink-medium), var(--pink-deep));
  border-radius: 16px; padding: 1.2rem 1.5rem; min-width: 90px;
  box-shadow: 0 4px 20px var(--shadow-pink);
}
.time-number { font-size:2.8rem; font-weight:bold; color:var(--white); line-height:1; }
.time-label { font-family:'Lato',sans-serif; font-size:0.75rem; color:var(--pink-lightest); text-transform:uppercase; margin-top:0.3rem; letter-spacing:1.5px; font-weight:300; }
.countdown-note { font-size:1.3rem; color:var(--pink-deep); margin-bottom:1.5rem; }
.sparkle-row { display:flex; justify-content:center; gap:1rem; }
.sparkle { font-size:1rem; color:var(--pink-medium); animation: twinkle 1.5s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.2)} }

/* Draft preview ribbon: floating pill only the owner ever sees (drafts are
   session-gated), turning every preview into a publish prompt. */
.luv-draft-ribbon {
  position: fixed;
  left: 50%;
  bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2000;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(214, 53, 111, 0.95);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 24px rgba(176, 40, 92, 0.4);
}
.luv-draft-ribbon:hover {
  background: rgba(176, 40, 92, 0.98);
}

/* A document-less draft with no legacy content: gentle "still being made"
   placeholder (never the legacy slideshow, that's grandfathered sites only). */
.luv-inprogress {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem;
  text-align: center;
}
.luv-inprogress-emoji {
  font-size: 3rem;
  margin: 0;
  animation: twinkle 1.8s ease-in-out infinite;
}
.luv-inprogress-text {
  font-size: 1.1rem;
  color: var(--pink-deep, #b0285c);
  max-width: 22em;
  margin: 0;
}

/* ===== Slideshow Layout ===== */
.slideshow-wrap {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-viewport {
  width: 100%;
  max-width: 720px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2rem 1rem;
}

/* ===== Nav Arrows ===== */
.nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  border: 2px solid var(--pink-soft);
  color: var(--pink-deep);
  font-size: 2.4rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px var(--shadow-pink);
  line-height: 1;
  padding-bottom: 3px;
}
.nav-arrow:hover {
  background: var(--pink-medium);
  color: var(--white);
  border-color: var(--pink-medium);
  transform: translateY(-50%) scale(1.1);
}
.nav-left { inset-inline-start: 1.5rem; }
.nav-right { inset-inline-end: 1.5rem; }
/* RTL: logical insets swap the sides; flip the chevron glyphs to match the
   right-to-left reading direction. */
[dir="rtl"] .nav-arrow { transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .nav-arrow:hover { transform: translateY(-50%) scaleX(-1) scale(1.1); }

/* ===== Progress Dots ===== */
.progress-dots {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pink-soft);
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.5;
}
.dot.active {
  background: var(--pink-deep);
  opacity: 1;
  transform: scale(1.3);
}
.dot:hover { opacity: 0.8; transform: scale(1.2); }

.slide-counter {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  font-size: 0.85rem;
  color: var(--text-light);
  z-index: 10;
}

/* ===== Birthday Intro Slide ===== */
.birthday-intro {
  text-align: center;
  position: relative;
  width: 100%;
}
.intro-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sparkle-star {
  position: absolute;
  color: var(--pink-medium);
  opacity: 0.4;
  animation: twinkle 2s ease-in-out infinite;
}
.intro-content {
  position: relative;
  z-index: 1;
}
.intro-icon {
  margin-bottom: 0.5rem;
  animation: float 3s ease-in-out infinite;
}
.decorative-flourish {
  font-size: 3rem;
  color: var(--pink-deep);
  line-height: 1;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.intro-title {
  font-size: 3.2rem;
  color: var(--pink-deep);
  margin-bottom: 0.2rem;
  letter-spacing: 2px;
  animation: pulse 2s ease-in-out infinite;
}
.intro-name {
  font-size: 4.5rem;
  color: var(--pink-dark);
  font-style: italic;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--pink-deep), var(--pink-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.intro-divider {
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--pink-medium), transparent);
  margin: 0 auto 1.5rem;
}
.intro-message {
  font-size: 1.15rem;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 1rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.intro-sub {
  font-size: 0.95rem;
  color: var(--pink-medium);
  font-style: italic;
  margin-bottom: 2.5rem;
}
.intro-start {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: linear-gradient(135deg, var(--pink-medium), var(--pink-deep));
  color: var(--white);
  border: none;
  padding: 1rem 2.5rem;
  font-size: 1.15rem;
  font-family: inherit;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 6px 24px var(--shadow-pink);
  transition: all 0.3s ease;
}
.intro-start:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(232, 96, 154, 0.4);
}
.start-arrow {
  font-size: 1.4rem;
  transition: transform 0.3s ease;
}
.intro-start:hover .start-arrow {
  transform: translateX(5px);
}

/* ===== Month Slide ===== */
.month-slide {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  overflow-y: auto;
  max-height: 90vh;
  scrollbar-width: thin;
  scrollbar-color: var(--pink-soft) transparent;
}
.month-header {
  text-align: center;
  margin-bottom: 1.2rem;
}
.month-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--pink-medium), var(--pink-deep));
  color: var(--white);
  font-size: 0.8rem;
  font-weight: bold;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.4rem;
}
.month-title {
  font-size: 1.8rem;
  color: var(--pink-deep);
  margin-top: 0.4rem;
}

/* Media grid */
.month-media {
  display: grid;
  gap: 10px;
  margin-bottom: 1.2rem;
}
.month-media.media-count-1 {
  grid-template-columns: 1fr;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.month-media.media-count-2 {
  grid-template-columns: 1fr 1fr;
}
.month-media.media-count-3 {
  grid-template-columns: 1fr 1fr;
}
.month-media.media-count-3 .media-item:first-child {
  grid-column: 1 / -1;
}
.media-item {
  min-width: 0;
}
.media-caption {
  font-size: 0.85rem;
  color: var(--text-light);
  text-align: center;
  margin-top: 0.4rem;
  font-style: italic;
}

.month-photo-frame {
  background: var(--white);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 8px 30px var(--shadow-pink);
  overflow: hidden;
}
.month-photo {
  width: 100%;
  height: auto;
  max-height: 50vh;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  transition: transform 0.5s ease;
}
video.month-photo {
  background: #000;
}
.month-photo-frame:hover .month-photo {
  transform: scale(1.02);
}

.month-body {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  box-shadow: 0 4px 20px var(--shadow-pink);
}
.month-caption {
  font-size: 1.35rem;
  color: var(--pink-deep);
  margin-bottom: 0.6rem;
}
.month-description {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.7;
}

/* ===== Slide Transitions ===== */
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.4s ease;
}
.slide-right-enter-from { opacity: 0; transform: translateX(60px); }
.slide-right-leave-to   { opacity: 0; transform: translateX(-60px); }
.slide-left-enter-from  { opacity: 0; transform: translateX(-60px); }
.slide-left-leave-to    { opacity: 0; transform: translateX(60px); }

/* Countdown transitions */
.fade-enter-active, .fade-leave-active { transition: opacity 0.6s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.reveal-enter-active { animation: grandReveal 1.2s ease-out; }
@keyframes grandReveal {
  0%   { opacity:0; transform:scale(0.8); filter:blur(10px); }
  50%  { opacity:0.8; filter:blur(2px); }
  100% { opacity:1; transform:scale(1); filter:blur(0); }
}

/* ===== Responsive ===== */
@media (max-width: 700px) {
  .nav-arrow { width: 44px; height: 44px; font-size: 1.8rem; }
  .nav-left { inset-inline-start: 0.8rem; }
  .nav-right { inset-inline-end: 0.8rem; }
  .intro-title { font-size: 2.2rem; }
  .intro-name { font-size: 3rem; }
  .month-media.media-count-2,
  .month-media.media-count-3 { grid-template-columns: 1fr; }
  .month-media.media-count-3 .media-item:first-child { grid-column: 1; }
  .slide-viewport { padding: 1.5rem 0.5rem; }
}

/* ===== Let's Play Interstitial ===== */
.lets-play-slide {
  text-align: center;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.lets-play-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lp-sparkle {
  position: absolute;
  opacity: 0.3;
  animation: lpTwinkle 2.5s ease-in-out infinite;
}
@keyframes lpTwinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 0.6; transform: scale(1.3) rotate(180deg); }
}
.lets-play-content {
  position: relative;
  z-index: 1;
}
.lp-icons {
  margin-bottom: 1rem;
}
.lp-icon-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}
.lp-icon {
  font-size: 2.8rem;
  display: inline-block;
  opacity: 0;
  transform: scale(0) rotate(-20deg);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lp-icon.lp-icon-pop {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.lp-title {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
.lp-title-word {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: 3px;
  background: linear-gradient(135deg, var(--pink-deep), #c44dff, var(--pink-medium));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  opacity: 0;
  animation: lpWordDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes lpWordDrop {
  0% { opacity: 0; transform: translateY(-40px) scale(0.5) rotate(-5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
.lp-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--pink-medium), #c44dff, var(--pink-medium));
  margin: 0 auto 1.2rem;
  border-radius: 2px;
  animation: lpDividerGrow 0.8s ease-out 0.5s both;
}
@keyframes lpDividerGrow {
  0% { width: 0; opacity: 0; }
  100% { width: 80px; opacity: 1; }
}
.lp-message {
  font-size: 1.2rem;
  color: var(--text-dark);
  line-height: 1.7;
  margin-bottom: 0.5rem;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.lp-message strong {
  color: var(--pink-deep);
  font-size: 1.3rem;
}
.lp-sub {
  font-size: 1rem;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 1.8rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.lp-game-previews {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}
.lp-preview {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.2rem 1rem;
  width: 150px;
  box-shadow: 0 4px 20px var(--shadow-pink);
  border: 2px solid var(--pink-light);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lp-preview.lp-preview-in {
  opacity: 1;
  transform: translateY(0);
}
.lp-preview:hover {
  transform: translateY(-5px);
  border-color: var(--pink-medium);
  box-shadow: 0 8px 30px rgba(232, 96, 154, 0.3);
}
.lp-preview-icon {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}
.lp-preview-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pink-deep);
  margin-bottom: 0.3rem;
}
.lp-preview-desc {
  font-size: 0.78rem;
  color: var(--text-light);
  font-style: italic;
  line-height: 1.4;
}
.lp-ready {
  font-size: 1.15rem;
  color: var(--pink-deep);
  font-weight: 600;
  margin-bottom: 1.2rem;
  animation: lpPulse 2s ease-in-out infinite;
}
@keyframes lpPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.lp-go {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: linear-gradient(135deg, #c44dff, var(--pink-deep));
  color: var(--white);
  border: none;
  padding: 1rem 3rem;
  font-size: 1.3rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  letter-spacing: 3px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 6px 30px rgba(196, 77, 255, 0.35);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.lp-go::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  animation: lpShine 3s ease-in-out infinite;
}
@keyframes lpShine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}
.lp-go:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 40px rgba(196, 77, 255, 0.5);
}
.lp-go-arrow {
  font-size: 1rem;
  transition: transform 0.3s ease;
}
.lp-go:hover .lp-go-arrow {
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .lp-title-word { font-size: 2.8rem; }
  .lp-preview { width: 130px; padding: 1rem 0.8rem; }
  .lp-icon { font-size: 2.2rem; }
}
@media (max-width: 500px) {
  .lp-title-word { font-size: 2.2rem; }
  .lp-game-previews { gap: 0.6rem; }
  .lp-preview { width: 110px; padding: 0.8rem 0.6rem; }
  .lp-preview-icon { font-size: 1.8rem; }
  .lp-go { padding: 0.8rem 2rem; font-size: 1.1rem; }
}

/* ===== Outro / See You Next Year ===== */
.outro-slide {
  text-align: center;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.outro-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.outro-star {
  position: absolute;
  opacity: 0.25;
  animation: outroTwinkle 3s ease-in-out infinite;
}
@keyframes outroTwinkle {
  0%, 100% { opacity: 0.1; transform: scale(0.6); }
  50% { opacity: 0.5; transform: scale(1.2); }
}
.outro-content {
  position: relative;
  z-index: 1;
}
.outro-heart-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.outro-heart {
  font-size: 1.8rem;
  display: inline-block;
  animation: outroHeartFloat 2s ease-in-out infinite;
}
@keyframes outroHeartFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.15); }
}
.outro-title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--pink-deep);
  margin-bottom: 0.6rem;
  letter-spacing: 1px;
  animation: outroFadeIn 1s ease-out both;
}
@keyframes outroFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.outro-divider {
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--pink-medium), var(--pink-deep), var(--pink-medium), transparent);
  margin: 0 auto 1.5rem;
  border-radius: 2px;
}
.outro-message {
  font-size: 1.2rem;
  color: var(--text-dark);
  line-height: 1.8;
  max-width: 460px;
  margin: 0 auto 0.8rem;
  animation: outroFadeIn 1s ease-out 0.3s both;
}
.outro-sub {
  font-size: 1.05rem;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 2rem;
  animation: outroFadeIn 1s ease-out 0.5s both;
}
.outro-promise {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  padding: 0.8rem 2rem;
  box-shadow: 0 4px 20px var(--shadow-pink);
  border: 2px solid var(--pink-light);
  margin-bottom: 1.8rem;
  animation: outroFadeIn 1s ease-out 0.7s both;
}
.outro-promise-icon {
  font-size: 1.4rem;
}
.outro-promise-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pink-deep);
  font-style: italic;
}
.outro-year {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--pink-medium), #c44dff, var(--pink-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
  letter-spacing: 6px;
  animation: outroFadeIn 1.2s ease-out 0.9s both;
}
.outro-footer {
  font-size: 1rem;
  color: var(--text-light);
  font-style: italic;
  line-height: 1.6;
  animation: outroFadeIn 1s ease-out 1.1s both;
}

@media (max-width: 700px) {
  .outro-title { font-size: 2.2rem; }
  .outro-year { font-size: 3.5rem; }
}
@media (max-width: 500px) {
  .outro-title { font-size: 1.8rem; }
  .outro-year { font-size: 2.8rem; }
  .outro-promise { padding: 0.6rem 1.5rem; }
}

/* ===== Shared game sprite rendering =====
   Character sprites are 8-bit pixel art whose flat #ffffff background is knocked
   out to transparent in-browser (see spriteFx.js). These rules keep every
   character: (1) CRISP — image-rendering pixelated so the 8-bit art stays sharp
   when scaled; (2) BOXLESS — object-fit contain with no background/border, so
   there's no white rectangle behind them; (3) CONSISTENTLY SIZED — the preview
   characters across whack / kiss / any game render in one shared box via
   --sprite-size, so the couple look the same size everywhere. */
:root {
  /* Fluid: scales smoothly from small phones (~76px) up to a 120px cap. */
  --sprite-size: clamp(76px, 20vw, 120px);
}
.sprite-img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
  background: transparent;
}
/* Horizontal mirror for a side-profile sprite rendered on the side it would
   otherwise face AWAY from (kiss game: the couple must face each other —
   see sideSpriteFlip in spriteFx.js). Applied to the preview img or the arena
   char wrapper; the in-arena hit animation transforms the inner img, so the
   two compose instead of fighting. */
.sprite-flip {
  transform: scaleX(-1);
}

/* The couple on a game's end/result card (pop the hearts, quiz, catch the
   hearts): the generated pair image, or the two faces side by side. */
.game-end-chars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.game-end-sprite {
  height: clamp(64px, 16vw, 90px);
  width: auto;
  max-width: 220px;
  filter: drop-shadow(0 6px 18px var(--shadow-pink));
}

/* ===== Whack-a-Mole Game ===== */
.game-slide {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.game-header {
  margin-bottom: clamp(10px, 2vw, 24px);
}
.game-title {
  font-size: clamp(28px, 6.5vw, 48px);
  color: var(--pink-deep);
  margin-bottom: 0.3rem;
}
.game-subtitle {
  font-size: clamp(15px, 3.2vw, 24px);
  color: var(--text-light);
  font-style: italic;
}

/* Start screen */
.game-start {
  padding: clamp(16px, 4vw, 48px) clamp(8px, 3vw, 48px);
}
.game-preview {
  margin-bottom: clamp(16px, 3vw, 36px);
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 19px);
}
.preview-face {
  width: var(--sprite-size);
  height: var(--sprite-size);
  filter: drop-shadow(0 6px 18px var(--shadow-pink));
  animation: peekBounce 1.5s ease-in-out infinite;
}
.game-preview .preview-face + .preview-face {
  animation-delay: 0.4s;
}
@keyframes peekBounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-15px) rotate(3deg); }
}
.game-instructions {
  font-size: clamp(17px, 3.6vw, 26px);
  color: var(--text-dark);
  margin-bottom: clamp(16px, 3vw, 36px);
}
.game-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--pink-medium), var(--pink-deep));
  color: var(--white);
  border: none;
  padding: clamp(13px, 2.2vw, 22px) clamp(26px, 6vw, 53px);
  font-size: clamp(17px, 3.4vw, 28px);
  font-family: inherit;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 6px 24px var(--shadow-pink);
  transition: all 0.3s ease;
}
.game-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(232, 96, 154, 0.45);
}
.game-btn:active {
  transform: translateY(0);
}

/* HUD */
.game-hud {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 5vw, 36px);
  margin-bottom: clamp(10px, 2vw, 24px);
  padding: clamp(8px, 1.6vw, 14px) clamp(16px, 4vw, 29px);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 2px 12px var(--shadow-pink);
}
.hud-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hud-label {
  font-size: clamp(11px, 2.2vw, 17px);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-light);
}
.hud-value {
  font-size: clamp(22px, 4.4vw, 34px);
  font-weight: bold;
  color: var(--pink-deep);
  font-family: 'Playfair Display', serif;
}
.hud-warning {
  color: #e53e3e;
  animation: hudPulse 0.5s ease-in-out infinite;
}
@keyframes hudPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* 3D Mole Board — fluid: sizes to its container, holes scale with the board
   (no fixed 110px). Percent transforms keep the pop animation proportional. */
.mole-board {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  gap: clamp(8px, 2.4vw, 12px);
  padding: clamp(14px, 3.5vw, 36px) clamp(8px, 2.5vw, 24px) clamp(18px, 5vw, 48px);
  background: linear-gradient(180deg, #c8e6c9 0%, #a5d6a7 40%, #81c784 100%);
  border-radius: 20px;
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.1), 0 8px 30px var(--shadow-pink);
  overflow: visible;
  cursor: none;
}
.mole-row {
  display: flex;
  gap: clamp(8px, 3vw, 14px);
  justify-content: center;
  width: 100%;
}
.mole-hole {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 110px;
  aspect-ratio: 1;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: none;
}

/* The hole ellipse at the cell's base — the mole rises from behind it. */
.hole-front {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  height: 30%;
  background: radial-gradient(ellipse at center, #5d4037 40%, #3e2723 100%);
  border-radius: 50%;
  z-index: 3;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.4);
  pointer-events: none;
}

/* Mole wrapper — pops up from behind the hole. The face image is a TIGHT
   head-and-shoulders cutout (spriteFx.bustKnockout crops the sprite's padded
   canvas to the character's opaque bounding box), so these percentages size
   the character itself, not an invisible canvas. translateY percentages are
   of the wrapper's own height, so the pop distance scales with the bust. */
.mole-wrapper {
  position: absolute;
  bottom: 0;
  left: 50%;
  /* Narrower than the hole ellipse (92%) so the bust visibly rises from
     WITHIN the hole rather than overlapping its rim. */
  width: 74%;
  z-index: 2;
  transform: translateX(-50%) translateY(110%);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.mole-wrapper.mole-up {
  /* Sink the bust's bottom slightly below the cell (overflow:hidden trims it)
     with the front-lip ellipse (z-index above) covering the chest base, so
     the head + shoulders read as popped OUT of the hole. */
  transform: translateX(-50%) translateY(12%);
}
.mole-wrapper.mole-whacked {
  transform: translateX(-50%) translateY(12%) rotate(18deg) scale(0.82);
  transition: transform 0.15s ease-out;
}
.mole-wrapper.mole-down {
  /* 110%, not 100%: fully below the cell so the drop-shadow can't peek. */
  transform: translateX(-50%) translateY(110%);
}

.mole-face {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  /* No border-radius / background: the sprite is a transparent cutout — the
     character itself IS the mole, not a card. */
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
  pointer-events: none;
}
.mole-wrapper.mole-whacked .mole-face {
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25)) brightness(1.5);
}

/* Whack hit effect — floating layer above board */
.whack-effects-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: visible;
}
.whack-effect {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.whack-star {
  position: absolute;
  font-size: 1.6rem;
  color: #ffd700;
  animation: whackBurst 0.4s ease-out forwards;
}
.whack-star.star-2 {
  animation-delay: 0.05s;
  left: -20px;
  color: var(--pink-medium);
}
.whack-star.star-3 {
  animation-delay: 0.1s;
  left: 20px;
  color: #ff6b6b;
}
@keyframes whackBurst {
  0% { opacity: 1; transform: translateY(0) scale(0.5); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.5); }
}

/* Game over overlay */
.game-over-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 240, 245, 0.92);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  z-index: 20;
  overflow-y: auto;
}
.game-over-card {
  text-align: center;
  padding: clamp(12px, 3vw, 48px);
  max-width: 100%;
}
.over-sprite {
  width: clamp(56px, 14vw, 84px);
  height: clamp(56px, 14vw, 84px);
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 6px 18px var(--shadow-pink));
  animation: peekBounce 1.5s ease-in-out infinite;
}
.over-title {
  font-size: clamp(26px, 5.5vw, 48px);
  color: var(--pink-deep);
  margin-bottom: clamp(10px, 2vw, 24px);
}
.over-score-wrap {
  margin-bottom: 0.8rem;
}
.over-score-number {
  font-size: clamp(52px, 11vw, 96px);
  font-weight: bold;
  color: var(--pink-dark);
  line-height: 1;
  font-family: 'Playfair Display', serif;
}
.over-score-label {
  font-size: 0.9rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.over-message {
  font-size: clamp(16px, 3.4vw, 26px);
  color: var(--text-dark);
  margin-bottom: clamp(12px, 2.4vw, 29px);
}
.over-stats {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 4vw, 36px);
  margin-bottom: clamp(16px, 3vw, 36px);
}
.stat {
  text-align: center;
}
.stat-val {
  font-size: clamp(22px, 4.5vw, 36px);
  font-weight: bold;
  color: var(--pink-deep);
}
.stat-label {
  font-size: clamp(11px, 2.2vw, 17px);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-light);
}

/* Game area wrapper for overlay positioning */
.game-area {
  position: relative;
}

/* Animated hammer cursor */
.hammer-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 60px;
  height: 60px;
  transform: translate(-15px, -10px);
  transition: none;
}
.hammer-cursor .hammer-inner {
  width: 100%;
  height: 100%;
  transform-origin: 75% 85%;
  transform: rotate(0deg);
  transition: transform 0.08s ease-out;
}
.hammer-cursor.is-swinging .hammer-inner {
  transform: rotate(-90deg);
  transition: transform 0.08s ease-in;
}
.hammer-cursor.is-returning .hammer-inner {
  transform: rotate(0deg);
  transition: transform 0.15s ease-out;
}
.hammer-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.3));
}

/* ===== Catch the Kiss Game ===== */
.catch-kiss-slide {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(2px, 1vw, 16px);
  text-align: center;
  user-select: none;
}

.catch-kiss-slide .game-header {
  margin-bottom: clamp(10px, 2vw, 24px);
}
.catch-kiss-slide .game-title {
  font-size: clamp(28px, 6.5vw, 48px);
  font-weight: 800;
  color: #e8457a;
  text-shadow: 0 2px 8px rgba(232, 69, 122, 0.3);
}
.catch-kiss-slide .game-subtitle {
  color: #c06;
  font-size: clamp(15px, 3.2vw, 24px);
  margin-top: 0.25rem;
}

/* Start screen */
.catch-kiss-slide .game-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
}
.catch-kiss-slide .preview-char {
  width: var(--sprite-size);
  height: var(--sprite-size);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}
.catch-kiss-slide .preview-heart {
  font-size: 2rem;
  animation: pulse-heart 1s ease-in-out infinite;
}
@keyframes pulse-heart {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* Arena — height follows the width (aspect-ratio) instead of a fixed tall
   viewport fraction, so it no longer towers on phones; capped on desktop. */
.kiss-arena {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 340px;
  max-height: min(72vh, 640px);
  background: linear-gradient(135deg, #ffeef5 0%, #ffe0ec 50%, #ffd6e7 100%);
  border-radius: 1.2rem;
  overflow: hidden;
  border: 3px solid #f8a4c8;
  box-shadow: 0 8px 32px rgba(232, 69, 122, 0.15);
  cursor: crosshair;
}

/* HUD */
.kiss-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
  z-index: 10;
  border-bottom: 2px solid #f8a4c8;
}
.kiss-hud .hud-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.kiss-hud .hud-label {
  font-size: clamp(11px, 2.2vw, 17px);
  font-weight: 700;
  color: #c06;
  text-transform: uppercase;
}
.kiss-hud .hud-value {
  font-size: clamp(16px, 3vw, 24px);
  font-weight: 800;
  color: #e8457a;
}
.heart-pip {
  font-size: clamp(14px, 2.8vw, 21px);
  transition: opacity 0.3s, transform 0.3s;
}
.heart-pip.used {
  opacity: 0.25;
  transform: scale(0.7);
}

/* Characters — width scales with the arena (the gameplay maths measures the
   rendered size at game start, see measureArena in CatchKissSlide.vue). */
.char-lulu, .char-me {
  position: absolute;
  width: clamp(54px, 22%, 90px);
  transition: none;
  z-index: 5;
}
.char-lulu {
  left: 10px;
}
.char-me {
  right: 10px;
}
.char-lulu img, .char-me img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}
.char-me.is-hit img {
  filter: drop-shadow(0 0 12px #ff69b4) brightness(1.2);
  animation: me-flash 0.3s ease;
}
@keyframes me-flash {
  0% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1); }
}

/* Projectiles */
.projectile {
  position: absolute;
  z-index: 8;
  pointer-events: none;
}
.heart-proj {
  font-size: clamp(20px, 5vw, 32px);
  animation: heart-wobble 0.4s ease-in-out infinite alternate;
}
.heart-proj img {
  width: clamp(28px, 7vw, 42px);
  height: auto;
}
@keyframes heart-wobble {
  0% { transform: translateY(-3px) rotate(-5deg); }
  100% { transform: translateY(3px) rotate(5deg); }
}
.kiss-proj {
  font-size: clamp(24px, 6vw, 48px);
  animation: kiss-float 0.5s ease-in-out infinite alternate;
}
.kiss-proj img {
  width: clamp(28px, 7vw, 42px);
  height: auto;
}
@keyframes kiss-float {
  0% { transform: translateY(-4px) scale(1); }
  100% { transform: translateY(4px) scale(1.1); }
}

/* Hit effects */
.hit-effect {
  position: absolute;
  pointer-events: none;
  z-index: 12;
}
.hit-star {
  position: absolute;
  font-size: 1.4rem;
  animation: hit-burst 0.6s ease-out forwards;
}
.hit-star.star-2 {
  animation-delay: 0.05s;
  left: 15px;
}
.hit-star.star-3 {
  animation-delay: 0.1s;
  left: -10px;
  top: -10px;
}
@keyframes hit-burst {
  0% { transform: scale(0.5) translateY(0); opacity: 1; }
  100% { transform: scale(1.5) translateY(-30px); opacity: 0; }
}

/* Win card */
.kiss-win-card {
  background: linear-gradient(135deg, #fff0f5, #ffe0ec) !important;
  border-color: #f8a4c8 !important;
}
.kiss-win-card .over-title {
  color: #e8457a;
}
.win-photo {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 20px rgba(232, 69, 122, 0.25);
}
.win-message {
  font-size: 1.15rem;
  font-weight: 600;
  color: #c06;
  margin: 0.5rem 0;
  line-height: 1.5;
}
.win-sub {
  font-size: 0.95rem;
  color: #d4699a;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* Kiss game end screens */
.kiss-arena-wrap {
  position: relative;
  width: 100%;
}
.kiss-end-screen {
  width: 100%;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff0f5 0%, #ffe0ec 50%, #ffd6e7 100%);
  border-radius: 1.2rem;
  border: 3px solid #f8a4c8;
  box-shadow: 0 8px 32px rgba(232, 69, 122, 0.15);
  padding: clamp(16px, 4vw, 48px);
}
.kiss-end-card {
  text-align: center;
  max-width: min(400px, 100%);
}
.kiss-end-title {
  font-size: clamp(26px, 5.5vw, 48px);
  font-weight: 800;
  color: #e8457a;
  margin-bottom: clamp(10px, 2vw, 24px);
}
.kiss-end-msg {
  font-size: clamp(17px, 3.4vw, 27px);
  font-weight: 600;
  color: #c06;
  margin: 0.5rem 0;
  line-height: 1.6;
}
.kiss-end-sub {
  font-size: clamp(14px, 3vw, 22px);
  color: #d4699a;
  margin-bottom: clamp(16px, 3vw, 36px);
  line-height: 1.4;
}
.kiss-end-card .win-photo {
  width: 100%;
  max-width: min(320px, 76%);
  height: auto;
  border-radius: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 20px rgba(232, 69, 122, 0.25);
}
.kiss-end-card .game-btn {
  margin-top: 1rem;
}

/* ===== Pop the Hearts Game ===== */
.pop-hearts-slide {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(2px, 1vw, 16px);
  text-align: center;
  user-select: none;
}
.pop-hearts-slide .game-title {
  font-size: clamp(28px, 6.5vw, 48px);
  font-weight: 800;
  color: #e8457a;
  text-shadow: 0 2px 8px rgba(232, 69, 122, 0.3);
}
.pop-hearts-slide .game-subtitle {
  color: #c06;
  font-size: clamp(15px, 3.2vw, 24px);
  margin-top: 0.25rem;
}

/* Demo floating hearts on start screen */
.pop-preview {
  position: relative;
  height: 120px;
  margin: 1rem 0;
  overflow: hidden;
}
.demo-heart {
  position: absolute;
  bottom: -20px;
  color: #e8457a;
  animation: demo-float 3s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(232, 69, 122, 0.3));
}
@keyframes demo-float {
  0% { transform: translateY(0); opacity: 0.3; }
  50% { transform: translateY(-80px); opacity: 1; }
  100% { transform: translateY(-130px); opacity: 0; }
}
.game-instructions-sub {
  color: #d4699a;
  font-size: clamp(14px, 3vw, 22px);
  margin: clamp(12px, 2.5vw, 30px);
}

/* Arena — clamp keeps it tall enough to play but never towering on phones. */
.pop-arena {
  position: relative;
  width: 100%;
  height: clamp(380px, 62vh, 640px);
  background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 40%, #4a2068 70%, #6b2fa0 100%);
  border-radius: 1.2rem;
  overflow: hidden;
  border: 3px solid #9b59b6;
  box-shadow: 0 8px 32px rgba(155, 89, 182, 0.25), inset 0 0 60px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

/* Subtle stars in background */
.pop-arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 50% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 20% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 60% 90%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 45% 50%, rgba(255,255,255,0.4), transparent);
  pointer-events: none;
  z-index: 0;
}

/* HUD */
.pop-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0.6rem 1rem;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  z-index: 10;
  border-bottom: 2px solid rgba(155, 89, 182, 0.5);
}
.pop-hud .hud-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #d4a0e8;
  text-transform: uppercase;
  margin-right: 0.4rem;
}
.pop-hud .hud-value {
  font-size: 1rem;
  font-weight: 800;
  color: #f0c0ff;
}

/* Floating hearts */
.pop-heart {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.1s ease;
  filter: drop-shadow(0 0 10px rgba(232, 69, 122, 0.6));
}
.pop-heart:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 18px rgba(232, 69, 122, 0.9));
}
.pop-heart:active {
  transform: scale(0.95);
}
.pop-heart-emoji {
  color: #ff4081;
  text-shadow: 0 0 12px rgba(255, 64, 129, 0.5);
}
.pop-heart.is-popping {
  pointer-events: none;
  animation: heart-pop 0.4s ease-out forwards;
}
@keyframes heart-pop {
  0% { transform: scale(1); opacity: 1; }
  30% { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* Reason card reveal */
.reason-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  padding: clamp(16px, 3vw, 29px) clamp(20px, 4vw, 43px);
  max-width: min(82%, 340px);
  z-index: 15;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  text-align: center;
  pointer-events: none;
}
.reason-number {
  font-size: clamp(13px, 2.6vw, 19px);
  font-weight: 700;
  color: #e8457a;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.4rem;
}
.reason-number::before {
  content: 'Reason #';
}
.reason-text {
  font-size: clamp(17px, 3.4vw, 26px);
  font-weight: 600;
  color: #4a2068;
  line-height: 1.5;
  font-style: italic;
}

/* Reason reveal transition */
.reason-reveal-enter-active {
  animation: reason-in 0.4s ease-out;
}
.reason-reveal-leave-active {
  animation: reason-out 0.3s ease-in;
}
@keyframes reason-in {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes reason-out {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
}

/* Collected reasons ticker */
.reasons-collected {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 0.4rem;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 8;
}
.reason-mini {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(232, 69, 122, 0.3);
  font-size: 0.65rem;
  color: #f0c0ff;
}
.reason-mini.latest {
  background: rgba(232, 69, 122, 0.7);
  animation: mini-pop 0.5s ease;
}
@keyframes mini-pop {
  0% { transform: scale(0.5); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.reason-mini-heart {
  font-size: 0.6rem;
  color: #ff4081;
}
.reason-mini-num {
  font-weight: 700;
}

/* Completion screen */
.pop-end-screen {
  width: 100%;
  min-height: clamp(380px, 62vh, 640px);
  max-height: 80vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 40%, #4a2068 70%, #6b2fa0 100%);
  border-radius: 1.2rem;
  border: 3px solid #9b59b6;
  box-shadow: 0 8px 32px rgba(155, 89, 182, 0.25);
  padding: clamp(12px, 3vw, 36px);
  overflow-y: auto;
}
.pop-end-card {
  text-align: center;
  max-width: 440px;
  width: 100%;
}
.pop-end-title {
  font-size: clamp(26px, 5.5vw, 43px);
  font-weight: 800;
  color: #ff4081;
  margin-bottom: clamp(12px, 2.4vw, 29px);
  text-shadow: 0 0 20px rgba(255, 64, 129, 0.5);
}
.reasons-scroll {
  text-align: start;
  max-height: clamp(180px, 34vh, 320px);
  overflow-y: auto;
  padding: 0.5rem;
  margin-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: #9b59b6 transparent;
}
.reasons-scroll::-webkit-scrollbar {
  width: 6px;
}
.reasons-scroll::-webkit-scrollbar-thumb {
  background: #9b59b6;
  border-radius: 3px;
}
.reason-final {
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.3rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid #ff4081;
  animation: reason-fade-in 0.4s ease both;
}
.reason-final:nth-child(even) {
  border-left-color: #e040fb;
}
.reason-final-num {
  font-weight: 800;
  color: #ff4081;
  margin-right: 0.4rem;
  font-size: 0.85rem;
}
.reason-final-text {
  color: #f0d0ff;
  font-size: 0.9rem;
  line-height: 1.4;
}
@keyframes reason-fade-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
.pop-end-footer {
  margin-top: 1rem;
}
.pop-end-msg {
  font-size: clamp(16px, 3.2vw, 26px);
  font-weight: 600;
  color: #f0c0ff;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-style: italic;
}
.pop-end-card .game-btn {
  margin-top: 0.5rem;
}

/* ===== Catch the Hearts Game ===== */
.catch-hearts-slide {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.catch-hearts-slide .game-title { color: var(--pink-deep); }
.game-instructions-sub {
  font-size: clamp(14px, 3vw, 22px);
  color: var(--text-light);
  margin-top: -0.6rem;
  margin-bottom: clamp(16px, 3vw, 34px);
}
.catch-preview {
  position: relative;
  height: clamp(110px, 26vw, 150px);
  margin: 0 auto 1rem;
  max-width: 340px;
}
/* The catcher (player character) waiting under the falling demo hearts. */
.catch-preview-face {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(56px, 15vw, 76px);
  height: clamp(56px, 15vw, 76px);
  filter: drop-shadow(0 4px 12px var(--shadow-pink));
}
.catch-demo-heart {
  position: absolute;
  top: 0;
  color: var(--pink-medium);
  animation: catch-demo-fall 2.4s ease-in-out infinite;
}
@keyframes catch-demo-fall {
  0% { transform: translateY(-10px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(110px); opacity: 0; }
}
.catch-arena {
  position: relative;
  width: 100%;
  height: clamp(360px, 64vh, 620px);
  overflow: hidden;
  background: linear-gradient(180deg, #fff4fa 0%, #ffe7f2 60%, #ffd9ea 100%);
  border-radius: 1.2rem;
  border: 3px solid var(--pink-soft);
  box-shadow: inset 0 4px 16px rgba(232, 96, 154, 0.1), 0 8px 30px var(--shadow-pink);
  touch-action: none;
  user-select: none;
  cursor: none;
}
.catch-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--pink-soft);
  z-index: 10;
}
.life-pip {
  font-size: 0.95rem;
  transition: opacity 0.3s, transform 0.3s;
}
.life-pip.lost { opacity: 0.22; transform: scale(0.7); filter: grayscale(1); }
.catch-item {
  position: absolute;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.12));
  will-change: top, left;
}
.catch-item.is-bad { filter: drop-shadow(0 3px 5px rgba(80, 80, 80, 0.2)); }
.catch-basket {
  position: absolute;
  bottom: 14px;
  width: clamp(64px, 18vw, 84px);
  height: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 8;
  transition: left 0.04s linear;
}
/* The catcher is the player character's face (sprite), not a basket. */
.catch-basket-face {
  width: clamp(58px, 16vw, 76px);
  height: clamp(58px, 16vw, 76px);
  filter: drop-shadow(0 4px 8px rgba(232, 96, 154, 0.35));
  user-select: none;
  -webkit-user-drag: none;
}
.catch-pop {
  position: absolute;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--pink-deep);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: catch-pop-rise 0.6s ease-out forwards;
  z-index: 9;
}
.catch-pop.is-bad { color: #d65; }
@keyframes catch-pop-rise {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1.1); }
}
.catch-end-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(320px, 55vh, 420px);
}
.catch-end-card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 1.4rem;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 3.5vw, 43px);
  box-shadow: 0 12px 40px var(--shadow-pink);
  max-width: min(360px, 100%);
}
.catch-end-title {
  font-size: clamp(24px, 5vw, 41px);
  color: var(--pink-deep);
  margin-bottom: 1rem;
}
.catch-end-score { margin-bottom: 1rem; }
.catch-end-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(48px, 10vw, 72px);
  font-weight: 800;
  color: var(--pink-deep);
  line-height: 1;
}
.catch-end-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-light);
}
.catch-end-msg {
  font-size: clamp(16px, 3.2vw, 25px);
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

/* ===== Memory Match Game ===== */
.memory-slide {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.memory-slide .game-title { color: var(--pink-deep); }
.memory-preview {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 auto 1.4rem;
}
.memory-demo-card {
  width: clamp(44px, 11vw, 54px);
  height: clamp(56px, 14vw, 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 6vw, 43px);
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 6px 16px var(--shadow-pink);
  animation: peekBounce 1.8s ease-in-out infinite;
}
.memory-hud {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 5vw, 36px);
  margin-bottom: clamp(10px, 2vw, 24px);
  padding: clamp(8px, 1.6vw, 14px) clamp(16px, 4vw, 29px);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 2px 12px var(--shadow-pink);
}
/* 4 columns at every width; only the gap and card size scale. Cards keep a
   3:4 aspect so the board stays square-ish from 320px up to the 440px cap. */
.memory-grid {
  display: grid;
  gap: clamp(6px, 1.8vw, 11px);
  max-width: 440px;
  margin: 0 auto;
}
.memory-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  perspective: 600px;
}
.memory-card:disabled { cursor: default; }
.memory-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.3, 0.8, 0.4, 1);
}
.memory-card.is-flipped .memory-card-inner { transform: rotateY(180deg); }
.memory-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 4px 14px var(--shadow-pink);
}
.memory-card-back {
  background: linear-gradient(135deg, var(--pink-medium), var(--pink-deep));
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(22px, 5vw, 38px);
}
.memory-card-front {
  background: var(--white);
  color: var(--pink-deep);
  font-size: clamp(26px, 6vw, 48px);
  transform: rotateY(180deg);
}
/* A character-face card (the couple join the deck when sprites exist). */
.memory-card-img {
  width: 82%;
  height: 82%;
  pointer-events: none;
}
.memory-card.is-matched .memory-card-front {
  background: linear-gradient(135deg, #fff0f7, #ffe1ef);
  animation: memory-matched 0.5s ease;
}
@keyframes memory-matched {
  0% { transform: rotateY(180deg) scale(1); }
  50% { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(180deg) scale(1); }
}
.memory-end-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(320px, 55vh, 420px);
}
.memory-end-card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 1.4rem;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 3.5vw, 43px);
  box-shadow: 0 12px 40px var(--shadow-pink);
  max-width: min(360px, 100%);
}
.memory-end-title {
  font-size: clamp(24px, 5vw, 41px);
  color: var(--pink-deep);
  margin-bottom: 1rem;
}
.memory-end-stats {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 5vw, 48px);
  margin-bottom: 1rem;
}
.memory-end-stats .stat-val {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 7vw, 53px);
  font-weight: 800;
  color: var(--pink-deep);
  line-height: 1;
}
.memory-end-stats .stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-light);
}
.memory-end-msg {
  font-size: clamp(16px, 3.2vw, 25px);
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

/* ===== Quiz Game ===== */
.quiz-slide {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.quiz-slide .game-title { color: var(--pink-deep); }
.quiz-preview { margin: 0 auto 1.2rem; }
.quiz-preview-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 16vw, 84px);
  height: clamp(64px, 16vw, 84px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-medium), var(--pink-deep));
  color: var(--white);
  font-family: 'Playfair Display', serif;
  font-size: clamp(44px, 11vw, 62px);
  font-weight: 800;
  box-shadow: 0 8px 24px var(--shadow-pink);
  animation: peekBounce 1.8s ease-in-out infinite;
}
.quiz-play {
  max-width: 540px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 1.2rem;
  padding: clamp(20px, 4vw, 38px) clamp(16px, 3.5vw, 34px) clamp(24px, 4.5vw, 43px);
  box-shadow: 0 6px 24px var(--shadow-pink);
}
.quiz-progress {
  height: 8px;
  background: var(--pink-light);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.8rem;
}
.quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--pink-medium), var(--pink-deep));
  border-radius: 999px;
  transition: width 0.4s ease;
}
.quiz-count {
  font-size: clamp(12px, 2.4vw, 19px);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-light);
  margin-bottom: 0.4rem;
}
.quiz-question {
  font-size: clamp(22px, 4.4vw, 32px);
  color: var(--text-dark);
  margin-bottom: clamp(14px, 2.8vw, 29px);
  line-height: 1.3;
}
.quiz-choices {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.8vw, 14px);
}
.quiz-choice {
  display: block;
  width: 100%;
  min-height: 44px; /* comfortable touch target down to 320px */
  padding: clamp(12px, 2.4vw, 20px) clamp(16px, 3vw, 26px);
  font-family: inherit;
  font-size: clamp(16px, 3.2vw, 24px);
  font-weight: 600;
  color: var(--text-dark);
  background: var(--white);
  border: 2px solid var(--pink-soft);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}
.quiz-choice:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--pink-medium);
}
.quiz-choice:disabled { cursor: default; }
.quiz-choice.is-correct {
  background: linear-gradient(135deg, #e9fbef, #d6f6e1);
  border-color: #58c47e;
  color: #1f7a45;
}
.quiz-choice.is-incorrect {
  background: linear-gradient(135deg, #fdeaef, #fbd9e0);
  border-color: #e87a93;
  color: #b03551;
}
.quiz-choice.is-dimmed { opacity: 0.55; }
.quiz-feedback {
  margin-top: 1rem;
  font-size: clamp(16px, 3.2vw, 25px);
  font-weight: 700;
}
.quiz-feedback.is-right { color: #1f7a45; }
.quiz-feedback.is-wrong { color: #b03551; }
.quiz-next { margin-top: 1.2rem; }
.quiz-end-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(300px, 50vh, 380px);
}
.quiz-end-card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 1.4rem;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 3.5vw, 43px);
  box-shadow: 0 12px 40px var(--shadow-pink);
  max-width: min(380px, 100%);
}
.quiz-end-title {
  font-size: clamp(24px, 5vw, 41px);
  color: var(--pink-deep);
  margin-bottom: 1rem;
}
.quiz-end-score { margin-bottom: 1rem; }
.quiz-end-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(44px, 9vw, 62px);
  font-weight: 800;
  color: var(--pink-deep);
  line-height: 1;
}
.quiz-end-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-light);
}
.quiz-end-msg {
  font-size: clamp(16px, 3.2vw, 25px);
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

/* ===== Celebrations Canvas (Confetti + Fireworks) ===== */
.celebrations-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ===== Config Loading (while fetching site config) ===== */
.config-loading {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--pink-lightest), var(--pink-light), var(--pink-soft));
}
.config-loading-inner {
  text-align: center;
  color: var(--pink-deep);
}
.config-loading-heart {
  font-size: 3rem;
  color: var(--pink-deep);
  display: block;
  margin-bottom: 1rem;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ===== Premium add-on features ===== */

/* Background music control (your_song) */
.luv-music {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 30;
}
.luv-music-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 2px solid var(--pink-soft);
  color: var(--pink-deep);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--shadow-pink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.luv-music-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px var(--shadow-pink); }
.luv-music-panel {
  position: relative;
  width: 320px;
  max-width: 80vw;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 1.6rem 0.6rem 0.6rem;
  box-shadow: 0 8px 30px var(--shadow-pink);
}
.luv-music-panel iframe { border-radius: 12px; display: block; }
.luv-music-close {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  border: none;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--pink-deep);
  cursor: pointer;
}

/* Love letter slide (love_letter) */
.love-letter-slide {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 1rem;
}
.love-letter-paper {
  position: relative;
  background:
    repeating-linear-gradient(transparent, transparent 31px, rgba(232, 96, 154, 0.12) 32px),
    #fffdfa;
  border-radius: 16px;
  padding: 2.5rem 2rem 2rem;
  box-shadow: 0 12px 40px var(--shadow-pink);
  border: 1px solid var(--pink-light);
  max-height: 80vh;
  overflow-y: auto;
}
.love-letter-seal {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-medium), var(--pink-deep));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px var(--shadow-pink);
}
.love-letter-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.8rem;
  color: var(--pink-deep);
  text-align: center;
  margin-bottom: 1.2rem;
}
.love-letter-body {
  font-family: 'Lato', serif;
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--text-dark);
}
.love-letter-body p { margin-bottom: 1rem; }

/* Guestbook (let them reply) */
.guestbook-overlay {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 440px;
  z-index: 12;
}
.guestbook {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 10px 36px var(--shadow-pink);
  border: 2px solid var(--pink-light);
  max-height: 50vh;
  overflow-y: auto;
}
.guestbook-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  color: var(--pink-deep);
  text-align: center;
}
.guestbook-sub {
  font-size: 0.85rem;
  color: var(--text-light);
  text-align: center;
  margin-bottom: 0.9rem;
}
.guestbook-form { display: flex; flex-direction: column; gap: 0.5rem; }
.guestbook-name, .guestbook-body {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--pink-soft);
  border-radius: 12px;
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  outline: none;
  resize: vertical;
}
.guestbook-name:focus, .guestbook-body:focus { border-color: var(--pink-deep); }
.guestbook-btn {
  align-self: center;
  background: linear-gradient(135deg, var(--pink-medium), var(--pink-deep));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.6rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.guestbook-btn:hover:not(:disabled) { transform: translateY(-2px); }
.guestbook-btn:disabled { opacity: 0.6; cursor: default; }
.guestbook-error { color: #e74c3c; font-size: 0.85rem; text-align: center; }
.guestbook-thanks { text-align: center; color: var(--pink-deep); padding: 0.6rem; }
.guestbook-thanks i { font-size: 1.6rem; margin-bottom: 0.4rem; }
.guestbook-messages { margin-top: 1rem; border-top: 1px dashed var(--pink-soft); padding-top: 0.8rem; }
.guestbook-message {
  background: var(--pink-lightest);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
}
.guestbook-message-body { font-size: 0.95rem; color: var(--text-dark); line-height: 1.5; }
.guestbook-message-author { font-size: 0.82rem; color: var(--pink-deep); font-style: italic; margin-top: 0.2rem; text-align: end; }

/* Premium themes (premium_themes) — tint the whole experience. The base romantic
   pink theme is the default; these override the page backdrop + accent vars. */
.theme-starlit { --pink-lightest: #1a1442; --pink-light: #2a2065; }
.theme-starlit.lulu-app { background: radial-gradient(circle at 50% 0%, #2a2065 0%, #150f33 70%, #0c0822 100%); color: #e8e4ff; }
.theme-blossom.lulu-app { background: linear-gradient(135deg, #fff0f6 0%, #ffe0ef 40%, #ffd6f0 100%); }
.theme-golden.lulu-app { background: radial-gradient(circle at 50% 0%, #fff3d6 0%, #ffe0b0 50%, #ffc98f 100%); }
.theme-snow.lulu-app { background: linear-gradient(135deg, #f0f7ff 0%, #e3efff 50%, #ffeef6 100%); }

/* ============================================================================
   Block-based page builder (Phase 1) — published renderer styles.

   All visual theming flows through CSS variables that PageRenderer.vue sets on
   .luvb-page from the document's theme:
     --bg --surface --text --accent --font-heading --font-body
   so swapping the theme restyles every block with no per-block changes.

   This is bespoke CSS (the project does NOT compile Tailwind/daisyUI). Block
   classes are namespaced `luvb-*` to avoid clashing with the legacy slideshow.
   ========================================================================== */

/* The page is a full-viewport, independently scrollable surface. The app's body
   sets overflow:hidden for the legacy fixed slideshow, so the renderer owns its
   own scroll. */
.luvb-page {
  position: fixed;
  inset: 0;
  z-index: 1;
  color: var(--text);
  font-family: var(--font-body);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.luvb-page-scroll {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
  position: relative;
  z-index: 1;
}

/* ---- Floating background decorations (settings.effects.floating) ----------
   Hearts/gifts drift up the page behind the content. The layer is sticky to
   the viewport (the page owns its own scroll), never captures the pointer, and
   sits below .luvb-page-scroll (z-index 0 vs 1). */
.luvb-fx {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
}
.luvb-fx-item {
  position: absolute;
  top: 100vh;
  opacity: 0;
  color: var(--accent);
  animation: luvbFloatUp linear infinite;
  will-change: transform, opacity;
}
@keyframes luvbFloatUp {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
  100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

.luvb-page h1,
.luvb-page h2,
.luvb-page h3,
.luvb-page blockquote {
  font-family: var(--font-heading);
}

/* Shared block rhythm. */
.luvb {
  margin: 1.75rem 0;
}

.luvb-align-left { text-align: left; }
.luvb-align-center { text-align: center; }
.luvb-align-right { text-align: right; }

/* ---- Cover ---------------------------------------------------------------- */
.luvb-cover {
  position: relative;
  /* Break out of the centered column to span the full page width. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  margin-top: 0;
  padding: clamp(3rem, 12vh, 7rem) 1.25rem;
  background: var(--surface);
  overflow: hidden;
}
.luvb-cover.has-image {
  background-size: cover;
  background-position: center;
  color: #fff;
}
.luvb-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5));
}
.luvb-cover-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.luvb-cover.luvb-align-left .luvb-cover-inner { margin-left: 0; }
.luvb-cover.luvb-align-right .luvb-cover-inner { margin-right: 0; }
.luvb-cover-title {
  /* Responsive hero size, scaled by the S/M/L/XL token (--luvb-size-scale,
     default 1). blockStyle sets the variable on .luvb-cover-inner; it inherits. */
  font-size: calc(clamp(2.2rem, 7vw, 4rem) * var(--luvb-size-scale, 1));
  line-height: 1.05;
  margin: 0 0 0.5rem;
  color: inherit;
}
.luvb-cover:not(.has-image) .luvb-cover-title { color: var(--accent); }
.luvb-cover-subtitle {
  font-size: calc(clamp(1.05rem, 2.6vw, 1.5rem) * var(--luvb-size-scale, 1));
  font-style: italic;
  opacity: 0.92;
  margin: 0;
}

/* ---- Text ---------------------------------------------------------------- */
/* The size token (blockStyle) sets font-size on the .luvb-text wrapper; the
   paragraph is 1em so it inherits that override. Base 1.15rem = the "M" size. */
.luvb-text {
  font-size: 1.15rem;
}
.luvb-text-body {
  font-size: 1em;
  line-height: 1.7;
  margin: 0;
  white-space: pre-line;
}

/* ---- Photo --------------------------------------------------------------- */
.luvb-photo { margin-left: auto; margin-right: auto; }
.luvb-photo-frame {
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  max-height: 70vh;
}
.luvb-photo-frame.radius-sm { border-radius: 6px; }
.luvb-photo-frame.radius-md { border-radius: 14px; }
.luvb-photo-frame.radius-lg { border-radius: 24px; }
.luvb-photo-frame.radius-xl { border-radius: 36px; }
.luvb-photo-img {
  display: block;
  width: 100%;
  max-height: 70vh;
}
.luvb-photo-frame.fit-cover .luvb-photo-img { object-fit: cover; }
.luvb-photo-frame.fit-contain .luvb-photo-img { object-fit: contain; }
.luvb-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  font-size: 3rem;
  opacity: 0.4;
}
.luvb-photo-caption {
  margin-top: 0.6rem;
  text-align: center;
  font-style: italic;
  opacity: 0.85;
  font-size: 0.95rem;
}

/* ---- Slide show (internal block type: "gallery") ------------------------- */
.luvb-slideshow {
  position: relative;
  width: 100%;
}
.luvb-slideshow-viewport {
  position: relative; /* positioning context for the centred prev/next arrows */
  overflow: hidden;
  border-radius: 16px;
  touch-action: pan-y; /* let the page scroll vertically; we own horizontal drag */
  cursor: grab;
}
.luvb-slideshow-viewport:active {
  cursor: grabbing;
}
.luvb-slideshow-track {
  display: flex;
}
.luvb-slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
}
.luvb-slide-frame {
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  /* A stable stage so portrait + landscape photos never blow out the layout. */
  aspect-ratio: 4 / 3;
}
.luvb-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.luvb-slide-caption {
  margin: 0.6rem auto 0;
  max-width: 90%;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.85;
  /* Long captions clamp to a fixed area instead of pushing the layout around;
     the full text scrolls within this box. */
  max-height: 4.5em;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.luvb-slideshow-empty {
  text-align: center;
  opacity: 0.5;
  padding: 2rem 0;
}

/* Prev / next arrows */
.luvb-slideshow-arrow {
  position: absolute;
  /* Anchored to the image viewport, so they sit dead-centre on the photo
     regardless of caption/dots height below. */
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s ease, transform 0.1s ease;
}
.luvb-slideshow-arrow:hover {
  background: rgba(0, 0, 0, 0.62);
}
.luvb-slideshow-arrow:active {
  transform: translateY(-50%) scale(0.92);
}
.luvb-slideshow-arrow.is-prev {
  inset-inline-start: 0.6rem;
}
.luvb-slideshow-arrow.is-next {
  inset-inline-end: 0.6rem;
}
/* RTL: logical insets already swap the arrow sides; flip the chevron glyphs so
   "previous" (now on the right) points right and "next" (now on the left)
   points left — the natural right-to-left reading direction. */
[dir="rtl"] .luvb-slideshow-arrow {
  transform: translateY(-50%) scaleX(-1);
}
[dir="rtl"] .luvb-slideshow-arrow:active {
  transform: translateY(-50%) scaleX(-1) scale(0.92);
}

/* Dots + counter */
.luvb-slideshow-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.7rem;
}
.luvb-slideshow-dots {
  display: flex;
  gap: 0.4rem;
}
.luvb-slideshow-dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.luvb-slideshow-dot.is-active {
  opacity: 0.95;
  transform: scale(1.25);
}
.luvb-slideshow-count {
  font-size: 0.8rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ---- Video --------------------------------------------------------------- */
.luvb-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.luvb-video-embed,
.luvb-video-file {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.luvb-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 3rem;
  opacity: 0.6;
}
.luvb-video-caption {
  margin-top: 0.6rem;
  text-align: center;
  font-style: italic;
  opacity: 0.85;
  font-size: 0.95rem;
}

/* ---- Voice note ----------------------------------------------------------- */
.luvb-voice {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.luvb-voice-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.luvb-voice-btn {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.12s;
}
.luvb-voice-btn:hover {
  transform: scale(1.08);
}
.luvb-voice-body {
  flex: 1 1 auto;
  min-width: 0;
}
.luvb-voice-track {
  height: 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  cursor: pointer;
}
.luvb-voice-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.15s linear;
}
.luvb-voice-time {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}
.luvb-voice-mic {
  flex: none;
  color: var(--accent);
  opacity: 0.5;
  font-size: 1.1rem;
}
/* Fresh block with no file yet (editor canvas): a soft dashed placeholder. */
.luvb-voice-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.2rem;
  border: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  color: var(--accent);
  opacity: 0.75;
  font-size: 0.95rem;
}
.luvb-voice-caption {
  margin-top: 0.6rem;
  text-align: center;
  font-style: italic;
  opacity: 0.85;
  font-size: 0.95em;
}

/* ---- Quote --------------------------------------------------------------- */
/* Base quote size lives on the wrapper so the size token (blockStyle, applied
   to .luvb-quote) can override it; the quote text is 1em and inherits it. */
.luvb-quote {
  text-align: center;
  padding: 1.5rem 1rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
}
.luvb-quote-text {
  font-size: 1em;
  line-height: 1.4;
  font-style: italic;
  margin: 0;
  color: var(--text);
}
.luvb-quote-attr {
  margin-top: 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Countdown (inline content block) ------------------------------------ */
.luvb-countdown {
  text-align: center;
  padding: 1.5rem 1rem;
}
.luvb-countdown-label {
  font-family: var(--font-heading);
  font-size: clamp(18px, 5vw, 31px);
  margin: 0 0 1rem;
  color: var(--accent);
}
/* One non-wrapping row: cells share the width and shrink to fit 4-across on a
   phone (was a fixed 72px min-width that forced the 4th unit to wrap). */
.luvb-countdown-timer {
  display: flex;
  gap: clamp(6px, 2vw, 14px);
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}
.luvb-countdown-cell {
  flex: 1 1 0;
  min-width: 0;
  max-width: 96px;
  padding: clamp(8px, 2.4vw, 14px) clamp(4px, 1.6vw, 11px);
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.luvb-countdown-num {
  font-family: var(--font-heading);
  font-size: clamp(20px, 6.5vw, 36px);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.luvb-countdown-unit {
  margin-top: 0.35rem;
  font-size: clamp(8px, 2.2vw, 12px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.luvb-countdown-done {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--accent);
}

/* ---- Divider ------------------------------------------------------------- */
.luvb-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.luvb-divider-line {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
}
.luvb-divider-mark {
  color: var(--accent);
  font-size: 1.1rem;
}

/* ---- Spacer -------------------------------------------------------------- */
.luvb-spacer { margin: 0; }

/* ---- Game (wraps the existing interactive games) ------------------------- */
.luvb-game {
  background: var(--surface);
  border-radius: 22px;
  padding: clamp(12px, 3vw, 24px) clamp(8px, 2vw, 16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.luvb-game-stage {
  /* The game components fill their parent; give them a stable arena that
     scales with the viewport instead of a fixed desktop height. */
  min-height: clamp(340px, 56vh, 520px);
}

/* ---- Footer -------------------------------------------------------------- */
.luvb-page-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(127, 127, 127, 0.2);
}
.luvb-page-footer-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  opacity: 0.8;
}
.luvb-page-footer-link:hover { opacity: 1; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 600px) {
  .luvb-page-scroll { padding: 0 1rem 1.5rem; }
  /* Vertical-only: the `margin: 1.25rem 0` shorthand used to also zero the
     horizontal margins, which (being later in the cascade at equal specificity)
     clobbered .luvb-cover's negative full-bleed margins on phones and left the
     cover sitting off-centre inside the column. */
  .luvb {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .luvb-game-stage { min-height: 460px; }
}

/* ============================================================================
   Lovvur visual editor (Phase 2) — bespoke chrome for the block builder.

   Scoped under `.lue` so it never touches the published SPA. The shared app.css
   pins html/body to a 24px ROOT (the published gift is authored in root `rem`),
   which is wrong for the editor chrome. Rather than re-base the root (which would
   shrink the canvas's gift blocks too — they use root `rem`), the editor CHROME
   is authored in `em` relative to `.lue`'s own 16px base, so it renders at a sane
   modern size INDEPENDENT of the 24px root. The CENTER CANVAS deliberately keeps
   the published 24px base on its rendered blocks (those few rules still use root
   `rem`/an explicit 24px) so the preview === the live page.
   ============================================================================ */

.lue {
  --lue-rose: #d6356f;
  --lue-rose-deep: #b0285c;
  --lue-pink: #ff5e9a;
  --lue-pink-soft: #ff86b3;
  --lue-ink: #4a2c39;
  --lue-muted: #8a5e6e;
  --lue-line: #ffd0e4;
  --lue-line-soft: #ffe3ef;
  --lue-panel: #fff;
  --lue-bg: #fff6fb;
  --lue-bar-h: 56px;
  --lue-mbar-h: 58px;

  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* No grey tap flash on iOS/Android; selection rings are our feedback. */
  -webkit-tap-highlight-color: transparent;
  font-family: 'Lato', system-ui, sans-serif;
  /* The chrome's em base. All .lue-* chrome font-sizes are `em` relative to this,
     so they're independent of the 24px document root the published gift needs. */
  font-size: 16px;
  line-height: 1.4;
  color: var(--lue-ink);
  background: var(--lue-bg);
  /* Backstop: never let in-flow chrome (e.g. the toolbar) cause a horizontal
     scroll/clip on narrow phones. Fixed-position descendants (mbar, sheet,
     modal) are relative to the viewport and are NOT clipped by this. */
  overflow: hidden;
}

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

/* ===== Top bar ===== */
.lue-bar {
  flex: none;
  height: var(--lue-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0 1em;
  background: linear-gradient(180deg, #fff 0%, #fffafc 100%);
  border-bottom: 1px solid var(--lue-line);
  box-shadow: 0 2px 12px rgba(200, 60, 120, 0.07);
  z-index: 10;
}
.lue-bar-left,
.lue-bar-right {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
/* The left group shrinks (and its brand truncates) so the right-hand action
   buttons are never pushed off the right edge — important now that the buttons
   carry localised labels of varying length. */
.lue-bar-left {
  flex: 1 1 auto;
  min-width: 0;
}
.lue-bar-right {
  flex: 0 0 auto;
}
.lue-brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3em;
  font-weight: 700;
  color: var(--lue-rose);
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lue-bar-sep {
  color: var(--lue-line);
}
.lue-bar-title {
  font-weight: 700;
  color: var(--lue-muted);
}
.lue-save-status {
  font-size: 0.82em;
  font-weight: 700;
  padding: 0.25em 0.6em;
  border-radius: 999px;
}
.lue-save-status.is-clean,
.lue-save-status.is-saved {
  color: #1f8a4c;
  background: #e6f7ec;
}
.lue-save-status.is-dirty {
  color: #b07900;
  background: #fff1d6;
}
.lue-save-status.is-saving {
  color: var(--lue-rose);
  background: #ffe3ef;
}
.lue-save-status.is-error {
  color: #c0392b;
  background: #fdecea;
}

/* ===== Body split ===== */
.lue-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.lue-side {
  flex: none;
  /* 360px (was 330px): gives two-up rows like the game SCORING fields room to
     breathe — labels stay on one line, number inputs keep a usable width. Below
     768px the sidebar is dropped entirely (Vue swaps in the bottom sheet). */
  width: 360px;
  background: #fff;
  border-right: 1px solid var(--lue-line);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1em;
  scrollbar-width: thin;
  scrollbar-color: var(--lue-line) transparent;
}
.lue-side::-webkit-scrollbar {
  width: 8px;
}
.lue-side::-webkit-scrollbar-thumb {
  background: var(--lue-line);
  border-radius: 999px;
}
.lue-stage {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 214, 231, 0.45), transparent 60%),
    var(--lue-bg);
}

/* ===== Tabs ===== */
.lue-tabs {
  display: grid;
  /* minmax(0, 1fr) forces three TRULY equal tracks — plain 1fr lets a wider
     label (e.g. "Settings") inflate its track and knock the tabs out of line. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25em;
  background: var(--lue-bg);
  border-radius: 12px;
  padding: 0.25em;
  margin-bottom: 0.9em;
}
.lue-tab {
  /* grid handles equal widths; keep the box model identical for every tab so
     the active pill lines up perfectly. */
  border: none;
  background: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85em;
  color: var(--lue-muted);
  text-align: center;
  white-space: nowrap;
  padding: 0.5em 0.4em;
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.lue-tab:hover:not(.is-active) {
  color: var(--lue-rose);
}
.lue-tab.is-active {
  background: #fff;
  color: var(--lue-rose-deep);
  box-shadow: 0 2px 8px rgba(200, 60, 120, 0.12);
}

.lue-back {
  border: none;
  background: none;
  font-family: inherit;
  font-weight: 700;
  color: var(--lue-rose);
  cursor: pointer;
  padding: 0.3em 0;
  margin-bottom: 0.5em;
}

/* ===== Sections ===== */
.lue-section {
  margin-top: 1.1em;
  padding-top: 0.9em;
  border-top: 1px solid var(--lue-line-soft);
}
.lue-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.lue-section-label {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.68em;
  font-weight: 800;
  color: var(--lue-rose);
  margin: 0 0 0.6em;
}

/* ===== Palette ===== */
.lue-palette-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5em;
}
.lue-palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  padding: 0.75em 0.4em;
  border: 1.5px solid var(--lue-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s, background 0.15s;
}
.lue-palette-item:hover {
  border-color: var(--lue-pink-soft);
  background: #fffafc;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(255, 94, 154, 0.18);
}
.lue-palette-item:active {
  transform: translateY(0);
}
/* Font Awesome block icon — accent-coloured, one consistent visual size. */
.lue-palette-icon {
  font-size: 1.25em;
  line-height: 1.4em;
  color: var(--lue-rose);
}
.lue-palette-label {
  font-size: 0.78em;
  font-weight: 700;
  color: var(--lue-ink);
}

/* ===== Outline (block list) ===== */
.lue-outline {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.lue-outline-row {
  display: flex;
  align-items: stretch;
  gap: 0.3em;
}
.lue-outline-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex: 1;
  min-width: 0;
  text-align: start;
  padding: 0.5em 0.65em;
  border: 1px solid var(--lue-line-soft);
  border-radius: 10px;
  background: var(--lue-bg);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
  color: var(--lue-ink);
}
.lue-outline-item:hover {
  border-color: var(--lue-pink-soft);
  background: #fff;
}
.lue-outline-icon {
  font-size: 0.85em;
  width: 1.1em;
  text-align: center;
  color: var(--lue-rose);
}
.lue-outline-label {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Per-block quick remove, at the end of each outline row. */
.lue-outline-del {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  border: 1px solid var(--lue-line-soft);
  border-radius: 10px;
  background: var(--lue-bg);
  color: #c0392b;
  font-size: 0.9em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lue-outline-del:hover {
  background: #fdecea;
  border-color: #f0b4ab;
}

/* ===== Inspector ===== */
.lue-inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.5em;
}
.lue-inspector-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--lue-rose-deep);
}
.lue-inspector-title-icon {
  font-size: 0.85em;
  color: var(--lue-rose);
  margin-right: 0.15em;
}
.lue-inspector-actions {
  display: flex;
  gap: 0.15em;
}

/* ===== Form controls ===== */
.lue-field {
  margin-bottom: 0.8em;
}
.lue-label {
  display: block;
  font-weight: 700;
  font-size: 0.8em;
  color: var(--lue-rose-deep);
  margin-bottom: 0.3em;
}
.lue-hint {
  font-size: 0.76em;
  color: var(--lue-muted);
  margin: 0.3em 0 0;
  line-height: 1.45;
}
.lue-input,
.lue-textarea {
  width: 100%;
  padding: 0.55em 0.7em;
  border: 1.5px solid var(--lue-line);
  border-radius: 10px;
  font-size: 0.9em;
  font-family: inherit;
  color: var(--lue-ink);
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lue-input:focus,
.lue-textarea:focus {
  border-color: var(--lue-pink);
  box-shadow: 0 0 0 3px rgba(255, 94, 154, 0.15);
}
.lue-input-sm {
  padding: 0.4em 0.6em;
  font-size: 0.82em;
}
.lue-textarea {
  resize: vertical;
  min-height: 4.5em;
}
.lue-range {
  width: 100%;
  accent-color: var(--lue-pink);
}

/* Width slider + reset chip for media blocks (mirrors the canvas corner-drag). */
.lue-width-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.lue-width-row .lue-range {
  flex: 1;
  min-width: 0;
}

select.lue-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath fill=%27%23d6356f%27 d=%27M0 0l5 6 5-6z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7em center;
  padding-right: 1.8em;
}

/* ===== Segmented controls (align/size/font/radius) ===== */
.lue-segmented {
  display: inline-flex;
  border: 1.5px solid var(--lue-line);
  border-radius: 10px;
  overflow: hidden;
}
.lue-seg {
  border: none;
  background: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.8em;
  color: var(--lue-muted);
  padding: 0.4em 0.7em;
  cursor: pointer;
  border-right: 1px solid var(--lue-line);
}
.lue-seg:last-child {
  border-right: none;
}
.lue-seg.is-active {
  background: var(--lue-pink);
  color: #fff;
}

/* ===== Colour control ===== */
.lue-color-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.lue-color {
  width: 42px;
  height: 32px;
  border: 1.5px solid var(--lue-line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 2px;
}

/* ===== Buttons ===== */
.lue-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: 0.5em 1em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9em;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
}
.lue-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.lue-btn-sm {
  padding: 0.4em 0.8em;
  font-size: 0.82em;
}
.lue-btn-primary {
  background: linear-gradient(135deg, var(--lue-pink), var(--lue-pink-soft));
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 94, 154, 0.35);
}
.lue-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
}
.lue-btn-ghost {
  background: #fff;
  color: var(--lue-rose);
  border: 1.5px solid var(--lue-line);
}
.lue-btn-ghost:hover:not(:disabled) {
  background: var(--lue-bg);
  border-color: var(--lue-pink-soft);
}
.lue-btn-block {
  width: 100%;
  margin-top: 0.5em;
}
.lue-btn.is-busy {
  opacity: 0.7;
  pointer-events: none;
}

.lue-iconbtn {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--lue-rose);
  font-size: 0.95em;
  line-height: 1;
  padding: 0.3em 0.4em;
  border-radius: 8px;
}
.lue-iconbtn:hover {
  background: var(--lue-line-soft);
}
.lue-iconbtn:disabled {
  opacity: 0.35;
  cursor: default;
}
.lue-iconbtn:disabled:hover {
  background: none;
}
.lue-iconbtn-danger {
  color: #c0392b;
}
.lue-iconbtn-danger:hover {
  background: #fdecea;
}

/* ===== Media field (drag-or-click dropzone + thumbnail preview) ===== */
.lue-media {
  margin-bottom: 0.8em;
}

/* The visually-hidden native file input layered over its label. */
.lue-hidden-file {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

/* Empty state: dashed dropzone. */
.lue-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  text-align: center;
  min-height: 116px;
  padding: 1.1em 0.9em;
  border: 2px dashed var(--lue-line);
  border-radius: 12px;
  background: var(--lue-bg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.lue-dropzone:hover {
  border-color: var(--lue-pink-soft);
  background: #fff;
}
.lue-dropzone.is-drag {
  border-color: var(--lue-pink);
  background: #fff;
  border-style: solid;
  transform: scale(1.01);
  box-shadow: 0 8px 20px rgba(255, 94, 154, 0.18);
}
.lue-dropzone.is-busy {
  pointer-events: none;
  opacity: 0.85;
}
.lue-dropzone-icon {
  font-size: 1.5em;
  line-height: 1;
  color: var(--lue-rose);
}
.lue-dropzone-title {
  font-weight: 800;
  font-size: 0.86em;
  color: var(--lue-rose-deep);
}
.lue-dropzone-hint {
  font-size: 0.74em;
  color: var(--lue-muted);
}

/* Filled state: thumbnail with a hover overlay (replace / remove). */
.lue-media-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--lue-line);
  background: var(--lue-bg);
}
.lue-media-img {
  display: block;
  width: 100%;
  max-height: 170px;
  object-fit: cover;
}
.lue-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: rgba(74, 44, 57, 0.0);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.lue-media-preview:hover .lue-media-overlay {
  opacity: 1;
  background: rgba(74, 44, 57, 0.5);
}
.lue-media-overlaybtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.4em 0.8em;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: var(--lue-rose-deep);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.8em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.lue-media-overlaybtn:hover {
  background: var(--lue-line-soft);
}
.lue-media-busy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: rgba(255, 255, 255, 0.82);
  color: var(--lue-rose-deep);
  font-weight: 700;
  font-size: 0.82em;
}

/* "Your characters & keepsakes" strip: the couple's generated images one
   click away (insert) with a tiny per-thumb download button. */
.lue-media-sprites {
  margin-top: 0.55em;
}
.lue-media-sprites-label {
  margin: 0 0 0.35em;
  font-size: 0.74em;
  font-weight: 800;
  color: var(--lue-rose-deep);
}
.lue-media-sprites-label .fa-solid {
  color: var(--lue-pink);
  margin-right: 0.15em;
}
.lue-media-sprites-row {
  display: flex;
  gap: 0.45em;
  overflow-x: auto;
  padding-bottom: 0.25em;
}
.lue-media-sprite {
  position: relative;
  flex: 0 0 auto;
}
.lue-media-sprite-pick {
  display: block;
  padding: 0;
  border: 2px solid var(--lue-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--lue-bg);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.lue-media-sprite-pick:hover {
  border-color: var(--lue-pink);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(255, 94, 154, 0.22);
}
.lue-media-sprite.is-active .lue-media-sprite-pick {
  border-color: var(--lue-pink);
  box-shadow: 0 0 0 2px rgba(255, 94, 154, 0.25);
}
.lue-media-sprite-img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: cover;
}
.lue-media-sprite-dl {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--lue-line);
  color: var(--lue-rose-deep);
  font-size: 0.62em;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.lue-media-sprite-dl:hover {
  background: #fff;
  color: var(--lue-pink);
  border-color: var(--lue-pink-soft);
}

/* Collapsible "paste a link" escape hatch. */
.lue-media-url {
  margin-top: 0.5em;
}
.lue-media-url > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.76em;
  font-weight: 700;
  color: var(--lue-muted);
  padding: 0.2em 0;
  user-select: none;
}
.lue-media-url > summary::-webkit-details-marker {
  display: none;
}
.lue-media-url > summary .fa-solid {
  font-size: 0.85em;
}
.lue-media-url[open] > summary {
  color: var(--lue-rose);
  margin-bottom: 0.35em;
}

/* Double-tap on a button (spamming move-up, whacking + in a stepper) must
   never trigger the browser's double-tap ZOOM: manipulation keeps pan/pinch
   but drops the double-tap gesture (and its 300ms tap delay) on everything
   interactive. The sheet handle re-asserts `none`, its drag owns the touch. */
.lue button,
.lue select,
.lue summary,
.lue a,
.lue label {
  touch-action: manipulation;
}
.lue button.lue-sheet-handle {
  touch-action: none;
}

/* Guest "save my progress" email bar (under the toolbar). */
.lue-emailbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.5em 1em;
  background: var(--lue-line-soft);
  border-bottom: 1px solid var(--lue-line);
  color: var(--lue-rose-deep);
  font-size: 0.85em;
  font-weight: 600;
}
.lue-emailbar-input {
  flex: 1 1 12em;
  max-width: 18em;
  padding: 0.35em 0.6em;
}
.lue-emailbar-error {
  color: #c0392b;
  font-weight: 700;
}
.lue-emailbar-x {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--lue-muted);
  cursor: pointer;
  font-size: 1em;
  padding: 0.2em 0.4em;
}

/* Leave-prompt modal buttons stack. */
.lue-leave-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-top: 0.9em;
}

/* Voice-note recorder (inspector): record with the mic, upload on stop. */
.lue-recorder {
  margin-top: 0.4em;
}
.lue-recorder-btn {
  width: 100%;
  justify-content: center;
  background: var(--lue-pink);
  color: #fff;
  border: none;
}
.lue-recorder-btn:hover {
  background: var(--lue-rose-deep);
}
.lue-recorder-live {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.45em 0.2em;
  font-weight: 700;
  color: var(--lue-rose-deep);
}
.lue-recorder-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e0245e;
  animation: lue-rec-pulse 1.1s ease-in-out infinite;
}
@keyframes lue-rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}
.lue-recorder-time {
  font-variant-numeric: tabular-nums;
  min-width: 3em;
}
.lue-recorder-preview {
  display: block;
  width: 100%;
  margin: 0.3em 0 0.5em;
}

/* Small inline spinner (uploads). */
.lue-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--lue-line);
  border-top-color: var(--lue-pink);
  border-radius: 50%;
  display: inline-block;
  animation: lue-spin 0.7s linear infinite;
}
@keyframes lue-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Gallery items in inspector ===== */
.lue-gallery-items {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin: 0.5em 0;
}
.lue-gallery-item {
  padding: 0.6em;
  border: 1px solid var(--lue-line-soft);
  border-radius: 10px;
  background: var(--lue-bg);
}
.lue-gallery-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45em;
}
.lue-gallery-item-num {
  font-weight: 800;
  font-size: 0.78em;
  color: var(--lue-rose);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lue-gallery-item-moves {
  display: flex;
  gap: 0.2em;
}
.lue-gallery-item-row {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.45em;
}
.lue-gallery-item-row .lue-input {
  flex: 1;
}

/* ===== Quiz authoring (game block) ===== */
.lue-quiz-q {
  padding: 0.7em;
  border: 1px solid var(--lue-line-soft);
  border-radius: 10px;
  background: var(--lue-bg);
  margin-bottom: 0.6em;
}
.lue-quiz-q-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4em;
}
.lue-quiz-q-num {
  font-weight: 800;
  font-size: 0.82em;
  color: var(--lue-rose);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lue-quiz-choice {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.4em;
}
.lue-quiz-choice .lue-input {
  flex: 1;
}
.lue-quiz-correct {
  flex: 0 0 auto;
  width: 1.7em;
  height: 1.7em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lue-line);
  border-radius: 50%;
  background: #fff;
  color: var(--lue-muted);
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lue-quiz-correct.is-on {
  border-color: #58c47e;
  background: #e9fbef;
  color: #1f7a45;
}

/* ===== Game config (whack / kiss / reasons authoring) ===== */
/* Two fields side by side (e.g. "Kisses available" + "Hits to win"): a true
   2-col grid — minmax(0, 1fr) keeps the tracks EQUAL and lets the inputs
   shrink-to-track instead of overflowing, so labels sit on one line above
   full-width inputs rather than wrapping around squeezed boxes. */
.lue-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6em;
}
.lue-field-row .lue-field {
  min-width: 0;
}
.lue-field-row .lue-input {
  width: 100%;
}
.lue-reason-row {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.4em;
}
.lue-reason-row .lue-input {
  flex: 1;
}
.lue-reason-num {
  flex: 0 0 1.4em;
  text-align: center;
  font-weight: 800;
  font-size: 0.78em;
  color: var(--lue-rose);
}

/* ===== Theme picker ===== */
.lue-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5em;
}
.lue-theme-card {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0.6em;
  border: 2px solid var(--lue-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}
.lue-theme-card.is-active {
  border-color: var(--lue-pink);
  box-shadow: 0 6px 16px rgba(255, 94, 154, 0.2);
}
.lue-theme-swatches {
  display: flex;
  height: 28px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.lue-theme-swatch {
  flex: 1;
}
.lue-theme-name {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--lue-ink);
}

/* ===== Errors ===== */
.lue-error {
  color: #c0392b;
  font-size: 0.78em;
  margin: 0.3em 0 0;
  font-weight: 600;
}

/* ============================================================================
   CANVAS — renders the document with the published block CSS. We keep the
   published 24px base here so the preview matches the live page 1:1. Each block
   gets a selectable shell with hover controls.
   ============================================================================ */
.lue-canvas {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* Reserve the scrollbar gutter up front so the container query units below
     resolve against the VISIBLE width (otherwise 100cqw includes the scrollbar
     and the cover bleeds ~8px past the canvas). */
  scrollbar-gutter: stable;
  font-size: 24px; /* match the published root base so blocks scale identically */
  font-family: var(--font-body, 'Lato', sans-serif);
  /* Make the canvas a size container so the full-bleed cover override below can
     span exactly the canvas width via cqw units (the editor viewport is narrower
     than the window — the sidebar eats ~360px — so the published 100vw breakout
     would overflow here). */
  container-type: inline-size;
}
/* PARITY: constrain block content to the SAME content column as the published
   page (`.luvb-page-scroll` in blocks.css: max-width 820px, 1.25rem side
   padding, centred). Without this the canvas band spanned the whole stage, so
   a width_pct-resized photo resolved against a different pixel width than on
   the live page and the two surfaces disagreed about its size. */
.lue-canvas-scroll {
  min-height: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
}
/* The published cover breaks out of the column to span the full page width
   (margin 50% - 50vw). Inside the editor the equivalent "page" is the canvas,
   so re-anchor the breakout to the canvas width (cqw) instead of the window. */
/* Editor: make the WRAP that holds a full-bleed Cover span the whole canvas, so
   the entire cover is one selectable click target (not just the narrow column
   under it); the cover then simply fills the wrap. The published page keeps its
   own 100vw breakout in blocks.css. */
.lue-canvas .lue-block-wrap:has(.luvb-cover) {
  margin-left: calc(50% - 50cqw);
  margin-right: calc(50% - 50cqw);
  width: 100cqw;
}
.lue-canvas .lue-block-wrap:has(.luvb-cover) .luvb-cover {
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

.lue-canvas-empty {
  text-align: center;
  color: #fff;
  padding: 16vh 1rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  font-size: 0.82rem;
  line-height: 1.5;
}
.lue-canvas-empty-emoji {
  font-size: 2.6rem;
  margin-bottom: 0.6rem;
  animation: lue-float-soft 3s ease-in-out infinite;
}
@keyframes lue-float-soft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Selectable wrapper around each rendered block. */
.lue-block-wrap {
  position: relative;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 0.12s, background 0.12s;
}
.lue-block-wrap:hover {
  outline-color: rgba(255, 94, 154, 0.5);
}
/* Selection ring drawn as a stacked overlay so it stays visible even over a
   full-bleed cover's background (a plain inset outline gets painted over). */
.lue-block-wrap.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--lue-pink);
  pointer-events: none;
  z-index: 6;
}
/* The rendered block itself shouldn't capture clicks (so the whole band selects,
   and games/inputs inside don't steal the click). */
.lue-block-render {
  pointer-events: none;
}

/* Small floating type tag (top-left) and controls (top-right) — sized in px so
   they're unaffected by the 24px canvas base. */
.lue-block-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(214, 53, 111, 0.85);
  padding: 2px 8px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}
.lue-block-wrap:hover .lue-block-tag,
.lue-block-wrap.is-selected .lue-block-tag {
  opacity: 1;
}

.lue-block-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  gap: 3px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  padding: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.12s;
}
.lue-block-wrap:hover .lue-block-controls,
.lue-block-wrap.is-selected .lue-block-controls {
  opacity: 1;
}
/* Corner resize handles for media blocks (photo / slide show / video). Sized in
   px like the rest of the chrome so the 24px canvas base doesn't scale them.
   Each handle is a 24px hit target with a smaller visible dot centred on the
   media frame's corner; positions come inline from EditorCanvas. */
.lue-resize-handle {
  position: absolute;
  z-index: 6;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none; /* own the gesture — don't let touch scroll the canvas */
  cursor: nwse-resize;
}
.lue-resize-handle.is-ne,
.lue-resize-handle.is-sw {
  cursor: nesw-resize;
}
.lue-resize-handle::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--lue-pink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s, background 0.1s;
}
.lue-resize-handle:hover::after,
.lue-resize-handle:active::after {
  background: var(--lue-pink);
  transform: scale(1.15);
}

/* Live "NN%" badge shown in the middle of the frame while dragging. */
.lue-resize-badge {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(214, 53, 111, 0.92);
  padding: 3px 9px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}

/* Small chip under a narrowed frame: one click back to full width. */
.lue-resize-reset {
  position: absolute;
  z-index: 6;
  transform: translateX(-50%);
  border: none;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--lue-rose);
  background: rgba(255, 255, 255, 0.96);
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.lue-resize-reset:hover {
  color: #fff;
  background: var(--lue-pink);
}

.lue-block-ctl {
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  line-height: 1;
  color: var(--lue-rose);
  padding: 5px 7px;
  border-radius: 7px;
}
.lue-block-ctl:hover:not(:disabled) {
  background: var(--lue-line-soft);
}
.lue-block-ctl:disabled {
  opacity: 0.3;
  cursor: default;
}
.lue-block-ctl-danger {
  color: #c0392b;
}
.lue-block-ctl-danger:hover:not(:disabled) {
  background: #fdecea;
}
/* The pen is the primary per-block action (one-tap edit, esp. on mobile). */
.lue-block-ctl-edit {
  color: #fff;
  background: var(--lue-pink);
}
.lue-block-ctl-edit:hover:not(:disabled) {
  background: var(--lue-rose-deep);
}

/* ============================================================================
   PUBLISH MODAL — checkout lives here now (email + final slug → pay / publish).
   ============================================================================ */
.lue-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  background: rgba(74, 44, 57, 0.45);
  backdrop-filter: blur(3px);
  animation: lue-fade 0.15s ease;
}
@keyframes lue-fade {
  from {
    opacity: 0;
  }
}
.lue-modal {
  position: relative;
  width: 100%;
  max-width: 26em;
  background: #fff;
  border-radius: 20px;
  padding: 1.6em 1.5em 1.5em;
  box-shadow: 0 24px 60px rgba(200, 60, 120, 0.3);
  animation: lue-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes lue-pop {
  from {
    transform: scale(0.94) translateY(8px);
    opacity: 0;
  }
}
.lue-modal-x {
  position: absolute;
  top: 0.7em;
  right: 0.7em;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--lue-bg);
  color: var(--lue-muted);
  font-size: 0.9em;
  cursor: pointer;
  line-height: 1;
}
.lue-modal-x:hover {
  background: var(--lue-line-soft);
  color: var(--lue-rose);
}
.lue-modal-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4em;
  color: var(--lue-rose-deep);
  margin: 0 0 0.3em;
}
.lue-modal-sub {
  color: var(--lue-muted);
  font-size: 0.9em;
  margin: 0 0 1.1em;
  line-height: 1.5;
}
.lue-modal-error {
  color: #c0392b;
  background: #fdecea;
  border-radius: 10px;
  padding: 0.55em 0.75em;
  font-size: 0.84em;
  font-weight: 600;
  margin: 0 0 0.8em;
}
.lue-modal-note {
  color: var(--lue-muted);
  font-size: 0.78em;
  text-align: center;
  margin: 0.7em 0 0;
  line-height: 1.45;
}

/* Slug input with a fixed .lovvur.com suffix. */
.lue-slug-row {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--lue-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lue-slug-row:focus-within {
  border-color: var(--lue-pink);
  box-shadow: 0 0 0 3px rgba(255, 94, 154, 0.15);
}
.lue-slug-row .lue-input {
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.lue-slug-row .lue-input:focus {
  box-shadow: none;
}
.lue-slug-suffix {
  display: flex;
  align-items: center;
  padding: 0 0.7em;
  background: var(--lue-bg);
  color: var(--lue-muted);
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
  border-left: 1px solid var(--lue-line);
}

/* ============================================================================
   MOBILE LAYOUT (canvas-primary, single scroll + slide-up controls sheet).

   Driven by the reactive `.lue.is-mobile` class (Editor.vue, matchMedia <768px)
   rather than a pure media query, so the Vue template can swap the sidebar for a
   bottom action bar + sheet and we never render two competing scroll regions.

   The OLD behaviour stacked the sidebar above the canvas → two scroll regions
   fought each other (the "janky switching" bug). Now:
     • the CANVAS is the one full-width, natural scroll region;
     • a fixed bottom bar opens controls in a bottom SHEET over the canvas;
     • while a sheet is open we lock the canvas scroll (.sheet-open) so only ONE
       surface scrolls at a time.
   ============================================================================ */
.lue.is-mobile {
  /* svh/dvh (not vh) so the iOS URL bar showing/hiding doesn't jump the layout. */
  height: 100svh;
  height: 100dvh;
}
.lue.is-mobile .lue-body {
  /* Canvas fills the body; the bottom bar is a sibling overlay. */
  flex-direction: column;
}
.lue.is-mobile .lue-stage {
  min-height: 0;
  /* Leave room for the fixed bottom action bar so the last block isn't hidden. */
  padding-bottom: calc(var(--lue-mbar-h) + env(safe-area-inset-bottom, 0px));
}
.lue.is-mobile .lue-canvas {
  /* The single natural scroll region. Vertical pan only; the slideshow block
     owns its own horizontal drag (touch-action pan-y there). */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
/* SCROLL LOCK: while a controls sheet is open, freeze the canvas so the ONLY
   scrollable thing is the sheet body. This is the core fix for the jank. */
.lue.is-mobile.sheet-open .lue-canvas {
  overflow: hidden;
  touch-action: none;
}

/* iOS zooms the whole page when focusing any input under 16px and often
   leaves it zoomed, wrecking the editor layout. At phone widths every text
   control gets a full 16px so focus never triggers the zoom. */
@media (max-width: 767.98px) {
  .lue-input,
  .lue-textarea,
  select.lue-input {
    font-size: 16px;
  }
}
.lue.is-mobile .lue-bar-title,
.lue.is-mobile .lue-bar-sep {
  display: none;
}
/* Controls/tags are always visible on touch (no hover). */
.lue.is-mobile .lue-block-tag,
.lue.is-mobile .lue-block-controls {
  opacity: 1;
}

/* ----- Fixed bottom action bar ----- */
.lue-mbar {
  --lue-mbar-h: 58px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  height: calc(58px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid var(--lue-line);
  box-shadow: 0 -4px 18px rgba(200, 60, 120, 0.1);
}
.lue-mbar-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* ≥44px tap target. */
  min-height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--lue-muted);
  font-size: 18px;
  padding: 4px 2px;
}
.lue-mbar-btn .lue-mbar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.lue-mbar-btn:active {
  background: var(--lue-line-soft);
}
.lue-mbar-btn.is-on {
  color: var(--lue-rose);
}

/* ----- Slide-up controls sheet ----- */
.lue-sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  background: rgba(74, 44, 57, 0.4);
}
.lue-sheet {
  width: 100%;
  max-height: 85svh;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(200, 60, 120, 0.25);
  /* Don't let the sheet sit under the home-indicator area. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Snap-back / slide-out easing for the drag gesture (see .is-dragging). */
  transition: transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}
/* While a finger is on the handle the sheet tracks it 1:1 — no easing. */
.lue-sheet.is-dragging {
  transition: none;
}
.lue-sheet-head {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 3em 0.6em;
  border-bottom: 1px solid var(--lue-line-soft);
  /* The header is the drag zone; keep the browser from scrolling on touch. */
  touch-action: none;
}
/* Drag-handle pill (also a tappable close affordance). */
.lue-sheet-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 5px;
  border: none;
  border-radius: 999px;
  background: var(--lue-line);
  cursor: pointer;
}
.lue-sheet-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.05em;
  color: var(--lue-rose-deep);
  margin-top: 0.4em;
}
.lue-sheet-x {
  position: absolute;
  top: 50%;
  right: 0.6em;
  transform: translateY(-30%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--lue-bg);
  color: var(--lue-muted);
  font-size: 1em;
  cursor: pointer;
}
.lue-sheet-x:hover {
  background: var(--lue-line-soft);
  color: var(--lue-rose);
}
/* The sheet's OWN internal scroll — the only thing scrolling while open. */
.lue-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1em;
  scrollbar-width: thin;
  scrollbar-color: var(--lue-line) transparent;
}
.lue-sheet-body::-webkit-scrollbar {
  width: 8px;
}
.lue-sheet-body::-webkit-scrollbar-thumb {
  background: var(--lue-line);
  border-radius: 999px;
}

/* Sheet slide + backdrop fade. */
.lue-sheet-enter-active,
.lue-sheet-leave-active {
  transition: opacity 0.2s ease;
}
.lue-sheet-enter-active .lue-sheet,
.lue-sheet-leave-active .lue-sheet {
  transition: transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.lue-sheet-enter-from,
.lue-sheet-leave-to {
  opacity: 0;
}
.lue-sheet-enter-from .lue-sheet,
.lue-sheet-leave-to .lue-sheet {
  transform: translateY(100%);
}

/* The desktop ≤460px toolbar tweaks still apply (icon-only buttons etc.) since
   that media query is independent of the JS isMobile flag. Keep the canvas base
   step-downs so full-bleed blocks fit narrow viewports without h-scroll. */
/* ── Phone: below the 768px tablet breakpoint ────────────────────────────── */
@media (max-width: 767.98px) {
  /* Step the canvas base down so the previewed gift keeps sensible proportions
     in the narrower phone column, and mirror blocks.css's `.luvb-page-scroll`
     padding step-down so the canvas column keeps matching the published page. */
  .lue-canvas {
    font-size: 18px;
  }
  .lue-canvas-scroll {
    padding: 0 1rem 1.5rem;
  }
}

/* ── Small phones: ≤480px (design target 375px, supported down to 320px) ──── */
@media (max-width: 480px) {
  .lue-bar {
    padding: 0 0.6em;
    gap: 0.4em;
  }
  .lue-bar-right {
    gap: 0.35em;
  }
  .lue-brand {
    font-size: 1.1em;
  }
  .lue-btn-sm {
    padding: 0.4em 0.65em;
    font-size: 0.78em;
  }
  /* Drop the save-status pill to keep the bar usable. */
  .lue-save-status {
    display: none;
  }
  /* Icon-only Preview button — the eye icon carries the meaning, and the freed
     space keeps the toolbar from overflowing a 375px viewport. */
  .lue-btn .lue-btn-label {
    display: none;
  }
  .lue-canvas {
    font-size: 16px;
  }
  .lue-palette-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .lue-modal {
    padding: 1.3em 1.1em 1.2em;
  }
}