/* ========================================
   Nanha Surprise — Design System
   Warm cream glass · soft brown · pastels
   ======================================== */

:root {
  --bg: #FCFBF9;
  --bg-warm: #FFFCF8;
  --blush: #ffd6e3;
  --lavender: #e3d9ff;
  --mint: #d3f5e6;
  --sky: #d4ebff;
  --baby: #DBEAFE;
  --peach: #FFE5D9;
  --butter: #fff1b8;
  --latte: #b98f74;
  --choc: #4A3528;
  --choc-mid: #66462C;
  --choc-soft: #8A5D3B;
  --text-muted: #8C7565;
  --r-pill: 999px;
  /* Motion system — one shared choreography language across every screen */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-soft: cubic-bezier(0.4, 0.02, 0.2, 1);
  --ease-magic: cubic-bezier(0.33, 0.1, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0.05, 0.2, 1);
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --spring-soft: cubic-bezier(0.22, 1.15, 0.36, 1);
  --dur-screen: 0.58s;
  --dur-screen-exit: 0.44s;
  --dur-fast: 0.28s;
  --dur-med: 0.45s;
  --dur-slow: 0.72s;
  --cream: #F4ECE4;
  --brown-light: #F4ECE4;
  --white: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.88);
  --glass-warm: rgba(255, 252, 248, 0.9);
  --glass-border: rgba(255, 255, 255, 0.95);
  --glass-border-warm: rgba(230, 218, 206, 0.6);
  --radius: 28px;
  --radius-sm: 22px;
  --shadow: 0 12px 40px rgba(102, 70, 44, 0.08), 0 2px 8px rgba(102, 70, 44, 0.04);
  --shadow-soft: 0 12px 30px -10px rgba(122, 84, 64, 0.22), 0 2px 8px rgba(122, 84, 64, 0.07);
  --shadow-pop: 0 14px 34px -8px rgba(255, 143, 179, 0.55), 0 3px 8px rgba(122, 84, 64, 0.1);
  --shadow-lift: 0 16px 40px rgba(102, 70, 44, 0.12);
  --font-script: "Caveat", cursive;
  --font-romantic: "Dancing Script", cursive;
  --font-body: "Quicksand", "Nunito", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--choc);
  background: var(--bg);
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: hidden;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
@media (max-width: 767px) {
  body { overflow-y: auto; }
}

::selection {
  background: var(--blush);
  color: var(--choc-mid);
}

body.has-custom-cursor,
body.has-custom-cursor * {
  cursor: none !important;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--choc-soft);
  outline-offset: 3px;
  border-radius: 8px;
}

.script { font-family: var(--font-script); font-weight: 700; line-height: 1.25; }
.font-romantic,
.romantic { font-family: var(--font-romantic); font-weight: 600; line-height: 1.35; }
.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--choc-mid);
  background: var(--peach);
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}
.sub { color: var(--text-muted); margin-bottom: 1.25rem; text-align: center; }
.quote {
  font-family: var(--font-romantic);
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  text-align: center;
  color: var(--choc);
  max-width: 28ch;
  margin: 0.75rem auto 1.5rem;
  opacity: 0.92;
}
.section-h { text-align: center; font-size: 1.75rem; margin: 1.5rem 0 1rem; color: var(--choc-mid); }

/* ---- Ambient ---- */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(255, 214, 222, 0.28), transparent 50%),
    radial-gradient(ellipse at 82% 18%, rgba(234, 220, 249, 0.26), transparent 45%),
    radial-gradient(ellipse at 48% 92%, rgba(218, 245, 235, 0.24), transparent 50%),
    var(--bg);
}

.mandala-svg {
  position: absolute;
  opacity: 0.38;
  color: #E0CEBE;
  will-change: transform;
}
.mandala-svg-a {
  top: -8rem;
  right: -8rem;
  width: min(92vw, 520px);
  height: auto;
  animation: spin-slow 90s linear infinite;
}
.mandala-svg-b {
  bottom: -10rem;
  left: -10rem;
  width: min(88vw, 500px);
  height: auto;
  color: #EADCF9;
  animation: spin-reverse-slow 110s linear infinite;
}

@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-reverse-slow { to { transform: rotate(-360deg); } }

.soft-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.85;
  animation: float-gentle 5.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.soft-orb-a {
  top: 20%;
  left: 8%;
  width: 6rem;
  height: 6rem;
  background: linear-gradient(135deg, rgba(255, 214, 222, 0.45), rgba(255, 229, 217, 0.3));
}
.soft-orb-b {
  top: 62%;
  right: 10%;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(135deg, rgba(218, 245, 235, 0.4), rgba(219, 234, 254, 0.3));
  animation-delay: 2.1s;
  animation-duration: 6.4s;
}
.soft-orb-c {
  bottom: 12%;
  left: 22%;
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, rgba(255, 242, 198, 0.4), rgba(255, 214, 222, 0.28));
  filter: blur(22px);
}
@keyframes float-gentle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(3deg); }
}

.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(219, 234, 254, 0.4));
  border: 1px solid rgba(255,255,255,0.6);
  animation: rise linear infinite;
  opacity: 0.5;
}
@keyframes rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 0.5; }
  100% { transform: translateY(-110vh) scale(1.1); opacity: 0; }
}

.sparkle {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--butter);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--butter);
  animation: twinkle ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.2); }
}

.ambient .petal,
#petals .petal {
  position: absolute;
  width: 12px; height: 16px;
  background: var(--blush);
  border-radius: 50% 0 50% 0;
  opacity: 0.4;
  animation: drift linear infinite;
}
@keyframes drift {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(110vh) rotate(360deg); }
}

#cursor-trail {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 10051;
  width: 28px;
  height: 28px;
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  text-align: center;
  display: none;
  /* Single compositor layer — no child animation fighting the move */
  transform: translate3d(-100px, -100px, 0);
  transition: none !important;
  animation: none !important;
  will-change: transform;
  contain: strict;
  text-shadow:
    0 0 12px rgba(255, 214, 222, 0.55),
    0 2px 6px rgba(102, 70, 44, 0.14);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
body.has-custom-cursor #cursor-trail { display: block; }

/* Sparkle particle host — isolated compositing layer */
#cursor-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10050;
  overflow: hidden;
  contain: strict;
}
/* Tip-only during lightbox — trail DOM/WAAPI fights fullscreen image paint */
body.lightbox-open #cursor-fx {
  display: none !important;
}
body.lightbox-open #cursor-trail {
  /* Keep tip; drop glow paint cost while viewing media */
  text-shadow: none;
}

.nanha-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: sparkle-fade 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
  text-shadow: 0 1px 4px rgba(102, 70, 44, 0.1);
}
@keyframes sparkle-fade {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.55) rotate(-6deg); }
  22% { opacity: 1; transform: translate(-50%, -58%) scale(1.12) rotate(3deg); }
  100% { opacity: 0; transform: translate(-50%, -118%) scale(0.4) rotate(10deg); }
}

/* ---- Glass ---- */
.glass {
  /* Solid frost plate — backdrop-filter over animated ambient steals compositor from cursor */
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.glass-warm {
  background: rgba(255, 252, 248, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border-warm);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}

.card { padding: 1.65rem 1.4rem; }
@media (min-width: 480px) {
  .card { padding: 2rem 1.85rem; }
}

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #FAFAF7; }
::-webkit-scrollbar-thumb { background: #DECFC2; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #BFA896; }

/* ---- Loader / enter ---- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 214, 222, 0.35), transparent 55%),
    radial-gradient(90% 60% at 80% 100%, rgba(234, 220, 249, 0.4), transparent 50%),
    var(--bg-warm);
  /* Opacity + transform only — animated filter:blur forces expensive per-frame paints */
  transition:
    opacity 0.48s var(--ease-magic),
    visibility 0.48s var(--ease-magic),
    transform 0.48s var(--ease-magic);
  backface-visibility: hidden;
  transform: translateZ(0);
}
.loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -12px, 0) scale(1.018);
  will-change: opacity, transform;
}
.loader.done.is-settled {
  will-change: auto;
}
.loader.is-opening .loader-cta {
  pointer-events: none;
  animation: none;
  transform: scale(0.97);
  opacity: 0.85;
}
.loader.is-opening .loader-inner {
  transition: opacity 0.3s var(--ease-in-soft), transform 0.3s var(--ease-magic);
  opacity: 0;
  transform: translate3d(0, -8px, 0) scale(0.985);
}
.loader-inner {
  width: min(420px, 94vw);
  padding: 2.15rem 2rem 1.9rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  border-radius: 28px;
  box-shadow:
    0 18px 40px -18px rgba(102, 70, 44, 0.28),
    0 2px 10px rgba(102, 70, 44, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.loader-eyebrow {
  margin: 0.15rem 0 0;
  width: 100%;
  max-width: none;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--choc);
  opacity: 0.58;
}
.loader-lead {
  display: none;
  margin: 0.15rem 0 0;
  width: 100%;
  max-width: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.65;
  color: var(--choc);
  opacity: 0.78;
}
.loader-title {
  margin: 0.2rem 0 0.1rem;
  width: 100%;
  max-width: none;
  font-size: clamp(1.45rem, 5vw, 1.85rem);
  line-height: 1.4;
  color: var(--choc-mid);
}
.loader-earphone-tip {
  display: none;
  margin: 0.35rem 0 0.2rem;
  width: 100%;
  max-width: none;
  padding: 0.95rem 1.1rem;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 229, 217, 0.7), rgba(234, 220, 249, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: var(--choc);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.65;
}
.loader.ready-to-enter .loader-bar,
.loader.ready-to-enter #loader-pct-wrap { display: none; }
.loader.ready-to-enter #loader-eyebrow,
.loader.ready-to-enter #loader-lead,
.loader.ready-to-enter #loader-earphone-tip {
  display: block;
}
.loader.ready-to-enter .loader-octopus {
  margin-bottom: 0.35rem;
}
.loader.ready-to-enter .loader-open-hint {
  display: flex !important;
  justify-content: center;
  width: 100%;
  margin-top: 0.55rem;
}
.loader.ready-to-enter .loader-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.9rem;
  padding: 0.8rem 1.45rem;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd6de 0%, #eadcf9 55%, #daf5eb 100%);
  box-shadow: 0 10px 22px -12px rgba(155, 123, 255, 0.55);
  color: var(--choc-mid);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    filter 0.25s ease;
  animation: enterPulse 1.8s ease-in-out infinite;
}
.loader.ready-to-enter .loader-cta:hover {
  animation: none;
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 16px 32px -10px rgba(155, 123, 255, 0.72),
    0 0 0 4px rgba(255, 214, 222, 0.35);
  filter: brightness(1.04);
}
.loader.ready-to-enter .loader-cta:active {
  animation: none;
  transform: translateY(0) scale(0.97);
  box-shadow: 0 8px 18px -10px rgba(155, 123, 255, 0.5);
}
@keyframes enterPulse {
  0%, 100% { box-shadow: 0 10px 22px -12px rgba(155, 123, 255, 0.45); }
  50% { box-shadow: 0 14px 28px -10px rgba(155, 123, 255, 0.65); }
}
.loader-octopus {
  display: grid;
  place-items: center;
  margin-bottom: 0.15rem;
  animation: swim 1.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(255, 112, 150, 0.22));
}
@keyframes swim {
  0%, 100% { transform: translateX(-10px) rotate(-7deg); }
  50% { transform: translateX(10px) rotate(7deg); }
}
.loader-bar {
  width: 100%;
  max-width: 220px;
  height: 8px;
  background: var(--cream);
  border-radius: 99px;
  margin: 0.55rem 0 0.15rem;
  overflow: hidden;
}
#loader-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--blush), var(--lavender), var(--mint));
  border-radius: inherit;
  /* GPU-friendly progress — avoid animating layout width */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s var(--ease-out-soft);
  will-change: transform;
  backface-visibility: hidden;
}
#loader-fill.is-complete {
  will-change: auto;
}
.loader-pct {
  margin: 0;
  font-size: 0.9rem;
  color: var(--choc);
  opacity: 0.7;
}

/* ---- Chrome ---- */
.chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: calc(0.7rem + var(--safe-t)) calc(0.85rem + var(--safe-r)) 0.5rem calc(0.85rem + var(--safe-l));
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }

#chrome-brand {
  position: relative;
  z-index: 2;
}

.chrome-glass {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.chrome-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem 0.4rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
  color: var(--choc-mid);
  transition: transform 0.25s var(--ease);
  flex-shrink: 0;
}
.chrome-brand:hover { transform: scale(1.04); }
.chrome-brand-emoji { font-size: 1.15rem; line-height: 1; }
.chrome-brand-text {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .chrome-brand-text { display: none; }
  .chrome-brand { padding: 0.45rem 0.65rem; }
}

/* Music chrome — circular note + popover playlist */
.music-chrome {
  position: relative;
  z-index: 920;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.icon-btn,
#btn-music.music-toggle {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px -12px rgba(155, 123, 255, 0.45), var(--shadow-soft);
  font-size: 1.35rem;
  line-height: 1;
  display: grid;
  place-items: center;
  color: var(--choc-mid);
  z-index: 910;
  transition: transform 0.2s var(--ease-bounce), opacity 0.2s, box-shadow 0.35s ease, border-color 0.35s ease;
  overflow: visible;
}
.icon-btn:hover,
#btn-music.music-toggle:hover {
  box-shadow: 0 12px 30px -10px rgba(155, 123, 255, 0.55), var(--shadow-soft);
  transform: translateY(-1px);
}
.icon-btn:active,
#btn-music.music-toggle:active {
  transform: scale(0.9);
}
.icon-btn.muted,
#btn-music.music-toggle.muted {
  opacity: 0.72;
}

/* Soft vinyl / CD music toggle */
#btn-music.music-toggle .music-disc {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55) 0 10%, transparent 42%),
    radial-gradient(circle at 50% 50%, #f3eefe 0 28%, #d8c6ff 29% 46%, #b9a0f0 47% 68%, #8f74d8 69% 86%, #6f55b8 87% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(90, 60, 160, 0.22),
    0 4px 10px rgba(123, 92, 219, 0.22);
  transform: translateZ(0);
  will-change: transform;
}
#btn-music.music-toggle .music-disc-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.22) 28deg,
    transparent 62deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.12) 210deg,
    transparent 250deg
  );
  pointer-events: none;
  mix-blend-mode: soft-light;
}
#btn-music.music-toggle .music-disc-grooves {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.08) 0 1px,
      rgba(90, 60, 160, 0.12) 1px 2px
    );
  opacity: 0.7;
  pointer-events: none;
  mask-image: radial-gradient(circle, transparent 34%, #000 38%, #000 92%, transparent 96%);
  -webkit-mask-image: radial-gradient(circle, transparent 34%, #000 38%, #000 92%, transparent 96%);
}
#btn-music.music-toggle .music-disc-label {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, #fff 0%, #f7f0ff 45%, #e9ddff 100%);
  box-shadow:
    0 0 0 1.5px rgba(155, 123, 255, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(123, 92, 219, 0.2);
}
#btn-music.music-toggle .music-note-svg {
  display: block;
  filter: drop-shadow(0 1px 1px rgba(123, 92, 219, 0.25));
  transform: scale(0.92);
}

#btn-music.music-toggle .music-eq {
  position: absolute;
  right: -2px;
  bottom: -1px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  padding: 2px 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 10px -4px rgba(123, 92, 219, 0.35);
  opacity: 0;
  transform: scale(0.7) translateY(2px);
  transition: opacity 0.25s ease, transform 0.25s var(--ease-bounce);
  pointer-events: none;
  z-index: 2;
}
#btn-music.music-toggle .music-eq i {
  display: block;
  width: 2.5px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c4a1ff, #7b5cdb);
  transform-origin: bottom center;
}
/* Playing: spinning disc + living chrome */
#btn-music.music-toggle.is-playing {
  border-color: rgba(196, 161, 255, 0.85);
  box-shadow:
    0 0 0 3px rgba(155, 123, 255, 0.18),
    0 12px 28px -10px rgba(155, 123, 255, 0.55),
    0 0 22px rgba(196, 161, 255, 0.35);
  animation: music-btn-pulse 2.4s ease-in-out infinite;
}
#btn-music.music-toggle.is-playing .music-disc {
  animation: music-disc-spin 3.6s linear infinite;
}
#btn-music.music-toggle.is-playing .music-disc-label {
  animation: music-label-counter 3.6s linear infinite;
}
#btn-music.music-toggle.is-playing .music-eq {
  opacity: 1;
  transform: scale(1) translateY(0);
}
#btn-music.music-toggle.is-playing .music-eq i:nth-child(1) {
  animation: music-eq-bar 0.85s ease-in-out infinite;
}
#btn-music.music-toggle.is-playing .music-eq i:nth-child(2) {
  animation: music-eq-bar 0.85s ease-in-out 0.18s infinite;
}
#btn-music.music-toggle.is-playing .music-eq i:nth-child(3) {
  animation: music-eq-bar 0.85s ease-in-out 0.34s infinite;
}

@keyframes music-disc-spin {
  to { transform: rotate(360deg); }
}
@keyframes music-label-counter {
  to { transform: rotate(-360deg); }
}
@keyframes music-btn-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(155, 123, 255, 0.16),
      0 12px 28px -10px rgba(155, 123, 255, 0.5),
      0 0 18px rgba(196, 161, 255, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(155, 123, 255, 0.22),
      0 14px 32px -8px rgba(155, 123, 255, 0.62),
      0 0 28px rgba(196, 161, 255, 0.48);
  }
}
@keyframes music-eq-bar {
  0%, 100% { height: 3px; opacity: 0.7; }
  40% { height: 9px; opacity: 1; }
  70% { height: 5px; opacity: 0.85; }
}

