/* ---------- Baby Care (all classes prefixed bb-) ---------- */
.bb-room { position: absolute; inset: 0; background-size: cover; background-position: center; overflow: hidden; touch-action: none; }
.bb-night { position: absolute; inset: 0; background: #1b1740; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; z-index: 3; }
.bb-room.bb-dark .bb-night { opacity: .45; }
.bb-stars { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity 1.2s; }
.bb-room.bb-dark .bb-stars { opacity: 1; }
.bb-star { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; animation: bb-twinkle 1.6s ease-in-out infinite alternate; }
@keyframes bb-twinkle { from { opacity: .3; transform: scale(.7); } to { opacity: 1; transform: scale(1.1); } }

.bb-cot { position: absolute; right: 3%; top: 22%; width: 24%; z-index: 5; }
.bb-cot img { width: 100%; display: block; filter: drop-shadow(0 8px 8px rgba(0,0,0,.18)); }
.bb-cot.bb-hot img { transform: scale(1.06); filter: drop-shadow(0 0 22px #ffe066) drop-shadow(0 8px 8px rgba(0,0,0,.18)); }
.bb-cot .bb-sleeper { position: absolute; left: 30%; top: 8%; width: 40%; pointer-events: none; }
.bb-cot .bb-sleeper img { width: 100%; }
.bb-cot .bb-zzz { position: absolute; left: -10%; top: -26%; width: 34%; animation: bb-float 2s ease-in-out infinite; }
@keyframes bb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.bb-baby { position: absolute; width: 20%; transform: translate(-50%, -100%); z-index: 6; touch-action: none; transition: transform .15s; }
.bb-baby img.bb-body { width: 100%; display: block; filter: drop-shadow(0 8px 8px rgba(0,0,0,.2)); pointer-events: none; }
.bb-baby.bb-fuss img.bb-body { animation: bb-fuss .7s ease-in-out infinite; }
.bb-baby.bb-cry img.bb-body { animation: bb-cry .45s ease-in-out infinite; }
.bb-baby.bb-happy-bounce img.bb-body { animation: bb-bounce .5s ease; }
.bb-baby.bb-dragging { z-index: 40; transition: none; pointer-events: none; }
.bb-baby.bb-dragging img.bb-body { transform: scale(1.06); filter: drop-shadow(0 18px 16px rgba(0,0,0,.3)); }
.bb-baby.bb-hidden { display: none; }
@keyframes bb-fuss { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes bb-cry { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes bb-bounce { 0% { transform: translateY(0); } 40% { transform: translateY(-14%) scale(1.06); } 100% { transform: translateY(0); } }
.bb-face { position: absolute; width: 34%; left: 33%; top: -6%; pointer-events: none; opacity: 0; transition: opacity .3s; }
.bb-face img { width: 100%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
.bb-baby.bb-cry .bb-face.bb-face-cry, .bb-baby.bb-glad .bb-face.bb-face-happy { opacity: 1; }
.bb-need { position: absolute; left: 50%; bottom: 96%; width: 62%; transform: translateX(-50%); pointer-events: none; animation: bb-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.bb-need img { width: 100%; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); }
.bb-baby.bb-cry .bb-need { animation: bb-shake .5s ease-in-out infinite; }
@keyframes bb-pop { from { transform: translateX(-50%) scale(0); } to { transform: translateX(-50%) scale(1); } }
@keyframes bb-shake { 0%, 100% { transform: translateX(-50%) rotate(-5deg); } 50% { transform: translateX(-50%) rotate(5deg); } }
.bb-held { position: absolute; width: 42%; left: 60%; top: 20%; pointer-events: none; animation: bb-feed 1s ease-in-out infinite alternate; }
.bb-held img { width: 100%; }
@keyframes bb-feed { from { transform: rotate(-20deg); } to { transform: rotate(-8deg) translateY(3px); } }
.bb-nappy-on { position: absolute; width: 46%; left: 27%; bottom: 4%; pointer-events: none; animation: bb-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.bb-nappy-on img { width: 100%; }
.bb-pats { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); display: flex; gap: 6px; pointer-events: none; }
.bb-pats i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.7); border: 3px solid #fff; }
.bb-pats i.bb-done { background: var(--pink); }

.bb-mess { position: absolute; width: 16%; transform: translate(-50%, -50%); z-index: 5; touch-action: none; }
.bb-mess img { width: 100%; display: block; filter: drop-shadow(0 4px 4px rgba(0,0,0,.12)); pointer-events: none; }
.bb-mess.bb-hot { filter: drop-shadow(0 0 16px #ffe066); }

.bb-tray { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 12px; padding: 10px 100px 10px 12px; background: rgba(255,255,255,.88); z-index: 20; touch-action: none; }
.bb-item { width: 104px; height: 104px; border-radius: 24px; background: #fff; border: 4px solid #fff; box-shadow: 0 5px 0 rgba(120,70,140,.15); display: grid; place-items: center; touch-action: none; transition: transform .12s; }
.bb-item:active { transform: scale(.92); }
.bb-item img { width: 82%; height: 82%; object-fit: contain; pointer-events: none; }
.bb-item.bb-glow { box-shadow: 0 0 0 5px var(--yellow), 0 5px 0 rgba(120,70,140,.15); animation: bb-glow 1s ease-in-out infinite alternate; }
@keyframes bb-glow { from { transform: scale(1); } to { transform: scale(1.08); } }
.bb-drag { position: fixed; width: 130px; height: 130px; transform: translate(-50%, -50%) rotate(-10deg); pointer-events: none; z-index: 60; }
.bb-drag img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 12px rgba(0,0,0,.28)); }

.bb-heart { position: absolute; width: 44px; height: 44px; pointer-events: none; z-index: 30; animation: bb-heart 1.1s ease-out forwards; }
.bb-heart img { width: 100%; height: 100%; }
@keyframes bb-heart { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% - 160px)) scale(1.2) rotate(var(--rot)); opacity: 0; } }

.bb-score { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 40px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); z-index: 20; pointer-events: none; }
.bb-score .ico { width: 40px; height: 40px; }
.bb-score span { font-size: 40px; line-height: 1; background: linear-gradient(90deg, var(--red), var(--orange), #f4c20d, var(--green), var(--blue), var(--indigo), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bb-score span.bb-bump { animation: bb-bump .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bb-bump { 50% { transform: scale(1.4); } }

@media (orientation: portrait) {
  .bb-baby { width: 32%; }
  .bb-cot { width: 38%; top: 14%; }
  .bb-mess { width: 24%; }
  .bb-item { width: 84px; height: 84px; }
  .bb-tray { padding: 8px 8px 8px 8px; flex-wrap: wrap; }
}

/* stork delivery (composited transform animation only) */
.bb-stork { position: absolute; left: 0; top: 10%; width: 26%; z-index: 45; pointer-events: none; will-change: transform; }
.bb-stork img { width: 100%; display: block; }
.bb-stork.bb-fly-in { animation: bb-flyin 3.2s ease-in-out forwards; }
.bb-stork.bb-fly-out { animation: bb-flyout 2.4s ease-in forwards; }
@keyframes bb-flyin { 0% { transform: translate(-120%, 20vh) rotate(-4deg); } 40% { transform: translate(120%, -4vh) rotate(3deg); } 100% { transform: translate(230%, 6vh) rotate(0); } }
@keyframes bb-flyout { 0% { transform: translate(230%, 6vh) scaleX(-1); } 100% { transform: translate(-140%, -30vh) scaleX(-1) rotate(-6deg); } }

/* "another baby" button: locked with a filling ring for 2 minutes, then unlocks */
.bb-more { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); width: 92px; height: 92px; border-radius: 50%; background: #fff; border: 6px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; z-index: 21; overflow: hidden; }
.bb-more .ico { width: 70%; height: 70%; transition: filter .3s, opacity .3s; }
.bb-more.bb-locked { background: conic-gradient(var(--pink) calc(var(--p, 0) * 360deg), #eee4f2 0); }
.bb-more.bb-locked .ico { filter: grayscale(1); opacity: .45; }
.bb-more.bb-locked::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; z-index: -1; }
.bb-more.bb-unlock { animation: bb-unlock .7s cubic-bezier(.3, 1.6, .5, 1), pulse-plain 1.3s ease-in-out .7s infinite; box-shadow: 0 0 0 5px var(--yellow), var(--shadow); }
@keyframes bb-unlock { 0% { transform: scale(.6) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }
.bb-more.bb-hidden { display: none; }

/* ---------- unlockables, bath, food, play, hats, photo, danger ---------- */
.bb-board { gap: 12px; z-index: 22; }
.bb-board .bb-score { position: static; transform: none; }
.bb-board .bb-score span { background: none; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.bb-room { transition: filter .5s; }
.bb-room.bb-swap { filter: brightness(2.2) saturate(.4); }
.bb-danger { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .4s; background: radial-gradient(ellipse at center, transparent 55%, rgba(255,60,60,.45) 100%); }
.bb-room.bb-danger-on .bb-danger { opacity: 1; animation: bb-danger .6s ease-in-out infinite alternate; }
@keyframes bb-danger { from { opacity: .5; } to { opacity: 1; } }

.bb-tub { position: absolute; left: 3%; top: 46%; width: 22%; z-index: 5; }
.bb-tub img { width: 100%; display: block; filter: drop-shadow(0 8px 8px rgba(0,0,0,.18)); }
.bb-tub.bb-hot > img { transform: scale(1.06); filter: drop-shadow(0 0 22px #ffe066) drop-shadow(0 8px 8px rgba(0,0,0,.18)); }
.bb-tub .bb-bather { position: absolute; left: 30%; top: 12%; width: 40%; height: 44%; overflow: hidden; pointer-events: none; animation: bb-float 1.4s ease-in-out infinite; }
.bb-tub .bb-bather img { width: 100%; }
.bb-tub .bb-duck-bob { position: absolute; left: 10%; top: 38%; width: 18%; pointer-events: none; animation: bb-bob 1.1s ease-in-out infinite alternate; }
.bb-tub .bb-duck-bob img { width: 100%; }
@keyframes bb-bob { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-6px) rotate(8deg); } }
.bb-bubble { position: absolute; border-radius: 50%; z-index: 35; touch-action: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(191,233,255,.55) 55%, rgba(120,190,255,.35)); border: 2px solid rgba(255,255,255,.9); box-shadow: inset -6px -6px 12px rgba(255,255,255,.5);
  animation: bb-rise 4s linear forwards; }
@keyframes bb-rise { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% - 62vh)) scale(1.1); opacity: 0; } }

.bb-mobile { position: absolute; right: 9%; top: 3%; width: 12%; z-index: 6; background: none; border: 0; padding: 0; touch-action: manipulation; transform-origin: top center; }
.bb-mobile img { width: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); }
.bb-mobile.bb-spin { animation: bb-swing 1.6s ease-in-out infinite alternate; }
@keyframes bb-swing { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.bb-mobile.bb-hidden, .bb-cam.bb-hidden, .bb-tub.bb-hidden { display: none; }
.bb-cam { position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(108px, calc(env(safe-area-inset-top) + 96px)); z-index: 22; }
.bb-new { animation: bb-newpop .7s cubic-bezier(.3, 1.6, .5, 1), pulse-plain 1.2s ease-in-out .7s 6; box-shadow: 0 0 0 5px var(--yellow), var(--shadow); }
@keyframes bb-newpop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }

.bb-tray { align-items: center; gap: 10px; padding: 8px 10px; }
.bb-tabs { position: absolute; right: 10px; bottom: 100%; margin-bottom: 8px; display: flex; flex-direction: row; gap: 8px; }
.bb-tab { width: 58px; height: 58px; border-radius: 16px; background: #fff; border: 3px solid #f0e6f6; box-shadow: 0 4px 0 rgba(120,70,140,.15); display: grid; place-items: center; touch-action: manipulation; }
.bb-tab img { width: 76%; height: 76%; object-fit: contain; pointer-events: none; }
.bb-tab.active { border-color: var(--pink); box-shadow: 0 4px 0 var(--pink); transform: scale(1.06); }
.bb-tab.bb-glow { box-shadow: 0 0 0 4px var(--yellow), 0 4px 0 rgba(120,70,140,.15); animation: bb-glow 1s ease-in-out infinite alternate; }
.bb-items { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bb-item { width: 96px; height: 96px; position: relative; }
.bb-item.bb-locked img { filter: grayscale(1); opacity: .35; }
.bb-item.bb-locked::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; transform: translate(-50%, -50%); background: url(../assets/img/ui_lock.png) center / contain no-repeat; opacity: .9; }
.bb-price { position: absolute; right: -8px; bottom: -8px; display: flex; align-items: center; gap: 1px; padding: 1px 8px 1px 3px; border-radius: 30px; background: #fff; border: 3px solid var(--pink); box-shadow: 0 3px 0 rgba(0,0,0,.12); font-size: 18px; color: var(--ink); }
.bb-price .ico { width: 24px; height: 24px; }

.bb-hat { position: absolute; left: 26%; top: -22%; width: 48%; pointer-events: none; z-index: 2; }
.bb-hat img { width: 100%; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); animation: bb-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.bb-balloon-on { position: absolute; left: 66%; top: -70%; width: 46%; pointer-events: none; animation: bb-float 2.2s ease-in-out infinite; }
.bb-balloon-on img { width: 100%; }
.bb-face.bb-face-peek { width: 44%; left: 28%; top: -10%; }
.bb-baby.bb-peek .bb-face.bb-face-peek { opacity: 1; }
.bb-baby.bb-peek .bb-face.bb-face-happy, .bb-baby.bb-peek .bb-face.bb-face-cry { opacity: 0; }
.bb-baby.bb-messy::after { content: ""; position: absolute; left: 40%; top: 16%; width: 20%; height: 9%; border-radius: 50%; background: #ffa243; opacity: .75; }
.bb-held.bb-spoon-held { animation: bb-spoon .6s ease-out; left: 56%; top: 6%; }
@keyframes bb-spoon { from { transform: translate(60%, -40%) rotate(-30deg); opacity: 0; } 40% { opacity: 1; } to { transform: translate(0, 0) rotate(-10deg); } }
.bb-held.bb-toy-rattle { animation: bb-rattle .25s ease-in-out infinite alternate; left: 58%; top: 26%; }
@keyframes bb-rattle { from { transform: rotate(-25deg); } to { transform: rotate(25deg); } }
.bb-held.bb-toy-ball { animation: bb-ball .5s ease-in-out infinite alternate; left: 60%; top: 30%; }
@keyframes bb-ball { from { transform: translateY(0); } to { transform: translateY(-40%); } }
.bb-baby.bb-trick-clap img.bb-body { animation: bb-bounce .4s ease 3; }
.bb-baby.bb-trick-roll img.bb-body { animation: bb-roll 1.2s ease-in-out; }
@keyframes bb-roll { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.bb-baby.bb-trick-word img.bb-body { animation: bb-fuss .4s ease-in-out 4; }

.bb-puppy { position: absolute; top: 74%; width: 12%; transform: translate(-50%, -100%); z-index: 5; touch-action: none; }
.bb-puppy img { width: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); pointer-events: none; }
.bb-puppy.bb-run { animation: bb-run 6s ease-in-out; }
@keyframes bb-run { 0% { transform: translate(-50%, -100%); } 25% { transform: translate(calc(-50% + 30vw), -104%) scaleX(1); } 26% { transform: translate(calc(-50% + 30vw), -100%) scaleX(-1); } 75% { transform: translate(calc(-50% - 30vw), -104%) scaleX(-1); } 76% { transform: translate(calc(-50% - 30vw), -100%) scaleX(1); } 100% { transform: translate(-50%, -100%) scaleX(1); } }

.bb-photo { position: relative; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; background: #fff; }
.bb-photo .bb-snap { position: absolute; inset: 0; }
.bb-photo .bb-snap .bb-baby img.bb-body, .bb-photo .bb-snap .bb-puppy { animation: none; }
.babies .gameover-panel .go-score { display: flex; align-items: center; gap: 12px; }
.babies .go-ico { width: 96px; height: 96px; }
@media (orientation: portrait) {
  .bb-tub { width: 32%; top: 42%; }
  .bb-mobile { width: 18%; }
  .bb-tray { padding: 8px; }
  .bb-item { width: 80px; height: 80px; }
}

/* round 2: next-unlock ring, visitors, need timer */
.bb-next { width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--pink) calc(var(--p, 0) * 360deg), #eee4f2 0); display: grid; place-items: center; position: relative; box-shadow: var(--shadow); }
.bb-next::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.bb-next img { position: relative; width: 62%; height: 62%; object-fit: cover; border-radius: 50%; filter: grayscale(.7); opacity: .8; }
.bb-next.bb-hidden { display: none; }
.bb-critter { position: absolute; left: -12%; width: 11%; z-index: 4; touch-action: none; animation: flight 26s linear forwards; }
.bb-critter img { width: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); pointer-events: none; animation: bb-float 1.6s ease-in-out infinite; }
.bb-critter.bb-zoom { animation-duration: 3s !important; }
.bb-need::after { content: ""; position: absolute; left: 50%; top: 100%; width: 22%; height: 8px; transform: translateX(-50%); border-radius: 6px; background: linear-gradient(90deg, #6ddc7a calc(var(--p, 0) * 100%), rgba(255,255,255,.7) 0); border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.bb-need.bb-late::after { background: linear-gradient(90deg, #ffa243 calc(var(--p, 0) * 100%), rgba(255,255,255,.7) 0); }
.bb-need.bb-verylate::after { background: linear-gradient(90deg, #ff5b5b calc(var(--p, 0) * 100%), rgba(255,255,255,.7) 0); animation: bb-glow .4s ease-in-out infinite alternate; }
.bb-tub .bb-duck-bob { pointer-events: auto; touch-action: none; }

/* round 3: tickle, scrub, poppable balloon */
.bb-baby.bb-tickle img.bb-body { animation: bb-tickle .12s ease-in-out infinite alternate; }
@keyframes bb-tickle { from { transform: rotate(-5deg) translateX(-3px); } to { transform: rotate(5deg) translateX(3px); } }
.bb-balloon-on { pointer-events: auto; touch-action: none; }
.bb-tub .bb-bather { pointer-events: auto; touch-action: none; }

/* fun meter: fills with play, bursts into a heart */
.bb-fun { width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--yellow) calc(var(--p, 0) * 360deg), #eee4f2 0); display: grid; place-items: center; position: relative; box-shadow: var(--shadow); transition: background .3s; }
.bb-fun::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.bb-fun .ico { position: relative; width: 62%; height: 62%; }
.bb-fun.bb-bump { animation: bb-bump .35s cubic-bezier(.3, 1.6, .5, 1); }