/* factory */
.banner{height:clamp(64px,12vh,120px); border-radius:26px; background:center 35%/cover no-repeat; position:relative; overflow:hidden; margin-bottom:10px}
.steps{position:absolute; left:10px; right:10px; bottom:10px; display:flex; gap:6px}
.steps div{flex:1; background:rgba(255,255,255,.75); color:#4b2547; border-radius:14px; text-align:center; font-weight:800; font-size:15px; padding:3px 2px}
.steps div.on{background:var(--lemon); transform:scale(1.06)}
.steps div.done{background:#b9f0d7}
.stage{background:var(--card); border:3px solid var(--line); border-radius:30px; padding:16px; position:relative}
.work{display:grid; grid-template-columns:1fr; gap:14px; align-items:center; justify-items:center}
@media (min-width:700px){.work{grid-template-columns:200px 1fr}}
.shelf{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.ingr{touch-action:none; width:110px; border:3px solid var(--line); background:var(--frost); border-radius:22px; padding:8px; text-align:center; font-weight:800; font-size:17px}
.ingr.used{opacity:.4}
.ingr svg{width:70px; height:70px; display:block; margin:0 auto}
.ghost{position:fixed; z-index:100; pointer-events:none; transform:translate(-50%,-50%) rotate(-8deg) scale(1.08); opacity:.95}
.bowlwrap{position:relative; width:min(360px,90vw,36vh)}
.bowlwrap svg{width:100%; display:block}
.bowlwrap.hot svg{filter:drop-shadow(0 0 14px var(--lemon))}
.shake{animation:shake .25s infinite}
@keyframes shake{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
.spoon{position:absolute; left:50%; top:4%; font-size:56px; transform-origin:50% 80%; animation:stir .45s linear infinite}
@keyframes stir{0%{transform:translateX(-60%) rotate(-25deg)}50%{transform:translateX(-30%) rotate(25deg)}100%{transform:translateX(-60%) rotate(-25deg)}}
.twinkle{animation:tw 1.4s infinite}
@keyframes tw{50%{opacity:.15}}
.drop{position:absolute; left:50%; top:-30px; width:34px; height:44px; margin-left:-17px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; animation:fall .55s ease-in forwards}
@keyframes fall{to{top:28%; transform:scale(.6)}}
.flavors{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:8px}
.chip{border:3px solid var(--line); background:var(--frost); border-radius:999px; padding:4px 14px; font-weight:800; font-size:17px}
.chip.on{border-color:var(--gum); background:var(--frost2)}

.pots{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:6px 0 4px}
.pot{border:none; background:none; width:78px; display:flex; flex-direction:column; align-items:center; font-weight:800; font-size:15px; padding:0}
.pot i{display:block; width:62px; height:66px; border-radius:12px 12px 22px 22px; border:4px solid rgba(0,0,0,.12); position:relative; box-shadow:inset -8px -6px 0 rgba(0,0,0,.1)}
.pot i::before{content:""; position:absolute; left:-6px; right:-6px; top:-12px; height:14px; border-radius:8px; background:#fff; border:3px solid rgba(0,0,0,.1)}
.pot:active i{transform:rotate(-20deg)}
.mixmsg{font-size:24px; font-weight:800; text-align:center; min-height:34px}

.molds{display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:10px; width:100%}
.mold{border:3px solid var(--line); background:var(--frost); border-radius:22px; padding:6px; font-weight:800; font-size:16px}
.mold svg{width:64px; height:64px; display:block; margin:0 auto}
.mold.on{border-color:var(--gum); background:var(--frost2)}
.press{animation:press .6s}
@keyframes press{0%{transform:translateY(-40px) scale(1.1)}50%{transform:translateY(6px) scaleY(.85)}100%{transform:none}}
.popin{animation:popin .5s cubic-bezier(.3,1.6,.6,1)}
@keyframes popin{from{transform:scale(.3); opacity:0}}

.candybox{width:min(340px,82vw,38vh); aspect-ratio:1; position:relative}
.candybox svg{width:100%; height:100%; display:block; overflow:visible}
.candybox.tap{cursor:crosshair; touch-action:manipulation}
.tools{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.tool{border:3px solid var(--line); background:var(--frost); border-radius:20px; padding:4px 10px 6px; font-weight:800; font-size:15px; width:96px}
.tool svg{width:44px; height:44px; display:block; margin:0 auto}
.tool.on{border-color:var(--gum); background:var(--frost2); transform:translateY(-3px)}
.price{display:inline-block; background:var(--lemon); color:#5a3b00; font-weight:800; border-radius:999px; padding:2px 12px}