.nanha-playlist-panel {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  width: min(380px, calc(100vw - 1.25rem));
  max-height: min(78vh, 640px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1rem 1.05rem;
  border-radius: 26px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 214, 222, 0.45), transparent 55%),
    radial-gradient(100% 70% at 100% 0%, rgba(220, 238, 255, 0.5), transparent 50%),
    rgba(255, 252, 250, 0.96);
  border: 1.5px solid var(--glass-border);
  box-shadow: 0 22px 48px -20px rgba(74, 53, 40, 0.38), var(--shadow);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 930;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.nanha-playlist-panel[hidden] {
  display: none !important;
}
#btn-music.music-toggle.is-open {
  box-shadow: 0 0 0 3px rgba(155, 123, 255, 0.25), 0 12px 30px -10px rgba(155, 123, 255, 0.55);
}
#btn-music.music-toggle.is-open.is-playing {
  box-shadow:
    0 0 0 3px rgba(155, 123, 255, 0.28),
    0 12px 30px -10px rgba(155, 123, 255, 0.58),
    0 0 22px rgba(196, 161, 255, 0.35);
}
.nanha-playlist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.nanha-playlist-eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--choc);
  opacity: 0.6;
}
.nanha-playlist-title {
  margin: 0.1rem 0 0;
  font-size: 1.5rem;
  color: var(--choc);
  line-height: 1.1;
}
.nanha-playlist-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
  max-width: 58%;
}
.nanha-playlist-chip {
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.75);
  color: var(--choc-mid);
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease;
  white-space: nowrap;
}
.nanha-playlist-chip:hover {
  background: rgba(255, 255, 255, 0.95);
}
.nanha-playlist-chip[aria-pressed="true"] {
  background: rgba(255, 214, 222, 0.7);
}
.nanha-playlist-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.85);
  color: var(--choc);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.nanha-playlist-status {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--choc-mid);
}
.nanha-playlist-status.is-error {
  color: #8b3a4a;
  background: rgba(255, 214, 222, 0.4);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
}
.nanha-playlist-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
.nanha-now {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--glass-border);
}
.nanha-now-art-wrap {
  position: relative;
  width: 96px;
  height: 96px;
}
.nanha-now-art {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  object-fit: cover;
  display: block;
  background: linear-gradient(145deg, #ffe8f2, #dceeff);
  box-shadow: 0 10px 24px -12px rgba(74, 53, 40, 0.45);
}
.nanha-now-art-glow {
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(196, 161, 255, 0.35), transparent 70%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}
.nanha-now-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.nanha-now-label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--choc);
  opacity: 0.55;
}
.nanha-now-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--choc);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nanha-progress {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.nanha-progress-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(74, 53, 40, 0.12);
  outline: none;
  cursor: pointer;
}
.nanha-progress-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, #c4a1ff, #7b5cdb);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(123, 92, 219, 0.35);
  cursor: pointer;
}
.nanha-progress-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, #c4a1ff, #7b5cdb);
  border: 2px solid #fff;
  cursor: pointer;
}
.nanha-progress-times {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--choc-soft, var(--text-muted));
}
.nanha-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
}
.nanha-ctrl {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.8);
  color: var(--choc);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.nanha-ctrl:hover {
  background: #fff;
  transform: translateY(-1px);
}
.nanha-ctrl:active {
  transform: scale(0.94);
}
.nanha-ctrl-play {
  width: 48px;
  height: 48px;
  background: linear-gradient(145deg, #4a3528, #66462c);
  color: #fff8f4;
  border: none;
  box-shadow: 0 8px 18px -8px rgba(74, 53, 40, 0.55);
}
.nanha-ctrl-play:hover {
  background: linear-gradient(145deg, #5a4232, #765636);
}
.nanha-ctrl-play .icon-play,
.nanha-ctrl-play .icon-pause {
  display: block;
  pointer-events: none;
}
.nanha-ctrl-play .icon-pause {
  display: none;
}
.nanha-ctrl-play.is-playing {
  background: linear-gradient(145deg, #9b7bff, #7b5cdb);
}
.nanha-ctrl-play.is-playing .icon-play {
  display: none;
}
.nanha-ctrl-play.is-playing .icon-pause {
  display: block;
}
.nanha-playlist-list-label {
  margin: 0 0 0.35rem 0.15rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--choc);
  opacity: 0.55;
}
.nanha-playlist-side {
  min-width: 0;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.42);
  padding: 0.45rem 0.4rem 0.4rem;
}
.nanha-playlist-tracks {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: min(280px, 38vh);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nanha-playlist-track {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--choc);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
}
.nanha-playlist-track:hover,
.nanha-playlist-track:focus-visible {
  background: rgba(255, 214, 222, 0.5);
  outline: none;
}
.nanha-playlist-track.is-active {
  background: rgba(220, 238, 255, 0.85);
  box-shadow: inset 0 0 0 1.5px rgba(102, 70, 44, 0.14);
}
.nanha-playlist-thumb {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(74, 53, 40, 0.08);
}
.nanha-playlist-thumb-fallback {
  display: grid;
  place-items: center;
  font-size: 0.95rem;
}
.nanha-playlist-track-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.nanha-playlist-track-title {
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nanha-playlist-track-dur {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--choc-soft, var(--text-muted));
  opacity: 0.85;
}
.nanha-audio-host {
  /* Keep a real-sized offscreen player — 0×0 / 1×1 can fail and skip track 1 */
  position: fixed !important;
  left: -10000px !important;
  top: 0 !important;
  width: 320px !important;
  height: 180px !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.nanha-audio-host iframe {
  width: 320px !important;
  height: 180px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
}
@media (max-width: 640px) {
  .nanha-playlist-panel {
    position: fixed;
    top: calc(4.25rem + var(--safe-t, 0px));
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
  .nanha-now {
    grid-template-columns: 84px minmax(0, 1fr);
  }
  .nanha-now-art-wrap,
  .nanha-now-art {
    width: 84px;
    height: 84px;
  }
  .nanha-playlist-tracks {
    max-height: min(240px, 34vh);
  }
}

/* ---- Screens ---- */
#app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Extra bottom room for fixed .app-credit footer */
  padding: calc(4.25rem + var(--safe-t)) 1rem calc(3.6rem + var(--safe-b));
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Default park pose — forward enter rises from below */
  transform: translate3d(0, 18px, 0) scale(0.982);
  transition:
    opacity var(--dur-screen) var(--ease-enter),
    transform var(--dur-screen) var(--ease-enter),
    visibility var(--dur-screen) var(--ease-enter);
  contain: layout paint;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  z-index: 10;
}
/* Directional enter/exit — screens feel connected, not swapped */
.screen.is-entering {
  will-change: opacity, transform;
}
.screen.is-entering:not(.active)[data-tx-dir="forward"] {
  transform: translate3d(0, 20px, 0) scale(0.982);
}
.screen.is-entering:not(.active)[data-tx-dir="back"] {
  transform: translate3d(0, -14px, 0) scale(0.988);
}
.screen.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9;
  will-change: opacity, transform;
  transition-duration: var(--dur-screen-exit);
  transition-timing-function: var(--ease-exit);
}
.screen.is-leaving[data-tx-dir="forward"] {
  transform: translate3d(0, -12px, 0) scale(1.012);
}
.screen.is-leaving[data-tx-dir="back"] {
  transform: translate3d(0, 16px, 0) scale(0.985);
}
.screen.is-settled {
  will-change: auto;
}
/* Pre-mounted under loader: fully painted, no blur/stutter when loader lifts */
.screen.from-loader {
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 0.42s var(--ease-magic),
    visibility 0.42s var(--ease-magic);
}
.screen.from-loader.active {
  opacity: 1;
  visibility: visible;
}
[hidden] { display: none !important; }
.screen[hidden] { display: none !important; }
.screen.active[hidden] { display: flex !important; }
.screen.from-loader[hidden] { display: flex !important; visibility: hidden; opacity: 0; }

.screen-inner {
  width: min(520px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.screen-inner.scrollable { padding-bottom: 1rem; }

/* ---- Buttons — copied from nanha-gift ---- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 50px;
  padding: 0.75em 1.6em;
  border-radius: var(--r-pill, 999px);
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.85);
  color: var(--choc, #4a2c20);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.3s, filter 0.3s;
  user-select: none;
  cursor: pointer;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.8s;
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover {
  box-shadow: 0 16px 30px -10px rgba(255, 143, 179, 0.55), 0 0 18px rgba(255, 200, 225, 0.7);
  filter: brightness(1.03);
}
.btn:active { transform: scale(0.93, 0.88); }
.btn:disabled {
  opacity: 0.6;
  cursor: default;
  filter: saturate(0.7);
  pointer-events: none;
}
.btn-primary {
  background: linear-gradient(135deg, #ffb3cc 0%, #ffcfa8 100%);
  color: var(--choc, #4a2c20);
  box-shadow: var(--shadow-pop);
}
.btn-next {
  margin-top: 18px;
  background: linear-gradient(135deg, #e3d9ff, #d4ebff);
  color: var(--choc, #4a2c20);
}
.btn-soft {
  background: rgba(255, 255, 255, 0.85);
  color: var(--choc, #4a2c20);
  border: 2px solid #fff;
  box-shadow: var(--shadow-soft);
}
.btn-soft:hover {
  box-shadow: 0 16px 30px -10px rgba(255, 143, 179, 0.55), 0 0 18px rgba(255, 200, 225, 0.7);
  filter: brightness(1.03);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  width: 100%;
}
.btn.jelly { animation: jellyPress 0.55s var(--ease-out); }
.btn-with-cloud .btn-cloud-label { padding-right: 0.04em; }
.btn-with-cloud .nanha-cloud-icon {
  flex-shrink: 0;
  margin-left: 0.05rem;
  transform: translateY(2px);
  filter: drop-shadow(0 1px 2px rgba(102, 70, 44, 0.18));
}
.next-btn { margin-top: 0.5rem; }
.btn.btn-next.next-btn { margin-top: 18px; }

/* Yes / No — from nanha-gift */
.btn-yes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 10px 26px 16px;
  border-radius: 32px;
  border: 3px solid #fff;
  background: linear-gradient(135deg, #ff9ebd, #ffb88c);
  color: #fff;
  font-weight: 700;
  font-size: 1.12rem;
  text-shadow: 0 1px 6px rgba(194, 77, 119, 0.55);
  box-shadow: 0 10px 28px rgba(255, 143, 179, 0.6);
  animation: yesPulse 1.8s ease-in-out infinite;
  cursor: pointer;
}
.btn-yes:active { transform: scale(0.94); }
.btn-no {
  --no-blush: #ffe8f0;
  --no-petal: #ffd6de;
  --no-ink: #7a5440;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65em 1.3em;
  min-height: 46px;
  min-width: 3.25rem;
  border-radius: var(--r-pill, 999px);
  border: 2px solid #e8d0c0;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff7f4 100%);
  color: var(--no-ink);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  box-shadow:
    0 6px 16px rgba(194, 140, 120, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  white-space: normal;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease,
    transform 0.22s var(--ease-bounce);
  will-change: auto;
}
.btn-no-label {
  display: inline-block;
  max-width: min(72vw, 15.5rem);
  transform-origin: center;
}
.btn-no:hover {
  background: linear-gradient(180deg, #fff 0%, var(--no-blush) 100%);
  border-color: #f0b8c8;
  box-shadow:
    0 10px 22px rgba(255, 158, 189, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
  filter: saturate(1.05);
}
.btn-no:focus-visible {
  outline: 3px solid rgba(255, 158, 189, 0.55);
  outline-offset: 3px;
}
.btn-no:active,
.btn-no.is-pressed {
  transform: scale(0.94);
  background: linear-gradient(180deg, var(--no-blush) 0%, var(--no-petal) 100%);
  border-color: #ef9eb4;
  box-shadow: 0 3px 10px rgba(255, 158, 189, 0.22);
}
@keyframes yesPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
#cut-cake-btn { width: auto; }

/* ---- Gate: nanha-gift lock/pills/writing + existing surprise octopus/sub/footer ---- */
.screen[data-screen="gate"] {
  padding-bottom: calc(130px + var(--safe-b));
  align-items: center;
  justify-content: center;
}
.screen[data-screen="gate"] .screen-inner {
  width: min(100%, 680px);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.gate-card {
  width: 100%;
  border-radius: var(--radius);
  padding: 26px clamp(16px, 4vw, 30px) 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  position: relative;
  z-index: 3;
  overflow: visible;
  will-change: transform, opacity;
}
.gate-card.gate-enter {
  animation: gateEnterRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gateEnterRise {
  from {
    opacity: 0.7;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (min-width: 600px) {
  .gate-card { padding: 34px 40px; gap: 14px; }
}

/* Existing surprise corner octopus */
.gate-octopus-mascot {
  position: absolute;
  top: -0.85rem;
  left: -0.55rem;
  z-index: 4;
  transform: rotate(-12deg);
  filter: drop-shadow(0 8px 14px rgba(102, 70, 44, 0.18));
  animation: gate-octopus-bob 3.2s ease-in-out infinite;
  pointer-events: none;
}
.gate-octopus-mascot .octopus-svg {
  display: block;
  width: 72px;
  height: 72px;
}
@keyframes gate-octopus-bob {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50% { transform: rotate(-8deg) translateY(-6px); }
}
.gate-octopus-mascot.is-surprised {
  animation: gate-octopus-wiggle 0.55s ease;
}
@keyframes gate-octopus-wiggle {
  0%, 100% { transform: rotate(-12deg); }
  25% { transform: rotate(-18deg) translateX(-3px); }
  75% { transform: rotate(-4deg) translateX(3px); }
}

/* Lock icon (nanha-gift) */
.lock {
  width: 84px;
  filter: drop-shadow(0 10px 14px rgba(122, 84, 64, .2));
  animation: floaty 3.6s ease-in-out infinite;
}
.lock svg {
  width: 100%;
  display: block;
  overflow: visible;
}
.lock-svg .shackle {
  transform-origin: 56px 40px;
  transition: transform .7s var(--ease-bounce);
}
.lock.open .shackle {
  transform: translateY(-10px) rotate(-38deg);
}
.lock.open {
  filter: drop-shadow(0 0 20px rgba(255, 226, 122, .95));
}

/* Writing (nanha-gift eyebrow + script) */
.gate-eyebrow {
  margin: 0;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--latte);
  background: none;
  padding: 0;
  border-radius: 0;
}
.gate-q {
  margin: 0;
  font-family: var(--font-romantic);
  font-weight: 700;
  font-size: clamp(2rem, 8.6vw, 3.6rem);
  line-height: 1.12;
  color: var(--choc);
}
/* Existing surprise subtitle */
.gate-sub {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(0.88rem, 2.8vw, 1rem);
  color: var(--text-muted);
  line-height: 1.45;
}

/* Pastel pill date buttons (nanha-gift) — replaces old btn-nanha grid */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100%;
}
.pill {
  position: relative;
  min-height: 50px;
  min-width: 96px;
  padding: .6em 1.3em;
  border-radius: var(--r-pill);
  border: 2px solid #fff;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--choc);
  background: var(--blush);
  box-shadow:
    0 2px 0 rgba(122, 84, 64, .08),
    0 8px 18px -8px rgba(122, 84, 64, .22),
    0 2px 6px rgba(122, 84, 64, .08);
  transform: translateY(0) scale(1);
  transition:
    transform .28s var(--ease-bounce),
    box-shadow .3s var(--ease-out),
    background .3s,
    filter .3s;
  will-change: transform, box-shadow;
}
.pill:nth-child(5n+2) { background: var(--lavender); }
.pill:nth-child(5n+3) { background: var(--mint); }
.pill:nth-child(5n+4) { background: var(--sky); }
.pill:nth-child(5n+5) { background: var(--butter); }
.pill:hover:not(:disabled) {
  transform: translateY(-7px) scale(1.06);
  filter: brightness(1.05);
  box-shadow:
    0 14px 0 -2px rgba(255, 255, 255, .55),
    0 18px 36px -8px rgba(122, 84, 64, .38),
    0 10px 24px -6px rgba(255, 143, 179, .55),
    0 0 22px rgba(255, 200, 225, .45);
}
.pill:nth-child(5n+2):hover:not(:disabled) {
  box-shadow:
    0 14px 0 -2px rgba(255, 255, 255, .55),
    0 18px 36px -8px rgba(122, 84, 64, .38),
    0 10px 24px -6px rgba(169, 139, 232, .5),
    0 0 22px rgba(227, 217, 255, .55);
}
.pill:nth-child(5n+3):hover:not(:disabled) {
  box-shadow:
    0 14px 0 -2px rgba(255, 255, 255, .55),
    0 18px 36px -8px rgba(122, 84, 64, .38),
    0 10px 24px -6px rgba(111, 207, 165, .5),
    0 0 22px rgba(211, 245, 230, .55);
}
.pill:nth-child(5n+4):hover:not(:disabled) {
  box-shadow:
    0 14px 0 -2px rgba(255, 255, 255, .55),
    0 18px 36px -8px rgba(122, 84, 64, .38),
    0 10px 24px -6px rgba(107, 183, 239, .5),
    0 0 22px rgba(212, 235, 255, .55);
}
.pill:nth-child(5n+5):hover:not(:disabled) {
  box-shadow:
    0 14px 0 -2px rgba(255, 255, 255, .55),
    0 18px 36px -8px rgba(122, 84, 64, .38),
    0 10px 24px -6px rgba(232, 180, 70, .45),
    0 0 22px rgba(255, 241, 184, .55);
}
.pill:active:not(:disabled) {
  transform: translateY(2px) scale(.94);
  box-shadow:
    0 1px 0 rgba(122, 84, 64, .1),
    0 4px 10px -4px rgba(122, 84, 64, .25);
}
.pill.correct {
  background: linear-gradient(135deg, #b5ecd3, #8fdcc0);
  box-shadow: 0 0 0 4px rgba(111, 207, 165, .35), var(--shadow-soft);
}
.pill.wrong { background: #ffd9d9; }
.pill:disabled:not(.correct) { opacity: .45; }
.pill.pill-press { animation: jellyPress .55s var(--ease-out); }

.hint {
  min-height: 1.6em;
  font-weight: 600;
  color: var(--choc-soft);
  margin: 0;
}
.hint.good { color: #2f9b72; }

/* Footer: gift sleeps line + existing celebration badge row */
.gate-footer {
  width: 100%;
  margin-top: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(234, 219, 206, 0.6);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.countdown {
  margin: 0;
  font-size: .92rem;
  color: var(--latte);
  font-weight: 600;
  min-height: 1.2em;
  border: 0;
  padding: 0;
  display: block;
  text-align: center;
  background: transparent;
}
.countdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: left;
}
.countdown-badge {
  font-weight: 700;
  color: var(--choc-mid);
  background: var(--butter);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}
#gate-continue { margin-top: 4px; width: auto; }

.shake,
.shake-card { animation: shake-nanha 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake-nanha {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px) rotate(-1deg); }
  40%, 80% { transform: translateX(8px) rotate(1deg); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes jellyPress {
  0% { transform: scale(.9, .86); }
  40% { transform: scale(1.08, 1.12); }
  70% { transform: scale(.97, .96); }
  100% { transform: none; }
}
@keyframes peekUp {
  to { transform: translateY(4%) rotate(-6deg); }
}
@keyframes bobY {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}

/* nanha-gift peek octopus (kept alongside corner mascot) */
.octo-peek {
  position: fixed;
  right: max(-6px, var(--safe-r));
  /* Sit above the fixed credit footer so tentacles stay visible */
  bottom: calc(2.75rem + var(--safe-b));
  width: clamp(130px, 34vw, 200px);
  z-index: 36;
  pointer-events: none;
  transform: translateY(110%) rotate(-6deg);
  transform-origin: 70% 100%;
}
.octo-peek.peek-in { animation: peekUp 1.2s .5s var(--ease-bounce) forwards; }
.octo-peek .octopus-svg { width: 100%; height: auto; display: block; animation: bobY 4s ease-in-out infinite; }

@media (max-width: 380px) {
  .pill { min-width: 84px; padding: .55em 1em; }
  .gate-octopus-mascot { transform: rotate(-12deg) scale(0.85); top: -0.4rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .lock { width: 58px; }
  .octo-peek { width: 100px; }
  .gate-octopus-mascot { transform: rotate(-12deg) scale(0.85); top: -0.4rem; }
}
/* Short laptop heights — free vertical space for the gate card */
@media (min-width: 768px) and (max-height: 800px) {
  .screen[data-screen="gate"] {
    padding-bottom: calc(72px + var(--safe-b));
  }
  .octo-peek {
    width: clamp(96px, 18vw, 140px);
    bottom: calc(2.1rem + var(--safe-b));
  }
}
@media (min-width: 768px) and (max-height: 720px) {
  .screen[data-screen="gate"] {
    padding-bottom: calc(56px + var(--safe-b));
  }
  .octo-peek {
    width: clamp(84px, 15vw, 118px);
  }
}

/* ---- Birthday ---- */
.mandala-halo {
  position: absolute;
  width: min(90vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 168, 0.5), transparent 65%);
  filter: blur(4px);
  animation: pulse-glow 4s ease-in-out infinite;
  z-index: -1;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
#bday-title {
  font-size: clamp(2.2rem, 8vw, 3.2rem);
  text-align: center;
  background: linear-gradient(90deg, var(--choc-mid), var(--choc-soft), #FFA5BA, var(--choc-mid));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  to { background-position: 200% center; }
}

/* Shimmer gradient text — copied from nanha-gift */
.shimmer {
  background: linear-gradient(
    100deg,
    #e0568a 0%,
    #8f6bd9 25%,
    #e8803a 50%,
    #3f8fd6 75%,
    #e0568a 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 14px rgba(255, 158, 189, 0.35));
  animation: shimmerPos 7s linear infinite;
}
.shimmer .ch {
  background: linear-gradient(
    100deg,
    #e0568a 0%,
    #8f6bd9 25%,
    #e8803a 50%,
    #3f8fd6 75%,
    #e0568a 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmerPos 7s linear infinite;
}
@keyframes shimmerPos {
  to { background-position: -300% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shimmer,
  .shimmer .ch { animation: none; background-position: 0 0; }
}
.title-reveal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
}
/* Balloons — copied from nanha-gift */
.balloons,
#balloons {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.balloon {
  position: absolute;
  left: var(--x);
  bottom: -130px;
  width: var(--s);
  animation: balloonRise var(--d) linear var(--dl) infinite;
  opacity: 0.92;
}
.balloon svg { width: 100%; display: block; }
@keyframes balloonRise {
  0% { transform: translate(0, 0); }
  25% { transform: translate(var(--sw), -35vh); }
  50% { transform: translate(calc(var(--sw) * -1), -70vh); }
  100% { transform: translate(0, -140vh); }
}
@media (prefers-reduced-motion: reduce) {
  .balloon { animation: none !important; display: none; }
}

.interact-card { width: 100%; text-align: center; }
.interact-card.glass-warm,
.cake-card.glass-warm { margin-top: 0.15rem; }
.card-label { font-family: var(--font-script); font-size: 1.45rem; margin-bottom: 0.75rem; color: var(--choc-mid); }
/* Corner cats — wrap is size-matched to the card only (no extra padding) */
.bday-card-wrap {
  --bday-cat-size: clamp(84px, 16vw, 140px);
  --bday-cat-gap: clamp(1.25rem, 4.5vw, 3.25rem);
  position: relative;
  width: 100%;
  max-width: min(42rem, 100%);
  margin-inline: auto;
}
.bday-card-wrap > .glass-card {
  width: 100%;
  max-width: 100%;
}
.bday-corner-cats {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.bday-cat {
  position: absolute;
  display: block;
  width: var(--bday-cat-size);
  height: var(--bday-cat-size);
  opacity: 0;
  transform: scale(0.35) translateY(16px);
  filter: blur(2px);
  will-change: transform, opacity;
  pointer-events: none;
}
.bday-cat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}
.bday-cat--lt {
  top: 6%;
  left: calc(-1 * (var(--bday-cat-size) + var(--bday-cat-gap)));
  transform-origin: center bottom;
}
.bday-cat--lb {
  bottom: 8%;
  left: calc(-1 * (var(--bday-cat-size) + var(--bday-cat-gap)));
  transform-origin: center top;
}
.bday-cat--rt {
  top: 6%;
  right: calc(-1 * (var(--bday-cat-size) + var(--bday-cat-gap)));
  transform-origin: center bottom;
}
.bday-cat--rb {
  bottom: 8%;
  right: calc(-1 * (var(--bday-cat-size) + var(--bday-cat-gap)));
  transform-origin: center top;
}

.bday-corner-cats.is-visible .bday-cat {
  animation: bday-cat-pop 0.72s cubic-bezier(0.22, 1.35, 0.36, 1) forwards;
}
.bday-corner-cats.is-visible .bday-cat img {
  animation: bday-cat-bob 2.1s ease-in-out 0.72s infinite alternate;
}
.bday-corner-cats.is-visible .bday-cat--lt { animation-delay: 0s; }
.bday-corner-cats.is-visible .bday-cat--rt { animation-delay: 0.1s; }
.bday-corner-cats.is-visible .bday-cat--lb { animation-delay: 0.18s; }
.bday-corner-cats.is-visible .bday-cat--rb { animation-delay: 0.28s; }
.bday-corner-cats.is-visible .bday-cat--lt img { animation-delay: 0.72s; }
.bday-corner-cats.is-visible .bday-cat--rt img { animation-delay: 0.82s; }
.bday-corner-cats.is-visible .bday-cat--lb img { animation-delay: 0.9s; }
.bday-corner-cats.is-visible .bday-cat--rb img { animation-delay: 1s; }

@keyframes bday-cat-pop {
  0% {
    opacity: 0;
    transform: scale(0.28) translateY(18px);
    filter: blur(2px);
  }
  62% {
    opacity: 1;
    transform: scale(1.12) translateY(-5px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}
@keyframes bday-cat-bob {
  from { transform: translateY(0) rotate(-5deg) scale(1); }
  to { transform: translateY(-9px) rotate(5deg) scale(1.03); }
}

@media (max-width: 420px) {
  .bday-card-wrap {
    --bday-cat-size: clamp(64px, 18vw, 92px);
    --bday-cat-gap: clamp(0.65rem, 3vw, 1.25rem);
  }
  .bday-cat--lt,
  .bday-cat--rt { top: 4%; }
  .bday-cat--lb,
  .bday-cat--rb { bottom: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  .bday-corner-cats.is-visible .bday-cat,
  .bday-corner-cats.is-visible .bday-cat img {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.cake-stage { position: relative; margin: 0.35rem auto 0.75rem; }
.chars {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.char {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--lavender);
  border: 2px solid var(--white);
  box-shadow: var(--shadow);
}
.cake-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: auto;
  height: auto;
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
.cake-char-avatar {
  position: relative;
  width: clamp(96px, 26vw, 148px);
  height: clamp(118px, 32vw, 180px);
  margin: 0 auto;
  pointer-events: none;
}
.cake-char-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.cake-char-img.is-default {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cake-char-img.is-happy {
  opacity: 0;
  transform: translateY(4px) scale(0.98);
}
.cake-char.is-happy .cake-char-img.is-default {
  opacity: 0;
  transform: translateY(-4px) scale(1.02);
}
.cake-char.is-happy .cake-char-img.is-happy {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.char.cheer,
.cake-char.cheer .cake-char-avatar {
  animation: bounce 0.55s var(--ease) 3;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---- Nanha layered birthday cake ---- */
.nanha-cake {
  --cake-w: min(200px, 56vw);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.22, 1.2, 0.36, 1);
  position: relative;
  width: var(--cake-w);
  min-width: 148px;
  margin: 0 auto;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.nanha-cake:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 166, 186, 0.55);
  border-radius: 16px;
}
.cake-scene {
  position: relative;
  width: 100%;
  height: clamp(150px, 44vw, 168px);
  margin: 0 auto;
}
.cake-ambient {
  position: absolute;
  inset: 12% 10% 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 35%, rgba(255, 183, 3, 0.32), transparent 52%),
    radial-gradient(circle at 50% 70%, rgba(255, 214, 222, 0.38), transparent 68%);
  filter: blur(9px);
  pointer-events: none;
  animation: cake-glow 3.6s ease-in-out infinite alternate;
  z-index: 0;
}
.cake-ambient.burger-ambient {
  background:
    radial-gradient(circle at 45% 30%, rgba(255, 183, 77, 0.4), transparent 55%),
    radial-gradient(circle at 55% 70%, rgba(111, 191, 58, 0.18), transparent 65%);
}
.nanha-cake.is-blown .cake-ambient,
.nanha-cake.is-cut .cake-ambient {
  animation: none;
  background: radial-gradient(circle at 48% 65%, rgba(255, 183, 77, 0.28), transparent 70%);
  opacity: 0.75;
}
@keyframes cake-glow {
  from { opacity: 0.65; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.06); }
}

.realistic-cake-svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  max-height: 168px;
  overflow: visible;
  filter: drop-shadow(0 8px 14px rgba(102, 70, 44, 0.14));
}

#cake-slice,
#cake-left,
#knife-element,
#serve-plate,
#cake-stack {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
#cake-slice {
  transform-origin: 20% 80%;
}
#knife-element {
  transform-origin: 30% 85%;
}

/* Seamless whole cake until the cut reveals faces */
.nanha-cake:not(.is-cutting):not(.is-cut) .cut-face {
  opacity: 0 !important;
}
.nanha-cake.is-cutting .cut-face,
.nanha-cake.is-cut .cut-face {
  opacity: 1;
}

/* Candle flicker on SVG ellipses */
.candle .flame,
.candle .flame-core {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: svg-flame 0.55s ease-in-out infinite alternate;
}
.candle.c1 .flame, .candle.c1 .flame-core { animation-duration: 0.48s; animation-delay: -0.12s; }
.candle.c2 .flame, .candle.c2 .flame-core { animation-duration: 0.62s; animation-delay: -0.28s; }
.candle.c3 .flame, .candle.c3 .flame-core { animation-duration: 0.52s; animation-delay: -0.4s; }
@keyframes svg-flame {
  0% { transform: scaleX(1) scaleY(1) rotate(-4deg); }
  50% { transform: scaleX(0.9) scaleY(1.1) rotate(5deg); }
  100% { transform: scaleX(1.05) scaleY(0.95) rotate(-2deg); }
}
.nanha-cake.is-blown .candle .flame,
.nanha-cake.is-blown .candle .flame-core,
.nanha-cake.is-cut .candle .flame,
.nanha-cake.is-cut .candle .flame-core {
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden;
}

.cake-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 9;
}
.cake-crumb {
  position: absolute;
  width: 4px;
  height: 3px;
  border-radius: 40%;
  background: #e8c49a;
  opacity: 0;
}
.cake-crumb.frost {
  background: #ffa5ba;
  width: 5px;
  height: 4px;
}
.cake-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd76a;
  box-shadow: 0 0 6px rgba(255, 215, 106, 0.8);
  opacity: 0;
}
.cake-spark.pink { background: #ffb3c8; box-shadow: 0 0 6px rgba(255, 166, 186, 0.75); }
.cake-spark.cream { background: #fff6e8; }

#cake-finale {
  transition: opacity 0.45s var(--ease-soft), transform 0.45s var(--spring-soft);
  transform: translateY(6px);
}
#cake-finale.show {
  opacity: 1 !important;
  transform: translateY(0);
  pointer-events: auto;
}
#cake-status {
  transition: opacity 0.35s var(--ease-soft);
}
#cut-cake-btn:disabled {
  opacity: 0.72;
  cursor: default;
  transform: none !important;
}
#cut-cake-btn.cake-done,
#cut-cake-btn.cake-done:disabled {
  background: linear-gradient(135deg, #ffe0ec 0%, #ffd9c4 100%);
  color: #3b2418;
  opacity: 1;
  filter: none;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 24px -8px rgba(255, 143, 179, 0.45), 0 2px 6px rgba(122, 84, 64, 0.12);
}
#bday-continue:disabled,
#bday-continue.is-locked {
  background: linear-gradient(135deg, #9a9a9a 0%, #b0b0b0 100%) !important;
  color: #f3f3f3 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
  pointer-events: none;
}
#bday-continue:disabled:hover,
#bday-continue.is-locked:hover {
  transform: none !important;
  box-shadow: none !important;
}
.bday-continue-invite {
  animation: continue-invite 1.4s var(--spring) 2;
}
@keyframes continue-invite {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-3px) scale(1.03); }
  70% { transform: translateY(0) scale(1.01); }
}

.extras { text-align: center; margin-top: 0.35rem; font-size: 1.1rem; letter-spacing: 0.3rem; }

@media (max-width: 420px) {
  .nanha-cake { --cake-w: min(176px, 58vw); }
  .realistic-cake-svg { max-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .cake-ambient,
  .candle .flame,
  .candle .flame-core,
  .char.cheer,
  .cake-char.cheer .cake-char-avatar,
  .bday-continue-invite,
  .loader-octopus,
  .loader.ready-to-enter .loader-cta,
  .gate-card.gate-enter,
  #btn-music.music-toggle.is-playing,
  #btn-music.music-toggle.is-playing .music-disc,
  #btn-music.music-toggle.is-playing .music-disc-label,
  #btn-music.music-toggle.is-playing .music-eq i {
    animation: none !important;
  }
  .cake-char-img {
    transition: none !important;
  }
  .loader,
  .loader.done,
  .loader.is-opening .loader-inner,
  .screen,
  .screen.is-leaving,
  .screen.is-entering {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
  .screen.is-leaving,
  .screen.is-entering {
    will-change: auto !important;
  }
  #btn-music.music-toggle.is-playing .music-eq {
    opacity: 1;
    transform: none;
  }
  #btn-music.music-toggle.is-playing .music-eq i {
    height: 6px;
    opacity: 0.9;
  }
}

/* ---- Year ---- */
.year-card {
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: clamp(1.45rem, 3.8vw, 2.25rem) clamp(1.25rem, 3.8vw, 2.35rem);
  box-sizing: border-box;
}
.year-card h1 {
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  margin-bottom: 0.5rem;
  color: var(--choc-mid);
}
.year-card-badge {
  margin-bottom: clamp(0.75rem, 2vh, 1.1rem);
}
.year-card-title {
  margin-bottom: clamp(0.85rem, 2.2vh, 1.25rem);
  line-height: 1.2;
  padding-inline: 0.15em;
}
.year-card-flight {
  margin-top: clamp(0.65rem, 1.8vh, 1.1rem);
  margin-bottom: clamp(0.65rem, 1.8vh, 1.1rem);
  padding-block: clamp(0.3rem, 1vh, 0.65rem);
}
.year-card-flight #flight-svg,
.year-card-flight svg {
  max-height: clamp(9.5rem, 26vh, 13rem);
  width: 100%;
  margin-inline: auto;
}
.year-card-quote {
  margin-top: clamp(0.65rem, 1.8vh, 1rem);
  margin-bottom: clamp(0.6rem, 1.6vh, 0.95rem);
  padding-inline: 0.25rem;
  line-height: 1.45;
}
.year-card-body {
  margin-bottom: clamp(1.2rem, 3vh, 1.85rem);
  line-height: 1.6;
  padding-inline: 0.35rem;
}
.year-card-cta {
  margin-top: 0.1rem;
}

/* Pastel congratulatory blast — dreamy outlines + soft particles */
.screen[data-screen="year"] {
  position: relative;
  /* Extra inset so card + blast decorations have breathing room */
  padding-left: max(1.25rem, var(--safe-l)) !important;
  padding-right: max(1.25rem, var(--safe-r)) !important;
}
.screen[data-screen="year"] > .screen-inner.insp-inner {
  position: relative;
  z-index: 2;
  width: min(36rem, 100%) !important;
  max-width: min(36rem, 100%) !important;
  padding: 0.85rem 0.5rem 1.75rem !important;
}
.screen[data-screen="year"] .year-card {
  max-width: 100%;
}
.year-blast {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.7s var(--ease-soft);
}
.year-blast.is-on {
  opacity: 1;
}
.year-blast-host {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.year-blast-glow {
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(72vw, 420px);
  height: min(72vw, 420px);
  transform: translate(-50%, -50%) scale(0.55);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(248, 200, 220, 0.45) 0%, rgba(232, 213, 242, 0.28) 35%, rgba(191, 223, 255, 0.14) 58%, transparent 72%);
  opacity: 0;
  filter: blur(2px);
}
.year-blast.is-on .year-blast-glow {
  animation: year-glow-bloom 2.8s var(--ease-out) both;
}
.year-blast-deco {
  position: absolute;
  width: clamp(72px, 18vw, 140px);
  height: auto;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-out);
  will-change: transform, opacity;
}
.year-blast.is-on .year-blast-deco {
  opacity: 1;
  transform: scale(1);
  animation: year-deco-float 8s ease-in-out 0.9s infinite;
}
.year-blast-deco--tl { top: 4%; left: 2%; }
.year-blast-deco--tr {
  top: 6%;
  right: 1%;
  width: clamp(68px, 16vw, 128px);
  transition-delay: 0.08s;
  animation-duration: 9s !important;
}
.year-blast-deco--bl {
  bottom: 8%;
  left: 3%;
  width: clamp(64px, 15vw, 118px);
  transition-delay: 0.14s;
  animation-duration: 8.5s !important;
}
.year-blast-deco--br {
  bottom: 6%;
  right: 2%;
  width: clamp(70px, 17vw, 132px);
  transition-delay: 0.18s;
  animation-duration: 7.8s !important;
}
.year-blast-deco--ml {
  top: 42%;
  left: -1%;
  width: clamp(48px, 11vw, 84px);
  transition-delay: 0.22s;
  animation-duration: 10s !important;
}
.year-blast-deco--mr {
  top: 48%;
  right: -1%;
  width: clamp(48px, 11vw, 84px);
  transition-delay: 0.26s;
  animation-duration: 9.5s !important;
}
.year-blast-bit {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 2px;
  will-change: transform, opacity;
  animation: year-bit-drift var(--bit-dur, 3.2s) var(--ease-out) forwards;
  opacity: 0;
}
.year-blast-bit--circle { border-radius: 50%; }
.year-blast-bit--ring {
  border-radius: 50%;
  background: transparent !important;
  border: 1.5px solid currentColor;
  box-sizing: border-box;
}
.year-blast-bit--star,
.year-blast-bit--spark,
.year-blast-bit--heart,
.year-blast-bit--diamond {
  background: transparent !important;
}
.year-blast-bit--star::before,
.year-blast-bit--spark::before,
.year-blast-bit--diamond::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.year-blast-bit--spark::before {
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}
.year-blast-bit--diamond::before {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.year-blast-bit--heart::before {
  content: "♥";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1em;
  line-height: 1;
  color: currentColor;
}
@keyframes year-glow-bloom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  35% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0.35; transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes year-deco-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(0, -10px) rotate(4deg) scale(1.03); }
}
@keyframes year-bit-drift {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.55);
  }
  12% { opacity: var(--bit-peak, 0.9); }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--bit-x, 40px), var(--bit-y, -80px)) rotate(var(--bit-rot, 140deg)) scale(var(--bit-scale, 0.7));
  }
}
@media (max-width: 640px) {
  .year-blast-deco--ml,
  .year-blast-deco--mr { display: none; }
  .year-blast-deco {
    width: clamp(56px, 22vw, 96px);
  }
  .year-blast-glow {
    width: min(88vw, 340px);
    height: min(88vw, 340px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .year-blast.is-on .year-blast-glow,
  .year-blast.is-on .year-blast-deco,
  .year-blast-bit {
    animation: none !important;
  }
  .year-blast.is-on .year-blast-deco {
    opacity: 0.7;
  }
  .year-blast.is-on .year-blast-glow {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Flight card + butterflies — copied from nanha-gift */
.flight,
#flight.flight {
  width: 100%;
  padding: 8px;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
}
.flight svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.svg-label {
  font: 700 13px var(--font-body, Quicksand, system-ui, sans-serif);
  fill: var(--choc-soft, #8a5d3b);
}
.svg-label.km {
  font: 600 17px var(--font-script, Caveat, cursive);
  fill: #b98f74;
}
.bfly { filter: drop-shadow(0 3px 5px rgba(122, 84, 64, 0.25)); }
.bfly .wing { transform-origin: 0 0; }
.bfly .wl { animation: flap 0.32s ease-in-out infinite alternate; }
.bfly .wr { animation: flap 0.32s ease-in-out infinite alternate; }
@keyframes flap {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .bfly .wl,
  .bfly .wr { animation: none !important; }
}
.glow-one {
  font-family: var(--font-script);
  font-size: 5rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--butter), var(--blush), var(--lavender));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(248, 200, 220, 0.6));
  animation: pulse-glow 3s ease-in-out infinite;
}
.distance-viz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0 0.5rem;
  width: 100%;
}
.soft-line {
  flex: 1;
  height: 2px;
  max-width: 120px;
  background: linear-gradient(90deg, var(--blush), var(--lavender));
  border-radius: 2px;
  position: relative;
}
.soft-line::before,
.soft-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blush);
  box-shadow: 0 0 10px var(--blush);
  transform: translateY(-50%);
  animation: meet-dots 3s ease-in-out infinite;
}
.soft-line::before { left: 0; }
.soft-line::after { right: 0; animation-name: meet-dots-r; }
@keyframes meet-dots {
  0%, 100% { left: 0; }
  50% { left: 42%; }
}
@keyframes meet-dots-r {
  0%, 100% { right: 0; }
  50% { right: 42%; }
}
.lantern { font-size: 1.5rem; animation: sway 3s ease-in-out infinite; }
.lantern.l2 { animation-delay: 0.5s; }
@keyframes sway {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}

/* ---- Baby / Polaroid ---- */
.polaroid {
  background: var(--white);
  padding: 0.75rem 0.75rem 2rem;
  border-radius: 14px;
  border: 1px solid rgba(234, 219, 206, 0.9);
  box-shadow: var(--shadow-lift);
  width: min(280px, 85vw);
  position: relative;
  transform: rotate(-2deg);
}
.polaroid.bloom { animation: bloom-in 1s var(--ease); }
@keyframes bloom-in {
  from { opacity: 0; transform: rotate(-2deg) scale(0.85); filter: blur(6px); }
  to { opacity: 1; transform: rotate(-2deg) scale(1); filter: blur(0); }
}
.polaroid-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: linear-gradient(135deg, var(--lavender), var(--baby));
  border-radius: 2px;
}
.polaroid-cap {
  font-family: var(--font-script);
  text-align: center;
  margin-top: 0.75rem;
  font-size: 1.2rem;
}
.curtain {
  position: absolute;
  inset: 0.75rem 0.75rem 2rem;
  background: linear-gradient(160deg, #ffd6e3 0%, #e3d9ff 55%, #fff1b8 100%);
  z-index: 2;
  transform-origin: top;
  transition: transform 1.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.curtain.open { transform: scaleY(0); }

/* ---- Baby page entrance (cute staggered reveal) ---- */
/* Baby reading chrome: clear fixed brand + credit while this long scroll is active */
.screen[data-screen="baby"].active {
  padding-top: calc(4.85rem + var(--safe-t));
  padding-bottom: calc(5.4rem + var(--safe-b));
  scroll-padding-top: calc(4.85rem + var(--safe-t));
  scroll-padding-bottom: calc(4.75rem + var(--safe-b));
}
body:has(.screen[data-screen="baby"].active) .app-credit {
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 640px) {
  body:has(.screen[data-screen="baby"].active) #chrome-brand {
    background: rgba(255, 252, 248, 0.94);
    box-shadow:
      0 8px 20px rgba(102, 70, 44, 0.08),
      0 0 0 1px rgba(255, 255, 255, 0.95);
  }
}

.screen[data-screen="baby"] .baby-enter {
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  filter: blur(6px);
  pointer-events: none;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.screen[data-screen="baby"] .baby-enter.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  pointer-events: auto;
}
.screen[data-screen="baby"] .baby-polaroid {
  position: relative;
  z-index: 0;
  display: block;
  width: min(100%, 22.5rem);
  margin: 0.35rem auto 1.75rem;
  padding: 0.7rem 0.7rem 0.85rem;
  background: #fff;
  border: 1px solid #f0e4d7;
  border-radius: 1.1rem;
  box-shadow: 0 18px 40px rgba(102, 70, 44, 0.14);
  transform: translateY(22px) rotate(-8deg) scale(0.72);
  transform-origin: 50% 60%;
  text-align: center;
}
@media (min-width: 1100px) {
  .screen[data-screen="baby"] .baby-polaroid {
    width: min(100%, 29rem);
  }
}
.screen[data-screen="baby"] .baby-polaroid.is-in {
  transform: rotate(-1.25deg) scale(1);
}
.screen[data-screen="baby"] #baby-frame.bloom {
  animation: babyBloom 1.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.screen[data-screen="baby"] #baby-frame.bloom.is-in {
  /* keep resting tilt after bloom */
  transform: rotate(-1.25deg) scale(1);
}
.screen[data-screen="baby"] #baby-frame.bloom:hover {
  transform: rotate(0deg) scale(1);
  transition: transform 0.35s var(--ease-bounce);
}
.screen[data-screen="baby"] .baby-keepsake {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(6.4rem, 0.85fr);
  gap: 0.55rem;
  align-items: stretch;
}
.screen[data-screen="baby"] .baby-photo {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  border-radius: 0.8rem;
  overflow: hidden;
  background: linear-gradient(135deg, #ffe5d9, #fff2c6 45%, #ffd6de);
}
.screen[data-screen="baby"] .baby-photo .curtain {
  inset: 0;
  border-radius: inherit;
  z-index: 10;
}
.screen[data-screen="baby"] .baby-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.55rem 0.45rem 0.7rem;
  border-radius: 0.8rem;
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 214, 222, 0.55), transparent 42%),
    linear-gradient(165deg, #fff8ef 0%, #ffe9f0 48%, #fff3d8 100%);
  border: 1px solid rgba(240, 228, 215, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  overflow: hidden;
}
.screen[data-screen="baby"] .baby-side::before {
  content: "";
  position: absolute;
  inset: 0.35rem;
  border-radius: 0.55rem;
  border: 1px dashed rgba(185, 143, 116, 0.28);
  pointer-events: none;
}
.screen[data-screen="baby"] .baby-side-eyebrow {
  position: relative;
  margin: 0;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8c7565;
}
.screen[data-screen="baby"] .baby-side-date {
  position: relative;
  margin: 0.05rem 0 0;
  font-size: clamp(1.05rem, 3.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.05;
  color: #66462c;
  letter-spacing: -0.01em;
}
.screen[data-screen="baby"] .baby-side-rule {
  position: relative;
  display: block;
  width: 2.1rem;
  height: 2px;
  margin: 0.28rem 0 0.2rem;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #e8a0b0 20%, #f0c26e 50%, #e8a0b0 80%, transparent);
}
.screen[data-screen="baby"] .baby-side-name {
  position: relative;
  margin: 0;
  font-size: clamp(0.95rem, 3.4vw, 1.15rem);
  font-weight: 700;
  line-height: 1.15;
  color: #8a5d3b;
}
.screen[data-screen="baby"] .baby-side-note {
  position: relative;
  margin: 0.15rem 0 0;
  max-width: 7.2rem;
  font-size: 0.68rem;
  line-height: 1.35;
  font-weight: 600;
  color: #8c7565;
}
.screen[data-screen="baby"] .baby-side-stamp {
  position: relative;
  margin-top: 0.25rem;
  font-size: 0.95rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(255, 143, 179, 0.28));
  animation: babyStampFloat 2.8s ease-in-out infinite;
}
@keyframes babyStampFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-2px) rotate(4deg); }
}
.screen[data-screen="baby"] .baby-caption {
  margin: 0.65rem 0.15rem 0;
  font-size: clamp(1.05rem, 3.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  color: #66462c;
}
.screen[data-screen="baby"] .baby-inner,
.screen[data-screen="baby"] .screen-inner.wide {
  width: min(100%, 980px);
  max-width: min(100%, 980px);
  align-items: center;
  text-align: center;
  gap: 0;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
@media (min-width: 1100px) {
  .screen[data-screen="baby"] .baby-inner,
  .screen[data-screen="baby"] .screen-inner.wide {
    width: min(100%, 1120px);
    max-width: min(100%, 1120px);
  }
}
.screen[data-screen="baby"] .baby-card {
  position: relative;
  width: 100%;
  max-width: none;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0.5rem 0 2.25rem;
}
/* Wide-desktop scrapbook gutters — restrained CSS ornaments */
@media (min-width: 1180px) {
  .screen[data-screen="baby"] .baby-card::before,
  .screen[data-screen="baby"] .baby-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.62;
  }
  .screen[data-screen="baby"] .baby-card::before {
    top: 14%;
    left: max(0.35rem, calc(50% - 34.5rem));
    width: 2.75rem;
    height: 0.95rem;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 214, 222, 0.9), rgba(255, 242, 198, 0.72));
    box-shadow:
      0 1px 3px rgba(102, 70, 44, 0.1),
      0 7.5rem 0 0.15rem rgba(255, 229, 217, 0.55),
      -0.55rem 16rem 0 -0.05rem rgba(255, 242, 198, 0.7);
    transform: rotate(-16deg);
  }
  .screen[data-screen="baby"] .baby-card::after {
    top: 22%;
    right: max(0.45rem, calc(50% - 34.2rem));
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.85), transparent 42%),
      radial-gradient(circle at 50% 55%, rgba(255, 214, 222, 0.7), rgba(255, 242, 198, 0.35) 70%, transparent 72%);
    box-shadow:
      0 10rem -0.15rem 0.05rem rgba(255, 229, 217, 0.5),
      -0.35rem 21rem 0 -0.35rem rgba(240, 194, 110, 0.35);
    transform: rotate(8deg);
  }
}
/* ---- Scrapbook divider (polaroid → facts) ---- */
.screen[data-screen="baby"] .baby-scrap-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: min(100%, 22rem);
  margin: 0.15rem auto 1.35rem;
}
.screen[data-screen="baby"] .baby-scrap-divider-line {
  flex: 1;
  height: 1.5px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(232, 160, 176, 0.55), rgba(240, 194, 110, 0.65), rgba(232, 160, 176, 0.55), transparent);
}
.screen[data-screen="baby"] .baby-scrap-divider-seal {
  font-size: 0.95rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(255, 143, 179, 0.25));
}

