/*!
 * Bell Babies v2 — the cover's navy nursery around the same room (with js/kid-kit.js).
 * Colours from the cover (covers/bell-babies/scene.js): wall #27304d (World's
 * "Deep Navy"), trim #1b233e, oak floor #d8ac74 with #c2935c boards, Care
 * Hearts #ea6ba3. The room itself keeps the child's own World wall and floor.
 */
html:has(body.is-v2), body.bb-page.is-v2 { background: #27304d; }
body.is-v2 .bb-hearts { color: #fff; }
html.kk-menu-on body.is-v2 { overflow: hidden; }

/* ── the front screen ─────────────────────────────────────────────────── */
.v2-bb-menu .kk-scene svg.v2-floor { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2-bb-menu .kk-scene .v2-window { position: absolute; left: max(16px, 4vw); top: calc(max(10px, env(safe-area-inset-top)) + 84px); width: clamp(96px, 13vw, 170px); filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.25)); }
.v2-bb-menu .kk-scene .v2-star { position: absolute; right: max(26px, 8vw); top: calc(max(10px, env(safe-area-inset-top)) + 150px); width: clamp(58px, 8vw, 104px); filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.25)); animation: v2-twinkle 3.4s ease-in-out infinite; }
@keyframes v2-twinkle { 50% { rotate: 8deg; scale: 1.06; } }
@media (max-width: 700px) {
  .v2-bb-menu .kk-scene .v2-window { width: 84px; top: calc(max(10px, env(safe-area-inset-top)) + 70px); }
  .v2-bb-menu .kk-scene .v2-star { width: 52px; top: calc(max(10px, env(safe-area-inset-top)) + 136px); right: 24px; }
}
@media (max-height: 500px) { .v2-bb-menu .kk-scene .v2-window, .v2-bb-menu .kk-scene .v2-star { display: none; } }
.v2-pet-ico { position: relative; display: block; width: 100%; height: 100%; }
.v2-pet-ico img { position: absolute; left: -10%; top: -16%; width: 120%; height: 120%; object-fit: contain; }
.v2-pet-ico svg { position: absolute; left: -12%; top: -14%; width: 124%; height: 124%; overflow: visible; }
/* the grown-up C stands on the floor, beside the buttons */
.v2-bb-menu .kk-hero { bottom: 2%; width: clamp(240px, 27vw, 400px); }
@media (prefers-reduced-motion: reduce) { .v2-bb-menu .kk-scene .v2-star { animation: none; } }
/* the sheet starts below the shared chrome (Menu pill, coins) */
body.is-v2 .kk-menu[data-view="sheet"] .kk-sheet {
  top: calc(50% + 32px + env(safe-area-inset-top) / 2);
  max-height: calc(100svh - 88px - env(safe-area-inset-top));
}
.kk-sheet .kk-list li { flex-wrap: wrap; row-gap: 0; }
/* A phone on its side: the title and buttons shrink so both fit. */
@media (max-height: 500px) and (orientation: landscape) {
  .v2-bb-menu .kk-front { padding: 54px 16px 22px; gap: 10px; }
  .v2-bb-menu .kk-word { font-size: clamp(48px, 18vh, 80px); }
  .v2-bb-menu .kk-kicker { font-size: clamp(26px, 8vh, 40px); }
  .v2-bb-menu .kk-btn { width: clamp(130px, 19vw, 176px); border-radius: 26px; }
  .v2-bb-menu .kk-btn b { font-size: 22px; }
}

/* ── v2 (2026-10-09): the baby is the star ────────────────────────────────
   The page is the navy Dressing Room; the stage is a postcard scene (white
   frame, flat, no shadows); the rig baby stands big in the middle; five care
   buttons sit underneath, pictures first; a tray takes the buttons' place
   while it is open (nothing moves). */
