/* The change of pace. Warm and loose on purpose — nothing in here is scored,
   so nothing in here should look like the games do. */

#scBreath{justify-content:center;gap:0;
  background:radial-gradient(120% 80% at 50% 28%,#FFF6E2,#FFE9C4 58%,#FFD9A8)}
.bth-wrap{width:100%;max-width:520px;display:flex;flex-direction:column;
  align-items:center;gap:clamp(8px,2vh,16px)}
.bth-title{margin:0;font:800 clamp(20px,5.6vw,28px)/1.15 var(--font);color:var(--ink);
  text-align:center}
.bth-go{border:0;cursor:pointer;font:inherit;font-weight:800;
  font-size:clamp(14px,3.9vw,17px);color:var(--deep);background:rgba(255,255,255,.86);
  padding:11px 26px;border-radius:20px;box-shadow:var(--lift-1);margin-top:4px;
  -webkit-tap-highlight-color:transparent}
.bth-go:active{transform:translateY(2px)}

/* --------------------------------------------------------- the song --- */
.bth-beads{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(5px,1.8vw,9px);
  max-width:100%}
.bth-bead{width:clamp(30px,8.4vw,42px);aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:800 clamp(15px,4.2vw,20px)/1 var(--font);
  background:rgba(255,255,255,.62);color:#C9B79E;
  box-shadow:inset 0 0 0 3px rgba(200,175,140,.35);
  transition:background .25s,color .25s,box-shadow .25s}
.bth-bead.lit{background:var(--sun);color:#7A5A12;box-shadow:inset 0 0 0 3px #E2A81F}
.bth-bead.hit{animation:beadHit .5s var(--spring)}
@keyframes beadHit{0%,100%{transform:scale(1)}45%{transform:scale(1.42) rotate(-8deg)}}

.bth-big{height:clamp(96px,26vw,140px);display:flex;align-items:center;justify-content:center;
  font:800 clamp(78px,22vw,120px)/1 var(--font);color:var(--deep);
  text-shadow:0 5px 0 rgba(255,255,255,.7)}
.bth-big.pop{animation:bigPop .55s var(--spring)}
@keyframes bigPop{0%{transform:scale(.35) rotate(-14deg);opacity:0}
                  55%{transform:scale(1.18) rotate(5deg);opacity:1}
                  100%{transform:scale(1) rotate(0)}}
/* the whole screen leans on the beat, which is what makes it feel like music
   rather than a slideshow */
#scBreath.bob .bth-wrap{animation:brBob .34s ease-out}
@keyframes brBob{0%{transform:translateY(0)}40%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* ------------------------------------------------------ the kitchen --- */
.smoo{position:relative;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(10px,4vw,26px);width:100%}
.smoo-blend{position:relative;width:clamp(104px,30vw,146px);flex:none;
  transition:transform .12s}
.smoo-blend.whizzing{animation:whizz .12s linear infinite}
@keyframes whizz{0%,100%{transform:translate(0,0) rotate(0)}
                 25%{transform:translate(-3px,1px) rotate(-1.4deg)}
                 75%{transform:translate(3px,-1px) rotate(1.4deg)}}
.smoo-jug{position:relative;height:clamp(134px,37vw,182px);border-radius:10px 10px 22px 22px;
  background:linear-gradient(100deg,rgba(255,255,255,.55),rgba(220,238,246,.45));
  box-shadow:inset 0 0 0 4px rgba(190,212,224,.85),0 6px 14px rgba(80,90,70,.2);
  overflow:hidden}
.smoo-liquid{position:absolute;left:0;right:0;bottom:0;height:0%;
  background:#EADFCB;border-radius:0 0 18px 18px;
  transition:height .5s var(--spring),background .5s ease-out}
.smoo-liquid::after{content:'';position:absolute;left:0;right:0;top:-5px;height:10px;
  border-radius:50%;background:inherit;filter:brightness(1.12)}
.smoo-liquid.splash{animation:liqSplash .6s var(--spring)}
@keyframes liqSplash{0%,100%{transform:scaleY(1)}35%{transform:scaleY(1.1)}70%{transform:scaleY(.96)}}
.smoo-shine{position:absolute;left:14%;top:8%;width:12%;height:70%;border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.75),transparent)}
.smoo-lid{position:absolute;left:-6%;right:-6%;top:-13px;height:16px;border-radius:8px;
  background:linear-gradient(180deg,#B9C6D4,#8E9DAE)}
.smoo-base{position:absolute;left:2%;right:2%;bottom:-20px;height:26px;border-radius:8px 8px 12px 12px;
  background:linear-gradient(180deg,#8E9DAE,#65727F)}

/* no min-width: while it is empty it must take no room at all, or the
   blender sits off centre for the whole first half of the activity */
.smoo-glasses{display:flex;gap:9px;align-items:flex-end}
.smoo-glass{position:relative;width:clamp(28px,8vw,40px);height:clamp(46px,13vw,64px);
  border-radius:5px 5px 13px 13px;background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 3px rgba(190,212,224,.9);overflow:hidden}
.smoo-glass span{position:absolute;left:0;right:0;bottom:0;height:0;
  transition:height .6s var(--spring) .1s}
.smoo-glass.full span{height:74%}

.smoo-shelf{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(6px,2.4vw,12px);
  width:100%;padding:0 6px}
.smoo-fruit{width:clamp(46px,13.4vw,64px);aspect-ratio:1;border:0;border-radius:18px;
  padding:5px;cursor:pointer;background:rgba(255,255,255,.72);
  box-shadow:var(--lift-1),inset 0 0 0 3px rgba(255,206,61,.4);
  transition:transform .18s var(--spring);-webkit-tap-highlight-color:transparent}
.smoo-fruit svg{width:100%;height:100%;display:block}
.smoo-fruit:active{transform:scale(.9)}
/* it does not disappear — nothing is used up, so a child can keep going */
.smoo-fruit.gone{animation:fruitIn .85s var(--spring)}
@keyframes fruitIn{0%{transform:scale(1)}
                   35%{transform:translateY(-40px) scale(1.15) rotate(-14deg)}
                   70%{transform:translateY(10px) scale(.6) rotate(18deg);opacity:.35}
                   100%{transform:none;opacity:1}}
.smoo-whizz{opacity:.5;pointer-events:none;transition:opacity .3s}
.smoo-whizz.ready{opacity:1;pointer-events:auto;background:var(--sun);color:#7A5A12;
  animation:whizzWait 2.4s ease-in-out infinite}
@keyframes whizzWait{0%,100%{transform:none}50%{transform:scale(1.05)}}

@media (prefers-reduced-motion:reduce){
  .bth-bead.hit,.bth-big.pop,#scBreath.bob .bth-wrap,.smoo-blend.whizzing,
  .smoo-fruit.gone,.smoo-whizz.ready{animation:none!important}
}

/* notes drawn on THIS screen — Props.notes() would land in scPlay's layer */
.bth-note{position:absolute;bottom:26%;width:clamp(20px,5.6vw,28px);z-index:3;
  color:var(--deep);opacity:0;pointer-events:none;
  animation:noteUp 2.5s ease-out forwards;
  filter:drop-shadow(0 2px 3px rgba(120,86,50,.25))}
.bth-note svg{width:100%;height:auto;display:block}
@keyframes noteUp{0%{opacity:0;transform:translate(0,10px) scale(.6) rotate(-10deg)}
                  18%{opacity:.95}
                  100%{opacity:0;transform:translate(var(--drift,0),-190px) scale(1.1) rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.bth-note{display:none}}