/* Bell Babies — one room, one bell, five needs, six big buttons.
   Icons first (the players mostly can't read), 56px+ targets, and every
   animation is transform/opacity only. */
:root {
  --ink: #1b233e;
  --paper: #fdfbf6;
  --blush: #fbe4e9;
  --c-red: #e72829;
  --gold: #ffd25b;
  --soft: rgba(27, 35, 62, 0.12);
  --r: 22px;
}
* { box-sizing: border-box; }
/* `hidden` must win over every display rule below (the tray is display:flex). */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body.bb-page {
  background: var(--blush);
  color: var(--ink);
  font-family: Nunito, system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; }

.bb-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  max-width: 1100px;
  margin: 0 auto;
}

/* ── top ─────────────────────────────────────────────────────────────── */
.bb-top {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding-left: 96px;                 /* clear the shared Menu button */
  min-height: 48px;
  flex-wrap: wrap;
}
.bb-id { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.bb-name { font-weight: 900; font-size: 22px; }
.bb-stagename { font-weight: 800; font-size: 14px; opacity: .65; white-space: nowrap; }
.bb-hearts { display: flex; align-items: center; gap: 6px; font-size: 18px; }
.bb-hbar { width: 140px; height: 12px; border-radius: 12px; background: var(--soft); overflow: hidden; position: relative; }
.bb-hfill { position: absolute; inset: 0; transform-origin: left center; background: linear-gradient(90deg, #ff8fa8, var(--c-red)); transform: scaleX(0); transition: transform .6s ease; }

/* ── room ────────────────────────────────────────────────────────────── */
.bb-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(27, 35, 62, .14);
  background: #f6efe1;
}
.bb-room, .bb-layer { position: absolute; inset: 0; }
.bb-room svg { width: 100%; height: 100%; display: block; }
.bb-dim { position: absolute; inset: 0; background: rgba(20, 24, 60, .45); pointer-events: none; transition: opacity .8s ease; }

.bb-bell {
  position: absolute;
  left: 50%; bottom: 13%;
  width: 30%;                          /* 300 of the room's 1000 units at full size */
  aspect-ratio: 1;
  padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  touch-action: manipulation;
}
.bb-bell-inner { display: block; width: 100%; height: 100%; transform-origin: 50% 92%; transition: transform .9s cubic-bezier(.2,.9,.3,1.2); }
.bb-bell-inner svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bb-bell:focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; border-radius: 30%; }
.bb-bell .bb-sway { transform-origin: 50% 92%; animation: bb-breathe 3.2s ease-in-out infinite; }
.is-asleep .bb-bell .bb-sway { animation: bb-breathe 5.5s ease-in-out infinite; }

@keyframes bb-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }

/* reactions — one class at a time, replayed by the script */
.r-bounce  { animation: r-bounce .6s ease-out; }
.r-wiggle  { animation: r-wiggle .7s ease-in-out; }
.r-squish  { animation: r-squish .5s ease-out; }
.r-spin    { animation: r-spin .8s ease-in-out; }
.r-jump    { animation: r-jump .7s cubic-bezier(.3,1.6,.5,1); }
.r-giggle  { animation: r-giggle .6s linear; }
.r-eat     { animation: r-eat .9s ease-in-out; }
.r-shake   { animation: r-giggle .35s linear 4; }
@keyframes r-bounce { 30% { transform: translateY(-14%) scale(.96, 1.05); } 60% { transform: translateY(0) scale(1.06, .94); } }
@keyframes r-wiggle { 20% { transform: rotate(-10deg); } 45% { transform: rotate(9deg); } 70% { transform: rotate(-5deg); } }
@keyframes r-squish { 30% { transform: scale(1.14, .82); } 65% { transform: scale(.94, 1.08); } }
@keyframes r-spin   { 50% { transform: translateY(-10%) rotate(180deg) scale(.9); } 100% { transform: rotate(360deg); } }
@keyframes r-jump   { 35% { transform: translateY(-30%); } 55% { transform: translateY(-30%) rotate(6deg); } }
@keyframes r-giggle { 25% { transform: translateX(-3%); } 75% { transform: translateX(3%); } }
@keyframes r-eat    { 20%, 60% { transform: scale(1.06, .93); } 40%, 80% { transform: scale(.97, 1.04); } }