/* ---- Facts scrapbook section ---- */
.screen[data-screen="baby"] .baby-facts-wrap {
  position: relative;
  z-index: 1;
  margin-top: 0.15rem;
  clear: both;
  width: 100%;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media (min-width: 1100px) {
  .screen[data-screen="baby"] .baby-facts-wrap {
    max-width: 52rem;
  }
}
.screen[data-screen="baby"] .baby-facts-header {
  margin-bottom: 1.1rem;
}
.screen[data-screen="baby"] .baby-facts-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8c7565; /* label / nonessential */
}
.screen[data-screen="baby"] .baby-facts-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.55rem, 5.2vw, 2.15rem);
  font-weight: 700;
  line-height: 1.2;
  color: #66462c;
  letter-spacing: -0.01em;
}
.screen[data-screen="baby"] .baby-facts-intro {
  margin: 0 auto;
  max-width: 28rem;
  font-size: 0.84rem;
  line-height: 1.55;
  font-weight: 600;
  color: #6f5748; /* ≥4.5:1 on pastel washes */
}
.screen[data-screen="baby"] .baby-facts-grid,
.screen[data-screen="baby"] #facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
}
@media (min-width: 680px) {
  .screen[data-screen="baby"] .baby-facts-grid,
  .screen[data-screen="baby"] #facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem 1rem;
  }
  .screen[data-screen="baby"] #facts > .baby-fact:last-child:nth-child(odd):not([hidden]) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: calc((100% - 1rem) / 2);
    justify-self: center;
  }
}

/* Fact note cards — scrapbook stickers */
.screen[data-screen="baby"] .baby-fact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.05rem 1.05rem;
  border-radius: 1.05rem;
  border: 1px solid rgba(230, 210, 198, 0.75);
  box-shadow:
    0 10px 26px rgba(102, 70, 44, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  overflow: hidden;
  opacity: 0;
  transform: translateY(22px) scale(0.96);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
}
.screen[data-screen="baby"] .baby-fact.is-in {
  opacity: 1;
  transform: none;
}
.screen[data-screen="baby"] .baby-fact[hidden] {
  display: none !important;
}
.screen[data-screen="baby"] .baby-fact-tone-0 {
  background:
    linear-gradient(160deg, rgba(255, 214, 222, 0.28) 0%, rgba(255, 252, 248, 0.98) 46%, rgba(255, 242, 198, 0.2) 100%);
  border-left: 3px solid #f0a8b8;
}
.screen[data-screen="baby"] .baby-fact-tone-1 {
  background:
    linear-gradient(160deg, rgba(255, 242, 198, 0.34) 0%, rgba(255, 252, 248, 0.98) 46%, rgba(255, 229, 217, 0.22) 100%);
  border-left: 3px solid #e8c878;
}
.screen[data-screen="baby"] .baby-fact-tone-2 {
  background:
    linear-gradient(160deg, rgba(255, 229, 217, 0.34) 0%, rgba(255, 252, 248, 0.98) 46%, rgba(255, 214, 222, 0.2) 100%);
  border-left: 3px solid #e8b89a;
}
.screen[data-screen="baby"] .baby-fact-tape {
  position: absolute;
  top: -0.15rem;
  right: 1.1rem;
  width: 2.35rem;
  height: 0.78rem;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 242, 198, 0.85), rgba(255, 214, 222, 0.65));
  box-shadow: 0 1px 2px rgba(102, 70, 44, 0.12);
  transform: rotate(8deg);
  opacity: 0.9;
  pointer-events: none;
}
.screen[data-screen="baby"] .baby-fact-tone-1 .baby-fact-tape {
  background: linear-gradient(180deg, rgba(255, 214, 222, 0.8), rgba(255, 229, 217, 0.7));
  right: auto;
  left: 1.15rem;
  transform: rotate(-7deg);
}
.screen[data-screen="baby"] .baby-fact-tone-2 .baby-fact-tape {
  background: linear-gradient(180deg, rgba(255, 229, 217, 0.85), rgba(255, 242, 198, 0.7));
  transform: rotate(4deg);
}
.screen[data-screen="baby"] .baby-fact-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.screen[data-screen="baby"] .baby-fact-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.35rem;
  border-radius: 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #66462c;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(230, 210, 198, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.screen[data-screen="baby"] .baby-fact-tone-0 .baby-fact-num {
  background: rgba(255, 214, 222, 0.55);
}
.screen[data-screen="baby"] .baby-fact-tone-1 .baby-fact-num {
  background: rgba(255, 242, 198, 0.7);
}
.screen[data-screen="baby"] .baby-fact-tone-2 .baby-fact-num {
  background: rgba(255, 229, 217, 0.7);
}
.screen[data-screen="baby"] .baby-fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 0.7rem;
  font-size: 1.05rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(240, 228, 215, 0.9);
  box-shadow: 0 2px 6px rgba(102, 70, 44, 0.06);
  transform-origin: 55% 60%;
}
.screen[data-screen="baby"] .baby-fact.is-in .baby-fact-icon {
  animation: babyFactIconWobble 2.8s ease-in-out 0.4s infinite;
}
@keyframes babyFactIconWobble {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg); }
}
.screen[data-screen="baby"] .baby-fact-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
  color: #66462c;
}
.screen[data-screen="baby"] .baby-fact-body {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  font-weight: 600;
  color: #6f5748; /* darkened for ≥4.5:1 on blush/butter/peach */
}
@media (min-width: 680px) {
  .screen[data-screen="baby"] .baby-fact {
    padding: 1.1rem 1.15rem 1.15rem;
  }
  .screen[data-screen="baby"] .baby-fact-title {
    font-size: 1rem;
  }
  .screen[data-screen="baby"] .baby-fact-body {
    font-size: 0.9rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .screen[data-screen="baby"] .baby-fact.is-in:hover {
    transform: translateY(-3px);
    box-shadow:
      0 16px 32px rgba(102, 70, 44, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.75);
  }
}
.screen[data-screen="baby"] .baby-fact.is-in:active {
  transform: translateY(1px) scale(0.99);
}

/* Show more quirks */
.screen[data-screen="baby"] .baby-facts-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 1rem auto 0;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1.5px dashed rgba(232, 160, 176, 0.7);
  background: rgba(255, 252, 248, 0.85);
  color: #66462c;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(102, 70, 44, 0.06);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, box-shadow 0.25s ease;
}
.screen[data-screen="baby"] .baby-facts-more:hover {
  transform: translateY(-2px);
  background: rgba(255, 214, 222, 0.45);
  box-shadow: 0 8px 18px rgba(102, 70, 44, 0.1);
}
.screen[data-screen="baby"] .baby-facts-more:focus-visible {
  outline: 2px solid #e8a0b0;
  outline-offset: 3px;
}
.screen[data-screen="baby"] .baby-facts-more[hidden] {
  display: none !important;
}

/* Closing love-note strip */
.screen[data-screen="baby"] .baby-facts-outro {
  position: relative;
  display: block;
  width: min(100%, 28rem);
  margin: 1.35rem auto 0;
  padding: 1.05rem 1.2rem 1.15rem;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 214, 222, 0.45), transparent 45%),
    linear-gradient(165deg, #fff9f2 0%, #ffeef3 55%, #fff6e0 100%);
  border: 1px solid rgba(240, 210, 200, 0.9);
  box-shadow:
    0 12px 28px rgba(102, 70, 44, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  text-align: center;
  transform: rotate(-0.6deg);
}
.screen[data-screen="baby"] .baby-facts-outro[hidden] {
  display: none !important;
}
.screen[data-screen="baby"] .baby-outro-tape {
  position: absolute;
  top: -0.35rem;
  left: 50%;
  width: 3.2rem;
  height: 0.85rem;
  margin-left: -1.6rem;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 214, 222, 0.9), rgba(255, 242, 198, 0.75));
  box-shadow: 0 1px 3px rgba(102, 70, 44, 0.12);
  transform: rotate(-2deg);
}
.screen[data-screen="baby"] .baby-outro-text {
  margin: 0;
  font-family: "Caveat", "Dancing Script", cursive;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  line-height: 1.45;
  font-weight: 600;
  color: #66462c;
  font-style: normal;
}

.screen[data-screen="baby"] .baby-cta {
  margin-top: 1.75rem;
  padding-bottom: 0.35rem;
}

@media (max-width: 380px) {
  .screen[data-screen="baby"] .baby-keepsake {
    grid-template-columns: 1fr;
  }
  .screen[data-screen="baby"] .baby-side {
    min-height: 4.6rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.55rem;
    padding: 0.55rem 0.65rem;
  }
  .screen[data-screen="baby"] .baby-side-rule {
    display: none;
  }
  .screen[data-screen="baby"] .baby-side-note {
    max-width: none;
  }
}
@keyframes babyBloom {
  0% {
    opacity: 0;
    clip-path: circle(0% at 42% 48%);
    transform: rotate(-12deg) scale(0.48);
    filter: blur(8px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    clip-path: circle(150% at 42% 48%);
    transform: rotate(-1.25deg) scale(1);
    filter: blur(0);
  }
}
.screen[data-screen="baby"] .baby-sparkle {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(255, 143, 179, 0.35));
}
.screen[data-screen="baby"].baby-ready .baby-sparkle {
  animation: babySparklePop 2.4s var(--ease-bounce) both;
}
.screen[data-screen="baby"].baby-ready .baby-sparkle:nth-child(1) { animation-delay: 0.95s; }
.screen[data-screen="baby"].baby-ready .baby-sparkle:nth-child(2) { animation-delay: 1.15s; }
.screen[data-screen="baby"].baby-ready .baby-sparkle:nth-child(3) { animation-delay: 1.35s; }
.screen[data-screen="baby"].baby-ready .baby-sparkle:nth-child(4) { animation-delay: 1.55s; }
@keyframes babySparklePop {
  0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  35% { opacity: 1; transform: scale(1.25) rotate(8deg); }
  70% { opacity: 0.9; transform: scale(1) rotate(-4deg); }
  100% { opacity: 0.75; transform: scale(1.05) rotate(0deg); }
}
.screen[data-screen="baby"] .baby-caption.is-in {
  animation: babyCaptionBounce 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes babyCaptionBounce {
  0% { transform: translateY(10px) scale(0.9); }
  60% { transform: translateY(-2px) scale(1.04); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .screen[data-screen="baby"] .baby-enter,
  .screen[data-screen="baby"] .baby-fact {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
    pointer-events: auto !important;
  }
  .screen[data-screen="baby"] #baby-frame.bloom { animation: none !important; }
  .screen[data-screen="baby"] .baby-sparkle { opacity: 0.7; transform: none; animation: none !important; }
  .screen[data-screen="baby"] .baby-side-stamp { animation: none !important; }
  .screen[data-screen="baby"] .baby-fact.is-in .baby-fact-icon { animation: none !important; }
  .curtain { transition: none; }
}

.facts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.fact-card {
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 250, 247, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border-warm);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(16px) rotateX(8deg);
  transition: opacity 0.5s, transform 0.5s var(--ease), box-shadow 0.25s;
}
.fact-card.show { opacity: 1; transform: none; }
.fact-card.show:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.fact-card:nth-child(odd) { background: rgba(255, 214, 222, 0.28); }
.fact-card:nth-child(even) { background: rgba(219, 234, 254, 0.32); }
.fact-card h4 { font-family: var(--font-script); font-size: 1.25rem; margin-bottom: 0.25rem; color: var(--choc-mid); }
.fact-card p { font-size: 0.95rem; color: var(--text-muted); }

/* ---- Dive (full-screen underwater — from nanha-gift) ---- */
.screen[data-screen="dive"],
.screen.screen-dive {
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 25;
  contain: none;
  align-items: stretch;
  justify-content: stretch;
}
.water-body {
  position: absolute;
  inset: 0;
  overflow: visible;
  background: transparent;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.screen-dive.is-draining .water-body,
.water-body.is-exiting {
  will-change: transform;
}
.water-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #c8edff 0%, #86cdf0 30%, #4ea9dc 65%, #3b86c4 100%);
  /* Soften the rect edge where the lip takes over */
  -webkit-mask-image: linear-gradient(#000 0%, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 calc(100% - 22px), transparent 100%);
}
.wave {
  position: absolute;
  top: -28px;
  left: 0;
  width: 200%;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0 18Q25 0 50 18T100 18V30H0Z' fill='%23c8edff'/%3E%3C/svg%3E") repeat-x;
  background-size: 100px 30px;
  animation: waveMove 4s linear infinite;
}
/* Cute liquid trailing edge for the upward exit */
.water-lip {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 88px;
  transform: translateY(72%);
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(47, 120, 184, 0.28));
}
.water-lip-svg {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 100%;
  display: block;
  animation: waterLipDrift 4.2s linear infinite;
}
.water-lip-svg--lag {
  opacity: 0.85;
  animation-duration: 5.6s;
  animation-direction: reverse;
}
.lip-deep { fill: #2a6fad; }
.lip-main { fill: #3b86c4; }
.lip-foam { fill: rgba(200, 237, 255, 0.55); }
.lip-sheen { fill: rgba(255, 255, 255, 0.35); }
@keyframes waterLipDrift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.water-drip {
  position: absolute;
  left: var(--x);
  top: 58%;
  width: var(--s);
  height: calc(var(--s) * 1.35);
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), #7ec3ef 55%, #3b86c4 100%);
  opacity: 0;
  transform: translate(-50%, 0) scale(0.6);
  box-shadow: 0 4px 8px rgba(47, 120, 184, 0.25);
}
.screen-dive.is-draining {
  overflow: visible !important;
}
.screen-dive.is-draining .water-lip {
  transform: translateY(78%);
  height: 108px;
  filter: drop-shadow(0 14px 18px rgba(47, 120, 184, 0.32));
}
.screen-dive.is-draining .water-lip-svg {
  animation-duration: 2.4s;
}
.screen-dive.is-draining .water-drip {
  animation: waterDrip 1.5s ease-in var(--d) infinite;
}
@keyframes waterDrip {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.45); }
  18% { opacity: 0.95; transform: translate(-50%, 8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 54px) scale(0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .water-lip-svg { animation: none; }
  .water-drip { animation: none !important; opacity: 0.5; }
}
.caustics {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 8%, rgba(255, 255, 255, 0.45), transparent 40%),
    radial-gradient(ellipse at 75% 0%, rgba(255, 255, 255, 0.4), transparent 45%),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.13) 0 22px, transparent 22px 80px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  animation: caustic 7s ease-in-out infinite alternate;
}
.sea { position: absolute; inset: 0; overflow: hidden; }
.fish-wrap {
  position: absolute;
  top: var(--t);
  left: 0;
  width: var(--s);
  animation: swimR var(--d) linear var(--dl) infinite;
}
.fish-wrap:not(.rtl) svg { transform: scaleX(-1); }
.fish-wrap.rtl {
  left: auto;
  right: 0;
  animation-name: swimL;
}
.fish-bob {
  animation: bobFish 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  backface-visibility: hidden;
}
.fish-bob svg { width: 100%; display: block; }
.jelly-wrap {
  position: absolute;
  left: var(--x);
  bottom: -24%;
  width: var(--s);
  opacity: 0.9;
  animation: jellyFloat var(--d) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--dl) infinite alternate;
  backface-visibility: hidden;
}
.jelly-wrap svg {
  width: 100%;
  display: block;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
}
.jelly-wrap .jt {
  animation: tentSway 1.6s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: top;
}
.sea-bubble {
  position: absolute;
  left: var(--x);
  bottom: -40px;
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.08) 62%);
  animation: bubbleUp var(--d) linear var(--dl) infinite;
  backface-visibility: hidden;
  contain: layout paint;
}
.dive-octo {
  position: absolute;
  top: 56%;
  left: 0;
  width: clamp(110px, 28vw, 170px);
  opacity: 0;
  z-index: 2;
}
.dive-octo svg { width: 100%; height: auto; display: block; }
.dive-octo.swim { animation: octoSwim 7.5s ease-in-out 1.4s forwards; }
.dive-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 24%;
  padding: 0 20px;
  text-align: center;
  font-family: var(--font-script), Caveat, cursive;
  font-size: clamp(2rem, 9vw, 3.8rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 26px rgba(24, 80, 150, 0.55);
  z-index: 3;
  margin: 0;
}
@keyframes waveMove { to { transform: translateX(-100px); } }
@keyframes caustic {
  from { transform: translateX(-3%) scale(1.04); opacity: 0.8; }
  to { transform: translateX(3%) scale(1); opacity: 1; }
}
@keyframes swimR { from { transform: translate3d(-30vw, 0, 0); } to { transform: translate3d(115vw, 0, 0); } }
@keyframes swimL { from { transform: translate3d(30vw, 0, 0); } to { transform: translate3d(-115vw, 0, 0); } }
@keyframes bobFish {
  from { transform: translate3d(0, -8px, 0) rotate(-3deg); }
  to { transform: translate3d(0, 8px, 0) rotate(3deg); }
}
@keyframes jellyFloat {
  from { transform: translate3d(0, 16vh, 0) scale(1, 0.95); }
  to { transform: translate3d(0, -86vh, 0) scale(0.95, 1.05); }
}
@keyframes tentSway { from { transform: skewX(-8deg); } to { transform: skewX(8deg); } }
@keyframes bubbleUp { to { transform: translate3d(0, -120vh, 0); } }
@keyframes octoSwim {
  0% { opacity: 0; transform: translate(-35vw, 8vh) rotate(8deg); }
  8% { opacity: 1; }
  50% { transform: translate(40vw, -10vh) rotate(-6deg); }
  92% { opacity: 1; }
  100% { opacity: 1; transform: translate(125vw, 4vh) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wave, .caustics, .fish-wrap, .fish-bob, .jelly-wrap, .jelly-wrap .jt, .sea-bubble, .dive-octo.swim {
    animation: none !important;
  }
  .dive-octo { opacity: 1; left: 50%; transform: translateX(-50%); }
}

/* ---- Memories timeline — font/size/placement from nanha-gift ---- */
.screen[data-screen="memories"] .mem-inner,
.screen[data-screen="memories"] .screen-inner.wide {
  width: min(100%, 980px);
  max-width: min(100%, 980px);
  align-items: center;
  text-align: center;
  gap: 16px;
  /* Extra scroll room so ∞ can rise into the fill tip / end of scroll */
  padding-bottom: max(32vh, 220px);
}
/* Emerging from underwater: clipped + rising with the water line */
.screen[data-screen="memories"].memories-emerging {
  z-index: 20;
  will-change: clip-path, transform;
  /* contain would clip the cinematic uncover — disable during emerge */
  contain: none;
}
.screen[data-screen="memories"].memories-emerging .tl-card {
  /* Cheaper paint while water clip animates over the timeline */
  box-shadow: 0 6px 18px rgba(185, 143, 116, 0.1);
}
.screen[data-screen="memories"].memories-emerging::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  pointer-events: none;
  z-index: 21;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(190, 230, 255, 0.18) 40%,
    rgba(255, 255, 255, 0.35) 70%,
    transparent 100%
  );
  opacity: 0;
  animation: memWaterShimmer 3.4s ease-out forwards;
}
@keyframes memWaterShimmer {
  0% { top: 92%; height: 48px; opacity: 0; }
  25% { opacity: 0.85; }
  100% { top: -4%; height: 64px; opacity: 0; }
}
.screen[data-screen="memories"].memories-emerging .tl-item:not(.in) .tl-card {
  opacity: 0;
}
.screen[data-screen="memories"] .mem-eyebrow,
.screen[data-screen="memories"] .eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--latte, #b98f74);
  padding: 0.6rem 1.25rem;
  margin: 0.85rem 0 0.15rem;
}
.screen[data-screen="memories"] .mem-title,
.screen[data-screen="memories"] #mem-title.script,
.screen[data-screen="memories"] #mem-title {
  font-family: var(--font-script), "Dancing Script", Caveat, cursive;
  font-size: clamp(2rem, 8.6vw, 3.6rem);
  font-weight: 700;
  color: var(--choc, #4a3528);
  margin: 0;
  line-height: 1.12;
}
.screen[data-screen="memories"] .timeline {
  position: relative;
  width: 100%;
  margin: 14px 0 6px;
  text-align: left;
  padding-left: 0;
  overflow: visible;
}
.tl-line {
  position: absolute;
  left: 25px;
  top: 0;
  bottom: auto;
  width: 4px;
  height: 100%; /* JS shortens this so the track ends at ∞ */
  border-radius: 4px;
  background: rgba(185, 143, 116, 0.22);
  overflow: visible;
  pointer-events: none;
}
.tl-line i {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Full track height; progress via scaleY — no layout thrash on scroll */
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(#ff9ebd, #c9a7ff, #8fdcc0);
  box-shadow: 0 0 14px 3px rgba(255, 158, 189, 0.6);
  transform: scaleY(0);
  transform-origin: top center;
  transition:
    transform 0.14s linear,
    box-shadow 0.45s ease;
  will-change: transform;
  backface-visibility: hidden;
}
.tl-line i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px 6px rgba(255, 158, 189, 0.8);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.9s ease;
}
.timeline.is-forever-lit .tl-line i::after {
  opacity: 0;
  transform: scale(0.35);
}
#tl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* Timeline forever ∞ + soft message */
.tl-forever {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0 28px 62px;
  min-height: 120px;
}
.tl-infinity {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1;
  color: rgba(185, 143, 116, 0.45);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 209, 224, 0.35);
  transform: scale(0.86);
  opacity: 0.55;
  z-index: 2;
  transition:
    color 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 1.15s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 1.1s ease,
    filter 1.1s ease;
}
.timeline.is-forever-lit .tl-infinity {
  color: #ff7eab;
  opacity: 1;
  transform: scale(1);
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(255, 209, 224, 0.85),
    0 0 22px 6px rgba(255, 158, 189, 0.55),
    0 8px 18px rgba(255, 158, 189, 0.25);
  animation: tl-inf-glow 3.4s ease-in-out infinite;
}
.timeline.is-forever-connecting .tl-infinity {
  animation:
    tl-inf-connect 1.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1,
    tl-inf-glow 3.4s ease-in-out 1.9s infinite;
}
.timeline.is-forever-connecting .tl-line i {
  box-shadow:
    0 0 20px 7px rgba(255, 126, 171, 0.7),
    0 0 36px 12px rgba(255, 158, 189, 0.35);
  animation: tl-fill-kiss 1.6s ease-in-out 1;
}
.timeline.is-forever-connecting .tl-line i::after {
  opacity: 1;
  transform: scale(1.55);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.75),
    0 0 24px 12px rgba(255, 126, 171, 0.75),
    0 0 40px 18px rgba(255, 182, 198, 0.4);
  animation: tl-tip-kiss 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}
.tl-forever-fx {
  position: absolute;
  left: -28px;
  top: -40px;
  width: 120px;
  height: 130px;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}
.tl-fx-ring {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 126, 171, 0.55);
  box-shadow: 0 0 14px 3px rgba(255, 158, 189, 0.3);
  opacity: 0;
  transform: scale(0.45);
  animation: tl-fx-ring 1.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--delay, 0s) forwards;
}
.tl-fx-bit {
  position: absolute;
  left: 50%;
  top: 55%;
  font-size: 0.82rem;
  line-height: 1;
  color: #ff8fb3;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  filter: drop-shadow(0 0 6px rgba(255, 158, 189, 0.55));
  animation: tl-fx-float var(--dur, 2s) cubic-bezier(0.22, 0.61, 0.36, 1) var(--delay, 0s) forwards;
  will-change: transform, opacity;
}
.tl-fx-bit.is-spark {
  color: #ffc9e0;
  font-size: 0.64rem;
  filter: drop-shadow(0 0 5px rgba(255, 209, 224, 0.85));
}
.tl-fx-bit.is-glow {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd1e0 42%, transparent 74%);
  box-shadow: 0 0 16px 5px rgba(255, 126, 171, 0.5);
  font-size: 0;
}
.tl-forever-heart {
  display: inline-block;
  transform: translateY(0.18em);
  transform-origin: center;
}
.tl-forever-msg.is-shown .tl-forever-heart {
  animation: tl-heart-breathe 3.6s ease-in-out infinite 0.4s;
}
.tl-forever-msg {
  margin: 58px 0 0;
  max-width: 22rem;
  padding: 10px 16px;
  font-family: var(--font-script), "Dancing Script", Caveat, cursive;
  font-size: clamp(1.05rem, 3.4vw, 1.28rem);
  line-height: 1.35;
  color: #c47a8f;
  letter-spacing: 0.01em;
  text-align: left;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 209, 224, 0.65);
  box-shadow: 0 8px 22px rgba(255, 182, 198, 0.18);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.tl-forever-msg.is-shown {
  pointer-events: auto;
  border-color: rgba(255, 158, 189, 0.85);
  box-shadow:
    0 10px 26px rgba(255, 158, 189, 0.28),
    0 0 0 1px rgba(255, 209, 224, 0.35);
  /* Float in, then keep a seamless soft bob — no transition fighting the animation */
  animation:
    tl-msg-float-in 1.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
    tl-msg-float 5.5s ease-in-out 1.55s infinite;
}
.tl-forever-msg.is-shown.is-settled {
  opacity: 1;
  animation: tl-msg-float 5.5s ease-in-out infinite;
}
@keyframes tl-inf-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 126, 171, 0.15)); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 126, 171, 0.55)); }
}
@keyframes tl-inf-connect {
  0% {
    transform: scale(0.9);
    filter: drop-shadow(0 0 0 rgba(255, 126, 171, 0));
    box-shadow:
      0 0 0 3px rgba(255, 209, 224, 0.35),
      0 0 0 0 rgba(255, 126, 171, 0);
  }
  45% {
    transform: scale(1.14);
    filter: drop-shadow(0 0 18px rgba(255, 126, 171, 0.75));
    box-shadow:
      0 0 0 5px rgba(255, 209, 224, 0.9),
      0 0 28px 10px rgba(255, 126, 171, 0.55),
      0 0 48px 18px rgba(255, 182, 198, 0.28);
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(255, 126, 171, 0.45));
    box-shadow:
      0 0 0 4px rgba(255, 209, 224, 0.85),
      0 0 22px 6px rgba(255, 158, 189, 0.55),
      0 8px 18px rgba(255, 158, 189, 0.25);
  }
}
@keyframes tl-fill-kiss {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.22); }
  100% { filter: brightness(1); }
}
@keyframes tl-tip-kiss {
  0% { transform: scale(1); opacity: 0.85; }
  35% { transform: scale(1.55); opacity: 1; }
  100% { transform: scale(0.35); opacity: 0; }
}
@keyframes tl-fx-ring {
  0% {
    opacity: 0.55;
    transform: scale(0.5);
    border-color: rgba(255, 255, 255, 0.7);
  }
  100% {
    opacity: 0;
    transform: scale(var(--scale, 2));
    border-color: rgba(255, 126, 171, 0);
  }
}
@keyframes tl-msg-float-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes tl-msg-float {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(0, -3.5px, 0); }
  40% { transform: translate3d(0, -1px, 0); }
  60% { transform: translate3d(0, -4.5px, 0); }
  80% { transform: translate3d(0, -1.5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes tl-heart-breathe {
  0%, 100% { transform: translateY(0.18em) scale(1); opacity: 0.9; }
  50% { transform: translateY(0.1em) scale(1.08); opacity: 1; }
}
@keyframes tl-fx-float {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }
  18% { opacity: 0.95; }
  70% { opacity: 0.55; }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, -48px)))
      scale(var(--sc, 1))
      rotate(var(--rot, 12deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .timeline.is-forever-lit .tl-infinity,
  .timeline.is-forever-connecting .tl-infinity,
  .timeline.is-forever-connecting .tl-line i,
  .timeline.is-forever-connecting .tl-line i::after,
  .tl-forever-msg.is-shown,
  .tl-forever-msg.is-shown .tl-forever-heart { animation: none; }
  .tl-forever-msg,
  .tl-forever-msg.is-shown,
  .tl-forever-msg.is-shown.is-settled {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  .tl-fx-bit,
  .tl-fx-ring { display: none; }
}
.tl-item {
  position: relative;
  padding: 0 0 28px 62px;
  /* Nodes sit outside the item box on desktop — never clip them */
  overflow: visible;
}
.tl-node {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 209, 224, 0.8), var(--shadow-soft);
  display: grid;
  place-items: center;
  padding: 7px;
  transform: scale(0);
  transition: transform 0.78s var(--ease-bounce);
  font-size: 1.25rem;
  line-height: 1;
  z-index: 2;
  will-change: transform;
}
.tl-emoji { display: grid; place-items: center; }
.tl-item.in .tl-node { transform: scale(1); will-change: auto; }
.tl-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
  width: 100%;
  padding: 22px clamp(16px, 4vw, 30px);
  border-radius: 30px;
  /* Solid glass look — no backdrop-filter (that was the main lag source) */
  background: rgba(255, 252, 250, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 10px 28px rgba(185, 143, 116, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset;
  opacity: 0;
  transform: translate3d(28px, 0, 0) scale(0.98);
  /* Opacity + transform only — never animate filter/blur */
  transition: opacity 0.72s var(--ease-out), transform 0.72s var(--ease-out);
  backface-visibility: hidden;
}
.tl-item.in .tl-card { opacity: 1; transform: none; }
.tl-card h3 {
  font-family: var(--font-script), "Dancing Script", Caveat, cursive;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--choc, #4a3528);
  margin: 0;
  font-weight: 700;
}
.tl-card p {
  width: 100%;
  max-width: 36em;
  font-size: 0.98rem;
  color: #7a5440;
  margin: 0;
  line-height: 1.65;
  font-weight: 500;
  text-align: left;
  text-wrap: pretty;
  letter-spacing: 0.01em;
}
.screen[data-screen="memories"] .date-badge,
.tl-card .date-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #ffd6e3, #e3d9ff);
  color: #4a2c20;
}
.tl-card .mem-badge {
  background: linear-gradient(135deg, #ffe5d9, #daf5eb);
  font-size: 0.72rem;
}
.tl-card .tl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tl-photo {
  position: relative;
  width: 100%;
  margin: 4px 0 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 1 / 1;
}
.tl-photo img,
.tl-photo .photo-load-host {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.tl-photo .photo-load-host {
  aspect-ratio: auto;
  border-radius: inherit;
}
/* Library Encounter — lyric memory diary card */
.tl-art-guitar.lyric-memory {
  position: relative;
  /* Grow with all lyric lines (do not inherit .tl-photo 1:1 crop) */
  aspect-ratio: auto;
  height: auto;
  border: 1px solid rgba(255, 186, 198, 0.55);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 228, 236, 0.9) 0%, transparent 55%),
    radial-gradient(circle at 12% 88%, rgba(255, 214, 198, 0.45) 0%, transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(255, 236, 220, 0.55) 0%, transparent 26%),
    linear-gradient(165deg, #fffaf7 0%, #ffe9f0 42%, #fff3e8 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
    0 10px 28px rgba(196, 130, 140, 0.12),
    0 2px 0 rgba(255, 255, 255, 0.8) inset;
}
.tl-item.in .tl-art-guitar.lyric-memory {
  animation: lyric-card-glow 2.4s ease 14.8s both;
}
.lyric-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 22px;
  min-height: 0;
  height: auto;
  overflow: visible;
}
.lyric-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.lyric-petal {
  font-size: 0.85rem;
  color: #e8a0b0;
  opacity: 0.55;
}
.lyric-petal-1 { top: 14%; left: 7%; transform: rotate(-18deg); }
.lyric-petal-2 { bottom: 18%; right: 8%; transform: rotate(22deg); font-size: 0.72rem; color: #d4a08c; }
.lyric-heart {
  font-size: 0.72rem;
  color: #e28aa0;
  opacity: 0;
}
.lyric-h1 { top: 28%; right: 11%; }
.lyric-h2 { bottom: 30%; left: 10%; font-size: 0.62rem; color: #c47a8f; }
.lyric-spark {
  font-size: 0.55rem;
  color: #d4a574;
  opacity: 0.5;
}
.lyric-s1 { top: 18%; right: 22%; }
.lyric-s2 { top: 62%; left: 16%; font-size: 0.45rem; }
.lyric-s3 { bottom: 22%; right: 28%; font-size: 0.7rem; color: #e8b4c0; }
.lyric-note {
  font-size: 0.95rem;
  color: #c47a8f;
  opacity: 0;
  text-shadow: 0 2px 8px rgba(255, 182, 198, 0.45);
}
.lyric-n1 { left: 12%; top: 48%; }
.lyric-n2 { right: 14%; top: 40%; font-size: 0.85rem; color: #b98f74; }
.lyric-n3 { left: 48%; top: 12%; font-size: 0.78rem; color: #d4899c; }

.tl-item.in .lyric-h1 { animation: lyric-float-heart 9.5s ease-in-out 1.8s infinite; }
.tl-item.in .lyric-h2 { animation: lyric-float-heart 10.5s ease-in-out 3.5s infinite; }
.tl-item.in .lyric-s1,
.tl-item.in .lyric-s2,
.tl-item.in .lyric-s3 { animation: lyric-twinkle 6.5s ease-in-out infinite; }
.tl-item.in .lyric-s2 { animation-delay: 2s; }
.tl-item.in .lyric-s3 { animation-delay: 3.5s; }
.tl-item.in .lyric-n1 { animation: lyric-float-note 8.5s ease-in-out 1s infinite; }
.tl-item.in .lyric-n2 { animation: lyric-float-note 9.2s ease-in-out 2.8s infinite; }
.tl-item.in .lyric-n3 { animation: lyric-float-note 8s ease-in-out 4.5s infinite; }

.lyric-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  opacity: 0;
  transform: translateY(8px);
}
.tl-item.in .lyric-head {
  animation: lyric-line-in 1.5s cubic-bezier(0.33, 0.12, 0.18, 1) 0.4s both;
}
.lyric-head-note {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 0.95rem;
  color: #c47a8f;
  background:
    radial-gradient(circle at 35% 30%, #fff 0%, transparent 45%),
    linear-gradient(145deg, #ffe3ee, #ffe8d9);
  border: 1px solid rgba(255, 182, 198, 0.55);
  box-shadow: 0 4px 12px rgba(212, 130, 150, 0.18);
}
.lyric-head-text { text-align: left; min-width: 0; }
.lyric-kicker {
  margin: 0;
  font-family: Quicksand, Nunito, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--latte, #b98f74);
}
.lyric-title {
  margin: 2px 0 0;
  font-family: "Dancing Script", var(--font-script), cursive;
  font-size: clamp(0.98rem, 3vw, 1.18rem);
  font-weight: 700;
  color: var(--choc, #4a3528);
  line-height: 1.28;
}

.lyric-wave {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 18px;
  opacity: 0;
}
.tl-item.in .lyric-wave {
  animation: lyric-line-in 1.4s ease 0.9s both;
}
.lyric-wave i {
  display: block;
  width: 2.5px;
  border-radius: 99px;
  background: linear-gradient(180deg, #ff9ebd, #e8b4a0);
  opacity: 0.7;
  height: 40%;
  transform-origin: bottom center;
}
.tl-item.in .lyric-wave i {
  animation: lyric-wave-bar 4.2s ease-in-out infinite;
}
.lyric-wave i:nth-child(1) { animation-delay: 0s; height: 35%; }
.lyric-wave i:nth-child(2) { animation-delay: 0.1s; height: 55%; }
.lyric-wave i:nth-child(3) { animation-delay: 0.2s; height: 80%; }
.lyric-wave i:nth-child(4) { animation-delay: 0.08s; height: 45%; }
.lyric-wave i:nth-child(5) { animation-delay: 0.25s; height: 95%; }
.lyric-wave i:nth-child(6) { animation-delay: 0.12s; height: 50%; }
.lyric-wave i:nth-child(7) { animation-delay: 0.3s; height: 70%; }
.lyric-wave i:nth-child(8) { animation-delay: 0.05s; height: 40%; }
.lyric-wave i:nth-child(9) { animation-delay: 0.18s; height: 60%; }

.lyric-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  margin: 2px 0 4px;
  opacity: 0;
  transform: translateY(6px);
}
.tl-item.in .lyric-stage {
  animation: lyric-line-in 1.6s cubic-bezier(0.33, 0.12, 0.18, 1) 1.4s both;
}
.lyric-stage .gh-heart {
  position: relative;
  z-index: 2;
  font-size: 1.85rem;
  line-height: 1;
  animation: gh-heartbeat 2.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(255, 120, 160, 0.35));
  transform-origin: center;
}
.lyric-stage .gh-guitar {
  position: relative;
  z-index: 2;
  font-size: 2rem;
  line-height: 1;
  animation: gh-strum 2.8s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(102, 70, 44, 0.18));
  transform-origin: 40% 70%;
}
.lyric-stage .gh-pulse,
.lyric-stage .gh-pulse-2 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 143, 179, 0.4);
  pointer-events: none;
  animation: gh-ring 4.8s ease-out infinite;
}
.lyric-stage .gh-pulse-2 { animation-delay: 2.4s; }

.lyric-lines {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 4px 4px 2px;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.lyric-line {
  margin: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
}
.tl-item.in .lyric-line {
  animation:
    lyric-line-in 2.1s cubic-bezier(0.33, 0.12, 0.18, 1) calc(2.2s + var(--i, 0) * 1.85s) both,
    lyric-line-glow 2.6s ease calc(2.2s + var(--i, 0) * 1.85s) both;
}
.lyric-text {
  display: inline-block;
  font-family: var(--font-script), "Caveat", cursive;
  font-size: clamp(1.12rem, 3.6vw, 1.38rem);
  font-weight: 700;
  line-height: 1.35;
  color: #7a5440;
  letter-spacing: 0.015em;
  padding: 0 2px;
  border-radius: 6px;
}
.lyric-text em {
  font-style: normal;
  color: #a85d72;
  background: linear-gradient(180deg, transparent 62%, rgba(255, 196, 210, 0.55) 62%);
  border-radius: 2px;
}
.lyric-finale .lyric-text {
  font-size: clamp(1.18rem, 3.8vw, 1.48rem);
  color: var(--choc-mid, #66462c);
  padding: 4px 10px;
}
.tl-item.in .lyric-finale .lyric-text {
  animation: lyric-finale-bloom 2.4s ease calc(2.2s + 5 * 1.85s + 0.5s) both;
}
.lyric-finale .lyric-text em {
  color: #c45f78;
  background: linear-gradient(180deg, transparent 58%, rgba(255, 182, 198, 0.7) 58%);
}

.lyric-caption {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  margin: 6px 0 0;
  font-family: "Dancing Script", var(--font-script), cursive;
  font-size: clamp(0.92rem, 2.8vw, 1.08rem);
  font-weight: 600;
  color: #b07a88;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(8px);
}
.tl-item.in .lyric-caption {
  animation: lyric-line-in 2s ease calc(2.2s + 6 * 1.85s + 0.35s) both;
}
.lyric-caption-rule {
  flex: 1;
  height: 1px;
  max-width: 42px;
  background: linear-gradient(90deg, transparent, rgba(212, 150, 160, 0.55), transparent);
}

@keyframes lyric-line-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes lyric-line-glow {
  0% { filter: none; }
  40% { filter: drop-shadow(0 0 12px rgba(255, 180, 198, 0.55)); }
  100% { filter: none; }
}
@keyframes lyric-finale-bloom {
  0% { box-shadow: none; }
  45% {
    box-shadow:
      0 0 0 1px rgba(255, 196, 210, 0.3),
      0 0 24px rgba(255, 170, 190, 0.28);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 196, 210, 0.16),
      0 0 12px rgba(255, 170, 190, 0.1);
  }
}
@keyframes lyric-card-glow {
  0% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.65) inset,
      0 10px 28px rgba(196, 130, 140, 0.12);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 220, 230, 0.85) inset,
      0 0 34px rgba(255, 170, 190, 0.28),
      0 12px 32px rgba(196, 130, 140, 0.16);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.65) inset,
      0 10px 28px rgba(196, 130, 140, 0.14),
      0 0 18px rgba(255, 190, 205, 0.16);
  }
}
@keyframes lyric-wave-bar {
  0%, 100% { transform: scaleY(0.6); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 0.85; }
}
@keyframes lyric-float-note {
  0% { transform: translateY(4px) scale(0.88); opacity: 0; }
  22% { opacity: 0.7; }
  60% { opacity: 0.55; }
  100% { transform: translateY(-36px) translateX(4px) scale(1.02); opacity: 0; }
}
@keyframes lyric-float-heart {
  0% { transform: translateY(3px) scale(0.85); opacity: 0; }
  25% { opacity: 0.6; }
  65% { opacity: 0.4; }
  100% { transform: translateY(-30px) scale(1.02); opacity: 0; }
}
@keyframes lyric-twinkle {
  0%, 100% { opacity: 0.22; transform: scale(0.9); }
  50% { opacity: 0.75; transform: scale(1.08); }
}
@keyframes gh-heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.14); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  56% { transform: scale(1); }
}
@keyframes gh-strum {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  25% { transform: rotate(-2deg) translateY(-2px); }
  50% { transform: rotate(-10deg) translateY(1px); }
  75% { transform: rotate(-4deg) translateY(-1px); }
}
@keyframes gh-ring {
  0% { transform: scale(0.55); opacity: 0.55; }
  70% { opacity: 0.12; }
  100% { transform: scale(2.15); opacity: 0; }
}

