.lucky-game { --scoop-purple:#7351a4; --scoop-ink:#46315d; color:var(--scoop-ink); }
.lucky-game [hidden] { display:none !important; }
.scoop-back { font-size:13px; text-decoration:none; }
.scoop-heading { text-align:center; padding:20px 0 30px; }
.scoop-heading h1 { margin:10px 0; font-size:clamp(30px,4vw,48px); letter-spacing:-1.8px; }
.scoop-heading h1 span { color:#bc8cce; margin-left:10px; }
.scoop-heading p { color:#84718e; margin:0; }
.scoop-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr); gap:30px; align-items:start; }
.scoop-play { padding:24px 28px; text-align:center; background:radial-gradient(ellipse at 50% 42%,#f5e9fb,transparent 68%),#fcf9ff; border:1px solid #eee4f5; border-radius:28px; }
.scoop-toolbar { display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.scoop-play { overflow:hidden; }
.scoop-stage { position:relative; max-width:560px; margin:40px auto 24px; padding-bottom:38px; isolation:isolate; }
.scoop-tray { position:relative; width:100%; aspect-ratio:1.65; border:10px solid #d4b5e5; border-top-color:#ead7f4; border-bottom-color:#b695ce; border-radius:50%; background:radial-gradient(ellipse at 50% 65%,#fbf4fd 15%,#ddc8e9 78%,#b695cf); box-shadow:inset 0 8px 15px #78599530,inset 0 -4px 4px #fff9,0 2px 0 #956eae; overflow:hidden; touch-action:none; isolation:isolate; z-index:2; cursor:grab; }
.scoop-tray:focus-visible { outline:3px solid #71509b; outline-offset:5px; }
.scoop-tray[aria-disabled="true"] { cursor:default; }
.bowl-front { position:absolute; inset:14px 0 24px; border:2px solid #bb99cf; border-radius:50%; background:linear-gradient(100deg,#b898ca,#e7cef2 25%,#ddc0ed 50%,#b18bc6 92%); box-shadow:inset 0 -8px 10px #8b61a229; z-index:1; pointer-events:none; }
.bowl-shine { position:absolute; inset:3% 12% auto; height:22%; border-top:3px solid #fff8; border-radius:50%; pointer-events:none; z-index:3; }
.bowl-shadow { position:absolute; bottom:1px; left:12%; height:20px; width:76%; border-radius:50%; background:radial-gradient(ellipse,#9864b333,transparent 70%); pointer-events:none; }
.scoop-placeholder { position:absolute; inset:18% 12%; display:flex; flex-direction:column; gap:8px; justify-content:center; font-size:13px; color:#9472a9; pointer-events:none; }
.scoop-placeholder > span:first-child { font-size:38px; }.scoop-placeholder strong { font-size:20px; color:#79568f; }
.scoop-jewel { position:absolute; width:46px; height:46px; transform:translate(-50%,-50%) rotate(var(--tilt)); pointer-events:none; z-index:1; }
.jewel-art { display:block; width:100%; height:100%; }
.scoop-jewel .jewel-art { animation:jewel-arrive .55s cubic-bezier(.2,.8,.3,1) backwards; animation-delay:var(--delay); }
.scoop-jewel.is-collected { opacity:.12; }
.scoop-cursor { position:absolute; left:64%; top:12%; width:90px; height:198px; pointer-events:none; z-index:5; transform:rotate(-35deg); transform-origin:45px 46px; }
.scoop-cursor img { display:block; width:100%; height:100%; filter:drop-shadow(3px 6px 3px #5e3e6c33); }
.scoop-cursor.is-active { left:0; top:0; will-change:transform; }
.scoop-peek { display:flex; align-items:center; justify-content:center; gap:20px; margin:24px auto 0; max-width:440px; text-align:left; }
.scoop-peek img { flex-shrink:0; width:110px; height:auto; }
.scoop-peek-bubble { flex:1; min-width:0; padding:14px 18px; }
#scoop-instructions { max-width:420px; margin:12px auto 18px; color:#85728f; font-size:13px; line-height:1.7; }
#scoop-message { min-height:38px; font-size:13px; color:#79518b; line-height:1.6; margin:14px 0 0; }
.scoop-result { padding:28px; border:1px solid #ecdfef; border-radius:26px; background:white; box-shadow:0 14px 45px #7552890c; }
.scoop-result h2 { margin:8px 0 22px; font-size:30px; letter-spacing:-1px; }
.scoop-basket { display:flex; justify-content:space-between; gap:8px; background:#faf5fc; border-radius:18px; padding:14px 10px; }
.scoop-basket > span { flex:1; min-width:0; max-width:44px; display:flex; justify-content:center; align-items:center; width:44px; height:44px; border:1px dashed #d8c7e0; border-radius:12px; color:#c0a9ce; font-size:12px; }
.scoop-basket > span.filled { border-style:solid; background:white; }.scoop-basket .jewel-art { width:35px; height:35px; }
#scoop-hint { color:#8a7893; font-size:14px; line-height:1.7; }
.scoop-products { list-style:none; padding:0; margin:0; }
.scoop-products li { display:flex; gap:12px; align-items:center; border-bottom:1px solid #f0e8f4; padding:12px 0; font-size:14px; animation:product-reveal .45s ease both; }
.scoop-products img { width:48px; height:48px; border-radius:12px; object-fit:cover; background:#faf5fc; }
.scoop-products small { display:block; margin-top:4px; color:#927a9e; }
.scoop-total { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:24px 0; }.scoop-total strong { font-size:22px; }
.scoop-fine { font-size:12px; line-height:1.7; color:#96869f; }
.scoop-note { border-top:1px solid #f1e9f4; padding-top:18px; margin-top:24px; color:#a58bb2; font-size:12px; text-align:center; }.scoop-note span { font-size:22px; vertical-align:middle; margin-right:6px; }
@keyframes jewel-arrive { from { opacity:0; transform:translateY(-120px) rotate(-60deg) scale(.5); } to { opacity:1; transform:translateY(0) rotate(0) scale(1); } }
@keyframes product-reveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:760px) { .scoop-layout { grid-template-columns:minmax(0,1fr); gap:20px; }.scoop-play,.scoop-result { padding:20px; min-width:0; }.scoop-heading { padding-block:20px; }.scoop-stage { margin-top:30px; }.scoop-placeholder { font-size:11px; gap:3px; }.scoop-placeholder strong { font-size:16px; }.scoop-placeholder > span:first-child { font-size:25px; }.scoop-jewel { width:35px; height:35px; }.scoop-cursor { width:72px; height:158px; left:58%; transform-origin:36px 36px; }.scoop-peek img { width:90px; }.scoop-peek-bubble { padding:12px; } }
@media(max-width:380px) { .scoop-play { padding:16px 10px; }.scoop-jewel { width:31px; height:31px; }.scoop-tray { border-width:7px; }.scoop-peek img { width:76px; } }
@media(prefers-reduced-motion:reduce) { .lucky-game *, .lucky-game *::before { animation:none !important; transition:none !important; } }

.scoop-carry { position:absolute; left:27%; top:13%; width:46%; aspect-ratio:1; pointer-events:none; }
.scoop-carry .jewel-art { width:100%; height:100%; }
#scoop-peek-right .scoop-peek { flex-direction:row; gap:20px; margin:28px auto; text-align:left; }
#scoop-peek-right .scoop-peek img { width:clamp(110px,12vw,170px); }
#scoop-peek-right .scoop-peek-bubble { max-width:260px; }
#scoop-peek-left .scoop-peek { animation:product-reveal .4s ease both; }
.scoop-basket > span.is-arriving { border-color:#ad87c7; background:#f2e5fc; }
@media(max-width:760px) { #scoop-peek-right .scoop-peek { flex-direction:row; text-align:left; gap:18px; margin:18px auto; } #scoop-peek-right .scoop-peek img { width:90px; } #scoop-peek-right .scoop-peek-bubble p { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { #scoop-peek-left .scoop-peek { animation:none; } }

/* Keep the bowl and its controls in the first viewport. Results may grow below it. */
.lucky-game.section { padding-top:16px; }
.scoop-heading { padding:8px 0 18px; }
.scoop-heading h1 { margin:4px 0 6px; font-size:clamp(27px,3vw,38px); letter-spacing:-1.2px; }
.scoop-heading p { font-size:14px; }
.scoop-play { padding:18px 22px; }
.scoop-toolbar { gap:12px; }
.scoop-toolbar .button { min-height:44px; }
.scoop-stage { max-width:min(560px,max(300px,calc((100svh - 400px) * 1.35))); margin:12px auto 8px; }
#scoop-instructions { margin:6px auto; line-height:1.5; }
#scoop-message { margin-top:8px; min-height:36px; font-size:12px; line-height:1.5; }
.scoop-result { padding:22px; }
@media(max-width:760px) {
    .lucky-game.section { padding-top:12px; }
    .scoop-heading { padding:4px 0 14px; }
    .scoop-heading h1 { font-size:27px; }
    .scoop-play { padding:14px 12px; }
    .scoop-stage { max-width:100%; margin:10px auto 6px; }
    .scoop-toolbar { font-size:12px; }
    .scoop-toolbar .button { padding-inline:14px; }
}