/* V83 – Hand-painted discovery garden and toddler-safe, clearly circular controls.
   All nine games and all existing touch/drag handlers are preserved. */

/* The nine hand-drawn game medallions remain above the decorative paper painting. */
@media(orientation:portrait){
 .zw80-home .zw80-grid{
  background-image:url('/home-v83/storybook-garden-panel.webp')!important;
  background-color:#f5ebce!important;
  background-size:100% 100%!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  padding:clamp(9px,2.5vw,16px)!important;
  border-color:#957448!important;
  box-shadow:inset 0 0 0 4px #fff5d3cf,0 5px 0 #536c3744,0 10px 17px #405e3039!important;
 }
 .zw80-home .zw80-grid::before{
  border:2px dashed #bc996c70!important;
  inset:8px!important;
 }
}
@media(orientation:landscape){
 .zw80-home .zw80-grid::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  inset:1.4% 0.3%!important;
  border:5px solid #a5885a88!important;
  border-radius:clamp(21px,3vw,49px)!important;
  background:#f6edcf url('/home-v83/storybook-garden-panel.webp') center/100% 100% no-repeat!important;
  box-shadow:inset 0 0 0 4px #fff3d9a3,0 4px 12px #6c69462d!important;
  opacity:1!important;
  pointer-events:none!important;
 }
 .zw80-home .zw80-tile{
  z-index:1!important;
 }
}
.zw80-home .zw80-tile{
 -webkit-tap-highlight-color:transparent!important;
 touch-action:manipulation!important;
}
.zw80-home .zw80-tile:focus-visible{
 outline:4px solid #fff5aa!important;
 outline-offset:2px!important;
 border-radius:28px!important;
}
.zw80-home .zw80-tile:active{
 filter:drop-shadow(0 0 9px #f2d775)!important;
}

/* Circular hand-painted back button, safely within the play area.
   Finger/animal picture-book overlays retain their native painted back hotspots. */
#app:not(:has(.zw-finger-book-v53)):not(:has(.zw-animal-book-v63)) > .app-header #homeBtn{
 appearance:none!important;
 display:grid!important;place-items:center!important;
 position:relative!important;
 left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
 flex:0 0 auto!important;
 width:clamp(54px,13.6vw,66px)!important;
 height:clamp(54px,13.6vw,66px)!important;
 min-width:54px!important;min-height:54px!important;
 padding:0!important;margin:0!important;
 border:0!important;border-radius:50%!important;
 color:transparent!important;
 font-size:0!important;
 background:transparent url('/home-v83/round-home.svg') center/100% 100% no-repeat!important;
 box-shadow:none!important;
 filter:drop-shadow(0 3px 2px #775a3e75)!important;
 opacity:1!important;visibility:visible!important;
 pointer-events:auto!important;touch-action:manipulation!important;
 transform:none!important;
}
#app:not(:has(.zw-finger-book-v53)):not(:has(.zw-animal-book-v63)) > .app-header #homeBtn svg,
#app:not(:has(.zw-finger-book-v53)):not(:has(.zw-animal-book-v63)) > .app-header #homeBtn .zw-home-label{
 display:none!important;
}
#app:not(:has(.zw-finger-book-v53)):not(:has(.zw-animal-book-v63)) > .app-header .header-tools{
 display:flex!important;align-items:center!important;justify-content:flex-start!important;
 padding:0!important;margin-left:max(12px,env(safe-area-inset-left,0px))!important;
 overflow:visible!important;
}
#app:has(.zw-picnic-world) > .app-header #homeBtn{
 position:absolute!important;
 left:max(12px,env(safe-area-inset-left,0px))!important;
 top:max(8px,env(safe-area-inset-top,0px))!important;
 z-index:70!important;
}
#app:has(.zw-picnic-world) > .app-header .header-tools{
 position:absolute!important;
 inset:0!important;
 width:100%!important;height:0!important;
 margin:0!important;
 overflow:visible!important;
 pointer-events:none!important;
}

