/* A small machine control rather than one tap for every part. */
body[data-mission="2"] #rf-stage[data-mechanic="packing-share"] .rf-packing-adventure {
  width:100%;max-width:40rem;box-sizing:border-box;overflow:hidden;color:#173d46;
  border:3px solid #315b60;border-radius:18px;background:#dcebe0;box-shadow:0 6px 0 #1c3e3c,0 10px 22px #0c252b66;
}
.rf-packing-adventure *, .rf-packing-adventure *::before,.rf-packing-adventure *::after{box-sizing:border-box}
.rf-packing-machine-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.55rem .9rem;background:#264e58;color:#fff4cf;border-bottom:3px solid #e8bd66}
.rf-packing-machine-top p{margin:0;text-align:center;font-size:clamp(.75rem,2vw,.9rem);font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.rf-packing-light{flex:0 0 11px;height:11px;border-radius:50%;background:#ffce58;box-shadow:0 0 0 2px #b18a3c,0 0 9px #fce49c}
.rf-packing-order{padding:1rem 1rem .85rem;background:#f8f5df}
.rf-packing-order>div:first-child>span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:850;color:#a1582b}
.rf-packing-order h3{margin:.15rem 0 .35rem;color:#173d46;font-size:clamp(1.1rem,3vw,1.4rem);line-height:1.15}
.rf-packing-order>p{margin:.1rem 0 .8rem;line-height:1.4;color:#34574f}
.rf-packing-gauges{display:flex;align-items:stretch;gap:.35rem}
.rf-packing-gauges>div{display:flex;flex:1 1 0;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;padding:.5rem .2rem;border:1px solid #adc5b6;border-radius:9px;background:#e5f2e7;text-align:center}
.rf-packing-gauges>div strong{font-size:clamp(1.4rem,4vw,2rem);line-height:1;color:#214b52}
.rf-packing-gauges>div span{font-size:clamp(.65rem,1.7vw,.8rem);line-height:1.2;font-weight:750}
.rf-packing-gauges .rf-packing-question{background:#fff0c4;border-color:#d5ae62}
.rf-packing-math-symbol{align-self:center;color:#815d31;font-size:1.3rem;font-weight:850}
.rf-packing-belt{position:relative;min-height:98px;padding:28px 14px 18px;overflow:hidden;background:linear-gradient(#a9ccc1,#d2e5ce)}
.rf-packing-belt::after{content:"";position:absolute;right:0;bottom:13px;left:0;height:12px;background:repeating-linear-gradient(90deg,#456b6a 0 18px,#6a9290 18px 26px);border-top:3px solid #294f52;border-bottom:3px solid #294f52}
.rf-packing-cases{position:relative;z-index:1;display:flex;align-items:end;justify-content:space-evenly;gap:3px;height:46px}
.rf-packing-cases i{display:block;flex:0 1 34px;width:34px;min-width:10px;height:clamp(24px,5vw,38px);border:2px solid #715234;border-radius:5px;background:linear-gradient(135deg,#e2af63 0 45%,#c98f4a 45% 54%,#e9b66c 54%);box-shadow:inset 0 0 0 2px #f9d28b}
.rf-packing-arm{position:absolute;z-index:2;right:13%;top:0;width:44px;height:33px;background:#315e63;border:3px solid #214a50;border-radius:0 0 8px 8px}
.rf-packing-arm::after{content:"";position:absolute;left:8px;bottom:-9px;width:23px;height:9px;border:2px solid #315e63;border-radius:0 0 6px 6px;background:#e6bc62}
.rf-packing-options{min-width:0;margin:0;padding:1rem;border:0;background:#eff7ef}
.rf-packing-options legend{float:left;width:100%;margin:0 0 .7rem;padding:0;font-size:1rem;font-weight:850;color:#21434a}
.rf-packing-options-grid{clear:both;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.rf-packing-option{min-width:0;min-height:56px;border:2px solid #668d80;border-radius:10px;background:#fffdf0;color:#21444c;box-shadow:0 3px 0 #abc3b5;font:inherit;font-size:clamp(1.3rem,4vw,1.75rem);font-weight:900;cursor:pointer}
.rf-packing-option[aria-pressed="true"]{border-color:#176f4e;background:#d1efdc;box-shadow:0 0 0 3px #a4dcb9,0 3px 0 #5b9d78}
.rf-packing-option:focus-visible{outline:3px solid #d57f25;outline-offset:3px}
.rf-packing-option:disabled{cursor:default}
.rf-packing-instruction{clear:both;margin:.85rem 0 0;color:#315a50;font-size:.86rem;line-height:1.35}
@media(max-width:390px){.rf-packing-order{padding:.8rem .7rem}.rf-packing-options{padding:.8rem .7rem}.rf-packing-gauges{gap:.18rem}.rf-packing-math-symbol{font-size:1rem}.rf-packing-option{min-height:50px}}
@media(prefers-reduced-motion:reduce){.rf-packing-adventure *{animation:none!important;transition:none!important}}

.rf-packing-setting{position:absolute;z-index:3;left:12px;top:8px;padding:.2rem .45rem;border:1px solid #8cb2a2;border-radius:5px;background:#f9ffea;color:#31534a;font-size:.72rem;font-weight:750}
.rf-packing-adventure[data-packing-active="true"] .rf-packing-arm{animation:rf-packing-piston .8s ease-in-out infinite alternate}
.rf-packing-adventure[data-packing-active="true"] .rf-packing-cases{animation:rf-packing-vibrate .7s ease-in-out infinite alternate}
@keyframes rf-packing-piston{from{transform:translateY(0)}to{transform:translateY(8px)}}
@keyframes rf-packing-vibrate{from{transform:translateX(0)}to{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.rf-packing-adventure[data-packing-active="true"] .rf-packing-arm,.rf-packing-adventure[data-packing-active="true"] .rf-packing-cases{animation:none}}
/* Once the answer is accepted, the packed sets leave on their conveyor. */
.rf-packing-adventure[data-packing-solved="true"] .rf-packing-cases{animation:rf-packing-dispatch 3.2s ease-in both}
.rf-packing-adventure[data-packing-solved="true"] .rf-packing-arm{animation:rf-packing-piston .7s ease-in-out 2 alternate}
@keyframes rf-packing-dispatch{0%,25%{transform:translateX(0);opacity:1}80%{opacity:1}100%{transform:translateX(125%);opacity:0}}
@media(prefers-reduced-motion:reduce){.rf-packing-adventure[data-packing-solved="true"] .rf-packing-cases,.rf-packing-adventure[data-packing-solved="true"] .rf-packing-arm{animation:none}}

/* A story image makes the filling machine tangible; the numbers remain live controls. */
.rf-packing-scene{height:clamp(110px,22vw,190px);overflow:hidden;background:#c79955;border-bottom:3px solid #d4ad69}
.rf-packing-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%}