/* ==========================================================================
   Meiyen's Tale — styles
   All styling for the book. Sections in order (search "===== NAME ====="):

   Base (vars, reset, body) · BOOK · COVERS · TYPOGRAPHY · CONTENTS ·
   COUNTDOWN · DECREE · TIMELINE · PHOTOS · BUTTONS · GAME · WISH ·
   REASONS · LETTER · VOWS · TO BE CONTINUED · BACK COVER · AMBIENCE ·
   NUMBERS · WISHES · BIRTHDAY CELEBRATION · LIVING BOOK · REWARD WHEEL ·
   STORY ENTRANCES · SCRATCH CARD · FINISHING · INTERACTIVE EXTRAS ·
   SECRETS · NAV
   ========================================================================== */

:root {
  --paper: #fffdf9;
  --paper-edge: #efe3d6;
  --ink: #2e2228;
  --muted: #8c7480;
  --rose: #c94f7c;
  --rose-deep: #a93a63;
  --blush: #f6d9e2;
  --gold: #c9a227;
  --gold-soft: #e3cd8f;
  --line: #ebdce2;
  --cover1: #b2436f;
  --cover2: #8f3158;
  --desk1: #3e1f33;
  --desk2: #241019;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
button,
.candle,
.wseg,
#kissHeart,
.toc button,
.nav,
.photo,
.moment,
.seal {
  touch-action: manipulation;
}
html,
body {
  height: 100%;
}
body {
  font-family: "Inter", sans-serif;
  color: var(--ink);
  background: radial-gradient(
    120% 110% at 50% -5%,
    #5a2c45 0%,
    var(--desk1) 45%,
    var(--desk2) 100%
  );
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.serif {
  font-family: "Playfair Display", serif;
}
.script {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
}

.star {
  position: fixed;
  color: var(--gold-soft);
  pointer-events: none;
  z-index: 1;
  animation: twinkle ease-in-out infinite;
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.08;
    transform: scale(0.7);
  }
  50% {
    opacity: 0.5;
    transform: scale(1);
  }
}
.float-emoji {
  position: fixed;
  top: -50px;
  font-size: 20px;
  animation: fallDown linear forwards;
  pointer-events: none;
  z-index: 60;
  opacity: 0.8;
}
@keyframes fallDown {
  to {
    transform: translateY(110vh) rotate(280deg);
  }
}

/* ================= BOOK ================= */
#bookScene {
  perspective: 2400px;
  width: min(94vw, 560px);
  height: min(92dvh, 800px);
  position: relative;
  z-index: 2;
}
#book {
  position: relative;
  width: 100%;
  height: 100%;
  /* perspective here (not preserve-3d) — wheel scrolling breaks inside
     a preserve-3d subtree; pages are direct children so flips keep depth */
  perspective: 2400px;
}

.page {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-radius: 4px 14px 14px 4px;
  background: var(--paper);
  box-shadow: 0 30px 70px rgba(10, 2, 8, 0.6);
  display: none;
  flex-direction: column;
  overflow: hidden;
  backface-visibility: hidden;
}
.page.active {
  display: flex;
}

.page.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(46, 34, 40, 0.08) 0,
    rgba(46, 34, 40, 0.02) 16px,
    transparent 36px
  );
  border-radius: inherit;
}
.page.paper::after {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  right: 0;
  width: 6px;
  z-index: 0;
  background: repeating-linear-gradient(
    180deg,
    var(--paper-edge) 0 2px,
    #fff 2px 4px
  );
  border-radius: 0 14px 14px 0;
  pointer-events: none;
}
.frame {
  position: absolute;
  inset: 16px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.page-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 44px 34px 26px 42px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.page-inner::-webkit-scrollbar {
  width: 0;
}
.page.paper .page-inner {
  margin: 17px 17px 17px 17px;
  padding: 27px 17px 9px 25px;
  border-radius: 2px;
}
.page.paper .page-inner::after {
  content: "";
  display: block;
  flex-shrink: 0;
  height: 64px;
}
.page-inner > * {
  flex-shrink: 0;
}

/* flip */
@keyframes turnOut {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(-92deg);
  }
}
@keyframes turnIn {
  from {
    transform: rotateY(92deg);
  }
  to {
    transform: rotateY(0);
  }
}
@keyframes turnOutBack {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(92deg);
  }
}
@keyframes turnInBack {
  from {
    transform: rotateY(-92deg);
  }
  to {
    transform: rotateY(0);
  }
}
.page.turn-out {
  display: flex;
  transform-origin: left center;
  animation: turnOut 0.45s cubic-bezier(0.5, 0, 0.75, 0.35) forwards;
  z-index: 5;
}
.page.turn-in {
  display: flex;
  transform-origin: right center;
  animation: turnIn 0.45s cubic-bezier(0.25, 0.7, 0.35, 1) forwards;
  z-index: 4;
}
.page.turn-out-back {
  display: flex;
  transform-origin: right center;
  animation: turnOutBack 0.45s cubic-bezier(0.5, 0, 0.75, 0.35) forwards;
  z-index: 5;
}
.page.turn-in-back {
  display: flex;
  transform-origin: left center;
  animation: turnInBack 0.45s cubic-bezier(0.25, 0.7, 0.35, 1) forwards;
  z-index: 4;
}
@media (prefers-reduced-motion: reduce) {
  .star,
  .float-emoji {
    display: none;
  }
  .page.turn-out,
  .page.turn-in,
  .page.turn-out-back,
  .page.turn-in-back {
    animation: none;
  }
  * {
    animation: none !important;
  }
}

