/* V57: One consistent original hand-painted storybook world.
 * All nine existing semantic buttons and handlers remain exactly unchanged.
 * The visible illustration is pixel-aligned to the old tappable game regions. */
body:has(.intro-content){background:#8bc76d!important}
#app:has(.intro-content) .intro-content{
 background-image:url('/home-storybook-v57.webp')!important;
 background-repeat:no-repeat!important;
 background-size:100% 100%!important;
 background-position:center!important;
}
#app:has(.intro-content) .mode-choice:focus-visible{
 outline:4px solid #fff6c0!important;outline-offset:-4px!important;
 border-radius:23px!important;
}
#app:has(.intro-content) .mode-choice:active{
 background:#fff6cb22!important;filter:brightness(1.06)!important;
}
@media(orientation:landscape){
 body:has(.intro-content) .device{
  background-image:url('/gameworld-v49.webp')!important;
  background-size:cover!important;
  background-position:center!important;
 }
 #app:has(.intro-content) .intro-content{
  background-image:none!important;
  background:transparent!important;
 }
 #app:has(.intro-content) .intro-scene .zw-playground-image{
  display:block!important;
  content:url('/home-storybook-playground-land-v57.webp')!important;
  width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center center!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  filter:drop-shadow(0 3px 2px #466a4d39)!important;
 }
 #app:has(.intro-content) .intro-scene{
  overflow:visible!important;background:none!important;
 }
 #app:has(.intro-content) .intro-content>.rainbow-title{
  background:linear-gradient(#fff3cb,#e5c28c)!important;
  border:3px solid #9b754c!important;
  border-radius:16px!important;
  box-shadow:inset 0 2px #fffce0,1px 4px #78563f70!important;
  padding:1px 8px 3px!important;
  font-family:'Segoe Print','Comic Sans MS',cursive!important;
  font-size:clamp(20px,3.5vw,32px)!important;
  letter-spacing:-1px!important;
  -webkit-text-stroke:0!important;
  align-self:start!important;
  width:max-content!important;max-width:100%!important;
 }
 #app:has(.intro-content) .intro-content>.welcome-subtitle{
  color:#537b44!important;
  text-shadow:1px 2px #fff8c7!important;
  font-family:'Segoe Print','Comic Sans MS',cursive!important;
  font-size:clamp(13px,2vw,18px)!important;
 }
 #app:has(.intro-content) .mode-choice .mode-round{
  background-color:#e8d7b0!important;
  border:3px solid #987048!important;
  box-shadow:inset 0 0 0 2px #fff4d8,1px 3px #77543e75!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
 }
 #app:has(.intro-content) #chooseHands .mode-round{background-image:url('/home-storybook-icon-hands-v57.webp')!important}
 #app:has(.intro-content) #chooseAnimals .mode-round{background-image:url('/home-storybook-icon-animals-v57.webp')!important}
 #app:has(.intro-content) #choosePicnic .mode-round{background-image:url('/home-storybook-icon-picnic-v57.webp')!important}
 #app:has(.intro-content) #chooseFeeding .mode-round{background-image:url('/home-storybook-icon-feeding-v57.webp')!important}
 #app:has(.intro-content) #chooseCooking .mode-round{background-image:url('/home-storybook-icon-cooking-v57.webp')!important}
 #app:has(.intro-content) #chooseConnect .mode-round{background-image:url('/home-storybook-icon-connect-v57.webp')!important}
 #app:has(.intro-content) #chooseDrive .mode-round{background-image:url('/home-storybook-icon-drive-v57.webp')!important}
 #app:has(.intro-content) #chooseHunt .mode-round{background-image:url('/home-storybook-icon-hunt-v57.webp')!important}
 #app:has(.intro-content) #chooseMaze .mode-round{background-image:url('/home-storybook-icon-maze-v57.webp')!important}
 #app:has(.intro-content) .mode-choice .mode-round img{visibility:hidden!important;opacity:0!important}
 #app:has(.intro-content) .mode-choice .mode-label{
  background:linear-gradient(150deg,#fff0cc,#e6bf85)!important;
  border:2px solid #9b724e!important;border-radius:10px!important;
  color:#705038!important;
  font-family:'Segoe Print','Comic Sans MS',cursive!important;
  font-size:clamp(9px,1.4vw,13px)!important;
  font-weight:900!important;
  box-shadow:inset 0 1px #fff8db,0 3px #85614183!important;
  text-shadow:0 1px #fff7e1!important;
 }
 #app:has(.intro-content) .mode-choice:focus-visible{outline-offset:0!important}
}
@media(orientation:landscape) and (max-height:390px){
 #app:has(.intro-content) .intro-scene{height:clamp(120px,49dvh,170px)!important}
 #app:has(.intro-content) .mode-choices{gap:2px 4px!important}
 #app:has(.intro-content) .mode-choice .mode-round{
  width:clamp(44px,7.6vw,64px)!important;
  height:clamp(44px,7.6vw,64px)!important;
 }
}

/* Final landscape: no overlaid settings/title, full-size nine game choices. */
@media(orientation:landscape) and (max-height:530px){
 #app:has(.intro-content) .intro-content>.rainbow-title{
  margin-left:48px!important;
  font-size:clamp(21px,3.25vw,28px)!important;
  min-width:0!important;
  white-space:nowrap!important;
 }
 #app:has(.intro-content) .app-header.home-header .parent-gear{
  left:10px!important;top:5px!important;min-width:38px!important;
 }
 #app:has(.intro-content) .mode-choices{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  height:calc(100dvh - 49px)!important;
  max-height:calc(100dvh - 49px)!important;
  align-content:stretch!important;
  justify-items:center!important;
  row-gap:3px!important;column-gap:6px!important;
 }
 #app:has(.intro-content) .mode-choice,#app:has(.intro-content) .mode-choice:nth-child(n){
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  min-height:0!important;max-height:100%!important;
  width:100%!important;overflow:visible!important;
 }
 #app:has(.intro-content) .mode-choice .mode-round{
  width:clamp(50px,19dvh,78px)!important;
  height:clamp(50px,19dvh,78px)!important;
  min-width:0!important;min-height:0!important;
  flex-shrink:0!important;
 }
 #app:has(.intro-content) .mode-choice .mode-label{
  width:100%!important;max-width:138px!important;
  min-height:24px!important;padding:2px 3px!important;
  font-size:clamp(11px,1.38vw,13px)!important;
  line-height:1.08!important;
 }
 #app:has(.intro-content) .intro-scene{
  height:min(67dvh,270px)!important;max-height:none!important;
  align-self:center!important;
 }
}