@media (max-width: 480px) {
  .lyric-card { padding: 16px 12px 14px; gap: 10px; }
  .lyric-lines { gap: 0.45rem; }
  .lyric-head { max-width: 100%; }
  .lyric-petal-1,
  .lyric-petal-2 { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-item.in .tl-art-guitar.lyric-memory,
  .tl-item.in .lyric-head,
  .tl-item.in .lyric-wave,
  .tl-item.in .lyric-stage,
  .tl-item.in .lyric-line,
  .tl-item.in .lyric-finale .lyric-text,
  .tl-item.in .lyric-caption,
  .tl-item.in .lyric-h1,
  .tl-item.in .lyric-h2,
  .tl-item.in .lyric-s1,
  .tl-item.in .lyric-s2,
  .tl-item.in .lyric-s3,
  .tl-item.in .lyric-n1,
  .tl-item.in .lyric-n2,
  .tl-item.in .lyric-n3,
  .tl-item.in .lyric-wave i,
  .lyric-stage .gh-heart,
  .lyric-stage .gh-guitar,
  .lyric-stage .gh-pulse,
  .lyric-stage .gh-pulse-2 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .lyric-stage .gh-pulse,
  .lyric-stage .gh-pulse-2 { opacity: 0.22 !important; }
  .lyric-heart,
  .lyric-note { opacity: 0.45 !important; }
}

/* Choosing Us — big cat2 + small cat1, decorated scene */
.tl-art-cats {
  /* Grow with cats content (do not inherit .tl-photo 1:1 empty space) */
  aspect-ratio: auto;
  height: auto;
  /* Admiring palette: champagne gold + apricot + rosewood (precious, warm regard) */
  border: 1px solid rgba(224, 168, 148, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 228, 200, 0.4),
    0 12px 30px rgba(196, 130, 110, 0.14),
    inset 0 0 42px rgba(255, 236, 220, 0.4);
  background:
    radial-gradient(ellipse 72% 58% at 48% 46%, rgba(255, 244, 232, 0.98) 0%, transparent 64%),
    radial-gradient(circle at 12% 16%, rgba(255, 214, 198, 0.5) 0%, transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(255, 228, 180, 0.48) 0%, transparent 26%),
    radial-gradient(circle at 84% 80%, rgba(240, 176, 168, 0.32) 0%, transparent 30%),
    radial-gradient(circle at 8% 74%, rgba(255, 210, 186, 0.38) 0%, transparent 24%),
    linear-gradient(155deg, #fffaf4 0%, #ffe8dc 46%, #fff0e4 100%);
  overflow: hidden;
}
.tl-art-cats img {
  width: auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  box-shadow: none !important;
  filter: none !important;
  background: transparent;
}
.cats-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  height: auto;
  padding: 22px 14px 18px;
  overflow: visible;
}
.cats-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 85% 75% at 50% 48%, transparent 48%, rgba(224, 160, 140, 0.16) 100%),
    radial-gradient(circle at 4% 8%, rgba(255, 200, 170, 0.28) 0%, transparent 18%),
    radial-gradient(circle at 96% 10%, rgba(255, 220, 160, 0.26) 0%, transparent 16%),
    radial-gradient(circle at 6% 92%, rgba(240, 180, 160, 0.22) 0%, transparent 16%),
    radial-gradient(circle at 94% 88%, rgba(232, 168, 170, 0.2) 0%, transparent 16%);
}
.cats-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 140px;
  height: 90px;
  margin: -45px 0 0 -82px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 200, 160, 0.32) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.cats-glow-soft {
  width: 200px;
  height: 120px;
  margin: -60px 0 0 -110px;
  background: radial-gradient(ellipse, rgba(255, 228, 180, 0.24) 0%, transparent 72%);
}
.tl-item.in .cats-glow { animation: cats-glow-pulse 3.2s ease-in-out infinite; }
.tl-item.in .cats-glow-soft { animation: cats-glow-pulse 4.4s ease-in-out infinite 0.8s; }
.cats-duo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  transform: translateX(6px);
}
.cats-duo-big {
  width: clamp(118px, 38vw, 168px);
  height: auto;
  max-height: 168px;
  margin-right: -14px;
  box-shadow: none;
  filter: none;
}
.cats-duo-small {
  width: clamp(52px, 16vw, 72px);
  height: auto;
  max-height: 72px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  box-shadow: none;
  filter: none;
}
.tl-item.in .cats-duo-big { animation: cats-duo-bob 2.4s ease-in-out infinite; }
.tl-item.in .cats-duo-small { animation: cats-duo-bob 2.4s ease-in-out infinite 0.45s; }
.tl-card p.cats-caption,
.cats-caption {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  max-width: none;
  margin: 10px auto 0;
  font-family: var(--font-script);
  font-size: clamp(0.98rem, 3.2vw, 1.18rem);
  font-weight: 600;
  line-height: 1.35;
  color: #b4786a;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 246, 236, 0.7);
}
.tl-item.l .tl-card p.cats-caption {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.cats-deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}

/* Hearts — soft coral & rosewood (warm esteem). Motion only after card enters. */
.cats-h1 { left: 7%; top: 12%; font-size: 1.05rem; color: #e89a8c; opacity: 0.9; }
.cats-h2 { right: 8%; top: 10%; font-size: 0.95rem; opacity: 0.9; }
.cats-h3 { left: 5%; bottom: 26%; font-size: 0.82rem; color: #d88a7c; opacity: 0.85; }
.cats-h4 { right: 5%; bottom: 30%; font-size: 0.88rem; opacity: 0.85; }
.cats-h5 { left: 22%; top: 6%; font-size: 0.72rem; color: #f0a898; opacity: 0.85; }
.cats-h6 { right: 22%; top: 22%; font-size: 0.7rem; color: #e09088; opacity: 0.75; }
.cats-h7 { left: 88%; bottom: 42%; font-size: 0.68rem; color: #e8a090; opacity: 0.8; }
.tl-item.in .cats-h1 { animation: cats-float 3.4s ease-in-out infinite; }
.tl-item.in .cats-h2 { animation: cats-float 3.8s ease-in-out infinite 0.6s; }
.tl-item.in .cats-h3 { animation: cats-float 3.2s ease-in-out infinite 1.1s; }
.tl-item.in .cats-h4 { animation: cats-float 3.6s ease-in-out infinite 0.3s; }
.tl-item.in .cats-h5 { animation: cats-float 4.1s ease-in-out infinite 1.8s; }
.tl-item.in .cats-h6 { animation: cats-float-drift 4.6s ease-in-out infinite 0.9s; }
.tl-item.in .cats-h7 { animation: cats-float 3.9s ease-in-out infinite 2.1s; }

/* Twinkling stars — champagne gold (admiration sparkle) */
.cats-s1 { left: 3%; top: 40%; font-size: 0.78rem; color: #d4a86a; opacity: 0.7; text-shadow: 0 0 6px rgba(255, 210, 140, 0.45); }
.cats-s2 { right: 3%; top: 36%; font-size: 0.85rem; color: #e8b888; opacity: 0.7; }
.cats-s3 { left: 26%; top: 4%; font-size: 0.72rem; color: #f0c890; opacity: 0.7; }
.cats-s4 { right: 28%; top: 4%; font-size: 0.95rem; color: #e8b070; opacity: 0.75; text-shadow: 0 0 8px rgba(255, 214, 150, 0.55); }
.cats-s5 { left: 74%; bottom: 12%; font-size: 0.75rem; color: #d4a070; opacity: 0.7; }
.cats-s6 { left: 48%; top: 8%; font-size: 0.62rem; color: #ecc090; opacity: 0.65; }
.cats-s7 { right: 16%; bottom: 20%; font-size: 0.7rem; color: #e0a888; opacity: 0.7; }
.cats-s8 { left: 14%; top: 52%; font-size: 0.65rem; color: #d8a878; opacity: 0.65; }
.tl-item.in .cats-s1 { animation: cats-twinkle 2.4s ease-in-out infinite; }
.tl-item.in .cats-s2 { animation: cats-twinkle 2.8s ease-in-out infinite 0.5s; }
.tl-item.in .cats-s3 { animation: cats-twinkle 2.2s ease-in-out infinite 1s; }
.tl-item.in .cats-s4 { animation: cats-twinkle 2.6s ease-in-out infinite 0.2s; }
.tl-item.in .cats-s5 { animation: cats-twinkle 2.5s ease-in-out infinite 1.4s; }
.tl-item.in .cats-s6 { animation: cats-twinkle 3s ease-in-out infinite 0.8s; }
.tl-item.in .cats-s7 { animation: cats-twinkle 2.3s ease-in-out infinite 1.7s; }
.tl-item.in .cats-s8 { animation: cats-twinkle 2.7s ease-in-out infinite 0.35s; }

/* Flowers & petals — apricot & honey */
.cats-f1 { left: 4%; bottom: 8%; font-size: 0.95rem; opacity: 0.9; }
.cats-f2 { right: 10%; bottom: 8%; font-size: 0.88rem; color: #e09888; opacity: 0.9; }
.cats-f3 { right: 4%; top: 48%; font-size: 0.78rem; color: #e8a890; opacity: 0.9; }
.cats-f4 { left: 10%; top: 28%; font-size: 0.72rem; opacity: 0.9; }
.tl-item.in .cats-f1 { animation: cats-float 4s ease-in-out infinite 0.8s; }
.tl-item.in .cats-f2 { animation: cats-float 3.7s ease-in-out infinite 1.5s; }
.tl-item.in .cats-f3 { animation: cats-float 4.2s ease-in-out infinite 0.4s; }
.tl-item.in .cats-f4 { animation: cats-float 4.5s ease-in-out infinite 1.2s; }

.cats-petal {
  width: 9px;
  height: 12px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(160deg, rgba(255, 186, 160, 0.78), rgba(255, 220, 180, 0.55));
  box-shadow: 0 1px 3px rgba(196, 120, 90, 0.2);
}
.cats-p1 { left: 18%; bottom: 18%; --petal-rot: -28deg; }
.cats-p2 { right: 20%; top: 30%; width: 7px; height: 10px; --petal-rot: 35deg; background: linear-gradient(160deg, rgba(255, 210, 160, 0.72), rgba(255, 230, 200, 0.5)); }
.cats-p3 { left: 82%; bottom: 24%; width: 8px; height: 11px; --petal-rot: 18deg; background: linear-gradient(160deg, rgba(240, 170, 150, 0.7), rgba(255, 214, 190, 0.5)); }
.cats-p4 { left: 32%; bottom: 8%; width: 6px; height: 9px; --petal-rot: -12deg; background: linear-gradient(160deg, rgba(255, 200, 150, 0.68), rgba(255, 232, 210, 0.48)); }
.tl-item.in .cats-petal { animation: cats-petal-drift 5.2s ease-in-out infinite; }
.tl-item.in .cats-p1 { animation-delay: 0.2s; }
.tl-item.in .cats-p2 { animation-delay: 1.4s; }
.tl-item.in .cats-p3 { animation-delay: 2.2s; }
.tl-item.in .cats-p4 { animation-delay: 0.9s; }

/* Soft romantic doodles */
.cats-doodle {
  color: #d89880;
  opacity: 0.55;
  font-size: 0.85rem;
}
.cats-do1 { left: 2%; bottom: 38%; }
.cats-do2 { right: 2%; bottom: 48%; font-size: 1rem; color: #e0a888; }
.cats-do3 { left: 62%; top: 6%; }
.tl-item.in .cats-do1 { animation: cats-twinkle 3.4s ease-in-out infinite 0.5s; }
.tl-item.in .cats-do2 { animation: cats-twinkle 3.8s ease-in-out infinite 1.3s; }
.tl-item.in .cats-do3 { animation: cats-twinkle 3.2s ease-in-out infinite 2s; }

/* Glowing particles — warm champagne dust */
.cats-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 196, 150, 0.58);
  box-shadow: 0 0 7px rgba(255, 210, 150, 0.5);
}
.cats-d1 { left: 20%; top: 24%; }
.cats-d2 { right: 18%; top: 44%; width: 5px; height: 5px; background: rgba(240, 190, 130, 0.62); }
.cats-d3 { left: 80%; top: 66%; width: 4px; height: 4px; background: rgba(236, 170, 150, 0.55); }
.cats-d4 { left: 36%; bottom: 10%; width: 5px; height: 5px; background: rgba(232, 176, 140, 0.55); }
.cats-d5 { left: 58%; top: 14%; width: 4px; height: 4px; background: rgba(255, 220, 160, 0.6); box-shadow: 0 0 9px rgba(255, 220, 150, 0.6); }
.cats-d6 { right: 8%; bottom: 16%; width: 5px; height: 5px; background: rgba(240, 180, 150, 0.52); }
.cats-d7 { left: 8%; top: 62%; width: 3px; height: 3px; background: rgba(255, 210, 170, 0.62); }
.cats-d8 { left: 44%; top: 20%; width: 3px; height: 3px; background: rgba(255, 226, 180, 0.6); box-shadow: 0 0 8px rgba(255, 220, 160, 0.6); }
.tl-item.in .cats-dot { animation: cats-twinkle 2.8s ease-in-out infinite; }
.tl-item.in .cats-d1 { animation-delay: 0.4s; }
.tl-item.in .cats-d2 { animation-delay: 1.1s; }
.tl-item.in .cats-d3 { animation-delay: 0.7s; }
.tl-item.in .cats-d4 { animation-delay: 1.6s; }
.tl-item.in .cats-d5 { animation-delay: 0.2s; }
.tl-item.in .cats-d6 { animation-delay: 2s; }
.tl-item.in .cats-d7 { animation-delay: 1.3s; }
.tl-item.in .cats-d8 { animation-delay: 2.4s; }

@keyframes cats-duo-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes cats-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.75; }
  50% { transform: translateY(-8px) scale(1.08); opacity: 1; }
}
@keyframes cats-float-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.65; }
  50% { transform: translate(4px, -10px) scale(1.06); opacity: 1; }
}
@keyframes cats-petal-drift {
  0%, 100% { transform: translateY(0) rotate(var(--petal-rot, -20deg)); opacity: 0.55; }
  50% { transform: translateY(-10px) rotate(calc(var(--petal-rot, -20deg) + 12deg)); opacity: 0.9; }
}
@keyframes cats-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes cats-glow-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .cats-duo-big,
  .cats-duo-small,
  .cats-deco,
  .cats-glow,
  .cats-glow-soft { animation: none; }
  .cats-deco { opacity: 0.85; }
  .cats-petal { opacity: 0.7; }
}
@media (min-width: 820px) {
  .screen[data-screen="memories"] .tl-line,
  .tl-line { left: 50%; margin-left: -2px; }
  .tl-item { width: 50%; padding: 0 50px 36px 0; }
  .tl-item.r { margin-left: 50%; padding: 0 0 36px 50px; }
  .tl-item .tl-node { left: auto; right: -23px; }
  .tl-item.r .tl-node { left: -23px; right: auto; }
  .tl-item.l .tl-card {
    transform: translate3d(-32px, 0, 0) scale(0.98);
    align-items: stretch;
    text-align: left;
  }
  .tl-item.l .tl-meta { justify-content: flex-end; }
  .tl-item.l .tl-card h3 {
    text-align: right;
    width: 100%;
  }
  .tl-item.l .tl-card p {
    margin-left: auto;
    text-align: left;
  }
  .tl-item.l.in .tl-card,
  .tl-item.r.in .tl-card { transform: none; }
  .tl-forever {
    align-items: center;
    padding: 12px 50px 36px;
    text-align: center;
    min-height: 130px;
  }
  .tl-infinity {
    left: 50%;
    margin-left: -23px;
  }
  .tl-forever-fx {
    left: 50%;
    margin-left: -45px;
  }
  .tl-forever-msg {
    margin-top: 64px;
    text-align: center;
    max-width: 24rem;
  }
}
.memory-card {
  position: relative;
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.15rem;
  margin-left: 0.75rem;
  background: var(--glass-warm);
  border: 1px solid var(--glass-border-warm);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s, transform 0.5s var(--ease), box-shadow 0.25s;
}
.memory-card.show { opacity: 1; transform: none; }
.memory-card.show:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.memory-card::before {
  content: attr(data-icon);
  position: absolute;
  left: -2.15rem;
  top: 1rem;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  background: var(--white);
  border-radius: 50%;
  font-size: 0.85rem;
  box-shadow: var(--shadow-soft);
  z-index: 1;
  border: 1px solid var(--glass-border-warm);
}
.memory-card .date-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--butter);
  color: var(--choc-mid);
  margin-bottom: 0.35rem;
}
.memory-card h3 { font-family: var(--font-script); font-size: 1.35rem; margin-bottom: 0.25rem; color: var(--choc-mid); }
.memory-card p { font-size: 0.92rem; color: var(--text-muted); }
.memory-card img {
  margin-top: 0.65rem;
  border-radius: 14px;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: linear-gradient(135deg, var(--peach), var(--blush));
  border: 1px solid rgba(234, 219, 206, 0.8);
}

/* ---- Admire flower — single-viewport, alive ---- */
.screen[data-screen="admire"] {
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
}
.screen[data-screen="admire"] .admire-inner {
  width: min(100%, 640px);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(0.35rem, 1.1vh, 0.85rem);
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}
.screen[data-screen="admire"] .admire-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.screen[data-screen="admire"] .admire-eyebrow {
  font-size: clamp(0.65rem, 1.6vh, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--latte, #b98f74);
  margin: 0;
}
.screen[data-screen="admire"] .admire-title,
.screen[data-screen="admire"] #adm-title {
  font-family: var(--font-script), "Dancing Script", Caveat, cursive;
  font-size: clamp(1.55rem, 5.2vh, 2.85rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--choc, #4a3528);
  margin: 0;
}
.screen[data-screen="admire"] .admire-stage {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.2rem, 0.7vh, 0.5rem);
  width: 100%;
}
.screen[data-screen="admire"] .admire-bloom-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(64vw, 32vh, 290px);
  aspect-ratio: 1;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  /* Soft glow baked into gradient — no live blur filter */
  background:
    radial-gradient(circle, rgba(255, 210, 228, 0.5) 0%, rgba(255, 228, 190, 0.18) 36%, rgba(255, 240, 250, 0.06) 56%, transparent 70%);
  pointer-events: none;
  animation: admireGlowPulse 4.5s ease-in-out infinite;
  z-index: 0;
  contain: strict;
}
.screen[data-screen="admire"] .admire-status,
.screen[data-screen="admire"] #adm-count {
  position: relative;
  z-index: 2;
  width: min(100%, 22rem);
  margin: 0 auto;
  min-height: 2.4em;
  display: grid;
  place-items: center;
}
.screen[data-screen="admire"] .admire-status-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  margin: 0;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 244, 248, 0.72));
  border: 1px solid rgba(255, 210, 224, 0.7);
  box-shadow:
    0 6px 16px -10px rgba(160, 90, 120, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #9a6b7a;
  font-size: clamp(0.72rem, 1.65vh, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.screen[data-screen="admire"] .admire-status-hint {
  color: #b07a8a;
  letter-spacing: 0.04em;
}
.screen[data-screen="admire"] .admire-status-hint::after {
  content: " 🌸";
}
.screen[data-screen="admire"] .admire-status-meter {
  display: inline-block;
  width: 3.4rem;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 190, 210, 0.35);
  overflow: hidden;
  vertical-align: middle;
}
.screen[data-screen="admire"] .admire-status-meter-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff9ebd, #ffc089, #ffe27a);
  box-shadow: 0 0 8px rgba(255, 180, 140, 0.45);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out-soft);
  will-change: transform;
  backface-visibility: hidden;
}
.screen[data-screen="admire"] .admire-status-frac {
  font-variant-numeric: tabular-nums;
  color: #c45d7a;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.screen[data-screen="admire"] .admire-status-done {
  display: none;
  margin: 0;
  padding: 0.45rem 0.9rem 0.55rem;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  border-radius: 1.15rem;
  background:
    radial-gradient(ellipse 90% 80% at 50% 0%, rgba(255, 232, 210, 0.55), transparent 60%),
    linear-gradient(165deg, rgba(255, 252, 250, 0.92), rgba(255, 236, 242, 0.88));
  border: 1px solid rgba(255, 200, 214, 0.65);
  box-shadow:
    0 10px 24px -14px rgba(170, 90, 120, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.screen[data-screen="admire"] .admire-status.is-complete .admire-status-progress {
  display: none;
}
.screen[data-screen="admire"] .admire-status.is-complete .admire-status-done {
  display: inline-flex;
}
.screen[data-screen="admire"] .admire-status-done-mark {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: #e8a0b4;
  opacity: 0.85;
  line-height: 1;
  transform: translateY(0.05em);
}
.screen[data-screen="admire"] .admire-status-done-line {
  font-family: var(--font-romantic), "Dancing Script", Caveat, cursive;
  font-size: clamp(1.05rem, 2.6vh, 1.35rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.01em;
  color: #b14f6a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  text-wrap: balance;
}
.screen[data-screen="admire"] .admire-status.is-status-reveal .admire-status-done {
  animation: admireStatusReveal 0.85s var(--ease-out) both;
}
.screen[data-screen="admire"] .admire-status.is-status-reveal .admire-status-done-line {
  animation: admireStatusLineGlow 2.4s ease-in-out 0.2s both;
}
.screen[data-screen="admire"] .admire-status.is-status-reveal .admire-status-done-mark {
  animation: admireStatusMarkPop 0.7s var(--ease-bounce) both;
}
.screen[data-screen="admire"] .admire-status.is-status-reveal .admire-status-done-mark:last-child {
  animation-delay: 0.12s;
}
@keyframes admireStatusReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes admireStatusLineGlow {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.12); }
}
@keyframes admireStatusMarkPop {
  0% { opacity: 0; transform: scale(0.4) rotate(-18deg); }
  100% { opacity: 0.85; transform: scale(1) rotate(0deg); }
}
.screen[data-screen="admire"] .flower {
  position: relative;
  width: min(56vw, 29vh, 240px);
  aspect-ratio: 1;
  margin: 0 auto;
  z-index: 1;
  animation: admireFlowerFloat 6.5s ease-in-out infinite;
  contain: layout style;
  transform: translateZ(0);
}
/* Cheap soft ground shadow (no filter: drop-shadow) */
.screen[data-screen="admire"] .flower::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 58%;
  height: 16%;
  transform: translate3d(-50%, 0, 0);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(170, 110, 130, 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.screen[data-screen="admire"] .petal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 35%;
  height: 48%;
  margin: -48% 0 0 -17.5%;
  padding: 0;
  background: none;
  border: 0;
  transform-origin: 50% 100%;
  transform: rotate(var(--a)) scale(0.55) translateZ(0);
  /* Static mute via opacity on art — avoid animating filter */
  transition: transform 0.75s var(--ease-bounce), opacity 0.35s ease;
  z-index: 1;
  cursor: pointer;
  opacity: 0;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  contain: layout style;
  backface-visibility: hidden;
}
.screen[data-screen="admire"] .petal.ready {
  opacity: 1;
  animation: petalArrive 0.82s var(--ease-bounce) calc(var(--i, 0) * 0.075s) both;
}
.screen[data-screen="admire"] .petal.ready:not(.bloom) .petal-art {
  opacity: 0.78;
  animation: petalIdleBreathe 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) calc(var(--i, 0) * 0.22s) infinite;
  transform-origin: 50% 80%;
  transition: opacity 0.4s var(--ease-soft);
}
.screen[data-screen="admire"] .petal:hover:not(.bloom),
.screen[data-screen="admire"] .petal:focus-visible:not(.bloom) {
  transform: rotate(var(--a)) scale(0.7) translateZ(0);
  outline: none;
  z-index: 2;
}
.screen[data-screen="admire"] .petal:hover:not(.bloom) .petal-art,
.screen[data-screen="admire"] .petal:focus-visible:not(.bloom) .petal-art {
  opacity: 0.95;
}
.screen[data-screen="admire"] .petal:active:not(.bloom) {
  transform: rotate(var(--a)) scale(0.62) translateZ(0);
}
.screen[data-screen="admire"] .petal.bloom {
  transform: rotate(var(--a)) scale(1) translateZ(0);
  animation: petalBloomPop 0.7s var(--ease-bounce) both;
  z-index: 2;
}
.screen[data-screen="admire"] .petal.bloom .petal-art {
  opacity: 1;
  /* Visible slow water drift after bloom (child layer keeps petal angle intact) */
  animation: petalWaterDrift 11s ease-in-out infinite;
  animation-delay: calc(0.55s + var(--i, 0) * 0.45s);
  transform-origin: 50% 92%;
  backface-visibility: hidden;
}
.screen[data-screen="admire"] .petal-art {
  position: absolute;
  inset: 0;
}
.screen[data-screen="admire"] .petal-art svg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  overflow: visible;
}
.screen[data-screen="admire"] .flower-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fffceb 0%, #ffe27a 48%, #ffc85a 100%);
  display: grid;
  place-items: center;
  font-size: clamp(1.25rem, 3.5vh, 1.75rem);
  z-index: 3;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.88),
    0 0 0 7px rgba(255, 214, 230, 0.45),
    0 8px 18px rgba(255, 170, 90, 0.32),
    inset 0 2px 4px rgba(255, 255, 255, 0.65);
  pointer-events: none;
  animation: admireCenterPulse 2.8s ease-in-out infinite;
  contain: layout style;
  backface-visibility: hidden;
}
.screen[data-screen="admire"] .flower-center span {
  display: inline-block;
  animation: admireHeartTwinkle 2.4s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(200, 80, 110, 0.18);
}
.screen[data-screen="admire"] .flower.all .flower-center {
  animation: admireHeartbeat 1.15s ease-in-out infinite;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.92),
    0 0 0 9px rgba(255, 200, 220, 0.48),
    0 0 24px 8px rgba(255, 190, 120, 0.45),
    inset 0 2px 4px rgba(255, 255, 255, 0.7);
}
.screen[data-screen="admire"] .flower.all .admire-bloom-glow,
.screen[data-screen="admire"] .flower.all ~ .admire-bloom-glow {
  animation: admireGlowPulse 1.9s ease-in-out infinite;
}
.screen[data-screen="admire"] .reason {
  position: relative;
  isolation: isolate;
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(40vh, 280px);
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: clamp(0.4rem, 1vh, 0.7rem);
  padding: clamp(0.95rem, 2vh, 1.35rem) clamp(1.05rem, 3.2vw, 1.7rem);
  border-radius: clamp(22px, 5vw, 28px);
  /* Near-opaque pastel — no backdrop-filter (FX/ambient behind made cursor jank) */
  background:
    radial-gradient(ellipse 80% 70% at 18% 12%, rgba(255, 214, 230, 0.55), transparent 55%),
    radial-gradient(ellipse 70% 60% at 88% 88%, rgba(255, 232, 210, 0.4), transparent 55%),
    linear-gradient(160deg, rgba(255, 252, 251, 0.97) 0%, rgba(255, 240, 245, 0.96) 52%, rgba(255, 247, 241, 0.97) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(255, 210, 224, 0.75);
  box-shadow:
    0 22px 40px -18px rgba(140, 90, 110, 0.22),
    0 10px 20px -10px rgba(180, 120, 140, 0.16),
    0 3px 8px -3px rgba(160, 100, 120, 0.12),
    0 1px 2px rgba(120, 80, 100, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.72) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -10px 24px rgba(255, 220, 230, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
  contain: layout style;
  transform: translateZ(0);
}
.screen[data-screen="admire"] .reason::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle 2px at 12% 18%, rgba(255, 170, 200, 0.5), transparent 2.5px),
    radial-gradient(circle 1.5px at 88% 22%, rgba(255, 190, 160, 0.4), transparent 2px),
    radial-gradient(circle 1.8px at 82% 78%, rgba(255, 160, 190, 0.35), transparent 2.2px),
    radial-gradient(circle 1.4px at 16% 80%, rgba(255, 200, 170, 0.3), transparent 1.8px);
  opacity: 0.75;
}
.screen[data-screen="admire"] .reason::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, transparent 28%);
  opacity: 0.9;
}
.screen[data-screen="admire"] .reason > * {
  position: relative;
  z-index: 1;
}
.screen[data-screen="admire"] .reason.is-revealing {
  border-color: rgba(255, 186, 208, 0.9);
  box-shadow:
    0 24px 44px -16px rgba(150, 90, 120, 0.26),
    0 12px 22px -10px rgba(200, 120, 150, 0.2),
    0 4px 10px -3px rgba(180, 100, 130, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.78) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 28px rgba(255, 220, 232, 0.26);
}
.screen[data-screen="admire"] .reason h3 {
  font-family: var(--font-script), "Dancing Script", Caveat, cursive;
  font-size: clamp(1.4rem, 3.6vh, 1.85rem);
  color: #c45d7a;
  margin: 0;
  font-weight: 700;
  line-height: 1.18;
  flex: 0 0 auto;
}
.screen[data-screen="admire"] .reason p {
  color: #8a5d6a;
  font-weight: 500;
  margin: 0;
  font-size: clamp(0.95rem, 2.25vh, 1.08rem);
  line-height: 1.55;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 170, 195, 0.5) transparent;
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* Own layer so text scroll doesn’t repaint card chrome */
  transform: translateZ(0);
  contain: content;
}
.screen[data-screen="admire"] .reason p::-webkit-scrollbar {
  width: 4px;
}
.screen[data-screen="admire"] .reason p::-webkit-scrollbar-thumb {
  background: rgba(255, 170, 195, 0.45);
  border-radius: 999px;
}
.screen[data-screen="admire"] #admire-next {
  flex: 0 0 auto;
  margin-top: clamp(0.85rem, 2.2vh, 1.35rem);
  min-height: clamp(44px, 6.2vh, 52px);
  padding: 0.6em 1.45em;
  font-size: clamp(0.92rem, 2.1vh, 1.05rem);
  box-shadow: none;
  animation: admireNextInvite 2s ease-in-out infinite;
  transform: translateZ(0);
}
.screen[data-screen="admire"] #admire-next:hover {
  box-shadow: none;
}