/* ================= COVERS ================= */
.cover,
.backcover {
  background:
    radial-gradient(
      130% 80% at 25% 0%,
      rgba(255, 255, 255, 0.08),
      transparent 50%
    ),
    linear-gradient(160deg, var(--cover1) 0%, var(--cover2) 100%);
  border-radius: 6px 14px 14px 6px;
}
.cover .spine,
.backcover .spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  z-index: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.05));
  border-radius: 6px 0 0 6px;
}
.cover .frame2,
.backcover .frame2 {
  position: absolute;
  inset: 18px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(227, 205, 143, 0.65);
  border-radius: 2px;
}
.cover .frame2::before,
.backcover .frame2::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(227, 205, 143, 0.3);
  border-radius: 1px;
}
/* gilded corner brackets */
.cover .frame2::after,
.backcover .frame2::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --gc: rgba(233, 212, 150, 0.92);
  --gl: 16px;
  background:
    linear-gradient(var(--gc), var(--gc)) top left / var(--gl) 1.5px no-repeat,
    linear-gradient(var(--gc), var(--gc)) top left / 1.5px var(--gl) no-repeat,
    linear-gradient(var(--gc), var(--gc)) top right / var(--gl) 1.5px no-repeat,
    linear-gradient(var(--gc), var(--gc)) top right / 1.5px var(--gl) no-repeat,
    linear-gradient(var(--gc), var(--gc)) bottom left / var(--gl) 1.5px
      no-repeat,
    linear-gradient(var(--gc), var(--gc)) bottom left / 1.5px var(--gl)
      no-repeat,
    linear-gradient(var(--gc), var(--gc)) bottom right / var(--gl) 1.5px
      no-repeat,
    linear-gradient(var(--gc), var(--gc)) bottom right / 1.5px var(--gl)
      no-repeat;
}
.cover .page-inner,
.backcover .page-inner {
  align-items: center;
  /* safe: when the content is taller than the page, fall back to
     flex-start. Plain "center" pushes the overflow out of BOTH ends, so
     the top escapes the gold frame and can never be scrolled back to. */
  justify-content: safe center;
  text-align: center;
  padding: 52px 36px;
}
.cover .eyebrow-c {
  color: var(--gold-soft);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: 0.64rem;
}
.cover .crown-mark {
  font-family: "Playfair Display", serif;
  color: var(--gold-soft);
  font-size: 1.5rem;
  margin: 26px 0 10px;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  cursor: default;
  user-select: none;
  text-shadow:
    0 0 20px rgba(227, 205, 143, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.3);
}
.cover h1 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(2rem, 7.5vw, 3rem);
  line-height: 1.18;
  margin: 4px 0 6px;
  background: linear-gradient(
    100deg,
    #f3e3c2 0%,
    #ffe9b8 30%,
    #fff8e2 50%,
    #e8c475 70%,
    #f3e3c2 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 220% auto;
  animation: foilShine 7s ease-in-out infinite;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.3));
}
.cover .script-sub {
  font-family: "Great Vibes", cursive;
  color: var(--blush);
  font-size: 1.9rem;
  margin-top: 4px;
}
.cover .rule-c {
  position: relative;
  width: 56px;
  height: 1px;
  background: var(--gold-soft);
  opacity: 0.6;
  margin: 26px auto;
}
.cover .rule-c::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--gold-soft);
  font-size: 0.46rem;
}
.cover .subtitle {
  color: #e8c9d6;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.open-btn {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: #f8ecd9;
  border: 1px solid rgba(227, 205, 143, 0.7);
  border-radius: 999px;
  padding: 15px 36px;
  cursor: pointer;
  margin-top: 36px;
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.15s;
}
.open-btn:hover {
  background: rgba(227, 205, 143, 0.92);
  color: var(--cover2);
  transform: translateY(-1px);
}
.open-btn:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 4px;
}
.cover .author {
  position: absolute;
  bottom: 34px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 44px;
  color: rgba(232, 201, 214, 0.75);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  z-index: 2;
}
.lock-line {
  color: rgba(232, 201, 214, 0.85);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-top: 18px;
  min-height: 1.4em;
}
.lock-line b {
  color: var(--gold-soft);
  font-weight: 600;
}
.open-btn.locked {
  opacity: 0.65;
  cursor: default;
}
.open-btn.locked:hover {
  background: transparent;
  color: #f8ecd9;
  transform: none;
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
.open-btn.deny {
  animation: shake 0.45s ease;
}

/* ================= TYPOGRAPHY ================= */
.chapter-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-size: 0.6rem;
  margin-bottom: 14px;
}
.chapter-label::before,
.chapter-label::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: 0.35;
}
.page h2 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(1.5rem, 5.4vw, 1.95rem);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 14px;
}
/* chapter ornament — a small gilt diamond under each title */
.page h2::after {
  content: "◆";
  display: block;
  text-align: center;
  color: var(--gold-soft);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  margin-top: 9px;
  opacity: 0.85;
}
.page .lede {
  font-family: "Great Vibes", cursive;
  font-size: 1.6rem;
  color: var(--rose);
  text-align: center;
  margin-bottom: 22px;
  line-height: 1.25;
}
.story-text {
  font-size: 0.94rem;
  line-height: 1.9;
  color: #4a3a43;
}
.story-text .dropcap {
  float: left;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 3.3rem;
  line-height: 0.85;
  color: var(--rose);
  padding-right: 10px;
  padding-top: 6px;
}
.turn-hint {
  margin-top: auto;
  padding-top: 22px;
  padding-bottom: 4px;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: #b9a3ae;
  font-size: 0.88rem;
}

