*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;background:#120b22;color:#fff3d6;font-family:Trebuchet MS,system-ui,sans-serif;user-select:none;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}#app{position:relative;width:min(100vw,470px);height:100svh;min-height:550px;margin:auto;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#614278 0,#322045 48%,#1b102e 100%)}#app:before{content:'✦　 ·　　 ✧　　 ·　 ✦';position:absolute;inset:5% 0;color:#d9b96655;word-spacing:16px;font-size:25px;pointer-events:none}.screen{position:absolute;inset:0;display:flex;align-items:center;flex-direction:column;padding:20px 12px}.hidden{display:none!important}.logo{text-align:center;line-height:.86;font-weight:1000;letter-spacing:-3px;color:#ffbc3f;text-shadow:0 4px 0 #873219,0 7px 0 #39122f,3px 0 #552442,-3px 0 #552442;transform:rotate(-4deg)}.logo .trick{display:block;font-size:clamp(55px,15vw,78px)}.logo .or{display:block;font-size:25px;color:#e6c4ff;letter-spacing:0;line-height:1.25}.logo .treats{display:block;font-size:clamp(59px,16vw,84px);color:#ffde70}.eyebrow{font-size:11px;letter-spacing:4px;color:#dbb9ed;margin-bottom:24px}#home{justify-content:center;gap:24px}.hero{height:145px;width:260px;position:relative}.hero img{position:absolute;object-fit:contain;width:105px;height:110px;filter:drop-shadow(0 8px 8px #0006);animation:bob 3s ease-in-out infinite}.hero img:nth-child(1){left:0;top:30px;transform:rotate(-18deg)}.hero img:nth-child(2){left:75px;top:0;animation-delay:-1s}.hero img:nth-child(3){right:0;top:30px;animation-delay:-2s}.play{background:none;border:0;width:190px;padding:0;transition:transform .15s}.play:hover{transform:scale(1.05)}.play:active{transform:scale(.95)}.play img{width:100%;display:block}.subtle{font-size:12px;color:#c7aecf;text-align:center;line-height:1.6}.hud{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 10px}.pill{border:1px solid #ffffff20;background:#160c2580;border-radius:30px;padding:9px 16px;font-size:12px;font-weight:bold}.hud strong{color:#ffda72}.heading{margin:10px 0 0;font-size:21px}.hint{font-size:12px;color:#d9c4df;text-align:center;margin:7px 0 0;min-height:18px}.cabinet{position:relative;aspect-ratio:1086/1448;width:min(100%,calc((100svh - 175px)*.75));flex-shrink:0;margin-top:0}.cabinet>img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.eye{position:absolute;left:41.65%;top:9.3%;width:16.7%;height:10.2%;border-radius:50%;background:radial-gradient(circle at 50% 45%,#fff 25%,#fffbeb 65%,#b9a990 100%);overflow:hidden;box-shadow:inset 0 1px 5px #48331c80}.iris{position:absolute;left:18%;top:17%;width:64%;height:70%;border-radius:50%;background:repeating-conic-gradient(#25cbd1 0deg 8deg,#1594b3 9deg 15deg,#3fdfca 16deg 19deg);border:1px solid #22516d;box-shadow:inset 0 0 7px #063951}.iris:before{content:'';position:absolute;inset:22%;border-radius:50%;background:#041a30;box-shadow:0 0 3px #092a38}.iris:after{content:'';position:absolute;width:23%;height:23%;border-radius:50%;background:#f2ffff;right:15%;top:10%;box-shadow:-5px 7px 0 -2px #fff}.slots{position:absolute;left:23.7%;top:24.4%;width:52.5%;height:56.5%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);column-gap:8%}.slot{position:relative;border:0;background:none;padding:0;border-radius:8px;outline-offset:-2px}.slot:after{content:'';position:absolute;bottom:2%;left:10%;right:10%;height:3px;border-radius:50%;background:#ffcf6330}.slot.empty:before{content:'+';color:#f3c86845;position:absolute;bottom:8%;left:0;right:0;font-size:25px}.slot.selected{background:#ffe78c22;outline:2px solid #ffdc75;box-shadow:0 0 16px #ffc54d55}.slot.valid{background:#a2f3af18}.item{position:absolute;width:63%;height:58%;left:18.5%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 2px #0008);transition:transform .18s}.slot.selected .item:last-of-type{transform:translateY(-12%);filter:drop-shadow(0 0 5px #ffed8e)}.complete:before{content:'✓';position:absolute;z-index:8;right:-4%;top:3%;font-size:18px;color:#ffe587;text-shadow:0 2px #49270c}.toolbar{display:flex;gap:14px;margin-top:auto;padding:8px}.tool{border:1px solid #9b6ab657;border-radius:30px;background:#513062;padding:11px 20px;box-shadow:0 3px 0 #170c25;font-size:12px}.tool:disabled{opacity:.4}.shake{animation:shake .25s}#end{justify-content:center;background:radial-gradient(ellipse,#67417b,#241033);gap:18px;text-align:center}.win-icon{width:130px;animation:bob 2.5s infinite}.end-title{font-size:40px;line-height:1;color:#ffdb72;text-shadow:0 4px #8b3c28;margin:0}.spark{position:absolute;width:7px;height:12px;top:-20px;animation:fall 3s linear forwards;pointer-events:none}@keyframes bob{50%{translate:0 -10px}}@keyframes shake{25%{translate:-4px}75%{translate:4px}}@keyframes fall{to{transform:translateY(110svh) rotate(720deg)}}@media(max-height:650px){.heading{font-size:17px;margin-top:5px}.hint{font-size:10px}.screen{padding-top:8px}.toolbar{padding:3px}.hero{height:115px}#home{gap:18px}}
.game-logo{width:92%;max-height:260px;object-fit:contain;filter:drop-shadow(0 8px 10px #0004)}.slots{left:23.3%;top:24.3%;width:53.4%;height:56.5%;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);column-gap:0}.slot{min-width:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8%}.slot:after,.slot:before{display:none}.item{position:relative;left:auto;bottom:auto!important;width:98%;height:auto;max-height:90%;object-fit:contain}.slot.selected .item{transform:translateY(-12%);filter:drop-shadow(0 0 5px #ffed8e)}.slot.sorted{background:linear-gradient(transparent 65%,#ffe38d20);box-shadow:inset 0 -2px #ffda70a0}.slot.selected{background:#ffe78c22}.hero{height:105px}.hero img{height:85px;width:85px}.hero img:nth-child(2){left:85px}.game-logo{animation:bob 4s ease-in-out infinite}#home{gap:18px}.sound-toggle{position:absolute;bottom:20px;right:12px;z-index:50;width:44px;height:44px;border:1px solid #c996de66;border-radius:50%;background:#3b214de8;color:#ffe7a0;display:grid;place-items:center;box-shadow:0 3px 0 #170c25}.sound-toggle:focus-visible{outline:2px solid #ffdb72;outline-offset:3px}.sound-toggle:active{transform:scale(.94)}.sound-toggle[aria-pressed="false"]{color:#c7aecf}.fullscreen-toggle{left:12px;right:auto}.fullscreen-toggle[aria-pressed="false"]{color:#ffe7a0}.fullscreen-toggle:disabled{opacity:.4;cursor:default}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.slot.row-win{animation:row-gold-base 1.05s ease-out;z-index:2}
.slot.row-win .item{animation:row-gold-glow 1.05s ease-out}
@keyframes row-gold-glow{0%,100%{filter:drop-shadow(0 3px 2px #0008);transform:scale(1)}20%,55%{filter:drop-shadow(0 0 4px #fff2a6) drop-shadow(0 0 10px #ffd34d) drop-shadow(0 0 17px #f5ac16);transform:scale(1.10)}75%{filter:drop-shadow(0 0 6px #ffce47);transform:scale(1.04)}}
@keyframes row-gold-base{25%,55%{background:#ffd65a28;box-shadow:inset 0 -2px #ffe18b,0 0 14px #ffd45a55}100%{background:transparent}}
@media(prefers-reduced-motion:reduce){.slot.row-win .item{animation-name:row-gold-still}@keyframes row-gold-still{20%,70%{filter:drop-shadow(0 0 7px #ffd34d) drop-shadow(0 0 12px #f5ac16)}}}

/* Object motion lives inside the item, keeping selection and row rewards independent. */
.treat{display:block;isolation:isolate;line-height:0;transform-origin:50% 90%}
.treat-base{display:block;width:100%;height:auto;transform-origin:50% 85%}
.treat-part{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.treat-base,.treat-part,.treat i{animation-delay:var(--phase)!important}
.pumpkin-eyes{clip-path:polygon(24% 39%,43% 39%,43% 56%,24% 56%,24% 39%,57% 39%,76% 39%,76% 56%,57% 56%,57% 39%);animation:lantern-light 3.2s ease-in-out infinite}
@keyframes lantern-light{0%,100%{filter:brightness(1.1) sepia(1) saturate(3);opacity:.3}50%{filter:brightness(4) sepia(1) saturate(5) drop-shadow(0 0 4px #ffbe39);opacity:1}}
.treat-2 .treat-base{animation:ghost-float 3.8s ease-in-out infinite}
@keyframes ghost-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9%) rotate(2deg)}}
.treat-3 .treat-base{animation:candy-jelly 3.3s ease-in-out infinite}
@keyframes candy-jelly{0%,65%,100%{transform:scale(1) rotate(0)}72%{transform:scale(1.08,.91) rotate(-5deg)}82%{transform:scale(.94,1.07) rotate(5deg)}92%{transform:scale(1.03,.97) rotate(-2deg)}}
.cat-lid{position:absolute;top:43%;width:19%;height:19%;border-radius:50%;background:#392c2a;transform:scaleY(0);animation:cat-blink 5.6s infinite;transform-origin:center}
.cat-lid.left{left:22%}.cat-lid.right{left:61%}
@keyframes cat-blink{0%,88%,94%,100%{transform:scaleY(0)}90%,92%{transform:scaleY(1)}}
.potion-bubble{position:absolute;bottom:22%;left:28%;width:8%;aspect-ratio:1;border:1px solid #e5ff9ccc;border-radius:50%;background:#bbff5040;box-shadow:inset 1px 1px 1px #f2ffc9;animation:bubble-rise 2.8s ease-in infinite;opacity:0}
.potion-bubble.bubble-1{left:41%;width:6%;animation-duration:3.7s}.potion-bubble.bubble-2{left:52%;width:5%;animation-duration:2.2s}
@keyframes bubble-rise{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:.8}80%{opacity:.6}100%{opacity:0;transform:translateY(-330%) scale(1.1)}}
.spider-left{clip-path:inset(18% 69% 8% 0);transform-origin:33% 53%;animation:legs-left 2.4s ease-in-out infinite}
.spider-right{clip-path:inset(18% 0 8% 69%);transform-origin:67% 53%;animation:legs-right 2.4s ease-in-out infinite}
@keyframes legs-left{0%,55%,100%{transform:rotate(0)}65%,85%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}}
@keyframes legs-right{0%,55%,100%{transform:rotate(0)}65%,85%{transform:rotate(-5deg)}75%{transform:rotate(3deg)}}
.candle-flame{clip-path:inset(0 27% 57% 26%);transform-origin:51% 42%;animation:flame-flicker 1.4s ease-in-out infinite}
@keyframes flame-flicker{0%,100%{transform:scale(1);filter:brightness(1.05)}25%{transform:skewX(3deg) scale(.97,1.04);filter:brightness(1.18)}60%{transform:skewX(-3deg) scale(1.03,.97);filter:brightness(1.05)}80%{transform:scale(.98,1.03);filter:brightness(1.22)}}
.hat-stars{clip-path:polygon(39% 18%,56% 18%,56% 34%,39% 34%,39% 18%,19% 47%,36% 47%,36% 64%,19% 64%,19% 47%,58% 44%,76% 44%,76% 63%,58% 63%,58% 44%);animation:star-light 3.4s ease-in-out infinite}
@keyframes star-light{0%,100%{filter:brightness(1);opacity:.3}50%{filter:brightness(1.8) drop-shadow(0 0 4px #ffe78a);opacity:1}}
@media(prefers-reduced-motion:reduce){.treat-base,.treat-part,.treat i{animation:none!important}.cat-lid,.potion-bubble{display:none}.pumpkin-eyes,.hat-stars{opacity:.4}}

.treat:not(.idle-active) .treat-base,.treat:not(.idle-active) .treat-part,.treat:not(.idle-active) i{animation:none!important}
.treat:not(.idle-active) .cat-lid{transform:scaleY(0)}
.treat:not(.idle-active) .potion-bubble,.treat:not(.idle-active) .pumpkin-eyes,.treat:not(.idle-active) .hat-stars{opacity:0}
.treat.idle-active .treat-base,.treat.idle-active .treat-part,.treat.idle-active i{animation-duration:1.8s;animation-iteration-count:1;animation-delay:0s!important}
.treat.idle-active .potion-bubble{animation-duration:1.6s}

.pumpkin-face{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;filter:drop-shadow(0 0 10px #ffc13c)}
.treat.idle-active .pumpkin-face{animation:face-light 1.8s ease-in-out 1}
@keyframes face-light{0%,100%{opacity:0}30%,65%{opacity:.95}48%{opacity:.72}}
.treat.idle-active.treat-2 .treat-base{animation:ghost-twist 1.8s ease-in-out 1!important;transform-origin:50% 60%}
@keyframes ghost-twist{0%,100%{transform:perspective(240px) translateY(0) rotateY(0) rotate(0)}25%{transform:perspective(240px) translateY(-10%) rotateY(-19deg) rotate(-5deg)}60%{transform:perspective(240px) translateY(-14%) rotateY(19deg) rotate(5deg)}80%{transform:perspective(240px) translateY(-7%) rotateY(-8deg) rotate(-2deg)}}
.treat.idle-active.treat-4{animation:potion-wobble 1.8s ease-in-out 1}
@keyframes potion-wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg)}42%{transform:rotate(5deg)}65%{transform:rotate(-3deg)}82%{transform:rotate(2deg)}}
.treat.idle-active .potion-bubble{width:9%;background:#c6ff5e66;border-color:#f3ffd6;animation:bubble-rise 1.65s ease-in-out 1!important}
.treat.idle-active .potion-bubble.bubble-1{animation-delay:.10s!important}.treat.idle-active .potion-bubble.bubble-2{animation-delay:.22s!important}
@media(prefers-reduced-motion:reduce){.treat.idle-active.treat-2 .treat-base,.treat.idle-active.treat-4,.treat.idle-active .pumpkin-face{animation:none!important}}

.slots{grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:repeat(4,minmax(0,1fr))}
.slot{min-height:0;min-width:0;overflow:visible}
.treat{flex:none;position:relative;height:auto;max-height:90%}
.treat-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* Isolate the flame so its resting copy does not hide the movement. */
.treat.idle-active.treat-6 .treat-base{clip-path:polygon(0 0,34% 0,34% 34%,39% 39%,48% 42%,55% 42%,62% 39%,67% 34%,67% 0,100% 0,100% 100%,0 100%)}
.treat.idle-active.treat-6 .candle-flame{clip-path:polygon(34% 0,67% 0,67% 34%,62% 39%,55% 42%,48% 42%,39% 39%,34% 34%);transform-origin:51% 42%;animation:flame-sway 1.8s ease-in-out 1!important}
@keyframes flame-sway{0%,100%{transform:rotate(0) skewX(0) scale(1);filter:brightness(1)}15%{transform:rotate(-6deg) skewX(-5deg) scale(.95,1.09);filter:brightness(1.15)}35%{transform:rotate(7deg) skewX(6deg) scale(1.04,.95);filter:brightness(1.06)}55%{transform:rotate(-7deg) skewX(-6deg) scale(.96,1.10);filter:brightness(1.2)}75%{transform:rotate(5deg) skewX(4deg) scale(1.03,.97);filter:brightness(1.08)}90%{transform:rotate(-3deg) scale(.99,1.04)}}
.treat.idle-active.treat-7{transform-origin:50% 92%;animation:hat-stretch 1.8s ease-in-out 1}
@keyframes hat-stretch{0%,100%{transform:scale(1)}14%{transform:scale(1.025,.97)}32%{transform:scale(.975,1.045)}52%{transform:scale(1.015,.985)}72%{transform:scale(.99,1.02)}88%{transform:scale(1.005,.995)}}
@media(prefers-reduced-motion:reduce){.treat.idle-active.treat-6 .candle-flame,.treat.idle-active.treat-7{animation:none!important}.treat.idle-active.treat-6 .treat-base{clip-path:none}}

/* Warm halo stays local to the flame and appears only during its idle gesture. */
.treat-6::before{content:'';position:absolute;pointer-events:none;left:20%;top:-8%;width:62%;height:60%;border-radius:50%;background:radial-gradient(ellipse,#fff4af99 0%,#ffcc5070 25%,#ff9d2440 48%,#ff791a18 65%,transparent 76%);filter:blur(3px);opacity:0}
.treat-6.idle-active::before{animation:flame-halo 1.8s ease-in-out 1;transform-origin:50% 80%}
@keyframes flame-halo{0%,100%{opacity:0;transform:scale(.85)}15%{opacity:.75;transform:scale(.98,1.04)}35%{opacity:.55;transform:scale(1.05,.96)}55%{opacity:1;transform:scale(1.08,1.09)}75%{opacity:.7;transform:scale(.99,1.02)}90%{opacity:.4;transform:scale(.94)}}
@media(prefers-reduced-motion:reduce){.treat-6.idle-active::before{animation:none}}