* { box-sizing: border-box; }
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; color: #51404b; background: #fcf7f3; }
body { margin: 0; background: radial-gradient(ellipse at 50% 12%, #f6e6ea66, transparent 65%); }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 3px solid #9764a5; outline-offset: 4px; }
button:disabled { cursor: wait; opacity: .6; }
.crane-shell { max-width: 450px; padding: 12px 16px max(24px, env(safe-area-inset-bottom)); margin: auto; }
.machine { position: relative; border: 5px solid #e8c8d1; border-radius: 28px; background: #fffaf6; box-shadow: 0 18px 36px -20px #9b58775c, 0 3px 0 #d4a8b7, inset 0 0 0 2px #fff; overflow: hidden; transition: box-shadow .3s; }
.machine-sign { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 13px 15px 20px; background: linear-gradient(120deg, #f8e6e9, #f8efdf); font-size: 11px; letter-spacing: .14em; font-weight: 800; }
.machine-sign::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 4px; background: radial-gradient(circle, #fffdf2 2px, transparent 2.5px) 0 0 / 18px 4px; filter: drop-shadow(0 0 3px #ffe4a5); }
.machine-sign h1::before { content: '✦'; margin-right: 7px; color: #b8798e; }
.machine-sign h1 { font-size: 13px; letter-spacing: .04em; margin: 0; }
.machine-sign span:last-child { background: #fffdf8c9; border: 1px solid #fff; border-radius: 12px; padding: 4px 10px; letter-spacing: .04em; }
.stage { position: relative; isolation: isolate; height: 290px; margin: 0 8px; overflow: hidden; background: radial-gradient(ellipse at 50% 10%, #fffdf9 0, transparent 64%), repeating-linear-gradient(90deg, #ffffff44 0 1px, transparent 1px 36px), linear-gradient(#f5edf1 26%, #e9e4f0 75%, #ddd3e6); border: 1px solid #dbcbdc; border-top: 0; border-radius: 0 0 18px 18px; box-shadow: inset 6px 0 10px -7px #94758e66, inset -6px 0 10px -7px #94758e66; }
.stage::before { content: ''; position: absolute; inset: 3px 8px auto; height: 5px; background: #fff9ec; border-radius: 10px; box-shadow: 0 3px 15px #ffe3a8aa; }
.stage::after { content: ''; position: absolute; inset: 85px 9px 15px; border-radius: 50%; background: radial-gradient(ellipse, #ffffff66, transparent 65%); pointer-events: none; z-index: -1; }
.rail { position: absolute; top: 20px; width: 100%; height: 7px; background: #c5bacd; border: 2px solid #ddd5e3; }
.plush { position: relative; width: 49px; height: 60px; flex: 0 0 auto; filter: drop-shadow(0 4px 2px #5f426a20); }
.plush::before { content: ''; position: absolute; width: 33px; height: 32px; left: 8px; top: 29px; border-radius: 45% 45% 38% 38%; background: var(--plush); border: 2px solid #ffffff90; box-shadow: -12px 2px 0 -8px var(--plush), 12px 2px 0 -8px var(--plush); }
.plush::after { content: '♥'; position: absolute; top: 39px; width: 100%; text-align: center; color: #fff9; font-size: 10px; }
.plush img { position: absolute; width: 46px; height: 43px; object-fit: cover; border: 2px solid #fff9; border-radius: 50%; left: 1px; top: 0; background: #fff7ef; }
.prize { position: absolute; transform: translate(-50%, -50%); }
.aim { position: absolute; width: 56px; height: 22px; border: 2px dashed #ae6e92; background: #ffffff55; border-radius: 50%; transform: translate(-50%, 10px); pointer-events: none; z-index: 8; }
.claw { position: absolute; width: 46px; height: 30px; transform: translate(-50%, -50%); z-index: 10; }
.cable { position: absolute; bottom: 19px; left: 21px; height: 320px; width: 4px; background: linear-gradient(90deg, #978da4, #e0d9e7, #9c91a9); }
.claw-head { position: absolute; top: 0; left: 11px; width: 24px; height: 18px; border-radius: 8px 8px 4px 4px; background: #faf7fb; border: 3px solid #ae9fbb; z-index: 2; }
.finger { position: absolute; top: 12px; height: 25px; width: 18px; border: 4px solid #ae9fbb; border-top: 0; transition: transform .18s; }
.finger.left { left: 0; border-right: 0; border-radius: 0 0 0 14px; transform: rotate(20deg); }
.finger.right { right: 0; border-left: 0; border-radius: 0 0 14px 0; transform: rotate(-20deg); }
.closed .finger.left { transform: translateX(7px) rotate(-12deg); }.closed .finger.right { transform: translateX(-7px) rotate(12deg); }
.cargo { position: absolute; top: 19px; left: -1px; }
.chute { position: absolute; z-index: 11; left: calc(11% - 34px); bottom: 6px; width: 68px; padding: 8px 0; text-align: center; border-radius: 9px; background: #ac91b2; box-shadow: inset 0 3px 6px #78578240; color: #fff9; font-size: 10px; font-weight: 800; border: 3px solid #e7dce9; }
.controls { border: 0; margin: 0; padding: 12px 15px 18px; min-width: 0; background: linear-gradient(#fffaf6, #f9edf0); }
.position-control { display: flex; align-items: center; gap: 12px; color: #9b7d8d; }
input[type=range] { display: block; width: 100%; min-width: 0; height: 35px; margin: 0; accent-color: #b57892; touch-action: pan-y; }
.depth-buttons { display: flex; gap: 3px; padding: 4px; margin: 8px 0 15px; background: #ecdee64d; border: 1px solid #e8dbe2; border-radius: 13px; }
.depth-buttons button { flex: 1; min-height: 34px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #9b8391; font-size: 11px; transition: background .2s, color .2s, box-shadow .2s; }
.depth-buttons button[aria-pressed=true] { background: #fffcfa; color: #82536e; border-color: #efdee6; font-weight: 800; box-shadow: 0 2px 5px #8c527217; }
.grab { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; min-height: 49px; background: linear-gradient(135deg, #bc8198, #9e617e); color: #fffaf7; border: 1px solid #ffffff55; border-radius: 16px; font-weight: 800; letter-spacing: .12em; box-shadow: 0 4px 0 #89516d, 0 7px 13px #985e7929, inset 0 1px 0 #ffffff55; transition: transform .15s, box-shadow .15s; }
.grab svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.aim[data-aligned=true] { border-style: solid; border-color: #9a577c; background: #efc0d566; box-shadow: 0 0 12px #e8a9cb66; }
.grab:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #8c506b; }
.result { min-height: 38px; text-align: center; padding: 12px 4px 6px; }.result strong { font-size: 13px; }
.result-text { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.collection { margin-top: 8px; }.section-heading { display: flex; justify-content: space-between; align-items: center; }.section-heading h2 { margin: 0 0 10px; font-size: 14px; }.section-heading>span { font-size: 10px; color: #957e88; }
.shelf { position: relative; display: flex; gap: 16px; justify-content: center; padding: 15px 10px 0; min-height: 108px; border-radius: 20px 20px 8px 8px; background: radial-gradient(ellipse at 50% 10%, #fffaf0, transparent 80%), linear-gradient(#f1e2d9 0%, #fff3e5 88%, #d7b291 88%, #e9cbb0 97%, #c69b7c 97%); border: 1px solid #e7d3c3; border-bottom: 4px solid #c49b7e; box-shadow: inset 0 4px 12px #a67d6410, 0 7px 14px -10px #92654a66; }
.shelf-slot { width: 82px; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; padding-bottom: 13px; gap: 3px; }.shelf-slot small { font-size: 10px; }.empty-slot { color: #c5a997; font-size: 27px; padding-bottom: 15px; opacity: .55; }
.save-note { font-size: 10px; color: #95808a; text-align: center; line-height: 1.7; }.save-note { margin-top: 18px; }
.catalog { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 15px; }.catalog button { position: relative; display: flex; align-items: center; flex-direction: column; gap: 5px; padding: 10px 1px; border: 1px solid #eee2e6; border-radius: 15px; color: #6c5360; background: #fffaf8; min-width: 0; }.catalog button[aria-pressed=true] { border-color: #c89bb0; background: #faedf2; box-shadow: 0 3px 9px #a86e8812; }.catalog button:disabled { cursor: default; opacity: 1; background: #f0eae780; border-color: transparent; color: #a3949a; }.catalog button:disabled .plush { opacity: .5; filter: blur(12px) grayscale(.3); }.catalog small { font-size: 9px; white-space: nowrap; }.catalog .count { font-size: 10px; color: #9b778b; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.celebration { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.celebration-particle { position: absolute; top: -40px; left: var(--x); font-size: var(--size); line-height: 1; opacity: 0; will-change: transform; animation: happy-rain var(--duration) var(--delay) ease-in forwards; filter: drop-shadow(0 2px 3px #ae6b9222); }
.win-reveal { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; pointer-events: none; }
.win-token { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #fffdf5f5 45%, #fff6e6cc 65%, #fff0); box-shadow: 0 0 35px #ffecb9aa; animation: plush-arrival 2000ms both; }
.win-token .plush { transform: scale(1.6); }
.win-token::before, .win-token::after { content: '✦'; position: absolute; color: #d7a753; font-size: 23px; }
.win-token::before { transform: translate(-54px, -30px); }.win-token::after { transform: translate(53px, 24px); font-size: 16px; }
.is-winning { box-shadow: 0 0 0 3px #f5dba9, 0 0 30px #f0c5d688, 0 3px 0 #d4a8b7; }
.just-won .plush { animation: shelf-hop 750ms ease-out; }
@keyframes happy-rain { 0% { opacity: 0; transform: translate3d(0, -25px, 0) rotate(0); } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--drift), calc(100vh + 90px), 0) rotate(var(--spin)); } }
@keyframes plush-arrival { 0% { opacity: 0; transform: scale(.3) rotate(-12deg); } 18% { opacity: 1; transform: scale(1.12) rotate(5deg); } 30% { transform: scale(1) rotate(-3deg); } 42%, 75% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 0; transform: translateY(20px) scale(.8); } }
@keyframes shelf-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-18px) rotate(-7deg); } 55% { transform: translateY(0) rotate(5deg); } 75% { transform: translateY(-6px); } }
@media (max-width: 350px) { .crane-shell { padding-left: 9px; padding-right: 9px; }.catalog { gap: 3px; }.catalog small { font-size: 8px; }.shelf { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; }.celebration, .win-reveal { display: none; } }