/* ================= CONTENTS ================= */
.toc {
  margin-top: 4px;
}
.toc button {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  color: #4a3a43;
  padding: 14px 4px;
  transition: transform 0.15s;
}
.toc button:hover {
  transform: translateX(4px);
}
.toc button:hover .t-name {
  color: var(--rose);
}
.toc button:focus-visible {
  outline: 1px solid var(--rose);
}
.toc .t-num {
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: var(--gold);
  font-size: 0.82rem;
  min-width: 26px;
}
.toc .t-name {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.2s;
}
.toc .t-dots {
  flex: 1;
  border-bottom: 1px dotted #d9c3cd;
  transform: translateY(-4px);
}
.toc .t-pg {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ================= COUNTDOWN ================= */
.countdown {
  display: flex;
  justify-content: center;
  margin: 26px auto 0;
}
.cd {
  padding: 0 clamp(10px, 3.4vw, 22px);
  text-align: center;
  border-right: 1px solid var(--line);
}
.cd:last-child {
  border-right: none;
}
.cd .num {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--ink);
}
.cd .lbl {
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.alive-caption {
  margin-top: 24px;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.8;
}
.alive-sub {
  margin-top: 14px;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--rose);
}

/* ================= DECREE ================= */
.decree {
  position: relative;
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  padding: 30px 26px 72px;
  margin-top: 2px;
  background: #fffefb;
}
.decree::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-radius: 1px;
  pointer-events: none;
}
.decree .proclaim {
  font-family: "Great Vibes", cursive;
  font-size: 1.7rem;
  color: var(--gold);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 2px;
}
.decree .to-all {
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.titles {
  list-style: none;
}
.titles li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px dotted #e4d2be;
}
.titles li:last-child {
  border-bottom: none;
}
.titles .t-mark {
  color: var(--gold);
  font-size: 0.86rem;
  /* fixed box so titles align whatever the glyph width */
  flex: 0 0 auto;
  width: 15px;
  text-align: center;
}
.titles .t-title {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
}
.titles .t-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 2px;
}
.seal {
  position: absolute;
  bottom: 16px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #d8749b, #b84a76 60%, #97325a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #f6d9e2;
  box-shadow:
    0 3px 10px rgba(151, 50, 90, 0.3),
    inset 0 0 0 2px rgba(255, 255, 255, 0.22);
  transform: rotate(-8deg);
  animation: sealGlow 3.2s ease-in-out infinite;
}
@keyframes sealGlow {
  0%,
  100% {
    box-shadow:
      0 3px 10px rgba(151, 50, 90, 0.3),
      inset 0 0 0 2px rgba(255, 255, 255, 0.22);
  }
  50% {
    box-shadow:
      0 3px 16px rgba(201, 79, 124, 0.5),
      0 0 0 5px rgba(201, 79, 124, 0.12),
      inset 0 0 0 2px rgba(255, 255, 255, 0.3);
  }
}
.decree .signed {
  position: absolute;
  bottom: 26px;
  left: 26px;
  font-family: "Great Vibes", cursive;
  font-size: 1.35rem;
  color: var(--rose);
}