/* Keep eyebrow clear of fixed progress tracker once the letter CTA appears */
.screen[data-screen="admire"] .admire-inner:has(#admire-next:not([hidden])) {
  justify-content: flex-start;
  gap: clamp(0.3rem, 1vh, 0.7rem);
}
.screen[data-screen="admire"] .admire-inner:has(#admire-next:not([hidden])) .flower {
  width: min(48vw, 24vh, 200px);
}
.screen[data-screen="admire"] .admire-inner:has(#admire-next:not([hidden])) .reason {
  max-height: min(34vh, 230px);
}
@keyframes petalArrive {
  0% {
    opacity: 0;
    transform: rotate(var(--a)) scale(0.18) translate3d(0, 18%, 0);
  }
  62% {
    opacity: 1;
    transform: rotate(var(--a)) scale(0.6) translate3d(0, -2%, 0);
  }
  100% {
    opacity: 1;
    transform: rotate(var(--a)) scale(0.55) translate3d(0, 0, 0);
  }
}
@keyframes petalIdleBreathe {
  0%, 100% { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.045, 1.045, 1); }
}
@keyframes petalBloomPop {
  0% { transform: rotate(var(--a)) scale(0.55) translate3d(0, 0, 0); }
  58% { transform: rotate(var(--a)) scale(1.08) translate3d(0, 0, 0); }
  100% { transform: rotate(var(--a)) scale(1) translate3d(0, 0, 0); }
}
/* Slow fluid water drift — noticeable, still gentle & GPU-friendly */
@keyframes petalWaterDrift {
  0% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }
  20% {
    transform: translate3d(3.5%, -3.5%, 0) rotate(2.2deg);
  }
  40% {
    transform: translate3d(-2%, -5%, 0) rotate(-1deg);
  }
  60% {
    transform: translate3d(3%, -2%, 0) rotate(3deg);
  }
  80% {
    transform: translate3d(-3%, -4%, 0) rotate(-2.4deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }
}
@keyframes admireFlowerFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}
@keyframes admireGlowPulse {
  0%, 100% { opacity: 0.48; transform: translate3d(-50%, -50%, 0) scale(0.95); }
  50% { opacity: 0.9; transform: translate3d(-50%, -50%, 0) scale(1.05); }
}
@keyframes admireCenterPulse {
  0%, 100% { transform: translate3d(-50%, -50%, 0) scale(1); }
  50% { transform: translate3d(-50%, -50%, 0) scale(1.04); }
}
@keyframes admireHeartTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.08) rotate(-4deg); }
  70% { transform: scale(1.03) rotate(3deg); }
}
@keyframes admireHeartbeat {
  0%, 100% { transform: translate3d(-50%, -50%, 0) scale(1); }
  12% { transform: translate3d(-50%, -50%, 0) scale(1.12); }
  24% { transform: translate3d(-50%, -50%, 0) scale(1); }
  36% { transform: translate3d(-50%, -50%, 0) scale(1.07); }
  48% { transform: translate3d(-50%, -50%, 0) scale(1); }
}
@keyframes admireNextInvite {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -3px, 0); }
}
@media (max-height: 768px) {
  .screen[data-screen="admire"] .flower {
    width: min(46vw, 22vh, 200px);
  }
  .screen[data-screen="admire"] .reason {
    max-height: min(36vh, 220px);
  }
  .screen[data-screen="admire"] .admire-inner:has(#admire-next:not([hidden])) .flower {
    width: min(42vw, 18vh, 160px);
  }
  .screen[data-screen="admire"] .admire-inner:has(#admire-next:not([hidden])) .reason {
    max-height: min(28vh, 180px);
  }
  .screen[data-screen="admire"] #admire-next {
    margin-top: 0.65rem;
  }
}
@media (max-height: 700px) {
  .screen[data-screen="admire"] .flower {
    width: min(46vw, 24vh, 190px);
  }
  .screen[data-screen="admire"] .reason {
    max-height: min(42vh, 240px);
  }
  .screen[data-screen="admire"] #admire-next {
    margin-top: 0.7rem;
  }
  .screen[data-screen="admire"] .admire-status-done {
    padding: 0.35rem 0.7rem 0.4rem;
  }
  .screen[data-screen="admire"] .admire-status-done-line {
    font-size: clamp(0.95rem, 2.3vh, 1.15rem);
  }
}
@media (max-height: 620px) {
  .screen[data-screen="admire"] .admire-eyebrow {
    display: none;
  }
  .screen[data-screen="admire"] .flower {
    width: min(40vw, 20vh, 160px);
  }
  .screen[data-screen="admire"] .reason {
    max-height: min(44vh, 200px);
    padding: 0.7rem 0.95rem;
  }
  .screen[data-screen="admire"] .reason h3 {
    font-size: clamp(1.25rem, 3.2vh, 1.55rem);
  }
  .screen[data-screen="admire"] .reason p {
    font-size: clamp(0.88rem, 2.1vh, 0.98rem);
  }
  .screen[data-screen="admire"] #admire-next {
    margin-top: 0.55rem;
  }
  .screen[data-screen="admire"] .admire-status,
  .screen[data-screen="admire"] #adm-count {
    min-height: 1.8em;
  }
  .screen[data-screen="admire"] .admire-status-done-mark {
    display: none;
  }
  .screen[data-screen="admire"] .admire-status-progress {
    padding: 0.28rem 0.65rem;
    gap: 0.35rem 0.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen[data-screen="admire"] .petal,
  .screen[data-screen="admire"] .petal.ready,
  .screen[data-screen="admire"] .petal.bloom,
  .screen[data-screen="admire"] .flower,
  .screen[data-screen="admire"] .flower-center,
  .screen[data-screen="admire"] .flower-center span,
  .screen[data-screen="admire"] .admire-bloom-glow,
  .screen[data-screen="admire"] .flower.all .flower-center,
  .screen[data-screen="admire"] #admire-next,
  .screen[data-screen="admire"] .admire-status.is-status-reveal .admire-status-done,
  .screen[data-screen="admire"] .admire-status.is-status-reveal .admire-status-done-line,
  .screen[data-screen="admire"] .admire-status.is-status-reveal .admire-status-done-mark {
    animation: none !important;
  }
  .screen[data-screen="admire"] .admire-status-meter-fill {
    transition: none;
  }
  .screen[data-screen="admire"] .petal.ready {
    opacity: 1;
    transform: rotate(var(--a)) scale(0.55);
  }
  .screen[data-screen="admire"] .petal.bloom {
    transform: rotate(var(--a)) scale(1) translateZ(0);
  }
  .screen[data-screen="admire"] .petal.ready:not(.bloom) .petal-art,
  .screen[data-screen="admire"] .petal.bloom .petal-art {
    animation: none !important;
  }
  .screen[data-screen="admire"] .flower::after {
    opacity: 0.85;
  }
}

/* ---- Legacy lantern styles (unused by flower admire) ---- */
.lanterns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.lantern-btn {
  width: 64px; height: 80px;
  font-size: 2rem;
  border-radius: 16px 16px 24px 24px;
  background: linear-gradient(180deg, var(--peach), var(--blush));
  box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease), filter 0.25s;
  position: relative;
}
.lantern-btn::after {
  content: "";
  position: absolute;
  bottom: -8px; left: 50%;
  width: 2px; height: 10px;
  background: var(--choc-soft);
  transform: translateX(-50%);
}
.lantern-btn:hover { transform: translateY(-4px); }
.lantern-btn.lit {
  filter: drop-shadow(0 0 12px var(--butter));
  background: linear-gradient(180deg, var(--butter), var(--peach));
  animation: sway 2s ease-in-out infinite;
}
.admire-reveal {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 80px;
}
.admire-card {
  padding: 1.05rem 1.15rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 250, 247, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border-warm);
  box-shadow: var(--shadow-soft);
  animation: pop-in-card 0.45s var(--ease);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
  cursor: default;
}
.admire-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
@keyframes pop-in-card {
  from { opacity: 0; transform: scale(0.9) translateY(8px); }
  to { opacity: 1; transform: none; }
}
.admire-card h4 { font-family: var(--font-script); font-size: 1.3rem; color: var(--choc-mid); }
.admire-card p { font-size: 0.95rem; color: var(--text-muted); }

/* ---- Letter (from nanha-gift) ---- */
.screen[data-screen="letter"] .letter-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(100%, 640px);
  margin-inline: auto;
  gap: 4px;
  padding-bottom: 2rem;
}
.screen[data-screen="letter"] .env-scene {
  width: min(88vw, 400px);
  margin: 18px auto 6px;
  perspective: 1100px;
}
.screen[data-screen="letter"] .envelope {
  --env-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.28 0 0 0 0 0.35 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  animation: letterFloaty 4.6s ease-in-out infinite;
  filter:
    drop-shadow(0 28px 34px rgba(110, 70, 55, 0.28))
    drop-shadow(0 8px 10px rgba(110, 70, 55, 0.14));
}
.screen[data-screen="letter"] .env-back {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background:
    linear-gradient(155deg, #ffe6ef 0%, #f9c4d8 48%, #efb0c8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -10px 18px rgba(186, 96, 128, 0.12);
}
.screen[data-screen="letter"] .env-back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--env-grain);
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.screen[data-screen="letter"] .env-peek {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 8%;
  bottom: 8%;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255, 248, 235, 0.9), transparent 55%),
    #fffdf8 repeating-linear-gradient(transparent 0 17px, rgba(217, 185, 155, 0.45) 17px 18px);
  box-shadow:
    inset 0 0 0 1px rgba(210, 180, 150, 0.28),
    0 4px 14px rgba(122, 84, 64, 0.12);
  transition: transform 1s var(--ease-out);
  z-index: 1;
}
.screen[data-screen="letter"] .letter-out .env-peek {
  transform: translateY(-64%);
}
.screen[data-screen="letter"] .env-front {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  z-index: 2;
  background:
    linear-gradient(140deg, #ffe0ec 0%, #f7bdd2 42%, #efadc5 100%);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -12px 20px rgba(170, 80, 110, 0.1);
}
.screen[data-screen="letter"] .env-front::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(185deg, #ffd4e4 0%, #f5b4cb 55%, #e9a3bc 100%);
  clip-path: polygon(0 100%, 50% 42%, 100% 100%);
  box-shadow: inset 0 8px 14px rgba(150, 70, 100, 0.08);
}
.screen[data-screen="letter"] .env-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 46%, rgba(150, 70, 100, 0.16) 50%, transparent 54%),
    linear-gradient(65deg, transparent 46%, rgba(150, 70, 100, 0.14) 50%, transparent 54%),
    var(--env-grain);
  opacity: 0.55;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.screen[data-screen="letter"] .env-flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 57%;
  z-index: 3;
  transform-origin: top center;
  background-image:
    linear-gradient(180deg, #ffc8dc 0%, #ffdceb 38%, #f4b6cd 78%, #e9a5bf 100%),
    var(--env-grain);
  background-blend-mode: normal, soft-light;
  background-size: auto, 140px 140px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 6px 8px rgba(150, 70, 100, 0.18));
  transition: transform 0.9s var(--ease-out), z-index 0s 0.35s;
}
.screen[data-screen="letter"] .env-flap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 14%, transparent 32%),
    linear-gradient(90deg, rgba(150, 70, 100, 0.16), transparent 24%, transparent 76%, rgba(150, 70, 100, 0.16));
  pointer-events: none;
}
.screen[data-screen="letter"] .env-flap::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6%;
  height: 42%;
  background: radial-gradient(ellipse at 50% 100%, rgba(140, 60, 95, 0.22), transparent 70%);
  pointer-events: none;
}
.screen[data-screen="letter"] .envelope.open .env-flap {
  transform: rotateX(180deg);
  z-index: 0;
  filter: drop-shadow(0 -4px 10px rgba(150, 70, 100, 0.16));
}
.screen[data-screen="letter"] .seal {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 26%;
  aspect-ratio: 1;
  z-index: 5;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  filter:
    drop-shadow(0 7px 10px rgba(120, 40, 70, 0.45))
    drop-shadow(0 2px 3px rgba(90, 20, 50, 0.35));
  animation: sealGlow 2.8s ease-in-out infinite;
  transition: transform 0.35s var(--ease-out), opacity 0.5s, filter 0.35s;
}
.screen[data-screen="letter"] .seal:hover,
.screen[data-screen="letter"] .seal:focus-visible {
  animation-play-state: paused;
  transform: translate(-50%, -50%) scale(1.07);
  filter:
    drop-shadow(0 10px 16px rgba(120, 40, 70, 0.5))
    drop-shadow(0 0 14px rgba(255, 150, 185, 0.55));
  outline: none;
}
.screen[data-screen="letter"] .seal:active {
  transform: translate(-50%, -50%) scale(0.96);
}
.screen[data-screen="letter"] .seal span { display: block; }
.screen[data-screen="letter"] .seal svg { width: 100%; display: block; overflow: visible; }
.screen[data-screen="letter"] .seal.broken {
  animation: none;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.5) rotate(25deg);
}
.screen[data-screen="letter"] .paper {
  position: relative;
  width: 100%;
  max-width: 570px;
  margin: 12px auto;
  border-radius: 6px 6px 16px 16px;
  background-color: #fffdf7;
  box-shadow: 0 2px 0 #f1e4d2, 0 18px 44px rgba(122, 84, 64, 0.25);
}
.screen[data-screen="letter"] .paper::before {
  content: "";
  position: absolute;
  left: 44px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 143, 179, 0.4);
  z-index: 1;
}
.screen[data-screen="letter"] .paper-scroll {
  --paper-line: 34px;
  position: relative;
  max-height: min(64vh, 560px);
  overflow-y: auto;
  /* Top pad matches one ruled row so the first baseline lands on a line */
  padding: var(--paper-line) 22px calc(var(--paper-line) * 0.75) 58px;
  text-align: left;
  font-family: var(--font-script), Caveat, cursive;
  font-size: clamp(1.28rem, 4.7vw, 1.6rem);
  line-height: var(--paper-line);
  color: var(--choc, #4a3528);
  background:
    repeating-linear-gradient(
      transparent 0 calc(var(--paper-line) - 1px),
      rgba(217, 185, 155, 0.4) calc(var(--paper-line) - 1px) var(--paper-line)
    ) local,
    radial-gradient(circle at 15% 5%, rgba(255, 232, 200, 0.5), transparent 55%) #fffdf7;
  /* Pull rules up under Caveat’s alphabetic baseline */
  background-position: 0 -8px, 0 0;
  border-radius: inherit;
}
.screen[data-screen="letter"] .paper-to {
  font-weight: 700;
  margin: 0 0 var(--paper-line);
}
.screen[data-screen="letter"] .letter-text { white-space: pre-wrap; margin: 0; }
.screen[data-screen="letter"] .paper-sign {
  margin-top: var(--paper-line);
  margin-left: auto;
  width: fit-content;
  max-width: 100%;
  font-weight: 700;
  text-align: left;
  white-space: pre-line;
}
.screen[data-screen="letter"] .caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: #c24d77;
  animation: blinkCaret 0.8s steps(1) infinite;
}
@keyframes letterFloaty {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-8px) rotate(0.5deg); }
}
@keyframes sealGlow {
  0%, 100% {
    filter:
      drop-shadow(0 7px 10px rgba(120, 40, 70, 0.45))
      drop-shadow(0 2px 3px rgba(90, 20, 50, 0.35));
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    filter:
      drop-shadow(0 9px 14px rgba(120, 40, 70, 0.5))
      drop-shadow(0 0 12px rgba(255, 160, 190, 0.55));
    transform: translate(-50%, -50%) scale(1.045);
  }
}
@keyframes blinkCaret {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .screen[data-screen="letter"] .envelope,
  .screen[data-screen="letter"] .seal,
  .screen[data-screen="letter"] .caret {
    animation: none !important;
  }
}

/* ---- Quiz (dreamy pastel birthday polish) ---- */
.screen[data-screen="quiz"] {
  --q-rose: #ffc2d6;
  --q-rose-soft: #ffe4ef;
  --q-peach: #ffd8c8;
  --q-lilac: #e6dcff;
  --q-lilac-deep: #c9b8f5;
  --q-mint: #c9f2e0;
  --q-mint-deep: #7ed9b4;
  --q-butter: #ffe9a8;
  --q-sky: #d7ecff;
  --q-ink: #5c3f33;
  --q-ink-soft: #8a6554;
  --q-good: #3fa884;
  --q-oops: #d48493;
}
.screen[data-screen="quiz"] .quiz-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(100%, 560px);
  margin-inline: auto;
  gap: 0.65rem;
  padding-bottom: 2.25rem;
}
.screen[data-screen="quiz"] .quiz-eyebrow {
  color: var(--q-ink);
  background: linear-gradient(135deg, #ffe0d2 0%, #ffd0e0 55%, #ebe1ff 100%);
  box-shadow: 0 8px 18px -12px rgba(232, 145, 175, 0.5);
  letter-spacing: 0.12em;
}
.screen[data-screen="quiz"] #quiz-title {
  margin: 0 0 0.15rem;
  color: var(--q-ink);
  text-shadow: 0 10px 28px rgba(255, 176, 204, 0.35);
}
.screen[data-screen="quiz"] .quiz-top {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font-weight: 700;
  color: var(--q-ink-soft);
  margin: 0.15rem 0 0.2rem;
}
.screen[data-screen="quiz"] .qbar {
  position: relative;
  flex: 1;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffafc, #fff0f5);
  box-shadow:
    inset 0 1px 3px rgba(140, 90, 110, 0.12),
    0 4px 12px -8px rgba(232, 145, 175, 0.32);
  overflow: visible;
  border: 1.5px solid rgba(255, 255, 255, 0.98);
}
.screen[data-screen="quiz"] #qbar-fill {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #ffb8d0 0%,
    #ffc9b8 28%,
    #e4d4ff 58%,
    #cfe8ff 78%,
    #ffe29a 100%
  );
  background-size: 220% 100%;
  box-shadow: 0 0 14px rgba(255, 176, 204, 0.55);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s var(--ease-out-soft);
  overflow: hidden;
  animation: qbarShimmer 2.8s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.screen[data-screen="quiz"] #qbar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 65%
  );
  animation: qbarGlow 1.8s ease-in-out infinite;
}
.screen[data-screen="quiz"] .qbar-spark {
  position: absolute;
  top: 50%;
  left: 0;
  translate: -50% -50%;
  font-size: 0.95rem;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(232, 145, 175, 0.5));
  transition: left 0.75s var(--ease-out-soft);
  animation: qbarSparkBob 1.4s ease-in-out infinite;
  z-index: 2;
}
.screen[data-screen="quiz"] .qcount {
  min-width: 3.6rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #fff8fb, var(--q-rose-soft));
  border: 1.5px solid #fff;
  box-shadow: 0 6px 14px -10px rgba(232, 145, 175, 0.5);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--q-ink);
  white-space: nowrap;
}
.screen[data-screen="quiz"] .lockbox {
  --glow: 0;
  position: relative;
  width: min(158px, 42vw);
  margin: 0.35rem auto 0.15rem;
  animation: giftFloat 3.2s ease-in-out infinite;
  will-change: transform;
}
.screen[data-screen="quiz"] .lockbox-aura {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 196, 214, calc(0.38 + var(--glow) * 0.42)) 0%, transparent 68%),
    radial-gradient(circle at 28% 30%, rgba(214, 200, 255, calc(0.22 + var(--glow) * 0.38)), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255, 228, 170, calc(0.12 + var(--glow) * 0.35)), transparent 50%);
  pointer-events: none;
  z-index: 0;
  filter: blur(2px);
  animation: auraPulse 2.6s ease-in-out infinite;
}
.screen[data-screen="quiz"] #lockbox-art {
  position: relative;
  z-index: 1;
}
.screen[data-screen="quiz"] #lockbox-art svg {
  width: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 calc(var(--glow) * 30px) rgba(255, 205, 120, var(--glow)))
    drop-shadow(0 10px 16px rgba(140, 90, 110, 0.16))
    saturate(calc(0.55 + var(--glow) * 0.5));
  transition: filter 0.8s;
}
.screen[data-screen="quiz"] .lockbox .gb-glow {
  opacity: calc(var(--glow) * 0.95);
}
.screen[data-screen="quiz"] .lockbox .gb-lid {
  transform-box: fill-box;
  transform-origin: 30% 100%;
  transition: transform 0.9s var(--ease-bounce);
}
.screen[data-screen="quiz"] .lockbox.unlocked .gb-lid {
  transform: translateY(-16px) rotate(-8deg);
}
.screen[data-screen="quiz"] .lockbox.happy:not(.unlocked) {
  animation:
    boxHappy 0.75s var(--ease-out),
    giftFloat 3.2s ease-in-out 0.75s infinite;
}
.screen[data-screen="quiz"] .lockbox.unlocked {
  animation: giftUnlocked 1.1s var(--ease-bounce);
}
.screen[data-screen="quiz"] .padlock {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 34%;
  transform: translate(-50%, -50%);
  transition: transform 0.9s var(--ease-bounce), opacity 0.8s;
  filter: drop-shadow(0 6px 6px rgba(122, 84, 64, 0.28));
  z-index: 2;
  animation: padlockWiggle 2.8s ease-in-out infinite;
}
.screen[data-screen="quiz"] .padlock svg {
  width: 100%;
  display: block;
}
.screen[data-screen="quiz"] .lockbox.unlocked .padlock {
  transform: translate(-50%, 190%) rotate(50deg);
  opacity: 0;
  animation: none;
}
.screen[data-screen="quiz"] .burst {
  position: absolute;
  inset: -70%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 244, 190, 0.95),
    rgba(255, 206, 222, 0.4) 38%,
    rgba(214, 200, 255, 0.18) 55%,
    transparent 68%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.screen[data-screen="quiz"] .lockbox.unlocked .burst {
  animation: burstOut 1.4s ease-out;
}
.screen[data-screen="quiz"] .q-card {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin-top: 0.35rem;
  padding: 1.55rem 1.25rem 1.35rem;
  border-radius: 30px;
  border: 1.5px solid rgba(255, 255, 255, 0.98);
  background:
    linear-gradient(
      155deg,
      #fffdfc 0%,
      #fff3f7 38%,
      #f4efff 72%,
      #eef7ff 100%
    );
  box-shadow:
    0 20px 42px -18px rgba(210, 120, 155, 0.32),
    0 8px 18px -12px rgba(140, 90, 110, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease, opacity 0.35s ease;
}
.screen[data-screen="quiz"] .q-card.q-card-swap {
  animation: qCardSwap 0.55s var(--ease-out);
}
.screen[data-screen="quiz"] .q-card.q-card-correct {
  background:
    linear-gradient(155deg, #f7fffb 0%, #e8faf2 48%, #eef8ff 100%);
  box-shadow:
    0 18px 42px -16px rgba(90, 190, 155, 0.38),
    0 0 0 2px rgba(160, 230, 200, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.screen[data-screen="quiz"] .q-card.q-card-wrong {
  background:
    linear-gradient(155deg, #fff8fa 0%, #ffe9ef 55%, #fff1e8 100%);
  box-shadow:
    0 18px 40px -16px rgba(220, 130, 150, 0.28),
    0 0 0 2px rgba(255, 200, 210, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  animation: qCardWrong 0.55s ease-out;
}
.screen[data-screen="quiz"] .q-card-bloom {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  opacity: 0.78;
  z-index: 0;
}
.screen[data-screen="quiz"] .q-card-bloom--tl {
  top: -48px;
  left: -36px;
  background: radial-gradient(circle, rgba(255, 198, 214, 0.9), transparent 70%);
}
.screen[data-screen="quiz"] .q-card-bloom--br {
  right: -40px;
  bottom: -52px;
  background: radial-gradient(circle, rgba(210, 198, 255, 0.85), transparent 70%);
}
.screen[data-screen="quiz"] .q-card > *:not(.q-card-bloom) {
  position: relative;
  z-index: 1;
}
.screen[data-screen="quiz"] .q-round {
  position: relative;
  z-index: 1;
  margin: 0 0 0.45rem;
  font-size: clamp(0.78rem, 2.4vw, 0.92rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink, #4a3458) 72%, transparent);
  line-height: 1.35;
}

.screen[data-screen="quiz"] .q-card h2 {
  font-family: var(--font-script);
  font-size: clamp(1.35rem, 5.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.28;
  margin: 0 0 1rem;
  padding: 0 0.15rem;
  color: var(--q-ink);
  letter-spacing: 0.01em;
}
.screen[data-screen="quiz"] .options {
  display: grid;
  gap: 0.7rem;
  width: 100%;
}
.screen[data-screen="quiz"] .opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.75em 1em 0.75em 0.85em;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.98);
  background: linear-gradient(145deg, #ffffff, #fff6fa);
  color: var(--q-ink);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  text-align: left;
  box-shadow:
    0 10px 22px -12px rgba(160, 100, 125, 0.2),
    0 2px 6px rgba(140, 90, 110, 0.05);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  transition:
    transform 0.28s var(--ease-bounce),
    background 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    filter 0.3s ease,
    opacity 0.3s ease;
}
.screen[data-screen="quiz"] .opt-letter {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--q-ink);
  background: linear-gradient(145deg, #ffd2e2, #e6dcff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 4px 8px -4px rgba(210, 120, 155, 0.35);
  transition: transform 0.28s var(--ease-bounce), background 0.3s ease, color 0.3s ease;
}
.screen[data-screen="quiz"] .opt:nth-child(2) .opt-letter {
  background: linear-gradient(145deg, #ffe0d0, #ffd2e2);
}
.screen[data-screen="quiz"] .opt:nth-child(3) .opt-letter {
  background: linear-gradient(145deg, #e6dcff, #d7ecff);
}
.screen[data-screen="quiz"] .opt:nth-child(4) .opt-letter {
  background: linear-gradient(145deg, #d9f5e8, #ffe9b8);
}
.screen[data-screen="quiz"] .opt-label {
  flex: 1 1 auto;
  min-width: 0;
}
.screen[data-screen="quiz"] .opt:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.015);
  background: linear-gradient(145deg, #ffffff, #fff0f6);
  border-color: #ffd0e2;
  box-shadow:
    0 14px 28px -12px rgba(232, 145, 175, 0.48),
    0 0 0 3px rgba(255, 214, 227, 0.5);
  filter: brightness(1.02);
}
.screen[data-screen="quiz"] .opt:hover:not(:disabled) .opt-letter {
  transform: rotate(-8deg) scale(1.08);
}
.screen[data-screen="quiz"] .opt:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 6px 14px -10px rgba(232, 145, 175, 0.38);
}
.screen[data-screen="quiz"] .opt:focus-visible {
  outline: 2px solid #f2a0bc;
  outline-offset: 3px;
}
.screen[data-screen="quiz"] .opt.correct {
  background: linear-gradient(135deg, #ecfbf4, #d4f5e6);
  border-color: #8fdcc0;
  box-shadow:
    0 12px 26px -12px rgba(90, 190, 155, 0.48),
    0 0 0 3px rgba(180, 235, 210, 0.55);
  animation: optCorrect 0.7s var(--ease-bounce);
}
.screen[data-screen="quiz"] .opt.correct .opt-letter {
  background: linear-gradient(145deg, #b7efd5, #7ed9b4);
  color: #246b52;
}
.screen[data-screen="quiz"] .opt.correct::after {
  content: "♡";
  margin-left: 0.15rem;
  font-size: 1rem;
  color: #3fa884;
  animation: heartPop 0.55s var(--ease-bounce) 0.05s both;
}
.screen[data-screen="quiz"] .opt.wrong {
  background: linear-gradient(135deg, #fff0f3, #ffe0e7);
  border-color: #f2b4c0;
  opacity: 0.82;
  animation: optWrong 0.55s ease-out;
}
.screen[data-screen="quiz"] .opt.wrong .opt-letter {
  background: linear-gradient(145deg, #ffd0d8, #f2b4c0);
  color: #9a4d5c;
}
.screen[data-screen="quiz"] .opt:disabled:not(.correct):not(.wrong) {
  opacity: 0.48;
  filter: grayscale(0.12) saturate(0.85);
}
.screen[data-screen="quiz"] #q-feedback {
  margin-top: 0.95rem;
  min-height: 1.75em;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--q-ink-soft);
}
.screen[data-screen="quiz"] #q-feedback.good {
  color: var(--q-good);
}
.screen[data-screen="quiz"] #q-feedback.q-fb-pop {
  animation: fbPop 0.55s var(--ease-bounce);
}
.screen[data-screen="quiz"] #q-feedback.q-fb-oops {
  color: var(--q-oops);
  animation: fbOops 0.55s ease-out;
}
.screen[data-screen="quiz"] .done-text {
  font-size: clamp(1.7rem, 6vw, 2.05rem);
  margin-bottom: 0.85rem;
  color: var(--q-ink);
  animation: doneReveal 0.8s var(--ease-out);
}
.screen[data-screen="quiz"] #quiz-done {
  width: 100%;
  margin-top: 0.35rem;
}
.screen[data-screen="quiz"] #quiz-done .btn {
  animation: doneBtnPulse 2s ease-in-out infinite;
}

@keyframes qbarShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes qbarGlow {
  0%, 100% { transform: translateX(-30%); opacity: 0.35; }
  50% { transform: translateX(30%); opacity: 0.75; }
}
@keyframes qbarSparkBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.12); }
}
@keyframes giftFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes auraPulse {
  0%, 100% { opacity: 0.75; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes padlockWiggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25% { transform: translate(-50%, -50%) rotate(-4deg); }
  75% { transform: translate(-50%, -50%) rotate(4deg); }
}
@keyframes boxHappy {
  0%, 100% { transform: none; }
  20% { transform: rotate(-9deg) scale(1.08); }
  40% { transform: rotate(8deg) scale(1.12); }
  60% { transform: rotate(-5deg) scale(1.04); }
  80% { transform: rotate(3deg); }
}
@keyframes giftUnlocked {
  0% { transform: scale(0.92); }
  45% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1); }
}
@keyframes burstOut {
  0% { opacity: 0; transform: scale(0.2); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.55); }
}
@keyframes qCardSwap {
  0% { opacity: 0.55; transform: translateY(10px) scale(0.985); }
  100% { opacity: 1; transform: none; }
}
@keyframes qCardWrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes optCorrect {
  0% { transform: scale(0.96); }
  45% { transform: scale(1.045); }
  100% { transform: scale(1); }
}
@keyframes optWrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px) rotate(-0.5deg); }
  50% { transform: translateX(5px) rotate(0.5deg); }
  75% { transform: translateX(-3px); }
}
@keyframes heartPop {
  0% { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fbPop {
  0% { opacity: 0; transform: translateY(6px) scale(0.92); }
  60% { transform: translateY(-2px) scale(1.05); }
  100% { opacity: 1; transform: none; }
}
@keyframes fbOops {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
}
@keyframes doneReveal {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes doneBtnPulse {
  0%, 100% { transform: scale(1); box-shadow: var(--shadow-pop); }
  50% { transform: scale(1.03); box-shadow: 0 16px 36px -8px rgba(255, 143, 179, 0.65); }
}

@media (min-width: 640px) {
  .screen[data-screen="quiz"] .options {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }
  .screen[data-screen="quiz"] .q-card {
    padding: 1.75rem 1.55rem 1.5rem;
  }
}
@media (max-width: 420px) {
  .screen[data-screen="quiz"] .opt {
    min-height: 52px;
    font-size: 0.96rem;
    gap: 0.6rem;
  }
  .screen[data-screen="quiz"] .opt-letter {
    width: 1.7rem;
    height: 1.7rem;
    font-size: 0.76rem;
  }
  .screen[data-screen="quiz"] .qcount {
    min-width: 3.2rem;
    font-size: 0.76rem;
    padding: 0.3rem 0.55rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen[data-screen="quiz"] .lockbox,
  .screen[data-screen="quiz"] .lockbox-aura,
  .screen[data-screen="quiz"] .padlock,
  .screen[data-screen="quiz"] #qbar-fill,
  .screen[data-screen="quiz"] #qbar-fill::after,
  .screen[data-screen="quiz"] .qbar-spark,
  .screen[data-screen="quiz"] .lockbox.happy,
  .screen[data-screen="quiz"] .lockbox.unlocked,
  .screen[data-screen="quiz"] .lockbox.unlocked .burst,
  .screen[data-screen="quiz"] .q-card.q-card-swap,
  .screen[data-screen="quiz"] .q-card.q-card-wrong,
  .screen[data-screen="quiz"] .opt.correct,
  .screen[data-screen="quiz"] .opt.wrong,
  .screen[data-screen="quiz"] .opt.correct::after,
  .screen[data-screen="quiz"] #q-feedback.q-fb-pop,
  .screen[data-screen="quiz"] #q-feedback.q-fb-oops,
  .screen[data-screen="quiz"] .done-text,
  .screen[data-screen="quiz"] #quiz-done .btn {
    animation: none !important;
  }
  .screen[data-screen="quiz"] .opt:hover:not(:disabled) {
    transform: none;
  }
}

/* ---- Gift (from nanha-gift) — single viewport, no scroll ---- */
.screen[data-screen="gift"] {
  position: relative;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none;
  /* Pin content to the top — do not vertically center the whole block */
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: calc(3.5rem + var(--safe-t));
  padding-bottom: calc(2.4rem + var(--safe-b));
}
.screen[data-screen="gift"] .gift-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: min(100%, 560px);
  height: 100%;
  max-height: 100%;
  /* Kill .screen-inner { margin: auto } which was centering the block */
  margin: 0 auto !important;
  gap: clamp(2px, 0.8vh, 6px);
  padding-top: 0;
  padding-bottom: 0;
  /* visible so Yes hover GIFs can peek beside the button; screen still clips */
  overflow: visible;
}
.screen[data-screen="gift"] .gift-eyebrow {
  margin-bottom: 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.65rem;
}
.screen[data-screen="gift"] #gift-title {
  font-size: clamp(1.45rem, 5vw, 2.35rem);
  line-height: 1.1;
  margin: 0;
}
.screen[data-screen="gift"] .bigbox {
  width: min(52vw, 210px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: boxBob 2.4s ease-in-out infinite;
}
.screen[data-screen="gift"] .bigbox svg {
  width: 100%;
  display: block;
  overflow: visible;
}
.screen[data-screen="gift"] .bigbox .gb-glow {
  opacity: 0.3;
  transition: opacity 0.6s;
}
.screen[data-screen="gift"] .bigbox .gb-lid {
  transform-origin: 100px 90px;
  transition: transform 0.8s var(--ease-bounce);
}
.screen[data-screen="gift"] .bigbox.open {
  animation: boxPop 0.8s var(--ease-out);
}
.screen[data-screen="gift"] .bigbox.open .gb-lid {
  transform: translate(34px, -86px) rotate(22deg);
}
.screen[data-screen="gift"] .bigbox.open .gb-glow {
  opacity: 1;
}
.screen[data-screen="gift"] .bigbox.open .gb-unfurl path {
  opacity: 1;
  transform-origin: 100px 150px;
  animation: unfurl 0.9s 0.3s var(--ease-bounce) both;
}
.screen[data-screen="gift"] .gift-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vh, 12px);
  /* Fill leftover viewport under the title so the box drops without moving the heading */
  flex: 1 1 auto;
  min-height: 0;
  margin-top: clamp(0.35rem, 1.2vh, 0.75rem);
  width: 100%;
}
.screen[data-screen="gift"] .gift-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vh, 14px);
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: visible;
  /* Landscape polaroid + copy + Yes/No must stay in one viewport */
  padding-block: clamp(2px, 0.6vh, 8px);
}
.screen[data-screen="gift"] .gift-polaroid {
  /* Landscape keepsake — matches gift.webp (~4:3) */
  width: min(78vw, 320px);
  max-width: 100%;
  height: auto;
  padding: 0.62rem 0.62rem 0.5rem;
  transform: rotate(1.25deg);
  flex-shrink: 0;
  box-sizing: border-box;
}
.screen[data-screen="gift"] .gift-polaroid .polaroid-img,
.screen[data-screen="gift"] .gift-polaroid .polaroid-img.photo-load-host {
  /* Override base square polaroid + photo-load height:100% */
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #1a1210;
}
.screen[data-screen="gift"] .gift-polaroid .polaroid-img img,
.screen[data-screen="gift"] .gift-polaroid .polaroid-img.photo-load-host > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.screen[data-screen="gift"] .gift-polaroid figcaption {
  font-family: var(--font-script), Caveat, cursive;
  font-size: clamp(0.92rem, 3.4vw, 1.08rem);
  color: var(--brown, #7a5440);
  margin-top: 0.4rem;
  line-height: 1.2;
}
.screen[data-screen="gift"] .gift-text {
  font-size: clamp(1.15rem, 4.4vw, 1.65rem);
  max-width: min(20ch, 92%);
  margin: 0;
  color: var(--choc-mid, #66462c);
  line-height: 1.25;
  flex-shrink: 0;
}
.screen[data-screen="gift"] .yn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 14px);
  width: 100%;
  padding: 2px 0 4px;
  flex-shrink: 0;
  overflow: visible;
}
.screen[data-screen="gift"] .yes-wrap {
  --ys: 1;
  transform: scale(var(--ys));
  transform-origin: center top;
  /* Keep growth from pushing past the locked viewport */
  margin-bottom: calc((var(--ys) - 1) * 36px);
  transition: transform 0.6s var(--ease-bounce), margin 0.6s;
  z-index: 30;
  position: relative;
}
.screen[data-screen="gift"] .btn-yes {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 22px 14px;
  font-size: clamp(1.15rem, 4.6vw, 1.45rem);
}
.screen[data-screen="gift"] .btn-yes .yes-label {
  display: block;
  font-size: inherit;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
  max-width: min(78vw, 16rem);
}

