/* Little Capsule Shop — all illustration is native CSS, no bitmap downloads. */
#reward,#gacha{overflow-y:auto;overflow-x:hidden;padding:0 2px 18px;flex-shrink:1;scrollbar-width:thin}
#reward.on,#gacha.on{justify-content:flex-start}
#reward .back,#gacha .back{flex-shrink:0;margin-bottom:14px}
.g-eyebrow{font:700 9px/1.4 'Noto Sans TC',sans-serif;letter-spacing:2.5px;color:#d1af7e;margin:3px 0 8px}
.g-title{font-size:30px;letter-spacing:3px;margin:0 0 23px;line-height:1.35;color:#fff0d7}
.g-title small{display:block;font:500 12px/1.6 Fredoka,sans-serif;letter-spacing:1px;color:#a8b9c1;margin-top:6px}
.g-title-small{font-size:23px;margin-bottom:14px}.g-title-small small{font-size:9px;letter-spacing:2px}
.stamp-passport{position:relative;width:100%;text-align:left;padding:23px 25px 20px;border:1px solid #718c87;border-radius:8px 22px 22px 8px;background:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff03 3px 4px),linear-gradient(120deg,#244e4c,#173537);box-shadow:inset 5px 0 #102d30,0 16px 30px #0003;color:#f5e6c5}
.stamp-passport:before{content:'';position:absolute;inset:9px;border:1px solid #d3bc843b;border-radius:3px 15px 15px 3px;pointer-events:none}
.passport-top{display:flex;justify-content:space-between;font-size:15px;letter-spacing:2px}.passport-top small{font:10px Fredoka,sans-serif;letter-spacing:2px}.passport-star{font-size:34px;line-height:1}
.passport-count{display:flex;align-items:center;gap:16px;margin:15px 0}.passport-count b{font:600 68px/1 Fredoka,sans-serif}.passport-count span{font-size:14px}.passport-count small{font:11px Fredoka,sans-serif;opacity:.7}
.passport-seals{display:flex;gap:12px}.passport-seals span{display:grid;place-items:center;width:34px;height:34px;border:1px dashed #acbcaa70;border-radius:50%;color:#bfd1ba50;font-size:15px}.passport-seals span.earned{border:2px solid #edd5a0;color:#edd5a0;transform:rotate(-12deg);box-shadow:inset 0 0 0 2px #244844,inset 0 0 0 3px #edd5a0}
.bank-ticket{display:flex;align-items:center;gap:12px;width:100%;padding:17px 18px;margin-top:14px;background:#242d40;border:1px solid #ffffff18;border-radius:14px;text-align:left;font-size:13px}.ticket-star{font-size:31px;color:#f5cf75}.bank-ticket small{display:block;color:#a2acbb;font:9px/1.8 Fredoka,sans-serif;letter-spacing:1.5px}.bank-ticket b{margin-left:auto;font:600 33px Fredoka,sans-serif;color:#ffe1a1}
.g-price{font-size:13px;color:#eedac0;margin:18px 0;line-height:1.8}.g-price small{font:11px Fredoka,sans-serif;color:#a3b1c1}
.g-enter.primary{background:linear-gradient(#ec7968,#d6584f);border:1px solid #ffb6a16b;color:#fff7e6;box-shadow:0 5px 0 #81312d,0 10px 25px #b145301c;min-height:52px;font-size:15px;letter-spacing:.2px;flex-shrink:0}.g-enter.primary:disabled{box-shadow:none;opacity:.5}
.g-receipt{min-height:15px;font-size:10px;line-height:1.6;color:#a8b9c1;margin:14px 0 0}#reward .again{font-size:12px;color:#b9c8d2;margin-top:12px}
.g-steps{display:flex;gap:22px;list-style:none;padding:0;margin:0 0 2px;color:#8d9aaa;font-size:10px;flex-shrink:0}.g-steps b{display:inline-grid;place-items:center;border:1px solid #64757b;border-radius:50%;width:20px;height:20px;margin-right:4px;font:11px Fredoka,sans-serif}.g-steps .active{color:#f9d799}.g-steps .active b{color:#111e29;background:#f9d799;border-color:#f9d799}
.g-stage{position:relative;width:100%;height:440px;min-height:440px;isolation:isolate;flex-shrink:0}.g-halo{position:absolute;inset:10px -30px -5px;background:radial-gradient(ellipse,#dbac6230,transparent 65%);z-index:-1}.g-halo:after{content:'';position:absolute;left:15%;right:15%;bottom:7px;height:20px;background:#0008;border-radius:50%;filter:blur(9px)}
.machine{position:absolute;width:250px;height:390px;left:50%;top:15px;transform:translateX(-50%);filter:drop-shadow(0 13px 12px #0005);transition:opacity .6s,filter .6s}
.machine-crown{height:34px;position:absolute;inset:0 0 auto;border-radius:19px 19px 4px 4px;background:linear-gradient(#f17c6c 0%,#c6423f 85%,#933b37 85%);border:1px solid #ffb5a080;box-shadow:inset 0 4px 0 #fcb09850;text-align:center;padding:7px 15px;font-size:11px;letter-spacing:4px;color:#fff3d5}.machine-crown i{position:absolute;right:17px;font-size:12px;font-style:normal;letter-spacing:0;color:#ffe09c}
.dome{position:absolute;left:8px;right:8px;top:32px;height:172px;overflow:hidden;background:linear-gradient(100deg,#a6dbe136,#142631ab 45%,#87b0b329);border:2px solid #afd1cc80;border-top:none;border-bottom:6px solid #c9d2bd;border-radius:5px 5px 15px 15px;box-shadow:inset 8px 0 18px #d5ffea22,inset -5px 0 8px #ffffff10}
.dome-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 12%,#ffffff24 13%,#ffffff0d 24%,transparent 25%,transparent 74%,#ffffff0b 75%,transparent 88%);border-radius:inherit}
.pills{position:absolute;inset:0 6px}.mini-capsule{position:absolute;left:var(--x);top:var(--y);width:53px;height:53px;transform:rotate(var(--r));border-radius:50%;background:linear-gradient(to bottom,var(--cap) 0 49%,#d7e8df 50% 53%,#b6d2cc99 54%);border:1px solid #ffffed80;box-shadow:inset -7px -6px 9px #102a3550,2px 3px 4px #10233270}.mini-capsule:before{content:'';position:absolute;left:9px;top:5px;width:17px;height:8px;border-radius:50%;background:#fff6;transform:rotate(-25deg)}
.glass-label{position:absolute;top:21px;left:53px;right:53px;text-align:center;transform:rotate(-4deg);padding:9px 4px 8px;background:#fff0ca;color:#9c443c;border:3px double #b55c4e;border-radius:6px;box-shadow:0 3px 8px #0004;font-size:12px;letter-spacing:1px}.glass-label small{display:block;font:7px/2 Fredoka,sans-serif;letter-spacing:1px}
.machine-body{position:absolute;top:197px;left:0;right:0;height:176px;background:linear-gradient(90deg,#a93535,#da584b 8%,#dc5b4b 85%,#a63533);border-radius:5px 5px 20px 20px;border:1px solid #fb927875;box-shadow:inset 0 5px #ef8c6880,inset 0 -6px #822e3470}
.machine-brand{font:600 8px/1 Fredoka,sans-serif;letter-spacing:2px;margin:14px 18px 8px;color:#ffe5c9;text-align:left}.machine-brand span{float:right;font-size:7px;letter-spacing:1px;opacity:.75}
.control-plate{position:relative;margin:0 18px;height:79px;background:linear-gradient(110deg,#d5d6c9,#a7b8b4 50%,#d2d0bf);border:2px solid #80483e;border-radius:9px;box-shadow:0 2px #fca77950,inset 0 2px #fffa}
.knob{position:absolute;left:40px;top:5px;width:57px;height:57px;border-radius:50%;border:2px solid #697776;background:conic-gradient(#fff6df,#8faaa9,#edf1dc,#8d9c9d,#fff6df);box-shadow:0 3px 0 #536163,0 5px 7px #293f4240;cursor:grab;touch-action:none;padding:6px;color:#182d32}.knob:disabled{cursor:default;opacity:1}.knob:focus-visible,.capsule:focus-visible{outline:3px solid #ffe798;outline-offset:5px}
.knob-rotor{display:block;position:relative;width:100%;height:100%;border:1px solid #778b89;border-radius:50%;background:linear-gradient(130deg,#dce9dc,#92a6a3);transform:rotate(var(--turn,0deg))}.knob-rotor i{position:absolute;left:50%;top:-2px;bottom:-2px;width:14px;margin-left:-7px;border-radius:4px;background:linear-gradient(90deg,#526d73,#dce7d4 45%,#e9ebd7 60%,#7e9493);border:1px solid #667d7d;box-shadow:3px 3px 3px #10282b50}
.turn-arrow{position:absolute;left:13px;top:4px;color:#476267;font:38px/1 Fredoka,sans-serif;transform:rotate(-25deg)}
.coin-plate{position:absolute;right:15px;top:7px;width:48px;color:#344a4e;font:600 13px Fredoka,sans-serif}.coin-plate i{display:block;width:26px;height:6px;background:#142b32;border:2px solid #778c8c;border-radius:4px;margin:5px auto}.coin-plate small{font-size:7px;letter-spacing:1px}
.turn-caption{position:absolute;bottom:3px;left:25px;font-size:7px;color:#233f43;letter-spacing:1px}.turn-caption small{font:6px Fredoka,sans-serif}
.pickup-label{font-size:7px;letter-spacing:2px;color:#ffdbb8;position:absolute;bottom:41px;left:27px}.pickup-label small{display:block;font:6px/2 Fredoka,sans-serif;letter-spacing:1px}
.machine-slot{position:absolute;bottom:16px;right:40px;width:95px;height:40px;background:#18292c;border:4px solid #803438;border-radius:17px 17px 10px 10px;box-shadow:0 2px #f9947060,inset 0 4px 10px #0009;overflow:hidden}.slot-flap{position:absolute;inset:0 0 12px;background:linear-gradient(#687f78,#bac4ac);border-radius:10px 10px 3px 3px;transform-origin:top;transition:transform .35s;box-shadow:0 3px 5px #0007}
.body-screw{position:absolute;bottom:12px;color:#f4b599;font:10px Fredoka,sans-serif}.body-screw.left{left:12px}.body-screw.right{right:12px}.machine-foot{position:absolute;bottom:5px;left:6px;right:6px;height:16px;border-radius:3px 3px 8px 8px;background:linear-gradient(#afbab0,#718d86);border-bottom:5px solid #394e4e}
.capsule{position:absolute;z-index:3;width:74px;height:74px;padding:0;border:0;background:none;left:calc(50% - 37px);top:353px;cursor:pointer;filter:drop-shadow(0 9px 6px #0005);overflow:visible;touch-action:manipulation;transition:top .65s,left .65s,filter .6s}.capsule span{position:absolute;display:block;pointer-events:none}.capsule-top{inset:0 0 50%;border-radius:74px 74px 0 0;background:radial-gradient(ellipse at 30% 30%,#fff8 0 10%,transparent 12%),linear-gradient(120deg,#a1e2da,#5bacb0 60%,#307b86);border:1px solid #def5e9;border-bottom:3px solid #e3ecdb;transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .6s}
.capsule-bottom{inset:50% 0 0;border-radius:0 0 74px 74px;background:linear-gradient(120deg,#e4eddbbb,#b9cec999 55%,#639394aa);border:1px solid #e9f5e9;border-top:2px solid #8bada4;transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .6s}.capsule-star{left:23px;top:38px;font-size:25px;line-height:1;color:#fff0bd;transform:rotate(10deg);transition:opacity .3s}
.g-tip{font-size:13px;line-height:1.65;color:#f5dcad;margin:4px 0 14px;min-height:44px;flex-shrink:0}.g-tip small{display:block;font:10px/1.8 Fredoka,sans-serif;color:#aabbbd}
[data-phase=turning] .knob-rotor,[data-phase=waiting] .knob-rotor{animation:handleTurn 1.05s cubic-bezier(.2,.7,.3,1) forwards}[data-phase=turning] .mini-capsule{animation:ballRattle .38s ease-in-out 3 alternate}[data-phase=waiting] .glass-label{animation:confirmPulse 1.3s infinite}
[data-phase=dropping] .slot-flap,[data-phase=ready] .slot-flap{transform:perspective(90px) rotateX(-65deg)}
.capsule.drop{animation:capsuleDrop .85s cubic-bezier(.3,.65,.4,1) both}.capsule.wait{animation:capsuleNudge 2.2s ease-in-out infinite}
[data-phase=opening] .machine,[data-phase=revealed] .machine{opacity:.17;filter:blur(2px)}[data-phase=opening] .capsule,[data-phase=revealed] .capsule{top:194px;filter:drop-shadow(0 8px 9px #0003)}[data-phase=opening] .capsule-top,[data-phase=revealed] .capsule-top{transform:translate(-60px,-83px) rotate(-35deg);opacity:.8}[data-phase=opening] .capsule-bottom,[data-phase=revealed] .capsule-bottom{transform:translate(76px,87px) rotate(30deg);opacity:.6}[data-phase=opening] .capsule-star,[data-phase=revealed] .capsule-star{opacity:0}
.reveal-rays{position:absolute;inset:35px -15px;z-index:1;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 10deg,transparent 0deg 20deg,#efd79a10 20deg 30deg);mask-image:radial-gradient(circle,#000,transparent 69%);transition:opacity 1s}[data-phase=revealed] .reveal-rays{opacity:1}
.slip{position:absolute;z-index:4;left:6%;right:6%;top:115px;padding:27px 14px 24px;background:radial-gradient(circle at 0 50%,#17262d 0 7px,transparent 8px),radial-gradient(circle at 100% 50%,#17262d 0 7px,transparent 8px),#f9eed3;color:#563f33;border:1px solid #fff7e6;border-radius:12px;box-shadow:0 18px 35px #0005;animation:ticketReveal .65s cubic-bezier(.15,1.3,.3,1) both}.slip:before,.slip:after{content:'';position:absolute;left:12px;right:12px;border-top:1px dashed #b49c7e;top:10px}.slip:after{top:auto;bottom:10px}.slip-kicker{font:9px Fredoka,sans-serif;letter-spacing:2px;color:#92765d}.slip-title{font-size:21px;margin:9px 0 14px;letter-spacing:1px}.slip-stamps{display:flex;justify-content:center;gap:12px;margin-bottom:12px}.seal{width:49px;height:49px;display:grid;place-items:center;color:#b64c43;background:transparent;border:3px double #b64c43;border-radius:50%;font-size:24px;font-weight:900;transform:rotate(-12deg);animation:stampIn .35s both;animation-delay:calc(var(--i)*160ms + 280ms)}#slipEn{font:600 18px Fredoka,sans-serif;color:#a64e3e}.slip>small{display:block;font-size:8px;color:#806d60;margin-top:12px}
@keyframes handleTurn{0%{transform:rotate(var(--turn,0deg))}25%{transform:rotate(35deg)}55%{transform:rotate(115deg)}80%{transform:rotate(260deg)}100%{transform:rotate(360deg)}}
@keyframes ballRattle{to{transform:translateY(-9px) rotate(calc(var(--r) + 16deg))}}
@keyframes confirmPulse{50%{opacity:.55}}
@keyframes capsuleDrop{0%{transform:translate(33px,-43px) scale(.44) rotate(-45deg);opacity:0}18%{opacity:1}55%{transform:translate(6px,1px) scale(1) rotate(16deg)}73%{transform:translate(-2px,-18px) rotate(-10deg)}88%{transform:translate(0,0) rotate(5deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes capsuleNudge{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-8deg)}88%{transform:rotate(8deg)}}
@keyframes ticketReveal{from{opacity:0;transform:translateY(36px) scale(.65) rotate(-7deg)}to{opacity:1;transform:none}}
@keyframes stampIn{from{opacity:0;transform:scale(1.6) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(-12deg)}}
@media(max-width:350px){.g-title{font-size:25px}.g-title-small{font-size:21px}.stamp-passport{padding:19px}.passport-seals{gap:9px}.g-stage{height:416px;min-height:416px}.machine{transform:translateX(-50%) scale(.94);transform-origin:top center}.capsule{top:332px}.g-eyebrow{font-size:8px;letter-spacing:1.5px}}
@media(prefers-reduced-motion:reduce){#gacha *,#reward *{animation:none!important;transition:none!important}.capsule.drop{transform:none}.knob-rotor{transform:none!important}}
#reward .again{background:transparent;box-shadow:none;border:1px solid #8fa6ae40;min-height:42px;padding:10px 20px;border-radius:12px}
@media(prefers-reduced-motion:reduce){#reward,#gacha{animation:none!important}}
/* The child's star token: pick up, insert, then unlock the handle. */
.g-stage{height:480px;min-height:480px}
.coin-plate{padding:0;border:1px solid transparent;border-radius:6px;background:transparent;cursor:pointer;touch-action:manipulation;min-height:55px;transition:box-shadow .25s,background .25s}
.coin-plate:disabled{opacity:1;cursor:default}.coin-plate:not(:disabled){background:#fff1a455;box-shadow:0 0 0 3px #ffe3a955,0 0 18px #fff0a7;animation:slotInvitation 1.5s ease-in-out infinite}.coin-plate:focus-visible{outline:3px solid #8e472c;outline-offset:2px}
[data-phase=coin] .knob{filter:saturate(.3);opacity:.65}[data-phase=inserting] .knob{opacity:.65}
.coin-rest{position:absolute;left:calc(50% - 43px);top:407px;width:86px;height:28px;border-radius:50%;background:radial-gradient(ellipse,#0009,transparent 70%);border-bottom:1px solid #e2bb6530}
.star-coin{position:absolute;z-index:6;left:calc(50% - 34px);top:390px;width:68px;height:68px;padding:5px;border:2px solid #fbe2a0;border-radius:50%;background:repeating-conic-gradient(#c49240 0deg 5deg,#f7d883 5deg 10deg);box-shadow:0 4px 0 #97702e,0 8px 16px #0006;cursor:grab;touch-action:none;user-select:none;transform:translate(var(--coin-x,0px),var(--coin-y,0px));transition:transform .3s,box-shadow .3s;will-change:transform}
.star-coin:disabled{opacity:1}.coin-face{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%;border:1px solid #b17e31;border-radius:50%;background:linear-gradient(130deg,#fff0b4,#e8ba58 58%,#d2a13e);color:#79501f;text-shadow:0 1px #fff0b7}.coin-face small{font:600 5px Fredoka,sans-serif;letter-spacing:1px}.coin-face b{font:600 25px/1.15 Fredoka,sans-serif}.coin-face b span{font-size:13px;margin-left:1px}.coin-face em{font-style:normal;font-size:6px;letter-spacing:1px}
.star-coin.picked{transform:translate(var(--coin-x,0px),calc(var(--coin-y,0px) - 7px)) rotate(-10deg);box-shadow:0 4px 0 #97702e,0 14px 20px #0007,0 0 0 5px #ffe3a92b}
.star-coin.dragging{transition:none;cursor:grabbing;transform:translate(var(--coin-x,0px),var(--coin-y,0px)) rotate(-8deg) scale(1.08)}
.star-coin.inserting{pointer-events:none;animation:coinInsert .7s cubic-bezier(.3,.65,.3,1) both}
.star-coin:focus-visible{outline:3px solid #fff0bb;outline-offset:6px}
@keyframes coinInsert{0%{transform:translate(var(--coin-from-x,0px),var(--coin-from-y,0px)) scale(1);opacity:1}55%{transform:translate(var(--coin-x),var(--coin-y)) scale(.58,.58);opacity:1}80%{transform:translate(var(--coin-x),var(--coin-y)) scale(.58,.10);opacity:1}100%{transform:translate(var(--coin-x),var(--coin-y)) scale(.35,0);opacity:0}}
@keyframes slotInvitation{50%{box-shadow:0 0 0 5px #ffe3a933,0 0 22px #fff0a799}}
@media(max-width:350px){.g-stage{height:455px;min-height:455px}.star-coin{top:372px}.coin-rest{top:389px}}
.g-stage{-webkit-user-select:none;user-select:none}