:root {
  --gold: #96C3EB; --gold-light: #b8d8f8;
  --paper: #fdf6f8; --paper-dark: #f5e8ee; --paper-edge: #f0dde5;
  --text-dark: #1a1a1a; --text-brown: #333333; --text-muted: #555555;
  --rose: #FFB6C1; --burgundy: #EB96EB; --heart: #FFB6C1;
  --pw: 440px; --ph: 640px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: 'Lora', serif; color: var(--text-dark);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #1a1030 0%, #000 70%);
}

/* ========== FLOATING HEARTS ========== */
.floating-heart {
  position: fixed; pointer-events: none; z-index: 99; opacity: 0;
  animation: floatUp 7s ease-in infinite; color: var(--heart);
}
@keyframes floatUp {
  0% { opacity:0; transform:translateY(0) scale(.5) rotate(0deg); }
  10% { opacity:.7; } 80% { opacity:.2; }
  100% { opacity:0; transform:translateY(-100vh) scale(1) rotate(30deg); }
}

/* ========== COVER — 3D CLOSED BOOK ========== */
#cover-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1s ease, visibility 1s ease;
}
#cover-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.closed-book {
  position: relative; width: 370px; padding: 50px 40px 50px 50px;
  text-align: center;
  background:
    radial-gradient(ellipse at 30% 35%, rgba(235,150,235,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 65%, rgba(150,195,235,0.1) 0%, transparent 60%),
    linear-gradient(180deg, #1a1030 0%, #0d0d1a 50%, #000 100%);
  border: 2px solid var(--gold); border-left: none;
  border-radius: 2px 8px 8px 2px;
  box-shadow: 8px 10px 35px rgba(0,0,0,0.6), 0 0 40px rgba(150,195,235,0.1);
  animation: coverGlow 3s ease-in-out infinite alternate;
}
@keyframes coverGlow {
  from { box-shadow: 8px 10px 35px rgba(0,0,0,0.6), 0 0 40px rgba(150,195,235,0.1); }
  to { box-shadow: 8px 10px 35px rgba(0,0,0,0.6), 0 0 60px rgba(235,150,235,0.2); }
}
.closed-book::before {
  content: ''; position: absolute; left: -18px; top: -2px;
  width: 18px; height: calc(100% + 4px);
  background: linear-gradient(90deg, #1a0a20 0%, #2d1540 40%, #3a1a55 60%, #2d1540 100%);
  border-radius: 4px 0 0 4px; box-shadow: -3px 2px 8px rgba(0,0,0,0.4);
}
.closed-book::after {
  content: ''; position: absolute; top: 6px; right: -8px;
  width: 8px; height: calc(100% - 12px);
  background: repeating-linear-gradient(to bottom, var(--paper) 0px, var(--paper-edge) 1.5px, var(--paper) 3px);
  border-radius: 0 3px 3px 0; box-shadow: 3px 2px 6px rgba(0,0,0,0.3);
}
.book-bottom-edge {
  position: absolute; bottom: -8px; left: 6px;
  width: calc(100% - 12px); height: 8px;
  background: repeating-linear-gradient(to right, var(--paper) 0px, var(--paper-edge) 1.5px, var(--paper) 3px);
  border-radius: 0 0 3px 3px; box-shadow: 2px 4px 6px rgba(0,0,0,0.3);
}
.cover-ornament { font-family: 'Great Vibes', cursive; font-size: 2rem; color: var(--gold); opacity: .6; letter-spacing: 8px; }
.cover-title { font-family: 'Great Vibes', cursive; font-size: 2.6rem; color: var(--gold-light); margin: 12px 0 5px; text-shadow: 0 2px 8px rgba(150,195,235,0.4); }
.cover-divider { color: var(--gold); font-size: 1.4rem; margin: 4px 0; opacity: .7; }
.cover-subtitle { font-family: 'Playfair Display', serif; font-size: .95rem; color: var(--gold); letter-spacing: 2px; margin-bottom: 20px; font-style: italic; }
.lock-icon { font-size: 2.2rem; margin-bottom: 8px; animation: lockPulse 2.5s ease-in-out infinite; display: inline-block; }
@keyframes lockPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.lock-label { font-family: 'Caveat', cursive; font-size: .95rem; color: rgba(255,255,255,0.55); margin-bottom: 10px; }
#date-input {
  width: 200px; padding: 12px 16px; text-align: center;
  font-family: 'Lora', serif; font-size: 1.2rem; letter-spacing: 4px;
  background: rgba(0,0,0,0.5); border: 1.5px solid var(--gold);
  border-radius: 6px; color: var(--gold-light); outline: none;
  transition: border-color .3s, box-shadow .3s;
  -webkit-appearance: none;
  appearance: none;
}
#date-input:focus { border-color: var(--gold-light); box-shadow: 0 0 15px rgba(150,195,235,0.25); }
#date-input::placeholder { color: rgba(150,195,235,0.3); }
#unlock-btn {
  display: block; width: 100%; margin-top: 14px; padding: 11px;
  font-family: 'Playfair Display', serif; font-size: .9rem;
  background: linear-gradient(135deg, #FFB6C1, #EB96EB);
  color: #000; border: none; border-radius: 4px; cursor: pointer;
  letter-spacing: 1px; transition: transform .2s, box-shadow .3s;
}
#unlock-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,182,193,0.4); }
.error-msg { color: #ff8a9e; font-family: 'Caveat', cursive; font-size: .95rem; margin-top: 8px; min-height: 1.2em; }
.shake { animation: shake .5s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }


/* ========== SINGLE-PAGE OPEN BOOK ========== */
#book-container {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
#book-container.hidden { display: none; }

.book-wrapper {
  perspective: 1800px;
  perspective-origin: 50% 50%;
  transform-origin: center center;
}

.book {
  position: relative;
  width: var(--pw);
  height: var(--ph);
  transform-style: preserve-3d;
}

/* ========== LEFT SIDE — FLIPPED PAGES STACK ========== */
/* This creates the visible left side showing flipped pages curled behind */
.flipped-pages-stack {
  position: absolute;
  right: 100%;
  top: 0;
  width: 0;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The curled left-side page surface */
.left-page-curl {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(to right,
      rgba(253,246,248,0.3) 0%,
      rgba(253,246,248,0.55) 15%,
      rgba(253,246,248,0.7) 30%,
      rgba(253,246,248,0.82) 50%,
      rgba(245,232,238,0.9) 70%,
      rgba(240,221,229,0.95) 85%,
      var(--paper-edge) 100%);
  border-radius: 6px 0 0 6px;
  overflow: hidden;
  box-shadow:
    inset -4px 0 12px rgba(0,0,0,0.08),
    inset -1px 0 3px rgba(0,0,0,0.05),
    -3px 2px 8px rgba(0,0,0,0.15);
}

/* Curl highlight — makes the left edge feel rounded/curled */
.left-page-curl::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    linear-gradient(to right,
      rgba(255,255,255,0.15) 0%,
      rgba(255,255,255,0.08) 20%,
      transparent 50%),
    linear-gradient(to right,
      transparent 85%,
      rgba(0,0,0,0.06) 95%,
      rgba(0,0,0,0.1) 100%);
  pointer-events: none;
}

/* Subtle page lines on the left curl for realism */
.left-page-curl::after {
  content: '';
  position: absolute;
  top: 3px; right: 0;
  width: 2px; height: calc(100% - 6px);
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.04) 10%,
    rgba(0,0,0,0.06) 50%,
    rgba(0,0,0,0.04) 90%,
    transparent 100%);
  pointer-events: none;
}