/*
  Yes / No hover companions share the exact same gutter slots & sizes.
  Upper: yes.gif / no.gif · Lower: yes_pig.gif / no_cat.gif
  --gutter-mid ≈ center of each side margin when viewport > 560px.
*/
.screen[data-screen="gift"] .yes-hover-gifs,
.screen[data-screen="gift"] .no-hover-gifs {
  --gift-col: 560px;
  --gutter-mid: max(1.1rem, calc((100vw - min(100vw, var(--gift-col))) / 4));
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  overflow: visible;
}
.screen[data-screen="gift"] .yes-gif,
.screen[data-screen="gift"] .no-gif {
  position: absolute;
  width: clamp(96px, 15vw, 160px);
  height: auto;
  max-width: min(30vw, 160px);
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.55) translateY(18px);
  transition:
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0s linear 0.42s,
    filter 0.42s ease;
  will-change: transform, opacity;
}
.screen[data-screen="gift"] .yes-gif {
  filter: drop-shadow(0 12px 22px rgba(255, 143, 179, 0.38));
}
.screen[data-screen="gift"] .no-gif {
  filter: drop-shadow(0 12px 22px rgba(194, 140, 120, 0.32));
}
/* Upper slot — yes.gif / no.gif (shared left/right; No uses a wider vertical gap) */
.screen[data-screen="gift"] .yes-gif--yes.yes-gif--left,
.screen[data-screen="gift"] .no-gif--no.no-gif--left {
  left: var(--gutter-mid);
  transform: translate(-50%, 14px) scale(0.55) rotate(-8deg);
}
.screen[data-screen="gift"] .yes-gif--yes.yes-gif--left {
  top: 28%;
}
.screen[data-screen="gift"] .no-gif--no.no-gif--left {
  top: 20%;
}
.screen[data-screen="gift"] .yes-gif--yes.yes-gif--right,
.screen[data-screen="gift"] .no-gif--no.no-gif--right {
  left: auto;
  right: var(--gutter-mid);
  transform: translate(50%, 14px) scale(0.55) rotate(8deg);
}
.screen[data-screen="gift"] .yes-gif--yes.yes-gif--right {
  top: 28%;
}
.screen[data-screen="gift"] .no-gif--no.no-gif--right {
  top: 20%;
}
/* Lower slot — yes_pig.gif / no_cat.gif */
.screen[data-screen="gift"] .yes-gif--pig.yes-gif--left,
.screen[data-screen="gift"] .no-gif--cat.no-gif--left {
  left: var(--gutter-mid);
  transform: translate(-50%, 18px) scale(0.5) rotate(7deg);
}
.screen[data-screen="gift"] .yes-gif--pig.yes-gif--left {
  top: 58%;
  width: clamp(82px, 13vw, 136px);
  max-width: min(26vw, 136px);
}
.screen[data-screen="gift"] .no-gif--cat.no-gif--left {
  top: 68%;
  width: clamp(96px, 15vw, 156px);
  max-width: min(30vw, 156px);
}
.screen[data-screen="gift"] .yes-gif--pig.yes-gif--right,
.screen[data-screen="gift"] .no-gif--cat.no-gif--right {
  left: auto;
  right: var(--gutter-mid);
  transform: translate(50%, 18px) scale(-0.5, 0.5) rotate(-7deg);
}
.screen[data-screen="gift"] .yes-gif--pig.yes-gif--right {
  top: 58%;
  width: clamp(82px, 13vw, 136px);
  max-width: min(26vw, 136px);
}
.screen[data-screen="gift"] .no-gif--cat.no-gif--right {
  top: 68%;
  width: clamp(96px, 15vw, 156px);
  max-width: min(30vw, 156px);
}
.screen[data-screen="gift"] .yes-hover-gifs.is-yes-hover .yes-gif,
.screen[data-screen="gift"] .no-hover-gifs.is-no-hover .no-gif {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s, 0s, 0s;
}
.screen[data-screen="gift"] .yes-hover-gifs.is-yes-hover .yes-gif--yes.yes-gif--left {
  transform: translate(-50%, 0) scale(1) rotate(-5deg);
  animation: ynGifBobL 2.4s ease-in-out 0.1s infinite;
}
.screen[data-screen="gift"] .yes-hover-gifs.is-yes-hover .yes-gif--pig.yes-gif--left {
  transform: translate(-50%, 0) scale(0.95) rotate(5deg);
  animation: ynGifBobLowerL 2.7s ease-in-out 0.22s infinite;
  transition-delay: 0.06s, 0.06s, 0s, 0.06s;
}
.screen[data-screen="gift"] .yes-hover-gifs.is-yes-hover .yes-gif--yes.yes-gif--right {
  transform: translate(50%, 0) scale(1) rotate(5deg);
  animation: ynGifBobR 2.4s ease-in-out 0.16s infinite;
  transition-delay: 0.04s, 0.04s, 0s, 0.04s;
}
.screen[data-screen="gift"] .yes-hover-gifs.is-yes-hover .yes-gif--pig.yes-gif--right {
  transform: translate(50%, 0) scale(-0.95, 0.95) rotate(-5deg);
  animation: ynGifBobLowerR 2.7s ease-in-out 0.28s infinite;
  transition-delay: 0.1s, 0.1s, 0s, 0.1s;
}
/* No float style — inverted vs Yes (dip down, opposite tilt / sway) */
.screen[data-screen="gift"] .no-hover-gifs.is-no-hover .no-gif--no.no-gif--left {
  transform: translate(-50%, 0) scale(1) rotate(5deg);
  animation: noGifBobInvL 2.4s ease-in-out 0.1s infinite;
}
.screen[data-screen="gift"] .no-hover-gifs.is-no-hover .no-gif--cat.no-gif--left {
  transform: translate(-50%, 0) scale(0.95) rotate(-5deg);
  animation: noGifBobInvLowerL 2.7s ease-in-out 0.22s infinite;
  transition-delay: 0.06s, 0.06s, 0s, 0.06s;
}
.screen[data-screen="gift"] .no-hover-gifs.is-no-hover .no-gif--no.no-gif--right {
  transform: translate(50%, 0) scale(1) rotate(-5deg);
  animation: noGifBobInvR 2.4s ease-in-out 0.16s infinite;
  transition-delay: 0.04s, 0.04s, 0s, 0.04s;
}
.screen[data-screen="gift"] .no-hover-gifs.is-no-hover .no-gif--cat.no-gif--right {
  transform: translate(50%, 0) scale(-0.95, 0.95) rotate(5deg);
  animation: noGifBobInvLowerR 2.7s ease-in-out 0.28s infinite;
  transition-delay: 0.1s, 0.1s, 0s, 0.1s;
}
@keyframes ynGifBobL {
  0%, 100% { transform: translate(-50%, 0) scale(1) rotate(-5deg); }
  50% { transform: translate(-50%, -14px) scale(1.06) rotate(-1deg); }
}
@keyframes ynGifBobR {
  0%, 100% { transform: translate(50%, 0) scale(1) rotate(5deg); }
  50% { transform: translate(50%, -14px) scale(1.06) rotate(1deg); }
}
@keyframes ynGifBobLowerL {
  0%, 100% { transform: translate(-50%, 0) scale(0.95) rotate(5deg); }
  50% { transform: translate(-54%, -12px) scale(1.02) rotate(1deg); }
}
@keyframes ynGifBobLowerR {
  0%, 100% { transform: translate(50%, 0) scale(-0.95, 0.95) rotate(-5deg); }
  50% { transform: translate(54%, -12px) scale(-1.02, 1.02) rotate(-1deg); }
}
@keyframes noGifBobInvL {
  0%, 100% { transform: translate(-50%, 0) scale(1) rotate(5deg); }
  50% { transform: translate(-50%, 14px) scale(1.06) rotate(1deg); }
}
@keyframes noGifBobInvR {
  0%, 100% { transform: translate(50%, 0) scale(1) rotate(-5deg); }
  50% { transform: translate(50%, 14px) scale(1.06) rotate(-1deg); }
}
@keyframes noGifBobInvLowerL {
  0%, 100% { transform: translate(-50%, 0) scale(0.95) rotate(-5deg); }
  50% { transform: translate(-46%, 12px) scale(1.02) rotate(-1deg); }
}
@keyframes noGifBobInvLowerR {
  0%, 100% { transform: translate(50%, 0) scale(-0.95, 0.95) rotate(5deg); }
  50% { transform: translate(46%, 12px) scale(-1.02, 1.02) rotate(1deg); }
}
@media (max-width: 720px) {
  .screen[data-screen="gift"] .yes-hover-gifs,
  .screen[data-screen="gift"] .no-hover-gifs {
    --gutter-mid: max(0.35rem, 3.5vw);
  }
  .screen[data-screen="gift"] .yes-gif,
  .screen[data-screen="gift"] .no-gif {
    width: clamp(60px, 18vw, 96px);
    max-width: 18vw;
  }
  .screen[data-screen="gift"] .yes-gif--pig.yes-gif--left,
  .screen[data-screen="gift"] .yes-gif--pig.yes-gif--right {
    width: clamp(52px, 16vw, 78px);
    max-width: 16vw;
  }
  .screen[data-screen="gift"] .no-gif--cat.no-gif--left,
  .screen[data-screen="gift"] .no-gif--cat.no-gif--right {
    width: clamp(60px, 18vw, 92px);
    max-width: 18vw;
  }
  .screen[data-screen="gift"] .yes-gif--yes.yes-gif--left,
  .screen[data-screen="gift"] .yes-gif--pig.yes-gif--left,
  .screen[data-screen="gift"] .no-gif--no.no-gif--left,
  .screen[data-screen="gift"] .no-gif--cat.no-gif--left {
    transform: translate(0, 12px) scale(0.5) rotate(-6deg);
  }
  .screen[data-screen="gift"] .yes-gif--yes.yes-gif--right,
  .screen[data-screen="gift"] .no-gif--no.no-gif--right {
    transform: translate(0, 12px) scale(0.5) rotate(6deg);
  }
  .screen[data-screen="gift"] .yes-gif--pig.yes-gif--right,
  .screen[data-screen="gift"] .no-gif--cat.no-gif--right {
    transform: translate(0, 12px) scale(-0.5, 0.5) rotate(6deg);
  }
  .screen[data-screen="gift"] .yes-hover-gifs.is-yes-hover .yes-gif--yes.yes-gif--left {
    transform: translate(0, 0) scale(1) rotate(-4deg);
    animation-name: ynGifBobLEdge;
  }
  .screen[data-screen="gift"] .yes-hover-gifs.is-yes-hover .yes-gif--pig.yes-gif--left {
    transform: translate(0, 0) scale(0.92) rotate(4deg);
    animation-name: ynGifBobLowerLEdge;
  }
  .screen[data-screen="gift"] .yes-hover-gifs.is-yes-hover .yes-gif--yes.yes-gif--right {
    transform: translate(0, 0) scale(1) rotate(4deg);
    animation-name: ynGifBobREdge;
  }
  .screen[data-screen="gift"] .yes-hover-gifs.is-yes-hover .yes-gif--pig.yes-gif--right {
    transform: translate(0, 0) scale(-0.92, 0.92) rotate(-4deg);
    animation-name: ynGifBobLowerREdge;
  }
  .screen[data-screen="gift"] .no-hover-gifs.is-no-hover .no-gif--no.no-gif--left {
    transform: translate(0, 0) scale(1) rotate(4deg);
    animation-name: noGifBobInvLEdge;
  }
  .screen[data-screen="gift"] .no-hover-gifs.is-no-hover .no-gif--cat.no-gif--left {
    transform: translate(0, 0) scale(0.92) rotate(-4deg);
    animation-name: noGifBobInvLowerLEdge;
  }
  .screen[data-screen="gift"] .no-hover-gifs.is-no-hover .no-gif--no.no-gif--right {
    transform: translate(0, 0) scale(1) rotate(-4deg);
    animation-name: noGifBobInvREdge;
  }
  .screen[data-screen="gift"] .no-hover-gifs.is-no-hover .no-gif--cat.no-gif--right {
    transform: translate(0, 0) scale(-0.92, 0.92) rotate(4deg);
    animation-name: noGifBobInvLowerREdge;
  }
  @keyframes ynGifBobLEdge {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(-4deg); }
    50% { transform: translate(0, -10px) scale(1.04) rotate(-1deg); }
  }
  @keyframes ynGifBobREdge {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(4deg); }
    50% { transform: translate(0, -10px) scale(1.04) rotate(1deg); }
  }
  @keyframes ynGifBobLowerLEdge {
    0%, 100% { transform: translate(0, 0) scale(0.92) rotate(4deg); }
    50% { transform: translate(-2px, -8px) scale(0.98) rotate(1deg); }
  }
  @keyframes ynGifBobLowerREdge {
    0%, 100% { transform: translate(0, 0) scale(-0.92, 0.92) rotate(-4deg); }
    50% { transform: translate(2px, -8px) scale(-0.98, 0.98) rotate(-1deg); }
  }
  @keyframes noGifBobInvLEdge {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(4deg); }
    50% { transform: translate(0, 10px) scale(1.04) rotate(1deg); }
  }
  @keyframes noGifBobInvREdge {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(-4deg); }
    50% { transform: translate(0, 10px) scale(1.04) rotate(-1deg); }
  }
  @keyframes noGifBobInvLowerLEdge {
    0%, 100% { transform: translate(0, 0) scale(0.92) rotate(-4deg); }
    50% { transform: translate(2px, 8px) scale(0.98) rotate(-1deg); }
  }
  @keyframes noGifBobInvLowerREdge {
    0%, 100% { transform: translate(0, 0) scale(-0.92, 0.92) rotate(4deg); }
    50% { transform: translate(-2px, 8px) scale(-0.98, 0.98) rotate(1deg); }
  }
}
@media (max-height: 640px) {
  .screen[data-screen="gift"] .yes-gif,
  .screen[data-screen="gift"] .no-gif {
    width: clamp(56px, 12vw, 104px);
  }
  .screen[data-screen="gift"] .yes-gif--yes.yes-gif--left,
  .screen[data-screen="gift"] .yes-gif--yes.yes-gif--right {
    top: 32%;
  }
  .screen[data-screen="gift"] .no-gif--no.no-gif--left,
  .screen[data-screen="gift"] .no-gif--no.no-gif--right {
    top: 24%;
  }
  .screen[data-screen="gift"] .yes-gif--pig.yes-gif--left,
  .screen[data-screen="gift"] .yes-gif--pig.yes-gif--right {
    top: 62%;
    width: clamp(48px, 10vw, 86px);
  }
  .screen[data-screen="gift"] .no-gif--cat.no-gif--left,
  .screen[data-screen="gift"] .no-gif--cat.no-gif--right {
    top: 72%;
    width: clamp(56px, 12vw, 100px);
  }
}
@media (hover: none), (pointer: coarse) {
  .screen[data-screen="gift"] .yes-hover-gifs,
  .screen[data-screen="gift"] .no-hover-gifs {
    display: none;
  }
}

/* Eyes from assets/cats/Yes Button.html */
.screen[data-screen="gift"] .btn-yes .puppy {
  display: block;
  width: auto;
  margin-bottom: 2px;
  line-height: 0;
  filter: drop-shadow(0 2px 5px rgba(30, 60, 120, 0.16));
}
.screen[data-screen="gift"] .btn-yes .yes-eye-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.screen[data-screen="gift"] .btn-yes .eyes {
  display: flex;
  gap: clamp(6px, 2vw, 12px);
  justify-content: center;
  pointer-events: none;
  opacity: 0.96;
}
.screen[data-screen="gift"] .btn-yes .eye {
  width: clamp(34px, 9.5vw, 46px);
  height: auto;
  display: block;
  overflow: visible;
}
.screen[data-screen="gift"] .btn-yes .art {
  transform-box: view-box;
  transform-origin: 64px 74px;
}
.screen[data-screen="gift"] .btn-yes.blink .art {
  animation: yesEyeBlink 0.26s ease-in-out;
}
@keyframes yesEyeBlink {
  0%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(0.08); }
}
.screen[data-screen="gift"] .btn-no {
  min-height: 42px;
  padding: 0.5em 1.15em;
  font-size: 0.95rem;
  z-index: 35;
}
.screen[data-screen="gift"] .btn-no-label {
  max-width: min(70vw, 14.5rem);
  font-size: inherit;
}
.screen[data-screen="gift"] .yes-wrap.yes-react {
  animation: yesSoftNudge 0.55s var(--ease-bounce);
}
@keyframes yesSoftNudge {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.06); }
  100% { filter: brightness(1); }
}
@media (max-height: 740px) {
  .screen[data-screen="gift"] {
    padding-top: calc(3.1rem + var(--safe-t));
    padding-bottom: calc(2.1rem + var(--safe-b));
  }
  .screen[data-screen="gift"] .gift-polaroid {
    width: min(68vw, 260px);
  }
  .screen[data-screen="gift"] .gift-text {
    font-size: clamp(1.1rem, 4.2vw, 1.45rem);
  }
  .screen[data-screen="gift"] .btn-yes .eye {
    width: clamp(30px, 8.5vw, 40px);
  }
  .screen[data-screen="gift"] .btn-yes {
    font-size: clamp(1.05rem, 4.2vw, 1.28rem);
  }
  .screen[data-screen="gift"] .bigbox {
    width: min(44vw, 180px);
  }
  .screen[data-screen="gift"] .yn {
    flex-wrap: nowrap;
    gap: clamp(6px, 1.2vh, 10px);
  }
  .screen[data-screen="gift"] .gift-reveal {
    gap: clamp(6px, 1.2vh, 10px);
  }
}
@media (min-width: 768px) and (max-height: 768px) {
  .screen[data-screen="gift"] .gift-polaroid {
    width: min(42vw, 220px);
  }
  .screen[data-screen="gift"] .gift-text {
    font-size: clamp(1.05rem, 2.5vh, 1.3rem);
    max-width: min(78vw, 18rem);
    line-height: 1.25;
  }
  .screen[data-screen="gift"] .bigbox {
    width: min(30vw, 155px);
  }
}
@media (max-height: 640px) {
  .screen[data-screen="gift"] .gift-eyebrow {
    display: none;
  }
  .screen[data-screen="gift"] #gift-title {
    font-size: clamp(1.25rem, 4.5vw, 1.7rem);
  }
  .screen[data-screen="gift"] .gift-polaroid {
    width: min(60vw, 220px);
    padding: 0.45rem 0.45rem 0.35rem;
  }
  .screen[data-screen="gift"] .gift-polaroid figcaption {
    font-size: 0.85rem;
    margin-top: 0.2rem;
  }
}
.screen[data-screen="gift"] .eye-tear {
  display: none;
}
.screen[data-screen="gift"] .btn-no.flying {
  position: fixed;
  transform: scale(var(--ns, 1));
  /* Movement is WAAPI-driven — avoid CSS left/top transitions fighting JS */
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease;
  z-index: 40;
  will-change: transform;
  max-width: min(78vw, 16rem);
}
.screen[data-screen="gift"] .btn-no.flying:active,
.screen[data-screen="gift"] .btn-no.flying.is-pressed {
  /* Keep flee scale; press feedback via pastel only while flying */
  transform: scale(var(--ns, 1));
}
@media (prefers-reduced-motion: reduce) {
  .btn-no,
  .screen[data-screen="gift"] .btn-no.flying,
  .screen[data-screen="gift"] .yes-wrap {
    transition: none !important;
  }
  .screen[data-screen="gift"] .btn-yes.blink .art {
    animation: none !important;
  }
  .screen[data-screen="gift"] .yes-wrap.yes-react {
    animation: none !important;
  }
  .screen[data-screen="gift"] .yes-gif,
  .screen[data-screen="gift"] .no-gif {
    transition: opacity 0.2s ease, visibility 0s linear 0.2s !important;
    animation: none !important;
  }
  .screen[data-screen="gift"] .yes-hover-gifs.is-yes-hover .yes-gif,
  .screen[data-screen="gift"] .no-hover-gifs.is-no-hover .no-gif {
    animation: none !important;
  }
}
@media (hover: none) {
  .btn-no:hover {
    /* Avoid sticky hover styles on touch devices */
    background: linear-gradient(180deg, #ffffff 0%, #fff7f4 100%);
    border-color: #e8d0c0;
    box-shadow:
      0 6px 16px rgba(194, 140, 120, 0.18),
      0 1px 0 rgba(255, 255, 255, 0.9) inset;
    filter: none;
  }
}
/* Gift screen is position:relative (nanha-gift). Keep it viewport-tall while celebrating
   so fixed #celebrate (contained by the screen's transform) can cover the full UI. */
.screen[data-screen="gift"].is-celebrating-screen,
body.is-celebrating .screen[data-screen="gift"] {
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.screen[data-screen="gift"].is-celebrating-screen .yes-hover-gifs,
.screen[data-screen="gift"].is-celebrating-screen .no-hover-gifs,
body.is-celebrating .screen[data-screen="gift"] .yes-hover-gifs,
body.is-celebrating .screen[data-screen="gift"] .no-hover-gifs {
  display: none;
}
.screen[data-screen="gift"] .celebrate {
  --heart-ar: 1.10638;
  /* Reserve room under the heart for the Next button */
  --btn-reserve: 3.5rem;
  --heart-w: min(
    86vw,
    calc((100dvh - 1.5rem - var(--btn-reserve)) * var(--heart-ar)),
    36rem
  );
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  min-height: 100%;
  z-index: 45;
  display: grid;
  place-items: center;
  padding:
    max(12px, var(--safe-t))
    max(12px, var(--safe-r))
    max(12px, var(--safe-b))
    max(12px, var(--safe-l));
  /* Dreamy pastel-pink/peach wash — no full-overlay backdrop-filter (jank over dancers/FX) */
  background:
    radial-gradient(ellipse 70% 55% at 50% 36%, rgba(255, 252, 250, 0.98) 0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at 18% 72%, rgba(255, 214, 227, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 86% 22%, rgba(255, 229, 217, 0.6) 0%, transparent 68%),
    radial-gradient(ellipse 40% 35% at 72% 78%, rgba(255, 200, 214, 0.35) 0%, transparent 65%),
    linear-gradient(165deg, #fff8f5 0%, #ffe8ef 42%, #ffe5d9 78%, #fff5f0 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
  isolation: isolate;
  /* Do NOT use contain:strict/size — it helped collapse this overlay to content height */
  contain: layout paint;
  transform: translateZ(0);
}
/* Soft light orbs behind the heart jewel */
.screen[data-screen="gift"] .yay-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.screen[data-screen="gift"] .yay-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
  will-change: transform, opacity;
}
.screen[data-screen="gift"] .yay-orb--1 {
  width: min(48vw, 22rem);
  height: min(48vw, 22rem);
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 214, 227, 0.45) 45%, transparent 72%);
  animation: yayOrbDrift 9s ease-in-out infinite;
}
.screen[data-screen="gift"] .yay-orb--2 {
  width: min(32vw, 14rem);
  height: min(32vw, 14rem);
  left: 18%;
  top: 58%;
  background: radial-gradient(circle, rgba(255, 229, 217, 0.7) 0%, transparent 70%);
  animation: yayOrbDrift 11s ease-in-out 0.8s infinite reverse;
}
.screen[data-screen="gift"] .yay-orb--3 {
  width: min(28vw, 12rem);
  height: min(28vw, 12rem);
  right: 12%;
  top: 24%;
  background: radial-gradient(circle, rgba(255, 182, 206, 0.5) 0%, transparent 68%);
  animation: yayOrbDrift 10s ease-in-out 1.4s infinite;
}
@keyframes yayOrbDrift {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.7; transform: translate(-48%, -52%) scale(1.06); }
}
.screen[data-screen="gift"] .yay-orb--2 {
  transform: none;
}
.screen[data-screen="gift"] .yay-orb--3 {
  transform: none;
}
@keyframes yayOrbDriftSoft {
  0%, 100% { opacity: 0.4; transform: translate(0, 0) scale(1); }
  50% { opacity: 0.65; transform: translate(6px, -8px) scale(1.05); }
}
.screen[data-screen="gift"] .yay-orb--2 {
  animation-name: yayOrbDriftSoft;
}
.screen[data-screen="gift"] .yay-orb--3 {
  animation-name: yayOrbDriftSoft;
}
/* One-shot celebratory heart burst on reveal */
.screen[data-screen="gift"] .yay-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.screen[data-screen="gift"] .yay-burst i {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.55rem;
  height: 0.55rem;
  margin: -0.28rem;
  border-radius: 50%;
  background: #e0568a;
  opacity: 0;
  box-shadow: 0 0 6px rgba(255, 182, 206, 0.8);
}
.screen[data-screen="gift"] .yay-burst i:nth-child(odd) {
  background: #ff9a6c;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.screen[data-screen="gift"] .celebrate.is-yay-enter .yay-burst i {
  animation: yayBurstPop 0.85s var(--ease-out) forwards;
}
.screen[data-screen="gift"] .celebrate.is-yay-enter .yay-burst i:nth-child(1) { --bx: -72px; --by: -28px; animation-delay: 0.05s; }
.screen[data-screen="gift"] .celebrate.is-yay-enter .yay-burst i:nth-child(2) { --bx: 68px; --by: -36px; animation-delay: 0.08s; }
.screen[data-screen="gift"] .celebrate.is-yay-enter .yay-burst i:nth-child(3) { --bx: -90px; --by: 18px; animation-delay: 0.12s; }
.screen[data-screen="gift"] .celebrate.is-yay-enter .yay-burst i:nth-child(4) { --bx: 86px; --by: 12px; animation-delay: 0.1s; }
.screen[data-screen="gift"] .celebrate.is-yay-enter .yay-burst i:nth-child(5) { --bx: -40px; --by: -58px; animation-delay: 0.14s; }
.screen[data-screen="gift"] .celebrate.is-yay-enter .yay-burst i:nth-child(6) { --bx: 44px; --by: -62px; animation-delay: 0.16s; }
.screen[data-screen="gift"] .celebrate.is-yay-enter .yay-burst i:nth-child(7) { --bx: -20px; --by: 42px; animation-delay: 0.18s; }
.screen[data-screen="gift"] .celebrate.is-yay-enter .yay-burst i:nth-child(8) { --bx: 24px; --by: 46px; animation-delay: 0.2s; }
@keyframes yayBurstPop {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  35% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--bx, 40px), var(--by, -40px)) scale(1.1); }
}
/*
  Post-Yes side gutters: 3 mirrored rows (dance / shocked / giggle).
  Anchored outside the heart column so they never cover the yay message.
*/
.screen[data-screen="gift"] .yes-side-cats {
  /* Midpoint of each empty side margin outside the heart column */
  --side-gutter: max(0px, calc((100vw - min(100vw, var(--heart-w))) / 2));
  --side-gutter-mid: max(0.75rem, calc(var(--side-gutter) / 2));
  --side-cat-max: min(148px, max(0px, calc(var(--side-gutter) - 0.6rem)));
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.screen[data-screen="gift"] .side-cat {
  position: absolute;
  width: min(clamp(72px, 11vw, 132px), var(--side-cat-max));
  height: auto;
  max-width: var(--side-cat-max);
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(0 10px 18px rgba(255, 143, 179, 0.28));
  will-change: transform, opacity;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.34, 1.45, 0.64, 1),
    visibility 0s linear 0.45s;
}
/* Row 1 — dance */
.screen[data-screen="gift"] .side-cat--dance.side-cat--left {
  left: var(--side-gutter-mid);
  top: 14%;
  transform: translate(-50%, 22px) scale(0.45) rotate(-10deg);
}
.screen[data-screen="gift"] .side-cat--dance.side-cat--right {
  left: auto;
  right: var(--side-gutter-mid);
  top: 14%;
  transform: translate(50%, 22px) scale(-0.45, 0.45) rotate(10deg);
}
/* Row 2 — shocked */
.screen[data-screen="gift"] .side-cat--shocked.side-cat--left {
  left: var(--side-gutter-mid);
  top: 44%;
  width: min(clamp(68px, 10.5vw, 124px), var(--side-cat-max));
  transform: translate(-50%, 22px) scale(0.45) rotate(8deg);
}
.screen[data-screen="gift"] .side-cat--shocked.side-cat--right {
  left: auto;
  right: var(--side-gutter-mid);
  top: 44%;
  width: min(clamp(68px, 10.5vw, 124px), var(--side-cat-max));
  transform: translate(50%, 22px) scale(-0.45, 0.45) rotate(-8deg);
}
/* Row 3 — giggle */
.screen[data-screen="gift"] .side-cat--giggle.side-cat--left {
  left: var(--side-gutter-mid);
  top: 72%;
  width: min(clamp(78px, 12vw, 142px), var(--side-cat-max));
  transform: translate(-50%, 22px) scale(0.48) rotate(-7deg);
}
.screen[data-screen="gift"] .side-cat--giggle.side-cat--right {
  left: auto;
  right: var(--side-gutter-mid);
  top: 72%;
  width: min(clamp(78px, 12vw, 142px), var(--side-cat-max));
  transform: translate(50%, 22px) scale(-0.48, 0.48) rotate(7deg);
}
.screen[data-screen="gift"] .yes-side-cats.is-on .side-cat {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s, 0s;
}
.screen[data-screen="gift"] .yes-side-cats.is-on .side-cat--dance.side-cat--left {
  transform: translate(-50%, 0) scale(1) rotate(-6deg);
  animation: sideCatBobL 2.55s ease-in-out 0.55s infinite;
  transition-delay: 0.04s, 0.04s, 0s;
}
.screen[data-screen="gift"] .yes-side-cats.is-on .side-cat--dance.side-cat--right {
  transform: translate(50%, 0) scale(-1, 1) rotate(6deg);
  animation: sideCatBobR 2.55s ease-in-out 0.62s infinite;
  transition-delay: 0.1s, 0.1s, 0s;
}
.screen[data-screen="gift"] .yes-side-cats.is-on .side-cat--shocked.side-cat--left {
  transform: translate(-50%, 0) scale(0.96) rotate(5deg);
  animation: sideCatBobLowerL 2.8s ease-in-out 0.72s infinite;
  transition-delay: 0.16s, 0.16s, 0s;
}
.screen[data-screen="gift"] .yes-side-cats.is-on .side-cat--shocked.side-cat--right {
  transform: translate(50%, 0) scale(-0.96, 0.96) rotate(-5deg);
  animation: sideCatBobLowerR 2.8s ease-in-out 0.8s infinite;
  transition-delay: 0.22s, 0.22s, 0s;
}
.screen[data-screen="gift"] .yes-side-cats.is-on .side-cat--giggle.side-cat--left {
  transform: translate(-50%, 0) scale(1.08) rotate(-4deg);
  animation: sideCatBobGiggleL 3s ease-in-out 0.9s infinite;
  transition-delay: 0.28s, 0.28s, 0s;
}
.screen[data-screen="gift"] .yes-side-cats.is-on .side-cat--giggle.side-cat--right {
  transform: translate(50%, 0) scale(-1.08, 1.08) rotate(4deg);
  animation: sideCatBobGiggleR 3s ease-in-out 0.98s infinite;
  transition-delay: 0.34s, 0.34s, 0s;
}
@keyframes sideCatBobL {
  0%, 100% { transform: translate(-50%, 0) scale(1) rotate(-6deg); }
  50% { transform: translate(-50%, -12px) scale(1.05) rotate(-2deg); }
}
@keyframes sideCatBobR {
  0%, 100% { transform: translate(50%, 0) scale(-1, 1) rotate(6deg); }
  50% { transform: translate(50%, -12px) scale(-1.05, 1.05) rotate(2deg); }
}
@keyframes sideCatBobLowerL {
  0%, 100% { transform: translate(-50%, 0) scale(0.96) rotate(5deg); }
  50% { transform: translate(-54%, -10px) scale(1.02) rotate(1deg); }
}
@keyframes sideCatBobLowerR {
  0%, 100% { transform: translate(50%, 0) scale(-0.96, 0.96) rotate(-5deg); }
  50% { transform: translate(54%, -10px) scale(-1.02, 1.02) rotate(-1deg); }
}
@keyframes sideCatBobGiggleL {
  0%, 100% { transform: translate(-50%, 0) scale(1.08) rotate(-4deg); }
  50% { transform: translate(-50%, -11px) scale(1.14) rotate(-1deg); }
}
@keyframes sideCatBobGiggleR {
  0%, 100% { transform: translate(50%, 0) scale(-1.08, 1.08) rotate(4deg); }
  50% { transform: translate(50%, -11px) scale(-1.14, 1.14) rotate(1deg); }
}
/* Too little gutter — hide rather than crowd the heart */
@media (max-width: 780px) {
  .screen[data-screen="gift"] .yes-side-cats {
    display: none;
  }
}
@media (max-height: 640px) {
  .screen[data-screen="gift"] .side-cat--dance.side-cat--left,
  .screen[data-screen="gift"] .side-cat--dance.side-cat--right {
    top: 10%;
  }
  .screen[data-screen="gift"] .side-cat--shocked.side-cat--left,
  .screen[data-screen="gift"] .side-cat--shocked.side-cat--right {
    top: 40%;
  }
  .screen[data-screen="gift"] .side-cat--giggle.side-cat--left,
  .screen[data-screen="gift"] .side-cat--giggle.side-cat--right {
    top: 68%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen[data-screen="gift"] .side-cat,
  .screen[data-screen="gift"] .yes-side-cats.is-on .side-cat {
    transition: opacity 0.2s ease;
    animation: none !important;
  }
  .screen[data-screen="gift"] .yes-side-cats.is-on .side-cat--dance.side-cat--left {
    transform: translate(-50%, 0) scale(1) rotate(-4deg);
  }
  .screen[data-screen="gift"] .yes-side-cats.is-on .side-cat--dance.side-cat--right {
    transform: translate(50%, 0) scale(-1, 1) rotate(4deg);
  }
  .screen[data-screen="gift"] .yes-side-cats.is-on .side-cat--shocked.side-cat--left {
    transform: translate(-50%, 0) scale(0.96) rotate(3deg);
  }
  .screen[data-screen="gift"] .yes-side-cats.is-on .side-cat--shocked.side-cat--right {
    transform: translate(50%, 0) scale(-0.96, 0.96) rotate(-3deg);
  }
  .screen[data-screen="gift"] .yes-side-cats.is-on .side-cat--giggle.side-cat--left {
    transform: translate(-50%, 0) scale(1.08) rotate(-3deg);
  }
  .screen[data-screen="gift"] .yes-side-cats.is-on .side-cat--giggle.side-cat--right {
    transform: translate(50%, 0) scale(-1.08, 1.08) rotate(3deg);
  }
}

.screen[data-screen="gift"] .cats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  margin: 0;
  min-height: 0;
  display: block;
  contain: layout paint;
  z-index: 1;
}
/*
 * Locked-aspect heart stage: same curves on every viewport.
 * Width scales with vmin; height follows --heart-ar from JS (parametric span).
 */
