/* Backstube 2.42. All moving pictures are actual multi-frame WebP images
   made from the original hand-colored pencil art (no Canvas, no SVG). */

/* True 22-frame light switch. Unlike the old opacity-only switch, each
   intermediate physical oven painting is rendered, and remains pixel-aligned. */
#app .zw170-launch.zw222-bakery-entry #zw222OvenLight > img.zw242-preview-switch{
 display:block!important;position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;
 max-width:none!important;max-height:none!important;
 object-fit:contain!important;object-position:center!important;
 margin:0!important;padding:0!important;
 opacity:1!important;visibility:visible!important;
 z-index:18!important;pointer-events:none!important;
 filter:none!important;transform:none!important;
 animation:none!important;transition:none!important;
}
#app .zw170-launch.zw222-bakery-entry #zw222OvenLight.zw242-light-changing .zw222-sunburst{
 opacity:0!important;animation:none!important;
}
#app .zw170-launch.zw222-bakery-entry .zw226-friend-button.zw226-celebrating > img.zw226-friend-cheer{
 animation:zw242-joy-bob 1.65s ease-in-out 1!important;
}
@keyframes zw242-joy-bob{
 0%,100%{transform:translate3d(0,0,0) rotate(0)}
 16%{transform:translate3d(-3px,-6px,0) rotate(-3deg)}
 30%{transform:translate3d(0,-12px,0) rotate(3deg)}
 50%{transform:translate3d(3px,-4px,0) rotate(2deg)}
 75%{transform:translate3d(0,-9px,0) rotate(-2deg)}
}
/* The oven genuinely cools after baking; smoke stops BEFORE the food leaves. */
#app .zw209-bake .zw209-oven-work.zw242-cooling{
 filter:drop-shadow(0 5px 3px rgba(89,58,33,.23))!important;
}
#app .zw209-bake .zw209-oven-work.zw242-cooling .zw209-oven{
 animation:none!important;
}
#app .zw209-bake .zw209-oven-work.zw242-cooling .zw209-oven-smoke{
 opacity:0!important;box-shadow:none!important;animation:none!important;
 transition:opacity .3s linear!important;
}
#app .zw209-bake .zw209-oven-work > img.zw242-bake-oven-off{
 position:absolute!important;inset:0!important;
 display:block!important;
 width:100%!important;height:100%!important;
 max-width:none!important;max-height:none!important;
 z-index:4!important;opacity:1!important;
 object-fit:contain!important;object-position:center!important;
 pointer-events:none!important;
 margin:0!important;padding:0!important;filter:none!important;
 animation:none!important;transform:none!important;
}
#app .zw209-bake .zw209-oven-work.zw242-food-leaving .zw209-oven-food{
 opacity:0!important;transition:opacity .12s ease-out!important;
}
img.zw242-food-exit{
 position:fixed!important;z-index:99996!important;
 width:clamp(88px,25vw,130px)!important;height:clamp(88px,25vw,130px)!important;
 object-fit:contain!important;
 pointer-events:none!important;touch-action:none!important;
 filter:drop-shadow(0 5px 4px rgba(83,54,29,.33))!important;
 transform:translate(-50%,-50%);will-change:transform,opacity!important;
}
/* Hand-painted 24-frame eating animation, visible above the default static
   character. Character sprite and food each have their own 24-frame cycle. */
