/* RAMEN STATION (js/ramen/) — full-screen stages in the Bake style: the start
   boards, the bowl pegboard, the broth pot, the noodle choice, the cook
   (basket + timer + shake) and homemade dough. Stage = 1024×768, scaled. */

/* the old ramen shell hides while a stage is up; the top bar floats over it */
.ramen.mixing > :not(.mixstage-wrap) { visibility: hidden; }
body.ramen-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.ramen-staged #topbar > * { pointer-events: auto; }

.rms { touch-action: none; }
.rms .world { opacity: 0; transition: opacity .35s, transform .38s ease-in; }
.rms .world.in { opacity: 1; }
.rms.leaving .world { opacity: 0; transform: scale(1.04); }
.rms .world > svg:not(.mx-backdrop) { position: absolute; left: 0; top: 0; display: block; }
.rms button { -webkit-tap-highlight-color: transparent; font: inherit; }

/* "touch here": a pulsing outline ring (the object inside stays visible) */
.rms .hint-ring.ring-o { background: none; border: 5px solid #fff; box-sizing: border-box; box-shadow: 0 0 0 3px rgba(255,143,177,.85), 0 0 18px 4px rgba(255,143,177,.55), inset 0 0 14px rgba(255,143,177,.45); }

/* a big word that pops (CHEWY!, SHAKE!) */
.rms .rm-word { position: absolute; padding: 8px 18px; border-radius: 18px; background: #fff; border: 4px solid #5a2d4c; box-shadow: 0 5px 0 rgba(90,45,76,.18); font-weight: 900; font-size: 40px; white-space: nowrap; pointer-events: none; z-index: 5; animation: rmWord 1.5s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes rmWord {
  0% { transform: translate(-50%,-50%) rotate(var(--r)) scale(.3); opacity: 0; }
  18% { transform: translate(-50%,-50%) rotate(var(--r)) scale(1.1); opacity: 1; }
  30% { transform: translate(-50%,-50%) rotate(var(--r)) scale(1); }
  80% { opacity: 1; }
  100% { transform: translate(-50%,-85%) rotate(var(--r)) scale(1); opacity: 0; }
}

/* ---- the pot: one face at a time ---- */
.rms .pf .pe-open, .rms .pf .pe-wink, .rms .pf .pm-open { display: none; }
.rms .rb-pot.awake .pe-sleep { display: none; }
.rms .rb-pot.awake .pe-open { display: inline; }
.rms .rb-pot.wink .pe-sleep, .rms .rb-pot.wink .pe-open { display: none; }
.rms .rb-pot.wink .pe-wink { display: inline; }
.rms .rb-pot.cheer .pm-small { display: none; }
.rms .rb-pot.cheer .pm-open { display: inline; }
/* bubbles, flames, steam */
.rms .bub { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.rms .rb-scene.hot .bub, .rms .rn-boil .bub { animation: rmBub 1.4s ease-in-out var(--d,0s) infinite; }
@keyframes rmBub { 0% { transform: scale(0); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 70% { transform: scale(1.1); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.rms .rb-flames { opacity: 0; transition: opacity .35s; }
.rms .rb-scene.hot .rb-flames, .rms .rn-flames.on { opacity: 1; }
.rms .fl { transform-box: fill-box; transform-origin: 50% 100%; animation: rmFlick .22s ease-in-out calc(var(--i) * -.07s) infinite alternate; }
@keyframes rmFlick { from { transform: scaleY(.8) rotate(-3deg); } to { transform: scaleY(1.08) rotate(3deg); } }
.rms .rb-steam { opacity: 0; transition: opacity .6s; }
.rms .rb-scene.hot .rb-steam { opacity: 1; animation: rmSteam 2.6s ease-in-out infinite alternate; }
.rms .rn-steam { animation: rmSteam 2.6s ease-in-out infinite alternate; }
@keyframes rmSteam { from { transform: translateY(6px); } to { transform: translateY(-10px); } }

.ramen .serve-plate-wrap { left: 16px; transform: none; }

/* ================= start: two menu boards ================= */
.rst .rst-title { position: absolute; left: 512px; top: 160px; transform: translateX(-50%); padding: 8px 30px; border-radius: 30px; background: #fff; border: 4px solid #5a2d4c; box-shadow: 0 5px 0 rgba(90,45,76,.16); font-weight: 900; font-size: 28px; color: #5a2d4c; white-space: nowrap; }
.rst .rst-card { position: absolute; top: 234px; width: 412px; height: 392px; padding: 0; border-radius: 30px; background: #fff; border: 4px solid #5a2d4c; box-shadow: 0 9px 0 rgba(90,45,76,.16), 0 18px 28px rgba(90,45,76,.14); box-sizing: border-box; cursor: pointer; color: #5a2d4c; text-align: center; opacity: 0; transform: translateY(-60px) rotate(-4deg); transform-origin: 50% 0; transition: opacity .3s, transform .6s cubic-bezier(.3,1.5,.5,1); }
.rst .rst-card.in { opacity: 1; transform: none; }
.rst .rst-card.pick { animation: rstSwing .7s ease-out; box-shadow: 0 0 0 6px #fff, 0 0 26px 8px #ff9fc6, 0 18px 28px rgba(90,45,76,.14); }
.rst .rst-card.away { opacity: 0; transform: translateY(40px) scale(.94); }
@keyframes rstSwing { 0% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.03); } 55% { transform: rotate(3deg) scale(1.04); } 80% { transform: rotate(-1.5deg) scale(1.03); } 100% { transform: scale(1.03); } }
.rst .rst-panel { position: absolute; left: 12px; top: 12px; width: 380px; height: 246px; border-radius: 20px; overflow: hidden; }
.rst .rst-panel > svg { position: absolute; left: 0; top: 0; display: block; }
.rst .rst-puppet { position: absolute; left: 14px; top: 24px; width: 150px; }
.rst .rst-puppet .puppet { display: block; width: 100%; height: auto; }
.rst .rst-card > b { position: absolute; left: 0; right: 0; top: 264px; font-weight: 900; font-size: 32px; }
.rst .rst-card > small { position: absolute; left: 30px; right: 30px; top: 306px; font-weight: 700; font-size: 16px; line-height: 1.3; color: #8a6a86; }
.rst .rst-go { position: absolute; left: 50%; bottom: -27px; transform: translateX(-50%); height: 50px; padding: 0 26px; border-radius: 25px; background: linear-gradient(180deg,#ffb6cf,#ff8fb1); border: 3px solid #fff; box-shadow: 0 5px 0 #d97aa0, 0 8px 14px rgba(90,40,80,.22); display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 20px; color: #fff; white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.15); box-sizing: border-box; }
.rst .rst-go em { font-style: normal; }
.rst .rst-pin { position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd1e6, #ff5fa2 70%); border: 2.5px solid #5a2d4c; box-sizing: border-box; box-shadow: 0 3px 0 rgba(90,45,76,.2); }
.rst .rst-say { position: absolute; left: 164px; top: 16px; width: 192px; background: #fff; border: 2.5px solid #ffd1e6; border-radius: 14px 14px 14px 4px; padding: 6px 10px; font-weight: 900; font-size: 14.5px; line-height: 1.22; text-align: left; box-sizing: border-box; box-shadow: 0 3px 6px rgba(90,40,80,.12); }
.rst .rst-tk { position: absolute; left: 172px; top: 80px; height: 40px; border-radius: 12px; background: #fff8d6; border: 2px dashed #e6c86a; display: flex; align-items: center; gap: 5px; padding: 0 8px; box-sizing: border-box; transform: rotate(-3deg); }
.rst .rst-tk small { font-weight: 800; font-size: 11px; color: #a98a3a; }
.rst .rst-chip { width: 28px; height: 28px; border-radius: 8px; background: #fff; border: 2px solid #ecd9a0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.rst .rst-chip svg { width: 22px; height: 22px; display: block; }
.rst .rst-float.a { animation: rstBob 2.4s ease-in-out infinite alternate; }
.rst .rst-float.b { animation: rstBob 2.1s ease-in-out -.8s infinite alternate; }
@keyframes rstBob { from { transform: translateY(4px); } to { transform: translateY(-7px); } }

/* ================= Free Bowl: the bowl pegboard (reuses the .chs chooser) ================= */
.rbp .ch-pan svg { width: 112px; height: 112px; }
.rbp .ch-caption { top: 566px; }
.rbp .rbp-hover { animation: rbpHover 1.6s ease-in-out infinite alternate; }
@keyframes rbpHover { from { transform: translateY(6px); } to { transform: translateY(-8px); } }

/* ================= step 1: the broth ================= */
.rbs .rb-potgrp { transform: translateY(-700px); }
.rbs .world.in .rb-potgrp { transform: none; transition: transform .62s cubic-bezier(.32,1.3,.55,1) .15s; }
.rbs .rb-swirl { opacity: 0; transition: opacity .4s; }
.rbs .rb-swirl.on { opacity: 1; }
.rbs .rb-pour { position: absolute; inset: 0; pointer-events: none; }
.rms .rb-stream { position: absolute; width: 18px; border-radius: 9px; border: 2.5px solid #5a2d4c; box-sizing: border-box; transform-origin: 50% 0; transition: transform .15s; pointer-events: none; }
.rbs .rb-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; }
.rbs .rb-bottle svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.rbs .rb-bottle.in { opacity: 1; transform: none; }
.rbs .rb-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; }
.rbs .rb-bottle.lifted.tilt { transform: scale(1.1) rotate(100deg); }
.rbs .rb-bottle.hop { animation: rbHop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes rbHop { 0% { transform: none; } 40% { transform: translateY(-22px) rotate(-6deg); } 100% { transform: none; } }
.rbs .rb-knob { position: absolute; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; z-index: 9; transform: rotate(-40deg); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.rbs .rb-knob svg { display: block; pointer-events: none; }
.rbs .rb-knob.on { transform: rotate(70deg); }
.rbs .rb-knob.pulse::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 3px #ff8fb1, 0 0 16px #ff9fc6; animation: rbRing 1s ease-in-out infinite; }
@keyframes rbRing { 0%, 100% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.12); opacity: 1; } }
.rbs .rb-hit { position: absolute; touch-action: none; z-index: 6; }
.rms .rb-ladle { position: absolute; left: 0; top: 0; width: 190px; height: 210px; pointer-events: none; z-index: 12; opacity: 0; transition: opacity .3s, transform .35s cubic-bezier(.3,1.2,.5,1); }
.rms .rb-ladle svg { display: block; }
.rms .rb-ladle.show { opacity: 1; }
.rms .rb-ladle.stir { transition: opacity .3s; }
.rbs .hmeter { left: 84px; }

/* ================= step 2: noodles — the choice: two big heroes, the pot small at the back ================= */
.rnc .rn-back { filter: saturate(.9); }
.rnc .rn-side { position: absolute; top: 146px; width: 470px; height: 580px; padding: 0; border: 0; background: none; cursor: pointer; color: #5a2d4c; opacity: 0; transition: opacity .35s, transform .65s cubic-bezier(.3,1.3,.5,1); }
.rnc .rn-side.left { left: 18px; transform: translateX(-540px) rotate(-7deg); }
.rnc .rn-side.right { left: 536px; transform: translateX(540px) rotate(7deg); }
.rnc .rn-side.in { opacity: 1; transform: none; }
.rnc .rn-side > svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.rnc .rn-side.in .rn-hero { animation: rnBob 2.6s ease-in-out infinite alternate; }
.rnc .rn-side.right.in .rn-hero { animation-delay: -1.3s; }
.rnc .rn-side.hop .rn-hero { animation: rnHop .6s cubic-bezier(.3,1.6,.5,1), rnBob 2.6s ease-in-out .6s infinite alternate; }
@keyframes rnBob { from { translate: 0 4px; } to { translate: 0 -8px; } }
@keyframes rnHop { 0% { translate: 0 0; } 40% { translate: 0 -34px; } 100% { translate: 0 0; } }
.rnc .rn-tag { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 24px; border-radius: 28px; background: #fff; border: 4px solid #5a2d4c; box-shadow: 0 5px 0 rgba(90,45,76,.18); font-weight: 900; font-size: 31px; white-space: nowrap; transition: background .2s, color .2s; }
.rnc .rn-tag svg { display: block; width: 30px; height: 30px; }
.rnc .rn-side small { position: absolute; left: 50%; top: 68px; transform: translateX(-50%); padding: 3px 14px; border-radius: 12px; background: rgba(255,255,255,.92); font-weight: 800; font-size: 18px; color: #8a6a86; white-space: nowrap; }
.rnc .rn-flour { position: absolute; left: 342px; top: 126px; width: 128px; pointer-events: none; }
.rnc .rn-flour svg { display: block; width: 128px; height: 128px; }
.rnc .rn-side.pick { transform: scale(1.06); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.rnc .rn-side.pick .rn-tag { background: #ff8fb1; color: #fff; border-color: #fff; }
.rnc .rn-side.away.left { transform: translateX(-560px) rotate(-8deg); opacity: 0; }
.rnc .rn-side.away.right { transform: translateX(560px) rotate(8deg); opacity: 0; }
.rnc .rn-or { position: absolute; left: 470px; top: 456px; width: 84px; height: 84px; border-radius: 50%; background: #fff; border: 4px solid #5a2d4c; box-sizing: border-box; box-shadow: 0 5px 0 rgba(90,45,76,.18); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 30px; color: #e0598a; transform: scale(0); transition: transform .45s cubic-bezier(.3,1.8,.5,1), opacity .3s; pointer-events: none; z-index: 2; }
.rnc .rn-or.in { transform: none; }
.rnc .rn-or.away { opacity: 0; }

/* ================= step 2: noodles — the cook ================= */
.rck .rc-nest { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; z-index: 7; opacity: 0; transform: scale(.6); transition: transform .35s cubic-bezier(.3,1.5,.5,1), opacity .3s; }
.rck .rc-nest.in { opacity: 1; transform: none; }
.rck .rc-nest > svg { position: absolute; pointer-events: none; }
.rck .rc-nest.dim { opacity: .45; }
.rck .rc-nest.gone { opacity: 0; transform: translateY(-30px) scale(.3); pointer-events: none; }
.rck .rc-nest.nope { animation: nope .35s ease; }
.rck .rc-basket { cursor: grab; }
.rck .rc-hit { position: absolute; left: 280px; top: 130px; width: 720px; height: 500px; touch-action: none; z-index: 6; display: none; }
.rck .rc-hit.on, .rck .rc-hit.shake { display: block; cursor: pointer; }
.rck .rc-jig.go { animation: rcJig .32s ease-out; }
@keyframes rcJig { 0% { transform: none; } 30% { transform: translateY(-18px) rotate(-2deg); } 62% { transform: translateY(10px) rotate(1.5deg); } 100% { transform: none; } }
.rck .rc-gold { transition: stroke .2s; }
.rck .rc-gold.lit { stroke: #ffe14d; filter: drop-shadow(0 0 6px #ffd23f); }

/* ================= step 2: homemade dough ================= */
.rdg .rd-mix { transition: transform .6s cubic-bezier(.5,0,.3,1), opacity .5s; }
.rdg .rd-mix.away { transform: translateX(-760px); opacity: 0; }
.rdg .rd-board { opacity: 0; transform: translateY(460px); transition: transform .6s cubic-bezier(.3,1.25,.5,1), opacity .3s; }
.rdg .rd-board.in { opacity: 1; transform: none; }
.rdg .rd-flourbag { position: absolute; left: 752px; top: 196px; width: 150px; pointer-events: none; transition: transform .6s, opacity .5s; }
.rdg .rd-flourbag svg { display: block; width: 150px; height: 150px; }
.rdg .rd-flourbag.away { transform: translateX(-760px); opacity: 0; }
.rdg .rd-jug { position: absolute; width: 180px; height: 201px; touch-action: none; cursor: grab; z-index: 10; transform-origin: 50% 50%; filter: drop-shadow(0 3px 2px rgba(90,40,80,.2)); transition: left .35s cubic-bezier(.3,1.3,.5,1), top .35s cubic-bezier(.3,1.3,.5,1), transform .25s, opacity .4s; }
.rdg .rd-jug svg { display: block; pointer-events: none; }
.rdg .rd-jug.lifted { transition: transform .22s; filter: drop-shadow(0 14px 10px rgba(90,40,80,.28)); }
.rdg .rd-jug.tilt { transform: rotate(70deg); }
.rdg .rd-jug.away { opacity: 0; transform: translateX(300px); pointer-events: none; }
.rdg .rd-water { transform: scaleY(0); z-index: 9; }
.rdg .rd-spoon { position: absolute; left: 0; top: 0; width: 90px; height: 255px; pointer-events: none; z-index: 12; opacity: 0; transition: opacity .3s; }
.rdg .rd-spoon.show { opacity: 1; }
.rdg .rd-spoon.dipped { clip-path: inset(0 0 54px 0); -webkit-clip-path: inset(0 0 54px 0); }
.rdg .rd-spoon svg, .rdg .rd-pin svg, .rdg .rd-knife svg { display: block; }
.rdg .rd-pin { position: absolute; left: 0; top: 0; width: 572px; height: 132px; pointer-events: none; z-index: 12; opacity: 0; transition: opacity .3s, transform .08s linear; }
.rdg .rd-pin.show { opacity: 1; }
.rdg .rd-pin.grab { filter: drop-shadow(0 8px 6px rgba(90,40,80,.25)); }
.rdg .rd-pin.away { opacity: 0; transition: opacity .5s; }
.rdg .rd-knife { position: absolute; left: 0; top: 0; width: 64px; height: 339px; pointer-events: none; z-index: 12; opacity: 0; transition: opacity .25s; transform-origin: 29px 333px; }
.rdg .rd-knife.show { opacity: 1; }
.rdg .rd-hit { position: absolute; left: 60px; top: 140px; width: 910px; height: 570px; touch-action: none; z-index: 8; }
.rdg .rd-ball.sq { animation: rdSq .3s ease-out; transform-origin: 512px 527px; }
@keyframes rdSq { 0% { transform: none; } 35% { transform: scale(1.18,.76); } 70% { transform: scale(.95,1.06); } 100% { transform: none; } }
.rdg .rd-pile { animation: rdPile .5s cubic-bezier(.3,1.6,.5,1); transform-origin: 512px 444px; }
@keyframes rdPile { from { transform: scale(.6); opacity: .4; } to { transform: none; opacity: 1; } }

/* ================= step 3: the bowl (ladle, slide, comb) ================= */
.rbw .rw-bowl { transform: translateY(-640px); }
.rbw .world.in .rw-bowl { transform: none; transition: transform .62s cubic-bezier(.32,1.3,.55,1) .1s; }
.rbw .rw-ladle { pointer-events: none; touch-action: none; transform-origin: 60px 170px; z-index: 10; }
.rbw .rw-ladle svg { pointer-events: visiblePainted; cursor: grab; }
.rbw .rw-basket { position: absolute; left: 0; top: 0; width: 310px; height: 320px; pointer-events: none; touch-action: none; transform-origin: 90px 180px; z-index: 8; transition: transform .45s cubic-bezier(.3,1.25,.5,1), opacity .4s; filter: drop-shadow(0 4px 3px rgba(90,40,80,.18)); }
.rbw .rw-basket svg { display: block; overflow: visible; pointer-events: visiblePainted; cursor: grab; }
.rbw .rw-basket.lifted { transition: transform .05s linear; filter: drop-shadow(0 14px 10px rgba(90,40,80,.28)); }
.rbw .rw-basket.away { opacity: 0; }
.rbw .rw-basket.away svg { pointer-events: none; }
.rbw .rw-clump { position: absolute; left: 0; top: 0; width: 140px; height: 80px; pointer-events: none; z-index: 9; transition: transform .42s cubic-bezier(.5,0,.7,.6); }
.rbw .rw-clump svg { display: block; overflow: visible; }
.rbw .rw-sticks { position: absolute; left: 0; top: 0; width: 300px; height: 230px; pointer-events: none; touch-action: none; z-index: 11; transition: transform .4s cubic-bezier(.3,1.25,.5,1); filter: drop-shadow(0 4px 3px rgba(90,40,80,.2)); }
.rbw .rw-sticks svg { display: block; overflow: visible; pointer-events: visiblePainted; cursor: grab; }
.rbw .rw-sticks.lifted { transition: none; filter: drop-shadow(0 12px 8px rgba(90,40,80,.28)); }

/* the ladle pour: the tilt eases on its own wrapper, a real stream, ripples, drips,
   three count pips over the bowl, a glow when you're aiming right, a dashed fill line */
.rbw .rw-tilt { position: absolute; left: 0; top: 0; width: 190px; height: 210px; transform-origin: 60px 170px; transition: transform .22s cubic-bezier(.3,1.3,.5,1); }
.rbw .rw-tilt.pour { transform: rotate(-42deg); }
.rbw .rw-tilt.dip { animation: rwDip .38s ease-out; }
@keyframes rwDip { 0% { transform: none; } 40% { transform: translateY(16px) rotate(14deg); } 100% { transform: none; } }
.rbw .rw-pour { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; pointer-events: none; z-index: 9; opacity: 0; transition: opacity .12s; }
.rbw .rw-pour.on { opacity: 1; }
.rbw .rw-pour svg { display: block; overflow: visible; }
.rbw .rw-ring { fill: none; stroke: #fff; stroke-width: 3; opacity: .9; transform-box: fill-box; transform-origin: center; animation: rwRing .85s ease-out forwards; }
@keyframes rwRing { from { transform: scale(.25); opacity: .95; } to { transform: scale(1.35); opacity: 0; } }
.rms .rw-drip { position: absolute; width: 11px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: 2px solid #5a2d4c; box-sizing: border-box; pointer-events: none; transition: transform .6s cubic-bezier(.5,0,1,.7), opacity .6s ease-in; }
.rbw .rw-art { transition: filter .2s; }
.rbw .rw-scene.aim .rw-art { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 14px #ffb6d5); }
.rbw .rw-line, .rbw .rw-line-hearts { transition: opacity .5s; }
.rbw .rw-scene.filled .rw-dash { stroke: #ffd23f; }
.rbw .rw-scene.filled .rw-line, .rbw .rw-scene.filled .rw-line-hearts { opacity: 0; transition-delay: .6s; }
.rbw .rw-steam { transition: opacity .6s; animation: rmSteam 2.6s ease-in-out infinite alternate; }
.rbw .rw-pips { position: absolute; left: 540px; top: 200px; width: 140px; display: flex; justify-content: center; gap: 10px; opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .4s cubic-bezier(.3,1.5,.5,1); pointer-events: none; }
.rbw .rw-pips.in { opacity: 1; transform: none; }
.rbw .rw-pips.done { opacity: 0; transition-delay: .8s; }
.rbw .rw-pips svg { display: block; fill: #fff; filter: drop-shadow(0 3px 0 rgba(90,40,80,.14)); transition: fill .2s; }
.rbw .rw-pips svg.on { fill: var(--broth); animation: rwPip .45s cubic-bezier(.3,1.8,.5,1); }
@keyframes rwPip { 0% { transform: scale(.5); } 60% { transform: scale(1.3); } 100% { transform: none; } }

/* ================= step 4: the ramen bar ================= */
.rbar .rr-bowl { transform: translateY(-640px); }
.rbar .world.in .rr-bowl { transform: none; transition: transform .62s cubic-bezier(.32,1.3,.55,1) .1s; }
.rbar .rt-new { transform-box: fill-box; transform-origin: 50% 70%; animation: dcPop .45s cubic-bezier(.3,1.6,.5,1); }
.rbar .rr-cart { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; pointer-events: none; transform: translateX(450px); }
.rbar .rr-cart.arrive { transform: none; transition: transform .72s cubic-bezier(.22,1.16,.4,1); }
.rbar .rr-cart.arrive.out { transform: translateX(450px); transition: transform .42s cubic-bezier(.6,0,.9,.4); }
.rbar .rr-cart-art, .rbar .rr-items { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; }
.rbar .rr-cart-art svg { position: absolute; left: 0; top: 0; display: block; }
.rbar .rr-spoke { transform-box: fill-box; transform-origin: 50% 50%; }
.rbar .rr-cart.rolling .rr-spoke { animation: dcSpin .26s linear infinite; }
.rbar .rr-item { position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: grab; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
.rbar .rr-item svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; filter: drop-shadow(0 3px 2px rgba(90,40,80,.2)); transition: opacity .15s; }
.rbar .rr-item.bump svg { animation: dcBump .35s cubic-bezier(.3,1.6,.5,1); }
.rbar .rr-item.lifted svg { opacity: .3; }
.rbar .rr-tag { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); padding: 1px 7px; border-radius: 9px; background: #fff; border: 2px solid #f4b8d0; font-weight: 900; font-size: 10.5px; line-height: 1.3; color: #5a2d4c; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 0 rgba(90,40,80,.12); }
.rbar .rr-more { position: absolute; left: 942px; top: 366px; width: 70px; height: 70px; border-radius: 50%; padding: 0; border: 4px solid #fff; background: linear-gradient(180deg,#ffb6cf,#ff5fa2); box-shadow: 0 5px 0 #d9689a, 0 10px 16px rgba(90,40,80,.25); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s cubic-bezier(.3,1.6,.5,1); }
.rbar .rr-more.in { opacity: 1; transform: none; }
.rbar .rr-more svg { display: block; }
.rbar .rr-more.nudge { animation: dcNudge 1.1s ease-in-out 3; }
.rbar .rr-dots { position: absolute; left: 950px; top: 446px; width: 54px; display: flex; justify-content: center; gap: 6px; opacity: 0; transition: opacity .3s; }
.rbar .rr-dots.in { opacity: 1; }
.rbar .rr-dots i { width: 11px; height: 11px; border-radius: 50%; background: #f3d3e3; border: 2px solid #fff; box-shadow: 0 1px 0 rgba(90,40,80,.2); transition: background .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.rbar .rr-dots i.on { background: #ff5fa2; transform: scale(1.2); }
.rbar .rr-undo { position: absolute; left: 18px; top: 698px; width: 54px; height: 54px; border-radius: 50%; padding: 0; border: 3px solid #fff; background: linear-gradient(180deg,#d8c8ff,#a98be8); box-shadow: 0 4px 0 #8a6ac8, 0 8px 12px rgba(90,40,80,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rbar .rr-undo svg { display: block; }
.rbar .rr-hand { position: absolute; left: 0; top: 0; width: 160px; height: 160px; pointer-events: none; opacity: 0; transition: opacity .15s; filter: drop-shadow(0 12px 9px rgba(90,40,80,.3)); z-index: 5; }
.rbar .rr-hand.show { opacity: 1; }
.rbar .rr-hand svg { display: block; overflow: visible; }
.rbar .rr-hand.home { opacity: 0; transition: transform .32s cubic-bezier(.3,1.3,.5,1), opacity .25s .1s; }
.rbar .rr-hand.shake.active svg, .rbar .rr-hand.oil.active svg { animation: dcShake .1s ease-in-out infinite alternate; }
.rbar .rr-moves { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; pointer-events: none; }
.rbar .rr-move { position: absolute; width: 88px; height: 88px; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; border-radius: 50%; }
.rbar .rr-move span { position: absolute; right: -4px; top: -6px; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 3px solid #ff8fb1; box-sizing: border-box; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 rgba(90,40,80,.18); animation: rrBadge 1s ease-in-out infinite alternate; }
.rbar .rr-move span svg { display: block; }
@keyframes rrBadge { from { transform: translateY(0) scale(1); } to { transform: translateY(-6px) scale(1.08); } }
.rbar .rr-knife { position: absolute; left: 0; top: 0; width: 40px; height: 212px; pointer-events: none; animation: rrChop .7s cubic-bezier(.5,0,.3,1) forwards; filter: drop-shadow(0 8px 6px rgba(90,40,80,.3)); }
.rbar .rr-knife svg, .rbar .rr-torch svg { display: block; overflow: visible; }
@keyframes rrChop { 0% { transform: translate(var(--x), calc(var(--y) - 120px)) rotate(-10deg); opacity: 0; } 20% { opacity: 1; } 40% { transform: translate(var(--x), var(--y)) rotate(0deg); } 62% { transform: translate(var(--x), var(--y)) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) - 90px)) rotate(8deg); opacity: 0; } }
.rbar .rr-torch { position: absolute; left: 0; top: 0; width: 60px; height: 172px; pointer-events: none; transform-origin: 30px 64px; animation: rrTorch 1.2s ease-in-out forwards; filter: drop-shadow(0 8px 6px rgba(90,40,80,.3)); }
@keyframes rrTorch {
  0% { transform: translate(calc(var(--x) + 60px), calc(var(--y) - 40px)) rotate(200deg); opacity: 0; }
  15% { opacity: 1; transform: translate(calc(var(--x) - 30px), var(--y)) rotate(180deg); }
  40% { transform: translate(calc(var(--x) + 34px), var(--y)) rotate(172deg); }
  65% { transform: translate(calc(var(--x) - 26px), var(--y)) rotate(188deg); }
  85% { transform: translate(calc(var(--x) + 10px), var(--y)) rotate(180deg); opacity: 1; }
  100% { transform: translate(calc(var(--x) + 80px), calc(var(--y) - 50px)) rotate(200deg); opacity: 0; }
}
.rbar .rr-torch .rr-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: dcFlame .12s ease-in-out infinite alternate; }

/* ================= step 5 (for now): your bowl on the counter, then the card ================= */
.ramen .rm-served { position: relative; z-index: 1; width: min(62cqw, 400px, 72cqh); aspect-ratio: 1; transform: translateY(15%); }
.ramen .rm-served svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 12px rgba(90,40,80,.16)); }
.reveal .preview.rv-prev { width: 240px; height: 198px; }
.reveal .rv-bowl { width: 240px; height: 198px; margin: 0 auto; }
.reveal .rv-bowl svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ================= the big NEXT button (every step ends with it) ================= */
.rms .rm-next { position: absolute; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 70; opacity: 0; transform: translateX(200px) scale(.5); transition: opacity .25s, transform .6s cubic-bezier(.3,1.6,.5,1); }
.rms .hud .rm-next:not(.show) { pointer-events: none; }
.rms .rm-next.show { opacity: 1; transform: none; }
.rms .rm-next.go { transform: scale(1.12); opacity: 0; transition: transform .25s, opacity .3s .1s; }
.rms .rm-next-lbl { padding: 10px 22px; border-radius: 26px; background: #fff; border: 4px solid #5a2d4c; box-shadow: 0 5px 0 rgba(90,45,76,.18); font-weight: 900; font-size: 30px; line-height: 1.1; color: #5a2d4c; white-space: nowrap; }
.rms .rm-next-btn { position: relative; width: 122px; height: 122px; border-radius: 50%; background: linear-gradient(180deg, #ffb6cf, #ff5fa2); border: 6px solid #fff; box-sizing: border-box; box-shadow: 0 7px 0 #d9689a, 0 14px 26px rgba(90,40,80,.32); display: flex; align-items: center; justify-content: center; }
.rms .rm-next.show .rm-next-btn { animation: rmNextPulse 1.3s ease-in-out .6s infinite; }
.rms .rm-next-btn::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; border: 6px solid #ff8fb1; opacity: 0; }
.rms .rm-next.show .rm-next-btn::before { animation: rmNextRing 1.3s ease-out .6s infinite; }
.rms .rm-next-btn svg { display: block; width: 66px; height: 66px; }
.rms .rm-next.show .rm-next-btn svg { animation: rmNextNudge 1.3s ease-in-out .6s infinite; }
@keyframes rmNextPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes rmNextRing { 0% { transform: scale(.82); opacity: .95; } 100% { transform: scale(1.32); opacity: 0; } }
@keyframes rmNextNudge { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(8px); } }

/* ================= moving between steps: the kitchen pans on to the next scene ================= */
.ramen.mixing { background: #fff8fb; }
.ramen .mixstage-wrap { transition: opacity .45s ease, transform .55s cubic-bezier(.3,1,.4,1); }
.ramen .mixstage-wrap.entering { opacity: 0; transform: translateX(16%); }
.ramen .mixstage-wrap.leaving { opacity: 0; transform: translateX(-16%); }

/* ================= things arriving in a scene (translate/scale compose with their own transforms) ================= */
.rms .world.in .rm-in { animation: rmInUp .6s cubic-bezier(.3,1.35,.5,1) var(--d, 0s) backwards; }
.rms .world.in .rm-in.l { animation-name: rmInLeft; }
.rms .world.in .rm-in.r { animation-name: rmInRight; }
.rms .world.in .rm-in.drop { animation-name: rmInDrop; animation-duration: .7s; }
.rms .world.in .rm-in.pop { animation-name: rmInPop; }
.rms g.rm-in.pop { transform-box: fill-box; transform-origin: 50% 80%; }
@keyframes rmInUp { from { opacity: 0; translate: 0 110px; } to { opacity: 1; translate: 0 0; } }
@keyframes rmInLeft { from { opacity: 0; translate: -460px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes rmInRight { from { opacity: 0; translate: 460px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes rmInDrop { 0% { opacity: 0; translate: 0 -560px; } 60% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }
@keyframes rmInPop { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }

/* ================= a ladle / spoon standing IN the pot or bowl ================= */
.rms .rb-ladle.dipped { clip-path: inset(0 0 62px 0); -webkit-clip-path: inset(0 0 62px 0); }
.rms .rm-collar { display: none; }
.rms .rm-collar.on { display: inline; }
.rms .rm-collar .ring { transform-box: fill-box; transform-origin: center; animation: rmCollar 1.4s ease-out infinite; }
@keyframes rmCollar { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }