/* Bubbles. The garden is a canvas filling the stage (light in both
   themes); words sit over its top, Dip and Blow over its bottom. In full
   screen the stage fills the window. */
.bb [hidden] { display: none !important; }
.bb .crumb { display: inline-block; margin: 0 0 0.4rem; font-family: var(--font-display); font-size: var(--step--1); color: var(--ink-soft); }
.bb-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.bb-head h1 { margin: 0; flex: 1; font-size: 1.6rem; }
.bb-sound { display: flex; align-items: center; gap: 0.5rem; }
.bb-stage {
  position: relative; height: clamp(20rem, calc(100dvh - 12rem), 44rem);
  border-radius: var(--radius); overflow: hidden; border: 2px solid var(--rule); box-shadow: var(--shadow);
  user-select: none; -webkit-user-select: none; background: #e8f6ff;
}
.bb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.bb-canvas:focus-visible { outline: 3px solid var(--candyfloss-deep); outline-offset: -3px; }
.bb-top { position: absolute; top: 0.6rem; left: 0.6rem; right: 0.6rem; display: flex; justify-content: space-between; align-items: start; gap: 0.5rem; pointer-events: none; }
.bb-hint, .bb-count, .bb-toast {
  margin: 0; background: rgb(255 250 253 / 0.88); color: #4a2545; border-radius: 1rem; padding: 0.35rem 0.8rem;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.08); font-size: var(--step--1); line-height: 1.35; max-width: 30rem;
}
.bb-count { font-family: var(--font-display); white-space: nowrap; }
.bb-toast {
  position: absolute; left: 50%; top: 32%; transform: translateX(-50%); max-width: 90%; text-align: center;
  font: 600 var(--step-0) var(--font-display); background: #fff0f7; border: 2px solid var(--candyfloss-deep);
  animation: bb-in 400ms ease both; pointer-events: none;
}
@keyframes bb-in { from { opacity: 0; transform: translate(-50%, 8px) scale(0.95); } }
@media (prefers-reduced-motion: reduce) { .bb-toast { animation: none; } }
.bb-controls { position: absolute; right: 0.6rem; bottom: 0.6rem; display: flex; gap: 0.4rem; }
.bb-controls button { box-shadow: 0 2px 8px rgb(0 0 0 / 0.12); }
.bb-blow { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.bb-picks { display: grid; gap: 0.6rem; margin-top: 0.8rem; }
.bb-pick h2, .bb-about h2 { font-family: var(--font-display); font-size: var(--step-0); margin: 0 0 0.3rem; }
.bb-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bb-chips [aria-checked='true'] { background: var(--candyfloss); color: #4a2545; outline: 2px solid var(--candyfloss-deep); }
.bb-about { margin-top: 1.2rem; }
.bb-jobs { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.bb-jobs li { display: flex; gap: 0.5rem; align-items: start; background: var(--card); border-radius: 1rem; padding: 0.45rem 0.7rem; }
.bb-jobs b { display: block; font-family: var(--font-display); font-weight: 500; }
.bb-jobs small { color: var(--ink-soft); }
.bb-tick { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--rule); display: grid; place-items: center; font-weight: 700; }
.bb-jobs .done .bb-tick { background: var(--mint, #bfe8c8); border-color: transparent; color: #4a2545; }
.bb-totals { color: var(--ink-soft); margin: 0.6rem 0 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Full screen: the stage is the whole window, the rest scrolls under it. */
.fs.full .bb .crumb { display: none; }
.fs.full .bb-stage { height: calc(100dvh - 9rem - 2 * var(--edge-y, 0.5rem)); }