body.is-v2 { --slot: 104px; }
body.is-v2 .bb-app { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) var(--slot); gap: 8px; max-width: 1180px; }
body.is-v2 .bb-top { min-height: 48px; gap: 12px; }
body.is-v2 .bb-name { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps; font-size: 28px; color: #fff; text-shadow: 0 0.07em 0 rgba(0, 0, 0, 0.3); }
body.is-v2 .bb-stagename { color: #fdfbf6; opacity: 0.75; }
body.is-v2 .bb-hbar { background: rgba(255, 255, 255, 0.18); height: 14px; }
body.is-v2 .bb-hfill { background: #ea6ba3; }

/* the stage: a postcard */
body.is-v2 .bb-stage { border-radius: 28px; box-shadow: none; background: #8fd6f4; touch-action: none; user-select: none; -webkit-user-select: none; }
body.is-v2 .bb-stage::after { content: ""; position: absolute; inset: 0; border: 6px solid #fdfaf2; border-radius: inherit; pointer-events: none; z-index: 9; }
body.is-v2 .bb-room { overflow: hidden; }
.bbv-stage .scene { position: absolute; inset: 0; overflow: hidden; container-type: size; transition: opacity .45s ease; }
.bbv-stage .scene.out { opacity: 0; }
.bbv-stage .scene > *, .bbv-thumb .scene > * { position: absolute; display: block; }
.bbv-stage .scene .sky, .bbv-thumb .scene .sky { inset: 0; }
.bbv-stage .scene .ground { left: 0; right: 0; bottom: 0; width: 100%; height: var(--ground, 22%); }
.bbv-thumb .scene .ground { left: 0; right: 0; bottom: 0; width: 100%; height: 28%; }
.scene .disc { border-radius: 50%; aspect-ratio: 1; }
.scene .cloud { width: 20cqmin; animation: bbv-drift 38s linear infinite alternate; }
.scene .cloud.slow { animation-duration: 54s; }
@keyframes bbv-drift { from { transform: translateX(-6cqw); } to { transform: translateX(6cqw); } }
.scene .sea { left: 0; right: 0; bottom: calc(var(--ground, 22%) - 3px); height: 13cqh; background: #4aa9c4; overflow: hidden; }
.bbv-thumb .scene .sea { bottom: 27%; }
.scene .waves { left: -20%; width: 140%; height: 100%; animation: bbv-waves 7s ease-in-out infinite alternate; }
@keyframes bbv-waves { from { transform: translateX(0); } to { transform: translateX(6%); } }
.scene .gull { width: 10cqmin; animation: bbv-glide 26s linear infinite; }
@keyframes bbv-glide { from { transform: translateX(-30cqw); } to { transform: translateX(120cqw); } }
.scene .shaft { top: -5%; height: 110%; width: 9cqw; background: rgba(255,255,255,.1); transform: skewX(-14deg); animation: bbv-shaft 6s ease-in-out infinite alternate; }
@keyframes bbv-shaft { from { opacity: .35; } to { opacity: 1; } }
.scene .bubble { bottom: 12cqh; width: 2.4cqmin; border-radius: 50%; aspect-ratio: 1; border: .5cqmin solid rgba(255,255,255,.7); animation: bbv-rise 7s linear infinite; }
@keyframes bbv-rise { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(-95cqh); opacity: 0; } }
.scene .weed { bottom: 4cqh; width: 7cqmin; transform-origin: 50% 100%; animation: bbv-sway 4.5s ease-in-out infinite alternate; }
@keyframes bbv-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.scene .glow { border-radius: 50%; aspect-ratio: 1; background: #ffb35c; animation: bbv-glow 1.3s ease-in-out infinite alternate; }
@keyframes bbv-glow { from { opacity: .05; transform: scale(.96); } to { opacity: .11; transform: scale(1.04); } }
.scene .star { width: .9cqmin; border-radius: 50%; aspect-ratio: 1; background: #fff; animation: bbv-twinkle 2.6s ease-in-out infinite alternate; }
@keyframes bbv-twinkle { from { opacity: .25; } to { opacity: 1; } }
.bbv-sky { cursor: pointer; pointer-events: auto; z-index: 1; }
body.is-v2 .bb-room { pointer-events: none; }
body.is-v2 .bb-room .bbv-sky { pointer-events: auto; }
body.is-v2 .bb-layer { pointer-events: none; }
body.is-v2 .bb-layer > * { pointer-events: auto; }
body.is-v2 .bb-layer > .bbv-fx { pointer-events: none; }

/* the baby: the rig's 200-unit box, sized and placed by the stage script */
body.is-v2 .bb-bell { position: absolute; bottom: auto; transform: none; z-index: 2; aspect-ratio: auto; transform-origin: 50% 97%; }
body.is-v2 .bb-bell-inner { transition: none; }
body.is-v2 .bb-bell-inner svg { overflow: visible; }
body.is-v2 .bb-bell:focus-visible { outline: 4px solid #ffd35c; outline-offset: -10px; border-radius: 40%; }

/* the things in the scene: World art, tappable */
.bbv-obj { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.bbv-obj .bbv-wob { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.bbv-obj svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bbv-obj:focus-visible { outline: 4px solid #ffd35c; outline-offset: 4px; border-radius: 12px; }
.bbv-obj.bbv-toy { cursor: grab; }
.bbv-lamp-off .bb-frame::after { content: ""; position: absolute; inset: 0; background: rgba(15, 18, 45, 0.38); pointer-events: none; z-index: 6; transition: opacity .4s; }

/* needs: five small flat meters on the stage, top left */
body.is-v2 .bb-needs { position: absolute; z-index: 7; left: 14px; top: 14px; right: 74px; justify-content: flex-start; gap: 6px; pointer-events: none; }
body.is-v2 .bb-need { background: #fdfbf6; color: #1b233e; padding: 4px 8px 4px 5px; gap: 5px; border-radius: 999px; }
body.is-v2 .bb-need .i { width: 22px; height: 22px; font-size: 0; }
body.is-v2 .bb-need .i svg { width: 100%; height: 100%; display: block; }
body.is-v2 .bb-need .bar { width: 34px; height: 8px; background: #e6e3ef; }
body.is-v2 .bb-need .fill { background: #6ab845; }
body.is-v2 .bb-need.is-low .fill { background: #f39422; }

/* the speech bubble: a picture, flat */
body.is-v2 .bb-bubble { box-shadow: none; z-index: 8; display: flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 22px; color: #1b233e; }
.bbv-bi { display: block; width: 34px; height: 34px; }
.bbv-bi svg { width: 100%; height: 100%; display: block; }
body.is-v2 .bb-bubble b { font-weight: 900; font-size: 24px; }
body.is-v2 .bb-float { z-index: 8; color: #1b233e; background: #fdfbf6; border-radius: 999px; padding: 2px 10px 2px 12px; font-size: 22px; display: flex; align-items: center; gap: 2px; }
.bbv-fi { display: inline-block; width: 26px; height: 26px; }
.bbv-fi svg { width: 100%; height: 100%; display: block; }
body.is-v2 .bb-zzz { color: #fff; z-index: 8; font-size: 30px; }
body.is-v2 .bb-poop { z-index: 5; }

/* fx: flat sparkles, hearts, suds, crumbs, the blanket, a dragged food */
.bbv-fx { position: absolute; pointer-events: none; z-index: 8; }
.bbv-fx svg, .bbv-fx img { width: 100%; height: 100%; display: block; overflow: visible; }
.bbv-spark svg { fill: currentColor; }
.bbv-suds { border-radius: 50%; background: #fff; border: 3px solid #a7dfe8; z-index: 6; }
.bbv-suds::after { content: ""; position: absolute; left: 22%; top: 20%; width: 22%; height: 22%; border-radius: 50%; background: #d9f3f7; }
.bbv-crumb { border-radius: 50%; background: #b98a4f; }
.bbv-blanket { z-index: 3; }
.bbv-food { z-index: 7; }
.bbv-ghost { position: fixed; z-index: 100; width: 76px; height: 76px; transform: translate(-50%, -60%) scale(1.15); pointer-events: none; }
.bbv-ghost svg, .bbv-ghost img { width: 100%; height: 100%; display: block; }

/* the care buttons: white tiles, a picture, a short Nunito word, a note-coloured ledge */
body.is-v2 .bb-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; height: var(--slot); }
body.is-v2 .bb-act { background: #fdfbf6; color: #1b233e; border-radius: 22px; box-shadow: 0 5px 0 var(--c, #c8c4d6); min-height: 0; height: calc(var(--slot) - 6px); padding: 6px 4px; gap: 2px; }
body.is-v2 .bb-act .bbv-pic { display: block; width: 58px; height: 52px; }
body.is-v2 .bb-act .bbv-pic svg, body.is-v2 .bb-act .bbv-pic img { width: 100%; height: 100%; display: block; object-fit: contain; overflow: visible; }
/* Rob's blueberry has wide margins: show it bigger */
body.is-v2 .bb-act .bbv-pic img[src*="blueberry"], body.is-v2 .bb-pick .art img[src*="blueberry"], .bbv-food img[src*="blueberry"] { transform: scale(1.7); }
body.is-v2 .bb-act b { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; font-size: 17px; letter-spacing: 0; }
body.is-v2 .bb-act.is-on { background: var(--c, #ea6ba3); color: #fff; }
body.is-v2 .bb-act:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--c, #c8c4d6); }
/* Dress and Scene: small round buttons on the stage, top right */
body.is-v2 .bb-act.bbv-round { position: absolute; z-index: 8; right: max(26px, calc(env(safe-area-inset-right) + 14px)); width: 56px; height: 56px; min-height: 0; border-radius: 50%; padding: 6px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28); }
body.is-v2 .bb-act.bbv-round .bbv-pic { width: 40px; height: 40px; }
body.is-v2 .bb-act[data-act="wardrobe"] { top: calc(max(10px, env(safe-area-inset-top)) + 70px); }
body.is-v2 .bb-act[data-act="room"] { top: calc(max(10px, env(safe-area-inset-top)) + 136px); }
body.is-v2 .bb-act.bbv-round.is-on { background: #ffd35c; color: #1b233e; }
body.is-v2 .bb-act[aria-disabled="true"] { opacity: .45; }

/* the tray takes the buttons' place while it's open: nothing moves */
body.is-v2 .bb-tray { position: absolute; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); height: var(--slot);
  background: #1f2847; color: #fff; border-radius: 22px; padding: 8px 10px 8px 70px; z-index: 9; }
body.is-v2 .bb-app:has(.bb-tray:not(.is-closed)) .bb-actions > .bb-act:not(.bbv-round) { visibility: hidden; }
.bbv-close { position: absolute; z-index: 10; left: calc(max(12px, env(safe-area-inset-left)) + 8px); bottom: calc(max(10px, env(safe-area-inset-bottom)) + (var(--slot) - 52px) / 2);
  width: 52px; height: 52px; border: 0; border-radius: 50%; background: #fff; color: #151c33; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.28); }
.bbv-close svg { width: 26px; height: 26px; }
body.is-v2 .bb-app:not(:has(.bb-tray:not(.is-closed))) .bbv-close { display: none; }
body.is-v2 .bb-pick { background: #2c3760; color: #fff; border-radius: 16px; border-width: 3px; }
body.is-v2 .bb-pick.is-on { border-color: #fff; background: #fff; color: #151c33; }
body.is-v2 .bb-pick .art img { width: 100%; height: 100%; object-fit: contain; }
body.is-v2 .bb-pick .art svg { overflow: visible; }
body.is-v2 .bb-pick[data-scene] { width: 104px; }
body.is-v2 .bb-pick[data-scene] .art { width: 90px; height: 54px; }
.bbv-thumb { position: relative; display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; border: 2px solid #fdfaf2; }
.bbv-thumb .scene { position: absolute; inset: 0; container-type: size; }
.bbv-thumb .scene * { animation: none !important; }
body.is-v2 .bb-sep { background: rgba(255, 255, 255, 0.18); }
body.is-v2 .bb-meter i { background: #009999; }
body.is-v2 .bb-bigbtn { background: #ea6ba3; color: #fff; box-shadow: 0 5px 0 #b84a7d; }
body.is-v2 .bb-activity b { color: #fff; }

/* the cards: the rig in the hero box */
.bbv-hero { width: 100%; height: 100%; }
.bbv-hero svg { width: 100%; height: 100%; display: block; overflow: visible; }
body.is-v2 .bb-card .bb-hero { width: min(64%, 260px); }

/* phones */
@media (max-width: 600px) {
  body.is-v2 { --slot: 88px; }
  body.is-v2 .bb-actions { gap: 6px; }
  body.is-v2 .bb-act { border-radius: 18px; }
  body.is-v2 .bb-act .bbv-pic { width: 44px; height: 40px; }
  body.is-v2 .bb-act b { font-size: 14px; }
  body.is-v2 .bb-name { font-size: 22px; }
  body.is-v2 .bb-top { padding-left: 84px; justify-content: flex-start; }
  body.is-v2 .bb-stagename { display: none; }
  body.is-v2 .bb-hbar { width: 90px; }
  body.is-v2 .bb-needs { gap: 4px; left: 12px; top: 12px; }
  body.is-v2 .bb-need { padding: 3px 6px 3px 4px; }
  body.is-v2 .bb-need .i { width: 18px; height: 18px; }
  body.is-v2 .bb-need .bar { width: 16px; height: 7px; }
  body.is-v2 .bb-needs { right: 66px; }
  body.is-v2 .bb-act.bbv-round { width: 50px; height: 50px; right: 22px; }
  body.is-v2 .bb-act[data-act="wardrobe"] { top: calc(max(10px, env(safe-area-inset-top)) + 64px); }
  body.is-v2 .bb-act[data-act="room"] { top: calc(max(10px, env(safe-area-inset-top)) + 122px); }
  body.is-v2 .bb-tray { padding-left: 66px; }
  body.is-v2 .bb-pick { width: 80px; min-height: 0; height: 100%; }
  body.is-v2 .bb-pick .art { width: 44px; height: 44px; }
}
/* a phone on its side */
@media (max-height: 500px) and (orientation: landscape) {
  body.is-v2 { --slot: 64px; }
  body.is-v2 .bb-app { gap: 5px; }
  body.is-v2 .bb-top { min-height: 38px; }
  body.is-v2 .bb-name { font-size: 22px; }
  body.is-v2 .bb-act { flex-direction: row; gap: 6px; border-radius: 18px; }
  body.is-v2 .bb-act .bbv-pic { width: 40px; height: 36px; }
  body.is-v2 .bb-act .bbv-pic img[src*="blueberry"] { transform: scale(1.25); }
  body.is-v2 .bb-act.bbv-round { width: 46px; height: 46px; }
  body.is-v2 .bb-act[data-act="wardrobe"] { top: calc(max(8px, env(safe-area-inset-top)) + 54px); }
  body.is-v2 .bb-act[data-act="room"] { top: calc(max(8px, env(safe-area-inset-top)) + 106px); }
  body.is-v2 .bb-need .i { width: 16px; height: 16px; }
  body.is-v2 .bb-need .bar { width: 22px; }
  body.is-v2 .bb-pick { min-height: 0; height: 100%; width: 74px; flex-direction: row; }
  body.is-v2 .bb-pick > span:not(.art) { display: none; }
  body.is-v2 .bb-pick .art { width: 40px; height: 40px; }
  body.is-v2 .bb-pick[data-scene] .art { width: 62px; height: 40px; }
  body.is-v2 .bb-tray { padding-top: 5px; padding-bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) { .bbv-stage .scene * { animation: none !important; } }
/* the adoption and growth cards: white, no outline, a Grobold title */
body.is-v2 .bb-overlay { background: rgba(15, 18, 40, 0.6); }
body.is-v2 .bb-card { border: 0; border-radius: 30px; color: #1b233e; box-shadow: none; }
body.is-v2 .bb-card h2 {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  font-size: 36px; line-height: 1; color: #e72829; text-shadow: 0 0.07em 0 #8c1718;
}
body.is-v2 .bb-names button { color: #1b233e; }
body.is-v2 .bb-names button.is-on { border-color: #ea6ba3; background: #fde7f1; }
/* a phone on its side: the adoption card is taller than the screen, so the veil scrolls */
body.is-v2 .bb-overlay { overflow-y: auto; place-items: safe center; }