/* Themes live inside the cabinet; the touch controls and play area keep their size. */
.machine .cabinet-theme { position: absolute; top: 3px; left: 7px; z-index: 12; min-height: 44px; padding: 4px 9px; border: 1px solid #c5c8d2; border-radius: 8px; background: #fffffff0; color: #343042; font: inherit; font-size: 11px; touch-action: manipulation; }
.machine .bonus-status { position: absolute; bottom: 3px; left: 7px; right: 7px; z-index: 10; text-align: center; color: #493c60; background: #ffffffdf; border-radius: 6px; font-size: 11px; line-height: 22px; pointer-events: none; }
.machine[data-theme=candy] .stage { background: radial-gradient(circle at 17% 30%, #fff8 0 13px, transparent 14px), radial-gradient(circle at 80% 60%, #fff9 0 18px, transparent 19px), repeating-linear-gradient(135deg, #ffe0ea 0 23px, #fff3d9 23px 46px); }
.machine[data-theme=ocean] .stage { background: radial-gradient(circle at 25% 48%, transparent 0 11px, #e5ffffa6 12px 13px, transparent 14px), radial-gradient(circle at 78% 25%, transparent 0 17px, #e5ffffa6 18px 19px, transparent 20px), linear-gradient(#c9f5fc, #82cddd 75%, #e8d7b5); }
.machine[data-theme=stars] .stage { background: radial-gradient(circle at 22% 26%, #fff4bb 0 2px, transparent 3px), radial-gradient(circle at 72% 40%, #fff4bb 0 2px, transparent 3px), radial-gradient(circle at 85% 17%, #ffecba 0 3px, transparent 4px), radial-gradient(circle at 44% 68%, #fff 0 1px, transparent 2px), linear-gradient(#26355c, #65568d 75%, #afa6ce); }
.machine[data-claw=paw] .claw-head { border-radius: 45% 45% 35% 35%; background: #ffe3ed; border-color: #bd7b99; }
.machine[data-claw=paw] .claw-head::after { content: '●'; position: absolute; inset: -3px 0 0; text-align: center; font-size: 13px; color: #cb829e; }
.machine[data-claw=paw] .finger { border-color: #bd7b99; }
.machine[data-claw=shell] .claw-head { border-radius: 60% 60% 20% 20%; background: repeating-linear-gradient(70deg, #d0faf5 0 4px, #90d8d4 5px 6px); border-color: #49888d; }
.machine[data-claw=shell] .finger { border-color: #72cec6; }
.machine[data-claw=star] .claw-head, .machine[data-claw=gold] .claw-head { background: linear-gradient(115deg, #fff3b2, #dba734, #ffefac); border-color: #a37620; box-shadow: 0 0 10px #ffe18a88; }
.machine[data-claw=star] .claw-head::after, .machine[data-claw=gold] .claw-head::after { content: '★'; position: absolute; inset: -3px 0 0; text-align: center; font-size: 13px; color: #795017; }
.machine[data-claw=star] .finger, .machine[data-claw=gold] .finger { border-color: #e4b74e; }
.machine[data-bonus=true] .bonus-status { color: #593700; background: #fff0ac; box-shadow: 0 0 8px #ffde8570; font-weight: 800; }
.machine[data-bonus=true] .stage { animation: bonus-arrival 850ms ease-out; }
.machine .prize[data-arriving=true] img { animation: rare-hello 900ms ease-out; }
.machine #cargo .plush[data-rare=true] img { animation: rare-wiggle 420ms ease-in-out 3 alternate; }
.machine .win-token .plush[data-rare=true] img, .result[data-outcome=win] .plush[data-rare=true] img { animation: rare-cheer 900ms ease-out; }
@keyframes rare-hello { 0% { transform: scale(.65) rotate(-12deg); } 35% { transform: scale(1.08) rotate(9deg); } 65% { transform: rotate(-6deg); } 100% { transform: none; } }
@keyframes rare-wiggle { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes rare-cheer { 0%, 100% { transform: none; } 30% { transform: translateY(-9px) rotate(-8deg); } 65% { transform: translateY(-4px) rotate(8deg); } }
@keyframes bonus-arrival { from { box-shadow: inset 0 0 35px #ffe5a6; } to { box-shadow: inset 0 0 8px #ffe5a633; } }
@media (prefers-reduced-motion: reduce) {
    .machine[data-bonus=true] .stage, .machine .prize[data-arriving=true] img, .machine #cargo .plush[data-rare=true] img,
    .machine .win-token .plush[data-rare=true] img, .result[data-outcome=win] .plush[data-rare=true] img { animation: none; }
}

/* Keep the chute and falling prize visible while the crane is moving. */
.machine:not([data-phase=ready]) .bonus-status { visibility: hidden; }