/* All three picnic mode icons remain touchable and look like big painted coins. */
.zw-picnic-world .zw-pic-modes{
 gap:clamp(6px,1.9vw,13px)!important;
}
.zw-picnic-world button.zw-pic-mode{
 width:clamp(52px,15vw,65px)!important;
 height:clamp(52px,15vw,65px)!important;
 min-width:52px!important;min-height:52px!important;
 flex:0 0 clamp(52px,15vw,65px)!important;
 border:4px solid #997144!important;
 border-radius:50%!important;
 box-shadow:inset 0 0 0 3px #fff9e0,0 4px 2px #71533f85!important;
 touch-action:manipulation!important;
}
.zw-picnic-world button.zw-pic-mode[aria-pressed="true"],
.zw-picnic-world button.zw-pic-mode.is-current{
 outline:3px solid #f9db83!important;
 outline-offset:2px!important;
}
@media(max-height:650px) and (orientation:portrait){
 .zw-picnic-world .zw-pic-modes{top:7.3%!important}
}
.zw-picnic-world button.zw-pic-food{
 border-radius:50%!important;
 min-width:54px!important;min-height:54px!important;
}
.zw-picnic-world button.zw-pic-food:focus-visible,
.zw-picnic-world button.zw-pic-mode:focus-visible{
 outline:4px solid #ffe5a0!important;outline-offset:2px!important;
}

/* Counting answer choices are colorful circles, without moving the hand-drawn numbers. */
.zw-book-answer-row button.zw-book-answer-value{
 border-radius:50%!important;
 outline-offset:1px!important;
 touch-action:manipulation!important;
}

