/* shared by the home page and /products: the three game cards and their little animated scenes (real game art, no extra downloads) */
.games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.gm{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
a.gm:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(27,32,48,.12)}
.gm .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.gm .kind{align-self:flex-start;font:700 12px var(--b);letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--sand);color:var(--navy)}
.gm h3{font:700 22px var(--d)}
.gm p{color:var(--muted);font-size:15px}
.gm .go{margin-top:auto;padding-top:8px;font-weight:800;color:var(--orange)}
.scene{position:relative;height:190px;overflow:hidden}
.scene .pct{position:absolute;font:800 15px var(--d);color:var(--navy);background:var(--sun);border-radius:999px;padding:4px 10px;box-shadow:0 4px 0 rgba(0,0,0,.18)}

/* 1. cross the road */
.scene.road{--c:14%;background:
  url(/assets/curb-left.webp) 0 0/var(--c) 100% no-repeat,
  url(/assets/curb-right.webp) 100% 0/var(--c) 100% no-repeat,
  repeating-linear-gradient(180deg,rgba(255,255,255,.9) 0 18px,transparent 18px 34px) 38% 0/3px 100% no-repeat,
  repeating-linear-gradient(180deg,rgba(255,255,255,.9) 0 18px,transparent 18px 34px) 62% 0/3px 100% no-repeat,
  url(/assets/lane.webp) 0 0/24% 100% repeat-x;background-color:#5f5a58}
/* three lanes between the curbs; the chicken hops lane by lane (10%, then 22%) while traffic runs in the far lane */
.scene.road .chick{position:absolute;bottom:62px;left:max(7%,27px);width:52px;transform:translateX(-50%);z-index:2;animation:hop 6s ease-in-out infinite}
.scene.road .chick img{width:100%;display:block;animation:bob 6s ease-in-out infinite}
.scene.road .car{position:absolute;width:40px;left:74%;margin-left:-20px;top:-80px;animation:drive var(--t) linear infinite;animation-delay:var(--d)}
.scene.road .pct{top:12px;transform:translateX(-50%)}
.scene.road .pct:nth-of-type(1){left:26%}.scene.road .pct:nth-of-type(2){left:50%}
@keyframes hop{0%,12%{left:max(7%,27px);opacity:1}20%,40%{left:26%}48%,86%{left:50%;opacity:1}92%{left:50%;opacity:0}96%{left:max(7%,27px);opacity:0}100%{left:max(7%,27px);opacity:1}}
@keyframes bob{0%,12%,20%,40%,48%,100%{transform:translateY(0)}16%,44%{transform:translateY(-14px)}}
@keyframes drive{to{top:110%}}

/* 2. spin the wheel */
.scene.wheel{background:radial-gradient(circle at 50% 60%,#fff 0,#FFE9C2 70%);display:grid;place-items:center}
.scene.wheel img{width:150px;height:150px;animation:spin 7s cubic-bezier(.2,.7,.2,1) infinite;margin-top:22px}
.scene.wheel .pointer{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:22px solid var(--navy);z-index:2}
.scene.wheel .pct{top:14px;right:14px}
@keyframes spin{0%{transform:rotate(0)}60%,100%{transform:rotate(1470deg)}}

/* 3. fly high */
.scene.jet{background:linear-gradient(180deg,#0b1d3a,#1d3f72 60%,#3d6aa8)}
.scene.jet::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff8 1px,transparent 1.5px);background-size:38px 31px;opacity:.6}
.scene.jet svg.curve{position:absolute;inset:0;width:100%;height:100%}
.scene.jet .plane{position:absolute;width:64px;left:8%;bottom:14%;animation:fly 5s ease-in infinite}
.scene.jet .num{position:absolute;top:18px;left:0;right:0;text-align:center;font:800 40px var(--d);color:#fff;text-shadow:0 4px 14px rgba(0,0,0,.4)}
.scene.jet .num small{display:block;font:700 11px var(--b);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.scene.jet .runway{position:absolute;left:0;right:0;bottom:0;height:16px;background:repeating-linear-gradient(90deg,#26364f 0 22px,#9aa9c0 22px 34px,#26364f 34px 56px)}
@keyframes fly{0%{left:4%;bottom:12%;transform:rotate(0)}15%{left:10%;bottom:13%;transform:rotate(-10deg)}70%{left:62%;bottom:52%;transform:rotate(-30deg)}85%{left:100%;bottom:95%;transform:rotate(-40deg);opacity:1}86%,100%{left:110%;opacity:0}}

@media (max-width:820px){.games{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.scene *{animation:none!important}}
.scene.road > img.car{animation-duration:3.2s!important}
.scene.road > img.car:nth-of-type(1){animation-delay:0s!important}.scene.road > img.car:nth-of-type(2){animation-delay:-1.6s!important}