/* Behind the machine: the crank automaton. Same single theme as the front room. */
.works { width: min(100%, 560px); }
.works svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }

.paper { fill: #f3e6d3; stroke: #2a1c2e; stroke-width: 2; stroke-linejoin: round; }
.hair  { fill: #2a1c2e; stroke: #0b070d; stroke-width: 1.5; }
.dress { fill: var(--foxglove); stroke: #2a1c2e; stroke-width: 2; stroke-linejoin: round; }
.tab   { fill: #f6e3da; stroke: #2a1c2e; stroke-width: 1.5; stroke-linejoin: round; }
.fold  { fill: none; stroke: #2a1c2e; stroke-width: 1; stroke-dasharray: 3 2; }
.trim  { fill: none; stroke: var(--blush); stroke-width: 3; stroke-dasharray: 1 6; stroke-linecap: round; }
.slotcut { fill: #160c19; stroke: #2a1c2e; stroke-width: 1; }
#face-a circle, #face-b ellipse { fill: #2a1c2e; }
#face-a path, #face-b path { stroke: #2a1c2e; }

.gear { fill: #8a6a2c; stroke: #2b1d08; stroke-width: 1.5; stroke-linejoin: round; }
.gear-hole { fill: #160c19; stroke: #2b1d08; stroke-width: 1.2; }
.cam { fill: #b9b4c4; stroke: #2a2630; stroke-width: 1.5; stroke-linejoin: round; }
.cam.b { fill: #4fb3a9; }
.cam.c { fill: #d8508f; }
.axle { fill: url(#brass); stroke: #3a2a0c; stroke-width: 1; }
.rod-core { stroke: #cfccd6; stroke-width: 5; stroke-linecap: round; }
.pin { fill: url(#brass); stroke: #3a2a0c; stroke-width: 1; }
.shoe { fill: #55505f; stroke: #1c1a22; stroke-width: 1.2; }
.drum { font: bold 16px/1 Georgia, serif; fill: #160c19; }
.coin-text { font: bold 9px/1 Georgia, serif; fill: #2a2a33; }

#crank { cursor: grab; outline: none; }
#crank.held { cursor: grabbing; }
#crank:focus-visible #crank-hit { stroke: var(--teal); stroke-width: 3; stroke-dasharray: 4 5; }
.crank-bar { fill: #2a1c2e; stroke: #0b070d; stroke-width: 1.5; }
.crank-knob { fill: var(--foxglove); stroke: #2a1c2e; stroke-width: 2; }

#hammer { transform-box: view-box; transform-origin: 590px 458px; }
#hammer.strike { animation: strike .5s ease-out; }
@keyframes strike { 25% { transform: rotate(-38deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-8deg); } }

.works + .purse, #purse { text-align: center; }
.door.small { width: 46px; height: 72px; border-radius: 23px 23px 3px 3px; border-width: 3px; }
.door.small.other .knob { background: var(--plum); }
.door.small.other { background: linear-gradient(180deg, #c9a24b, #6d5119); }
.door.small .knob { width: 7px; height: 7px; right: 7px; }

@media (prefers-reduced-motion: reduce) { #hammer.strike { animation: none; } }

.pulley { fill: #3a2018; stroke: #0b070d; stroke-width: 1.5; }
#purse.gained { animation: gained 1.2s ease-out; }
@keyframes gained { 0% { transform: scale(1); } 20% { transform: scale(1.5); text-shadow: 0 0 14px #ffe9a8; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #purse.gained { animation: none; } }

.door.small.snowy { background: linear-gradient(180deg, #3d3a45, #15131a); animation: snowy 3.1s steps(1) infinite; }
@keyframes snowy { 0%, 100% { box-shadow: 0 0 10px #cfe0f355; } 12% { box-shadow: 0 0 26px #cfe0f3aa; } 19% { box-shadow: 0 0 6px #cfe0f333; } 47% { box-shadow: 0 0 22px #cfe0f399; } 53% { box-shadow: 0 0 9px #cfe0f344; } 80% { box-shadow: 0 0 30px #cfe0f3bb; } }
@media (prefers-reduced-motion: reduce) { .door.small.snowy { animation: none; box-shadow: 0 0 18px #cfe0f388; } }

.door.small.snowy.surge { animation: surge .22s steps(2) infinite; transform: translateY(-5px); }
@keyframes surge { 0% { box-shadow: 0 0 46px #ffffff, 0 0 90px #cfe0f3; background: #e9eef5; } 100% { box-shadow: 0 0 12px #cfe0f355; } }
@media (prefers-reduced-motion: reduce) { .door.small.snowy.surge { animation: none; box-shadow: 0 0 46px #ffffff; } }