/* =========================================================
   Mini-Game — playful, gamified birthday quest theme
   Palette: pastel pink + magenta accent, white cards, a cute
   mascot bear that follows you through every little surprise.
   ========================================================= */

:root{
  --pink-bg:#e9dedb;
  --pink-bg-deep:#dcc9c5;
  --pink-soft:#f8f3ef;
  --accent:#b77f8b;
  --accent-deep:#8e5c69;
  --purple:#a78bc9;
  --green:#8bb98f;
  --white:#ffffff;
  --ink:#4c3d42;
  --ink-soft:#857078;
  --gold:#c9a66f;
  --night:#2c2230;

  --font-head:'Baloo 2', cursive;
  --font-body:'Quicksand', system-ui, sans-serif;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, var(--pink-bg-deep), transparent 70%),
    var(--pink-bg);
  font-family:var(--font-body);
  color:var(--ink);
  display:flex;
  justify-content:center;
  padding-block:24px;
}

img{max-width:100%;}
button{font-family:inherit;}

#book{
  width:100%;
  max-width:440px;
  height:min(100dvh - 48px, 900px);
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  border-radius:24px;
  box-shadow:0 30px 70px -20px rgba(142,92,105,.24), 0 0 0 1px rgba(255,255,255,.6);
  position:relative;
  background:var(--pink-soft);
  scrollbar-width:thin;
}
#book::-webkit-scrollbar{width:6px;}
#book::-webkit-scrollbar-thumb{background:rgba(142,92,105,.24);border-radius:3px;}

.page{
  min-height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:36px 24px;
  overflow:hidden;
}
.page-inner{position:relative; z-index:2; width:100%; text-align:center;}

/* ---------- type ---------- */
h1,h2{font-family:var(--font-head); color:var(--accent-deep); margin:.2em 0; text-wrap:balance;}
h2.light{color:#fff;}
.eyebrow{font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); opacity:.85; margin:0 0 .4em;}
.eyebrow.light{color:var(--gold);}
.subtitle{font-weight:600; color:var(--ink-soft); margin:.2em 0 .8em;}
.hint-text{font-family:var(--font-body); font-weight:600; font-size:.82rem; letter-spacing:.04em; color:var(--ink-soft); text-align:center; margin-top:16px;}

/* ---------- buttons ---------- */
.pill-btn{
  display:inline-block; margin-top:20px; font-family:var(--font-body); font-weight:700; font-size:.88rem;
  color:#fff; background:var(--accent); border:none; border-radius:999px; padding:.85em 1.8em; cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(142,92,105,.5); transition:transform .2s ease, background .2s ease;
}
.pill-btn:hover{transform:translateY(-2px); background:var(--accent-deep);}
.pill-btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.pill-btn.primary{background:linear-gradient(155deg, var(--gold), #e0c48f); color:#4a3417;}
.pill-btn.ghost{background:transparent; border:1px solid var(--accent); color:var(--accent);}
.pill-btn.ghost.light{border-color:var(--gold); color:#fff;}
.pill-btn.ghost.light:hover{background:var(--gold); color:var(--night);}

.back-btn{
  position:absolute; top:16px; left:16px; z-index:5; display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-body); font-weight:700; font-size:.68rem; letter-spacing:.04em;
  color:var(--accent-deep); background:var(--white); border:none; border-radius:999px; padding:.5em 1em; cursor:pointer;
  box-shadow:0 6px 14px -6px rgba(142,92,105,.3); transition:transform .2s ease;
}
.back-btn:hover{transform:translateY(-1px);}
.back-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* ---------- photo placeholders ---------- */
.photo-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:repeating-linear-gradient(135deg, var(--pink-bg-deep) 0 14px, var(--pink-bg) 14px 28px);
  border:2px dashed var(--accent); color:var(--accent-deep);
  text-align:center; font-family:var(--font-body); font-weight:700; font-size:.8rem; padding:10px;
}
.photo-placeholder .cam-icon{width:34px; height:34px; stroke:var(--accent-deep); fill:none; stroke-width:2;}
.photo-placeholder .cam-icon.small{width:24px; height:24px;}
.photo-placeholder.small{width:100%; height:100%; padding:6px; gap:4px;}
.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;}
.page-photo{padding:0; justify-content:flex-end;}
.cinematic-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, var(--night) 10%, rgba(44,34,48,.55) 50%, rgba(44,34,48,.2) 80%);}
.stars{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;}