/* Left page edges (visible page stack on the left side) */
.left-page-edges {
  position: absolute;
  left: -3px;
  top: 3px;
  width: 0;
  height: calc(100% - 6px);
  background: linear-gradient(to left,
    var(--paper-edge) 0px, var(--paper) 1px, var(--paper-edge) 2px,
    var(--paper) 3px, var(--paper-dark) 4px, var(--paper) 5px,
    var(--paper-edge) 6px);
  border-radius: 3px 0 0 3px;
  box-shadow: -2px 2px 6px rgba(0,0,0,0.15);
  z-index: 6;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Spine edge on the left */
.book-spine-edge {
  position: absolute; left: -10px; top: -2px;
  width: 10px; height: calc(100% + 4px);
  background: linear-gradient(90deg, #1a0a20 0%, #2d1540 30%, #3a1a55 60%, #2d1540 100%);
  border-radius: 4px 0 0 4px;
  box-shadow: -3px 2px 8px rgba(0,0,0,0.4);
  z-index: 51;
}

/* Page stack on right edge */
.page-edges-right {
  position: absolute; right: -4px; top: 3px;
  width: 8px; height: calc(100% - 6px);
  background: linear-gradient(to right,
    var(--paper-edge) 0px, var(--paper) 1px, var(--paper-edge) 2px,
    var(--paper) 3px, var(--paper-dark) 4px, var(--paper) 5px,
    var(--paper-edge) 6px, var(--paper-dark) 8px);
  border-radius: 0 3px 3px 0;
  box-shadow: 3px 2px 8px rgba(0,0,0,0.2);
  z-index: 2; transition: width 0.5s ease;
}

/* Bottom page edges */
.page-edges-bottom {
  position: absolute; bottom: -7px; left: 0;
  width: 100%; height: 8px;
  background: repeating-linear-gradient(to right, var(--paper) 0px, var(--paper-edge) 1.5px, var(--paper) 3px);
  border-radius: 0 0 4px 4px;
  box-shadow: 2px 5px 10px rgba(0,0,0,0.3);
  z-index: 1;
  transition: margin-left 0.6s cubic-bezier(0.4, 0, 0.2, 1), width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Floor shadow */
.book::after {
  content: ''; position: absolute; bottom: -22px; left: -5%; width: 110%; height: 30px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 70%);
  filter: blur(10px); z-index: -1;
  transition: left 0.6s ease, width 0.6s ease;
}


/* ========== PAGES CLIP & AREA ========== */
.pages-clip {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: hidden;
  z-index: 10;
}
.pages-area {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transform-style: preserve-3d;
  perspective: 1200px;
}

/* ========== EACH PAGE (LEAF) ========== */
.page {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: none;
}
.page.flipped {
  transform: rotateY(-180deg);
  pointer-events: none;
}
/* Hide flipped pages so they don't show on the left */
.page.flipped-done { visibility: hidden; }

/* ===== SMOOTH CURL FLIP ANIMATIONS ===== */
.page.curl-left {
  animation: curlFlipLeft 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.page.curl-right {
  animation: curlFlipRight 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes curlFlipLeft {
  0%   {
    transform: rotateY(0deg);
    filter: drop-shadow(0 0 0 transparent);
  }
  10%  {
    transform: rotateY(-8deg) translateZ(4px);
    filter: drop-shadow(-2px 4px 6px rgba(0,0,0,0.15));
  }
  25%  {
    transform: rotateY(-35deg) translateZ(12px) scaleX(0.97);
    filter: drop-shadow(-6px 8px 16px rgba(0,0,0,0.3));
  }
  45%  {
    transform: rotateY(-80deg) translateZ(22px) scaleX(0.95);
    filter: drop-shadow(-12px 12px 28px rgba(0,0,0,0.45));
  }
  65%  {
    transform: rotateY(-125deg) translateZ(18px) scaleX(0.96);
    filter: drop-shadow(-10px 10px 22px rgba(0,0,0,0.35));
  }
  80%  {
    transform: rotateY(-160deg) translateZ(8px) scaleX(0.98);
    filter: drop-shadow(-4px 6px 10px rgba(0,0,0,0.18));
  }
  92%  {
    transform: rotateY(-175deg) translateZ(2px);
    filter: drop-shadow(-1px 2px 4px rgba(0,0,0,0.08));
  }
  100% {
    transform: rotateY(-180deg) translateZ(0);
    filter: drop-shadow(0 0 0 transparent);
  }
}

@keyframes curlFlipRight {
  0%   {
    transform: rotateY(-180deg);
    filter: drop-shadow(0 0 0 transparent);
  }
  10%  {
    transform: rotateY(-172deg) translateZ(4px);
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.15));
  }
  25%  {
    transform: rotateY(-145deg) translateZ(12px) scaleX(0.97);
    filter: drop-shadow(6px 8px 16px rgba(0,0,0,0.3));
  }
  45%  {
    transform: rotateY(-100deg) translateZ(22px) scaleX(0.95);
    filter: drop-shadow(12px 12px 28px rgba(0,0,0,0.45));
  }
  65%  {
    transform: rotateY(-55deg) translateZ(18px) scaleX(0.96);
    filter: drop-shadow(10px 10px 22px rgba(0,0,0,0.35));
  }
  80%  {
    transform: rotateY(-20deg) translateZ(8px) scaleX(0.98);
    filter: drop-shadow(4px 6px 10px rgba(0,0,0,0.18));
  }
  92%  {
    transform: rotateY(-5deg) translateZ(2px);
    filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.08));
  }
  100% {
    transform: rotateY(0deg) translateZ(0);
    filter: drop-shadow(0 0 0 transparent);
  }
}