#app .zw209 .zw209-friend > img.zw242-chew-frames{
 display:block!important;position:absolute!important;
 width:122%!important;height:122%!important;
 max-width:none!important;max-height:none!important;
 left:-11%!important;top:-8%!important;
 object-fit:contain!important;object-position:center center!important;
 opacity:0!important;visibility:hidden!important;
 pointer-events:none!important;z-index:12!important;
 filter:drop-shadow(0 2px 2px rgba(86,49,29,.16))!important;
 animation:none!important;transform:none!important;
}
#app .zw209 .zw209-friend.zw212-chewing > img.zw242-chew-frames{
 opacity:1!important;visibility:visible!important;
}
#app .zw209 .zw209-friend.zw212-chewing > img.zw212-base,
#app .zw209 .zw209-friend.zw212-chewing > img.zw212-cheer{
 opacity:0!important;
}
#app .zw209 .zw209-friend.zw212-delighted:not(.zw212-chewing) > img.zw242-chew-frames{
 opacity:0!important;visibility:hidden!important;
}
#app .zw209 .zw209-friend.zw212-delighted:not(.zw212-chewing) > img.zw212-cheer{
 opacity:1!important;
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw209-friend > img.zw242-chew-frames{
  display:none!important;
 }
 #app .zw209 .zw209-friend.zw212-chewing > img.zw212-base{
  opacity:1!important;
 }
 #app .zw170-launch.zw222-bakery-entry .zw226-friend-button.zw226-celebrating > img.zw226-friend-cheer{
  animation:none!important;
 }
}

/* v243 real watercolor-pencil plate, replaces the synthetic CSS disk. */
#app .zw209 .zw209-serve-work > img.zw209-serving-plate.zw243-painted-plate{
 position:absolute!important;
 inset:14% 2% -3% 2%!important;
 display:block!important;
 width:96%!important;height:90%!important;
 max-width:none!important;max-height:none!important;
 object-fit:contain!important;object-position:center center!important;
 margin:0!important;padding:0!important;
 background:transparent!important;background-image:none!important;
 border:0!important;border-radius:0!important;
 outline:0!important;box-shadow:none!important;
 opacity:1!important;transform:none!important;
 filter:drop-shadow(0 4px 4px rgba(100,63,40,.30))!important;
 pointer-events:none!important;z-index:2!important;
}
#app .zw209 .zw209-serve-work .zw209-serving > img.zw243-serving-meal{
 width:100%!important;height:100%!important;
 object-fit:contain!important;
 margin:0!important;
 filter:drop-shadow(0 2px 2px rgba(98,54,30,.12))!important;
}
/* Disable the old blanket scale-down: a proper illustration with two
   remaining pastries is now drawn after the first feeding. */
#app .zw209 .zw212-portions-1 .zw209-serving img.zw243-serving-meal{
 transform:scale(1)!important;opacity:1!important;
}
img.zw243-exit-plate{
 position:fixed!important;
 width:clamp(125px,36vw,166px)!important;
 height:clamp(125px,36vw,166px)!important;
 z-index:99995!important;
 object-fit:contain!important;
 pointer-events:none!important;touch-action:none!important;
 filter:drop-shadow(0 5px 4px rgba(95,60,35,.33))!important;
 transform:translate(-50%,-50%);will-change:transform,opacity!important;
}
#app .zw209 .zw209-friend.zw243-final-hop{
 animation:zw243-both-friends-jump .91s ease-in-out 1!important;
}
@keyframes zw243-both-friends-jump{
 0%,100%{transform:translateY(0) rotate(0) scale(1)}
 20%{transform:translateY(-11px) rotate(-4deg) scale(1.06)}
 43%{transform:translateY(1px) rotate(3deg) scale(.98)}
 70%{transform:translateY(-8px) rotate(-2deg) scale(1.04)}
 89%{transform:translateY(0) rotate(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw209-friend.zw243-final-hop{
  animation:none!important;
 }
}


/* v244: authentic 18-frame pencil illustration of a hinged oven door.
   Composites ONLY the original painted oven and door; no Canvas/SVG. */
#app .zw209-bake .zw209-oven-work > img.zw244-oven-door-open{
 position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;
 max-width:none!important;max-height:none!important;
 margin:0!important;padding:0!important;
 display:block!important;
 object-fit:contain!important;object-position:center!important;
 background:none!important;
 border:0!important;
 opacity:1!important;visibility:visible!important;
 transform:none!important;animation:none!important;
 pointer-events:none!important;
 z-index:7!important;
 filter:none!important;
}
#app .zw209 .zw209-serve-work .zw209-serving > img.zw244-empty-plate{
 display:block!important;opacity:1!important;
 object-fit:contain!important;transform:none!important;
}
/* When the last two portions are eaten, only fine hand-painted biscuit
   crumbs remain; no falsely full dish or CSS circle remains. */