/* ---------- mascot (shared) ---------- */
.mascot-svg{width:100%; display:block;}
.mascot-static{width:130px; margin:6px auto; animation:mascot-idle 2.4s ease-in-out infinite;}
@keyframes mascot-idle{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* ---------- 1. quest intro ---------- */
.intro-inner{padding:0 8px;}
.quest-name{font-size:clamp(2rem,11vw,2.8rem); margin:.1em 0;}
.quest-tagline{font-family:var(--font-body); font-weight:600; font-style:italic; color:var(--ink-soft); margin:6px 0 18px;}
.signpost-row{display:flex; flex-direction:column; gap:8px; max-width:220px; margin:0 auto;}
.signpost{
  display:flex; align-items:center; gap:10px; background:var(--white); border:none; border-radius:999px;
  padding:.6em 1.1em; font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--accent-deep);
  cursor:pointer; box-shadow:0 6px 14px -8px rgba(142,92,105,.3); transition:transform .15s ease;
}
.signpost:hover{transform:translateX(3px);}
.signpost:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.signpost-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;}

/* ---------- 2. mini game ---------- */
.game-inner{display:flex; flex-direction:column; height:100%; gap:14px;}
.game-header{text-align:center;}
.level-badge{
  display:inline-block; background:var(--white); color:var(--accent-deep); font-family:var(--font-head);
  font-weight:700; font-size:.78rem; padding:.3em 1em; border-radius:999px; margin-bottom:8px;
  box-shadow:0 6px 14px -8px rgba(142,92,105,.3);
}
#gameHeading{font-size:clamp(1.5rem,7vw,1.9rem); line-height:1.15;}
.counters{display:flex; justify-content:center; gap:10px;}
.skip-game{align-self:center;min-height:44px;border:0;background:transparent;color:var(--ink-soft);font:600 .78rem var(--font-body);text-decoration:underline;text-underline-offset:4px;cursor:pointer;opacity:.82;}
.skip-game:hover,.skip-game:focus-visible{color:var(--accent-deep);opacity:1;}
.counter{
  display:inline-flex; align-items:center; gap:6px; background:var(--white); color:var(--accent-deep); font-weight:700; font-size:.95rem;
  padding:.5em 1em; border-radius:999px; box-shadow:0 6px 14px -6px rgba(142,92,105,.24); transition:transform .15s ease;
}
.counter.bump{transform:scale(1.12);}
.game-area{
  position:relative; flex:1; min-height:340px; border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.15));
  border:2px dashed rgba(255,255,255,.8); overflow:hidden; touch-action:manipulation;
}
.falling-item{
  position:absolute; top:-10%; transform:translateX(-50%); font-size:2rem; line-height:1;
  background:none; border:none; padding:6px; cursor:pointer;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.15));
  animation-name:fall; animation-timing-function:linear; animation-fill-mode:forwards;
  -webkit-tap-highlight-color:transparent;
}
@keyframes fall{from{ top:-10%; transform:translateX(-50%) rotate(0deg); } to{ top:112%; transform:translateX(-50%) rotate(360deg); }}
.falling-item.caught{animation:none; opacity:0; transform:translateX(-50%) scale(1.6); transition:opacity .25s ease, transform .25s ease;}
.mascot{position:absolute; left:50%; bottom:6px; transform:translateX(-50%); width:150px; z-index:3; pointer-events:none;}
.mascot .mascot-svg{animation:mascot-idle 2.4s ease-in-out infinite;}
.speech-bubble{
  position:absolute; top:-18px; left:50%; transform:translate(-50%,0); background:var(--white); color:var(--accent-deep);
  font-family:var(--font-head); font-weight:700; font-size:1.05rem; padding:.4em .9em; border-radius:14px;
  box-shadow:0 8px 16px -6px rgba(142,92,105,.26); animation:pop-in .3s ease;
}
.speech-bubble::after{content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); border:8px solid transparent; border-top-color:var(--white);}
@keyframes pop-in{from{opacity:0; transform:translate(-50%,10px) scale(.8);} to{opacity:1; transform:translate(-50%,0) scale(1);}}

