/* Zählwiese V78 | EXACT illustrated game-world styling.
   Uses genuine pencil-stroked art harvested from the first two game worlds.
   The structural, fully tested home-v77 component remains unchanged. */
#app>.zw77-home{
 background-color:#8bbb8a!important;
 background-image:url('/home-paint-v78/meadow-portrait.webp')!important;
 background-position:center center!important;
 background-size:100% 100%!important;
 background-repeat:no-repeat!important;
 color:#5f452d!important;
 font-family:"Chalkboard SE","Marker Felt","Comic Sans MS","Trebuchet MS",system-ui,sans-serif!important;
}
.zw77-home .zw77-header{
 height:clamp(72px,12.3dvh,118px)!important;
}
.zw77-home .zw77-heading{
 max-width:calc(100% - 105px)!important;
 gap:0!important;
}
.zw77-home .zw77-title{
 display:flex!important;
 align-items:center!important;justify-content:center!important;
 width:auto!important;max-width:100%!important;
 height:clamp(40px,7.7dvh,73px)!important;
 min-width:0!important;
 padding:0!important;margin:0!important;
 border:0!important;border-radius:0!important;
 background:none!important;box-shadow:none!important;
 text-shadow:none!important;-webkit-text-stroke:0 transparent!important;
 font-size:0!important;
}
.zw77-home .zw77-title img{
 display:block!important;
 width:auto!important;
 max-width:100%!important;height:100%!important;
 object-fit:contain!important;
 pointer-events:none!important;
 filter:drop-shadow(0 2px 0 rgba(106,76,44,.20))!important;
}
.zw77-home .zw77-lead{
 font-family:"Chalkboard SE","Comic Sans MS","Marker Felt",system-ui,sans-serif!important;
 font-size:clamp(12px,3.1vw,17px)!important;
 font-weight:900!important;
 line-height:1.1!important;
 letter-spacing:.1px!important;
 color:#65482e!important;
 text-shadow:1px 1px 0 #ffefbc,0 0 8px #fff7d9!important;
 margin:2px 0 0!important;
}
.zw77-home .zw77-settings{
 appearance:none!important;
 border:0!important;border-radius:50%!important;
 background:transparent url('/home-paint-v78/painted-gear.webp') center/100% 100% no-repeat!important;
 box-shadow:none!important;
 width:clamp(47px,12vw,67px)!important;
 height:clamp(47px,12vw,67px)!important;
 filter:drop-shadow(1px 3px 1px #61472c75);
}
.zw77-home .zw77-settings svg{display:none!important}
.zw77-home .zw77-hero{
 filter:drop-shadow(1px 3px 2px #476c3453)!important;
}
.zw77-home .zw77-grid{
 column-gap:clamp(4px,1.35vw,17px)!important;
 row-gap:clamp(3px,.8dvh,11px)!important;
}
.zw77-home .zw77-tile .zw77-icon{
 overflow:visible!important;
 width:auto!important;
 max-width:min(100%,152px)!important;
 filter:none!important;
}
.zw77-home .zw77-tile .zw77-icon img{
 object-fit:contain!important;
 filter:drop-shadow(1px 3px 1px #67462d60)!important;
 image-rendering:auto!important;
}
.zw77-home .zw77-plaque{
 background:transparent url('/home-paint-v78/wood-plaque.webp') center/100% 100% no-repeat!important;
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important;
 width:min(100%,176px)!important;
 height:clamp(26px,4.5dvh,35px)!important;
 min-height:24px!important;
 padding:0 6px 1px!important;
 margin:0!important;
 color:#4e3222!important;
 text-shadow:0 1px 1px #fff2c9!important;
 font-family:"Chalkboard SE","Marker Felt","Comic Sans MS",system-ui,sans-serif!important;
 font-size:clamp(11px,2.95vw,16px)!important;
 font-weight:900!important;
 letter-spacing:-.25px!important;
 line-height:1.02!important;
}
.zw77-home .zw77-footer{
 background:transparent url('/home-paint-v78/wood-footer.webp') center/100% 100% no-repeat!important;
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important;
 height:clamp(28px,5.1dvh,41px)!important;
 min-height:28px!important;
 width:clamp(220px,75%,370px)!important;
 max-width:calc(100% - 22px)!important;
 padding:3px 16px!important;
 color:#5b3a25!important;
 font-family:"Chalkboard SE","Comic Sans MS","Trebuchet MS",system-ui,sans-serif!important;
 font-size:clamp(11px,2.8vw,14px)!important;
 font-weight:900!important;
 text-shadow:0 1px #fff9df!important;
}
.zw77-home .zw77-tile:focus-visible{
 outline:3px solid #fcf0b1!important;outline-offset:1px!important;
}
@media(max-width:359px) and (orientation:portrait){
 .zw77-home .zw77-header{height:75px!important}
 .zw77-home .zw77-heading{max-width:calc(100% - 92px)!important}
 .zw77-home .zw77-title{height:45px!important}
 .zw77-home .zw77-lead{font-size:11.5px!important}
 .zw77-home .zw77-grid{height:279px!important}
 .zw77-home .zw77-plaque{height:27px!important;font-size:10.5px!important}
 .zw77-home .zw77-footer{height:28px!important;margin:3px auto 4px!important}
}
@media(orientation:landscape) and (max-height:630px){
 #app>.zw77-home{
  background-image:url('/home-paint-v78/meadow-landscape.webp')!important;
 }
 .zw77-home .zw77-header{height:clamp(48px,15dvh,68px)!important}
 .zw77-home .zw77-title{height:clamp(31px,9dvh,45px)!important}
 .zw77-home .zw77-heading{max-width:calc(100% - 95px)!important}
 .zw77-home .zw77-lead{font-size:11px!important;margin:0!important}
 .zw77-home .zw77-plaque{height:clamp(20px,6dvh,26px)!important;font-size:clamp(9.5px,1.6vw,12px)!important;padding:0 4px!important}
 .zw77-home .zw77-tile .zw77-icon{height:calc(100% - 24px)!important}
 .zw77-home .zw77-footer{height:23px!important;min-height:22px!important;font-size:10px!important;width:min(32%,240px)!important;margin:0 auto 2px!important}
}
@media(min-width:680px) and (min-height:631px){
 #app>.zw77-home{
  background-image:url('/home-paint-v78/meadow-landscape.webp')!important;
  background-size:cover!important;
 }
 .zw77-home .zw77-header{height:clamp(94px,14dvh,148px)!important}
 .zw77-home .zw77-title{height:clamp(71px,12dvh,105px)!important;max-width:min(100%,470px)!important}
 .zw77-home .zw77-lead{font-size:clamp(15px,1.45vw,20px)!important}
 .zw77-home .zw77-plaque{height:clamp(31px,4dvh,39px)!important;font-size:clamp(13px,1.25vw,18px)!important}
 .zw77-home .zw77-footer{height:clamp(35px,5dvh,46px)!important;width:clamp(320px,34%,470px)!important}
}
@media(prefers-reduced-motion:reduce){
 .zw77-home .zw77-tile .zw77-icon{transition:none!important}
}