/* Handpainted labyrinth selection and the second maze variant, Version 103 */
#app .zw103-hub.main-content{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 overflow:hidden!important;isolation:isolate!important;
 background:#aed2a0 url('/storybook-games-v91/world-maze-portrait.webp') center /100% 100% no-repeat!important;
}
#app .zw103-hub-heading{
 position:absolute;left:13%;right:13%;top:12%;z-index:2;
 text-align:center;font-family:'Segoe Print','Comic Sans MS',cursive;
 font-size:clamp(21px,5.7vw,38px);font-weight:900;line-height:1.2;
 color:#795944;text-shadow:2px 2px #fff3cf,0 3px 2px #6a594f40;
}
#app .zw103-hub-heart{position:absolute;left:36%;top:22%;width:28%;height:16%;display:flex;justify-content:center;align-items:center;pointer-events:none}
#app .zw103-hub-heart img{width:50%;height:100%;object-fit:contain;filter:drop-shadow(1px 2px 1px #8e6b5a55)}
#app .zw103-hub-heart img:first-child{animation:zw103-hub-wave 5.4s ease-in-out infinite}
#app .zw103-hub-heart img:last-child{animation:zw103-hub-wave 5.4s ease-in-out -2.7s infinite}
#app .zw103-hub-options{
 position:absolute;top:41%;left:7%;width:86%;height:47%;z-index:5;
 display:grid;grid-template-columns:1fr 1fr;gap:clamp(5px,3vw,30px);
 align-items:center;justify-items:center;
}
#app .zw103-hub .zw103-option{
 width:100%;height:100%;min-width:0;max-width:275px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 border:0!important;border-radius:40px!important;background:none!important;
 padding:0!important;box-shadow:none!important;appearance:none!important;
 -webkit-tap-highlight-color:transparent;touch-action:manipulation!important;
 cursor:pointer;transition:transform 240ms ease-out;
}
#app .zw103-option img{display:block;width:100%;height:min(29dvh,220px);object-fit:contain;filter:drop-shadow(0 4px 3px #70573b49);pointer-events:none}
#app .zw103-option span{
 display:block;text-align:center;color:#715840;text-shadow:1px 1px #ffedc8;
 font:bold clamp(13px,3.1vw,22px)/1.2 'Segoe Print','Comic Sans MS',cursive;
 margin-top:-2px;pointer-events:none;
}
#app .zw103-option:active{transform:scale(.93)}
#app .zw103-option:focus-visible{outline:4px solid #fff4be!important;outline-offset:2px}
#app .zw103-hub-flowers{position:absolute;left:7%;right:7%;bottom:5%;height:6%;pointer-events:none;
 background:url('/storybook-games-v91/world-maze-portrait.webp') center 90% / cover no-repeat;mask-image:linear-gradient(transparent,#000)}
/* Automotive labyrinth uses the very same crayon hedge and sandy-path rendering
   and exactly the same responsive board geometry as the cuddling game. */
#app .zw103.zw93.main-content{background-image:url('/storybook-games-v91/world-maze-portrait.webp')!important}
#app .zw103 .zw103-title{
 left:21%!important;top:1.5%!important;width:73%!important;height:9%!important;
 text-align:center;display:grid;place-items:center;
 font:900 clamp(19px,6vw,33px)/1.1 'Segoe Print','Comic Sans MS',cursive;
 color:#795846;text-shadow:2px 2px #fff1c8,0 2px 2px #71574755;
}
#app .zw103 .zw103-progress .zw93-progress-char{
 width:14%;max-width:58px;object-fit:contain;filter:drop-shadow(0 2px 1px #795c4155)
}
#app .zw103 .zw103-car{
 overflow:visible!important;border-radius:50%!important;
 filter:drop-shadow(0 2px 2px #684e3966);
}
#app .zw103 .zw103-car .zw103-rotator{
 display:block;width:100%;height:100%;
 transform:rotate(var(--car-angle,0deg));transform-origin:center;
 transition:transform .23s cubic-bezier(.19,.67,.34,1);
}
#app .zw103 .zw103-car img{
 width:100%;height:100%;object-fit:contain;
 animation:zw103-idle-sway 4s ease-in-out infinite;
}
#app .zw103 .zw103-car.zw103-rolling img{
 animation:zw103-auto-bob 500ms ease-in-out infinite;
}
#app .zw103 .zw103-car .zw103-wheel{
 position:absolute;top:22%;width:9%;height:56%;
 border-radius:8px;background:repeating-linear-gradient(0deg,#635f57 0 5px,#888278 5px 8px);
 pointer-events:none;opacity:.55;animation-play-state:paused;
}
#app .zw103 .zw103-car .zw103-wheel-front{left:15%}
#app .zw103 .zw103-car .zw103-wheel-back{right:15%}
#app .zw103 .zw103-car.zw103-rolling .zw103-wheel{
 animation:zw103-tire-rolling .38s linear infinite;
}
#app .zw103 .zw103-meet{
 display:flex;justify-content:center;align-items:center;gap:3px;
 width:min(197px,53%);height:min(178px,46%);
}
#app .zw103 .zw103-meet-car{width:47%;height:100%;display:grid;place-items:center}
#app .zw103 .zw103-meet-car img{width:100%;height:80%;object-fit:contain}
#app .zw103 .zw103-meet.is-visible .zw103-meet-left img{animation:zw103-two-cars-left 2200ms cubic-bezier(.16,.8,.22,1) both}
#app .zw103 .zw103-meet.is-visible .zw103-meet-right img{animation:zw103-two-cars-right 2200ms cubic-bezier(.16,.8,.22,1) both}
#app .zw103 .zw103-meet-heart{
 position:absolute;left:42%;top:5%;width:17%;height:22%;
 animation:zw103-heart-up 2300ms ease-in-out 350ms infinite;pointer-events:none;
}
#app .zw103 .zw103-meet-heart img{width:100%;height:100%;object-fit:contain}
@keyframes zw103-hub-wave{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes zw103-idle-sway{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-2px) rotate(2deg)}}
@keyframes zw103-auto-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes zw103-tire-rolling{to{background-position-y:26px}}
@keyframes zw103-two-cars-left{from{transform:translateX(-70px) rotate(-22deg)}65%{transform:translateX(6px) rotate(8deg)}to{transform:translateX(0) rotate(-4deg)}}
@keyframes zw103-two-cars-right{from{transform:translateX(70px) rotate(22deg)}65%{transform:translateX(-6px) rotate(-8deg)}to{transform:translateX(0) rotate(4deg)}}
@keyframes zw103-heart-up{0%,100%{transform:translateY(0) scale(.86)}55%{transform:translateY(-15px) scale(1.15)}}
@media(orientation:landscape) and (max-height:650px){
 #app .zw103-hub.main-content,#app .zw103.zw93.main-content{background-image:url('/storybook-games-v91/world-maze-landscape.webp')!important}
 #app .zw103-hub-heading{left:64%;right:4%;top:8%;font-size:clamp(19px,5vh,31px)}
 #app .zw103-hub-heart{left:68%;top:26%;width:24%;height:22%}
 #app .zw103-hub-options{left:2%;top:10%;width:59%;height:84%;gap:0}
 #app .zw103-hub .zw103-option{height:100%}
 #app .zw103-option img{height:clamp(130px,52vh,265px)}
 #app .zw103-option span{font-size:clamp(12px,3.5vh,21px)}
 #app .zw103 .zw103-title{left:65%!important;top:3%!important;width:32%!important;height:14%!important;font-size:clamp(17px,5vh,29px)}
 #app .zw103 .zw103-meet{width:min(162px,43%);height:min(138px,42%)}
}
@media(max-width:355px) and (orientation:portrait){
 #app .zw103-hub-heading{top:14%;font-size:22px}
 #app .zw103-hub-options{left:4%;width:92%;top:39%;height:44%;gap:0}
 #app .zw103-option img{height:190px}
 #app .zw103-option span{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 #app .zw103 *{animation-duration:3s!important}
 #app .zw103-option{transition:none}
 #app .zw103-hub-heart img{animation:none}
}
