/* Games section (homepage #play), 18 Oct 2026: Garden Goals takes centre stage with a big picture of the game,
   the other games in a carousel below. The pictures are real screenshots of the games (scripts/shoot-game-art.cjs);
   the ball, the keeper, the 4th score dot and the GOOOAL! on the big one are animated on top. */
.game-stage{display:flex;flex-direction:column;gap:46px}

/* the big one */
.gs-hero{position:relative;display:flex;flex-direction:column;padding:48px 48px 40px;border:3px solid #092755;border-radius:28px;box-shadow:8px 9px 0 #092755;background:repeating-linear-gradient(90deg,#5fbf5c 0 70px,#55b452 70px 140px)}
.gs-hero:before{content:'';position:absolute;z-index:2;top:-2px;left:0;right:0;height:26px;background:var(--cap) 0 0/120px 26px repeat-x;transform:scaleY(-1);pointer-events:none;border-radius:26px 26px 0 0;filter:drop-shadow(0 -2px 0 #0927551f)}
.gs-screen{position:relative;z-index:1;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;color:inherit;text-align:left}
.gs-frame{position:relative;display:block;container-type:inline-size;border:5px solid #092755;border-radius:26px;overflow:hidden;background:#cfeefc;box-shadow:10px 11px 0 #ffe133,15px 16px 0 #092755;transform:rotate(-.8deg);transition:transform .25s}
.gs-frame>img{display:block;width:100%;height:auto}
.gs-screen:hover .gs-frame,.gs-screen:focus-visible .gs-frame{transform:rotate(0) translateY(-4px)}
.gs-screen:focus-visible{outline:none}.gs-screen:focus-visible .gs-frame{outline:4px solid #fff;outline-offset:4px}
.gs-keeper{position:absolute;left:43.96%;top:27.74%;width:12.08%;height:35.76%;background:url('/assets/keeper-v2.webp') center bottom/contain no-repeat;transform-origin:50% 85%;animation:gs-keep 5s ease-in-out infinite}
.gs-ball{position:absolute;left:45.53%;top:76.38%;width:8.95%;aspect-ratio:1;z-index:2;animation:gs-x 5s linear infinite}
.gs-ball>span{display:block;width:100%;height:100%;animation:gs-y 5s infinite}
.gs-ball img{display:block;width:100%;height:100%;filter:drop-shadow(0 .4cqw .3cqw #0005);animation:gs-spin 5s infinite}
.gs-dot{position:absolute;left:58.22%;top:6.74%;width:1.5%;aspect-ratio:1;margin:-.75% 0 0 -.75%;border-radius:50%;background:#ffe044;opacity:0;animation:gs-dot 5s infinite}
.gs-pop{position:absolute;left:23.59%;top:38.77%;width:10%;aspect-ratio:1;margin:-5% 0 0 -5%;border-radius:50%;border:.7cqw dashed #ffe133;opacity:0;animation:gs-pop 5s infinite}
.gs-goal{position:absolute;left:31%;top:19%;z-index:3;font-family:Bangers,Impact,sans-serif;font-size:9cqw;line-height:1;letter-spacing:.3cqw;color:#ffe133;-webkit-text-stroke:.35cqw #092755;paint-order:stroke fill;text-shadow:.5cqw .6cqw 0 #092755;transform:scale(0) rotate(-8deg);animation:gs-goal 5s infinite}
.gs-hover{position:absolute;left:50%;top:50%;z-index:4;display:flex;align-items:center;gap:12px;padding:18px 32px;border:4px solid #092755;border-radius:999px;background:#ffe133;color:#092755;font:800 28px/1 DM,Arial,sans-serif;box-shadow:4px 5px 0 #092755;transform:translate(-50%,-50%) scale(.8);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.gs-hover b{font-size:18px}
.gs-screen:hover .gs-hover,.gs-screen:focus-visible .gs-hover{opacity:1;transform:translate(-50%,-50%) scale(1)}
.gs-sticker{position:absolute;z-index:5;top:-34px;right:-22px;width:124px;height:124px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:3px solid #092755;border-radius:50%;background:#ee492b;color:#fff;font-family:Bangers,Impact,sans-serif;font-size:25px;letter-spacing:1px;line-height:1;box-shadow:3px 4px 0 #092755;transform:rotate(10deg);animation:gs-wobble 2.6s ease-in-out infinite}
.gs-sticker strong{font-weight:400;font-size:36px;color:#ffe133}
@keyframes gs-x{0%,18%{transform:translateX(0);opacity:1}40%,74%{transform:translateX(-26.4cqw);opacity:1}80%{transform:translateX(-26.4cqw);opacity:0}81%{transform:translateX(0);opacity:0}90%,100%{transform:translateX(0);opacity:1}}
@keyframes gs-y{0%{transform:translateY(0) scale(1)}9%{transform:translateY(-1.4cqw) scale(1)}18%{transform:translateY(0) scale(1);animation-timing-function:cubic-bezier(.2,.75,.45,1)}40%,80%{transform:translateY(-22.6cqw) scale(.42)}81%,100%{transform:translateY(0) scale(1)}}
@keyframes gs-spin{0%,18%{transform:rotate(0)}40%,100%{transform:rotate(-720deg)}}
@keyframes gs-keep{0%,90%,100%{transform:translate(0,0) rotate(0)}6%{transform:translateX(-1.2cqw) rotate(-3deg)}13%{transform:translateX(1cqw) rotate(3deg)}20%{transform:translate(0,0) rotate(0)}34%,74%{transform:translate(7cqw,1.6cqw) rotate(62deg)}}
@keyframes gs-dot{0%,41%{opacity:0;transform:scale(0)}44%{opacity:1;transform:scale(1.5)}48%,86%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(1)}}
@keyframes gs-pop{0%,39%{opacity:0;transform:scale(.3)}42%{opacity:1}54%,100%{opacity:0;transform:scale(1.9)}}
@keyframes gs-goal{0%,40%{transform:scale(0) rotate(-8deg)}45%{transform:scale(1.18) rotate(-6deg)}50%,72%{transform:scale(1) rotate(-6deg)}78%,100%{transform:scale(0) rotate(-6deg)}}
@keyframes gs-wobble{0%,100%{transform:rotate(10deg) scale(1)}50%{transform:rotate(4deg) scale(1.06)}}

.gs-copy{position:relative;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8px 40px;align-items:center;margin:-26px 36px 0;background:#fffdf1;border:3px solid #092755;border-radius:22px;padding:26px 32px 28px;box-shadow:6px 7px 0 #092755;transform:rotate(.5deg)}
.gs-label{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#075ec8}
.gs-label span{display:grid;place-items:center;width:38px;height:38px;border:2px solid #092755;border-radius:50%;background:#ffe133;color:#092755;font-family:Bangers,Impact,sans-serif;font-size:20px;letter-spacing:0;transform:rotate(-8deg)}
.gs-copy h3{font-family:Bangers,Impact,sans-serif;font-weight:400;font-size:62px;letter-spacing:1px;line-height:.95;margin:6px 0 14px;color:#092755;transform:rotate(-1.5deg);transform-origin:left}
.gs-copy h3 span{color:#ee492b;text-shadow:2px 3px 0 #ffe133}
.gs-body>p{font-size:16.5px;line-height:1.55;font-weight:500;color:#334967;margin:0 0 16px}
.gs-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0}
.gs-facts li{display:flex;align-items:center;gap:6px;padding:6px 12px;border:2px solid #092755;border-radius:999px;background:#e7f6ff;font-size:13.5px;font-weight:800;color:#092755}
.gs-facts li:nth-child(2){background:#fff3ab}.gs-facts li:nth-child(3){background:#e2f5e6}
.gs-facts b{font-weight:400}
.gs-cta{width:100%;justify-content:center;font-size:19px}

/* more games: a carousel below */
.mg-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}
.mg-title{margin:0;font-family:Bangers,Impact,sans-serif;font-size:40px;letter-spacing:1px;color:#092755;transform:rotate(-1.5deg)}
.mg-title:after{content:'swipe for more →';margin-left:14px;font-family:Caveat,cursive;font-size:24px;letter-spacing:0;color:#ee492b;vertical-align:middle}
.more-games.fits .mg-title:after{content:none}
.mg-nav{display:flex;gap:12px}
.more-games.fits .mg-nav,.more-games.fits .mg-dots{visibility:hidden}
.mg-btn{width:52px;height:52px;border-radius:50%;border:3px solid #092755;background:#ffe133;color:#092755;font:700 32px/1 DM,Arial,sans-serif;padding-bottom:4px;cursor:pointer;box-shadow:3px 4px 0 #092755}
.mg-btn:hover{transform:translateY(-2px)}.mg-btn:active{transform:translateY(1px)}
.mg-btn[disabled]{opacity:.35;cursor:default;transform:none}
.mg-btn:focus-visible,.mg-track:focus-visible{outline:4px solid #092755;outline-offset:4px}
.mg-track{list-style:none;margin:0 -12px;padding:8px 12px 18px;display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 12px;scrollbar-width:none;overscroll-behavior-x:contain}
.mg-track::-webkit-scrollbar{display:none}
.mg-card{flex:0 0 calc(50% - 14px);scroll-snap-align:start;display:flex;flex-direction:column;position:relative;border:3px solid #092755;border-radius:22px;background:#fffdf1;box-shadow:6px 7px 0 #092755;overflow:hidden;transition:transform .2s}
.mg-card:before{content:'';position:absolute;z-index:3;top:-2px;left:0;right:0;height:24px;background:var(--cap) 0 0/120px 24px repeat-x;transform:scaleY(-1);pointer-events:none}
.mg-card:hover{transform:translateY(-5px)}
.mg-art{position:relative;display:grid;place-items:center;width:100%;height:270px;padding:38px 30px 26px;border:0;border-bottom:3px solid #092755;border-radius:0;cursor:pointer;overflow:hidden}
.mg-pairs .mg-art{background:radial-gradient(circle at 20% 110%,#ffb59f 0 30%,transparent 31%),#ff8f73}
.mg-kit .mg-art{background:radial-gradient(circle at 85% 115%,#fff0a0 0 30%,transparent 31%),#ffe133}
.mg-art img{display:block;width:88%;height:auto;border:3px solid #092755;border-radius:12px;background:#fffdf1;box-shadow:5px 6px 0 #092755;transform:rotate(-2.5deg);transition:transform .25s}
.mg-kit .mg-art img{transform:rotate(2deg)}
.mg-art:hover img,.mg-art:focus-visible img{transform:rotate(0) scale(1.04)}
.mg-art:focus-visible{outline:4px solid #092755;outline-offset:-8px}
.mg-tag{position:absolute;z-index:2;top:30px;left:16px;font-size:11px;font-weight:800;letter-spacing:.7px;padding:5px 9px;background:#fffdf1;color:#092755;border:2px solid #092755;border-radius:6px;transform:rotate(-4deg)}
.mg-num{position:absolute;z-index:2;right:16px;bottom:8px;font-family:Bangers,Impact,sans-serif;font-size:44px;line-height:1;color:#092755;text-shadow:2px 2px 0 #fffdf1}
.mg-spark{position:absolute;z-index:2;right:22px;top:36px;font-size:30px;color:#075ec8;animation:gs-wobble 2.2s ease-in-out infinite}
.mg-kit .mg-spark{color:#ee492b}
.mg-info{padding:20px 26px 22px;display:flex;flex-direction:column;flex:1}
.mg-info h3{font-family:Lilita,Baloo,sans-serif;font-weight:400;font-size:32px;letter-spacing:-.4px;color:#092755;margin:0}
.mg-info p{font-size:15px;font-weight:500;line-height:1.55;color:#334967;margin:8px 0 16px;max-width:420px}
.mg-info .play-link{margin-top:auto}
.mg-dots{display:flex;justify-content:center;gap:8px}
.mg-dots i{width:10px;height:10px;border-radius:50%;background:#0927553a}
.mg-dots i.on{background:#092755}

@media(max-width:1050px){
 .gs-hero{padding:42px 30px 32px}
 .gs-copy{grid-template-columns:1fr;margin:-22px 16px 0}
 .gs-copy h3{font-size:54px}
 .gs-cta{width:auto}
 .mg-card{flex-basis:min(78%,460px)}
}
@media(max-width:760px){
 .game-stage{gap:36px}
 .gs-hero{padding:34px 14px 18px;border-radius:22px;box-shadow:5px 6px 0 #092755}
 .gs-frame{border-width:3px;border-radius:14px;box-shadow:5px 6px 0 #ffe133,8px 9px 0 #092755;transform:rotate(-1deg)}
 .gs-sticker{width:74px;height:74px;top:-26px;right:-8px;font-size:15px}
 .gs-sticker strong{font-size:21px}
 .gs-hover{display:none}
 .gs-copy{padding:20px 18px 22px;margin:-14px 4px 0;border-radius:18px;transform:none}
 .gs-copy h3{font-size:42px}
 .gs-body>p{font-size:15.5px}
 .gs-cta{width:100%}
 .mg-title{font-size:32px}
 .mg-title:after{font-size:20px;margin-left:8px}
 .mg-nav{display:none}
 .mg-track{gap:16px;margin:0 -20px;padding:8px 20px 16px;scroll-padding:0 20px}
 .mg-card{flex-basis:84%}
 .mg-art{height:200px;padding:34px 18px 20px}
 .mg-tag{top:26px;font-size:9.5px}
 .mg-num{font-size:34px}
 .mg-info{padding:16px 18px 18px}
 .mg-info h3{font-size:27px}
 .mg-info p{font-size:14px}
}
@media(max-width:370px){.mg-track{margin:0 -15px;padding:8px 15px 16px;scroll-padding:0 15px}}
@media(prefers-reduced-motion:reduce){
 .gs-keeper,.gs-ball,.gs-ball>span,.gs-ball img,.gs-sticker,.mg-spark{animation:none}
 .gs-dot,.gs-pop,.gs-goal{display:none}
 .gs-frame,.mg-art img,.mg-card{transition:none}
}