/* Backstube v207 – true crayon-paper recipe artwork and one unified action-button system.
   Preserves Moritz Maus + Igor Igel and all existing game logic / touch targets. */

/* Recipe selection: real illustrated parchment cards with large, clear food pictures. */
#app .zw165-choose .zw160-recipe-grid{
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,minmax(0,1fr))!important;
 align-items:center!important;
 justify-items:center!important;
 gap:clamp(9px,2.4vw,18px)!important;
 padding:clamp(6px,2vw,12px)!important;
 overflow:visible!important;
}
#app .zw165-choose .zw160-recipe,
#app .zw165-choose .zw160-recipe:nth-child(even),
#app .zw165-choose .zw160-recipe:nth-child(3n){
 display:grid!important;place-items:center!important;
 width:min(100%,clamp(98px,27vw,155px))!important;
 height:auto!important;
 aspect-ratio:376 / 426!important;
 max-height:96%!important;
 min-width:86px!important;min-height:98px!important;
 background:none!important;
 border:0!important;border-radius:28px!important;
 box-shadow:none!important;padding:0!important;margin:0!important;
 filter:drop-shadow(0 4px 3px #7e5a4172)!important;
 overflow:visible!important;
 transform-origin:50% 75%!important;
 transition:transform .18s cubic-bezier(.18,.9,.3,1),filter .18s ease!important;
 touch-action:manipulation!important;
}
#app .zw165-choose .zw160-recipe::after{content:none!important}
#app .zw165-choose .zw160-recipe img{
 width:100%!important;height:100%!important;
 display:block!important;object-fit:contain!important;
 transform:none!important;
 filter:saturate(1.11) contrast(1.025)!important;
 pointer-events:none!important;
}
#app .zw165-choose .zw160-recipe:active{
 transform:translateY(3px) scale(.94)!important;
 filter:drop-shadow(0 2px 2px #6f4d3873) drop-shadow(0 0 6px #fff1ba)!important;
}
#app .zw165-choose .zw160-recipe:focus-visible{
 outline:4px dashed #f6c766!important;outline-offset:3px!important;
}
/* The food picture is fully handdrawn, and does not overlap the other buttons. */
#app .zw165-choose .zw160-choose-friends{
 pointer-events:none!important;
}

/* One shared illustrated, rounded elongated primary action button.
   The full painted WebP is a single asset; no overlaid circle/label conflicts. */
#app .zw165-mix #zw160Whisk,
#app .zw165-bake #zw160Bake,
#app .zw165-win #zw160Next{
 display:block!important;flex:0 0 auto!important;
 position:relative!important;
 width:clamp(184px,51vw,248px)!important;
 height:clamp(69px,11.7dvh,89px)!important;
 min-width:174px!important;min-height:68px!important;
 max-width:95%!important;
 border:0!important;border-radius:999px!important;
 padding:0!important;margin:0 auto!important;
 aspect-ratio:650 / 234!important;
 background-repeat:no-repeat!important;
 background-position:center!important;
 background-size:100% 100%!important;
 box-shadow:none!important;
 filter:drop-shadow(0 4px 3px #60433169)!important;
 isolation:isolate!important;
 overflow:visible!important;
 outline-offset:3px!important;
 transition:transform .16s cubic-bezier(.16,.84,.26,1),filter .16s ease!important;
 touch-action:manipulation!important;
}
#app .zw165-mix #zw160Whisk{background-image:url('/bakery-v207/button-mix.webp')!important}
#app .zw165-bake #zw160Bake{background-image:url('/bakery-v207/button-bake.webp')!important}
#app .zw165-win #zw160Next{background-image:url('/bakery-v207/button-next.webp')!important}
#app .zw165-mix #zw160Whisk img,
#app .zw165-bake #zw160Bake img,
#app .zw165-win #zw160Next img{
 opacity:0!important;
 width:100%!important;height:100%!important;
 pointer-events:none!important;
}
#app .zw165-mix #zw160Whisk::after,
#app .zw165-bake #zw160Bake::after,
#app .zw165-win #zw160Next::after{content:none!important}
#app .zw165-mix #zw160Whisk:active,
#app .zw165-bake #zw160Bake:active,
#app .zw165-win #zw160Next:active{
 animation:none!important;
 transform:translateY(2px) scale(.95)!important;
 filter:drop-shadow(0 1px 2px #61462f7a) brightness(1.04)!important;
}
#app .zw165-mix #zw160Whisk:focus-visible,
#app .zw165-bake #zw160Bake:focus-visible,
#app .zw165-win #zw160Next:focus-visible{
 outline:4px dashed #fff1b6!important;
}
/* Align primary button directly under its readable progress row,
   never against the absolute bottom edge of the device. */
