/*
 * Input-driven action direction for the 13 funding scenes.
 * The center illustration stays locked like one camera shot; each press moves
 * only its scene-specific limb crop and physical prop. All animation stays on
 * transform/opacity so rapid tapping does not force paint-heavy layout work.
 */

.minigame-scene {
  --motion-strength: .7;
  --motion-duration: 430ms;
  --limb-x: 50%;
  --limb-y: 54%;
  --limb-rx: 24%;
  --limb-ry: 24%;
  --limb-origin-x: 50%;
  --limb-origin-y: 54%;
  width: 100%;
  height: clamp(210px, 30dvh, 286px);
  contain: paint;
}

.minigame-scene .action-scene-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background: #e8f2ec;
  isolation: isolate;
}

.minigame-scene .action-scene-backdrop,
.minigame-scene .action-panel-layer,
.minigame-scene .action-character-layer {
  position: absolute;
  background-image: var(--scene-image);
  background-repeat: no-repeat;
  background-position: var(--scene-panel-position) 50%;
  background-size: var(--scene-background-size, cover);
}

.minigame-scene .action-scene-backdrop {
  inset: -12px;
  z-index: 0;
  background-size: var(--scene-cover-size, cover);
  filter: blur(12px) saturate(.72) brightness(.9);
  transform: translateZ(0) scale(1.08);
}

.minigame-scene .action-panel-layer,
.minigame-scene .action-character-motion {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: auto;
  aspect-ratio: 1;
  transform: translateX(-50%) translateZ(0);
}

.minigame-scene .action-panel-layer {
  z-index: 1;
  background-color: #f7f3e8;
  box-shadow: 0 0 0 2px rgba(255,254,250,.78), 0 8px 26px rgba(23,52,45,.22);
}

/* The story strip never advances during a minigame: only its center panel is used. */
.minigame-scene[data-scene-panels="3"] .action-scene-backdrop,
.minigame-scene[data-scene-panels="3"] .action-panel-layer,
.minigame-scene[data-scene-panels="3"] .action-character-layer {
  background-position: 50% 50%;
}

