/* V0.16 연출 시스템: 따뜻한 포차의 공기, 조리 증기, 불빛과 즉각적인 조작 피드백. */
#stage[data-stall-level="1"] .sound-button{
  position:absolute;z-index:74;top:127px;right:max(288px,calc((100% - 1920px)/2 + 288px));
  width:54px;height:54px;padding:0;border:4px solid #69371f;border-radius:14px;
  background:linear-gradient(180deg,#f6d99d,#dba85f 72%,#b87538);color:#6c281b;
  box-shadow:inset 0 0 0 2px #fff0c58f,0 7px 12px #1809068f;
  display:grid;place-items:center;font-size:29px;font-weight:950;text-shadow:0 1px #fff0c5;
}
#stage[data-stall-level="1"] .sound-button:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #fff0c58f,0 4px 7px #1809068f}
#stage[data-stall-level="1"] .sound-button[aria-pressed="false"]{filter:saturate(.45);color:#7a6655}
#stage[data-stall-level="1"] .sound-button[aria-pressed="false"] span::after{content:"";position:absolute;width:30px;height:4px;border-radius:4px;background:#8e3325;transform:rotate(-42deg)}
#stage[data-stall-level="1"] .sound-button span{position:relative;display:grid;place-items:center;width:100%;height:100%}

.atmosphere-layer,.fx-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.atmosphere-layer{z-index:10;mix-blend-mode:screen}
.fx-layer{z-index:210}
.atmosphere-layer::before{content:"";position:absolute;left:210px;right:30px;top:108px;height:620px;background:radial-gradient(ellipse at 50% 16%,#ffbd6330,transparent 67%);animation:warmBreath 4.8s ease-in-out infinite}
.atmosphere-layer>i{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffd998;box-shadow:0 0 8px #ffb34e;opacity:.12;animation:dustFloat 7s ease-in-out infinite}
.atmosphere-layer>i:nth-child(1){left:28%;top:29%;animation-delay:-1.2s}.atmosphere-layer>i:nth-child(2){left:58%;top:36%;animation-delay:-4.3s}.atmosphere-layer>i:nth-child(3){left:78%;top:24%;animation-delay:-2.7s}

.appliance .cook-fx{position:absolute;z-index:8;inset:0;overflow:visible;pointer-events:none}
.appliance .cook-fx i{position:absolute;left:50%;top:18%;width:18px;height:48px;border-radius:50%;opacity:0;background:linear-gradient(180deg,transparent,#fff8dfb8 45%,transparent);filter:blur(5px)}
.appliance .cook-fx i:nth-child(2){left:40%;animation-delay:-.6s}.appliance .cook-fx i:nth-child(3){left:61%;animation-delay:-1.15s}
.appliance.pot:is(.cooking,.ready) .cook-fx i,.appliance.oden:is(.cooking,.ready) .cook-fx i{opacity:.54;animation:steamRise 1.8s ease-out infinite}
.appliance.oden:is(.cooking,.ready) .cook-fx i{top:25%;opacity:.38}
.appliance.grill.cooking .cook-fx::before,.appliance.grill.ready .cook-fx::before{content:"";position:absolute;left:17%;right:17%;top:34%;height:38%;background:repeating-linear-gradient(91deg,transparent 0 16px,#ffbe6630 18px 21px,transparent 23px 37px);filter:blur(5px);animation:heatShimmer .7s ease-in-out infinite alternate}
.appliance.grill.ready .cook-fx::after{content:"✦";position:absolute;right:16%;top:23%;color:#ffe9a4;font-size:26px;text-shadow:0 0 9px #ff802d;animation:sparkBlink .75s steps(2) infinite}
.appliance.ready .cook-fx{filter:drop-shadow(0 0 12px #ffd35b)}
.appliance.burnt .cook-fx::before{content:"";position:absolute;left:43%;top:19%;width:38px;height:70px;border-radius:50%;background:linear-gradient(180deg,transparent,#332824aa 52%,transparent);filter:blur(9px);animation:smokeRise 2.1s ease-out infinite}

.boreumi-sprite.action::after{content:"";position:absolute;left:50%;bottom:34%;width:86px;height:32px;border-radius:50%;background:radial-gradient(ellipse,#ffe19a5c,transparent 70%);filter:blur(6px);animation:handGlow .52s ease-out}
.guest-slot.arriving .guest-art{animation:guestPop .42s cubic-bezier(.2,.9,.35,1.25)}
.guest-slot.satisfied .bubble{animation:orderHappy .46s ease}

.fx-particle{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;border-radius:50%;background:#ffe994;box-shadow:0 0 12px #ff8e35;transform:translate(-50%,-50%);animation:fxBurst .82s ease-out forwards}
.fx-particle.serve{background:#ffd44e;box-shadow:0 0 12px #fff09b}.fx-particle.burn{background:#663025;box-shadow:0 0 10px #e85a35}.fx-particle.drop{background:#fff0c2;box-shadow:0 0 10px #ffb862}
.float-feedback{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:7px 13px;border:3px solid #6f321f;border-radius:999px;background:#fff0c8;color:#6b261b;font-size:21px;font-weight:950;text-shadow:0 1px #fff;box-shadow:0 6px 13px #16070499;white-space:nowrap;animation:feedbackUp 1.05s ease-out forwards}
.float-feedback.sale{color:#8a5010;background:#fff3b8}.float-feedback.warning{color:#81241d;background:#ffd1b0}

#stage.paused-fx .atmosphere-layer,#stage.paused-fx .cook-fx,#stage.paused-fx .fx-layer{animation-play-state:paused}
#stage.paused-fx .atmosphere-layer::before,#stage.paused-fx .atmosphere-layer *,#stage.paused-fx .cook-fx::before,#stage.paused-fx .cook-fx::after,#stage.paused-fx .cook-fx *,#stage.paused-fx .fx-layer *{animation-play-state:paused!important}

@keyframes warmBreath{50%{opacity:.72;filter:brightness(1.12)}}
@keyframes dustFloat{0%,100%{transform:translate(0,18px);opacity:.07}50%{transform:translate(18px,-30px);opacity:.27}}
@keyframes steamRise{0%{transform:translate(-50%,20px) scale(.7);opacity:0}28%{opacity:.58}100%{transform:translate(calc(-50% + 11px),-58px) scale(1.55);opacity:0}}
@keyframes heatShimmer{to{transform:translateY(-7px) skewX(-3deg);opacity:.55}}
@keyframes sparkBlink{50%{transform:translate(4px,-5px) rotate(20deg);opacity:.35}}
@keyframes smokeRise{0%{transform:translateY(16px) scale(.7);opacity:0}32%{opacity:.7}100%{transform:translate(15px,-70px) scale(1.45);opacity:0}}
@keyframes handGlow{to{transform:scale(1.5);opacity:0}}
@keyframes guestPop{0%{transform:translateY(18px) scale(.88);opacity:.2}100%{transform:none;opacity:1}}
@keyframes orderHappy{50%{transform:translateX(-50%) translateY(-7px) scale(1.04)}}
@keyframes fxBurst{to{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.15);opacity:0}}
@keyframes feedbackUp{0%{transform:translate(-50%,-35%) scale(.82);opacity:0}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-145%);opacity:0}}

@media(prefers-reduced-motion:reduce){.atmosphere-layer::before,.atmosphere-layer>i,.appliance .cook-fx i,.appliance .cook-fx::before,.appliance .cook-fx::after,.boreumi-sprite.action::after,.guest-slot.arriving .guest-art,.guest-slot.satisfied .bubble{animation:none!important}.fx-particle,.float-feedback{animation-duration:.01ms!important}}