#app .zw165-mix .zw160-mix-bottom{
 display:flex!important;flex-direction:column!important;
 align-items:center!important;justify-content:center!important;
 gap:clamp(8px,1.6dvh,13px)!important;
 padding:6px 10px max(10px,env(safe-area-inset-bottom))!important;
 min-height:0!important;
}
#app .zw165-mix .zw160-stir-progress{
 flex:0 0 auto!important;
 height:23px!important;
 gap:clamp(12px,4vw,21px)!important;
}
#app .zw165-mix .zw160-stir-progress span{
 width:21px!important;height:21px!important;
 border-width:3px!important;
}
#app .zw165-bake .zw160-bake-bottom{
 display:flex!important;flex-direction:column!important;
 align-items:center!important;justify-content:center!important;
 gap:clamp(8px,1.4dvh,12px)!important;
 padding:6px 10px max(10px,env(safe-area-inset-bottom))!important;
 min-height:0!important;
}
#app .zw165-bake .zw166-bake-stars{
 display:flex!important;align-items:center!important;justify-content:center!important;
 gap:clamp(8px,3vw,17px)!important;
 width:auto!important;height:30px!important;min-height:26px!important;
}
#app .zw165-bake .zw166-bake-stars img{
 max-height:30px!important;object-fit:contain!important;
}
#app .zw165-win .zw160-win-bottom{
 display:flex!important;align-items:center!important;justify-content:center!important;
 padding:8px 8px max(12px,env(safe-area-inset-bottom))!important;
}
#app .zw165-win .zw160-result-dish{
 filter:saturate(1.10) contrast(1.03) drop-shadow(0 5px 4px #76513d5b)!important;
}
@media(orientation:landscape){
 #app .zw165-choose .zw160-recipe-grid{
  gap:clamp(4px,1.4vw,11px)!important;
  padding:2px 6px!important;
 }
 #app .zw165-choose .zw160-recipe,
 #app .zw165-choose .zw160-recipe:nth-child(even),
 #app .zw165-choose .zw160-recipe:nth-child(3n){
  width:min(100%,clamp(75px,23dvh,126px))!important;
  min-width:68px!important;min-height:76px!important;
  max-height:98%!important;
 }
 #app .zw165-mix #zw160Whisk,
 #app .zw165-bake #zw160Bake,
 #app .zw165-win #zw160Next{
  width:clamp(172px,23vw,225px)!important;
  height:clamp(64px,19.5dvh,83px)!important;
  min-height:62px!important;min-width:166px!important;
 }
 #app .zw165-mix .zw160-mix-bottom,
 #app .zw165-bake .zw160-bake-bottom{gap:5px!important;padding:2px 4px 5px!important}
 #app .zw165-mix .zw160-stir-progress span{width:17px!important;height:17px!important}
}
@media(orientation:portrait) and (max-width:350px){
 #app .zw165-choose .zw160-recipe{
  width:min(100%,clamp(86px,27vw,105px))!important;
  min-width:82px!important;min-height:94px!important;
 }
 #app .zw165-mix #zw160Whisk,
 #app .zw165-bake #zw160Bake,
 #app .zw165-win #zw160Next{
  width:185px!important;height:70px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #app .zw165-mix #zw160Whisk,
 #app .zw165-bake #zw160Bake,
 #app .zw165-win #zw160Next{animation:none!important;transition:none!important}
}
/* Finishing alignment pass: the six picture cards form one centered 3×2 group,
   instead of occupying the upper/lower edges of a stretched grid. */
#app .zw165-choose .zw160-recipe-grid{
 grid-template-rows:repeat(2,max-content)!important;
 align-content:center!important;
 row-gap:clamp(10px,2.4dvh,20px)!important;
}
#app .zw165-mix .zw160-mix-bottom,
#app .zw165-bake .zw160-bake-bottom,
#app .zw165-win .zw160-win-bottom{
 transform:translateY(-16px)!important;
}
/* Limit the finished plate to the available space in landscape. */
@media(orientation:landscape){
 #app .zw165-win .zw160-win-scene .zw162-serve-button{
  width:160px!important;height:145px!important;
  left:50%!important;bottom:6%!important;
  transform:translateX(-50%)!important;
 }
 #app .zw165-win .zw160-win-scene .zw162-serve-button .zw160-result-dish{
  width:100%!important;height:100%!important;
  max-height:100%!important;max-width:100%!important;
  object-fit:contain!important;left:auto!important;bottom:auto!important;
 }

 #app .zw165-choose .zw160-recipe-grid{
  grid-template-rows:repeat(2,max-content)!important;
  row-gap:clamp(4px,1.7dvh,9px)!important;
  align-content:center!important;
 }
 #app .zw165-win .zw160-result-dish{
  width:43%!important;height:61%!important;
  left:28.5%!important;bottom:17%!important;
  object-fit:contain!important;
 }
 #app .zw165-win #zw160Next{
  translate:-27px 17px!important;
 }
 #app .zw165-mix .zw160-mix-bottom,
 #app .zw165-bake .zw160-bake-bottom{
  transform:translateY(-13px)!important;
 }
 #app .zw165-win .zw160-win-bottom{
  transform:none!important;
 }
}

/* Landscape victory fix: the dish belongs on the table, never below the screen. */
@media(orientation:landscape){
 #app .zw165-win .zw160-win-scene .zw162-serve-button{
  position:absolute!important;
  left:calc(50% - 102px)!important;
  right:auto!important;
  top:auto!important;
  bottom:19%!important;
  width:204px!important;
  height:198px!important;
  max-height:72%!important;
  transform:none!important;
 }
 #app .zw165-win .zw160-win-scene .zw162-serve-button .zw160-result-dish{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
 }
}

/* v207 final: prevent landscape victory art from covering either character. */
@media (orientation:landscape){
 #app .zw165-win .zw160-win-scene .zw162-serve-button{
  overflow:hidden!important;
  border-radius:50%!important;
 }
 #app .zw165-win .zw160-win-scene .zw162-serve-button .zw160-result-dish{
  width:92%!important;height:92%!important;
  max-width:92%!important;max-height:92%!important;
  object-fit:contain!important;
  animation:none!important;
 }
}