/* SMOOTHIE BAR (js/smoothie/) — full-screen stages in the Bake / Ramen style.
   The shared stage base (.rms: world fade, hint rings, pop words, the big NEXT
   button, .rm-in arrivals, streams) lives in ramen.css; this file is the
   smoothie scene shell and each smoothie stage. Stage = 1024x768, scaled. */

/* the scene shell hides while a stage is up; the top bar floats over it */
.smbar { position: relative; width: 100%; height: 100%; }
.smbar.mixing { background: #fff8fb; }
.smbar.mixing > :not(.mixstage-wrap) { visibility: hidden; }
body.smoothie-staged #topbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 50;
  background: none; pointer-events: none; border-bottom: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.smoothie-staged #topbar > * { pointer-events: auto; }
.smbar .mixstage-wrap { transition: opacity .45s ease, transform .55s cubic-bezier(.3,1,.4,1); }
.smbar .mixstage-wrap.entering { opacity: 0; transform: translateX(16%); }
.smbar .mixstage-wrap.leaving { opacity: 0; transform: translateX(-16%); }

/* ================= the blender: one face at a time, shakes while it spins ================= */
.rms .sb-blender .bf { display: none; }
.rms .sb-blender .bf-sleep { display: inline; }
.rms .sb-blender.bl-awake .bf-sleep, .rms .sb-blender.bl-whee .bf-sleep, .rms .sb-blender.bl-oops .bf-sleep, .rms .sb-blender.bl-wink .bf-sleep { display: none; }
.rms .sb-blender.bl-awake .bf-awake, .rms .sb-blender.bl-whee .bf-whee, .rms .sb-blender.bl-oops .bf-oops, .rms .sb-blender.bl-wink .bf-wink { display: inline; }
.rms .bf-z { animation: blZ 1.8s ease-in-out infinite; }
.rms .bf-z + .bf-z { animation-delay: .5s; }
@keyframes blZ { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.rms .sb-body { transform-box: fill-box; transform-origin: 50% 100%; }
.rms .sb-blender.shake .sb-body { animation: blShake .08s linear infinite alternate; }
@keyframes blShake { from { transform: translate(-3px, 0) rotate(-1.2deg); } to { transform: translate(3px, -2px) rotate(1.2deg); } }
.rms .sb-lidon { opacity: 0; transform: translateY(-80px); transition: opacity .2s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.rms .sb-blender.lid .sb-lidon { opacity: 1; transform: none; }
.rms .sb-geyser { pointer-events: none; }
.rms .sb-gy { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; }
.rms .sb-blender.splat .sb-gy { animation: blGeyser .9s cubic-bezier(.2,1.4,.5,1) forwards; }
@keyframes blGeyser { 0% { transform: scaleY(0); opacity: 1; } 35% { transform: scaleY(1.12); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.9); opacity: 0; } }

/* the smooth meter ring (hidden until you blend) */
.sbl .sb-ring { opacity: 0; transition: opacity .35s; }
.sbl .sb-ring.on { opacity: 1; }
.sbl .br-mark { transition: transform .05s linear; }
.sbl .br-gold.lit { animation: blGold .5s ease-in-out infinite alternate; }
@keyframes blGold { from { stroke: #ffc93c; } to { stroke: #fff06a; } }

/* the drinks on the pink stand (the same feel as the broth bottles) */
.sbl .rb-pour { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.sbl .sbl-bottle { position: absolute; width: 76.8px; height: 119px; touch-action: none; cursor: grab; z-index: 9; transform-origin: 50% 48%; opacity: 0; transform: translateY(-30px) scale(.6); filter: drop-shadow(0 3px 2px rgba(90,40,80,.2)); transition: left .4s cubic-bezier(.3,1.3,.5,1), top .4s cubic-bezier(.3,1.3,.5,1), transform .3s cubic-bezier(.3,1.5,.5,1), opacity .3s; }
.sbl .sbl-bottle svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.sbl .sbl-bottle.in { opacity: 1; transform: none; }
.sbl .sbl-bottle.lifted { transition: transform .22s cubic-bezier(.3,1.4,.5,1); transform: scale(1.1); filter: drop-shadow(0 14px 10px rgba(90,40,80,.28)); cursor: grabbing; }
.sbl .sbl-bottle.lifted.tilt { transform: scale(1.1) rotate(100deg); }
.sbl .sbl-bottle.hop { animation: rbHop .45s cubic-bezier(.3,1.6,.5,1); }

/* the ice scoop and the bucket */
.sbl .sbl-scoop { position: absolute; width: 170px; height: 100px; touch-action: none; cursor: grab; z-index: 11; transform-origin: 30% 50%; opacity: 0; transition: left .38s cubic-bezier(.3,1.3,.5,1), top .38s cubic-bezier(.3,1.3,.5,1), transform .25s, opacity .3s; filter: drop-shadow(0 4px 3px rgba(90,40,80,.2)); }
.sbl .sbl-scoop svg { display: block; pointer-events: none; }
.sbl .sbl-scoop.in { opacity: 1; }
.sbl .sbl-scoop.lifted { transition: transform .2s; transform: scale(1.08); filter: drop-shadow(0 12px 9px rgba(90,40,80,.28)); cursor: grabbing; }
.sbl .sbl-scoop.lifted.tilt, .sbl .sbl-scoop.fly.tilt { transform: rotate(-55deg); }
.sbl .sbl-scoop.fly { transition: left .4s cubic-bezier(.4,1.2,.5,1), top .4s cubic-bezier(.4,1.2,.5,1), transform .25s; z-index: 30; }
.sbl .sbl-bucket { position: absolute; width: 140px; height: 170px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 7; }
.sbl .sbl-cube { position: absolute; width: 40px; height: 40px; pointer-events: none; z-index: 6; transition: top .42s cubic-bezier(.5,0,1,.6), opacity .2s .34s; }
.sbl .sbl-cube svg { display: block; }

/* the lid */
.sbl .sbl-lid { position: absolute; width: 239.4px; height: 57.4px; touch-action: none; cursor: grab; z-index: 12; opacity: 0; transform: translateX(140px); transition: left .38s cubic-bezier(.3,1.3,.5,1), top .38s cubic-bezier(.3,1.3,.5,1), transform .3s, opacity .3s; filter: drop-shadow(0 4px 3px rgba(90,40,80,.2)); }
.sbl .sbl-lid svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.sbl .sbl-lid.in { opacity: 1; transform: none; }
.sbl .sbl-lid.lifted { transition: transform .2s; transform: scale(1.06) rotate(-4deg); filter: drop-shadow(0 12px 9px rgba(90,40,80,.28)); cursor: grabbing; }
.sbl .sbl-lid.fly { transition: left .4s cubic-bezier(.4,1.3,.5,1), top .4s cubic-bezier(.4,1.3,.5,1); z-index: 30; }
.sbl .sbl-lid.gone { opacity: 0; pointer-events: none; transition: opacity .12s; }

/* the big hold-to-blend button (lives in the HUD layer so it stays on top) */
.sbl .sbl-hold { position: absolute; width: 140px; height: 150px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; z-index: 60; opacity: 0; transform: scale(.4); pointer-events: none; transition: opacity .25s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.sbl .sbl-hold svg { display: block; width: 140px; height: 148px; pointer-events: none; overflow: visible; }
.sbl .sbl-hold.show { opacity: 1; transform: none; pointer-events: auto; }
.sbl .sbl-hold.show:not(.down) svg { animation: blHoldPulse 1.3s ease-in-out infinite; }
.sbl .sbl-hold .hb-top { transition: transform .08s; }
.sbl .sbl-hold.down .hb-top { transform: translateY(9px); }
@keyframes blHoldPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* the no-lid gag: splats on the "screen", wipe them off */
.sbl .sbl-splats { position: absolute; inset: 0; z-index: 40; pointer-events: none; touch-action: none; }
.sbl .sbl-splats.on { pointer-events: auto; cursor: grab; }
.sbl .sbl-splat { position: absolute; width: 320px; height: 320px; pointer-events: none; transform: scale(var(--s)); animation: blSplat .45s cubic-bezier(.3,1.7,.5,1) var(--d) backwards; transition: opacity .15s; }
.sbl .sbl-splat svg { display: block; overflow: visible; }
.sbl .sbl-splat.gone { transform: scale(0); opacity: 0; transition: transform .3s cubic-bezier(.5,0,.8,.5), opacity .3s; }
@keyframes blSplat { from { transform: scale(0) rotate(-20deg); } to { transform: scale(var(--s)); } }
.sbl .sbl-wipehint { position: absolute; width: 140px; pointer-events: none; z-index: 45; display: flex; flex-direction: column; align-items: center; animation: blWipe 1.1s ease-in-out infinite; }
.sbl .sbl-wipehint span { padding: 6px 16px; border-radius: 18px; background: #fff; border: 4px solid #5a2d4c; font-weight: 900; font-size: 24px; color: #e0598a; white-space: nowrap; box-shadow: 0 4px 0 rgba(90,45,76,.18); }
.sbl .sbl-wipehint svg { display: block; }
@keyframes blWipe { 0%, 100% { transform: translateX(-30px); } 50% { transform: translateX(40px); } }

/* ================= pour: lift the jug, it tips over your cup ================= */
.spr .spr-jug { position: absolute; touch-action: none; cursor: grab; z-index: 12; opacity: 0; transform: translateX(160px); transition: left .42s cubic-bezier(.3,1.3,.5,1), top .42s cubic-bezier(.3,1.3,.5,1), transform .35s cubic-bezier(.3,1.4,.5,1), opacity .3s; filter: drop-shadow(0 4px 3px rgba(90,40,80,.18)); }
.spr .spr-jug svg { display: block; overflow: visible; pointer-events: none; }
.spr .spr-jug.in { opacity: 1; transform: none; }
.spr .spr-jug.lifted { transition: transform .35s cubic-bezier(.3,1.4,.5,1); filter: drop-shadow(0 14px 10px rgba(90,40,80,.26)); cursor: grabbing; }
.spr .spr-jug.lifted:not(.tilt) { transform: rotate(-6deg); }
.spr .spr-jug.tilt { transform: rotate(80deg); transition: left .25s cubic-bezier(.3,1.2,.5,1), top .25s cubic-bezier(.3,1.2,.5,1), transform .35s cubic-bezier(.3,1.3,.5,1); }
.spr .spr-stream { position: absolute; inset: 0; pointer-events: none; z-index: 11; opacity: 0; transition: opacity .15s; }
.spr .spr-stream.on { opacity: 1; }
.spr .spr-stream svg { position: absolute; left: 0; top: 0; }
.spr .spr-sauce { position: absolute; width: 64px; height: 99.2px; touch-action: none; cursor: grab; z-index: 9; transform-origin: 50% 48%; opacity: 0; transform: translateY(-30px) scale(.6); filter: drop-shadow(0 3px 2px rgba(90,40,80,.2)); transition: left .4s cubic-bezier(.3,1.3,.5,1), top .4s cubic-bezier(.3,1.3,.5,1), transform .3s cubic-bezier(.3,1.5,.5,1), opacity .3s; }
.spr .spr-sauce svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.spr .spr-sauce.in { opacity: 1; transform: none; }
.spr .spr-sauce.lifted { transition: transform .22s cubic-bezier(.3,1.4,.5,1); transform: scale(1.12); filter: drop-shadow(0 14px 10px rgba(90,40,80,.28)); cursor: grabbing; }
.spr .spr-sauce.lifted.tilt { transform: scale(1.12) rotate(160deg); }
.spr .spr-sauce.hop { animation: rbHop .45s cubic-bezier(.3,1.6,.5,1); }

/* ================= ta-da: the cup on its stand, the name ribbon, the customer ================= */
.sdn .sdn-rays { transform-box: fill-box; transform-origin: center; animation: sdnSpin 18s linear infinite; }
@keyframes sdnSpin { to { transform: rotate(360deg); } }
.sdn .sdn-ribbon { position: absolute; left: 360px; top: 620px; display: flex; align-items: center; gap: 10px; padding: 7px 22px; border-radius: 30px; background: linear-gradient(180deg, #ffb6cf, #ff8fb1); border: 4px solid #5a2d4c; box-shadow: 0 6px 0 rgba(90,45,76,.2); color: #fff; font-weight: 900; font-size: 26px; white-space: nowrap; text-shadow: 0 2px 0 rgba(90,45,76,.25); transform: translateX(-50%) scale(.3); opacity: 0; transition: transform .6s cubic-bezier(.3,1.6,.5,1), opacity .3s; z-index: 4; }
.sdn .sdn-ribbon.in { transform: translateX(-50%); opacity: 1; }
.sdn .sdn-dice { width: 40px; height: 40px; padding: 0; border: 3px solid #5a2d4c; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 0 rgba(90,45,76,.2); }
.sdn .sdn-dice:active { transform: rotate(40deg) scale(.92); }
.sdn .sdn-chips { position: absolute; left: 360px; top: 684px; transform: translateX(-50%) translateY(20px); opacity: 0; display: flex; gap: 8px; align-items: center; transition: transform .5s cubic-bezier(.3,1.5,.5,1), opacity .3s; z-index: 4; }
.sdn .sdn-chips.in { transform: translateX(-50%); opacity: 1; }
.sdn .sdn-chips i { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 3px solid #5a2d4c; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.sdn .sdn-chips i svg { display: block; }
.sdn .sdn-chips b { padding: 4px 12px; border-radius: 16px; background: #fff; border: 3px solid #5a2d4c; font-size: 15px; font-weight: 900; color: #5a2d4c; text-transform: capitalize; }
.sdn .sdn-side { position: absolute; left: 640px; top: 190px; width: 340px; height: 440px; opacity: 0; transform: translateX(80px); transition: transform .6s cubic-bezier(.3,1.4,.5,1), opacity .35s; z-index: 3; }
.sdn .sdn-side.in { opacity: 1; transform: none; }
.sdn .sdn-cust { position: absolute; left: 40px; top: 80px; width: 260px; }
.sdn .sdn-cust .puppet { width: 100%; height: auto; }
.sdn .sdn-say { position: absolute; left: 0; top: 0; max-width: 320px; padding: 10px 16px; border-radius: 18px 18px 18px 6px; background: #fff; border: 3px solid #ffd1e6; font-weight: 900; font-size: 19px; line-height: 1.25; color: #5a2d4c; box-shadow: 0 4px 10px rgba(90,40,80,.14); opacity: 0; transform: scale(.6); transform-origin: 20% 100%; transition: transform .45s cubic-bezier(.3,1.6,.5,1), opacity .25s; }
.sdn .sdn-say.show { opacity: 1; transform: none; }
.sdn .sdn-coins { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 22px; background: #fff8d6; border: 3px solid #e6c86a; font-weight: 900; font-size: 26px; color: #5a2d4c; white-space: nowrap; box-shadow: 0 4px 0 rgba(90,45,76,.14); }
.sdn .sdn-hearts { display: flex; gap: 4px; margin-left: 6px; }
.sdn .sdn-hearts svg { display: block; }
.sdn .sdn-card { position: absolute; left: 20px; top: 70px; width: 300px; padding: 24px 20px 70px; border-radius: 26px; background: #fff; border: 4px solid #5a2d4c; box-shadow: 0 8px 0 rgba(90,45,76,.16); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; box-sizing: border-box; }
.sdn .sdn-card > b { font-size: 30px; font-weight: 900; color: #5a2d4c; }
.sdn .sdn-card > span { font-size: 18px; font-weight: 800; color: #8a6a86; }
.sdn .sdn-card .sdn-coins { position: static; transform: none; margin-top: 8px; }
.sdn .sdn-album { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); height: 52px; padding: 0 26px; border-radius: 26px; border: 3px solid #fff; background: linear-gradient(180deg, #d9c8ff, #b39cf0); box-shadow: 0 5px 0 #8f78d0; color: #fff; font-weight: 900; font-size: 20px; cursor: pointer; white-space: nowrap; }

/* ================= fruit: the cart rolls in, the board, the moves, pieces fly to the blender ================= */
.sfr .sf-cartin { position: absolute; pointer-events: none; transform: translateX(-620px); will-change: transform; }
.sfr .sf-cartin img { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.sfr .sf-cartin.in { transform: none; transition: transform .8s cubic-bezier(.3,1.15,.5,1); }
.sfr .sf-cartin.wave img { animation: sfWave .7s ease-in-out 2; }
@keyframes sfWave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-1.6deg); } 70% { transform: rotate(1.2deg); } }
.sfr .sf-slot { position: absolute; width: 124px; height: 112px; padding: 0; border: 0; border-radius: 30px; background: none; cursor: grab; touch-action: none; z-index: 8; }
.sfr .sf-pack { position: absolute; width: 80px; height: 100px; touch-action: none; cursor: grab; z-index: 9; transform-origin: 50% 0; opacity: 0; transform: translateY(-40px); transition: opacity .3s, transform .5s cubic-bezier(.3,1.5,.5,1); }
.sfr .sf-pack svg { display: block; pointer-events: none; }
.sfr .sf-pack.in { opacity: 1; transform: none; animation: sfSwing 2.6s ease-in-out calc(var(--i) * -.6s) infinite; }
.sfr .sf-pack.taken, .sfr .sf-pack.used { opacity: 0; pointer-events: none; animation: none; }
@keyframes sfSwing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.sfr .sf-workhit { position: absolute; width: 300px; height: 300px; touch-action: none; z-index: 10; cursor: pointer; }
.sfr .sf-fly { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.sfr .sf-ghost { position: absolute; width: 110px; height: 120px; pointer-events: none; transform: scale(1.1) rotate(-6deg); filter: drop-shadow(0 14px 10px rgba(90,40,80,.28)); transition: transform .2s; }
.sfr .sf-ghost svg { display: block; width: 110px; height: auto; }
.sfr .sf-ghost.over { transform: scale(1.22) rotate(4deg); }
.sfr .sf-ghost.land { transition: left .22s ease-in, top .22s ease-in, transform .22s, opacity .2s .1s; transform: scale(.9); opacity: 0; }
.sfr .sf-ghost.gone { transform: scale(.2); opacity: 0; transition: transform .25s, opacity .25s; }
.sfr .sf-piece { position: absolute; width: 60px; height: 60px; transition: left .5s cubic-bezier(.3,.1,.5,1) var(--d), top .5s cubic-bezier(.5,-.6,.6,1) var(--d), transform .5s var(--d), opacity .2s calc(var(--d) + .38s); }
.sfr .sf-piece svg { display: block; }
.sfr .sf-piece.go { transform: scale(.55) rotate(260deg); opacity: 0; }
.sfr .sf-crown { position: absolute; width: 160px; height: 160px; transition: transform .8s cubic-bezier(.3,.1,.5,1), opacity .4s .45s; }
.sfr .sf-crown.off { transform: translate(-220px, -160px) rotate(-320deg); opacity: 0; }
/* the tools: a knife that chops where you tap, a mallet that bonks, hint arrows */
.sfr .sf-tool { position: absolute; pointer-events: none; z-index: 12; opacity: 0; transition: opacity .25s; }
.sfr .sf-tool.show { opacity: 1; }
.sfr .sf-tool svg { display: block; overflow: visible; }
.sfr .sf-tool.knife { left: 812px; top: 300px; transform: rotate(24deg); transform-origin: 60px 40px; }
.sfr .sf-tool.knife.chop { animation: sfChop .34s cubic-bezier(.5,0,.5,1); }
@keyframes sfChop { 0% { transform: rotate(24deg); } 40% { transform: translate(calc(-60px + var(--cx, 0px)), 90px) rotate(0deg); } 100% { transform: rotate(24deg); } }
.sfr .sf-tool.mallet { left: 812px; top: 280px; transform-origin: 60px 160px; transform: rotate(20deg); }
.sfr .sf-tool.mallet.bonk { animation: sfBonk .32s cubic-bezier(.5,0,.5,1); }
@keyframes sfBonk { 0% { transform: rotate(20deg); } 45% { transform: translate(-70px, 70px) rotate(-40deg); } 100% { transform: rotate(20deg); } }
.sfr .sf-tool.arrows { left: 654px; top: 250px; animation: sfNudge 1s ease-in-out infinite; }
@keyframes sfNudge { 0%, 100% { translate: 0 -8px; } 50% { translate: 0 10px; } }
.sfr .sf-tool.twist { left: 644px; top: 270px; }
.sfr .sf-tool.tear { left: 644px; top: 352px; animation: sfSlide 1s ease-in-out infinite; }
@keyframes sfSlide { 0%, 100% { translate: -10px 0; } 50% { translate: 12px 0; } }

/* the Smoothie Bar station on the hub */
.station.smoothie { animation-delay: .3s; }
.station.smoothie .station-sign { background: #9fe0c6; color: #5a2d4c; display: flex; align-items: center; gap: 6px; }
.station.smoothie .station-art svg { filter: drop-shadow(0 0 10px rgba(143,214,189,.8)) drop-shadow(0 4px 6px rgba(0,0,0,.25)); overflow: visible; }

/* ================= the smoothie bar: flip-dip, falling pearls, the cream can ================= */
.sbr .sbr-cup.dip { animation: sbrDip 1.25s cubic-bezier(.45,0,.4,1); }
@keyframes sbrDip {
  0% { transform: none; }
  24% { transform: translateY(-90px) rotate(180deg); }
  42% { transform: translateY(0) rotate(180deg); }
  52% { transform: translateY(0) rotate(194deg); }
  62% { transform: translateY(0) rotate(166deg); }
  72% { transform: translateY(0) rotate(180deg); }
  86% { transform: translateY(-90px) rotate(180deg); }
  100% { transform: none; }
}
.sbr .sbr-plateg { opacity: 0; transition: opacity .2s; }
.sbr .sbr-plateg.show { opacity: 1; }
.sbr .sbr-pearl { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8a6a86, #3a2030 70%); border: 2px solid #5a2d4c; box-sizing: border-box; pointer-events: none; transition: top .55s cubic-bezier(.5,0,1,.6) var(--d), opacity .25s calc(var(--d) + .4s); }
.sbr .sbr-pearl.go { opacity: 0; }
.sbr .sbr-hand.whip.active svg { animation: dcShake .12s ease-in-out infinite alternate; }
.sbr .rr-item.whip svg, .sbr .rr-item.shake svg { filter: drop-shadow(0 3px 2px rgba(90,40,80,.2)); }

/* ================= serve: the customer drinks it (sips / gulps), brain freeze + the rub ================= */
.ssv .ssv-cust { position: absolute; left: 478px; top: 150px; width: 372px; opacity: 0; transform: translateY(60px); transition: transform .6s cubic-bezier(.3,1.4,.5,1), opacity .3s; }
.ssv .ssv-cust.in { opacity: 1; transform: none; }
.ssv .ssv-cust .puppet { display: block; width: 100%; height: auto; overflow: visible; }
.ssv .ssv-cust.sipping .pp-head { animation: ppChew .2s ease-in-out 2 alternate; }
.ssv .ssv-cust.frozen .ssv-pup { animation: ssvShiver .07s linear infinite alternate; }
@keyframes ssvShiver { from { transform: translateX(-2.5px); } to { transform: translateX(2.5px); } }
.ssv .ssv-teeth { animation: ssvChatter .1s linear infinite alternate; }
@keyframes ssvChatter { from { transform: translateY(-1.5px); } to { transform: translateY(1.5px); } }
.ssv .ssv-cup { position: absolute; width: 340px; height: 520px; touch-action: none; cursor: grab; z-index: 8; opacity: 0; transition: opacity .3s; }
.ssv .ssv-cup.in { opacity: 1; }
.ssv .ssv-cup.slide { transition: left .6s cubic-bezier(.3,1.2,.5,1), top .6s cubic-bezier(.3,1.2,.5,1); }
.ssv .ssv-cup svg { display: block; overflow: visible; pointer-events: none; }
.ssv .ssv-cup.lifted { filter: drop-shadow(0 14px 10px rgba(90,40,80,.25)); }
.ssv .ssv-cup.gulp { animation: ssvGulp .62s ease-in-out; transform-origin: 50% 88%; }
@keyframes ssvGulp { 0%, 100% { transform: none; } 45% { transform: translate(-96px, -44px) rotate(-30deg); } }
.ssv .ssv-straw { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.ssv .ssv-straw svg { position: absolute; left: 0; top: 0; }
.ssv .ssv-gulp { animation: ssvGulpUp .6s linear forwards; }
@keyframes ssvGulpUp { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
.ssv .ssv-bubble { position: absolute; left: 150px; top: 150px; max-width: 320px; padding: 12px 18px; border-radius: 22px 22px 6px 22px; background: #fff; border: 3px solid #ffd1e6; box-shadow: 0 5px 12px rgba(90,40,80,.16); font-weight: 900; font-size: 22px; line-height: 1.25; color: #5a2d4c; opacity: 0; transform: scale(.6); transform-origin: 100% 100%; transition: transform .4s cubic-bezier(.3,1.6,.5,1), opacity .2s; z-index: 20; }
.ssv .ssv-bubble.show { opacity: 1; transform: none; }
.ssv .ssv-burst { position: absolute; width: 200px; height: 180px; pointer-events: none; z-index: 12; animation: ssvBurst 1.8s cubic-bezier(.3,1.6,.5,1) forwards; }
.ssv .ssv-burst svg { position: absolute; left: 0; top: 0; }
.ssv .ssv-burst b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 22px; color: #e0598a; transform: rotate(-8deg); }
@keyframes ssvBurst { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 15% { transform: scale(1.1); opacity: 1; } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
.ssv .ssv-freeze { position: absolute; left: 60px; top: 300px; padding: 10px 26px 6px; border-radius: 18px; background: #dff3ff; border: 4px solid #5a2d4c; box-shadow: 0 6px 0 rgba(90,45,76,.18); text-align: center; transform: rotate(-6deg); z-index: 14; animation: ssvFreezeIn .5s cubic-bezier(.3,1.6,.5,1); }
.ssv .ssv-freeze b { display: block; font-weight: 900; font-size: 36px; color: #2f6fb0; }
.ssv .ssv-freeze small { display: block; font-weight: 900; font-size: 16px; color: #e0598a; }
@keyframes ssvFreezeIn { from { transform: rotate(-6deg) scale(.3); opacity: 0; } to { transform: rotate(-6deg); opacity: 1; } }
.ssv .ssv-rub { position: absolute; width: 300px; height: 230px; z-index: 30; touch-action: none; cursor: grab; }
.ssv .ssv-rubhint { position: absolute; width: 150px; pointer-events: none; z-index: 31; display: flex; flex-direction: column; align-items: center; animation: blWipe 1.1s ease-in-out infinite; }
.ssv .ssv-rubhint span, .ssv .ssv-hint span { padding: 6px 16px; border-radius: 18px; background: #fff; border: 4px solid #5a2d4c; font-weight: 900; font-size: 22px; color: #e0598a; white-space: nowrap; box-shadow: 0 4px 0 rgba(90,45,76,.18); }
.ssv .ssv-rubhint svg { display: block; }
.ssv .ssv-hint { position: absolute; pointer-events: none; z-index: 10; animation: ssvHop 1.1s ease-in-out infinite; }
@keyframes ssvHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ================= the score card ================= */
.sdn .sdn-score { position: absolute; left: 10px; top: 0; width: 330px; padding: 16px 18px 20px; border-radius: 26px; background: #fff; border: 4px solid #5a2d4c; box-shadow: 0 8px 0 rgba(90,45,76,.16); display: flex; flex-direction: column; align-items: center; gap: 8px; box-sizing: border-box; }
.sdn .sdn-head { width: 96px; height: 96px; margin-top: -58px; border-radius: 50%; background: #fff; border: 4px solid #ff8fb1; overflow: hidden; box-shadow: 0 4px 10px rgba(90,40,80,.18); }
.sdn .sdn-head .puppet { width: 116%; margin-left: -8%; margin-top: 2%; height: auto; display: block; }
.sdn .sdn-who { font-weight: 800; font-size: 15px; color: #8a6a86; }
.sdn .sdn-badge { padding: 4px 16px; border-radius: 14px; background: linear-gradient(90deg, #ffb4a4, #ffd166); font-weight: 900; font-size: 20px; letter-spacing: 1px; color: #5a2d4c; }
.sdn .sdn-stars { display: flex; gap: 6px; }
.sdn .sdn-stars i { display: block; transform: scale(0); animation: sdnStar .5s cubic-bezier(.3,1.7,.5,1) var(--d) forwards; }
.sdn .sdn-stars i svg { display: block; }
@keyframes sdnStar { to { transform: scale(1); } }
.sdn .sdn-wishes { display: flex; align-items: center; gap: 8px; }
.sdn .sdn-wishes small { font-weight: 800; font-size: 13px; color: #a98a3a; }
.sdn .sdn-wishes .w { position: relative; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; border: 2.5px solid #ecd9a0; background: #fff; box-sizing: border-box; }
.sdn .sdn-wishes .w.ok { border-color: #5aa06f; background: #e3f7e8; }
.sdn .sdn-wishes .w.no { opacity: .6; }
.sdn .sdn-wishes .w em { position: absolute; right: -7px; top: -8px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-size: 11px; color: #fff; background: #5aa06f; }
.sdn .sdn-wishes .w.no em { background: #d9577f; }
.sdn .sdn-bar { position: relative; width: 100%; height: 22px; border-radius: 11px; background: #f7e3ee; border: 2.5px solid #5a2d4c; overflow: hidden; box-sizing: border-box; }
.sdn .sdn-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ffb6cf, #ff5fa2); transition: width 1.2s cubic-bezier(.3,1,.4,1); }
.sdn .sdn-num { position: absolute; right: 8px; top: 0; bottom: 0; display: flex; align-items: center; font-weight: 900; font-size: 13px; color: #5a2d4c; }
.sdn .sdn-score .sdn-coins { position: static; transform: none; }
.sdn .sdn-extra, .sdn .sdn-unlock { padding: 4px 12px; border-radius: 12px; font-weight: 900; font-size: 14px; }
.sdn .sdn-extra { background: #dff3ff; color: #2f6fb0; }
.sdn .sdn-unlock { background: #fff3c8; color: #a0701a; }
.sdn .sdn-new { position: absolute; left: 512px; top: 24px; transform: translateX(-50%); padding: 10px 26px; border-radius: 22px; background: linear-gradient(180deg, #fff6a8, #ffd23f); border: 4px solid #5a2d4c; box-shadow: 0 6px 0 rgba(90,45,76,.2); text-align: center; z-index: 30; animation: sdnNew .9s cubic-bezier(.3,1.6,.5,1) both; }
.sdn .sdn-new small { display: block; font-weight: 900; font-size: 14px; letter-spacing: 2px; color: #e0598a; }
.sdn .sdn-new b { display: block; font-weight: 900; font-size: 28px; color: #5a2d4c; white-space: nowrap; }
@keyframes sdnNew { 0% { transform: translateX(-50%) scale(.3); opacity: 0; } 40% { transform: translateX(-50%) scale(1.1); opacity: 1; } 70%, 100% { transform: translateX(-50%) scale(1); opacity: 1; } }

/* the rainbow cup: three layer lines + the toggle */
.spr .spr-rlines { opacity: 0; transition: opacity .3s; }
.spr .spr-scene.rainbow .spr-rlines { opacity: 1; }
.spr .spr-rainbow { position: absolute; left: 150px; top: 250px; width: 120px; padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; z-index: 10; animation: sprRbIn .5s cubic-bezier(.3,1.6,.5,1) .8s backwards; }
.spr .spr-rainbow span { width: 84px; height: 84px; border-radius: 50%; background: #fff; border: 4px solid #5a2d4c; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 0 rgba(90,45,76,.18); box-sizing: border-box; transition: background .2s, box-shadow .2s, transform .2s; }
.spr .spr-rainbow span svg { display: block; }
.spr .spr-rainbow b { padding: 3px 12px; border-radius: 14px; background: #fff; border: 3px solid #5a2d4c; font-weight: 900; font-size: 16px; color: #8a4ae0; white-space: nowrap; }
.spr .spr-rainbow.on span { background: #fff6a8; box-shadow: 0 0 0 7px rgba(181,139,224,.45), 0 5px 0 rgba(90,45,76,.18); transform: scale(1.06); }
@keyframes sprRbIn { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }