/* Zählwiese V54 – consistent final presentation, incl. short landscape screens.
   Preserve all existing game mechanics and the approved portrait homepage. */
@media (orientation:landscape) and (max-height:530px) {
 /* The old square cutout looked disconnected. Reuse the approved full illustration. */
 #app:has(.intro-content) .intro-content{
  background:linear-gradient(140deg,#a2e1ee 0%,#d3f0d3 46%,#83c65e 100%)!important;
 }
 #app:has(.intro-content) .intro-scene{
  width:100%!important;height:clamp(143px,58dvh,245px)!important;
  max-width:none!important;margin:0!important;align-self:center!important;
  border-radius:35px!important;overflow:hidden!important;
  background:radial-gradient(ellipse,#fff7ce2a,transparent)!important;
 }
 #app:has(.intro-content) .intro-scene .zw-playground-image{
  display:block!important;content:url('/art-premium-home.webp')!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center 27%!important;
  max-height:100%!important;max-width:100%!important;
  -webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 48%,#000 48%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse 72% 78% at 50% 48%,#000 48%,transparent 100%)!important;
 }
 #app:has(.intro-content) .mode-choice .mode-round{
  background:radial-gradient(circle at 40% 25%,#fff3d4,#e8b678)!important;
  border:3px solid #a9794d!important;box-shadow:inset 0 0 0 2px #fffae2,0 3px 0 #866042!important;
  overflow:hidden!important;
 }
 #app:has(.intro-content) .mode-choice .mode-round img{opacity:0!important;visibility:hidden!important}
 #app:has(.intro-content) .mode-choice .mode-round{
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
 }
 #app:has(.intro-content) #chooseHands .mode-round{background-image:url('/chapter-hands-v49.webp')!important}
 #app:has(.intro-content) #chooseAnimals .mode-round{background-image:url('/chapter-animals-v49.webp')!important}
 #app:has(.intro-content) #choosePicnic .mode-round{background-image:url('/chapter-picnic-v49.webp')!important}
 #app:has(.intro-content) #chooseFeeding .mode-round{background-image:url('/chapter-feeding-v49.webp')!important}
 #app:has(.intro-content) #chooseCooking .mode-round{background-image:url('/chapter-cooking-v49.webp')!important}
 #app:has(.intro-content) #chooseConnect .mode-round{background-image:url('/chapter-connect-v49.webp')!important}
 #app:has(.intro-content) #chooseDrive .mode-round{background-image:url('/chapter-drive-v49.webp')!important}
 #app:has(.intro-content) #chooseHunt .mode-round{background-image:url('/chapter-hunt-v49.webp')!important}
 #app:has(.intro-content) #chooseMaze .mode-round{background-image:url('/chapter-maze-v49.webp')!important}
 #app:has(.intro-content) .mode-choice .mode-label{
  background:linear-gradient(#fff0bd,#dcae72)!important;color:#754b2c!important;
  border:2px solid #a2764c!important;border-radius:10px!important;
  box-shadow:0 2px #765b4380!important;
 }
 #app:has(.intro-content) .mode-choices{align-content:start!important;gap:2px 5px!important}
 /* Guidance: always keep both the instruction and the action accessible. */
 .zw-guide-overlay{padding:8px 12px!important}
 .zw-guide-dialog{
  display:grid!important;
  grid-template-columns:90px minmax(0,1fr)!important;
  grid-template-rows:min-content min-content min-content minmax(45px,1fr) min-content 45px!important;
  gap:2px 10px!important;
  width:min(100%,530px)!important;
  max-height:calc(100dvh - 16px)!important;
  overflow:hidden!important;
  border-width:5px!important;
  padding:8px 13px 10px!important;
  align-items:start!important;
 }
 .zw-guide-close{z-index:10!important;right:5px!important;top:5px!important}
 .zw-guide-dialog .zw-guide-art{
  grid-column:1!important;grid-row:1 / 6!important;
  align-self:center!important;justify-self:center!important;
  width:80px!important;height:80px!important;min-height:0!important;
  margin:0!important;
 }
 .zw-guide-dialog .zw-guide-art img{width:95%!important;height:95%!important;object-fit:contain!important}
 .zw-guide-dialog .zw-guide-eyebrow{
  grid-column:2!important;grid-row:1!important;
  font-size:12px!important;line-height:1.1!important;margin:0!important;
 }
 .zw-guide-dialog h2{
  grid-column:2!important;grid-row:2!important;
  font-size:clamp(17px,2.8vw,24px)!important;line-height:1.02!important;
  margin:0!important;padding:0 24px 0 0!important;white-space:normal!important;
 }
 .zw-guide-dialog h3{
  grid-column:2!important;grid-row:3!important;
  font-size:clamp(12px,1.85vw,15px)!important;line-height:1.12!important;
  margin:0!important;padding:0!important;
 }
 .zw-guide-dialog p{
  grid-column:2!important;grid-row:4!important;
  min-height:0!important;max-height:none!important;overflow-y:auto!important;
  overscroll-behavior:contain;
  font-size:clamp(12px,1.55vw,14px)!important;
  line-height:1.19!important;margin:0!important;padding:2px 4px 0 0!important;
 }
 .zw-guide-dialog .zw-guide-child{
  grid-column:2!important;grid-row:5!important;
  font-size:clamp(11px,1.45vw,13px)!important;
  min-height:0!important;padding:4px 8px!important;line-height:1.16!important;
  margin:0!important;
 }
 .zw-guide-dialog .zw-guide-start{
  display:flex!important;align-items:center!important;justify-content:center!important;
  grid-column:1/-1!important;grid-row:6!important;
  width:100%!important;min-height:43px!important;height:43px!important;
  border-radius:20px!important;
  margin:0!important;padding:3px 8px!important;
  font-size:clamp(15px,2vw,18px)!important;
 }
}
/* Small portrait phones: compact guide without forcing children to scroll for start. */
@media(max-width:350px) and (orientation:portrait) {
 .zw-guide-overlay{padding:10px!important}
 .zw-guide-dialog{border-width:5px!important;padding:10px 12px 13px!important}
 .zw-guide-dialog .zw-guide-art{width:70px!important;height:70px!important}
 .zw-guide-dialog h3{font-size:17px!important}
 .zw-guide-dialog p{font-size:14px!important;line-height:1.3!important}
 .zw-guide-dialog .zw-guide-start{min-height:53px!important;font-size:19px!important}
}
/* Focus state on actual icon/photo choices, not just the decorative label. */
body:has(.main-content:not(.intro-content)) .main-content button:focus-visible{
 outline:4px solid #ffe785!important;outline-offset:3px!important;
}
@media(prefers-reduced-motion:reduce){
 #app:has(.intro-content) .intro-scene,#app:has(.intro-content) .mode-round{animation:none!important;transition:none!important}
}

/* Refined approved artwork without title duplication or cut-off game badges. */
@media(orientation:landscape) and (max-height:530px){
 #app:has(.intro-content) .home-header .brand{display:none!important}
 #app:has(.intro-content) .intro-content{
  background:linear-gradient(180deg,#8bd1e5 0%,#b9e4d5 46%,#83c663 100%)!important
 }
 #app:has(.intro-content) .intro-scene{
  overflow:visible!important;
  background:none!important;
 }
 #app:has(.intro-content) .intro-scene .zw-playground-image{
  content:url('/home-playground-landscape-v54.webp')!important;
  object-fit:contain!important;object-position:center center!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  filter:drop-shadow(0 5px 3px #4d75524d)!important
 }
 #app:has(.intro-content) .rainbow-title{z-index:10!important}
}