/* Version 106 – premium storybook Labyrinth menu, safe areas and responsive art */
#app .zw106-hub.main-content{
 background:#a7ca91 url('/storybook-games-v91/world-maze-portrait.webp') center/100% 100% no-repeat!important;
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 overflow:hidden!important;isolation:isolate!important;
}
#app .zw106-hub .zw106-heading{
 position:absolute;z-index:4;top:8.1%;left:17%;width:77%;height:8%;
 border:4px solid #ad8865;border-radius:26px;
 background:linear-gradient(170deg,#fae5bd 0%,#f1d3a0 65%,#e9bb86 100%);
 box-shadow:inset 0 0 0 3px #fff2d3,0 4px 3px rgba(81,63,42,.24);
 display:grid;place-items:center;
 padding:0 7px!important;
 font:900 clamp(18px,5.1vw,31px)/1.15 'Segoe Print','Comic Sans MS',cursive;
 color:#78543f;text-shadow:1px 2px #fff2d1;text-align:center;
}
#app .zw106-hub .zw106-hero{
 position:absolute;z-index:3;top:17.8%;left:6%;width:88%;height:34%;
 border:5px solid #c8aa77;border-radius:25px;
 background:#a4d0cc;
 box-shadow:inset 0 0 0 2px #fff1d0,0 5px 5px #6c50364f;
 overflow:hidden;transform:rotate(-.4deg);
}
#app .zw106-hub .zw106-hero img{
 width:100%;height:100%;object-fit:cover;object-position:center 57%;
 display:block;pointer-events:none;user-select:none;-webkit-user-select:none;
}
#app .zw106-hub .zw106-choices{
 position:absolute;z-index:5;top:55.1%;left:4%;width:92%;height:36%;
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 align-items:center;justify-content:center;column-gap:3%;
}
#app .zw106-hub .zw106-choice{
 width:100%!important;height:100%!important;
 min-width:0!important;min-height:0!important;padding:0!important;
 appearance:none!important;background:transparent!important;border:0!important;
 border-radius:39%!important;box-shadow:none!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 touch-action:manipulation!important;cursor:pointer;
 filter:drop-shadow(0 5px 3px #73543659);
 transition:transform .24s cubic-bezier(.16,.7,.34,1)!important;
 -webkit-tap-highlight-color:transparent;
}
#app .zw106-hub .zw106-choice img{
 width:100%!important;max-width:218px;max-height:100%;
 height:auto!important;aspect-ratio:340 / 390;
 object-fit:contain;pointer-events:none;
}
#app .zw106-hub .zw106-choice:active{transform:scale(.91)!important}
#app .zw106-hub .zw106-choice:focus-visible{outline:4px solid #fff2b7!important;outline-offset:2px!important}
@media(orientation:landscape) and (max-height:650px){
 #app .zw106-hub.main-content{background-image:url('/storybook-games-v91/world-maze-landscape.webp')!important}
 #app .zw106-hub .zw106-heading{top:8%;left:66%;width:32%;height:16%;font-size:clamp(17px,4.2vh,26px);border-radius:21px}
 #app .zw106-hub .zw106-hero{top:27%;left:65%;width:33%;height:64%;border-width:3px;border-radius:18px}
 #app .zw106-hub .zw106-hero img{object-fit:cover;object-position:center}
 #app .zw106-hub .zw106-choices{top:11%;left:2%;width:61%;height:83%;column-gap:1%}
 #app .zw106-hub .zw106-choice img{max-width:230px;max-height:100%}
}
@media(max-width:355px) and (orientation:portrait){
 #app .zw106-hub .zw106-heading{top:9%;left:17%;width:77%;font-size:18px}
 #app .zw106-hub .zw106-hero{left:4.5%;width:91%;top:19%;height:31%}
 #app .zw106-hub .zw106-choices{top:53%;height:38%;left:2%;width:96%;column-gap:1%}
}
@media(prefers-reduced-motion:reduce){
 #app .zw106-hub .zw106-choice{transition:none!important}
}
/* End of a successful cuddle: make the pair visibly touch, with overlapping
   cheeks and bodies. Use already trimmed pencil sprites for real proximity. */
#app .zw105 .zw105-hug{
 width:min(220px,69%)!important;height:min(180px,49%)!important;
 align-items:flex-end!important;justify-content:center!important;
 overflow:visible!important;
}
#app .zw105 .zw105-hug-animal{
 width:60%!important;flex:0 0 60%!important;
 height:98%!important;position:relative;
}
#app .zw105 .zw105-hug-a{margin-right:-8%!important;z-index:2}
#app .zw105 .zw105-hug-b{margin-left:-8%!important;z-index:1}
#app .zw105 .zw105-hug-animal img{
 display:block;width:118%!important;max-width:none!important;height:100%!important;
 object-fit:contain;filter:drop-shadow(0 2px 1px rgba(104,77,59,.2))
}
#app .zw105 .zw105-hug.is-visible .zw105-hug-a{
 animation:zw106-closer-left 2.6s cubic-bezier(.2,.7,.3,1) both!important;
}
#app .zw105 .zw105-hug.is-visible .zw105-hug-b{
 animation:zw106-closer-right 2.6s cubic-bezier(.2,.7,.3,1) both!important;
}
#app .zw105 .zw105-hug-center{left:40%!important;top:-12%!important;width:25%!important;height:30%!important}
@keyframes zw106-closer-left{
 0%{transform:translateX(-35%) rotate(-6deg)}
 37%{transform:translateX(3%) rotate(3deg)}
 65%{transform:translateX(17%) rotate(8deg)}
 83%{transform:translateX(18%) rotate(5deg)}
 100%{transform:translateX(17%) rotate(6deg)}
}
@keyframes zw106-closer-right{
 0%{transform:translateX(35%) rotate(6deg)}
 37%{transform:translateX(-3%) rotate(-3deg)}
 65%{transform:translateX(-17%) rotate(-8deg)}
 83%{transform:translateX(-18%) rotate(-5deg)}
 100%{transform:translateX(-17%) rotate(-6deg)}
}
@media(orientation:landscape) and (max-height:650px){
 #app .zw105 .zw105-hug{width:min(205px,62%)!important;height:min(150px,52%)!important}
}
@media(prefers-reduced-motion:reduce){
 #app .zw105 .zw105-hug.is-visible .zw105-hug-a{transform:translateX(17%)!important;animation:none!important}
 #app .zw105 .zw105-hug.is-visible .zw105-hug-b{transform:translateX(-17%)!important;animation:none!important}
}