/* ===== PAGE FRONT ===== */
.page-front, .page-back {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.page-front {
  background: linear-gradient(135deg, var(--paper) 0%, #fdf0f4 40%, var(--paper) 100%);
  border-radius: 0 6px 6px 0;
  box-shadow: 5px 5px 18px rgba(0,0,0,0.18), inset -2px 0 8px rgba(0,0,0,0.05);
}
/* Curl gradient: spine shadow + surface curve + right edge curl */
.page-front::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background:
    linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.03) 5%, transparent 15%),
    radial-gradient(ellipse at 55% 50%, rgba(255,255,255,0.04) 0%, transparent 50%),
    linear-gradient(to left, rgba(0,0,0,0.04) 0%, transparent 10%);
  pointer-events: none; z-index: 2; border-radius: 0 6px 6px 0;
}

/* ===== PAGE BACK (visible during flip) ===== */
.page-back {
  transform: rotateY(180deg);
  border-radius: 6px 0 0 6px;
}
.page-back-texture {
  width: 100%; height: 100%;
  background:
    linear-gradient(225deg, var(--paper-dark) 0%, var(--paper) 40%, var(--paper-dark) 100%);
  border-radius: 6px 0 0 6px;
  box-shadow: inset 2px 0 8px rgba(0,0,0,0.06);
}

