/* Tulip Bloom — printed invitation / garden editorial direction,
   now a real-photo journey through a shared story. See
   THEME_RULES.md for the data contract this theme must respect. */
:root{
  --ink:#332a2d;--ink-soft:#716166;--petal:#c48691;--petal-deep:#98566a;--leaf:#607967;--leaf-dark:#385344;
  --paper:#fbf8f3;--paper-deep:#eee4db;--blush:#e6d2d1;--wine:#4c303d;--wine-deep:#281b22;--plum:#654452;
  --gold:#b69b6f;--white:#fffdfb;--night:#1c1013;
  --font-script:'Alex Brush',cursive;--font-accent:'Cormorant Garamond',Georgia,serif;--font-ui:'Poppins',system-ui,sans-serif;
}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}
body{margin:0;min-height:100dvh;padding:20px;display:flex;align-items:center;justify-content:center;color:var(--ink);font-family:var(--font-ui);background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.06),transparent 24rem),radial-gradient(circle at 90% 88%,rgba(122,59,83,.25),transparent 30rem),var(--wine-deep)}
img{max-width:100%}
button{font:inherit}button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ---------- shared type ---------- */
.eyebrow{margin:0 0 14px;color:var(--petal-deep);font-size:.67rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.eyebrow.light{color:var(--gold)}
.script-headline{margin:0 0 10px;color:var(--wine);font:400 clamp(2.6rem,12vw,3.8rem)/1.05 var(--font-script);text-wrap:balance}
.script-headline.small{font-size:clamp(2.2rem,9vw,2.9rem)}
.script-headline.light{color:var(--white);text-shadow:0 8px 24px rgba(24,6,15,.4)}
.subtitle,.caption{margin:0 0 20px;max-width:30ch;margin-inline:auto;color:var(--ink-soft);font:italic 1.1rem/1.35 var(--font-accent);text-wrap:balance}
.subtitle.light,.caption.light{color:#f7e5df}
.caption{margin:16px auto 0;font-size:1.02rem}
.hint-text{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);opacity:.75;margin-top:16px}
.hint-text.light{color:var(--gold)}
.hint-text.dark{color:var(--petal-deep)}
.brand-mark{position:absolute;top:20px;left:24px;z-index:3;margin:0;font-family:var(--font-script);font-size:1.4rem;color:#fff;display:flex;flex-direction:column;line-height:1.1}
.brand-sub{font-family:var(--font-ui);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.85}

/* ---------- buttons ---------- */
.pill-btn{display:inline-block;margin-top:18px;font-family:var(--font-ui);font-weight:700;font-size:.85rem;color:var(--wine);background:var(--white);border:none;border-radius:999px;padding:.8em 1.7em;cursor:pointer;box-shadow:0 10px 22px -10px rgba(0,0,0,.4);transition:transform .2s ease,background .2s ease}
.pill-btn:hover{transform:translateY(-2px)}
.pill-btn.primary{background:linear-gradient(155deg,var(--petal),var(--petal-deep));color:#fff}
.pill-btn.ghost{background:transparent;border:1px solid var(--wine);color:var(--wine)}
.pill-btn.ghost.light{border-color:var(--gold);color:#fff}
.pill-btn.ghost.light:hover{background:var(--gold);color:var(--night)}
.continue-btn{appearance:none;border:0;border-bottom:1px solid currentColor;padding:9px 4px;background:transparent;color:var(--petal-deep);cursor:pointer;font:italic 600 1.05rem var(--font-accent);transition:transform .25s ease,color .25s ease;margin-top:20px}
.continue-btn:hover{color:var(--wine);transform:translateY(-2px)}
.continue-btn.light{color:#fff3ee}
.menu-btn{position:absolute;top:20px;left:20px;z-index:5;display:flex;align-items:center;gap:6px;padding:7px 12px 7px 8px;border:1px solid rgba(76,36,53,.24);border-radius:999px;background:rgba(255,253,251,.6);color:var(--wine);cursor:pointer;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;transition:background .2s,transform .2s}
.bg-plum .menu-btn{border-color:rgba(255,255,255,.25);background:rgba(37,20,27,.35);color:#fff}
.menu-btn:hover{transform:translateY(-1px)}
.menu-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- photo placeholders ---------- */
.photo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(160deg,#d9b7ad,#98566a 65%,#5c2c3f);border:1.5px dashed rgba(255,255,255,.5);color:rgba(255,255,255,.9);text-align:center;font-family:var(--font-ui);font-size:.74rem;padding:10px}
.photo-placeholder svg{width:30px;height:30px;stroke:rgba(255,255,255,.9);fill:none;stroke-width:2}
.photo-placeholder.filled{background:none;border:none;padding:0}
.photo-placeholder.filled img{width:100%;height:100%;object-fit:cover;display:block}
.photo-fill{position:absolute;inset:0;border:none;z-index:0}
.cinematic-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,var(--night) 0%,rgba(28,16,19,.55) 45%,rgba(28,16,19,.15) 75%)}
.cinematic-overlay.strong{background:linear-gradient(0deg,var(--night) 20%,rgba(28,16,19,.7) 55%,rgba(28,16,19,.3) 100%)}
.stars-bg{position:absolute;inset:0;z-index:1;background-image:radial-gradient(1.5px 1.5px at 20% 25%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 15%,#fff,transparent),radial-gradient(1px 1px at 40% 45%,#fff,transparent),radial-gradient(1px 1px at 85% 40%,#fff,transparent);opacity:.7}

/* =========================================================
   OVERLAY (opening) — fixed, shown before the journey
   ========================================================= */
.overlay-screen{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;transition:opacity .6s ease;overflow:hidden}
.overlay-screen.fade-out{opacity:0;pointer-events:none}
.overlay-inner{position:relative;z-index:2;width:100%;max-width:340px;text-align:center;padding:0 28px 64px}

/* =========================================================
   JOURNEY (scroll-snap book)
   ========================================================= */
.book{width:100%;max-width:460px;height:min(100dvh - 40px,900px);overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;border-radius:20px;box-shadow:0 32px 80px rgba(11,4,8,.55),0 0 0 1px rgba(255,255,255,.1);position:relative;scrollbar-width:thin;z-index:2}
.book::-webkit-scrollbar{width:6px}
.book::-webkit-scrollbar-thumb{background:rgba(76,36,53,.3);border-radius:3px}
.section{min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 28px;overflow:hidden;text-align:center}
.section-inner{position:relative;z-index:2;width:100%}
.section-photo{padding:0;justify-content:flex-end}
.ending-inner{padding:0 28px 64px}
.bg-tulip{background:radial-gradient(90% 56% at 50% -8%,rgba(255,255,255,.94),transparent 63%),radial-gradient(60% 45% at 5% 100%,rgba(213,157,158,.42),transparent 70%),linear-gradient(145deg,#fffaf6 0%,var(--paper) 54%,#ead4d2 100%)}
.bg-plum{color:var(--white);background:radial-gradient(80% 55% at 50% 0%,rgba(255,255,255,.12),transparent 70%),linear-gradient(155deg,#73445a 0%,var(--plum) 42%,var(--wine) 100%)}
.petal-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.petal-decor::before,.petal-decor::after{content:"";position:absolute;border-radius:100% 0 100% 0;opacity:.4;transform:rotate(28deg)}
.petal-decor::before{width:180px;height:290px;right:-85px;top:-55px;background:linear-gradient(145deg,transparent 42%,rgba(174,79,103,.18) 43%,rgba(174,79,103,.06) 70%,transparent 71%)}
.petal-decor::after{width:110px;height:210px;left:-62px;bottom:-65px;background:linear-gradient(145deg,transparent 42%,rgba(85,116,97,.2) 43%,rgba(85,116,97,.07) 70%,transparent 71%);transform:rotate(-38deg)}
.scroll-chevron{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:2;width:22px;height:22px;stroke:var(--petal-deep);fill:none;stroke-width:2;opacity:.7;animation:bob 1.8s ease-in-out infinite}
.bg-plum .scroll-chevron{stroke:var(--gold)}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* ---------- 2. choose your path ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:340px;margin:16px auto}
.menu-item{display:flex;min-height:124px;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px 8px;border:1px solid rgba(76,36,53,.14);border-radius:14px;background:rgba(255,255,255,.5);color:var(--wine);cursor:pointer;box-shadow:0 8px 22px rgba(76,36,53,.06);transition:transform .25s,background .25s,box-shadow .25s}
.menu-item:hover{background:rgba(255,255,255,.86);box-shadow:0 14px 28px rgba(76,36,53,.12);transform:translateY(-4px)}
.menu-item svg{width:38px;height:38px;stroke:var(--petal-deep);fill:none;stroke-width:2}
.menu-item span{font:600 .84rem/1.15 var(--font-accent);max-width:11ch}

/* ---------- 3. catch the tulips ---------- */
.game-inner{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;height:100%}
.game-hud{display:flex;gap:12px;margin:4px 0 10px}
.game-timer,.game-counter{background:rgba(255,255,255,.12);color:#fff;font-weight:700;font-size:.9rem;padding:.4em 1em;border-radius:999px;}
.game-area{position:relative;flex:1;width:100%;min-height:280px;border-radius:20px;background:rgba(255,255,255,.06);border:2px dashed rgba(255,255,255,.25);overflow:hidden;touch-action:manipulation}
.falling-tulip{position:absolute;top:-10%;transform:translateX(-50%);width:36px;background:none;border:none;padding:0;cursor:pointer;animation-name:fall;animation-timing-function:linear;animation-fill-mode:forwards}
.falling-tulip svg{width:100%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
@keyframes fall{from{top:-10%;transform:translateX(-50%) rotate(0deg)}to{top:112%;transform:translateX(-50%) rotate(30deg)}}
.falling-tulip.caught{animation:none;opacity:0;transform:translateX(-50%) scale(1.6);transition:opacity .25s ease,transform .25s ease}
.skip-game{min-height:44px;border:0;background:transparent;color:rgba(255,255,255,.7);font:600 .78rem var(--font-ui);text-decoration:underline;text-underline-offset:4px;cursor:pointer;margin-top:6px}
.skip-game:hover{color:#fff}

/* ---------- 4. build your bouquet ---------- */
.bouquet-wrap{width:min(60vw,220px);margin:12px auto 0}

/* ---------- 5. memory detail (polaroids) ---------- */
.polaroid-track{display:flex;gap:20px;margin:16px 0 6px;padding:6px 28px 16px;margin-inline:-28px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.polaroid-track::-webkit-scrollbar{display:none}
.big-polaroid{flex:0 0 72%;max-width:230px;scroll-snap-align:center;margin:0;background:#fff;padding:10px 10px 26px;box-shadow:0 16px 32px -14px rgba(52,18,31,.45);font:italic 600 1rem var(--font-accent);color:var(--ink-soft);text-align:center}
.big-polaroid .photo-placeholder{aspect-ratio:4/5}
.big-polaroid figcaption{margin-top:10px}
.moments-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
.moments-counter{font-family:var(--font-ui);font-size:.75rem;letter-spacing:.12em;color:var(--ink-soft);min-width:44px;text-align:center}
.moments-arrow{width:36px;height:36px;border-radius:50%;flex:none;cursor:pointer;border:1px solid rgba(76,36,53,.25);background:rgba(255,255,255,.6);display:grid;place-items:center;transition:background .2s ease,transform .2s ease}
.moments-arrow:hover{background:#fff;transform:translateY(-1px)}
.moments-arrow svg{width:16px;height:16px;stroke:var(--wine);fill:none}
.moments-arrow.next svg{transform:rotate(180deg)}

/* ---------- 6. open letters (chat style) ---------- */
.letters-inner{display:flex;flex-direction:column;height:100%;max-height:560px}
.chat-thread{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:10px 2px;text-align:left}
.chat-bubble{max-width:78%;padding:10px 14px;border-radius:16px;font:1rem/1.4 var(--font-accent);position:relative;animation:bubbleIn .3s ease both}
@keyframes bubbleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-bubble.from-them{align-self:flex-start;background:rgba(76,36,53,.08);border-bottom-left-radius:4px;color:var(--ink)}
.chat-bubble.from-me{align-self:flex-end;background:var(--petal-deep);color:#fff;border-bottom-right-radius:4px}
.chat-time{display:block;margin-top:4px;font-family:var(--font-ui);font-size:.62rem;opacity:.6}
.chat-input-row{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(76,36,53,.14)}
.chat-input{flex:1;font-family:var(--font-ui);font-size:.88rem;padding:11px 14px;border-radius:999px;border:1px solid rgba(76,36,53,.2);background:rgba(255,255,255,.7);color:var(--ink)}
.chat-send{width:40px;height:40px;border-radius:50%;border:none;background:var(--petal-deep);color:#fff;font-size:1rem;cursor:pointer;flex:none;transition:transform .15s ease}
.chat-send:hover{transform:scale(1.06)}

/* ---------- 7. our playlist ---------- */
.audio-player{display:flex;flex-direction:column;align-items:center;gap:4px}
.vinyl-wrap{position:relative;width:min(190px,52vw);aspect-ratio:1;margin:10px auto 18px}
.vinyl-disc{width:100%;height:100%;border-radius:50%;border:none;padding:0;cursor:pointer;background:repeating-radial-gradient(circle at center,rgba(255,255,255,.05) 0 2px,transparent 2px 6px),radial-gradient(circle at center,var(--petal-deep) 0 14%,#111 15% 22%,#1b1b1b 23% 100%);position:relative;animation:spin 6s linear infinite;animation-play-state:paused;box-shadow:0 18px 36px -14px rgba(0,0,0,.6)}
.vinyl-disc:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.vinyl-disc.playing{animation-play-state:running}
.vinyl-label{position:absolute;inset:36%;border-radius:50%;background:var(--gold);overflow:hidden;box-shadow:0 0 0 2px var(--wine-deep),inset 0 0 0 1px rgba(0,0,0,.2)}
.vinyl-photo{width:100%;height:100%;border-radius:50%}
.vinyl-arm{position:absolute;top:-6px;right:2%;width:9px;height:50%;transform-origin:top center;background:linear-gradient(var(--white),var(--gold));border-radius:6px;transform:rotate(-28deg);transition:transform .5s cubic-bezier(.32,.72,0,1);box-shadow:0 4px 10px rgba(0,0,0,.4)}
.vinyl-disc.playing ~ .vinyl-arm{transform:rotate(-6deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.song-title{font:700 1.2rem var(--font-accent);color:#fff;margin:0}
.song-artist{font-family:var(--font-ui);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#f7e5df;opacity:.85;margin:.2em 0 18px}
.song-progress{width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.18);cursor:pointer}
.song-progress-fill{height:100%;width:0%;border-radius:2px;background:var(--gold)}
.song-times{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:12px}
.song-times span{font-family:var(--font-ui);font-size:.7rem;color:#f7e5df;opacity:.8;min-width:2.4em}
.song-play{width:44px;height:44px;border-radius:50%;flex:none;cursor:pointer;border:1px solid var(--gold);background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background .2s ease,transform .2s ease}
.song-play:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.song-play svg{width:18px;height:18px;fill:#fff}
.song-play .icon-pause{display:none}
.song-play.playing .icon-play{display:none}
.song-play.playing .icon-pause{display:block}
.song-hint{font-family:var(--font-ui);font-size:.72rem;color:var(--gold);opacity:.9;min-height:1.2em;margin:10px 0 0}
.youtube-wrap{width:100%;max-width:350px;margin:0 auto 20px;overflow:hidden;border-radius:13px;background:#000;aspect-ratio:16/9;box-shadow:0 12px 24px rgba(76,36,53,.14)}
.youtube-wrap iframe{display:block;width:100%;height:100%;border:0}

/* ---------- 8. little facts ---------- */
.facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:320px;margin:16px auto}
.fact-card{display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(255,255,255,.55);border:1px solid rgba(76,36,53,.14);border-radius:12px;padding:14px 8px;font:600 .78rem var(--font-ui);color:var(--wine);min-height:64px}

/* ---------- 9. make a wish ---------- */
.cake-art{width:150px;height:150px;margin:8px auto}
.cake-art svg{width:100%;height:100%;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
.wish-made{font:600 1rem var(--font-accent);color:var(--gold);margin-top:10px}

/* ---------- 10. future together ---------- */
.destination-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.destination-chip{display:inline-flex;align-items:center;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.6);font-weight:700;font-size:.85rem;color:var(--wine);box-shadow:0 6px 14px -8px rgba(76,36,53,.3)}

/* ---------- 11. sealed with love ---------- */
.wax-seal{display:block;width:54px;height:54px;margin:0 auto 14px;border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--gold),var(--petal-deep) 60%,var(--wine-deep) 100%);box-shadow:0 8px 18px rgba(0,0,0,.4),inset 0 -3px 6px rgba(0,0,0,.3)}
.letter-sign{font:italic 1.05rem var(--font-accent);margin:6px 0 0}

/* ---------- 12. ending ---------- */
.ending-actions{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:10px}

/* ---------- confetti (used nowhere here but kept for future reuse) ---------- */
.confetti-piece{position:fixed;top:0;width:8px;height:8px;z-index:60;pointer-events:none;animation:confetti-fall linear forwards}
@keyframes confetti-fall{to{transform:translateY(70vh) rotate(540deg);opacity:0}}

/* ---------- responsive ---------- */
@media (max-width:480px){
  body{padding:0}
  .book{height:100dvh;min-height:620px;border-radius:0;box-shadow:none}
  .section{padding:54px 24px}
  .menu-btn{top:20px;left:20px}
}
@media (max-width:370px){
  .section{padding-inline:18px}
  .menu-grid{gap:8px}
  .menu-item{min-height:110px}
  .facts-grid{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}