/* An animal selection is a big illustrated round button with its label below. */
.extra-animal-choice .extra-animal-round,
.kitchen-recipe-button .kitchen-round{
 border-radius:50%!important;
 filter:drop-shadow(0 4px 3px #745c4270)!important;
}
.extra-animal-choice:focus-visible .extra-animal-round,
.kitchen-recipe-button:focus-visible .kitchen-round{
 outline:4px solid #f7d783!important;outline-offset:3px!important;
}
.extra-food-choice,.kitchen-ingredient-choice,.kitchen-item-choice{
 border-radius:50%!important;
 touch-action:manipulation!important;
}

/* Seven crayons should all be reachable without a tiny clipped horizontal scroll.
   A predictable 4+3 circular palette gives three-year-olds clear visible choices. */
.connect-game .connect-colors{
 padding:4px max(7px,2vw) 6px!important;
 border-radius:27px!important;
}
.connect-game .connect-crayons{
 display:grid!important;
 grid-template-columns:repeat(4,minmax(0,1fr))!important;
 grid-auto-rows:minmax(48px,auto)!important;
 align-content:center!important;justify-content:center!important;
 justify-items:center!important;align-items:center!important;
 width:100%!important;
 gap:4px clamp(5px,1.6vw,10px)!important;
 padding:3px 5px!important;
 overflow:visible!important;
}
.connect-game button.connect-crayon{
 box-sizing:border-box!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 flex:none!important;
 width:clamp(48px,12.7vw,57px)!important;
 height:clamp(48px,12.7vw,57px)!important;
 min-width:48px!important;min-height:48px!important;
 border:3px solid #ac8560!important;
 border-radius:50%!important;
 background:radial-gradient(circle at 36% 28%,#fff9e9,#f1d9b2 73%,#d5b180)!important;
 box-shadow:inset 0 0 0 2px #fff6db,0 3px 1px #7b65458a!important;
 padding:1px!important;
 margin:0!important;
 transform:none!important;
 touch-action:manipulation!important;
}
.connect-game button.connect-crayon[aria-pressed="true"]{
 outline:3px solid var(--ink,#dfb369)!important;
 outline-offset:1px!important;
 background:#fff9df!important;
 transform:translateY(-2px)!important;
}
.connect-game .connect-crayon-shape{font-size:clamp(22px,6vw,30px)!important;line-height:1!important}
.connect-game .connect-crayon-name{font-size:8px!important;line-height:1!important}
.connect-game button.connect-num{width:clamp(47px,13vw,64px)!important;height:clamp(47px,13vw,64px)!important;border-radius:50%!important}
.connect-secondary,.connect-continue,.drive-again{
 border-radius:50%!important;
 width:clamp(55px,14vw,64px)!important;
 height:clamp(55px,14vw,64px)!important;
 min-width:55px!important;min-height:55px!important;
 padding:7px!important;
 box-shadow:inset 0 2px #fff5de,0 4px 1px #87654491!important;
}
@media(orientation:portrait) and (max-height:690px){
 .connect-game .connect-board{height:min(var(--board-height),37dvh)!important}
 .connect-game{overflow-y:auto!important}
 .connect-game .connect-crayons{grid-auto-rows:minmax(48px,auto)!important}
}
@media(orientation:landscape) and (max-height:530px){
 .connect-game .connect-crayon-shape{font-size:23px!important}
 .connect-game .connect-crayons{grid-auto-rows:48px!important;gap:2px 4px!important}
 .connect-game button.connect-crayon{width:48px!important;height:48px!important}
 .connect-game{overflow-y:auto!important}
}

/* Maze restart stays a clearly visible, fully reachable round button. */
.family-maze-screen .family-maze-restart,
.family-maze-screen .family-maze-next{
 width:clamp(54px,14vw,66px)!important;
 height:clamp(54px,14vw,66px)!important;
 min-width:54px!important;min-height:54px!important;
 border-radius:50%!important;
 box-shadow:inset 0 1px #fff6d9,0 4px 2px #7d684c72!important;
}
@media(orientation:portrait) and (max-height:700px){
 .family-maze-screen .family-maze-restart{
  position:fixed!important;
  bottom:max(12px,env(safe-area-inset-bottom,0px))!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:40!important;
 }
}
:where(.zw-picnic-world,.connect-game,.extra-page,.kitchen-page,.family-maze-screen) button:focus-visible{
 outline:4px solid #ffdd82!important;outline-offset:2px!important;
}
@media(prefers-reduced-motion:reduce){
 .zw80-home .zw80-tile,.connect-game button.connect-crayon{transition:none!important}
}

/* Final safety correction: picnic has a 0px-high app header. Flex centering
   otherwise moves the round home button halfway above the screen. */
#app:has(.zw-picnic-world)>.app-header .header-tools{
 position:absolute!important;
 top:0!important;left:0!important;
 height:0!important;width:100%!important;
 margin:0!important;padding:0!important;
 overflow:visible!important;
 pointer-events:none!important;
}
#app:has(.zw-picnic-world)>.app-header #homeBtn{
 position:absolute!important;
 top:max(10px,env(safe-area-inset-top,0px))!important;
 left:max(10px,env(safe-area-inset-left,0px))!important;
 right:auto!important;bottom:auto!important;
 width:clamp(54px,13.6vw,64px)!important;
 height:clamp(54px,13.6vw,64px)!important;
 min-width:54px!important;min-height:54px!important;
 margin:0!important;
 transform:none!important;
 pointer-events:auto!important;
}
.zw-picnic-world button.zw-pic-mode:not(.is-current){
 transform:none!important;
 opacity:1!important;
}
#app .family-maze-screen button.family-maze-restart,
#app .family-maze-screen button.family-maze-next{
 border-radius:50%!important;
}

/* Outrank generic application navigation specificity on picnic's zero-height header. */
#app:has(.zw-picnic-world)>.app-header .header-tools button#homeBtn.zw-go-home{
 position:absolute!important;
 top:max(10px,env(safe-area-inset-top,0px))!important;
 left:-2px!important;
 right:auto!important;bottom:auto!important;
 margin:0!important;transform:none!important;
}