.bb-bubble {
  position: absolute;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 4px 14px rgba(27, 35, 62, .18);
  font-weight: 900; font-size: 20px; white-space: nowrap;
  transform: translate(-50%, -100%);
  pointer-events: none;
  animation: bb-pop .35s ease-out;
}
.bb-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px;
  background: var(--paper); transform: translateX(-50%) rotate(45deg); border-radius: 3px;
}
@keyframes bb-pop { from { transform: translate(-50%, -80%) scale(.6); opacity: 0; } }

.bb-float {
  position: absolute; pointer-events: none; font-weight: 900; font-size: 22px;
  animation: bb-float 1.4s ease-out forwards;
}
@keyframes bb-float { to { transform: translateY(-90px); opacity: 0; } }

.bb-thing {
  position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translate(-50%, -100%);
}
.bb-thing svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bb-poop { width: 9%; aspect-ratio: 1; animation: bb-plop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes bb-plop { from { transform: translate(-50%, -160%) scale(.4); } }
.bb-food { width: 11%; aspect-ratio: 1; transition: left .6s ease-in, top .6s ease-in, transform .6s ease-in, opacity .3s .5s; }
.bb-food.is-gone { opacity: 0; transform: translate(-50%, -100%) scale(.3); }

.bb-sparkle { position: absolute; pointer-events: none; font-size: 26px; animation: bb-spark 1s ease-out forwards; }
@keyframes bb-spark { 0% { transform: scale(.2) rotate(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.4) rotate(90deg); opacity: 0; } }

.bb-zzz { position: absolute; pointer-events: none; font-weight: 900; font-size: 26px; color: #7b8bd6; animation: bb-zzz 2.4s ease-in-out infinite; }
@keyframes bb-zzz { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(40px, -70px) scale(1.2); opacity: 0; } }

/* ── needs ───────────────────────────────────────────────────────────── */
.bb-needs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.bb-need { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255,255,255,.75); }
.bb-need .i { font-size: 20px; }
.bb-need .bar { width: 54px; height: 9px; border-radius: 9px; background: var(--soft); overflow: hidden; position: relative; }
.bb-need .fill { position: absolute; inset: 0; transform-origin: left center; transition: transform .5s ease; background: #6ab845; }
.bb-need.is-low .fill { background: #f39422; }
.bb-need.is-low .i { animation: bb-nudge 2.4s ease-in-out infinite; }
@keyframes bb-nudge { 0%, 80%, 100% { transform: none; } 88% { transform: rotate(-12deg); } 94% { transform: rotate(10deg); } }

/* ── actions ─────────────────────────────────────────────────────────── */
.bb-actions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.bb-act {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 72px; border: 0; border-radius: var(--r);
  background: var(--paper); box-shadow: 0 3px 0 rgba(27,35,62,.16), 0 4px 14px rgba(27,35,62,.08);
  cursor: pointer; touch-action: manipulation;
  transition: transform .12s ease;
}
.bb-act span { font-size: 30px; line-height: 1; }
.bb-act b { font-weight: 900; font-size: 14px; }
.bb-act:active { transform: translateY(2px) scale(.97); }
.bb-act.is-on { background: var(--ink); color: var(--paper); }
/* Not yet: the wardrobe before Little Bell. Looks asleep AND does nothing. */
.bb-act[aria-disabled="true"] { opacity: .45; cursor: default; box-shadow: none; }
.bb-act[aria-disabled="true"]:active { transform: none; }

/* ── tray ────────────────────────────────────────────────────────────── */
.bb-tray {
  display: flex; gap: 10px; overflow-x: auto; padding: 10px; border-radius: var(--r);
  background: rgba(255,255,255,.8); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  flex: none; height: 112px; align-items: center;   /* fixed: opening it must never move the room */
}
.bb-tray::-webkit-scrollbar { display: none; }
.bb-tray.is-closed { visibility: hidden; }
.bb-tray-label { flex: none; font-weight: 900; font-size: 13px; opacity: .6; writing-mode: vertical-rl; transform: rotate(180deg); }
.bb-pick {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 92px; min-height: 84px; padding: 6px; border: 3px solid transparent; border-radius: 18px;
  background: var(--paper); cursor: pointer; font-weight: 800; font-size: 12px; text-align: center;
  touch-action: manipulation;
}
.bb-pick .art { width: 56px; height: 56px; display: grid; place-items: center; font-size: 34px; }
.bb-pick .art svg { width: 100%; height: 100%; overflow: visible; }
.bb-pick.is-on { border-color: var(--ink); }
.bb-pick.is-new::after { content: "NEW"; position: absolute; transform: translate(26px, -38px); background: var(--c-red); color: #fff; font-size: 10px; font-weight: 900; padding: 1px 6px; border-radius: 8px; }
.bb-pick[aria-disabled="true"] { opacity: .4; cursor: default; }
.bb-pick .lock { font-size: 11px; opacity: .8; }
.bb-sep { flex: none; width: 2px; align-self: stretch; background: var(--soft); border-radius: 2px; }

/* ── activities ──────────────────────────────────────────────────────── */
.bb-activity { display: flex; align-items: center; gap: 14px; justify-content: center; flex: 1; flex-wrap: wrap; }
.bb-dots { display: inline-flex; gap: 8px; }
.bb-dots i { width: 18px; height: 18px; border-radius: 50%; background: var(--soft); transition: transform .2s, background .2s; }
.bb-dots i.on { background: var(--c-red); transform: scale(1.2); }
.bb-bigbtn {
  min-height: 64px; min-width: 150px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 900; font-size: 20px; cursor: pointer;
}
.bb-keys { display: flex; gap: 12px; }
.bb-key {
  width: 76px; height: 76px; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  font-weight: 900; font-size: 22px; box-shadow: 0 4px 0 rgba(0,0,0,.2);
  touch-action: manipulation; transition: transform .1s;
}
.bb-key:active, .bb-key.is-lit { transform: scale(1.12); }
.bb-key.is-hint { animation: bb-nudge 1.2s ease-in-out infinite; }
.bb-meter { width: 200px; height: 20px; border-radius: 20px; background: var(--soft); overflow: hidden; position: relative; }
.bb-meter i { position: absolute; inset: 0; transform-origin: left center; background: linear-gradient(90deg, #6ab845, #009999); transform: scaleX(0); }
.bb-glow { width: 56px; height: 56px; border-radius: 50%; background: var(--c-red); opacity: .15; transition: opacity .15s, transform .15s; }

/* ── overlay ─────────────────────────────────────────────────────────── */
.bb-overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(27, 35, 62, .55);
}
.bb-card {
  background: var(--paper); border-radius: 30px; padding: 24px; width: min(420px, 100%); text-align: center;
  border: 4px solid var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.bb-card h2 { margin: 0 0 6px; font-weight: 900; font-size: 30px; }
.bb-card p { margin: 6px 0; font-weight: 800; opacity: .75; }
.bb-card .bb-hero { width: 60%; margin: 8px auto; aspect-ratio: 1; }
.bb-card .bb-hero svg { width: 100%; height: 100%; overflow: visible; }
.bb-names { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.bb-names button { min-height: 48px; padding: 0 16px; border: 3px solid var(--soft); border-radius: 999px; background: #fff; font-weight: 900; font-size: 17px; cursor: pointer; }
.bb-names button.is-on { border-color: var(--ink); }
.bb-glowing { animation: bb-glow 1.6s ease-in-out infinite; }
@keyframes bb-glow { 50% { filter: drop-shadow(0 0 22px #ffd25b) drop-shadow(0 0 8px #fff); } }
.bb-confetti { position: fixed; top: -30px; pointer-events: none; font-size: 26px; z-index: 60; animation: bb-fall 2.6s ease-in forwards; }
@keyframes bb-fall { to { transform: translateY(110vh) rotate(540deg); } }

/* night: the room dims but the UI stays readable */
.is-asleep .bb-stage { box-shadow: 0 6px 24px rgba(20,24,60,.35); }

/* phones upright: the six buttons wrap to two rows of three */
@media (max-width: 560px) {
  .bb-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-act { min-height: 62px; }
  .bb-top { padding-left: 84px; justify-content: flex-start; }
  .bb-need .bar { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ?cover=1: just the room, edge to edge (the shelf cover is a screenshot of this). */
body.is-cover .bb-top, body.is-cover .bb-needs, body.is-cover .bb-actions, body.is-cover .bb-tray,
body.is-cover .pgc-root, body.is-cover .bb-bubble { display: none !important; }
body.is-cover .bb-app { padding: 0; max-width: none; }
body.is-cover .bb-stage { border-radius: 0; box-shadow: none; }