/* V70: original Moritz and Igor, a real illustrated, interactive playground seesaw.
   The existing nine game regions, captions, title and footer remain unchanged. */
@media(orientation:portrait){
 #app:has(.intro-content) .intro-content{
  background-image:url('/home-seesaw-background-v70.webp')!important;
 }
}
#app:has(.intro-content) .intro-scene .zw-hero-art.zw-seesaw-hero{
 display:block!important;
 position:absolute!important;
 inset:0!important;
 width:100%!important;height:100%!important;
 min-height:0!important;
 background:transparent!important;
 pointer-events:none!important;
 overflow:visible!important;
}
#app:has(.intro-content) .zw-seesaw-button{
 display:block!important;
 appearance:none!important;
 position:absolute!important;
 left:19%!important;
 top:49%!important;
 width:70%!important;
 height:51%!important;
 min-width:0!important;min-height:0!important;
 margin:0!important;padding:0!important;
 border:0!important;border-radius:0!important;
 background:transparent!important;
 box-shadow:none!important;
 opacity:1!important;
 overflow:visible!important;
 pointer-events:auto!important;
 cursor:pointer!important;
 touch-action:manipulation!important;
 -webkit-tap-highlight-color:transparent!important;
}
#app:has(.intro-content) .zw-seesaw-button:focus-visible{
 outline:4px solid #fff0a9!important;
 outline-offset:3px!important;
 border-radius:18px!important;
}
.zw-seesaw-button>span,.zw-seesaw-button img{
 pointer-events:none!important;
}
.zw-seesaw-ground{
 position:absolute!important;
 left:23%;bottom:0;
 width:54%;height:12%;
 border-radius:50%;
 background:radial-gradient(ellipse at 50% 50%,rgba(83,105,46,.55),rgba(115,155,75,.2) 55%,transparent 76%)!important;
 filter:blur(3px);
 z-index:1!important;
}
.zw-seesaw-pivot{
 position:absolute!important;
 z-index:3!important;
 left:50%!important;
 top:60%!important;
 width:23%!important;
 height:37%!important;
 transform:translateX(-50%)!important;
 clip-path:polygon(48% 0,58% 0,100% 92%,95% 100%,5% 100%,0 92%,40% 0)!important;
 background:linear-gradient(100deg,#e4b56d 0%,#b78143 24%,#efd0a0 40%,#8c5e36 67%,#bc8447 86%,#68472e 100%)!important;
 border-radius:8px!important;
 filter:drop-shadow(3px 5px 1px #4b5f3480)!important;
}
.zw-seesaw-foot{
 position:absolute!important;
 left:40%!important;top:94%!important;
 width:20%!important;height:3.5%!important;
 border-radius:50%!important;
 background:linear-gradient(#9c6b39,#6d4a2b)!important;
 z-index:4!important;
}
.zw-seesaw-pivot:after{
 content:""!important;
 position:absolute!important;
 inset:9% 18% 14%!important;
 border-left:3px solid #fce6b882!important;
 transform:skew(-12deg)!important;
}
.zw-seesaw-moving{
 position:absolute!important;
 z-index:5!important;
 left:3%!important;
 top:60%!important;
 width:94%!important;
 height:13%!important;
 transform-origin:50% 48%!important;
 animation:zw-seesaw-idle 4.7s ease-in-out infinite!important;
 will-change:transform!important;
}
.zw-seesaw-plank{
 position:absolute!important;
 left:0!important;top:23%!important;
 width:100%!important;height:72%!important;
 border:3px solid #8e5b36!important;
 border-radius:46% 30% 36% 45% / 28% 21% 33% 29%!important;
 background:
  repeating-linear-gradient(177deg,transparent 0 6px,#9d603a29 7px 9px,transparent 10px 21px),
  linear-gradient(169deg,#fff0bc 0%,#e7b77a 20%,#bb7b45 53%,#e3ab6d 78%,#8a5b39 100%)!important;
 box-shadow:inset 0 2px 1px #fff5cd,0 3px 2px #5e443180!important;
 transform:rotate(0deg)!important;
}
.zw-seesaw-plank:before{
 content:"";
 position:absolute;
 left:48%;top:25%;width:4%;height:56%;
 border:2px solid #73614e;
 border-radius:50%;
 background:radial-gradient(circle,#dbe2d7,#8b9293);
 box-shadow:0 0 0 2px #ac7c48;
}
.zw-seesaw-seat{
 position:absolute!important;z-index:2!important;
 bottom:0!important;
 width:21%!important;height:91%!important;
 border:3px solid #9d573c!important;
 border-radius:29px 25px 20px 19px!important;
 background:linear-gradient(177deg,#f8bb9e,#d9594e 60%,#ab4238)!important;
 box-shadow:inset 0 1px #ffe7c2,0 2px 2px #573f2a70!important;
}
.zw-seesaw-seat-left{left:-1.8%!important}
.zw-seesaw-seat-right{right:-1.8%!important}
.zw-seesaw-rider{
 position:absolute!important;z-index:4!important;
 bottom:22%!important;
 height:400%!important;
 width:auto!important;
 max-width:none!important;
 object-fit:contain!important;
 filter:drop-shadow(1px 3px 1px #34452e3b)!important;
 user-select:none!important;
 -webkit-user-drag:none!important;
 transform-origin:50% 85%!important;
}
.zw-seesaw-moritz{left:-2%!important;height:510%!important}
.zw-seesaw-igor{right:-1%!important;height:500%!important}
.zw-seesaw-heart{
 position:absolute!important;
 top:31%!important;
 width:10%!important;height:10%!important;
 opacity:0!important;
 z-index:8!important;
 background:#f09fa7!important;
 clip-path:polygon(50% 90%,10% 51%,0 25%,12% 5%,35% 5%,50% 20%,65% 5%,88% 5%,100% 25%,90% 51%)!important;
 filter:drop-shadow(1px 2px #a4615680);
}
.zw-seesaw-heart-left{left:18%}
.zw-seesaw-heart-right{right:17%}
.zw-seesaw-tapped .zw-seesaw-moving{
 animation:zw-seesaw-click 2.25s cubic-bezier(.34,.35,.35,1) both!important;
}
.zw-seesaw-tapped .zw-seesaw-heart-left{
 animation:zw-seesaw-heart .9s ease-in-out .38s both!important;
}
.zw-seesaw-tapped .zw-seesaw-heart-right{
 animation:zw-seesaw-heart .9s ease-in-out .72s both!important;
}
@keyframes zw-seesaw-idle{
 0%,100%{transform:rotate(-3deg)}
 25%{transform:rotate(2.2deg)}
 55%{transform:rotate(4deg)}
 78%{transform:rotate(-1deg)}
}
@keyframes zw-seesaw-click{
 0%{transform:rotate(-3deg)}
 12%{transform:rotate(11deg)}
 24%{transform:rotate(-11deg)}
 39%{transform:rotate(10deg)}
 52%{transform:rotate(-8deg)}
 66%{transform:rotate(6deg)}
 79%{transform:rotate(-4.5deg)}
 91%{transform:rotate(2deg)}
 100%{transform:rotate(-3deg)}
}
@keyframes zw-seesaw-heart{
 0%{opacity:0;transform:translateY(9px) rotate(-6deg) scale(.6)}
 35%{opacity:.95;transform:translateY(-9px) rotate(3deg) scale(1)}
 75%{opacity:.75;transform:translateY(-15px) rotate(-3deg) scale(1.05)}
 100%{opacity:0;transform:translateY(-19px) scale(.7)}
}
@media(orientation:landscape) and (max-height:620px){
 /* Compact, tappable playground animation above the game grid, never over the tiles. */
 #app:has(.intro-content) .intro-scene .zw-hero-art.zw-seesaw-hero{
  display:block!important;
  position:fixed!important;
  inset:0 3% auto auto!important;
  width:37vw!important;
  height:46px!important;
  max-width:350px!important;
  z-index:30!important;
  pointer-events:none!important;
 }
 #app:has(.intro-content) .zw-seesaw-button{
  left:4%!important;top:0!important;
  width:92%!important;height:46px!important;
 }
 #app:has(.intro-content) .zw-seesaw-rider{
  height:650%!important;
  bottom:20%!important;
 }
 #app:has(.intro-content) .zw-seesaw-pivot{
  height:32%!important;top:61%!important;
 }
 #app:has(.intro-content) .zw-seesaw-foot{top:91%!important}
}
@media(prefers-reduced-motion:reduce){
 #app:has(.intro-content):not(.zw-force-motion) .zw-seesaw-moving{
  animation:none!important;
  transform:rotate(-2deg)!important;
 }
 #app:has(.intro-content):not(.zw-force-motion) .zw-seesaw-tapped .zw-seesaw-moving{
  animation:zw-seesaw-click .95s ease-out both!important;
 }
}