@font-face {
  font-family: "Dancing Script";
  src: url("assets/dancing-script.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --birthday-style-ready: 1;
  color-scheme: dark;
  --pink: #ff69b4;
  --paper: #fffdf6;
  --book-width: min(600px, 88vw, 84svh);
  --book-height: calc(var(--book-width) * 2 / 3);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #05050a; }
body { font-family: Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: inherit; }
button:disabled { cursor: default; opacity: .35; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid #ffd1e7; outline-offset: 6px; }
button, .book { touch-action: manipulation; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#sky { z-index: 0; }
#intro { z-index: 2; display: none; }
body[data-scene="intro"] #intro { display: block; }
.scene { position: fixed; inset: 0; z-index: 3; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.welcome { display: grid; place-content: center; text-align: center; }
.start-button { display: flex; flex-direction: column; align-items: center; gap: 18px; background: transparent; border: 0; padding: 30px 50px; }
.gift-heart { color: #ff8cbd; font-size: 90px; line-height: 1; text-shadow: 0 0 34px #ff69b466; animation: heartbeat 2s ease-in-out infinite; }
.start-name { font: 400 clamp(36px, 7vw, 60px) "Dancing Script", cursive; color: #ffe8f1; }
#start-label { font-size: 12px; letter-spacing: .15em; color: #cbb3bf; }
#load-status { max-width: 310px; font-size: 13px; color: #e5c4d2; line-height: 1.6; }
.tools { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: flex; gap: 10px; z-index: 10; }
.round-button { width: 38px; height: 38px; border: 1px solid #ffffff25; background: #0c081440; border-radius: 50%; color: #e8c8d8; display: inline-grid; place-items: center; font-size: 20px; transition: opacity .2s, background .2s; }
.round-button:hover { background: #ff69b41c; }
#sound { box-shadow: 0 0 12px #ff69b42b; }
#sound[aria-pressed="true"] { opacity: .45; }
.audio-status { position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); z-index: 12; font-size: 12px; color: #f5c9dc; text-align: center; max-width: 85vw; }
.audio-status:empty { display: none; }

.kitten { display: grid; place-items: center; }
.kitten-gift { width: min(240px, 45vw, 50svh); animation: gift-appear 2s ease-in-out both; text-align: center; }
.kitten-title { margin: 0; position: relative; z-index: 1; font-family: "Arial Rounded MT Bold", Arial, sans-serif; font-size: clamp(17px, 3vw, 26px); font-weight: 900; line-height: 1.3; }
.kitten-title > span { display: block; }
.kitten-title i { font-style: normal; display: inline-block; color: var(--letter-color); text-shadow: 0 2px 0 #674318; animation: candle-bounce 1s ease-in-out infinite alternate; animation-delay: var(--delay); }
.kitten-crop { width: 100%; aspect-ratio: 360 / 203; overflow: hidden; }
.kitten-crop img { width: 100%; display: block; transform: translateY(-43.6%); }
.kitten-crop img.fallback { transform: none; }

.album { perspective: 2000px; animation: album-appear 1s ease both; }
.message-card { position: absolute; top: max(4svh, 55px); left: 50%; transform: translateX(-50%); width: min(650px, 85vw); min-height: clamp(95px, 19svh, 180px); border-radius: 20px; padding: 32px 38px; display: flex; align-items: center; justify-content: center; background: var(--paper); box-shadow: 0 0 30px #ff69b411, 0 12px 40px #0003; z-index: 5; }
.message-card p:not(.sr-only) { margin: 0; color: #b38489; font: 400 clamp(20px, 2.8vw, 27px)/1.65 "Dancing Script", cursive; text-align: center; }
.corner-hearts { position: absolute; right: 17px; top: 12px; font-size: 22px; opacity: .65; animation: heartbeat 2s ease-in-out infinite; }
.book-position { position: absolute; top: 58%; left: 50%; width: var(--book-width); height: var(--book-height); transform: translate(-50%, -50%); perspective: 2000px; }
.book { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s ease; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.book[data-spread="0"] { transform: translateX(-25%); }
.book[data-spread="3"] { transform: translateX(25%); }
.book.dragging { cursor: grabbing; }
.leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform 800ms cubic-bezier(.25,.46,.45,.94); will-change: transform; }
.leaf.flipped { transform: rotateY(-180deg); }
.page { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: var(--paper); border: 2px solid #f2e9e3; border-radius: 0 6px 6px 0; box-shadow: 1px 2px 2px #c4b6af, 0 6px 22px #0006; }
.page.back { transform: rotateY(180deg); border-radius: 6px 0 0 6px; }
.page img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0003 0%, #00000008 5%, transparent 20%, #fff2 95%, #0001 100%); pointer-events: none; }
.page.back::after { background: linear-gradient(270deg, #0003 0%, #00000008 5%, transparent 20%, #fff2 95%, #0001 100%); }
.album-nav { position: absolute; bottom: max(18px, 4svh); left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 20px; width: min(420px, 92vw); }
.album-nav p { margin: 0; color: #c8b3c1; font-size: 11px; letter-spacing: .03em; text-align: center; min-width: 185px; }
.album-nav .round-button { font-size: 25px; flex: 0 0 auto; }
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }

.photo-heart { position: absolute; left: 50%; top: 48%; width: 0; height: 0; }
.heart-photo { position: absolute; width: var(--photo-size); height: var(--photo-size); object-fit: cover; border: 4px solid #fff5f8; border-radius: 15%; box-shadow: 0 0 18px #ff69b4cc; opacity: 0; transform: translate(-50%, -50%) scale(0); animation: photo-arrive 1500ms ease-out forwards; animation-delay: var(--delay); }
.finale-actions { position: absolute; bottom: max(22px, 5svh); width: 100%; display: flex; justify-content: center; gap: 25px; opacity: 0; animation: soft-in 1s 4s forwards; }
.text-button { background: none; border: 0; border-bottom: 1px solid #c99ab33b; padding: 10px 0; color: #c7a6b6; font-size: 12px; }
.text-button:hover { color: #ffe9f3; }
.noscript { position: fixed; inset: 40% 10% auto; text-align: center; color: #fff; z-index: 20; }
.awaiting-data main { visibility: hidden; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
body[data-embedded] .message-card { max-height: 30svh; overflow-y: auto; align-items: safe center; }
body[data-embedded] .message-card p { overflow-wrap: anywhere; }
.album-signature { position: absolute; bottom: 13svh; width: 100%; padding: 0 20px; text-align: center; color: #ffe8f1; font: 24px "Dancing Script", cursive; overflow-wrap: anywhere; }

@keyframes heartbeat { 50% { transform: scale(1.1); } }
@keyframes candle-bounce { to { transform: translateY(-3px) rotate(4deg); } }
@keyframes gift-appear { 0% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes album-appear { from { opacity: 0; margin-top: 35px; } to { opacity: 1; margin-top: 0; } }
@keyframes photo-arrive { to { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); } }
@keyframes soft-in { to { opacity: 1; } }

@media (max-width: 600px) and (orientation: portrait) {
  :root { --book-width: 92vw; }
  .message-card { top: 18svh; min-height: 120px; padding: 24px 26px; width: 90vw; }
  .message-card p:not(.sr-only) { font-size: 23px; line-height: 1.6; }
  .book-position { top: 57%; }
  .album-nav { bottom: 12svh; gap: 12px; }
  .corner-hearts { top: 9px; right: 10px; font-size: 19px; }
  .kitten-gift { width: 53vw; }
}

@media (max-width: 600px) and (max-height: 700px) and (orientation: portrait) {
  .message-card { top: 6svh; min-height: 0; padding: 14px 22px; }
  .message-card p:not(.sr-only) { font-size: 19px; line-height: 1.35; }
  .album-nav { bottom: 3svh; }
}

@media (max-height: 540px) and (orientation: landscape) {
  :root { --book-width: min(400px, 55vw, 94svh); }
  .message-card { top: 10px; min-height: 58px; width: min(650px, 70vw); padding: 14px 30px; border-radius: 13px; }
  .message-card p:not(.sr-only) { font-size: 19px; line-height: 1.5; }
  .corner-hearts { top: 6px; right: 9px; font-size: 17px; }
  .book-position { top: 58%; }
  .album-nav { bottom: 8px; }
  .album-nav .round-button { width: 30px; height: 30px; }
  .tools { top: 8px; right: 8px; gap: 6px; }
  .tools .round-button { width: 30px; height: 30px; font-size: 16px; }
  .finale-actions { bottom: 8px; }
  .gift-heart { font-size: 65px; }
  .start-button { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}