/* --- Base --- */
*{box-sizing:border-box}
body{
  margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background: linear-gradient(135deg,#ffd5e5,#ffe8f0);
  min-height:100vh; display:grid; place-items:center;
}
.hidden{display:none!important}

/* --- Book --- */
.scene{display:flex; flex-direction:column; align-items:center; gap:16px; width:min(1100px,96vw)}
.book{position:relative; width:min(1000px,94vw); height:min(640px,70vh); perspective:1800px}
.page{
  position:absolute; inset:0; transform-origin:left; transform-style:preserve-3d;
  transition:transform .9s ease; border-radius:18px; overflow:hidden;
  background:#fff; box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.page.flipped{ transform: rotateY(-180deg); z-index:0 }
.page:not(.flipped){ z-index:2 }
.cover{
  background:#000; color:#fff; display:grid; place-items:center; text-align:center;
}
.cover-inner h1{ margin:0 0 6px; font-size:clamp(26px,4.6vw,54px) }
.cover-inner p{ margin:0 0 18px; color:#ffc0cb }
.btn{
  background:#ff4fa1; color:#fff; border:0; border-radius:12px;
  padding:12px 20px; font-weight:700; cursor:pointer;
  box-shadow:0 8px 20px rgba(255,79,161,.35); transition:.2s transform ease,.2s filter ease;
}
.btn.small{ padding:8px 14px; font-size:14px }
.btn:hover{ transform:translateY(-1px); filter:brightness(1.06) }

.spread{ display:grid; grid-template-columns:1fr 1fr; background:#fff }
.cell{ overflow:hidden; display:grid; place-items:center }
.page img{ width:100%; height:100%; object-fit:cover; display:block }

.end{ display:grid; place-items:center; background:linear-gradient(135deg,#fff,#ffe6f2) }
.end .end-inner{ text-align:center; padding:24px 28px }
.end h2{ color:#ff4fa1; margin:.2rem 0 1rem; font-size:clamp(22px,3.2vw,36px) }
.end p{ color:#444; margin:.2rem 0 1.2rem }

/* --- Nav --- */
.nav{ display:flex; align-items:center; gap:12px; user-select:none }
#pageInfo{ font-weight:700; color:#444 }

/* --- Celebrate / Card --- */
.celebrate{
  position:fixed; inset:0; display:grid; place-items:center; gap:18px;
  background:linear-gradient(135deg,#ffd5e5,#ffe8f0); z-index:100;
}
.envelope{
  position:relative; width:min(520px,92vw); height:min(340px,48vh);
  background:#ff85c1; border-radius:16px; box-shadow:0 12px 36px rgba(0,0,0,.25);
  cursor:pointer; transition:transform .6s ease, opacity 1s ease; z-index:5;
}
.envelope-text{ position:absolute; bottom:16px; width:100%; text-align:center; color:#fff; font-weight:600; letter-spacing:.2px }
.flap{
  position:absolute; inset:0; background:#ff69b4;
  clip-path:polygon(0 0, 50% 60%, 100% 0);
  transform-origin:top; transition:transform .6s ease; z-index:2;
}
.envelope.open .flap{ transform:rotateX(180deg) }
.envelope.hide{ opacity:0; transform:scale(.95); pointer-events:none }

.letter{
  position:fixed; left:50%; bottom:100px; transform:translateX(-50%) translateY(500px);
  width:min(760px,92vw); background:rgba(255,255,255,.22); backdrop-filter:blur(14px);
  border-radius:24px; text-align:center; padding:44px 34px;
  box-shadow:0 12px 30px rgba(0,0,0,.2); opacity:0; transition:transform 1.2s ease, opacity 1.2s ease;
  z-index:10;
}
.letter.show{ transform:translateX(-50%) translateY(-40px) scale(1.04); opacity:1; animation:glow 2.6s ease-in-out infinite }
.letter h1{ color:#ff4fa1; margin:0 0 10px; font-size:clamp(22px,3.4vw,36px) }
.letter p{ color:#333; margin:0; font-size:clamp(14px,2.2vw,20px); line-height:1.7 }

@keyframes glow{
  0%{ box-shadow:0 18px 50px rgba(255,105,180,.28),0 0 16px rgba(255,182,193,.4) }
  50%{ box-shadow:0 18px 60px rgba(255,105,180,.45),0 0 30px rgba(255,182,193,.7) }
  100%{ box-shadow:0 18px 50px rgba(255,105,180,.28),0 0 16px rgba(255,182,193,.4) }
}

#fireworks{
  position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:1;
}
.page img {
  width: 100%;
  height: 100%;
  object-fit: contain;

  /* Chống mờ */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;

  /* Tăng tương phản và độ sáng nhẹ để trông rõ hơn */
  filter: contrast(110%) brightness(105%);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.cover-inner {
  position: relative;
  z-index: 10;
  pointer-events: auto; /* ✅ Cho phép click */
}
#startBook {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}