.screen[data-screen="gift"] .cats.cats-heart {
  --heart-cat-sz: clamp(32px, 8.2vmin, 70px);
  --sz: var(--heart-cat-sz);
  inset: auto;
  left: 50%;
  /* Nudge up so the under-heart button still fits in the viewport */
  top: calc(50% - (var(--btn-reserve) * 0.45));
  width: var(--heart-w);
  height: auto;
  aspect-ratio: var(--heart-ar);
  max-width: calc(100vw - 1.5rem);
  transform: translate(-50%, -50%);
  overflow: visible;
}
.screen[data-screen="gift"] .dancer {
  position: absolute;
  width: var(--sz, var(--heart-cat-sz, 56px));
  transform-origin: 50% 100%;
  will-change: transform;
  contain: layout style paint;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* Heart outline: anchor each GIF on its curve point */
.screen[data-screen="gift"] .cats-heart .heart-dancer {
  width: var(--sz);
  margin-left: calc(var(--sz) * -0.5);
  margin-top: calc(var(--sz) * -0.5);
  transform-origin: 50% 50%;
}
.screen[data-screen="gift"] .cats-heart .heart-dancer.d0 {
  animation-name: heartDance0;
}
.screen[data-screen="gift"] .cats-heart .heart-dancer.d1 {
  animation-name: heartDance1;
}
.screen[data-screen="gift"] .cats-heart .heart-dancer.d2 {
  animation-name: heartDance2;
}
.screen[data-screen="gift"] .cats-heart .heart-dancer.d3 {
  animation-name: heartDance3;
}
/* Minimal bob — keep left/right wings visually locked */
@keyframes heartDance0 {
  from { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
  to { transform: translate3d(0, -3px, 0) rotate(2deg) scale(1.02); }
}
@keyframes heartDance1 {
  from { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
  to { transform: translate3d(0, -3px, 0) rotate(2deg) scale(1.02); }
}
@keyframes heartDance2 {
  from { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
  to { transform: translate3d(0, -3px, 0) rotate(2deg) scale(1.02); }
}
@keyframes heartDance3 {
  from { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
  to { transform: translate3d(0, -3px, 0) rotate(2deg) scale(1.02); }
}
.screen[data-screen="gift"] .dancer img,
.screen[data-screen="gift"] .dancer .cat-svg {
  width: 100%;
  display: block;
  pointer-events: none;
}
.screen[data-screen="gift"] .dancer img {
  /* Keep GIF decode cost bounded to the displayed box */
  max-width: 100%;
  height: auto;
  content-visibility: auto;
}
.screen[data-screen="gift"] .cat-emoji {
  display: block;
  font-size: calc(var(--sz) * 0.8);
  line-height: 1;
}
.screen[data-screen="gift"] .dancer.d0 {
  animation: dance0 0.75s ease-in-out var(--dl) infinite alternate;
}
.screen[data-screen="gift"] .dancer.d1 {
  animation: dance1 0.95s ease-in-out var(--dl) infinite alternate;
}
.screen[data-screen="gift"] .dancer.d2 {
  animation: dance2 0.85s ease-in-out var(--dl) infinite alternate;
}
.screen[data-screen="gift"] .dancer.d3 {
  animation: dance3 0.7s ease-in-out var(--dl) infinite alternate;
}
/* SVG limb waves are cute but multiply compositor work — keep them gentle */
.screen[data-screen="gift"] .cat-svg .cat-arm.l {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: armWave 0.55s ease-in-out infinite alternate;
}
.screen[data-screen="gift"] .cat-svg .cat-arm.r {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: armWave 0.55s ease-in-out infinite alternate-reverse;
}
.screen[data-screen="gift"] .cat-svg .cat-tail {
  transform-box: fill-box;
  transform-origin: 0 100%;
  animation: armWave 0.7s ease-in-out infinite alternate;
}
.screen[data-screen="gift"] .yay {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Same footprint as the heart stage — text centers inside */
  width: var(--heart-w);
  max-width: calc(100vw - 1.5rem);
  aspect-ratio: var(--heart-ar);
  height: auto;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0.5rem 10%;
  border-radius: 0;
  /* Do NOT use contain:paint — it clipped the under-heart button + shimmer text */
  overflow: visible;
  transform: translate3d(0, calc(var(--btn-reserve) * -0.45), 0);
  pointer-events: none;
}
/* Love-letter glass jewel — heart-inspired soft frame */
.screen[data-screen="gift"] .yay-jewel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: min(92%, 19.5rem);
  max-width: 100%;
  padding: clamp(1.15rem, 3.8vmin, 1.75rem) clamp(1rem, 3.6vmin, 1.65rem)
    clamp(1.05rem, 3.4vmin, 1.55rem);
  border-radius: 2rem 2rem 2.35rem 2.35rem / 2.4rem 2.4rem 2.1rem 2.1rem;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 246, 248, 0.92) 42%, rgba(255, 236, 228, 0.9) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(224, 86, 138, 0.1),
    0 14px 36px -12px rgba(224, 86, 138, 0.28),
    0 4px 14px rgba(255, 182, 140, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 214, 227, 0.35);
  opacity: 0;
  transform: scale(0.86) translateY(10px);
  filter: blur(6px);
}
.screen[data-screen="gift"] .celebrate.is-yay-enter .yay-jewel {
  animation:
    yayJewelEnter 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    yayHeartbeat 1.55s ease-in-out 0.9s infinite;
}
@keyframes yayJewelEnter {
  0% {
    opacity: 0;
    transform: scale(0.86) translateY(12px);
    filter: blur(7px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}
@keyframes yayHeartbeat {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(224, 86, 138, 0.1),
      0 14px 36px -12px rgba(224, 86, 138, 0.26),
      0 4px 14px rgba(255, 182, 140, 0.16),
      0 0 22px rgba(255, 182, 206, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(224, 86, 138, 0.16),
      0 16px 40px -10px rgba(224, 86, 138, 0.38),
      0 6px 18px rgba(255, 182, 140, 0.22),
      0 0 34px rgba(255, 160, 190, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.98);
  }
}
.screen[data-screen="gift"] .yay-jewel-deco {
  position: absolute;
  inset: -0.35rem -0.45rem;
  pointer-events: none;
  z-index: 0;
}
.screen[data-screen="gift"] .yay-ribbon {
  position: absolute;
  width: clamp(1.6rem, 5vmin, 2.15rem);
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 3px 6px rgba(224, 86, 138, 0.2));
}
.screen[data-screen="gift"] .yay-ribbon--l {
  top: -0.35rem;
  left: -0.15rem;
  transform: rotate(-18deg);
}
.screen[data-screen="gift"] .yay-ribbon--r {
  top: -0.35rem;
  right: -0.15rem;
  transform: rotate(18deg) scaleX(-1);
}
.screen[data-screen="gift"] .yay-float {
  position: absolute;
  font-size: clamp(0.7rem, 2.4vmin, 1rem);
  line-height: 1;
  color: #e0568a;
  opacity: 0.72;
  text-shadow: 0 1px 4px rgba(255, 200, 214, 0.6);
  animation: yayFloatSoft 3.4s ease-in-out infinite;
}
.screen[data-screen="gift"] .yay-float--h1 { left: 6%; top: 38%; color: #e0568a; animation-delay: 0s; }
.screen[data-screen="gift"] .yay-float--h2 { right: 5%; top: 28%; color: #ff8f9f; font-size: 0.85em; animation-delay: 0.5s; }
.screen[data-screen="gift"] .yay-float--h3 { left: 12%; bottom: 10%; color: #f0a070; font-size: 0.78em; animation-delay: 1.1s; }
.screen[data-screen="gift"] .yay-float--s1 { right: 14%; top: 12%; color: #e8b85a; animation: yayTwinkle 2.2s ease-in-out infinite; }
.screen[data-screen="gift"] .yay-float--s2 { left: 18%; top: 8%; color: #ffb3c9; animation: yayTwinkle 2.6s ease-in-out 0.4s infinite; }
.screen[data-screen="gift"] .yay-float--s3 { right: 8%; bottom: 16%; color: #e8b85a; animation: yayTwinkle 2.4s ease-in-out 0.8s infinite; }
.screen[data-screen="gift"] .yay-float--s4 { left: 4%; top: 18%; color: #ff9a6c; font-size: 0.75em; animation: yayTwinkle 2.8s ease-in-out 1.2s infinite; }
@keyframes yayFloatSoft {
  0%, 100% { transform: translateY(0) rotate(-4deg); opacity: 0.55; }
  50% { transform: translateY(-7px) rotate(4deg); opacity: 0.9; }
}
@keyframes yayTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85) rotate(0deg); }
  50% { opacity: 0.95; transform: scale(1.15) rotate(12deg); }
}
.screen[data-screen="gift"] .yay-petal {
  position: absolute;
  width: 0.55rem;
  height: 0.85rem;
  border-radius: 60% 60% 55% 55%;
  background: linear-gradient(160deg, #ffc4d4, #ffd6c4);
  opacity: 0.55;
  animation: yayFloatSoft 4s ease-in-out infinite;
}
.screen[data-screen="gift"] .yay-petal--1 {
  right: 22%;
  bottom: 6%;
  transform: rotate(28deg);
  animation-delay: 0.7s;
}
.screen[data-screen="gift"] .yay-petal--2 {
  left: 24%;
  bottom: 4%;
  transform: rotate(-22deg);
  background: linear-gradient(160deg, #ffe0c8, #ffc9d8);
  animation-delay: 1.4s;
}
.screen[data-screen="gift"] .yay-eyebrow {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-romantic), "Dancing Script", cursive;
  font-size: clamp(0.78rem, 2.4vmin, 0.98rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: none;
  color: #c45a86;
  opacity: 0.88;
  line-height: 1.2;
}
.screen[data-screen="gift"] .yay .yay-line {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.06em 0.16em;
  margin: 0;
  max-width: 12.5ch;
  padding-inline: 0.1rem;
  line-height: 1.28;
  letter-spacing: 0.01em;
  font-size: clamp(1.05rem, 3.8vmin, 1.7rem);
  opacity: 0;
  transform: translateY(14px);
}
/* Gentle fade-up when celebration enters */
.screen[data-screen="gift"] .celebrate.is-yay-enter .yay .yay-line {
  animation: yayTextEnter 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}
@keyframes yayTextEnter {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.screen[data-screen="gift"] .yay #yay-text {
  display: inline-block;
  margin: 0;
  max-width: 100%;
  font-family: var(--font-romantic), "Dancing Script", var(--font-script), Caveat, cursive;
  font-weight: 700;
  font-style: normal;
  /* Fallback if gradient clip fails */
  color: #d478a8;
  /* Soft dreamy glow (filter paints around clipped gradient glyphs) */
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.65))
    drop-shadow(0 4px 14px rgba(232, 140, 190, 0.42))
    drop-shadow(0 0 22px rgba(186, 150, 230, 0.32));
}
/* Shared pastel pink → purple love-letter shimmer */
.screen[data-screen="gift"] .yay #yay-text.shimmer,
.screen[data-screen="gift"] .yay #yay-text .yay-lead,
.screen[data-screen="gift"] .yay #yay-text .yay-soft,
.screen[data-screen="gift"] .yay #yay-text .yay-emphasis {
  background-image: linear-gradient(
    110deg,
    #ff9ec8 0%,
    #f0a0d4 14%,
    #e8a0e0 28%,
    #c9a8f0 46%,
    #b794f6 58%,
    #e8a8d8 74%,
    #ffb0d0 88%,
    #ff9ec8 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: yayShimmerFlow 7.5s ease-in-out infinite;
}
@keyframes yayShimmerFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.screen[data-screen="gift"] .yay #yay-text .yay-lead {
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.92;
}
.screen[data-screen="gift"] .yay #yay-text .yay-soft {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.screen[data-screen="gift"] .yay #yay-text .yay-emphasis {
  font-weight: 700;
  letter-spacing: 0.035em;
}
.screen[data-screen="gift"] .yay #yay-text .yay-emphasis--date {
  font-size: 1.03em;
  letter-spacing: 0.03em;
}
.screen[data-screen="gift"] .yay #yay-text .yay-emphasis--name {
  font-size: 1.05em;
  letter-spacing: 0.035em;
  /* Slightly richer purple pull on the name */
  background-image: linear-gradient(
    110deg,
    #ff8fbc 0%,
    #e89ad8 18%,
    #c9a0f0 40%,
    #a78bfa 55%,
    #e8a0e8 72%,
    #ff9ec8 90%,
    #ff8fbc 100%
  );
  background-size: 260% 100%;
}
/* Sibling of shimmer (not a child) so color emoji paints correctly */
.screen[data-screen="gift"] .yay .yay-emoji {
  display: inline-block;
  flex: 0 0 auto;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.02em;
  line-height: 1;
  color: initial;
  -webkit-text-fill-color: initial;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter:
    drop-shadow(0 2px 6px rgba(255, 170, 200, 0.55))
    drop-shadow(0 0 12px rgba(200, 160, 240, 0.35));
  animation: yayEmojiBob 2.6s ease-in-out 0.35s infinite;
  text-shadow: none;
  transform: none;
  transform-origin: center bottom;
}
@keyframes yayEmojiBob {
  0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); }
  50% { transform: translateY(-4px) rotate(5deg) scale(1.06); }
}
.screen[data-screen="gift"] .yay #yay-next {
  position: absolute;
  /* Center with inset + margin — NOT transform — so reveal()/btn:active
     transform animations cannot shove the button to the right. */
  left: 0;
  right: 0;
  top: calc(100% + clamp(0.45rem, 1.6vmin, 0.9rem));
  z-index: 7;
  transform: none;
  max-width: min(90%, 18rem);
  width: max-content;
  margin-inline: auto;
  margin-block: 0;
  padding: 0.72em 1.25em;
  font-size: clamp(0.82rem, 2.6vmin, 1rem);
  white-space: normal;
  flex-shrink: 0;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, #ffb3cc 0%, #ffcfa8 55%, #ffd6e3 100%);
  color: var(--choc-mid, #66462C);
  box-shadow:
    0 8px 22px -8px rgba(224, 86, 138, 0.4),
    0 2px 6px rgba(102, 70, 44, 0.08) !important;
  filter: none !important;
}
.screen[data-screen="gift"] .yay #yay-next:hover {
  box-shadow:
    0 12px 28px -8px rgba(224, 86, 138, 0.5),
    0 2px 8px rgba(102, 70, 44, 0.1) !important;
  filter: brightness(1.03) !important;
}
.screen[data-screen="gift"] .yay #yay-next:active {
  box-shadow:
    0 4px 14px -6px rgba(224, 86, 138, 0.35) !important;
  filter: brightness(0.98) !important;
}
.screen[data-screen="gift"] .yay #yay-next:focus-visible {
  outline: 2px solid #e0568a;
  outline-offset: 3px;
  box-shadow:
    0 8px 22px -8px rgba(224, 86, 138, 0.4) !important;
  filter: none !important;
}
/* Reduced motion: keep jewel visible, kill continuous floats/heartbeat/burst */
@media (prefers-reduced-motion: reduce) {
  .screen[data-screen="gift"] .yay-orb,
  .screen[data-screen="gift"] .yay-float,
  .screen[data-screen="gift"] .yay-petal,
  .screen[data-screen="gift"] .yay .yay-emoji,
  .screen[data-screen="gift"] .celebrate.is-yay-enter .yay-burst i {
    animation: none !important;
  }
  .screen[data-screen="gift"] .yay-jewel {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .screen[data-screen="gift"] .celebrate.is-yay-enter .yay-jewel {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
    box-shadow:
      0 0 0 1px rgba(224, 86, 138, 0.12),
      0 14px 36px -12px rgba(224, 86, 138, 0.28),
      0 4px 14px rgba(255, 182, 140, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  .screen[data-screen="gift"] .yay .yay-line,
  .screen[data-screen="gift"] .celebrate.is-yay-enter .yay .yay-line {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .screen[data-screen="gift"] .yay #yay-text.shimmer,
  .screen[data-screen="gift"] .yay #yay-text .yay-lead,
  .screen[data-screen="gift"] .yay #yay-text .yay-soft,
  .screen[data-screen="gift"] .yay #yay-text .yay-emphasis {
    animation: none;
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #c478a8;
    -webkit-text-fill-color: #c478a8;
  }
  .screen[data-screen="gift"] .yay #yay-text .yay-emphasis--name {
    color: #a78bfa;
    -webkit-text-fill-color: #b794f6;
  }
  .screen[data-screen="gift"] .yay #yay-text {
    filter: drop-shadow(0 2px 8px rgba(232, 140, 190, 0.28));
  }
  .screen[data-screen="gift"] .yay .yay-emoji {
    filter: drop-shadow(0 2px 4px rgba(255, 170, 200, 0.4));
  }
  .screen[data-screen="gift"] .yay-float,
  .screen[data-screen="gift"] .yay-petal {
    opacity: 0.55;
  }
  .screen[data-screen="gift"] .yay-burst i {
    opacity: 0 !important;
  }
}
/* Freeze Inspiration ambient mandalas/orbs while celebration covers the viewport */
body.is-celebrating #ambient-bg {
  visibility: hidden;
  pointer-events: none;
}
body.is-celebrating #ambient-bg * {
  animation-play-state: paused !important;
}
/* Keep custom cursor visible during celebrate — hiding trail while
   body.has-custom-cursor { cursor:none } left no cursor at all. */
@keyframes boxBob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
}
@keyframes boxPop {
  0% { transform: scale(1); }
  30% { transform: scale(0.88, 1.1); }
  60% { transform: scale(1.12, 0.92); }
  100% { transform: scale(1); }
}
@keyframes unfurl {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes pBlink {
  0%, 88%, 100% { transform: scaleY(1); }
  92% { transform: scaleY(0.18); }
  96% { transform: scaleY(1); }
}
@keyframes giftTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes eyeBlushPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes tearDrop {
  0% { transform: translateY(-6px); opacity: 0; }
  25% { opacity: 1; }
  80% { transform: translateY(24px); opacity: 0.9; }
  100% { transform: translateY(30px); opacity: 0; }
}
@keyframes dance0 {
  from { transform: translate3d(0, 0, 0) rotate(-8deg); }
  to { transform: translate3d(0, -26px, 0) rotate(8deg); }
}
@keyframes dance1 {
  from { transform: translate3d(0, 0, 0) rotate(-14deg) scale(1); }
  to { transform: translate3d(0, 0, 0) rotate(14deg) scale(1.08); }
}
@keyframes dance2 {
  from { transform: translate3d(-10px, 0, 0) rotate(-6deg); }
  to { transform: translate3d(10px, -18px, 0) rotate(6deg); }
}
@keyframes dance3 {
  from { transform: translate3d(0, 0, 0) scale(0.92) rotate(-4deg); }
  to { transform: translate3d(0, 0, 0) scale(1.1) rotate(4deg); }
}
@keyframes armWave {
  from { transform: rotate(-16deg); }
  to { transform: rotate(16deg); }
}
@media (prefers-reduced-motion: reduce) {
  .screen[data-screen="gift"] .bigbox,
  .screen[data-screen="gift"] .btn-yes,
  .screen[data-screen="gift"] .dancer,
  .screen[data-screen="gift"] .eye-tear {
    animation: none !important;
  }
}

/* ---- Final (from nanha-gift) ---- */
.screen[data-screen="final"] {
  position: relative;
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen[data-screen="final"] .final-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Wider than global .screen-inner (520px) so the letter reads fully */
  width: min(92vw, 860px);
  max-width: min(92vw, 860px);
  margin-inline: auto;
  gap: 12px;
  padding: 1.25rem clamp(0.85rem, 3.5vw, 2rem) 2.75rem;
  box-sizing: border-box;
}
.screen[data-screen="final"] .final-eyebrow {
  max-width: 100%;
}
.screen[data-screen="final"] .lanterns {
  /* Cover the full visible final screen so floats can exit past the top edge */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  contain: paint;
  transform: translateZ(0);
}
.screen[data-screen="final"] .final-lantern {
  position: absolute;
  left: var(--x);
  /* Start fully below the fold */
  bottom: -16vh;
  width: var(--s, 48px);
  height: auto;
  margin: 0;
  padding: 0;
  font-size: inherit;
  /* Own compositor layer — transform/opacity only (no filter) to stop flicker */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  animation: lanternUp var(--d, 22s) linear var(--dl, 0s) infinite;
  /* Soft glow without drop-shadow (drop-shadow on moving layers flashes on loop) */
  background: radial-gradient(
    ellipse 55% 45% at 50% 48%,
    rgba(255, 211, 110, 0.55) 0%,
    rgba(255, 179, 204, 0.18) 42%,
    transparent 72%
  );
}
.screen[data-screen="final"] .final-lantern svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  /* Keep SVG glow in the graphic; avoid CSS filter on the animated node */
  filter: none;
}
.screen[data-screen="final"] .halo {
  position: absolute;
  top: -50px;
  left: 50%;
  width: min(140vw, 640px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  color: #d9b99b;
  background: radial-gradient(circle, rgba(255, 214, 227, 0.75), rgba(255, 214, 227, 0) 62%);
  contain: layout paint;
}
.screen[data-screen="final"] .halo svg {
  width: 100%;
  height: 100%;
  opacity: 0.28;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: finalSpin 90s linear infinite;
  will-change: transform;
}
.screen[data-screen="final"] .big-halo {
  top: 6%;
  width: min(150vw, 760px);
}
.screen[data-screen="final"] #final-title {
  max-width: min(22ch, 100%);
  width: 100%;
  margin: 0.15rem auto 0.35rem;
  padding-inline: 0.25rem;
  box-sizing: border-box;
  font-size: clamp(1.85rem, 5vh, 3.1rem);
  /* Shimmer drop-shadow is costly over long text; soften for this screen */
  filter: drop-shadow(0 3px 10px rgba(255, 158, 189, 0.28));
}
.screen[data-screen="final"] .final-quote,
.screen[data-screen="final"] #final-quote {
  font-family: var(--font-script), Caveat, cursive;
  font-weight: 500;
  /* Letter body; inspiration.css mirrors with !important */
  font-size: clamp(1.85rem, 4.9vh, 2.35rem);
  line-height: 1.45;
  color: var(--brown, #7a5440);
  /* Beat global .quote { max-width: 28ch } — use nearly full inner width */
  width: 100%;
  max-width: 100%;
  margin: 0.35rem auto 1rem;
  padding-inline: clamp(0.15rem, 1.2vw, 0.5rem);
  opacity: 1;
  display: grid;
  gap: 0.95rem;
  text-align: center;
  text-wrap: pretty;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: manual;
  box-sizing: border-box;
}
.screen[data-screen="final"] .final-quote p,
.screen[data-screen="final"] #final-quote p {
  margin: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}
.screen[data-screen="final"] .final-quote p:last-child,
.screen[data-screen="final"] #final-quote p:last-child {
  font-weight: 600;
}
.screen[data-screen="final"] .btn-row {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  gap: 0.65rem;
}
/* Travel clears the full viewport (+ start offset) before fading — no mid-screen vanish */
@keyframes lanternUp {
  0% {
    transform: translate3d(0, 0, 0) rotate(-3deg);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  45% {
    transform: translate3d(var(--sw, 24px), -55vh, 0) rotate(3deg);
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    /* ~16vh start below + 100vh screen + extra so they exit past the top */
    transform: translate3d(calc(var(--sw, 24px) * 0.4), -175vh, 0) rotate(-2deg);
    opacity: 0;
  }
}
@keyframes finalSpin {
  to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
  .screen[data-screen="final"] .final-inner {
    width: min(96vw, 100%);
    max-width: min(96vw, 100%);
    padding-inline: clamp(0.65rem, 3.5vw, 1.1rem);
    gap: 10px;
  }
  .screen[data-screen="final"] #final-title {
    max-width: 100%;
    font-size: clamp(1.7rem, 7vw, 2.4rem);
  }
  .screen[data-screen="final"] .final-quote,
  .screen[data-screen="final"] #final-quote,
  .screen[data-screen="final"] #final-quote p {
    font-size: clamp(1.7rem, 4.5vh, 2.15rem);
    line-height: 1.42;
    gap: 1rem;
  }
  .screen[data-screen="final"] .final-lantern {
    /* Fewer pixels in flight on phones */
    width: calc(var(--s, 48px) * 0.88);
  }
}
@media (min-width: 900px) {
  .screen[data-screen="final"] .final-inner {
    width: min(88vw, 920px);
    max-width: min(88vw, 920px);
  }
  .screen[data-screen="final"] #final-title {
    font-size: clamp(2rem, 5vh, 3.1rem);
  }
  .screen[data-screen="final"] .final-quote,
  .screen[data-screen="final"] #final-quote,
  .screen[data-screen="final"] #final-quote p {
    font-size: clamp(2rem, 5.2vh, 2.5rem);
    line-height: 1.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen[data-screen="final"] .final-lantern,
  .screen[data-screen="final"] .halo svg {
    animation: none !important;
    will-change: auto;
  }
  .screen[data-screen="final"] .final-lantern {
    opacity: 0.85;
    transform: translate3d(0, -28vh, 0);
  }
}