/* ================= TIMELINE ================= */
.timeline {
  position: relative;
  margin-top: 4px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.moment {
  position: relative;
  padding: 0 0 26px 34px;
}
.moment:last-child {
  padding-bottom: 0;
}
.moment::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--rose);
}
.moment .m-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 3px;
}
.moment .m-date {
  margin-left: 9px;
  padding-left: 9px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  letter-spacing: 0.18em;
}
.moment h3 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.moment p {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ================= PHOTOS ================= */
.photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 14px;
  margin: 8px 2px 0;
}
.photo {
  background: #fff;
  border: 1px solid var(--line);
  padding: 8px 8px 10px;
  margin: 0;
  box-shadow: 0 4px 14px rgba(46, 34, 40, 0.1);
  position: relative;
}
.photo::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 44px;
  height: 16px;
  background: rgba(246, 217, 226, 0.85);
  border-left: 1px solid rgba(201, 79, 124, 0.12);
  border-right: 1px solid rgba(201, 79, 124, 0.12);
  z-index: 1;
}
.photo.r1 {
  transform: rotate(-2deg);
}
.photo.r2 {
  transform: rotate(1.6deg);
}
.photo.r3 {
  transform: rotate(1.2deg);
}
.photo.r4 {
  transform: rotate(-1.4deg);
}
.photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: #f4e9ee;
}
.photo figcaption {
  font-family: "Great Vibes", cursive;
  font-size: 1.05rem;
  color: var(--rose);
  text-align: center;
  padding-top: 7px;
  line-height: 1.2;
}
.photo.empty img {
  display: none;
}
.photo.empty::after {
  content: "a photo of us, always ♥";
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  background: #faf1f4;
  border: 1px dashed #e0c6d1;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.78rem;
  color: #b9a3ae;
  text-align: center;
  padding: 10px;
}

/* ================= BUTTONS ================= */
.btn {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--rose);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  cursor: pointer;
  margin-top: 18px;
  transition:
    background 0.2s,
    transform 0.15s;
}
.btn:hover {
  background: var(--rose-deep);
  transform: translateY(-1px);
}
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.btn.ghost {
  background: transparent;
  color: var(--rose);
  border: 1px solid var(--rose);
}
.btn.ghost:hover {
  background: var(--rose);
  color: #fff;
}

/* ================= GAME ================= */
.game-page .page-inner {
  padding-bottom: 60px;
}
#gameHud {
  display: flex;
  justify-content: space-between;
  margin: 0 0 12px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
#gameHud b {
  color: var(--ink);
  font-weight: 600;
}
#gameArea {
  position: relative;
  flex: 1;
  min-height: 280px;
  background: #fff6f0;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  touch-action: none;
}
#basket {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 42px;
  user-select: none;
  pointer-events: none;
}
.drop {
  position: absolute;
  top: -50px;
  font-size: 27px;
  user-select: none;
  pointer-events: none;
}
#gameOverlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 253, 249, 0.97);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
  z-index: 5;
}
#gameOverlay h3 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 8px;
}
#gameOverlay p {
  color: var(--muted);
  font-size: 0.84rem;
  max-width: 340px;
}
.game-hint {
  margin-top: 10px;
  text-align: center;
  font-size: 0.66rem;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ================= WISH ================= */
.center {
  text-align: center;
}
.candles {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 2px;
  min-height: 52px;
  max-width: 290px;
  margin: 0 auto 4px;
  word-break: break-all;
}
#candleLeft {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.cake {
  font-size: 70px;
  transition: transform 0.3s;
  display: inline-block;
}
.cake.blown {
  transform: scale(1.08);
}
#wishMsg {
  margin-top: 16px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: var(--rose);
  font-size: 0.95rem;
  min-height: 1.6em;
}

/* ================= REASONS ================= */
.reason-stage {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 36px 24px;
  background: #fffefb;
  margin-top: 2px;
}
.reason-stage .big-num {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  min-height: 1.4em;
  margin-bottom: 14px;
}
#reasonText {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink);
  min-height: 3.4em;
}
.dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 22px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.3s;
}
.dots i.on {
  background: var(--rose);
}

/* ================= LETTER ================= */
.letter-text {
  font-size: 0.92rem;
  line-height: 1.95;
  color: #4a3a43;
}
.letter-text .salutation {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
}
.letter-text p {
  margin-bottom: 1.1em;
}
.letter-text .sign {
  font-family: "Great Vibes", cursive;
  color: var(--rose);
  font-size: 1.9rem;
  text-align: right;
  margin-top: 8px;
  margin-bottom: 0;
}