#app .zw209 .zw212-portions-2 .zw209-serving{
 pointer-events:none!important;touch-action:none!important;
}
@media(prefers-reduced-motion:reduce){
 #app .zw209-bake .zw209-oven-work > img.zw244-oven-door-open{
  display:none!important;
 }
}

/* Backstube 3.0: responsive, real touch control using existing pencil art.
   Only motion and feedback effects; no Canvas/SVG/vector replacements. */
#app .zw209-mix-work.zw300-stirring .zw209-swirl-ring {
  opacity: .78 !important;
  filter: drop-shadow(0 1px 2px rgba(130,78,37,.2));
}
#app .zw209 .zw209-friend.zw300-feed-target {
  transform: translate3d(0,-5px,0) scale(1.045) !important;
  filter: drop-shadow(0 6px 4px rgba(122,79,33,.3)) !important;
  transition: transform .14s ease-out, filter .14s ease-out !important;
}
#app .zw209 .zw209-serving.zw300-feed-miss {
  animation: zw300-retry .37s ease-out 1 !important;
}
@keyframes zw300-retry {
  0%,100% { transform:translate3d(0,0,0) rotate(0); }
  30% { transform:translate3d(-5px,0,0) rotate(-5deg); }
  65% { transform:translate3d(5px,0,0) rotate(5deg); }
}
@media(prefers-reduced-motion:reduce){
  #app .zw209 .zw209-serving.zw300-feed-miss { animation:none!important; }
  #app .zw209 .zw209-friend.zw300-feed-target { transition:none!important; }
}

/* Backstube 3.0 character update v301: real moving painted WebP frames.
   The actual poses are baked into raster assets, not Canvas/SVG or CSS shapes. */
#app .zw170-launch.zw222-bakery-entry
 .zw226-friend-button.zw226-celebrating > img.zw226-friend-cheer {
  animation:zw242-joy-bob 1.85s ease-in-out 1!important;
}
#app .zw209 .zw209-friend > img.zw212-base {
  object-fit:contain!important;
  object-position:center center!important;
}
@media(prefers-reduced-motion:reduce){
  #app .zw209 .zw209-friend > img.zw212-base {
    animation:none!important;
  }
}

/* 3.0 / v302: real 96-frame pose transitions using approved crayon pictures.
   Only CSS for correct stacking; all acting lives in animated raster WebP. */
#app .zw209 .zw209-friend.zw212-chewing > img.zw242-chew-frames{
  visibility:visible!important;opacity:1!important;z-index:30!important;
  object-fit:contain!important;object-position:center!important;
}
#app .zw209 .zw209-friend.zw212-chewing > img.zw212-base,
#app .zw209 .zw209-friend.zw212-chewing > img.zw212-cheer{
  visibility:hidden!important;opacity:0!important;
}
#app .zw209 .zw209-friend.zw212-delighted > img.zw212-cheer{
  visibility:visible!important;z-index:25!important;
}
#app .zw170-launch.zw222-bakery-entry .zw226-friend-button.zw226-celebrating > img.zw226-friend-cheer{
  opacity:1!important;visibility:visible!important;
}
/* The food must reach the mouth, not hide the animated eyes and cheeks. */
img.zw212-bite-flight {
  width:clamp(48px,12vw,64px)!important;
  height:clamp(48px,12vw,64px)!important;
}

/* RASTER-ONLY EATING FRAMES: the food piece cannot cover the eyes/cheeks.
   The facial animation comes from 24 separate painted WebP images controlled
   by the JS game clock. No CSS, SVG or Canvas drawing is created. */
body > img.zw212-bite-flight.zw304-eat-piece {
  width:clamp(23px,6vw,31px)!important;
  height:clamp(23px,6vw,31px)!important;
  pointer-events:none!important;
}
#app .zw209 .zw209-friend.zw212-chewing > img.zw242-chew-frames {
  opacity:1!important;visibility:visible!important;
  width:122%!important;height:122%!important;
  z-index:30!important;
  transform-origin:52% 68%!important;
  animation:zw304-painted-jaw-chew .34s ease-in-out infinite alternate!important;
}
@media(prefers-reduced-motion:reduce){
  #app .zw209 .zw209-friend.zw212-chewing > img.zw242-chew-frames {animation:none!important;}
}