/* ===== CORNER CURL HINT ===== */
.page-curl-hint {
  position: absolute; bottom: 0; right: 0; width: 40px; height: 40px;
  background: linear-gradient(135deg,
    transparent 36%, rgba(200,180,160,0.12) 40%,
    rgba(230,215,200,0.3) 52%, rgba(245,235,225,0.55) 68%,
    rgba(255,248,242,0.8) 85%, rgba(255,252,248,0.95) 100%);
  border-radius: 0 0 6px 0; pointer-events: none; z-index: 3;
  transition: width .3s ease, height .3s ease;
  box-shadow: -2px -2px 6px rgba(0,0,0,0.06);
}
.page:not(.flipped):hover .page-curl-hint {
  width: 65px; height: 65px;
  box-shadow: -4px -4px 12px rgba(0,0,0,0.12);
}


/* ========== PAGE CONTENT ========== */
.page-content {
  width: 100%; height: 100%; padding: 30px 25px;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
}
.page-content::-webkit-scrollbar { width: 4px; }
.page-content::-webkit-scrollbar-thumb { background: var(--rose); border-radius: 4px; }
.page-num { position: absolute; bottom: 12px; font-family: 'Lora', serif; font-size: .85rem; color: var(--text-muted); opacity: .5; z-index: 5; }
.page-num.right { right: 20px; }

/* ========== TITLE PAGE ========== */
.title-page { align-items: center; justify-content: center; text-align: center; }
.title-page .ornament-top { font-size: 2rem; color: var(--gold); opacity: .5; margin-bottom: 18px; letter-spacing: 10px; }
.title-page h1 { font-family: 'Great Vibes', cursive; font-size: 3.2rem; color: var(--burgundy); margin-bottom: 6px; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.title-page .divider-heart { font-size: 1.5rem; color: var(--rose); margin: 8px 0; }
.title-page .author { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-style: italic; color: var(--text-brown); letter-spacing: 1px; }
.title-page .anniversary-badge { margin-top: 25px; padding: 10px 22px; border: 1.5px solid var(--gold); border-radius: 20px; font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--gold); letter-spacing: 2px; background: rgba(150,195,235,0.08); }
.title-page .ornament-bottom { font-size: 1.5rem; color: var(--gold); opacity: .4; margin-top: 20px; letter-spacing: 8px; }