/* ================= TO BE CONTINUED ================= */
.ghost-title {
  opacity: 0.45;
}
.unwritten {
  margin-top: 8px;
  text-align: center;
}
.unwritten-note {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 10px;
}
.unwritten-sub {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: 380px;
  margin: 0 auto;
}
.unwritten-sub b {
  color: var(--rose);
  font-weight: 600;
}
.ink-lines {
  margin: 30px auto 0;
  max-width: 360px;
  height: 150px;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 29px,
    var(--line) 29px 30px
  );
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
  mask-image: linear-gradient(180deg, #000 40%, transparent);
}

/* ================= BACK COVER ================= */
.backcover .script-line {
  font-family: "Great Vibes", cursive;
  font-size: clamp(2rem, 7vw, 2.7rem);
  color: var(--blush);
  line-height: 1.3;
}
.backcover p {
  color: rgba(232, 201, 214, 0.85);
  font-size: 0.88rem;
  max-width: 360px;
  margin-top: 16px;
  line-height: 1.75;
}
#kissHeart {
  font-size: 52px;
  border: none;
  background: none;
  cursor: pointer;
  margin-top: 34px;
  animation: beat 2.4s ease-in-out infinite;
  user-select: none;
  filter: drop-shadow(0 4px 12px rgba(201, 79, 124, 0.4));
}
#kissHeart:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 6px;
  border-radius: 14px;
}
@keyframes beat {
  0%,
  100% {
    transform: scale(1);
  }
  12% {
    transform: scale(1.1);
  }
  24% {
    transform: scale(1);
  }
}
.backcover .tap-hint {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(232, 201, 214, 0.6);
  margin-top: 10px;
}
.replay-btn {
  margin-top: 30px;
  background: transparent;
  color: #f8ecd9;
  border: 1px solid rgba(227, 205, 143, 0.7);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 32px;
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s;
}
.replay-btn:hover {
  background: rgba(227, 205, 143, 0.92);
  color: var(--cover2);
}

/* ================= AMBIENCE ================= */
body::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(120vw, 900px);
  height: min(110vh, 900px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 79, 124, 0.16),
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}
.shooting {
  position: fixed;
  top: 0;
  left: 0;
  width: 120px;
  height: 1.5px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(227, 205, 143, 0.9), transparent);
  transform-origin: left center;
  animation: shoot 1.6s ease-out forwards;
}
@keyframes shoot {
  from {
    opacity: 0;
    transform: translate(0, 0) rotate(24deg) scaleX(0.3);
  }
  15% {
    opacity: 0.9;
  }
  to {
    opacity: 0;
    transform: translate(46vw, 34vh) rotate(24deg) scaleX(1);
  }
}
.candles {
  animation: flick 2.6s ease-in-out infinite;
}
@keyframes flick {
  0%,
  100% {
    opacity: 1;
  }
  45% {
    opacity: 0.82;
  }
  55% {
    opacity: 0.95;
  }
  70% {
    opacity: 0.85;
  }
}
#musicBtn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 70;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(227, 205, 143, 0.5);
  cursor: pointer;
  background: rgba(36, 16, 25, 0.55);
  backdrop-filter: blur(6px);
  color: rgba(227, 205, 143, 0.6);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.25s,
    transform 0.15s;
}
#musicBtn:hover {
  transform: scale(1.08);
}
#musicBtn.on {
  color: var(--gold-soft);
  border-color: rgba(227, 205, 143, 0.9);
}
#musicBtn:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

/* ================= NUMBERS ================= */
.numgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.numcard {
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 16px 12px;
  text-align: center;
}
.n-big {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--rose);
  line-height: 1.2;
}
.n-cap {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.5;
}

/* ================= WISHES ================= */
.wishes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.wishcard {
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 18px 20px 14px;
  position: relative;
}
.wishcard::before {
  content: "❝";
  position: absolute;
  top: 8px;
  left: 12px;
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  color: var(--blush);
}
.wishcard p {
  font-size: 0.88rem;
  line-height: 1.75;
  color: #4a3a43;
  padding-left: 18px;
}
.wish-from {
  font-family: "Great Vibes", cursive;
  color: var(--rose);
  font-size: 1.25rem;
  text-align: right;
  margin-top: 8px;
}