/* Remove the original limb from the fixed panel so the moving duplicate cannot ghost. */
.minigame-scene[data-scene-panels="3"] .action-panel-layer {
  -webkit-mask-image: radial-gradient(ellipse var(--limb-rx) var(--limb-ry) at var(--limb-x) var(--limb-y), transparent 0 78%, rgba(0,0,0,.75) 90%, #000 94% 100%);
  mask-image: radial-gradient(ellipse var(--limb-rx) var(--limb-ry) at var(--limb-x) var(--limb-y), transparent 0 78%, rgba(0,0,0,.75) 90%, #000 94% 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.minigame-scene[data-scene-panels="1"] .action-panel-layer,
.minigame-scene[data-scene-panels="1"] .action-character-motion {
  right: 0;
  left: 0;
  width: 100%;
  aspect-ratio: auto;
  transform: translateZ(0);
}

.minigame-scene .action-character-motion {
  z-index: 2;
  clip-path: ellipse(var(--limb-rx) var(--limb-ry) at var(--limb-x) var(--limb-y));
  -webkit-mask-image: radial-gradient(ellipse var(--limb-rx) var(--limb-ry) at var(--limb-x) var(--limb-y), #000 0 90%, rgba(0,0,0,.45) 96%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--limb-rx) var(--limb-ry) at var(--limb-x) var(--limb-y), #000 0 90%, rgba(0,0,0,.45) 96%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform-origin: var(--limb-origin-x) var(--limb-origin-y);
  will-change: transform;
}

.minigame-scene .action-character-layer {
  inset: 0;
  background-color: transparent;
}

.minigame-scene[data-scene-panels="1"] .action-character-layer { background-size: cover; }

.minigame-scene .action-prop-layer,
.minigame-scene .action-impact-ring {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.minigame-scene .action-prop-layer {
  top: 0;
  bottom: 0;
  left: 50%;
  width: auto;
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.minigame-scene .motion-prop {
  position: absolute;
  display: block;
  opacity: 0;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.minigame-scene .motion-prop::before,
.minigame-scene .motion-prop::after {
  position: absolute;
  content: "";
}

.minigame-scene .action-impact-ring {
  top: 48%;
  left: 60%;
  width: 34px;
  aspect-ratio: 1;
  border: 3px solid rgba(255, 231, 101, .95);
  border-radius: 50%;
  opacity: 0;
}

.minigame-scene.is-actioning[data-motion-step="0"] .action-character-motion {
  animation: action-character-a var(--motion-duration) cubic-bezier(.2, .9, .25, 1);
}

.minigame-scene.is-actioning[data-motion-step="1"] .action-character-motion {
  animation: action-character-b var(--motion-duration) cubic-bezier(.2, .9, .25, 1);
}

.minigame-scene.is-actioning[data-motion-type="miss"] .action-character-motion {
  animation-name: action-character-miss;
}

.minigame-scene[data-scene-panels="1"].is-actioning[data-motion-step="0"] .action-character-motion {
  animation-name: action-character-full-a;
}

.minigame-scene[data-scene-panels="1"].is-actioning[data-motion-step="1"] .action-character-motion {
  animation-name: action-character-full-b;
}

.minigame-scene[data-scene-panels="1"].is-actioning[data-motion-type="miss"] .action-character-motion {
  animation-name: action-character-full-miss;
}

.minigame-scene.is-actioning[data-motion-type="success"] .action-impact-ring,
.minigame-scene.is-actioning[data-motion-type="message"] .action-impact-ring,
.minigame-scene.is-actioning[data-motion-type="contract"] .action-impact-ring {
  animation: action-impact calc(var(--motion-duration) + 20ms) ease-out;
}

@keyframes action-character-a {
  0%, 100% { transform: translateX(-50%) translate3d(0, 0, 0) rotate(0) scale(1); }
  46% { transform: translateX(-50%) translate3d(var(--motion-x), var(--motion-y), 0) rotate(var(--motion-rotate)) scale(var(--motion-scale)); }
}

@keyframes action-character-b {
  0%, 100% { transform: translateX(-50%) translate3d(0, 0, 0) rotate(0) scale(1); }
  46% { transform: translateX(-50%) translate3d(var(--motion-x-reverse), var(--motion-y), 0) rotate(var(--motion-rotate-reverse)) scale(var(--motion-scale)); }
}

@keyframes action-character-miss {
  0%, 100% { transform: translateX(-50%) translate3d(0, 0, 0) rotate(0); }
  28% { transform: translateX(-50%) translate3d(-5px, 1px, 0) rotate(-1.3deg); }
  64% { transform: translateX(-50%) translate3d(4px, 0, 0) rotate(1deg); }
}

@keyframes action-character-full-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  46% { transform: translate3d(var(--motion-x), var(--motion-y), 0) rotate(var(--motion-rotate)) scale(var(--motion-scale)); }
}

@keyframes action-character-full-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  46% { transform: translate3d(var(--motion-x-reverse), var(--motion-y), 0) rotate(var(--motion-rotate-reverse)) scale(var(--motion-scale)); }
}

@keyframes action-character-full-miss {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  28% { transform: translate3d(-5px, 1px, 0) rotate(-1.3deg); }
  64% { transform: translate3d(4px, 0, 0) rotate(1deg); }
}

@keyframes action-impact {
  0% { opacity: .9; transform: translate(-50%, -50%) scale(.35); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

/* 1. Convenience store: the hand impulse drives a scanner beam and receipt. */
.minigame-scene[data-scene-id="parttime-convenience"] {
  --limb-x: 77%; --limb-y: 46%; --limb-rx: 23%; --limb-ry: 28%; --limb-origin-x: 78%; --limb-origin-y: 41%;
}
.minigame-scene[data-scene-id="parttime-convenience"] .prop-core {
  top: 57%; left: 46%; width: 28%; height: 4px;
  border-radius: 999px; background: #ff6359;
  box-shadow: 0 0 0 1px rgba(255,255,255,.85), 0 0 12px #ff6359;
  transform-origin: 0 50%;
}
.minigame-scene[data-scene-id="parttime-convenience"] .prop-secondary {
  top: 42%; left: 57%; width: 30px; height: 48px;
  border: 2px solid #17342d; border-radius: 3px;
  background: repeating-linear-gradient(to bottom, #fffefa 0 5px, #b8cac4 5px 7px, #fffefa 7px 11px);
}
.minigame-scene[data-scene-id="parttime-convenience"] .prop-accent {
  top: 49%; left: 60%; width: 8px; height: 8px; border-radius: 50%;
  background: #ffe765; box-shadow: 13px -10px 0 -2px #ffe765, 14px 10px 0 -3px #ffe765;
}
.minigame-scene.is-actioning[data-scene-id="parttime-convenience"] .prop-core { animation: scan-beam var(--motion-duration) ease-out; }
.minigame-scene.is-actioning[data-scene-id="parttime-convenience"] .prop-secondary { animation: receipt-print calc(var(--motion-duration) + 20ms) ease-out; }
.minigame-scene.is-actioning[data-scene-id="parttime-convenience"] .prop-accent { animation: prop-pop var(--motion-duration) ease-out; }

/* 2. Dishwashing: soap bubbles rise from the moving hands. */
.minigame-scene[data-scene-id="parttime-dishes"] { --limb-x: 55%; --limb-y: 51%; --limb-rx: 31%; --limb-ry: 34%; --limb-origin-x: 55%; --limb-origin-y: 43%; }
.minigame-scene[data-scene-id="parttime-dishes"] .prop-core,
.minigame-scene[data-scene-id="parttime-dishes"] .prop-secondary,
.minigame-scene[data-scene-id="parttime-dishes"] .prop-accent {
  left: 50%; bottom: 31%; width: 14px; height: 14px;
  border: 2px solid rgba(70, 163, 189, .9); border-radius: 50%; background: rgba(239, 252, 255, .7);
  box-shadow: 22px -7px 0 -3px rgba(239,252,255,.9), -17px -12px 0 -4px rgba(239,252,255,.85);
}
.minigame-scene[data-scene-id="parttime-dishes"] .prop-secondary { left: 55%; bottom: 38%; scale: .8; }
.minigame-scene[data-scene-id="parttime-dishes"] .prop-accent { left: 45%; bottom: 29%; scale: .62; }
.minigame-scene.is-actioning[data-scene-id="parttime-dishes"] .motion-prop { animation: bubbles-up calc(var(--motion-duration) + 20ms) ease-out; }
.minigame-scene.is-actioning[data-scene-id="parttime-dishes"] .prop-secondary { animation-delay: 35ms; }
.minigame-scene.is-actioning[data-scene-id="parttime-dishes"] .prop-accent { animation-delay: 70ms; }

/* 3. Parcel work: a taped box visibly lifts and lands. */
.minigame-scene[data-scene-id="parttime-parcel"] { --limb-x: 54%; --limb-y: 46%; --limb-rx: 23%; --limb-ry: 32%; --limb-origin-x: 54%; --limb-origin-y: 46%; }
.minigame-scene[data-scene-id="parttime-parcel"] .prop-core {
  left: 46%; bottom: 22%; width: 64px; height: 50px;
  border: 3px solid #17342d; border-radius: 4px; background: #c9965e;
  box-shadow: inset 0 8px rgba(255,255,255,.2);
}
.minigame-scene[data-scene-id="parttime-parcel"] .prop-core::before { top: -3px; left: 27px; width: 9px; height: 50px; background: #eed39a; border-inline: 2px solid #17342d; }
.minigame-scene[data-scene-id="parttime-parcel"] .prop-secondary { left: 45%; bottom: 19%; width: 80px; height: 9px; border-radius: 50%; background: rgba(23,52,45,.18); }
.minigame-scene.is-actioning[data-scene-id="parttime-parcel"] .prop-core { animation: box-lift calc(var(--motion-duration) + 20ms) cubic-bezier(.2,.9,.25,1); }
.minigame-scene.is-actioning[data-scene-id="parttime-parcel"] .prop-secondary { animation: box-shadow-shift calc(var(--motion-duration) + 20ms) ease-out; }

/* 4. Delivery: direction input leaves graphic speed lines. */
.minigame-scene[data-scene-id="parttime-delivery"] { --limb-x: 49%; --limb-y: 45%; --limb-rx: 27%; --limb-ry: 29%; --limb-origin-x: 51%; --limb-origin-y: 45%; }
.minigame-scene[data-scene-id="parttime-delivery"] .motion-prop {
  right: 54%; width: 82px; height: 5px; border-radius: 99px; background: #fffefa;
  box-shadow: 0 0 0 1px rgba(23,52,45,.15);
}
.minigame-scene[data-scene-id="parttime-delivery"] .prop-core { top: 42%; }
.minigame-scene[data-scene-id="parttime-delivery"] .prop-secondary { top: 53%; width: 112px; }
.minigame-scene[data-scene-id="parttime-delivery"] .prop-accent { top: 64%; width: 61px; }
.minigame-scene.is-actioning[data-scene-id="parttime-delivery"] .motion-prop { animation: speed-line var(--motion-duration) ease-out; }
.minigame-scene.is-actioning[data-scene-id="parttime-delivery"] .prop-secondary { animation-delay: 24ms; }
.minigame-scene.is-actioning[data-scene-id="parttime-delivery"] .prop-accent { animation-delay: 48ms; }

/* 5. Flyer: the actual leaflet travels from the hand to the passer-by. */
.minigame-scene[data-scene-id="parttime-flyer"] { --limb-x: 77%; --limb-y: 52%; --limb-rx: 25%; --limb-ry: 34%; --limb-origin-x: 83%; --limb-origin-y: 45%; }
.minigame-scene[data-scene-id="parttime-flyer"] .prop-core,
.minigame-scene[data-scene-id="parttime-flyer"] .prop-secondary {
  top: 45%; left: 49%; width: 38px; height: 48px;
  border: 2px solid #17342d; border-radius: 3px; background: #fff5ac;
  box-shadow: inset 0 -25px 0 -22px #ef7968, inset 0 -34px 0 -30px #267953;
}
.minigame-scene[data-scene-id="parttime-flyer"] .prop-secondary { top: 52%; left: 45%; scale: .76; }
.minigame-scene.is-actioning[data-scene-id="parttime-flyer"] .prop-core { animation: flyer-hand-off calc(var(--motion-duration) + 20ms) cubic-bezier(.2,.8,.3,1); }
.minigame-scene.is-actioning[data-scene-id="parttime-flyer"] .prop-secondary { animation: flyer-stack var(--motion-duration) ease-out; }

/* 6. Used market: the chosen price tag swings into place. */
.minigame-scene[data-scene-id="parttime-used-market"] { --limb-x: 76%; --limb-y: 53%; --limb-rx: 24%; --limb-ry: 34%; --limb-origin-x: 80%; --limb-origin-y: 45%; }
.minigame-scene[data-scene-id="parttime-used-market"] .prop-core {
  top: 41%; left: 55%; width: 66px; height: 42px;
  border: 3px solid #17342d; border-radius: 8px 5px 5px 8px; background: #ffe765;
  transform-origin: 0 50%;
}
.minigame-scene[data-scene-id="parttime-used-market"] .prop-core::before { content: "₩"; inset: 5px auto auto 22px; color: #17342d; font: 900 22px/1 sans-serif; }
.minigame-scene[data-scene-id="parttime-used-market"] .prop-core::after { top: 14px; left: 6px; width: 8px; height: 8px; border: 2px solid #17342d; border-radius: 50%; background: #fffefa; }
.minigame-scene.is-actioning[data-scene-id="parttime-used-market"] .prop-core { animation: price-tag calc(var(--motion-duration) + 20ms) cubic-bezier(.2,.9,.2,1); }

/* 7. Streaming: each timely reaction sends chat hearts upward. */
.minigame-scene[data-scene-id="parttime-stream"] { --limb-x: 75%; --limb-y: 52%; --limb-rx: 28%; --limb-ry: 36%; --limb-origin-x: 74%; --limb-origin-y: 44%; }
.minigame-scene[data-scene-id="parttime-stream"] .motion-prop { left: 43%; bottom: 29%; color: #ef675d; font: 900 27px/1 sans-serif; }
.minigame-scene[data-scene-id="parttime-stream"] .motion-prop::before { content: "♥"; }
.minigame-scene[data-scene-id="parttime-stream"] .prop-secondary { left: 38%; bottom: 21%; color: #f09c4c; scale: .76; }
.minigame-scene[data-scene-id="parttime-stream"] .prop-accent { left: 48%; bottom: 35%; color: #f1c74b; scale: .62; }
.minigame-scene.is-actioning[data-scene-id="parttime-stream"] .motion-prop { animation: chat-heart calc(var(--motion-duration) + 20ms) ease-out; }
.minigame-scene.is-actioning[data-scene-id="parttime-stream"] .prop-secondary { animation-delay: 32ms; }
.minigame-scene.is-actioning[data-scene-id="parttime-stream"] .prop-accent { animation-delay: 62ms; }

/* 8. Day labour: a safety helmet drops into its working position. */
.minigame-scene[data-scene-id="parttime-daywork"] { --limb-x: 39%; --limb-y: 45%; --limb-rx: 30%; --limb-ry: 29%; --limb-origin-x: 43%; --limb-origin-y: 42%; }
.minigame-scene[data-scene-id="parttime-daywork"] .prop-core {
  top: 18%; left: 45%; width: 70px; height: 34px;
  border: 3px solid #17342d; border-radius: 40px 40px 8px 8px; background: #ffd64d;
  box-shadow: inset 0 -7px rgba(221,158,28,.35);
}
.minigame-scene[data-scene-id="parttime-daywork"] .prop-core::after { right: -10px; bottom: -3px; left: -10px; height: 8px; border: 3px solid #17342d; border-radius: 10px; background: #ffd64d; }
.minigame-scene.is-actioning[data-scene-id="parttime-daywork"] .prop-core { animation: helmet-drop calc(var(--motion-duration) + 20ms) cubic-bezier(.17,.89,.3,1.2); }

/* 9. Friend: an outgoing message bubble crosses the phone conversation. */
.minigame-scene[data-scene-id="borrow-friend"] { --limb-x: 30%; --limb-y: 50%; --limb-rx: 27%; --limb-ry: 31%; --limb-origin-x: 27%; --limb-origin-y: 45%; }
.minigame-scene[data-scene-id="borrow-friend"] .prop-core {
  top: 35%; left: 54%; width: 110px; height: 48px;
  border: 3px solid #17342d; border-radius: 18px 18px 18px 4px; background: #ffe765;
  box-shadow: 0 5px 0 rgba(23,52,45,.12);
}
.minigame-scene[data-scene-id="borrow-friend"] .prop-core::before { content: "…"; top: 2px; left: 34px; color: #17342d; font: 900 27px/1 sans-serif; letter-spacing: 3px; }
.minigame-scene.is-actioning[data-scene-id="borrow-friend"] .prop-core { animation: message-send calc(var(--motion-duration) + 20ms) cubic-bezier(.2,.85,.2,1); }

/* 10. Family: the call card rings as the promise is sent. */
.minigame-scene[data-scene-id="borrow-family"] { --limb-x: 74%; --limb-y: 56%; --limb-rx: 29%; --limb-ry: 39%; --limb-origin-x: 76%; --limb-origin-y: 54%; }
.minigame-scene[data-scene-id="borrow-family"] .prop-core {
  top: 32%; left: 55%; width: 45px; height: 76px;
  border: 3px solid #17342d; border-radius: 9px; background: #d8eee3;
  box-shadow: inset 0 -12px #fffefa;
}
.minigame-scene[data-scene-id="borrow-family"] .prop-core::before { top: 11px; left: 13px; width: 13px; height: 13px; border: 3px solid #267953; border-radius: 50%; }
.minigame-scene[data-scene-id="borrow-family"] .prop-secondary,
.minigame-scene[data-scene-id="borrow-family"] .prop-accent { top: 31%; left: 60%; width: 13px; height: 22px; border: 3px solid #267953; border-left: 0; border-radius: 0 20px 20px 0; }
.minigame-scene[data-scene-id="borrow-family"] .prop-accent { left: 63%; scale: 1.35; }
.minigame-scene.is-actioning[data-scene-id="borrow-family"] .prop-core { animation: phone-ring var(--motion-duration) ease-in-out; }
.minigame-scene.is-actioning[data-scene-id="borrow-family"] .prop-secondary,
.minigame-scene.is-actioning[data-scene-id="borrow-family"] .prop-accent { animation: call-wave calc(var(--motion-duration) + 20ms) ease-out; }

/* 11. Bank loan: the user's choice receives a physical approval stamp. */
.minigame-scene[data-scene-id="loan-bank"] { --limb-x: 31%; --limb-y: 50%; --limb-rx: 26%; --limb-ry: 29%; --limb-origin-x: 28%; --limb-origin-y: 45%; }
.minigame-scene[data-scene-id="loan-bank"] .prop-core {
  top: 34%; left: 54%; width: 72px; height: 72px;
  border: 5px double #c8453d; border-radius: 50%; color: #c8453d; background: rgba(255,254,250,.78);
}
.minigame-scene[data-scene-id="loan-bank"] .prop-core::before { content: "승인"; inset: 20px auto auto 10px; font: 900 20px/1 sans-serif; transform: rotate(-9deg); }
.minigame-scene.is-actioning[data-scene-id="loan-bank"] .prop-core { animation: bank-stamp calc(var(--motion-duration) + 20ms) cubic-bezier(.2,.95,.25,1); }

/* 12. Cash advance: holding fills a card approval slip. */
.minigame-scene[data-scene-id="loan-card"] { --limb-x: 64%; --limb-y: 52%; --limb-rx: 27%; --limb-ry: 38%; --limb-origin-x: 62%; --limb-origin-y: 47%; }
.minigame-scene[data-scene-id="loan-card"] .prop-core {
  top: 40%; left: 54%; width: 98px; height: 58px;
  border: 3px solid #17342d; border-radius: 10px; background: linear-gradient(135deg, #79b9df, #d9f0ef);
  box-shadow: inset 0 10px rgba(255,255,255,.45), 0 5px 0 rgba(23,52,45,.12);
}
.minigame-scene[data-scene-id="loan-card"] .prop-core::before { content: "승인"; right: 9px; bottom: 8px; padding: 3px 5px; border: 2px solid #267953; border-radius: 4px; color: #267953; background: #fffefa; font: 900 12px/1 sans-serif; }
.minigame-scene[data-scene-id="loan-card"] .prop-secondary { top: 55%; left: 56%; width: 72px; height: 4px; border-radius: 9px; background: #267953; transform-origin: 0 50%; }
.minigame-scene.is-actioning[data-scene-id="loan-card"] .prop-core { animation: card-approve calc(var(--motion-duration) + 20ms) ease-out; }
.minigame-scene.is-actioning[data-scene-id="loan-card"] .prop-secondary { animation: approval-fill calc(var(--motion-duration) + 20ms) ease-out; }

/* 13. Shadow loan: the black business card snaps into the hand. */
.minigame-scene[data-scene-id="loan-shadow"] { --limb-x: 74%; --limb-y: 52%; --limb-rx: 29%; --limb-ry: 33%; --limb-origin-x: 77%; --limb-origin-y: 44%; }
.minigame-scene[data-scene-id="loan-shadow"] .prop-core {
  top: 40%; left: 54%; width: 102px; height: 57px;
  border: 2px solid #f4ce53; border-radius: 5px; background: #17201e;
  box-shadow: 0 7px 0 rgba(0,0,0,.22);
}
.minigame-scene[data-scene-id="loan-shadow"] .prop-core::before { content: "24시"; top: 11px; right: 12px; color: #f4ce53; font: 900 15px/1 sans-serif; }
.minigame-scene[data-scene-id="loan-shadow"] .prop-core::after { bottom: 10px; left: 11px; width: 45px; height: 3px; background: #f4ce53; box-shadow: 0 -8px #f4ce53; }
.minigame-scene.is-actioning[data-scene-id="loan-shadow"] .prop-core { animation: business-card calc(var(--motion-duration) + 20ms) cubic-bezier(.16,.9,.23,1.1); }

/*
 * Scene-directed limb acting cut from the same fixed center illustration.
 * Every transform belongs to the masked hand, arm, or upper-body region only.
 */
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="parttime-convenience"] .action-character-motion { animation: body-scan var(--motion-duration) ease-in-out; }
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="parttime-dishes"] .action-character-motion { animation: body-scrub var(--motion-duration) ease-in-out; }
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="parttime-parcel"] .action-character-motion { animation: body-lift var(--motion-duration) cubic-bezier(.2,.85,.25,1); }
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="parttime-delivery"] .action-character-motion { animation: body-ride var(--motion-duration) ease-in-out; }
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="parttime-flyer"] .action-character-motion { animation: body-reach var(--motion-duration) cubic-bezier(.2,.9,.2,1); }
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="parttime-used-market"] .action-character-motion { animation: body-bargain var(--motion-duration) ease-in-out; }
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="parttime-stream"] .action-character-motion { animation: body-react var(--motion-duration) cubic-bezier(.2,.9,.2,1); }
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="parttime-daywork"] .action-character-motion { animation: body-haul var(--motion-duration) ease-in-out; }
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="borrow-friend"] .action-character-motion { animation: body-message var(--motion-duration) ease-out; }
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="borrow-family"] .action-character-motion { animation: body-call var(--motion-duration) ease-in-out; }
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="loan-bank"] .action-character-motion { animation: body-sign var(--motion-duration) ease-out; }
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="loan-card"] .action-character-motion { animation: body-press var(--motion-duration) ease-in-out; }
.minigame-scene.is-actioning[data-scene-panels="3"][data-scene-id="loan-shadow"] .action-character-motion { animation: body-stop-wheel var(--motion-duration) ease-in-out; }

@keyframes body-scan {
  0%, 100% { transform: translateX(-50%); }
  18% { transform: translateX(calc(-50% - 9px)) translateY(3px) rotate(-3.4deg); }
  54% { transform: translateX(calc(-50% + 20px)) translateY(-5px) rotate(5.4deg); }
  78% { transform: translateX(calc(-50% + 6px)) translateY(-2px) rotate(-1.2deg); }
}
@keyframes body-scrub {
  0%, 100% { transform: translateX(-50%); }
  18% { transform: translateX(calc(-50% - 17px)) translateY(3px) rotate(-4.6deg); }
  48% { transform: translateX(calc(-50% + 19px)) translateY(-2px) rotate(4.8deg); }
  72% { transform: translateX(calc(-50% - 13px)) translateY(2px) rotate(-3.2deg); }
  86% { transform: translateX(calc(-50% + 5px)) rotate(1.2deg); }
}
@keyframes body-lift {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); }
  20% { transform: translateX(calc(-50% - 5px)) translateY(12px) rotate(-3.2deg) scale(.975); }
  54% { transform: translateX(calc(-50% + 5px)) translateY(-20px) rotate(3.8deg) scale(1.045); }
  78% { transform: translateX(calc(-50% + 2px)) translateY(-6px) rotate(-1.1deg); }
}
@keyframes body-ride {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  20% { transform: translateX(calc(-50% - 13px)) translateY(6px) rotate(-4.2deg); }
  53% { transform: translateX(calc(-50% + 16px)) translateY(-7px) rotate(4.6deg); }
  78% { transform: translateX(calc(-50% + 4px)) translateY(-2px) rotate(-1.4deg); }
}
@keyframes body-reach {
  0%, 100% { transform: translateX(-50%) scale(1); }
  20% { transform: translateX(calc(-50% - 9px)) translateY(4px) rotate(-3.5deg) scale(.985); }
  55% { transform: translateX(calc(-50% + 20px)) translateY(-5px) rotate(5.2deg) scale(1.045); }
  80% { transform: translateX(calc(-50% + 7px)) translateY(-2px) rotate(-1.2deg) scale(1.012); }
}
@keyframes body-bargain {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  20% { transform: translateX(calc(-50% - 12px)) rotate(-4.2deg) scale(.985); }
  53% { transform: translateX(calc(-50% + 16px)) rotate(4.5deg) scale(1.035); }
  78% { transform: translateX(calc(-50% + 4px)) rotate(-1.4deg); }
}
@keyframes body-react {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  20% { transform: translateX(calc(-50% - 6px)) translateY(10px) rotate(-3deg) scale(.97); }
  52% { transform: translateX(calc(-50% + 10px)) translateY(-18px) rotate(4.8deg) scale(1.06); }
  78% { transform: translateX(calc(-50% + 3px)) translateY(-5px) rotate(-1.2deg) scale(1.015); }
}
@keyframes body-haul {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); }
  20% { transform: translateX(calc(-50% - 11px)) translateY(10px) rotate(-4.5deg); }
  53% { transform: translateX(calc(-50% + 15px)) translateY(-17px) rotate(4.4deg); }
  78% { transform: translateX(calc(-50% + 4px)) translateY(-5px) rotate(-1.3deg); }
}
@keyframes body-message {
  0%, 100% { transform: translateX(-50%); }
  20% { transform: translateX(calc(-50% - 12px)) translateY(4px) rotate(-3.4deg); }
  55% { transform: translateX(calc(-50% + 17px)) translateY(-6px) rotate(4.2deg) scale(1.04); }
  80% { transform: translateX(calc(-50% + 5px)) translateY(-2px) rotate(-1.2deg); }
}
@keyframes body-call {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  18% { transform: translateX(calc(-50% - 11px)) rotate(-4.8deg); }
  48% { transform: translateX(calc(-50% + 13px)) rotate(5.2deg) scale(1.035); }
  68% { transform: translateX(calc(-50% - 7px)) rotate(-3.2deg); }
  84% { transform: translateX(calc(-50% + 3px)) rotate(1.3deg); }
}
@keyframes body-sign {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  20% { transform: translateX(calc(-50% - 8px)) translateY(-12px) rotate(-3.2deg); }
  54% { transform: translateX(calc(-50% + 12px)) translateY(16px) rotate(4.4deg); }
  80% { transform: translateX(calc(-50% + 3px)) translateY(4px) rotate(-1.2deg); }
}
@keyframes body-press {
  0%, 100% { transform: translateX(-50%) scale(1); }
  20% { transform: translateX(calc(-50% - 9px)) translateY(-10px) rotate(-3.4deg); }
  55% { transform: translateX(calc(-50% + 14px)) translateY(15px) rotate(4.2deg) scale(.965); }
  80% { transform: translateX(calc(-50% + 4px)) translateY(4px) rotate(-1.1deg); }
}
@keyframes body-stop-wheel {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  18% { transform: translateX(calc(-50% - 15px)) translateY(5px) rotate(-4.5deg); }
  50% { transform: translateX(calc(-50% + 18px)) translateY(-6px) rotate(5.4deg) scale(1.04); }
  76% { transform: translateX(calc(-50% + 5px)) translateY(-2px) rotate(-1.5deg); }
}

/* Physical prop animation library */
@keyframes scan-beam { 0% { opacity: 0; transform: translateX(-18px) scaleX(.05); } 22% { opacity: 1; } 68% { opacity: 1; transform: translateX(24px) scaleX(1.18); } 100% { opacity: 0; transform: translateX(42px) scaleX(1.32); } }
@keyframes receipt-print { 0% { opacity: 0; transform: translateY(-24px) scaleY(.4); } 38%, 76% { opacity: 1; } 100% { opacity: 0; transform: translateY(18px) scaleY(1.08); } }
@keyframes prop-pop { 0% { opacity: 0; transform: scale(.3) rotate(-20deg); } 45% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes bubbles-up { 0% { opacity: 0; transform: translate(-16px, 14px) scale(.35); } 25% { opacity: .95; } 58% { opacity: .9; transform: translate(18px, -28px) scale(1); } 100% { opacity: 0; transform: translate(-10px, -68px) scale(1.25); } }
@keyframes box-lift { 0% { opacity: 0; transform: translate(-8px, 22px) rotate(-5deg) scale(.92); } 18% { opacity: 1; } 55% { opacity: 1; transform: translate(7px, -38px) rotate(4deg) scale(1.04); } 82% { opacity: .95; transform: translate(2px, -10px) rotate(-1deg); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes box-shadow-shift { 0%, 100% { opacity: 0; transform: scaleX(1); } 25% { opacity: .7; } 58% { opacity: .3; transform: scaleX(.68); } }
@keyframes speed-line { 0% { opacity: 0; transform: translateX(35px) scaleX(.25); } 26% { opacity: .9; } 100% { opacity: 0; transform: translateX(-70px) scaleX(1.25); } }
@keyframes flyer-hand-off { 0% { opacity: 0; transform: translate(-30px, 18px) rotate(-16deg) scale(.68); } 22% { opacity: 1; } 68% { opacity: 1; transform: translate(72px, -14px) rotate(6deg) scale(1.04); } 100% { opacity: 0; transform: translate(104px, -8px) rotate(12deg); } }
@keyframes flyer-stack { 0% { opacity: 0; transform: translateX(-8px) rotate(-5deg); } 35%, 80% { opacity: .9; } 100% { opacity: 0; transform: translateX(3px); } }
@keyframes price-tag { 0% { opacity: 0; transform: translateX(25px) rotate(24deg) scale(.55); } 35% { opacity: 1; } 67% { opacity: 1; transform: rotate(-7deg) scale(1.05); } 100% { opacity: 0; transform: rotate(3deg); } }
@keyframes chat-heart { 0% { opacity: 0; transform: translateY(12px) scale(.35) rotate(-10deg); } 28% { opacity: 1; } 100% { opacity: 0; transform: translate(-12px, -65px) scale(1.25) rotate(12deg); } }
@keyframes helmet-drop { 0% { opacity: 0; transform: translateY(-35px) scale(.8); } 45% { opacity: 1; transform: translateY(5px) scale(1.06); } 68% { opacity: 1; transform: translateY(-3px); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes message-send { 0% { opacity: 0; transform: translate(-28px, 18px) scale(.55); } 35% { opacity: 1; } 75% { opacity: 1; transform: translate(25px, -8px) scale(1); } 100% { opacity: 0; transform: translate(42px, -10px) scale(.9); } }
@keyframes phone-ring { 0%, 100% { opacity: 0; transform: rotate(0) scale(.85); } 20%, 72% { opacity: 1; } 32% { transform: rotate(-7deg) scale(1); } 48% { transform: rotate(7deg) scale(1); } 64% { transform: rotate(-4deg) scale(1); } }
@keyframes call-wave { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(16px) scale(1.35); } }
@keyframes bank-stamp { 0% { opacity: 0; transform: translateY(-35px) rotate(-12deg) scale(1.3); } 48% { opacity: 1; transform: translateY(2px) rotate(-9deg) scale(.92); } 68% { opacity: 1; transform: translateY(-3px) rotate(-9deg) scale(1); } 100% { opacity: 0; transform: rotate(-9deg); } }
@keyframes card-approve { 0% { opacity: 0; transform: translateX(32px) rotate(8deg) scale(.8); } 35%, 78% { opacity: 1; transform: translateX(0) rotate(-2deg) scale(1); } 100% { opacity: 0; transform: rotate(0); } }
@keyframes approval-fill { 0% { opacity: 0; transform: scaleX(.05); } 25%, 78% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes business-card { 0% { opacity: 0; transform: translate(42px, 18px) rotate(15deg) scale(.6); } 38% { opacity: 1; } 72% { opacity: 1; transform: translate(-12px, -5px) rotate(-4deg) scale(1); } 100% { opacity: 0; transform: translate(-18px, 0) rotate(0); } }

.minigame-stage .choice-button.is-selected {
  border-color: #267953;
  background: #e4f5e9;
  transform: translateY(2px) scale(.985);
}

@media (max-width: 560px) {
  .minigame-scene { height: clamp(172px, 25dvh, 218px); }
  .minigame-scene[data-scene-id="parttime-parcel"] .prop-core { width: 48px; height: 38px; }
  .minigame-scene[data-scene-id="parttime-flyer"] .prop-core,
  .minigame-scene[data-scene-id="parttime-flyer"] .prop-secondary { width: 30px; height: 38px; }
  .minigame-scene[data-scene-id="borrow-friend"] .prop-core { width: 85px; height: 42px; }
  .minigame-scene[data-scene-id="loan-bank"] .prop-core { scale: .78; }
}

@media (prefers-reduced-motion: reduce) {
  .minigame-scene .action-scene-backdrop,
  .minigame-scene .action-panel-layer,
  .minigame-scene .action-character-motion,
  .minigame-scene .action-character-layer,
  .minigame-scene .motion-prop,
  .minigame-scene .action-impact-ring {
    animation: none !important;
  }

  .minigame-scene.is-actioning .motion-prop {
    opacity: .82;
  }

  .minigame-scene.is-actioning .action-panel-layer,
  .minigame-scene.is-actioning .action-character-layer,
  .minigame-scene.is-actioning .action-scene-backdrop {
    background-position: var(--scene-panel-position) 50%;
  }

  .minigame-scene.is-actioning .action-character-motion {
    transform: translateX(-50%);
  }

  .minigame-scene[data-scene-panels="1"].is-actioning .action-character-motion {
    transform: none;
  }
}