.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;}}

/* ---------- 3. bouquet builder ---------- */
.bouquet-illustration{width:140px; height:140px; margin:10px auto;}
.bouquet-note{font-family:var(--font-head); font-weight:600; color:var(--accent-deep); margin:0;}

/* ---------- 4. reward reveal ---------- */
.reveal-photo-wrap{display:flex; flex-direction:column; gap:10px; align-items:center; margin:10px 0;}
.reveal-polaroid{
  width:min(230px,66vw); background:var(--white); padding:10px 10px 26px; margin:0;
  box-shadow:0 14px 28px -12px rgba(142,92,105,.35); transform:rotate(-2deg);
  font-family:var(--font-head); font-weight:600; font-size:.85rem; color:var(--accent-deep); text-align:center;
}
.reveal-polaroid .photo-main-slot{aspect-ratio:1; width:100%;}
.reveal-polaroid figcaption{margin-top:8px;}
.reveal-accents{display:flex; gap:10px;}
.reveal-accents .photo-placeholder{width:64px; height:64px; border-radius:14px;}

/* ---------- 5. pick a gift box ---------- */
.box-row{display:flex; justify-content:center; gap:14px; margin:16px 0 6px;}
.gift-box{
  position:relative; width:96px; height:110px; border:none; cursor:pointer; border-radius:14px 14px 6px 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; padding:10px 6px 12px;
  color:#fff; transition:transform .2s ease;
}
.gift-box:hover{transform:translateY(-4px);}
.gift-box:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.box-pink{background:linear-gradient(160deg,#e7aeb2,var(--accent-deep));}
.box-purple{background:linear-gradient(160deg,#cbb3e6,var(--purple));}
.box-green{background:linear-gradient(160deg,#b7d9ba,var(--green));}
.box-lid{position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:70%; height:20px; background:rgba(255,255,255,.35); border-radius:8px;}
.box-icon{font-size:1.6rem;}
.box-label{font-family:var(--font-head); font-weight:700; font-size:.72rem; text-align:center;}
.box-hint{font-family:var(--font-body); font-style:italic; color:var(--ink-soft); margin-top:16px;}

/* ---------- cute message ---------- */
.note-card{background:var(--white); border-radius:22px; padding:30px 24px; box-shadow:0 16px 34px -16px rgba(142,92,105,.28); max-width:320px; margin:0 auto;}
.note-eyebrow{font-family:var(--font-head); font-weight:700; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0 0 .6em;}
.note-text{font-family:var(--font-head); font-weight:600; font-size:1.2rem; line-height:1.4; color:var(--ink); margin:0;}

/* ---------- 6. memory puzzle ---------- */
.puzzle-board{position:relative; width:min(260px,72vw); aspect-ratio:1; margin:16px auto;}
.puzzle-photo{position:absolute; inset:0; width:100%; height:100%;}
.puzzle-pieces{position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);}
.puzzle-piece{
  border:1px solid rgba(255,255,255,.7); background:var(--pink-bg-deep); cursor:pointer;
  transition:opacity .4s ease, transform .4s ease;
}
.puzzle-piece.placed{opacity:0; pointer-events:none; transform:scale(.8);}
.puzzle-hint{font-family:var(--font-body); font-weight:600; color:var(--ink-soft); margin-top:4px;}

/* ---------- 7. birthday bingo ---------- */
.bingo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:300px; margin:14px auto 8px;}
.bingo-cell{
  aspect-ratio:1; border-radius:12px; border:1px solid var(--pink-bg-deep); background:var(--white);
  color:var(--ink); font-family:var(--font-body); font-weight:700; font-size:.68rem; padding:6px;
  cursor:pointer; display:grid; place-items:center; text-align:center; transition:background .2s ease, transform .15s ease;
}
.bingo-cell:hover{transform:translateY(-2px);}
.bingo-cell.matched{background:var(--accent); color:#fff;}
.bingo-free{font-size:1.3rem; color:var(--accent);}
.bingo-cell.bingo-free.matched{background:var(--gold); color:#fff;}
.bingo-result{font-family:var(--font-head); font-weight:700; font-size:1.2rem; color:var(--accent-deep); margin-top:10px;}

/* ---------- 8. make a wish ---------- */
.cake-illustration{width:150px; height:150px; margin:6px auto;}
.cake-caption{font-family:var(--font-body); font-weight:600; color:var(--ink-soft); max-width:30ch; margin:0 auto;}
.wish-made{font-family:var(--font-head); font-weight:600; color:var(--accent-deep); margin-top:10px;}

/* ---------- 9. love meter ---------- */
.love-heart{position:relative; width:min(220px,60vw); margin:16px auto; background:none; border:none; padding:0; cursor:pointer;}
.love-heart svg{width:100%; display:block; filter:drop-shadow(0 10px 16px rgba(142,92,105,.3));}
#loveFill{clip-path:inset(100% 0 0 0); transition:clip-path .3s ease;}
.love-percent{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-20%);
  font-family:var(--font-head); font-weight:800; font-size:1.6rem; color:var(--accent-deep);
}
.love-hint{font-family:var(--font-body); font-weight:600; font-style:italic; color:var(--ink-soft);}

/* ---------- 11. final bouquet (letter) ---------- */
.letter-inner{display:flex; flex-direction:column; gap:10px; align-items:center;}
.letter-card{
  position:relative; width:100%; background:var(--white); border-radius:20px; padding:22px 20px 20px;
  box-shadow:0 14px 30px -14px rgba(142,92,105,.3); text-align:left;
}
.letter-ribbon{width:100%; height:20px; margin-bottom:8px;}
.letter-eyebrow{font-family:var(--font-head); font-weight:700; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin:0;}
.letter-body{font-family:var(--font-body); font-weight:600; font-size:.95rem; line-height:1.75; color:var(--ink); white-space:pre-line; margin:.6em 0 1em;}
.signature{font-family:var(--font-body); font-weight:700; font-size:.9rem; color:var(--accent-deep); margin:0;}

.music-badge{
  display:flex; align-items:center; gap:12px; width:100%; margin-top:14px;
  background:var(--white); border:2px solid var(--pink-bg-deep); border-radius:999px;
  padding:10px 14px; cursor:pointer; text-align:left; transition:background .2s ease, transform .15s ease;
}
.music-badge:hover{transform:translateY(-1px);}
.music-badge.playing{background:var(--accent); border-color:var(--accent-deep);}
.music-badge.playing .music-label, .music-badge.playing .music-meta, .music-badge.playing .play-icon{color:var(--white);}
.music-icon{font-size:1.3rem;}
.music-text{flex:1; display:flex; flex-direction:column;}
.music-label{font-weight:700; font-size:.85rem; color:var(--accent-deep);}
.music-meta{font-size:.72rem; color:var(--ink-soft);}
.play-icon{font-size:1rem; color:var(--accent-deep);}
.youtube-wrap{border-radius:16px; overflow:hidden; box-shadow:0 10px 24px -14px rgba(142,92,105,.26); width:100%; margin-top:14px;}
.youtube-wrap iframe{display:block; width:100%; aspect-ratio:16/9; height:auto; border:0;}

/* ---------- 12. ending (quest complete) ---------- */
.closing-inner{text-align:center; padding:0 20px 60px;}
.closing-quote{font-family:var(--font-head); font-weight:600; font-size:1.15rem; color:#fff; margin:.4em 0;}
.closing-thanks{font-family:var(--font-body); font-weight:600; color:rgba(255,255,255,.8); margin:0 0 6px;}

/* ---------- responsive ---------- */
@media (max-width:380px){
  .page{padding:28px 18px;}
  .game-area{min-height:300px;}
  .box-row{gap:8px;}
}

/* ---------- reduced motion ----------
   Keep the game itself functional (falling items still fall), but
   trim the purely decorative motion: mascot idle bob, confetti duration. */
@media (prefers-reduced-motion: reduce){
  .mascot-svg, .mascot-static{animation:none;}
  .confetti-piece{animation-duration:.5s !important;}
  .speech-bubble{animation-duration:.01s;}
}