/* v305: actual hand-drawn character art for ten consecutive eating actions.
   Every pose is a transparent WebP; no SVG, Canvas or CSS-drawn artwork. */
#app .zw209 .zw209-friend.zw212-chewing > img.zw242-chew-frames{
  animation:none!important;
  transform:none!important;
  opacity:1!important;visibility:visible!important;
  width:122%!important;height:122%!important;
  object-fit:contain!important;object-position:center!important;
  z-index:31!important;
}
#app .zw209 .zw209-friend.zw212-chewing > img.zw212-base,
#app .zw209 .zw209-friend.zw212-chewing > img.zw212-cheer{
  opacity:0!important;visibility:hidden!important;
}

/* v306 persistent after-feeding rewards: drawn artwork, not CSS illustrations. */
#app .zw209 .zw209-friend.zw306-reward-active > img.zw306-reward-art {
  display:block!important;position:absolute!important;
  width:122%!important;height:122%!important;
  left:-11%!important;top:-8%!important;
  max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;
  visibility:visible!important;opacity:1!important;
  z-index:48!important;pointer-events:none!important;
  filter:drop-shadow(0 2px 2px rgba(86,49,29,.13))!important;
  transform:none!important;animation:none!important;
}
#app .zw209 .zw209-friend.zw306-reward-active > img.zw212-base,
#app .zw209 .zw209-friend.zw306-reward-active > img.zw212-cheer,
#app .zw209 .zw209-friend.zw306-reward-active > img.zw242-chew-frames {
  opacity:0!important;visibility:hidden!important;
}

/* Backstube 3.1. ZERO geometric distortion on characters: no scale, rotate,
   squish, CSS deformation or animation. Art moves ONLY by switching pre-
   rendered transparent WebP frames with their original pencil outlines. */
#app .zw209 .zw209-friend.zw212-chewing,
#app .zw209 .zw209-friend.zw306-reward-active,
#app .zw209 .zw209-friend.zw306-reward-active.zw243-final-hop,
#app .zw209 .zw209-friend.zw306-reward-active.zw209-fed {
  animation:none!important;
  transform:none!important;
}
#app .zw209 .zw209-friend.zw212-chewing > img.zw242-chew-frames,
#app .zw209 .zw209-friend.zw306-reward-active > img.zw306-reward-art {
  display:block!important;
  animation:none!important;
  transform:none!important;
  filter:none!important;
  object-fit:contain!important;
  object-position:center!important;
  image-rendering:auto!important;
  opacity:1!important;
  visibility:visible!important;
}
#app .zw209 .zw209-friend.zw212-chewing > img.zw212-base,
#app .zw209 .zw209-friend.zw212-chewing > img.zw212-cheer,
#app .zw209 .zw209-friend.zw306-reward-active > img.zw212-base,
#app .zw209 .zw209-friend.zw306-reward-active > img.zw212-cheer,
#app .zw209 .zw209-friend.zw306-reward-active > img.zw242-chew-frames {
  opacity:0!important;visibility:hidden!important;animation:none!important;
  transform:none!important;
}

/* Intro characters change ONLY between raster-painted frames. */
#app .zw170-launch.zw222-bakery-entry .zw226-friend-button.zw226-celebrating,
#app .zw170-launch.zw222-bakery-entry .zw226-friend-button.zw226-celebrating > img.zw226-friend-cheer{
  transform:none!important;
  animation:none!important;
}

/* v311: the meal is painted into transparent raster character frames.
   No duplicated animated food layer in front of the face. */
#app .zw209 .zw209-friend.zw212-chewing>img.zw242-chew-frames{
  animation:none!important; transform:none!important;
  visibility:visible!important; opacity:1!important;
}