/* ================= BIRTHDAY CELEBRATION ================= */
#celebrate {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(36, 16, 25, 0.82);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.8s ease,
    visibility 0.8s;
  cursor: pointer;
  padding: 30px;
}
#celebrate.show {
  opacity: 1;
  visibility: visible;
}
#celebrate .c-eyebrow {
  color: var(--gold-soft);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: 0.68rem;
  margin-bottom: 16px;
}
#celebrate h2 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(2rem, 8vw, 3.4rem);
  line-height: 1.15;
  background: linear-gradient(
    100deg,
    #f3e3c2 0%,
    #ffe9b8 30%,
    #fff8e2 50%,
    #e8c475 70%,
    #f3e3c2 100%
  );
  background-size: 220% 100%;
  animation: foilShine 4s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#celebrate .c-name {
  font-family: "Great Vibes", cursive;
  color: var(--blush);
  font-size: clamp(2.6rem, 10vw, 4rem);
  margin-top: 6px;
  line-height: 1.1;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
#celebrate .c-hint {
  margin-top: 34px;
  color: rgba(232, 201, 214, 0.6);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.balloon {
  position: fixed;
  bottom: -90px;
  z-index: 86;
  font-size: 46px;
  cursor: pointer;
  user-select: none;
  animation: riseSway linear forwards;
}
@keyframes riseSway {
  0% {
    transform: translateY(0) rotate(-4deg);
  }
  25% {
    transform: translateY(-30vh) translateX(14px) rotate(4deg);
  }
  50% {
    transform: translateY(-60vh) translateX(-12px) rotate(-4deg);
  }
  75% {
    transform: translateY(-90vh) translateX(10px) rotate(3deg);
  }
  100% {
    transform: translateY(-125vh) rotate(0deg);
  }
}
.balloon.popped {
  animation: pop 0.35s ease forwards;
}
@keyframes pop {
  40% {
    transform: scale(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* ================= LIVING BOOK ================= */
#bookScene {
  animation: bookBob 5s ease-in-out infinite;
}
@keyframes bookBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.cover h1 {
  background-size: 220% 100%;
  animation: foilShine 6s ease-in-out infinite;
}
@keyframes foilShine {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.candle {
  animation: candleSway 2.4s ease-in-out infinite;
}
.candle:nth-child(3n) {
  animation-delay: 0.4s;
}
.candle:nth-child(3n + 1) {
  animation-delay: 0.9s;
}
.candle:nth-child(5n) {
  animation-duration: 2.9s;
}
@keyframes candleSway {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2.5deg);
  }
}
.candle:hover {
  transform: scale(1.2) translateY(-2px);
  animation: none;
}

/* ================= REWARD WHEEL ================= */
.wheel-wrap {
  position: relative;
  width: 230px;
  height: 230px;
  margin: 6px auto 0;
}
.wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid var(--rose);
  filter: drop-shadow(0 2px 3px rgba(46, 34, 40, 0.25));
}
.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  border: 2px solid var(--gold-soft);
  box-shadow:
    0 8px 24px rgba(46, 34, 40, 0.15),
    inset 0 0 0 6px #fff;
  background: conic-gradient(
    #fdeff4 0 60deg,
    #fff9ee 60deg 120deg,
    #fdeff4 120deg 180deg,
    #fff9ee 180deg 240deg,
    #fdeff4 240deg 300deg,
    #fff9ee 300deg 360deg
  );
  transition: transform 4.2s cubic-bezier(0.12, 0.85, 0.2, 1);
}
.wseg {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 24px;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-78px)
    rotate(calc(var(--a) * -1));
  user-select: none;
}
#wheelResult {
  margin-top: 14px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: var(--rose);
  font-size: 1rem;
  min-height: 1.6em;
  line-height: 1.5;
}
.wheel-note {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.trail {
  position: fixed;
  z-index: 65;
  pointer-events: none;
  color: var(--gold-soft);
  animation: trailFade 0.7s ease-out forwards;
  font-size: 11px;
}
@keyframes trailFade {
  from {
    opacity: 0.9;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-14px) scale(0.5);
  }
}

