/* Zählwiese v201: Directly implemented illustrated entrance from approved artwork.
   Only dynamic art layers are changed. Both Play buttons remain real controls. */
#app .zw170-launch[data-game-start="connect"]{
 background:#8bd471 url('/connect-v201/meadow-portrait.webp') center center / 100% 100% no-repeat!important;
 contain:layout style!important;
}
#app .zw170-launch[data-game-start="connect"] .zw170-title{
 left:3.2%!important;top:12.0%!important;
 width:93.6%!important;height:15.6%!important;
 max-height:none!important;object-fit:fill!important;
 filter:drop-shadow(0 5px 3px #68432670)!important;
}
#app .zw170-launch[data-game-start="connect"] .zw170-art{
 top:29.2%!important;height:38.5%!important;
 left:-4.5%!important;width:109%!important;
 overflow:visible!important;
}
#app .zw170-launch[data-game-start="connect"] .zw170-scene{
 width:100%!important;height:100%!important;
 max-width:none!important;max-height:none!important;
 object-fit:fill!important;
 image-rendering:auto!important;
 filter:saturate(1.12) contrast(1.07) drop-shadow(0 3px 3px #6c532c45)!important;
}
#app .zw170-launch[data-game-start="connect"] .zw200-connect-modes{
 left:3%!important;bottom:9.8%!important;
 width:94%!important;height:30.8%!important;
 gap:1%!important;
 align-items:flex-end!important;
}
#app .zw170-launch[data-game-start="connect"] .zw200-mode-button{
 width:49.5%!important;max-width:none!important;
 flex:0 0 49.5%!important;
 gap:0!important;
}
#app .zw170-launch[data-game-start="connect"] .zw200-mode-button .zw200-play-image{
 width:clamp(110px,32vw,157px)!important;
 height:clamp(110px,32vw,157px)!important;
 min-height:108px!important;
 flex:0 0 auto!important;
 filter:drop-shadow(0 4px 3px #593d2766) saturate(1.2)!important;
 transition:transform .17s ease,filter .17s ease!important;
}
#app .zw170-launch[data-game-start="connect"] .zw200-wood-sign{
 width:100%!important;max-width:232px!important;
 height:clamp(80px,10.7dvh,103px)!important;min-height:78px!important;
 padding:10px 9% 11px!important;margin-top:-6px!important;
 background-image:url('/connect-v201/wood-light.webp')!important;
 background-size:100% 100%!important;
 filter:drop-shadow(0 3px 3px #67472f70)!important;
}
#app .zw170-launch[data-game-start="connect"] .zw200-wood-sign b,
#app .zw170-launch[data-game-start="connect"] #zw200Shapes .zw200-wood-sign b:first-child,
#app .zw170-launch[data-game-start="connect"] #zw200Pairs .zw200-wood-sign b:first-child{
 font-family:'Trebuchet MS', 'Arial Rounded MT Bold', Arial, sans-serif!important;
 font-size:clamp(22px,6.1vw,29px)!important;
 line-height:1.05!important;
 font-weight:1000!important;
 letter-spacing:-.55px!important;
 color:#783718!important;
 -webkit-text-stroke:.50px #663419!important;
 text-shadow:1px 1px 0 #fff3c7,0 -1px 0 #eed29a!important;
 white-space:nowrap!important;
}
#app .zw170-launch[data-game-start="connect"] .zw170-home{
 right:max(8px,env(safe-area-inset-right))!important;
 top:max(7px,env(safe-area-inset-top))!important;
 width:clamp(57px,15vw,71px)!important;
 height:clamp(57px,15vw,71px)!important;
 filter:drop-shadow(0 3px 3px #694e3475)!important;
}
@media (orientation:portrait) and (max-width:355px){
 #app .zw170-launch[data-game-start="connect"] .zw170-title{
  top:12.4%!important;height:15.6%!important;
 }
 #app .zw170-launch[data-game-start="connect"] .zw170-art{
  top:29.2%!important;height:36.5%!important;
 }
 #app .zw170-launch[data-game-start="connect"] .zw200-connect-modes{
  left:1%!important;width:98%!important;bottom:8.3%!important;height:34%!important;
 }
 #app .zw170-launch[data-game-start="connect"] .zw200-mode-button .zw200-play-image{
  width:clamp(102px,33vw,132px)!important;height:clamp(102px,33vw,132px)!important;
  min-height:100px!important;
 }
 #app .zw170-launch[data-game-start="connect"] .zw200-wood-sign{
  height:clamp(72px,11dvh,86px)!important;
  min-height:72px!important;padding:9px 7% 9px!important;
 }
 #app .zw170-launch[data-game-start="connect"] .zw200-wood-sign b,
 #app .zw170-launch[data-game-start="connect"] #zw200Shapes .zw200-wood-sign b:first-child,
 #app .zw170-launch[data-game-start="connect"] #zw200Pairs .zw200-wood-sign b:first-child{
  font-size:clamp(19px,6vw,24px)!important;letter-spacing:-.6px!important;
 }
}
@media(orientation:landscape){
 #app .zw170-launch[data-game-start="connect"]{
  background-image:url('/connect-v201/meadow-landscape.webp')!important;
 }
 #app .zw170-launch[data-game-start="connect"] .zw170-title{
  left:23.5%!important;top:1.5%!important;width:53%!important;height:20%!important;
 }
 #app .zw170-launch[data-game-start="connect"] .zw170-art{
  top:23%!important;left:-1%!important;width:59%!important;height:68%!important;
 }
 #app .zw170-launch[data-game-start="connect"] .zw200-connect-modes{
  left:50%!important;bottom:8%!important;width:49%!important;height:63%!important;
  align-items:flex-end!important;
 }
 #app .zw170-launch[data-game-start="connect"] .zw200-mode-button .zw200-play-image{
  width:clamp(91px,28dvh,141px)!important;height:clamp(91px,28dvh,141px)!important;
  min-height:90px!important;
 }
 #app .zw170-launch[data-game-start="connect"] .zw200-wood-sign{
  height:clamp(70px,19dvh,92px)!important;min-height:67px!important;
  padding:7px 7% 9px!important;margin-top:-4px!important;
 }
 #app .zw170-launch[data-game-start="connect"] .zw200-wood-sign b,
 #app .zw170-launch[data-game-start="connect"] #zw200Shapes .zw200-wood-sign b:first-child,
 #app .zw170-launch[data-game-start="connect"] #zw200Pairs .zw200-wood-sign b:first-child{
  font-size:clamp(19px,5.8dvh,27px)!important;letter-spacing:-.6px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #app .zw170-launch[data-game-start="connect"] .zw200-mode-button .zw200-play-image{
  transition:none!important;
 }
}