/* ---- Nanha Cloud — wide cute timeline ---- */
.screen.screen-photos {
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: clamp(0.75rem, 3vw, 2rem);
  padding-right: clamp(0.75rem, 3vw, 2rem);
}
.screen-inner.photos-screen {
  width: min(1120px, 100%);
  max-width: 1120px;
  align-items: stretch;
  gap: 0.85rem;
  margin: 0 auto;
  padding-bottom: calc(5rem + var(--safe-b));
}

/* Static header — one vault composition: brand → tools → whisper → drop */
.photos-header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem 1.2rem 0.85rem;
  border-radius: var(--radius);
  /* Solid glass — backdrop-filter over a dense photo grid was a major scroll/cursor lag source */
  background: linear-gradient(165deg, rgba(255, 251, 248, 0.94), rgba(255, 240, 245, 0.9));
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.photos-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem 1rem;
  padding-bottom: 0.15rem;
}
.photos-title-wrap {
  justify-self: center;
  text-align: center;
  min-width: 0;
  max-width: 100%;
  z-index: 1;
}
.photos-eyebrow {
  margin: 0 0 0.1rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--choc);
  opacity: 0.62;
}
.photos-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  font-size: clamp(1.45rem, 3.4vw, 2.2rem);
  margin: 0;
  line-height: 1.35;
  color: var(--choc);
  overflow: visible;
}
.photos-title-text {
  display: inline-block;
  padding: 0.08em 0.06em 0.12em 0;
  color: var(--choc);
  background: none;
  -webkit-text-fill-color: var(--choc);
}
.photos-title-cloud {
  flex-shrink: 0;
  margin-left: 0;
  transform: translateY(3px);
  filter: drop-shadow(0 2px 3px rgba(196, 139, 160, 0.35));
}
@media (max-width: 520px) {
  .photos-top {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "back upload"
      "title title";
    gap: 0.55rem 0.75rem;
  }
  .photos-back { grid-area: back; }
  .photos-upload-btn { grid-area: upload; }
  .photos-title-wrap { grid-area: title; grid-column: 1 / -1; }
}
.photos-sub {
  margin: 0.2rem 0 0;
  color: var(--choc);
  opacity: 0.72;
  font-family: var(--font-script);
  font-size: clamp(0.95rem, 2.4vw, 1.08rem);
}
.photos-back {
  flex-shrink: 0;
  padding: 0.4rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 600;
  min-height: 44px;
  justify-self: start;
  color: var(--choc);
}
.photos-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 46px;
  padding: 0.55rem 1.2rem 0.55rem 0.9rem;
  border-radius: 999px;
  justify-self: end;
  background: linear-gradient(135deg, #66462C 0%, #8A5D3B 100%);
  border: 1.5px solid transparent;
  box-shadow: 0 8px 22px rgba(102, 70, 44, 0.28);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  transition: transform 0.25s var(--ease), box-shadow 0.25s, background 0.25s;
}
.photos-upload-label {
  letter-spacing: 0.02em;
}
.nanha-cloud-icon {
  display: inline-grid;
  place-items: center;
  line-height: 0;
  filter: drop-shadow(0 2px 3px rgba(92, 64, 51, 0.16));
}
.nanha-cloud-icon svg,
svg.nanha-cloud-icon {
  display: block;
  overflow: visible;
}
.photos-upload-cloud {
  animation: photos-cloud-bob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) brightness(1.08);
}
.photos-upload-btn .nanha-cloud-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
@keyframes photos-cloud-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.photos-upload-btn:hover {
  transform: scale(1.045) translateY(-2px);
  background: linear-gradient(135deg, #7A5335 0%, #9A6A45 100%);
  box-shadow: 0 12px 28px rgba(102, 70, 44, 0.38);
}
.photos-upload-btn:hover .photos-upload-cloud {
  animation-duration: 1.1s;
}
.photos-upload-btn:active {
  transform: scale(0.98);
}
.photos-upload-btn:focus-visible {
  outline: 2px solid var(--choc-soft);
  outline-offset: 3px;
}
.photos-back:focus-visible {
  outline: 2px solid var(--choc-soft);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .photos-upload-cloud { animation: none; }
}

/* Tool rail: filters + search primary; storage secondary whisper */
.photos-controls {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(92, 64, 51, 0.07);
}
.photos-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem 0.85rem;
  align-items: center;
}
@media (min-width: 760px) {
  .photos-tools {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  }
}
@media (min-width: 900px) {
  .photos-tools {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
    gap: 0.65rem 1.1rem;
  }
}
.photos-controls .cloud-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  padding: 0.05rem 0;
}
.photos-search-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.photos-search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-52%);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--choc-soft);
  opacity: 0.7;
  pointer-events: none;
}
.photos-screen .cloud-chip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0.42rem 0.85rem;
  background: rgba(255, 248, 245, 0.88);
  border: 1.5px solid rgba(102, 70, 44, 0.1);
  color: var(--choc-mid);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    transform 0.22s var(--ease),
    background 0.22s,
    box-shadow 0.22s,
    border-color 0.22s,
    color 0.22s;
}
.photos-screen .cloud-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(102, 70, 44, 0.26);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}
.photos-screen .cloud-chip:focus-visible {
  outline: 2px solid var(--choc-soft);
  outline-offset: 2px;
}
.photos-screen .cloud-chip.is-active {
  background: linear-gradient(135deg, #66462C 0%, #8A5D3B 100%);
  border-color: transparent;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 5px 14px rgba(102, 70, 44, 0.22);
  transform: translateY(-1px);
}
.photos-screen .cloud-chip.is-active:hover {
  transform: translateY(-1px) scale(1.02);
}
.photos-screen .cloud-search {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.55rem 1rem 0.55rem 2.35rem;
  background: rgba(255, 252, 248, 0.96);
  border: 1.5px solid rgba(102, 70, 44, 0.12);
  border-radius: 999px;
  color: var(--choc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.photos-screen .cloud-search::placeholder {
  color: var(--text-muted);
  opacity: 0.85;
}
.photos-screen .cloud-search:hover {
  border-color: rgba(102, 70, 44, 0.22);
  background: #fff;
}
.photos-screen .cloud-search:focus-visible {
  outline: none;
  border-color: var(--choc-soft);
  box-shadow:
    0 0 0 3px rgba(138, 93, 59, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Storage whisper — secondary status under tools, not a competing pill */
.photos-storage {
  margin: 0;
  padding: 0.2rem 0.15rem 0;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.photos-storage.is-infinite {
  padding: 0.15rem 0 0;
  min-width: 0;
  gap: 0.4rem;
  background: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  animation: none;
}
.photos-storage.is-infinite::before,
.photos-storage.is-infinite::after {
  display: none;
}
.photos-storage .cloud-storage-bar {
  margin: 0.15rem 0;
  height: 6px;
}
.photos-storage.is-infinite .cloud-storage-bar {
  display: none;
}
.photos-storage .cloud-storage-infinite {
  width: 1.35rem;
  height: 1.35rem;
  background: rgba(255, 247, 251, 0.7);
  box-shadow: inset 0 0 0 1px rgba(196, 139, 160, 0.22);
}
.photos-storage .cloud-storage-glow {
  animation: none;
  opacity: 0.35;
}
.photos-storage .cloud-storage-infinity {
  font-size: 0.8rem;
  animation: none;
  filter: none;
}
.photos-storage .cloud-storage-meta {
  font-size: 0.68rem;
  gap: 0.15rem 0.5rem;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  opacity: 0.88;
}
.photos-storage.is-infinite .cloud-storage-meta {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
}
.photos-storage .cloud-storage-label {
  font-family: var(--font-script);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
  color: var(--choc);
  opacity: 0.78;
  text-shadow: none;
}
.photos-storage .cloud-storage-cap {
  font-size: 0.58rem;
  padding: 0.05rem 0.4rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--choc-mid);
  background: rgba(248, 200, 220, 0.28);
  animation: none;
  box-shadow: none;
}
.photos-storage .cloud-storage-files {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.68;
  color: var(--choc);
  width: auto;
  flex-basis: auto;
}
.photos-storage .cloud-storage-files::before {
  content: "·";
  margin-right: 0.45rem;
  opacity: 0.45;
}

/* Drop invitation — calm idle, clear on drag/focus */
.photos-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.15rem 0 0;
  padding: 0.42rem 0.95rem;
  text-align: center;
  border-radius: 16px;
  border: 1px dashed rgba(196, 139, 160, 0.32);
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition:
    border-color 0.22s,
    background 0.22s,
    box-shadow 0.22s,
    transform 0.22s var(--ease);
}
.photos-dropzone:hover {
  border-color: rgba(196, 139, 160, 0.55);
  background: rgba(255, 252, 250, 0.55);
}
.photos-dropzone:focus-visible {
  outline: 2px solid var(--choc-soft);
  outline-offset: 2px;
  border-color: rgba(138, 93, 59, 0.35);
}
.photos-dropzone.is-dragover {
  border-color: var(--blush, #f8c8dc);
  border-style: solid;
  border-width: 1.5px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 3px rgba(248, 200, 220, 0.4);
  transform: scale(1.01);
}
.photos-dropzone p {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--choc);
  opacity: 0.62;
  letter-spacing: 0.01em;
}
.photos-dropzone:hover p,
.photos-dropzone.is-dragover p {
  opacity: 0.88;
}
.photos-drop-emoji {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.85;
  animation: photos-bob 3.2s ease-in-out infinite;
}
@keyframes photos-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@media (max-width: 520px) {
  .photos-controls {
    gap: 0.45rem;
  }
  .photos-screen .cloud-chip {
    min-height: 38px;
    padding: 0.38rem 0.72rem;
    font-size: 0.78rem;
  }
  .photos-storage .cloud-storage-label {
    font-size: 0.88rem;
  }
  .photos-storage .cloud-storage-cap {
    display: none;
  }
  .photos-dropzone {
    padding: 0.48rem 0.75rem;
  }
  .photos-dropzone p {
    font-size: 0.76rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .photos-drop-emoji { animation: none; }
  .photos-tile { transition: none; }
  .photos-tile.select-bounce,
  .photos-tile-check.pop { animation: none; }
  .photos-dropzone.is-dragover { transform: none; }
  .photos-storage.is-infinite,
  .photos-storage.is-infinite::before,
  .photos-storage.is-infinite::after,
  .photos-storage .cloud-storage-glow,
  .photos-storage .cloud-storage-infinity,
  .photos-storage .cloud-storage-cap {
    animation: none;
  }
}

.photos-timeline {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  margin-top: 0.35rem;
}
.photos-day {
  margin: 0;
  animation: photos-day-in 0.45s var(--ease-soft) both;
  /* Skip off-screen day groups — critical when the vault has many photos */
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
.photos-day:nth-child(1) { animation-delay: 0.02s; }
.photos-day:nth-child(2) { animation-delay: 0.06s; }
.photos-day:nth-child(3) { animation-delay: 0.1s; }
.photos-day:nth-child(4) { animation-delay: 0.14s; }
/* Don't stagger-animate every day group in a huge vault */
.photos-day:nth-child(n + 5) { animation: none; }
@keyframes photos-day-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.photos-day-sticky {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.35rem 0.9rem 0.4rem;
  margin: 0 0 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  font-family: var(--font-script);
  font-size: 1.28rem;
  color: var(--choc);
  line-height: 1.2;
}
.photos-day-sticky::before {
  content: "♡";
  font-size: 0.75rem;
  opacity: 0.55;
  color: #c47890;
}
.photos-day-sticky .photos-day-year {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.5;
  letter-spacing: 0.02em;
}
.photos-day-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 0.75rem;
  padding: 0.1rem 0.15rem 0.4rem;
}
@media (min-width: 520px) {
  .photos-day-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 760px) {
  .photos-day-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 0.9rem;
  }
}
@media (min-width: 980px) {
  .photos-day-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.photos-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.5rem 0.85rem;
  border: 1px solid rgba(234, 219, 206, 0.9);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  overflow: visible;
  transform: rotate(var(--tilt, -1.5deg));
  transition: transform 0.28s var(--ease), box-shadow 0.28s;
  contain: layout paint;
}
.photos-tile:nth-child(even) {
  --tilt: 1.6deg;
}
.photos-tile:nth-child(3n) {
  --tilt: -0.8deg;
}
.photos-tile:hover,
.photos-tile:focus-visible {
  transform: rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-lift);
  z-index: 2;
}
.photos-tile img,
.photos-tile video,
.photos-tile .photo-load-host,
.photos-tile .photos-tile-ph,
.photos-tile .photos-tile-doc {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  background: #ffe8f1;
}
.photos-tile .photo-load-host {
  overflow: hidden;
}
.photos-tile .photo-load-host > img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: inherit;
  background: transparent;
  transition: transform 0.28s var(--ease-soft);
}
.photos-tile:hover .photo-load-host > img.photo-ready,
.photos-tile:hover > img {
  transform: scale(1.03);
}
.photos-tile-ph {
  display: grid;
  place-items: center;
  gap: 0.15rem;
  font-family: var(--font-script);
  font-size: 0.95rem;
  color: var(--choc);
  text-align: center;
  padding: 0.35rem;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 45%),
    linear-gradient(145deg, var(--lavender), var(--peach), var(--mint));
}
.photos-tile-ph .ph-emoji {
  font-size: 1.55rem;
  line-height: 1;
}
.photos-tile-caption {
  display: block;
  margin-top: 0.25rem;
  margin-bottom: 0.15rem;
  padding: 0.2rem 0.35rem;
  min-height: 1.35em;
  font-family: var(--font-script);
  font-size: 0.85rem;
  color: var(--choc-soft);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: text;
  border-radius: 0.45rem;
  outline: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.photos-tile-caption.is-empty:before {
  content: attr(data-placeholder);
  color: color-mix(in srgb, var(--choc-soft) 45%, transparent);
  pointer-events: none;
}
.photos-tile-caption:focus {
  white-space: normal;
  overflow: visible;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--blush) 55%, transparent);
}
.photos-tile.is-selected {
  outline: 2px solid var(--blush);
  outline-offset: 2px;
  background: linear-gradient(180deg, #fff, #fff5f8);
}
.photos-tile.select-bounce {
  animation: tile-select-bounce 0.42s var(--ease);
}
@keyframes tile-select-bounce {
  0% { transform: rotate(var(--tilt, 0deg)) scale(1); }
  45% { transform: rotate(0deg) scale(1.08); }
  100% { transform: rotate(var(--tilt, 0deg)) scale(1); }
}
.photos-tile-check {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(92, 64, 51, 0.18);
  font-size: 0.7rem;
  line-height: 20px;
  color: var(--choc);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(92, 64, 51, 0.1);
}
.photos-tile-check.pop {
  animation: check-pop 0.38s var(--ease);
}
@keyframes check-pop {
  0% { transform: scale(0.6); }
  55% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.photos-tile.is-selected .photos-tile-check {
  background: linear-gradient(135deg, var(--blush), var(--peach));
  border-color: transparent;
  color: var(--choc);
}
.photos-tile-badge {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: rgba(92, 64, 51, 0.72);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  z-index: 2;
}
.photos-tile-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--choc);
  text-align: center;
  background: linear-gradient(145deg, var(--baby), var(--lavender));
}
.photos-tile-doc span {
  font-size: 1.4rem;
}

.photos-screen .cloud-empty {
  text-align: center;
  font-family: var(--font-script);
  font-size: 1.25rem;
  opacity: 0.75;
  padding: 2rem 1rem;
}

/* Legacy gal-item kept for any residual refs */
.gallery-grid { display: none; }
.gal-item { display: none; }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  gap: 0.45rem;
  padding:
    calc(0.85rem + var(--safe-t))
    calc(0.75rem + var(--safe-r))
    calc(0.85rem + var(--safe-b))
    calc(0.75rem + var(--safe-l));
  /* Near-opaque overlay (no backdrop-filter) so the browser can skip painting the gallery underneath */
  background:
    radial-gradient(ellipse 80% 55% at 50% 18%, rgba(248, 200, 220, 0.28), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 85%, rgba(212, 232, 248, 0.22), transparent 55%),
    radial-gradient(ellipse 60% 45% at 12% 78%, rgba(232, 213, 242, 0.2), transparent 50%),
    linear-gradient(165deg, rgba(48, 34, 28, 0.96), rgba(28, 20, 17, 0.985));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  touch-action: pan-y;
  overscroll-behavior: contain;
  color: var(--choc);
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.018);
  transition:
    opacity 0.32s var(--ease-magic),
    transform 0.38s var(--ease-enter);
  will-change: opacity, transform;
  contain: strict;
}
.lightbox.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.lightbox.is-closing {
  opacity: 0;
  transform: translate3d(0, 6px, 0) scale(1.015);
  pointer-events: none;
  transition-duration: 0.26s;
  transition-timing-function: var(--ease-exit);
}
.lightbox[hidden] { display: none !important; }
.lb-glow {
  position: absolute;
  inset: 12% 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 68%);
  pointer-events: none;
  z-index: 0;
  /* Static wash — continuous scale animation under a full-bleed photo was free jank */
  opacity: 0.7;
  animation: none;
}
@keyframes lb-glow-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.04); }
}
.lb-top {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: min(92vw, 820px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.lb-kicker {
  margin: 0;
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  color: rgba(255, 251, 254, 0.92);
  text-shadow: 0 2px 12px rgba(92, 64, 51, 0.25);
}
.lb-top-actions {
  display: flex;
  gap: 0.45rem;
}
.lb-chip {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(248, 200, 220, 0.42));
  color: var(--choc);
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(92, 64, 51, 0.16);
  transition: transform 0.2s var(--ease), background 0.2s;
}
.lb-chip:hover {
  transform: translateY(-1px) scale(1.04);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(232, 213, 242, 0.55));
}
.lb-chip:active { transform: scale(0.94); }
.lb-chip[hidden] { display: none !important; }
.lb-frame {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: min(92vw, 820px);
  min-height: 0;
  padding: 0.55rem;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(248, 200, 220, 0.28) 45%, rgba(212, 232, 248, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 24px 60px rgba(40, 28, 22, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.lb-stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(40, 30, 25, 0.28);
  box-sizing: border-box;
}
.lb-slide {
  position: relative;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.985);
  pointer-events: none;
  backface-visibility: hidden;
  transition:
    opacity 0.34s var(--ease-magic),
    transform 0.38s var(--ease-enter);
}
.lb-slide.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
  z-index: 1;
  will-change: transform, opacity;
}
.lb-slide.is-enter-from-right {
  transform: translate3d(10%, 0, 0) scale(0.988);
}
.lb-slide.is-enter-from-left {
  transform: translate3d(-10%, 0, 0) scale(0.988);
}
.lb-slide.is-active.is-exit-to-left {
  opacity: 0;
  transform: translate3d(-8%, 0, 0) scale(0.985);
  pointer-events: none;
  z-index: 0;
  transition-timing-function: var(--ease-exit);
}
.lb-slide.is-active.is-exit-to-right {
  opacity: 0;
  transform: translate3d(8%, 0, 0) scale(0.985);
  pointer-events: none;
  z-index: 0;
  transition-timing-function: var(--ease-exit);
}
/* Soft stand-in: opacity only — CSS blur on large bitmaps freezes cursor/interaction */
.lb-slide.is-thumb .lb-media.lb-poster {
  opacity: 0.88;
  filter: none;
}
.lb-slide.is-active.is-thumb {
  opacity: 1;
}
/* Fill the stage box; object-fit:contain keeps the whole photo visible inside */
.lb-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center center;
  border-radius: 14px;
  background: transparent;
  transition: opacity 0.22s var(--ease-soft);
  /* Promote the photo layer once — avoid filter/blur thrash */
  transform: translateZ(0);
}
.lb-media.lb-video {
  background: #1a1411;
}
.lb-media.lb-poster {
  z-index: 0;
}
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(212, 232, 248, 0.55));
  color: var(--choc);
  font-size: 1.7rem;
  line-height: 1;
  box-shadow: 0 10px 28px rgba(40, 28, 22, 0.22);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
  /* keep navs out of the flex flow so the frame can claim the middle space */
  margin: 0;
}
.lb-nav:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 14px 32px rgba(40, 28, 22, 0.28);
}
.lb-nav:active {
  transform: translateY(-50%) scale(0.92);
}
.lb-nav.prev { left: max(0.35rem, var(--safe-l)); }
.lb-nav.next { right: max(0.35rem, var(--safe-r)); }
.lb-bottom {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: min(92vw, 820px);
  text-align: center;
}
.lb-caption {
  margin: 0 auto 0.2rem;
  min-height: 1.35em;
  max-width: 34ch;
  font-size: clamp(1.15rem, 3.8vw, 1.45rem);
  color: rgba(255, 251, 254, 0.95);
  text-shadow: 0 2px 10px rgba(40, 28, 22, 0.35);
}
.lb-caption:empty { display: none; }
.lb-counter {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 251, 254, 0.72);
}

@media (max-width: 520px) {
  .lb-nav {
    width: 42px;
    height: 42px;
    font-size: 1.45rem;
  }
  .lb-frame { border-radius: 22px; padding: 0.4rem; width: min(94vw, 820px); }
  .lb-stage { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-slide { transition-duration: 0.01ms !important; }
  .lb-glow { animation: none; }
  .lightbox {
    transition-duration: 0.01ms !important;
    transform: none;
  }
}

/* Gallery / lightbox performance: freeze expensive ambient layers & under-paint */
body.gallery-active .soft-orb,
body.lightbox-open .soft-orb,
body.gallery-active .mandala-svg,
body.lightbox-open .mandala-svg {
  animation-play-state: paused !important;
}
/* Spinning ambient SVGs + blur orbs only need to run on open air screens.
   Elsewhere they compete with the custom cursor compositor every frame. */
body[data-screen]:not([data-screen="gate"]):not([data-screen="birthday"]) #ambient-bg svg,
body[data-screen]:not([data-screen="gate"]):not([data-screen="birthday"]) #ambient-bg [class*="animate-"],
body.lightbox-open #ambient-bg svg,
body.lightbox-open #ambient-bg [class*="animate-"],
body.is-celebrating #ambient-bg svg,
body.is-celebrating #ambient-bg [class*="animate-"] {
  animation-play-state: paused !important;
}
/* While fullscreen memory is open, freeze gallery interaction.
   Do NOT use content-visibility:hidden here — it collapses layout size to 0,
   clamps .screen scrollTop, and the gallery jumps to the top on close. */
body.lightbox-open .screen[data-screen="gallery"] {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
body.lightbox-open .photos-timeline,
body.lightbox-open .photos-header,
body.lightbox-open .cloud-progress-list,
body.lightbox-open .cloud-bulk-bar,
body.lightbox-open .cloud-dropzone {
  pointer-events: none;
}

/* ---- FX canvas (click hearts / confetti) — from nanha-gift ---- */
#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9500;
  contain: strict;
  transform: translateZ(0);
}

/* ---- Cute pastel photo loader (GPU-light, CSS-only overlay) ---- */
.photo-load-host {
  position: relative;
  display: block;
  overflow: hidden;
  contain: layout paint;
  background: #ffe8f1;
}
.photo-load-host > img.photo-pending {
  opacity: 0;
}
.photo-load-host > img.photo-ready {
  opacity: 1;
  transition: opacity 0.28s var(--ease-out);
}
.photo-load-host.is-ready {
  background: transparent;
  contain: none;
}

/* Pastel plate + soft pulse — only while .is-loading (no extra DOM) */
.photo-load-host.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(145deg, #ffe4ef, #ebe3ff 55%, #e0f7ef);
}
.photo-load-host.is-loading-anim::after {
  animation: photo-skel-pulse 1.4s ease-in-out infinite;
}
.photo-load-host.is-loading-anim::before {
  content: "♡";
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 3;
  pointer-events: none;
  font-size: clamp(0.85rem, 3vw, 1.15rem);
  line-height: 1;
  color: rgba(255, 143, 179, 0.9);
  transform: translate3d(-50%, -50%, 0);
  animation: photo-heart-float 1.6s ease-in-out infinite;
}

/* Baby photo fills its grid cell; polaroid-img sizes via its own aspect-ratio */
.baby-photo.photo-load-host {
  width: 100%;
  height: 100%;
}
.polaroid-img.photo-load-host {
  width: 100%;
  height: auto;
}
.baby-photo.photo-load-host > img,
.polaroid-img.photo-load-host > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.lb-slide.photo-load-host,
.cloud-preview-media.photo-load-host {
  min-height: 0;
}

@keyframes photo-heart-float {
  0%, 100% { transform: translate3d(-50%, -50%, 0) scale(1); opacity: 0.55; }
  50% { transform: translate3d(-50%, calc(-50% - 6px), 0) scale(1.08); opacity: 0.95; }
}
@keyframes photo-skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
  }
  .mandala-svg,
  .soft-orb,
  .bubble,
  .petal,
  .sparkle { animation: none !important; opacity: 0.15; }
  .nanha-sparkle,
  .nanha-sparkle-trail,
  #cursor-fx { animation: none !important; display: none; }
  .screen { filter: none !important; transform: none !important; }
  .photo-load-host.is-loading-anim::before,
  .photo-load-host.is-loading-anim::after {
    animation: none !important;
  }
  .photo-load-host > img.photo-ready {
    transition-duration: 0.12s !important;
  }
}

/* Landscape phone */
@media (orientation: landscape) and (max-height: 500px) {
  .screen { align-items: flex-start; padding-top: calc(2.5rem + var(--safe-t)); }
  .gate-octopus-mascot { top: -0.35rem; left: -0.25rem; }
}

/* ========================================
   App-wide responsive shell
   Keep every screen inside the viewport; heart stage stays aspect-locked.
   ======================================== */
html {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  width: 100%;
  max-width: 100vw;
}
#app {
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}
.screen {
  max-width: 100vw;
  padding-left: max(0.75rem, var(--safe-l));
  padding-right: max(0.75rem, var(--safe-r));
}
.screen-inner {
  width: min(520px, 100%);
  max-width: 100%;
}

/* Celebrate heart — tablet / phone density */
@media (max-width: 720px) {
  .screen[data-screen="gift"] .celebrate {
    --btn-reserve: 3.25rem;
    --heart-w: min(
      92vw,
      calc((100dvh - 1.25rem - var(--btn-reserve)) * var(--heart-ar)),
      28rem
    );
  }
  .screen[data-screen="gift"] .cats.cats-heart {
    --heart-cat-sz: clamp(30px, 9.2vmin, 58px);
  }
  .screen[data-screen="gift"] .yay .yay-line {
    font-size: clamp(0.95rem, 3.6vmin, 1.4rem);
    max-width: 11.5ch;
    line-height: 1.26;
  }
}
@media (max-width: 420px) {
  .screen[data-screen="gift"] .cats.cats-heart {
    --heart-cat-sz: clamp(28px, 9.8vmin, 48px);
  }
  .screen[data-screen="gift"] .yay #yay-next {
    font-size: clamp(0.78rem, 3.2vw, 0.92rem);
    padding: 0.65em 1em;
    top: calc(100% + 0.4rem);
  }
}

/* Short / landscape: shrink stage so heart + button fit without scroll */
@media (orientation: landscape) and (max-height: 560px) {
  .screen[data-screen="gift"] .celebrate {
    --btn-reserve: 2.75rem;
    --heart-w: min(
      58vw,
      calc((100dvh - 0.75rem - var(--btn-reserve)) * var(--heart-ar)),
      22rem
    );
  }
  .screen[data-screen="gift"] .cats.cats-heart {
    --heart-cat-sz: clamp(26px, 7.5vmin, 48px);
  }
  .screen[data-screen="gift"] .yay {
    padding: 0.25rem 10%;
  }
  .screen[data-screen="gift"] .yay .yay-line {
    font-size: clamp(0.85rem, 3.2vmin, 1.15rem);
    max-width: 11ch;
    line-height: 1.24;
  }
  .screen[data-screen="gift"] .yay #yay-next {
    top: calc(100% + 0.35rem);
    padding: 0.55em 1em;
  }
  .screen[data-screen="gift"] .celebrate {
    padding: max(6px, var(--safe-t)) max(8px, var(--safe-r))
      max(6px, var(--safe-b)) max(8px, var(--safe-l));
  }
}

/* Large desktop: keep heart from growing endlessly */
@media (min-width: 1200px) and (min-height: 800px) {
  .screen[data-screen="gift"] .celebrate {
    --heart-w: min(42vw, calc((100dvh - 3rem - var(--btn-reserve)) * var(--heart-ar)), 40rem);
  }
  .screen[data-screen="gift"] .cats.cats-heart {
    --heart-cat-sz: clamp(48px, 5.5vmin, 74px);
  }
}

/* =========================================================
   Mobile gate — pastel message instead of the main journey
   ========================================================= */
#mobile-gate {
  display: none;
}
html.is-mobile-gate #mobile-gate {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  padding: max(1.25rem, env(safe-area-inset-top, 0px))
    max(1.1rem, env(safe-area-inset-right, 0px))
    max(1.25rem, env(safe-area-inset-bottom, 0px))
    max(1.1rem, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(ellipse 80% 60% at 20% 15%, rgba(255, 214, 227, 0.85), transparent 55%),
    radial-gradient(ellipse 70% 55% at 85% 80%, rgba(227, 217, 255, 0.8), transparent 50%),
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(211, 245, 230, 0.55), transparent 60%),
    linear-gradient(165deg, #fff8fb 0%, #fcfbf9 45%, #fff5ef 100%);
  overflow: hidden;
  box-sizing: border-box;
}
html.is-mobile-gate #app,
html.is-mobile-gate #loader,
html.is-mobile-gate #chrome,
html.is-mobile-gate #cursor-trail,
html.is-mobile-gate #fx,
html.is-mobile-gate .app-credit,
html.is-mobile-gate #lightbox,
html.is-mobile-gate .octo-peek {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.is-mobile-gate body {
  overflow: hidden !important;
}
html.is-mobile-gate #ambient-bg {
  opacity: 0.35;
  z-index: 0;
}

.mobile-gate-card {
  position: relative;
  z-index: 2;
  width: min(100%, 22.5rem);
  max-height: min(92dvh, 36rem);
  padding: 1.65rem 1.35rem 1.55rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(255, 255, 255, 0.98);
  border-radius: 28px;
  box-shadow:
    0 18px 48px rgba(102, 70, 44, 0.1),
    0 4px 14px rgba(255, 158, 189, 0.12);
  animation: mobileGateCardIn 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
.mobile-gate-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 229, 217, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  font-family: "Caveat", "Dancing Script", cursive;
  font-size: 1.15rem;
  font-weight: 700;
  color: #66462c;
}
.mobile-gate-laptop {
  width: min(9.5rem, 42vw);
  height: auto;
  margin: 0.15rem auto 0.1rem;
  filter: drop-shadow(0 10px 18px rgba(255, 158, 189, 0.28));
  animation: mobileGateLaptopBob 3.2s ease-in-out infinite;
}
.mobile-gate-title {
  font-family: "Dancing Script", "Caveat", cursive;
  font-size: clamp(1.55rem, 6.2vw, 1.95rem);
  font-weight: 700;
  line-height: 1.25;
  color: #66462c;
  margin: 0;
}
.mobile-gate-copy {
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: clamp(0.95rem, 3.8vw, 1.08rem);
  font-weight: 600;
  line-height: 1.55;
  color: #8a5d3b;
  margin: 0;
}
.mobile-gate-hint {
  font-family: "Caveat", cursive;
  font-size: 1.2rem;
  color: #ff8ca3;
  margin: 0.15rem 0 0;
}

.mobile-gate-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.mobile-gate-heart {
  position: absolute;
  font-size: clamp(0.85rem, 3.5vw, 1.25rem);
  opacity: 0;
  animation: mobileGateHeartFloat 5.5s ease-in-out infinite;
  will-change: transform, opacity;
}
.mobile-gate-heart:nth-child(1) { left: 8%; bottom: 6%; animation-delay: 0s; font-size: 1.1rem; }
.mobile-gate-heart:nth-child(2) { left: 22%; bottom: 2%; animation-delay: 0.8s; }
.mobile-gate-heart:nth-child(3) { left: 48%; bottom: 4%; animation-delay: 1.5s; font-size: 1.35rem; }
.mobile-gate-heart:nth-child(4) { left: 70%; bottom: 1%; animation-delay: 2.2s; }
.mobile-gate-heart:nth-child(5) { left: 86%; bottom: 8%; animation-delay: 0.4s; }
.mobile-gate-heart:nth-child(6) { left: 14%; bottom: 12%; animation-delay: 2.8s; font-size: 0.9rem; }
.mobile-gate-heart:nth-child(7) { left: 60%; bottom: 10%; animation-delay: 3.4s; }
.mobile-gate-heart:nth-child(8) { left: 78%; bottom: 14%; animation-delay: 1.1s; font-size: 1rem; }

@keyframes mobileGateCardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mobileGateLaptopBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes mobileGateHeartFloat {
  0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.7) rotate(-8deg); }
  12% { opacity: 0.9; }
  55% { opacity: 0.85; transform: translate3d(8px, -48vh, 0) scale(1.05) rotate(10deg); }
  100% { opacity: 0; transform: translate3d(-6px, -92vh, 0) scale(0.85) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-gate-card,
  .mobile-gate-laptop,
  .mobile-gate-heart {
    animation: none !important;
  }
  .mobile-gate-heart {
    opacity: 0.55;
    bottom: auto !important;
    top: 12%;
  }
  .mobile-gate-heart:nth-child(odd) { top: 22%; }
  .mobile-gate-heart:nth-child(3n) { top: 78%; }
}