/* ================= STORY ENTRANCES ================= */
.page.active .page-inner > *,
.page.turn-in .page-inner > *,
.page.turn-in-back .page-inner > * {
  animation: riseIn 0.55s ease both;
}
.page.active .page-inner > *:nth-child(1),
.page.turn-in .page-inner > *:nth-child(1),
.page.turn-in-back .page-inner > *:nth-child(1) {
  animation-delay: 0.3s;
}
.page.active .page-inner > *:nth-child(2),
.page.turn-in .page-inner > *:nth-child(2),
.page.turn-in-back .page-inner > *:nth-child(2) {
  animation-delay: 0.4s;
}
.page.active .page-inner > *:nth-child(3),
.page.turn-in .page-inner > *:nth-child(3),
.page.turn-in-back .page-inner > *:nth-child(3) {
  animation-delay: 0.5s;
}
.page.active .page-inner > *:nth-child(4),
.page.turn-in .page-inner > *:nth-child(4),
.page.turn-in-back .page-inner > *:nth-child(4) {
  animation-delay: 0.6s;
}
.page.active .page-inner > *:nth-child(5),
.page.turn-in .page-inner > *:nth-child(5),
.page.turn-in-back .page-inner > *:nth-child(5) {
  animation-delay: 0.7s;
}
.page.active .page-inner > *:nth-child(6),
.page.turn-in .page-inner > *:nth-child(6),
.page.turn-in-back .page-inner > *:nth-child(6) {
  animation-delay: 0.8s;
}
.page.active .page-inner > *:nth-child(7),
.page.turn-in .page-inner > *:nth-child(7),
.page.turn-in-back .page-inner > *:nth-child(7) {
  animation-delay: 0.9s;
}
.page.active .page-inner > *:nth-child(8),
.page.turn-in .page-inner > *:nth-child(8),
.page.turn-in-back .page-inner > *:nth-child(8) {
  animation-delay: 1s;
}
.page.active .page-inner > *:nth-child(9),
.page.turn-in .page-inner > *:nth-child(9),
.page.turn-in-back .page-inner > *:nth-child(9) {
  animation-delay: 1.1s;
}
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.page-inner > .after-type {
  animation: none !important;
  opacity: 0;
  transition: opacity 0.9s ease 0.2s;
}
.page-inner > .after-type.show {
  opacity: 1;
}
#gateToast {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  background: rgba(36, 16, 25, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(227, 205, 143, 0.45);
  border-radius: 999px;
  color: var(--gold-soft);
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.82rem;
  padding: 10px 22px;
  white-space: nowrap;
  max-width: 92%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
#gateToast.show {
  opacity: 1;
}
.nav.deny {
  animation: shake 0.45s ease;
}
.nav.pulse {
  animation: navPulse 0.9s ease-in-out 3;
}
@keyframes navPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(227, 205, 143, 0.4);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px rgba(227, 205, 143, 0);
  }
}

/* ================= FINISHING ================= */
body {
  animation: sceneIn 1.2s ease both;
}
@keyframes sceneIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.writeback {
  margin-top: 26px;
  width: 100%;
  max-width: 340px;
}
.wb-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(232, 201, 214, 0.7);
  margin-bottom: 10px;
}
#wbText {
  width: 100%;
  resize: none;
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 253, 249, 0.08);
  border: 1px solid rgba(227, 205, 143, 0.4);
  color: #f8ecd9;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  outline: none;
  transition: border-color 0.2s;
}
@media (pointer: fine) {
  #wbText {
    font-size: 0.88rem;
  }
}
#wbText::placeholder {
  color: rgba(232, 201, 214, 0.45);
  font-style: italic;
}
#wbText:focus {
  border-color: rgba(227, 205, 143, 0.9);
}
#wbSend {
  margin-top: 12px;
}
#relightBtn {
  display: none;
}

/* ================= INTERACTIVE EXTRAS ================= */
#book {
  transition: transform 0.25s ease-out;
}
.candle {
  cursor: pointer;
  display: inline-block;
  transition: transform 0.15s;
}
.candle:hover {
  transform: scale(1.2) translateY(-2px);
}
.photo img {
  cursor: zoom-in;
}
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  background: rgba(20, 6, 14, 0.9);
  backdrop-filter: blur(8px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  cursor: zoom-out;
}
#lightbox.open {
  display: flex;
}
#lightbox img {
  max-width: min(92vw, 560px);
  max-height: 74vh;
  object-fit: contain;
  background: #fff;
  padding: 10px 10px 12px;
  border: 1px solid rgba(227, 205, 143, 0.4);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
#lightbox p {
  font-family: "Great Vibes", cursive;
  color: var(--blush);
  font-size: 1.6rem;
  margin-top: 16px;
}

/* ================= SECRETS ================= */
.secret-note {
  display: none;
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: var(--rose);
  font-size: 0.9rem;
  margin-top: 12px;
  text-align: center;
  line-height: 1.6;
}
.secret-note.show {
  display: block;
  animation: noteIn 0.6s ease;
}
/* one gold pulse on a freshly revealed secret */
.just-found {
  border-radius: 10px;
  animation: justFound 1.6s ease-out 1;
}
@keyframes justFound {
  0% {
    box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
    background: rgba(201, 162, 39, 0);
  }
  22% {
    box-shadow: 0 0 0 7px rgba(201, 162, 39, 0.2);
    background: rgba(201, 162, 39, 0.11);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
    background: rgba(201, 162, 39, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .just-found {
    animation: none;
  }
}
@keyframes noteIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hunt-hint {
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: -8px 0 16px;
  opacity: 0.9;
}
/* per-page treasure-hunt clue (points at that page's hidden secret) */
.clue {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--gold);
  opacity: 0.82;
  margin: 6px 0 4px;
}
.hidden-li {
  display: none !important;
}
.hidden-li.show {
  display: flex !important;
  animation: noteIn 0.6s ease;
}
.moment.hidden-li.show {
  display: block !important;
}
.tiny-hint {
  font-size: 0.68rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}
.secret-count {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232, 201, 214, 0.65);
  margin-top: 20px;
}
/* the reward sentence, not part of the tally */
.secret-count .all-found {
  display: block;
  margin-top: 5px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--blush);
}
/* these are labels, not handles — stop taps near the heart selecting them */
.tap-hint,
.secret-count,
.wb-label {
  user-select: none;
  -webkit-user-select: none;
}
.backcover .secret-note {
  color: var(--blush);
}