/* ========== DEDICATION ========== */
.dedication-page { align-items: center; justify-content: center; text-align: center; padding: 35px 28px; }
.dedication-page .deco-top { font-family: 'Great Vibes', cursive; font-size: 1.8rem; color: var(--rose); opacity: .5; margin-bottom: 12px; }
.dedication-page h2 { font-family: 'Dancing Script', cursive; font-size: 2rem; color: var(--burgundy); margin-bottom: 16px; }
.dedication-page p { font-family: 'Lora', serif; font-size: 1.05rem; color: var(--text-brown); line-height: 1.9; margin-bottom: 10px; max-width: 400px; }
.dedication-page .signature { font-family: 'Great Vibes', cursive; font-size: 1.6rem; color: var(--burgundy); margin-top: 12px; }

/* ========== SCRAPBOOK ========== */
.scrapbook-page { padding: 20px 18px !important; position: relative; }
.scrapbook-page h2 { font-family: 'Caveat', cursive; font-size: 1.7rem; color: var(--burgundy); text-align: center; margin-bottom: 12px; }
.scrapbook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; }
.scrapbook-item { position: relative; background: #fff; padding: 5px; box-shadow: 2px 3px 8px rgba(0,0,0,0.12); transition: transform .4s ease; }
.scrapbook-item:hover { transform: scale(1.05) !important; z-index: 5; }
.scrapbook-item:nth-child(1) { transform: rotate(-2.5deg); }
.scrapbook-item:nth-child(2) { transform: rotate(1.8deg); }
.scrapbook-item:nth-child(3) { transform: rotate(1.2deg); }
.scrapbook-item:nth-child(4) { transform: rotate(-1.5deg); }
.scrapbook-item::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(1deg); width: 50px; height: 16px; z-index: 2; background: rgba(255,228,196,0.55); border: 1px solid rgba(210,180,140,0.2); }
.scrapbook-item:nth-child(2)::before { transform: translateX(-50%) rotate(-2deg); background: rgba(255,200,200,0.45); }
.scrapbook-item:nth-child(3)::before { transform: translateX(-50%) rotate(3deg); background: rgba(200,220,255,0.45); }
.scrapbook-item:nth-child(4)::before { transform: translateX(-50%) rotate(-1deg); background: rgba(200,255,200,0.45); }
.scrapbook-item img { width: 100%; height: 140px; object-fit: cover; display: block; }
.scrapbook-caption { font-family: 'Caveat', cursive; font-size: 1.05rem; text-align: center; padding: 4px 2px 1px; color: var(--text-brown); }
.sticker { position: absolute; font-size: 1.2rem; pointer-events: none; z-index: 3; animation: stickerBounce 3s ease-in-out infinite; }
@keyframes stickerBounce { 0%,100%{transform:scale(1) rotate(0deg)} 50%{transform:scale(1.12) rotate(5deg)} }

/* ========== LOVE PAGE ========== */
.love-page { padding: 25px 22px !important; }
.love-page h2 { font-family: 'Dancing Script', cursive; font-size: 1.7rem; color: var(--burgundy); text-align: center; margin-bottom: 14px; }
.love-list { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.love-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(255,182,193,0.1); border-left: 3px solid var(--rose); transition: transform .3s, background .3s; animation: fadeSlideIn .6s ease backwards; }
.love-item:hover { transform: translateX(4px); background: rgba(255,182,193,0.2); }
.love-item:nth-child(1){animation-delay:.1s} .love-item:nth-child(2){animation-delay:.2s}
.love-item:nth-child(3){animation-delay:.3s} .love-item:nth-child(4){animation-delay:.4s}
@keyframes fadeSlideIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
.love-emoji { font-size: 1.8rem; flex-shrink: 0; line-height: 1; }
.love-text h3 { font-family: 'Caveat', cursive; font-size: 1.25rem; color: var(--burgundy); margin-bottom: 2px; }
.love-text p { font-family: 'Lora', serif; font-size: .95rem; color: var(--text-muted); line-height: 1.5; }

