/* Zählwiese Backstube v128 – Buntstiftbilder, runde große Tasten, Drag-and-drop */
#app .bakery128-page{
 position:relative!important;isolation:isolate!important;
 height:calc(100dvh - 75px)!important;min-height:0!important;
 width:100%!important;max-width:none!important;
 padding:0!important;margin:0!important;
 box-sizing:border-box!important;
 overflow:hidden!important;
 background:#b8ddcd url('/home-v126/background-portrait.webp') center/100% 100% no-repeat!important;
 -webkit-user-select:none!important;user-select:none!important;
 touch-action:manipulation!important;
}
#app .bakery128-page .bakery128-scene{
 position:absolute!important;top:5%!important;left:2%!important;
 width:96%!important;height:48%!important;display:block!important;
 object-fit:contain!important;object-position:center center!important;
 border-radius:22px!important;
 filter:drop-shadow(0 4px 4px #80593b80)!important;
 pointer-events:none!important;
}
#app .bakery128-intro .bakery128-scene{top:14%!important;height:58%!important}
#app .bakery128-select .bakery128-scene{top:25%!important;height:52%!important}
#app .bakery128-victory .bakery128-scene{top:17%!important;height:60%!important}
#app .bakery128-page button{
 cursor:pointer!important;-webkit-tap-highlight-color:transparent!important;
 touch-action:none!important;-webkit-user-select:none!important;user-select:none!important;
}
#app .bakery128-page button:focus-visible{outline:4px dashed #fff4b1!important;outline-offset:3px!important}
#app .bakery128-page .bakery128-hotspot{
 display:block!important;position:absolute!important;z-index:5!important;
 border:0!important;box-shadow:none!important;background:transparent!important;
 border-radius:50%!important;
}
#app .bakery128-page .bakery128-start{
 left:46%!important;top:53%!important;width:24%!important;height:16%!important;
}
#app .bakery128-page .bakery128-recipe{
 left:var(--x)!important;top:var(--y)!important;
 width:26%!important;height:18%!important;transform:translate(-50%,-50%)!important;
 transition:transform .15s ease!important;
}
#app .bakery128-page .bakery128-recipe:active{transform:translate(-50%,-50%) scale(.91)!important}
#app .bakery128-page .bakery128-start:active{transform:scale(.93)!important}
#app .bakery128-page .bakery128-next{
 right:3%!important;top:62%!important;width:24%!important;height:15%!important;
}
#app .bakery128-page .bakery128-task{
 position:absolute!important;z-index:5!important;
 top:52%!important;left:6%!important;width:88%!important;height:18%!important;
 padding:5px 12px!important;
 border:5px solid #b17b52!important;border-radius:25px!important;
 background:#fcdf9edf url('/bakery-v128/recipe-paper.webp') center/100% 100% no-repeat!important;
 box-shadow:0 4px 3px #79533b66!important;
 display:flex!important;flex-direction:column!important;align-items:center!important;
 gap:2px!important;overflow:hidden!important;
}
#app .bakery128-page .bakery128-examples{
 height:72%!important;max-width:100%!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 gap:4px!important;min-height:0!important;
}
#app .bakery128-page .bakery128-mini{
 height:100%!important;aspect-ratio:1!important;
 max-width:30%!important;display:grid!important;place-items:center!important;
 background:url('/picnic-v120/token-rose.webp') center/100% 100% no-repeat!important;
}
#app .bakery128-page .bakery128-mini:nth-child(3n+2){background-image:url('/picnic-v120/token-gold.webp')!important}
#app .bakery128-page img.bakery128-symbol{
 object-fit:contain!important;width:83%!important;height:83%!important;pointer-events:none!important;
 display:block!important;user-select:none!important;-webkit-user-drag:none!important;
 filter:drop-shadow(0 1px 1px #80563a48)!important;
}
#app .bakery128-page .bakery128-dots{
 height:19%!important;display:flex!important;align-items:center!important;justify-content:center!important;
 gap:7px!important;
}
#app .bakery128-page .bakery128-dots i{
 display:block!important;width:clamp(10px,2vw,18px)!important;aspect-ratio:1!important;
 border:2px solid #a47748!important;border-radius:50%!important;background:#f7f0d9!important;
}
#app .bakery128-page .bakery128-dots i.full{background:#e9b253!important}
#app .bakery128-page .bakery128-palette{
 position:absolute!important;z-index:8!important;bottom:3%!important;left:3%!important;
 width:94%!important;height:24%!important;
 display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
 gap:clamp(2px,1vw,9px)!important;align-items:center!important;justify-items:center!important;
 padding:clamp(5px,1vw,11px)!important;
 border:5px solid #bb8856!important;border-radius:30px!important;
 background:#f9e8bfed!important;
 box-shadow:0 4px 4px #7a573d6b!important;
}
#app .bakery128-page .bakery128-item{
 width:100%!important;height:auto!important;aspect-ratio:1!important;
 max-width:105px!important;min-width:0!important;min-height:0!important;
 display:grid!important;place-items:center!important;
 padding:0!important;margin:0!important;
 border:0!important;border-radius:50%!important;
 box-shadow:none!important;
 background:transparent url('/picnic-v120/token-gold.webp') center/contain no-repeat!important;
 transition:transform .12s ease!important;overflow:visible!important;
}
#app .bakery128-page .bakery128-item:nth-child(5n+2){background-image:url('/picnic-v120/token-rose.webp')!important}
#app .bakery128-page .bakery128-item:nth-child(5n+3){background-image:url('/picnic-v120/token-blue.webp')!important}
#app .bakery128-page .bakery128-item:nth-child(5n+4){background-image:url('/picnic-v120/token-mint.webp')!important}
#app .bakery128-page .bakery128-item:active{transform:scale(.9)!important}
#app .bakery128-page .bakery128-drop{
 position:absolute!important;z-index:4!important;pointer-events:none!important;
 border:4px dashed transparent!important;border-radius:40%!important;
 transition:filter .16s ease,border-color .16s ease!important;
}
#app .bakery128-page .bakery128-drop-bowl{
 top:31%!important;left:32%!important;width:37%!important;height:20%!important;
}
#app .bakery128-page .bakery128-drop-mix{
 top:30%!important;left:36%!important;width:34%!important;height:22%!important;
}
#app .bakery128-page .bakery128-drop-oven{
 top:29%!important;left:23%!important;width:54%!important;height:20%!important;
}
#app .bakery128-page .bakery128-drop.bakery128-hover{
 border-color:#ffdc69!important;filter:drop-shadow(0 0 9px #f7d553)!important;
}
#app .bakery128-page .bakery128-added{
 position:absolute!important;bottom:1%!important;width:100%!important;height:55%!important;
 display:flex!important;align-items:center!important;justify-content:center!important;gap:2px!important;
}
#app .bakery128-page .bakery128-added span{height:100%!important;max-width:30%!important;aspect-ratio:1!important;display:block!important}
#app .bakery128-page .bakery128-action{
 position:absolute!important;z-index:9!important;bottom:8%!important;left:41%!important;
 width:18%!important;height:auto!important;aspect-ratio:1!important;
 display:grid!important;place-items:center!important;
 border:0!important;border-radius:50%!important;
 background:transparent url('/picnic-v120/token-blue.webp') center/contain no-repeat!important;
 box-shadow:none!important;overflow:visible!important;
 animation:bakery128-pulse 2s ease-in-out infinite!important;
}
#app .bakery128-page .bakery128-action .bakery128-symbol{width:85%!important;height:85%!important}
#app .bakery128-page.bakery128-working .bakery128-scene{animation:bakery128-gentle .7s ease-in-out 4!important}
#app .bakery128-page .bakery128-sparkles{
 position:absolute!important;inset:0!important;pointer-events:none!important;z-index:20!important;
}
#app .bakery128-page .bakery128-sparkles i{
 position:absolute!important;display:block!important;
 width:13px!important;height:13px!important;opacity:0;
 border-radius:5px 10px 4px 11px!important;
 background:#ffd56c!important;
 animation:bakery128-burst .85s ease-out forwards!important;
}
#app .bakery128-page .bakery128-sparkles i:nth-child(3n+2){background:#eb989e!important}
#app .bakery128-page .bakery128-sparkles i:nth-child(3n+3){background:#9cc6dc!important}
.bakery128-ghost{
 position:fixed!important;z-index:999999!important;
 width:clamp(70px,19vw,115px)!important;height:clamp(70px,19vw,115px)!important;
 transform:translate(-50%,-50%)!important;
 pointer-events:none!important;filter:drop-shadow(0 5px 3px #79543a6e)!important;
}
.bakery128-ghost img{width:100%!important;height:100%!important;object-fit:contain!important}
#app .bakery128-page .bakery128-wrong{animation:bakery128-wrong .4s ease-in-out 1!important}
@keyframes bakery128-wrong{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@keyframes bakery128-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes bakery128-gentle{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
@keyframes bakery128-burst{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(200deg)}}
@media(orientation:landscape){
 #app .bakery128-page{height:calc(100dvh - 60px)!important;background-size:100% 100%!important}
 #app .bakery128-page .bakery128-scene{left:2%!important;top:0%!important;width:62%!important;height:97%!important;object-fit:contain!important}
 #app .bakery128-intro .bakery128-scene{top:0%!important;height:100%!important}
 #app .bakery128-select .bakery128-scene{top:0%!important;height:100%!important;width:100%!important}
 #app .bakery128-victory .bakery128-scene{top:0%!important;height:100%!important;width:100%!important}
 #app .bakery128-page .bakery128-task{left:66%!important;top:9%!important;width:32%!important;height:40%!important}
 #app .bakery128-page .bakery128-palette{
  left:66%!important;bottom:4%!important;width:32%!important;height:44%!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1px!important;
 }
 #app .bakery128-page .bakery128-mini{max-width:40%!important}
 #app .bakery128-page .bakery128-drop-bowl{top:48%!important;left:20%!important;width:27%!important;height:35%!important}
 #app .bakery128-page .bakery128-drop-mix{top:45%!important;left:22%!important;width:28%!important;height:35%!important}
 #app .bakery128-page .bakery128-drop-oven{top:36%!important;left:15%!important;width:42%!important;height:45%!important}
 #app .bakery128-page .bakery128-action{left:76%!important;bottom:7%!important;width:12%!important}
 #app .bakery128-page .bakery128-recipe{top:var(--y)!important;width:23%!important;height:33%!important}
 #app .bakery128-page .bakery128-start{top:65%!important;width:20%!important;height:24%!important}
 #app .bakery128-page .bakery128-next{top:62%!important;width:17%!important;height:31%!important}
}
@media(prefers-reduced-motion:reduce){
 #app .bakery128-page .bakery128-action{animation:none!important}
 #app .bakery128-page .bakery128-scene{animation:none!important}
}

/* Landscape gallery retains the painted plate coordinates */
@media(orientation:landscape){
 #app .bakery128-select .bakery128-recipe:nth-of-type(3n+1){left:30%!important}
 #app .bakery128-select .bakery128-recipe:nth-of-type(3n+2){left:50%!important}
 #app .bakery128-select .bakery128-recipe:nth-of-type(3n+3){left:70%!important}
 #app .bakery128-select .bakery128-recipe:nth-of-type(-n+3){top:38%!important}
 #app .bakery128-select .bakery128-recipe:nth-of-type(n+4){top:73%!important}
}

/* Large action buttons must remain stable and easy to tap or drag on Safari. */
#app .bakery128-page .bakery128-action{animation:none!important}
#app .bakery128-page .bakery128-item{transition:none!important}
#app .bakery128-page .bakery128-task{background-image:url('/bakery-v128/recipe-paper.webp')!important}