/* Phone screens: the back cover carries the most content of any page and
   spills past the frame at stock phone heights. Tighten its rhythm, and
   stop the pill buttons from being wider than the page. */
@media (max-height: 820px), (max-width: 430px) {
  .cover .page-inner,
  .backcover .page-inner {
    padding: 34px 24px;
  }
  .cover .crown-mark {
    margin: 12px 0 6px;
  }
  .cover .rule-c {
    margin: 16px auto;
  }
  /* absolute positioning let this sit straight on the frame line (the
     frame is inset 18px). In flow it can't overlap the border or the
     content above it. */
  .cover .author {
    position: static;
    /* clear the frame's 18px inset, plus breathing room */
    padding: 0 24px 32px;
    margin-top: 14px;
  }
  .backcover p {
    margin-top: 11px;
  }
  #kissHeart {
    font-size: 42px;
    margin-top: 16px;
  }
  .backcover .tap-hint {
    margin-top: 7px;
  }
  .secret-count {
    margin-top: 12px;
  }
  .writeback {
    margin-top: 15px;
  }
  #wbText {
    padding: 9px 12px;
  }
  .replay-btn,
  .open-btn {
    margin-top: 15px;
  }
}
/* short phones (SE-class): squeeze harder so it scrolls as little as possible */
@media (max-height: 700px) {
  .backcover .script-line {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  #kissHeart {
    font-size: 34px;
    margin-top: 10px;
  }
  #wbText {
    height: 56px;
  }
  .secret-count,
  .writeback {
    margin-top: 9px;
  }
  /* wide tracking is what makes these wrap to three and four lines */
  .backcover .tap-hint,
  .secret-count,
  .wb-label {
    letter-spacing: 0.12em;
  }
  .secret-count .all-found {
    font-size: 0.76rem;
  }
  .replay-btn,
  .open-btn {
    padding-top: 11px;
    padding-bottom: 11px;
    margin-top: 11px;
  }
}
/* SE-1 class (320x568): the back cover needs ~100px more than it has.
   Take it from the places that cost least — leading, padding, the box. */
@media (max-height: 620px) {
  .cover .page-inner,
  .backcover .page-inner {
    padding: 20px 20px;
  }
  .backcover .script-line {
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .backcover p {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-top: 9px;
  }
  #kissHeart {
    font-size: 28px;
    margin-top: 8px;
  }
  #wbText {
    height: 44px;
  }
  .secret-count .all-found {
    font-size: 0.72rem;
  }
  .replay-btn,
  .open-btn {
    padding-top: 9px;
    padding-bottom: 9px;
    margin-top: 9px;
  }
}
/* the pill labels are long; let them shrink instead of clipping */
.replay-btn,
.open-btn {
  max-width: 100%;
  padding: 14px clamp(18px, 6vw, 32px);
  letter-spacing: clamp(0.1em, 0.5vw, 0.18em);
}

/* ================= NAV ================= */
.page-num {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 4;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.6rem;
  line-height: 11px;
  letter-spacing: 0.08em;
  color: #b39ba6;
  pointer-events: none;
}
.nav {
  position: absolute;
  bottom: 10px;
  z-index: 6;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(227, 205, 143, 0.5);
  cursor: pointer;
  background: rgba(36, 16, 25, 0.55);
  backdrop-filter: blur(6px);
  color: var(--gold-soft);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.15s,
    opacity 0.3s,
    background 0.2s;
}
.nav:hover {
  transform: scale(1.08);
  background: rgba(36, 16, 25, 0.8);
}
.nav:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}
#prevBtn {
  left: -14px;
}
#nextBtn {
  right: -14px;
}
@media (max-width: 640px) {
  #prevBtn {
    left: 6px;
  }
  #nextBtn {
    right: 6px;
  }
}
.nav[disabled] {
  opacity: 0;
  pointer-events: none;
}