/* Pop crane: open collection, bright cabinet and round touch controls. */
:root { color-scheme: light; color: #28567b; background: #effbff; }
body { background: #effbff; }
.crane-shell > .collection { margin-top: 18px; padding: 0; border: 0; border-radius: 0; color: #28567b; background: transparent; box-shadow: none; }
.collection .section-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; margin: 0 4px 8px; padding: 0; }
.collection .section-heading h2 { margin: 0; color: #28567b; font-size: 15px; font-weight: 800; }
.collection .section-heading > span { font-size: 10px; color: #688ca5; }
.collection .section-heading > span:last-child { margin-left: auto; white-space: nowrap; }
.collection .collection-goal { min-height: 44px; margin: 0 0 8px; padding: 5px 4px; border: 0; border-radius: 0; color: #28567b; background: transparent; box-shadow: none; }
.collection .collection-goal strong { font-size: 11px; }
.collection .collection-goal small, .collection #goalAction, .collection #totalCount { color: #58829f; }
.collection .collection-goal progress { height: 4px; background: #d5edf6; accent-color: #20badb; }
.collection .collection-goal progress::-webkit-progress-bar { background: #d5edf6; }
.collection .collection-goal progress::-webkit-progress-value { background: #20badb; }
.collection .collection-goal progress::-moz-progress-bar { background: #20badb; }
.shelf-scene { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border: 0; border-radius: 24px; background: #fff0f7; }
.shelf-scene > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.collection .shelf-scene .shelf { position: absolute; inset: 0; display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.shelf-scene .shelf-slot { position: absolute; width: 22.222222%; height: 52.222222%; min-height: 44px; padding: 0; gap: 0; transform: translate(-50%, -100%); border: 0; background: transparent; }
.shelf-scene .shelf-slot .plush { width: 100%; height: 100%; filter: drop-shadow(0 2px 1px #125b8030); }
.shelf-scene .shelf-slot .plush::before, .shelf-scene .shelf-slot .plush::after { display: none; }
.shelf-scene .shelf-slot .plush img { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; border: 0; border-radius: 0; background: transparent; }
.shelf-scene .plush[data-portrait=true] img { height: 72%; bottom: auto; }
.shelf-scene .shelf-body { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.shelf-scene .shelf-slot small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.shelf-scene button.shelf-slot::after { display: none; }
.shelf-scene .empty-slot { display: grid; place-items: center; width: 42px; height: 46px; margin: auto auto 6px; padding: 0; border: 0; border-radius: 45% 45% 35% 35%; color: #769ebc; opacity: .6; font-size: 19px; }
.shelf-actions { display: flex; gap: 10px; margin: 12px 4px 0; }
.shelf-actions button, .shelf-actions a { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 7px; min-height: 46px; box-sizing: border-box; padding: 9px 10px; border: 0; border-radius: 28px; background: #ddf3fb; color: #316483; box-shadow: 0 3px 0 #b7dfef; font: inherit; font-size: 12px; font-weight: 800; text-decoration: none; touch-action: manipulation; }
.shelf-actions svg { width: 21px; height: 21px; flex: none; }
.shelf-actions #shelfCapture { background: linear-gradient(#ffe890, #ffd04d); color: #765013; box-shadow: 0 3px 0 #edb934, inset 0 2px 0 #fff9cb; }
.shelf-actions button:active, .room-choices button:active { transform: translateY(2px); }
.shelf-actions button:disabled { opacity: .4; box-shadow: none; }
.shelf-editor { margin: 10px 2px 0; border: 0; background: transparent; }
.shelf-editor summary { min-height: 48px; box-sizing: border-box; padding: 9px 6px; display: flex; align-items: center; gap: 8px; color: #316483; font-size: 12px; font-weight: 800; list-style: none; }
.shelf-editor summary::-webkit-details-marker { display: none; }
.shelf-editor summary > svg { width: 21px; height: 21px; color: #f084ae; }
.editor-chevron { margin-left: auto; font-size: 20px; line-height: 16px; }
.shelf-editor[open] .editor-chevron { transform: rotate(180deg); }
.shelf-options { display: grid; gap: 15px; padding: 0 4px 12px; }
.room-option-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.room-option-group legend { margin-bottom: 5px; color: #688ca5; font-size: 10px; font-weight: 700; }
.room-choices { display: flex; gap: 7px; }
.room-choices button { position: relative; flex: 1; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 7px; min-width: 0; min-height: 74px; padding: 8px 3px; border: 0; border-radius: 20px; background: transparent; color: #58829f; font: inherit; font-size: 10px; touch-action: manipulation; }
.room-choices button[aria-pressed=true] { background: #ddf3fb; color: #245877; font-weight: 800; box-shadow: none; }
.room-choices button[aria-pressed=true]::after { content: '✓'; position: absolute; right: 5px; top: 3px; color: #1386ac; font-size: 11px; font-weight: 900; }
.room-choices svg { width: 29px; height: 29px; color: #33a6c5; }
.room-swatch { width: 48px; height: 29px; display: flex; justify-content: space-evenly; align-items: end; padding-bottom: 4px; box-sizing: border-box; border: 0; border-radius: 14px; background: #ffd7ec; box-shadow: inset 0 -5px 0 #ffb9d8; }
.room-swatch i { width: 7px; height: 10px; border-radius: 50% 50% 35% 35%; background: #fff; }
.swatch-cafe { background: #b7f4e8; box-shadow: inset 0 -5px 0 #83dfd7; }
.swatch-night { background: #426bb0; box-shadow: inset 0 -5px 0 #315594; }
.swatch-night i { background: #ffe790; }
.shelf-photo-status { margin: 8px 4px; color: #58829f; font-size: 11px; }
.shelf-photo-status:empty { display: none; }
.shelf-photo { margin: 12px 0; padding: 0; border: 0; background: transparent; }
.shelf-photo[hidden] { display: none; }
.shelf-photo > img { display: block; width: 100%; height: auto; border-radius: 24px; }
.shelf-photo > p { margin: 8px 4px 2px; color: #688ca5; font-size: 10px; }
.collection .collection-album { margin: 8px 2px 0; border: 0; border-radius: 0; background: transparent; color: #316483; }
.collection .collection-album summary { padding-inline: 6px; color: #316483; font-size: 12px; }
.collection .catalog-progress, .collection .catalog-tip, .collection .catalog-empty { color: #688ca5; }
.collection .catalog-filters button { min-height: 44px; border: 0; border-radius: 24px; color: #58829f; background: transparent; }
.collection .catalog-filters button[aria-pressed=true] { background: #ddf3fb; color: #245877; }
.collection .catalog button { border: 0; border-radius: 18px; background: transparent; color: #316483; box-shadow: none; }
.collection .catalog button[aria-pressed=true] { background: #ddf3fb; box-shadow: none; }
.collection .catalog .count { color: #4785a7; }
.collection .catalog button:disabled { background: transparent; border: 0; color: #7998ac; }
/* One cabinet silhouette; the glass and controls have no nested card borders. */
.crane-shell .machine { padding-top: 9px; border: 0; border-radius: 30px; background: linear-gradient(110deg, #48d7ed, #20b7e0); box-shadow: 0 5px 0 #1197c6; }
.machine .stage { margin-inline: 9px; border: 0; border-radius: 23px 23px 42px 42px; background: radial-gradient(ellipse at 50% 5%, #327ebe, transparent 75%), linear-gradient(#235c9f, #173e7b); box-shadow: inset 0 3px 8px #15396850; }
.machine .stage::before { background: repeating-linear-gradient(90deg, #c7fbff 0 9px, transparent 9px 22px); height: 3px; opacity: .65; box-shadow: none; }
.machine .stage::after { background: radial-gradient(ellipse at 50% 100%, #5db4ed40, transparent 75%); }
.machine .row-guide { border: 0; background: linear-gradient(90deg, transparent, #a2eaff1f, transparent); }
.machine .rail { border: 0; background: linear-gradient(#f6feff, #73c8e7); }
.machine .cable { background: linear-gradient(90deg, #84bed5, #e4faff, #84bed5); }
.machine[data-claw=normal] .claw-head { border-color: #e9fbff; background: #ffdd68; box-shadow: 0 2px 0 #e4a936; }
.machine[data-claw=normal] .finger { border-color: #e9fbff; }
.machine .controls { padding-top: 4px; padding-bottom: 15px; background: transparent; }
.machine .cabinet-theme { top: 5px; left: 8px; border: 0; border-radius: 25px; color: #fff; background: #15588ba6; box-shadow: none; font-weight: 700; }
.machine .bonus-status { left: 85px; right: 12px; bottom: 8px; border-radius: 20px; color: #fff; background: #15588bbf; font-size: 10px; }
.machine[data-bonus=true] .bonus-status { color: #765013; background: linear-gradient(#fff1a3, #ffd050); box-shadow: 0 0 12px #ffda7b70; }
.machine .machine-sign { color: #fff; background: transparent; }
.machine .machine-sign span:last-child { color: #fff; background: #15588ba6; border: 0; border-radius: 18px; }
.machine .prize-series button { color: #dcfaff; }
.machine .prize-series button[aria-pressed=true] { background: #fff; border: 0; border-radius: 25px; color: #207ca5; }
.machine .position-control { color: #fff; }
.machine .depth-buttons { background: #118fbd38; border: 0; border-radius: 25px; padding: 3px; }
.machine .depth-buttons button { border: 0; border-radius: 25px; background: transparent; color: #e9fcff; }
.machine .depth-buttons button[aria-pressed=true] { border: 0; background: #e9fcff; box-shadow: 0 2px 0 #1697bd; color: #217799; }
.machine .grab { width: 94px; min-height: 94px; margin: 5px auto 0; flex-direction: column; gap: 3px; border: 0; border-radius: 50%; background: radial-gradient(ellipse at 40% 10%, #fff0a5, #ffda55 48%, #ffbc30); box-shadow: 0 5px 0 #e99b20, inset 0 3px 0 #fff3b8; color: #785115; text-shadow: none; letter-spacing: .02em; }
.machine .grab svg { width: 30px; height: 30px; }
.machine .grab:active:not(:disabled) { box-shadow: 0 2px 0 #e99b20; }
.machine .grab[data-aligned=true]:not(:disabled), .machine .grab[data-perfect=true]:not(:disabled) { border: 0; box-shadow: 0 5px 0 #e99b20, 0 0 18px #fff5bd88, inset 0 3px 0 #fff3b8; }
.machine .chute { border: 0; border-radius: 16px; background: #103c78; color: #c4ebff; box-shadow: inset 0 3px 6px #0c2a5a70; }
.machine .aim-readout { color: #e2f8ff; }
.machine .aim-readout[data-aligned=true] { color: #fff09c; }
.machine .lever-panel { background: transparent; }
.machine .lever { background: #1484ae40; border: 0; box-shadow: none; }
.machine .lever-knob { background: radial-gradient(circle at 35% 25%, #ffa1c9, #f15ba1 65%, #dc438b); border: 0; box-shadow: 0 4px 0 #bb3676; }
.machine .aim-status strong { color: #fff; }
.machine .aim-status[data-grip] .grip-hint { color: #fff; }
.machine .aim-status[data-grip] .grip-hint::before { color: #fff19a; }
.machine .aim-owned { background: #1484ae40; color: #e2f8ff; }
.machine .aim-preview { background: #ffffff26; border: 0; border-radius: 50%; }
.machine .position-control input { appearance: none; background: transparent; }
.machine .position-control input::-webkit-slider-runnable-track { height: 7px; border: 0; border-radius: 6px; background: #168fbc; }
.machine .position-control input::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -7px; border: 0; border-radius: 50%; background: #fff0a1; box-shadow: 0 2px 0 #dbb944; }
.machine .position-control input::-moz-range-track { height: 7px; border: 0; border-radius: 6px; background: #168fbc; }
.machine .position-control input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff0a1; }
.crane-shell > .result { color: #28567b; }
.crane-shell > .result .result-text { color: #688ca5; }
.crane-shell > .result .reward-summary { color: #3987a8; }

.machine .depth-guide { border: 0; border-radius: 24px; background: linear-gradient(90deg, transparent, #a2eaff30, transparent); }
.machine .depth-guide::after { border: 0; }
.machine .touch-hint, .machine .depth-labels { color: #dcf4ff; }
.machine .lever-direction { color: #e6fbff; }
.machine .lever::before, .machine .lever::after { background: #c6f6ff38; }
.machine .lever-panel ~ .grab { width: 90px; height: 90px; min-height: 90px; margin: 0; }
.machine[data-theme=candy] .aim-readout, .machine[data-theme=ocean] .aim-readout { border-radius: 16px; background: #15588bbf; }
.crane-shell > .result[data-outcome] { border: 0; background: transparent; box-shadow: none; }
@media (max-width: 350px) { .machine .lever-panel ~ .grab { width: 80px; height: 80px; min-height: 80px; } }

/* The whole play space is one perspective cabinet, viewed through its glass. */
.machine .stage { --back-top: #205d91; --back-bottom: #377eb1; --floor-back: #80bfd6; --floor-front: #d5f5f7; background: #1b5a85; border-radius: 23px 23px 32px 32px; }
.machine[data-theme=candy] .stage { --back-top: #946bba; --back-bottom: #b69acd; --floor-back: #f0bdd8; --floor-front: #fff0d7; background: #8e68ad; }
.machine[data-theme=ocean] .stage { --back-top: #146b94; --back-bottom: #30a7b6; --floor-back: #73d5d5; --floor-front: #d9f7dc; background: #167891; }
.machine[data-theme=stars] .stage { --back-top: #293a77; --back-bottom: #675d9d; --floor-back: #727fb4; --floor-front: #b7c9eb; background: #293a77; }
.cabinet-space { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.machine .stage::before { display: none; }
.machine .stage::after { inset: 46px auto 25px 8px; z-index: 8; width: 15px; border-radius: 20px; transform: skewY(-25deg); background: linear-gradient(90deg, #f2ffff25, #f2ffff08); pointer-events: none; }
.machine .rail { z-index: 7; height: 6px; border-radius: 3px; background: linear-gradient(#edfaff, #66a2bb 45%, #d3f2fb 60%, #51869f); box-shadow: 0 3px 3px #102b4a55; }
.machine .trolley { position: absolute; top: -5px; width: 25px; height: 16px; transform: translateX(-50%); border-radius: 5px; background: linear-gradient(#fbfdff, #80b2c5); box-shadow: 0 2px 3px #17395377, inset 0 2px 0 #fff; }
.machine .trolley::before, .machine .trolley::after { content: ''; position: absolute; top: 2px; width: 5px; height: 5px; border-radius: 50%; background: #31556c; }
.machine .trolley::before { left: 3px; }.machine .trolley::after { right: 3px; }
.machine .claw { transform-origin: center; }
.machine .cable { width: 3px; left: 22px; background: repeating-linear-gradient(0deg, #8ea6b5 0 2px, #e5f3f8 2px 4px); box-shadow: 1px 0 1px #143a4b55; }
.machine .claw-head { border: 0; top: -1px; left: 8px; width: 30px; height: 23px; border-radius: 11px 11px 8px 8px; background: linear-gradient(100deg, #aec8d7, #f7fdff 28%, #e0edf3 55%, #779dad); box-shadow: inset 0 -4px 0 #6c99ae, 0 2px 2px #163a4e55; }
.machine[data-claw=normal] .claw-head { border: 0; background: linear-gradient(100deg, #d1a438, #ffe788 26%, #fff2b1 48%, #f3c847 75%, #c28d28); box-shadow: inset 0 -4px 0 #d5a737, 0 2px 2px #163a4e55; }
.machine .claw-head::before { content: ''; position: absolute; left: 11px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e5fbff; box-shadow: inset 0 1px 2px #4785a0, 0 0 0 2px #ffffff40; }
.machine .finger { top: 12px; width: 27px; height: 35px; border: 0; border-radius: 0; transform-origin: 75% 10%; }
.machine .finger.left { left: -5px; transform: rotate(12deg); }
.machine .finger.right { right: -5px; transform-origin: 25% 10%; transform: rotate(-12deg); }
.machine .finger svg { width: 100%; height: 100%; overflow: visible; }
.machine .finger.right svg { transform: scaleX(-1); }
.machine .finger path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.machine .arm-shadow { stroke: #38687c; stroke-width: 7px; }
.machine .arm-metal { stroke: #c1dce6; stroke-width: 5px; }
.machine .arm-highlight { stroke: #f2fdff; stroke-width: 1.5px; }
.machine .finger circle { fill: #729eb2; stroke: #e4f8ff; stroke-width: 1.5px; }
.machine .closed .finger.left { transform: translateX(6px) rotate(-18deg); }
.machine .closed .finger.right { transform: translateX(-6px) rotate(18deg); }
.machine .cargo { top: 27px; }
.machine .stage .prize { z-index: 2; filter: none; }
.machine .stage .prize[data-depth="1"] { z-index: 3; }
.machine .stage .prize[data-depth="2"] { z-index: 4; }
.machine .stage .prize[data-active-row=false] { opacity: .88; }
.machine .stage .prize[data-target=true] { filter: drop-shadow(0 0 3px #fff5); }
.prize-ground-shadow { position: absolute; z-index: -1; left: 8%; top: 91%; width: 84%; height: 12%; border-radius: 50%; background: #17446155; filter: blur(2px); pointer-events: none; }
.machine .row-guide, .machine .depth-guide { border: 0; background: linear-gradient(90deg, transparent, #e1ffff16, transparent); }
.machine .aim { z-index: 5; border-style: solid; border-color: #e4fdff; background: #e8fcff22; box-shadow: 0 0 6px #a9f8ff77; }
.machine .chute { bottom: 4px; padding: 7px 0; border-radius: 4px 4px 12px 12px; color: #e9ffff; background: linear-gradient(#183f59, #082943); box-shadow: 0 -3px 0 #76dce8, inset 0 3px 4px #001d35; }
.machine[data-phase=carry] .cargo > .plush { transform-origin: 50% 0; animation: cargo-sway 650ms ease-in-out infinite alternate; }
@keyframes cargo-sway { from { rotate: -4deg; } to { rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) { .machine[data-phase=carry] .cargo > .plush { animation: none; } }
/* Dense plush mound: enlarged silhouettes overlap, with consistent front-to-back order. */
.machine .cargo { width: 49px; left: -1.5px; scale: 1.4; transform-origin: 50% 0; }
.machine .stage .prize[data-active-row=false] { opacity: 1; }
.machine .stage .prize[data-target=true] { filter: drop-shadow(0 0 3px #eaffff); }
.machine .row-guide, .machine .depth-guide { background: none; }
.machine .depth-labels { top: 128px; grid-auto-rows: 38px; }
.machine .prize[data-falling=true] .prize-ground-shadow { visibility: hidden; }
/* Contact shadows sit between stacked plushes; the base layer rests on the floor. */
.machine .prize[data-stacked=true] .prize-ground-shadow { left: 18%; width: 64%; height: 10%; background: #103a505c; filter: blur(1.5px); }
.machine .depth-labels { display: none; }

.machine .bonus-status { top: 6px; bottom: auto; left: 95px; right: 48px; padding: 3px 2px; line-height: 16px; font-size: 9px; }