/* ========== VIDEO PAGE ========== */
.video-page { align-items: center; justify-content: center; text-align: center; }
.video-page h2 { font-family: 'Dancing Script', cursive; font-size: 1.7rem; color: var(--burgundy); margin-bottom: 12px; }
.video-frame { width: 90%; aspect-ratio: 16/9; background: #1a1a2e; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--gold); overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.4); position: relative; }
.video-frame .coming-soon { color: var(--gold-light); font-family: 'Playfair Display', serif; font-size: 1.4rem; letter-spacing: 3px; animation: pulse 2.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.6} 50%{opacity:1} }
.video-frame::before { content: '🎬'; position: absolute; top: 10px; left: 12px; font-size: 1.4rem; opacity: .5; }
.video-caption { font-family: 'Caveat', cursive; font-size: 1.1rem; color: var(--text-muted); margin-top: 12px; font-style: italic; }

/* ========== LETTER PAGE ========== */
.letter-page { padding: 25px 24px !important; background: repeating-linear-gradient(transparent, transparent 30px, rgba(150,195,235,0.2) 30px, rgba(150,195,235,0.2) 31px) !important; }
.letter-page h2 { font-family: 'Great Vibes', cursive; font-size: 1.65rem; color: var(--burgundy); margin-bottom: 12px; }
.letter-body { font-family: 'Dancing Script', cursive; font-size: 1.15rem; color: var(--text-brown); line-height: 31px; }
.letter-body p { margin-bottom: 8px; }
.letter-signature { font-family: 'Great Vibes', cursive; font-size: 1.4rem; color: var(--burgundy); margin-top: 12px; text-align: right; }
.letter-page-continued { justify-content: center; }
.letter-page-continued .letter-body { margin-top: 0; }
.letter-page-continued .letter-signature { margin-top: auto; padding-top: 20px; }

/* ========== END PAGE ========== */
.end-page { align-items: center; justify-content: center; text-align: center; }
.end-page h2 { font-family: 'Great Vibes', cursive; font-size: 2.8rem; color: var(--burgundy); margin-bottom: 8px; }
.end-page .end-heart { font-size: 3rem; margin: 12px 0; animation: heartbeat 1.5s ease-in-out infinite; }
@keyframes heartbeat { 0%,100%{transform:scale(1)} 15%{transform:scale(1.2)} 30%{transform:scale(1)} 45%{transform:scale(1.15)} }
.end-page p { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--text-brown); font-style: italic; }

/* ========== NAVIGATION ========== */
.nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(235,150,235,0.65); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(150,195,235,0.4); color: #fff;
  font-size: 1.5rem; cursor: pointer; z-index: 60;
  transition: all .3s ease; display: flex; align-items: center; justify-content: center;
}
.nav-btn:hover { background: rgba(235,150,235,0.9); transform: translateY(-50%) scale(1.1); }
.nav-btn:disabled { opacity: .2; cursor: default; pointer-events: none; }
.nav-prev { left: 10px; }
.nav-next { right: 10px; }
.page-indicator {
  position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
  font-family: 'Lora', serif; font-size: .8rem; color: rgba(150,195,235,0.6);
  letter-spacing: 2px; z-index: 60;
}

/* ========== MUSIC ========== */
#music-toggle {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(235,150,235,0.75); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(150,195,235,0.4); color: #fff;
  font-size: 1.1rem; cursor: pointer; transition: all .3s;
}
#music-toggle:hover { background: rgba(235,150,235,1); transform: scale(1.1); }
#music-toggle.playing { animation: musicPulse 2s ease-in-out infinite; }
@keyframes musicPulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,182,193,0.3)} 50%{box-shadow:0 0 0 10px rgba(255,182,193,0)} }
#music-toggle.hidden { display: none; }

@media (max-width: 600px) {
  .closed-book { width: 85vw; padding: 35px 25px 35px 35px; }
  .cover-title { font-size: 2.2rem; }
  .nav-btn { width: 38px; height: 38px; font-size: 1.3rem; }
  .nav-prev { left: 5px; }
  .nav-next { right: 5px; }
}