/*!
 * Bell Hopper v2 — the cover's sky over the same game (with js/kid-kit.js).
 * From covers/bell-hopper/scene.js: sky #8fd6f4, hills #a9dbc4 / #9dd25f,
 * platforms as chunky slabs (note colour, a darker front edge, a white
 * highlight strip, a Grobold letter), the target ringed in white with a flat
 * halo in its own colour. Flat: no gradients, no blur.
 */
html:has(body.is-v2), body.is-v2 { background: #8fd6f4; }
body.is-v2 .bh-scenery .kk-scene { position: absolute; inset: 0; }

/* the game's own grid stays in the page (the kit presses its buttons) but is never seen */
html.kk-menu-on body.is-v2 { overflow: hidden; }
body.is-v2 .bh-menu { visibility: hidden; }

/* a level that isn't reached yet: a little "not yet" shake */
.kk-stone.kk-nope { animation: v2-nope 0.36s ease-in-out; }
@keyframes v2-nope { 25% { translate: calc(-50% - 6px) -50%; } 75% { translate: calc(-50% + 6px) -50%; } }
/* the game's own art as button pictures */
.kk-btn .kk-ico svg { filter: drop-shadow(0 3px 0 rgba(27, 35, 62, 0.18)); }

/* ══ Play (2026-10-09): a Dressing Room postcard per level ═══════════════════
   The world is drawn by assets/v2/hopper-worlds.js into .bh-scenery (fixed,
   behind the game) and dressed by bell-hopper-v2-play.js. Flat: no gradients,
   no shadows under anything, every loop on its own clock. */

/* the HUD: just the progress dots, in the chrome row. No "← Levels" and no
   level-name pill (Rob, 2026-10-09): the round back arrow steps play → map,
   and the name and hop count live on the map and in the grown-ups sheet. */
body.is-v2 .bh-quit, body.is-v2 .bh-progress { display: none; }
body.is-v2 .bh-hud { justify-content: center; padding: 6px 76px 0; min-height: 52px; }
body.is-v2 .bh-dots { background: rgba(255, 255, 255, 0.94); border-radius: 999px; padding: 9px 14px; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .bh-dots i { opacity: 0.28; }
body.is-v2 .bh-dots i.is-done, body.is-v2 .bh-dots i.is-now { opacity: 1; }
body.is-v2 .bh-dots i.is-now { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(27, 35, 62, 0.18); }

body.is-v2 .bh-ask {
  align-self: center; background: #fff; border-radius: 26px; padding: 8px 22px 9px;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12); color: #1b233e;
}
body.is-v2 .bh-ask .bh-ask-note {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400;
  border-radius: 0.6em; box-shadow: 0 0.12em 0 rgba(27, 35, 62, 0.22);
}
body.is-v2 .bh-ask small { color: #6a7392; }

/* the stage is open air: no frame, no painted trail canvas, no pillars */
body.is-v2 .bh-stage, body.is-v2 .bh-stage.is-trail { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
body.bhw-on .bh-stage { max-height: none; }
body.is-v2 .bh-scene, body.is-v2 .bh-pillar { display: none; }

/* ── the world layer ────────────────────────────────────────────────────── */
body.bhw-on .bh-scenery { overflow: hidden; }
.bhw { position: absolute; inset: 0; overflow: hidden; }
.bhw-sky { position: absolute; inset: 0; }
.bhw-layer { position: absolute; inset: 0; }
.bhw-far, .bhw-strip { will-change: transform; }
.bhw-a { position: absolute; display: block; pointer-events: none; }
.bhw-disc { border-radius: 50%; }
.bhw-cloud { animation: bhwDrift 40s ease-in-out infinite alternate; }
@keyframes bhwDrift { from { transform: translateX(calc(var(--dx) * -1)); } to { transform: translateX(var(--dx)); } }
.bhw-gull { animation: bhwGlide 28s linear infinite; }
.bhw-gull path { transform-origin: 50% 70%; animation: bhwFlap .55s ease-in-out infinite alternate; }
@keyframes bhwGlide { from { transform: translateX(0); } to { transform: translateX(var(--gx)); } }
@keyframes bhwFlap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
.bhw-waves { animation: bhwWaves 7s ease-in-out infinite alternate; }
@keyframes bhwWaves { from { transform: translateX(0); } to { transform: translateX(var(--wx)); } }
.bhw-shaft { background: rgba(255, 255, 255, .1); transform-origin: 50% 0; transform: skewX(-14deg); animation: bhwShaft 6s ease-in-out infinite alternate; }
@keyframes bhwShaft { from { opacity: .35; } to { opacity: 1; } }
.bhw-bub { border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: bhwRise 7s linear infinite; }
@keyframes bhwRise { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: .8; } to { transform: translateY(var(--ry)); opacity: 0; } }
.bhw-weed { transform-origin: 50% 100%; animation: bhwSway 4.5s ease-in-out infinite alternate; }
@keyframes bhwSway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.bhw-coral { transform-origin: 50% 100%; animation: bhwCoral 6s ease-in-out infinite alternate; }
@keyframes bhwCoral { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.bhw-fish { animation: bhwSwim 30s linear infinite; }
@keyframes bhwSwim { 0% { transform: translateX(0) scaleX(-1); } 48% { transform: translateX(var(--fx)) scaleX(-1); } 50% { transform: translateX(var(--fx)) scaleX(1); } 98% { transform: translateX(0) scaleX(1); } 100% { transform: translateX(0) scaleX(-1); } }
.bhw-fish .bhw-fin { transform-origin: 44px 17px; animation: bhwTail .5s ease-in-out infinite alternate; }
@keyframes bhwTail { from { transform: scaleY(.8); } to { transform: scaleY(1.1); } }
.bhw-star { border-radius: 50%; background: #fff; animation: bhwTwinkle 2.6s ease-in-out infinite alternate; }
@keyframes bhwTwinkle { from { opacity: .2; } to { opacity: 1; } }
.bhw-flame { transform-origin: 50% 100%; animation: bhwFlame .45s ease-in-out infinite alternate; }
.bhw-flame.b { animation-duration: .38s; animation-delay: -.2s; } .bhw-flame.c { animation-duration: .52s; animation-delay: -.1s; }
@keyframes bhwFlame { from { transform: scale(1, 1) skewX(-3deg); } to { transform: scale(.9, 1.12) skewX(4deg); } }
.bhw-glow { border-radius: 50%; background: #ffb35c; animation: bhwGlow 1.3s ease-in-out infinite alternate; }
@keyframes bhwGlow { from { opacity: .05; transform: scale(.96); } to { opacity: .12; transform: scale(1.04); } }
.bhw-ember { border-radius: 50%; background: #ffc94a; animation: bhwEmber 3s ease-out infinite; }
@keyframes bhwEmber { from { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } to { transform: translate(var(--ex), var(--ey)); opacity: 0; } }
.bhw-hi { animation: bhwTwinkle 2.2s ease-in-out infinite alternate; }
.bhw-ffly { border-radius: 50%; background: #fff3a0; animation: bhwWander 9s ease-in-out infinite alternate, bhwBlink 2.4s ease-in-out infinite; }
@keyframes bhwWander { 0% { transform: translate(0, 0); } 33% { transform: translate(var(--wx), calc(var(--wy) * -1)); } 66% { transform: translate(calc(var(--wx) * -.6), var(--wy)); } 100% { transform: translate(calc(var(--wx) * .4), calc(var(--wy) * .5)); } }
@keyframes bhwBlink { 0%, 100% { opacity: .15; } 40%, 60% { opacity: 1; } }
.bhw-bfly { animation: bhwWander 11s ease-in-out infinite alternate; }
.bhw-bfly .bhw-wing { transform-origin: 50% 50%; animation: bhwWing .22s ease-in-out infinite alternate; }
@keyframes bhwWing { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
.bhw-shoot { height: 2px; border-radius: 2px; background: #fff; transform-origin: 0 50%; animation: bhwShoot 11s ease-in infinite; }
@keyframes bhwShoot { 0%, 88% { transform: translate(0, 0) rotate(18deg) scaleX(.2); opacity: 0; } 90% { opacity: 1; } 100% { transform: translate(var(--sx), var(--sy)) rotate(18deg) scaleX(1); opacity: 0; } }
.bhw-frond { transform-origin: 50% 100%; animation: bhwSway 5.5s ease-in-out infinite alternate; }
.bhw-reduce .bhw *, .bhw-reduce .v2-halo, .bhw-reduce .bh-start-mic, .bhw-reduce .v2-live { animation: none !important; }
.bhw-reduce .bhw-shoot, .bhw-reduce .bhw-ember { display: none; }

/* ── the ledges: the scene's own platforms, the note painted along the top ── */
body.bhw-on .bh-plat {
  background: none; box-shadow: none; color: transparent; text-shadow: none;
  border-radius: 0; overflow: visible; isolation: isolate; animation: none;
}
body.bhw-on .bh-plat::before { display: none; }
body.bhw-on .bh-plat:active { transform: translateY(2px); box-shadow: none; }
body.bhw-on .bh-plat.is-target, body.bhw-on .bh-plat.is-target.is-near { box-shadow: none; animation: none; }
body.bhw-on .bh-plat.is-done { filter: none; }
body.bhw-on .bh-plat.is-ringing { animation: bh-ring 0.35s var(--bh-ease-snap); }
.v2-ledge { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; pointer-events: none; }
.v2-ledge svg { display: block; overflow: visible; }
.v2-badge {
  position: absolute; left: 50%; top: 7px; width: 30px; height: 30px; margin-left: -15px;
  z-index: 2; border-radius: 50%; pointer-events: none; transition: box-shadow .2s;
}
.v2-badge svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the ledge to sing: a white ring and a flat glow in its colour, both sharing
   the LEDGE's centre with even padding all round (Rob, 2026-10-09: the old
   ring sat up and left of the platform). The visible ledge runs 0..34px from
   the walking line (0..31 for clouds), so the halo spans -10..44 (-10..41) and
   its centre is the ledge's; left and right are set from the art's width. */
.v2-halo {
  position: absolute; left: -10px; right: -10px; top: -10px; height: 54px; z-index: 0;
  border-radius: 27px; border: 4px solid #fff; pointer-events: none; box-sizing: border-box;
  background: rgba(255, 255, 255, .6);
  background: color-mix(in srgb, var(--note) 32%, #fff);
  opacity: 0; transform: scale(.92); transform-origin: 50% 50%;
  transition: opacity .25s, transform .25s;
}
body[data-world="day"] .v2-halo, body[data-world="golden"] .v2-halo, body[data-world="night"] .v2-halo { height: 51px; border-radius: 26px; }
.bh-plat.is-target .v2-halo { opacity: 1; transform: scale(1); animation: v2Halo 1.5s ease-in-out infinite; }
.bh-plat.is-target.is-near .v2-halo { animation: none; transform: scale(1.08); background: color-mix(in srgb, var(--note) 50%, #fff); }
.bh-plat.is-target .v2-badge { box-shadow: 0 0 0 3px #fff; }
@keyframes v2Halo { 50% { transform: scale(.95); opacity: .7; } }
.bh-plat.is-done:not(.is-target) .v2-badge { opacity: .75; }

/* the hear button: a round speaker */
body.bhw-on .bh-hear {
  width: 52px; height: 52px; min-height: 0; padding: 0; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #1b233e; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.18);
}
body.bhw-on .bh-hear svg { width: 26px; height: 26px; }
body.is-v2 .bh-hint { background: #fff; color: #1b233e; border-radius: 16px; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12); }
.v2-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── your bell ──────────────────────────────────────────────────────────── */
body.bhw-on:not(.bhw-png) .bh-bell-wrap > img.bh-bell { display: none; }
body.bhw-png .v2-me { display: none; }
.v2-me { position: absolute; inset: 0; transform: scale(1.2); transform-origin: 50% 97%; }
.v2-squash { position: absolute; inset: 0; transform-origin: 50% 97%; transition: rotate .35s ease; }
.v2-squash svg.v2-rig { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
body.bhw-swim .v2-squash { rotate: -9deg; }
.v2-fx { position: absolute; z-index: 6; pointer-events: none; border-radius: 50%; }
.v2-bubble { border: 2px solid rgba(255, 255, 255, .8); }
.v2-star { border-radius: 0; }
.v2-star svg { display: block; width: 100%; height: 100%; }

/* ── the pitch card: one white card over the scene ─────────────────────── */
body.bhw-on .bh-mic {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "btn lane" "btn foot";
  column-gap: 14px; row-gap: 2px; align-items: center;
  width: min(760px, 100%); margin: 0 auto; box-sizing: border-box;
  background: #fff; border: 0; border-radius: 30px; padding: 12px 18px 10px 12px;
  box-shadow: 0 5px 0 rgba(27, 35, 62, 0.14);
}
body.bhw-on .bh-mic-head { display: none; }
.v2-micslot { grid-area: btn; width: 92px; height: 92px; display: grid; place-items: center; }
body.bhw-on .bh-mic-cta { position: static; inset: auto; background: none; padding: 0; display: block; }
body.bhw-on .bh-mic-cta[hidden] { display: none; }
body.bhw-on .bh-mic-hint { display: none; }
body.bhw-on .bh-start-mic {
  width: 84px; height: 84px; min-height: 0; padding: 0; gap: 0; border-radius: 50%;
  display: grid; place-items: center; background: #009999; color: #fff; box-shadow: 0 6px 0 #007474;
  animation: kk-float 3s ease-in-out infinite;
}
body.bhw-on .bh-start-mic:hover:not(:disabled) { box-shadow: 0 8px 0 #007474; }
body.bhw-on .bh-start-mic:active:not(:disabled) { box-shadow: 0 2px 0 #007474; }
body.bhw-on .bh-start-mic svg { width: 42px; height: 42px; }
body.bhw-on .bh-start-mic span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.bhw-on .bh-mic-stop {
  position: relative; width: 76px; height: 76px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--target, #009999); color: #fff;
  box-shadow: 0 5px 0 rgba(27, 35, 62, 0.2);
}
body.bhw-on .bh-mic-stop[hidden] { display: none; }
body.bhw-on .bh-mic-stop svg { position: relative; z-index: 1; width: 36px; height: 36px; }
body.bhw-on .bh-mic.v2-yellow .bh-mic-stop { color: #1b233e; }
.v2-live { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--target, #009999); animation: v2Ping 1.9s ease-out infinite; pointer-events: none; }
.v2-live.b { animation-duration: 2.3s; animation-delay: -1.1s; }
@keyframes v2Ping { from { transform: scale(1); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }
body.bhw-on .bh-lane { grid-area: lane; height: 104px; border: 0; border-radius: 0; background: none; overflow: visible; }
body.bhw-on .bh-lane .bh-canvas, body.bhw-on .bh-ladder { display: none; }
.v2-lane { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.bhw-on .bh-mic-foot { grid-area: foot; margin: 0; }
body.bhw-on .bh-hold { display: none; }
body.bhw-on .bh-status { margin: 0 0 0 4px; min-height: 18px; font-size: 14px; font-weight: 800; color: #4a5372; }

/* ── Results: a light card, the title in the brand face ─────────────────── */
body.is-v2 .bh-veil { background: rgba(27, 35, 62, 0.4); }
body.is-v2 .bh-panel { background: #fdfbf6; color: #1b233e; border: 0; border-radius: 30px; box-shadow: 0 20px 50px rgba(15, 12, 40, 0.35); }
body.is-v2 .bh-panel h2 {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  font-size: clamp(30px, 7vw, 40px); line-height: 1; letter-spacing: 0; color: #6AB845;
  text-shadow: 0 0.07em 0 #4c8f30; margin-bottom: 8px;
}
body.is-v2 .bh-panel-sub { color: #6a7392; }
body.is-v2 .bh-star-row { color: #ffd25b; text-shadow: 0 3px 0 #e0a92a; }
body.is-v2 .bh-star-row .off { color: #e3e8f2; text-shadow: none; }
body.is-v2 .bh-stat { color: #1b233e; }
body.is-v2 .bh-action { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; border-radius: 18px; background: #009999; box-shadow: 0 5px 0 #007474; }
body.is-v2 .bh-action.next-big { background: #6AB845; box-shadow: 0 6px 0 #4c8f30; }
body.is-v2 .bh-action.small { background: #fff; color: #1b233e; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.16); border: 2px solid #e3e8f2; }
body.is-v2 .bh-quiet-link, body.is-v2 .bh-panel .pgc-exit { color: #6a7392; }

/* the results title wears its world's colour */
body[data-world="golden"] .bh-panel h2, body[data-world="cave"] .bh-panel h2 { color: #F39422; text-shadow: 0 0.07em 0 #c46f10; }
body[data-world="underwater"] .bh-panel h2 { color: #009999; text-shadow: 0 0.07em 0 #007474; }
body[data-world="night"] .bh-panel h2, body[data-world="moon"] .bh-panel h2 { color: #7B569E; text-shadow: 0 0.07em 0 #5a3e78; }

/* phones */
@media (max-width: 560px) {
  body.is-v2 .bh-hud { padding: 4px 70px 0; }
  body.bhw-on .bh-mic { column-gap: 10px; padding: 10px 14px 8px 10px; border-radius: 24px; }
  .v2-micslot { width: 66px; height: 66px; }
  body.bhw-on .bh-start-mic { width: 62px; height: 62px; box-shadow: 0 5px 0 #007474; }
  body.bhw-on .bh-start-mic svg { width: 32px; height: 32px; }
  body.bhw-on .bh-mic-stop { width: 58px; height: 58px; }
  body.bhw-on .bh-mic-stop svg { width: 28px; height: 28px; }
  body.bhw-on .bh-lane { height: 80px; }
  body.bhw-on .bh-status { font-size: 12.5px; }
  body.bhw-on .bh-hear { width: 46px; height: 46px; }
}
/* a landscape phone: the card shrinks so the ledges keep the room */
@media (max-height: 560px) {
  body.is-v2 .bh-hud { padding-top: 2px; min-height: 44px; }
  body.is-v2 .bh-dots { padding: 6px 12px; }
  body.is-v2 .bh-ask { padding: 4px 16px 5px; border-radius: 20px; }
  body.is-v2 .bh-ask small { display: none; }
  body.bhw-on .bh-mic { padding: 6px 14px 4px 8px; border-radius: 22px; width: min(620px, 100%); }
  .v2-micslot { width: 58px; height: 58px; }
  body.bhw-on .bh-start-mic { width: 54px; height: 54px; box-shadow: 0 4px 0 #007474; }
  body.bhw-on .bh-start-mic svg { width: 28px; height: 28px; }
  body.bhw-on .bh-mic-stop { width: 52px; height: 52px; }
  body.bhw-on .bh-lane { height: 62px; }
  body.bhw-on .bh-status { font-size: 12px; min-height: 0; }
  /* the results card fits a landscape phone */
  body.is-v2 .bh-panel { padding: 14px 20px 12px; max-height: calc(100svh - 16px); overflow: auto; }
  body.is-v2 .bh-panel h2 { font-size: 28px; margin-bottom: 2px; }
  body.is-v2 .bh-star-row { font-size: 32px; margin: 0 0 2px; }
  body.is-v2 .bh-panel-actions { margin-top: 8px; }
  body.is-v2 .bh-panel .pgc-exit { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  body.is-v2 .bh-start-mic, .v2-halo, .v2-live { animation: none !important; }
}