html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#d9b17c;font-family:system-ui,sans-serif}#game{--ma-game-style:rainbow-factory;position:relative;width:100%;height:100dvh;overflow:hidden;isolation:isolate}#game *{box-sizing:border-box}#game button,#game a{-webkit-tap-highlight-color:transparent}.corner-button{position:absolute;z-index:20;display:block;cursor:pointer}.corner-button:active{transform:scale(.94)}#scene{position:absolute;inset:0;z-index:-1;background:#d9b17c}#workspace{position:absolute;inset:0}#stage{position:absolute;transform-origin:top left}#stage>img,#liquid-glow,#liquid,#sample-glow,#sample,#streams,#taps{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}#liquid,#sample{transition:filter 550ms ease,transform 550ms ease,opacity 500ms ease}#liquid{opacity:0}#liquid.present{opacity:1}#liquid-glow.completed,#sample-glow.completed{animation:kitchen-completion-glow 850ms ease-in-out both}#streams{overflow:visible}.pour{opacity:0;stroke-dasharray:600;stroke-dashoffset:600;transition:opacity 150ms ease;fill:none;stroke-linecap:round}.pour.active{opacity:1;animation:rf-pour 650ms ease-out both}.tap{position:absolute;pointer-events:auto;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;touch-action:manipulation}.tap:disabled{cursor:default}.tap.selected{box-shadow:0 0 0 4px #fff9b0,0 0 25px #ffd36b}.tap:active{background:#ffffff30}#bowl-feedback{position:absolute;pointer-events:none;overflow:hidden;border-radius:40% 40% 45% 45%}#bowl-feedback>svg{width:100%;height:100%;overflow:visible}.has-brand-finale #taps,.has-brand-finale #streams,.has-brand-finale #bowl-feedback{visibility:hidden}@keyframes rf-pour{0%{stroke-dashoffset:600;opacity:0}20%{opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}@media(prefers-reduced-motion:reduce){#liquid,#sample{transition:filter 200ms ease,opacity 200ms ease}.pour.active{animation:none;stroke-dashoffset:0;opacity:1}}.celebration-screen{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate}.celebration-screen[hidden]{display:none}.celebration-content{position:relative;min-height:0}.mascots{position:relative;z-index:1;min-height:0;pointer-events:none}.finish-actions{position:relative;z-index:2;display:flex;flex-direction:column;flex:none}.finish-button{position:relative;text-decoration:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}/* FC01 owner-requested affordance and target feedback. The hue stays on the image, glow on its wrapper. */#game .tap::before{content:"";position:absolute;inset:4%;border:var(--tap-ring,3px) solid #fff7d4;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 9px #fff8c9,0 0 20px #ffd77b,inset 0 0 6px #fff8d3}#game[data-state="playing"] .tap::before{opacity:.85;animation:rf-tap-invite 2400ms ease-in-out infinite}#game .tap.selected::before{opacity:1;animation:none;box-shadow:0 0 12px #fff,0 0 30px #ffe28c,inset 0 0 8px #fff}#game .tap:not(:disabled):hover::before{opacity:1;border-color:#fff}#sample-glow.attention{animation:rf-target-attention 900ms ease-in-out 3}@keyframes rf-tap-invite{0%,100%{opacity:.65;box-shadow:0 0 6px #fff8c9,0 0 12px #ffd77b,inset 0 0 5px #fff8d3}50%{opacity:1;box-shadow:0 0 12px #fff8c9,0 0 27px #ffd77b,inset 0 0 7px #fff8d3}}@keyframes rf-target-attention{0%,100%{filter:brightness(1) drop-shadow(0 0 0 #fff0)}50%{filter:brightness(1.06) drop-shadow(0 0 15px #fff9d3) drop-shadow(0 0 30px #ffd77b)}}@media(prefers-reduced-motion:reduce){#game[data-state="playing"] .tap::before{animation:none;opacity:.9}#sample-glow.attention{animation:none;filter:brightness(1.04) drop-shadow(0 0 14px #fff9d3) drop-shadow(0 0 22px #ffd77b)}}#sample-cue{position:absolute;border-radius:50%;border:var(--cue-border,4px) solid #fff9c9;box-shadow:0 0 14px #fff,0 0 27px #ffd56b;opacity:0;pointer-events:none}#sample-glow.attention #sample-cue{opacity:1}#scene>img{position:absolute;max-width:none;pointer-events:none;user-select:none}/* The same background node and geometry persist across gameplay and finale. */#game .tap::before{display:none}#game .tap.selected{box-shadow:none}/* Attention follows the exact sample alpha, without a second approximate ellipse. */#sample-cue{display:none}/* V5: a continuous glossy liquid ribbon and a small contact ripple, separate from success FX. */#liquid,#sample{transition:transform 550ms ease,opacity 500ms ease}#streams .pour{opacity:0;stroke-dasharray:none;stroke-dashoffset:0;transition:none;animation:none}#streams .pour.active{transform-box:view-box;animation:rf-flow 700ms ease both,rf-flow-level 550ms ease both}.jet-light{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.35;stroke-dasharray:12 19}.pour.active .jet-light{animation:rf-flow-light 450ms linear infinite}.jet-impact{opacity:0}.pour.active .jet-impact{animation:rf-contact 700ms ease both}.jet-ripple{fill:none;stroke:var(--pigment);stroke-width:2;transform-box:fill-box;transform-origin:center}.pour.active .jet-ripple{animation:rf-ripple 500ms ease-out infinite}.pour.active .ripple-two{animation-delay:180ms;stroke:#fff;stroke-width:1.5}.jet-crown{fill:none;stroke:var(--pigment);stroke-width:3;stroke-linecap:round}.jet-drop{fill:var(--pigment);opacity:.8}.pour.active .jet-drop{animation:rf-droplet 450ms ease-out infinite}.pour.active .drop-two{animation-delay:140ms}@keyframes rf-flow{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0}}@keyframes rf-flow-light{to{stroke-dashoffset:-62}}@keyframes rf-contact{0%,25%,100%{opacity:0}40%,82%{opacity:.8}}@keyframes rf-ripple{from{transform:scale(.35);opacity:.8}to{transform:scale(1.65);opacity:0}}@keyframes rf-droplet{from{transform:translateY(2px);opacity:.8}to{transform:translateY(-7px);opacity:0}}@media(prefers-reduced-motion:reduce){#streams .pour.active{animation:none;opacity:1}#streams .pour.active .jet-light,#streams .pour.active .jet-ripple,#streams .pour.active .jet-drop{animation:none}#streams .pour.active .jet-impact{animation:none;opacity:.6}.ripple-two,.jet-drop{display:none}}/* Establish the small first portion while hidden; subsequent filling raises its surface. */#liquid:not(.present){transition:opacity 500ms ease}@keyframes rf-flow-level{from{transform:scaleY(var(--from-level,1))}to{transform:scaleY(1)}}@media(prefers-reduced-motion:reduce){#liquid,#sample{transition:opacity 200ms ease}}
