@font-face{font-family:PlayBody;src:url('fonts/body.woff2') format('woff2');font-display:swap}@font-face{font-family:PlayDisplay;src:url('fonts/display.woff2') format('woff2');font-display:swap}
:root{font-family:PlayBody,system-ui,sans-serif;background:#e9f2fa;color:#122c48;font-size:16px}*{box-sizing:border-box}body{margin:0}a{color:inherit}a,button{font:inherit}a:focus-visible,button:focus-visible,.gallery:focus-visible{outline:3px solid #1686e7;outline-offset:3px}.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{clip-path:none;width:auto;height:auto;background:white;padding:12px;z-index:99}.logo{display:inline-flex;gap:10px;align-items:center;text-decoration:none;font-family:PlayDisplay,sans-serif;font-weight:800;letter-spacing:.06em}.logo-mark{display:inline-grid;place-items:center;background:#126ac1;color:white;width:30px;height:30px;border-radius:7px;font-size:16px}header{height:50px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 max(24px,calc((100vw - 1200px)/2));background:#f5faff}footer{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:34px max(28px,calc((100vw - 1200px)/2));background:transparent;color:#24435d}footer nav{display:flex;gap:22px}footer nav a{padding:8px 0}footer .logo{color:#17416a}
.home{background:#123d69;min-height:100vh}.home footer,.home footer .logo{color:#e9f4ff}.home .logo-mark{background:#e5f3ff;color:#174671}.mosaic{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-auto-flow:dense;gap:11px;padding:20px 28px}.tile,.recommendation,.rail-card{min-width:0;text-decoration:none}.tile{position:relative;display:block;aspect-ratio:1}.tile.feature{grid-column:span 3;grid-row:span 3}.tile.feature:first-child{grid-column:3 / span 3;grid-row:1 / span 3}.tile.feature:nth-child(4){grid-column:8 / span 3;grid-row:2 / span 3}.tile .card-art{height:100%;border:1px solid #ffffff30}.tile>span{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#0b213df2);padding:24px 8px 10px;color:white;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;font-weight:700}.tile:hover>span,.tile:focus-visible>span{opacity:1}.tile:hover .card-art{filter:brightness(.84)}.tile:active,.recommendation:active,.rail-card:active{transform:scale(.98)}
.card-art{position:relative;overflow:hidden;aspect-ratio:1;background:#c7dbe9;border-radius:6px;flex:none}.card-art img{display:block;width:100%;height:100%;object-fit:cover}.js .image-pending img{opacity:0}.js .image-pending:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 15%,#f3faffaa 50%,transparent 85%);transform:translateX(-100%);animation:loading 1.15s ease-in-out infinite}.image-error:after{content:'◇';position:absolute;inset:0;display:grid;place-items:center;color:#567a99;font-size:24px}.image-error img{visibility:hidden}@keyframes loading{to{transform:translateX(100%)}}
.review-page{background:#f5f9fc}.columns{display:grid;grid-template-columns:minmax(0,1fr) 282px;gap:30px;max-width:1200px;margin:0 auto;padding:30px 0 50px;align-items:start}.review{min-width:0}.review-identity{display:grid;grid-template-columns:160px minmax(0,1fr);gap:28px;align-items:center;padding-bottom:25px;border-bottom:1px solid #d5e1ea}.identity-icon{width:160px;height:160px;border-radius:9px}.identity-content h1,.section h2,.rail h2,.content h1{font-family:PlayDisplay,system-ui,sans-serif;letter-spacing:-.025em}.identity-content h1{font-size:32px;line-height:1.15;margin:0 0 24px}.identity-metrics{display:flex;gap:35px;flex-wrap:wrap}.identity-metrics div{display:grid;gap:6px}.identity-metrics strong{font-size:18px}.identity-rating{display:flex;align-items:center;gap:10px;margin-top:22px}.identity-rating strong{font-size:23px}.stars{color:#f2a900;font-size:26px;letter-spacing:-1px;white-space:nowrap}.review-facts{margin:20px 0 0;border-top:1px solid #dce6ee}.review-facts div{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-bottom:1px solid #dce6ee;padding:13px 10px;font-size:15px}.review-facts dt{color:#52697e}.review-facts dd{margin:0;font-weight:600}.section{margin-top:36px}.section h2,.rail h2{font-size:21px;line-height:1.25;margin:0 0 16px}.review-description h2{border-left:4px solid #2085da;padding-left:12px}.section p{line-height:1.7;margin:0}.store-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}.store-button{display:flex;align-items:center;justify-content:center;gap:13px;min-height:70px;text-decoration:none;background:#0966b8;color:white;border-radius:7px;font-family:PlayDisplay,sans-serif;font-size:19px;font-weight:700}.store-button:hover{background:#07508f}.store-button img{filter:brightness(0) invert(1)}.store-button span{display:grid;gap:3px}.store-button small{font:600 10px PlayBody,sans-serif;letter-spacing:.07em}.gallery-wrap{position:relative}.gallery{display:flex;gap:12px;overflow:auto;scroll-snap-type:x proximity;padding-bottom:8px}.gallery .shot{aspect-ratio:auto;flex:none;border-radius:6px}.gallery .shot img{height:260px;width:auto;max-width:100%;object-fit:contain;scroll-snap-align:start}.gallery-prev,.gallery-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:white;color:#153f68;font-size:28px;box-shadow:0 2px 12px #1d416044;cursor:pointer}.gallery-prev{left:5px}.gallery-next{right:5px}.gallery-prev[hidden],.gallery-next[hidden]{display:none}.gallery-prev:disabled,.gallery-next:disabled{opacity:.5}.recommendations{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.recommendation .card-art{width:100%}.recommendation>span{display:block;text-align:center;font-size:14px;font-weight:600;padding:8px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rail{background:#e8f1f8;border-radius:7px;padding:20px}.rail h2{padding:0 0 16px;border-bottom:1px solid #cbdde9}.rail-card{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #d2e1ed}.rail-card .card-art{width:56px;height:56px}.rail-copy{display:grid;gap:6px;min-width:0;flex:1}.rail-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.rail-copy small{font-size:14px;font-weight:800;color:#a35f00}.rail-copy small span{color:#e59800}.content{max-width:1200px;margin:30px auto;padding:20px}.info{min-height:220px}
@media(max-width:1240px){.columns,.content{margin-left:24px;margin-right:24px}}
@media(max-width:800px){.mosaic{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;gap:10px;padding:16px 20px}.tile.feature:first-child{grid-column:span 2;grid-row:span 2}.tile.feature:nth-child(4){grid-column:auto;grid-row:auto}.tile>span{opacity:1}.columns{display:flex;flex-direction:column;margin:0 20px;padding:22px 0 35px;gap:26px}.review,.rail{width:100%}.rail{order:1}.review-identity{grid-template-columns:85px minmax(0,1fr);gap:18px;align-items:start}.identity-icon{width:85px;height:85px}.identity-content h1{font-size:24px;margin:0 0 12px}.identity-metrics{gap:10px 18px}.identity-metrics strong{font-size:14px}.identity-rating{margin-top:12px;gap:7px;flex-wrap:wrap}.identity-rating .stars{font-size:20px}.identity-rating strong{font-size:18px}.review-facts div{padding:12px 8px}.section h2,.rail h2{font-size:20px}.store-actions{gap:10px}.store-button{min-height:64px;font-size:16px;gap:8px}.store-button img{width:23px}.recommendations{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.gallery .shot img{height:220px}footer{padding:28px 20px;align-items:flex-start;flex-direction:column}footer nav{flex-wrap:wrap}header{padding:0 20px}.content{margin:15px 0}}
@media(max-width:360px){.store-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.js .image-pending:after{animation:none;transform:none;background:#d7e8f4}}
.stars{position:relative;color:#c2d2df}.stars:before{content:'★★★★★';position:absolute;inset:0 auto 0 0;width:var(--fill,0%);overflow:hidden;color:#e79a00;white-space:nowrap}.play-button{display:flex;align-items:center;justify-content:center;gap:18px;min-height:68px;max-width:430px;background:#086fc4;color:#fff;border-radius:7px;text-decoration:none;font-size:19px;font-weight:800}.play-button:hover{background:#07599e}.game-loading{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:#163c65;font-weight:700}.game-loading[hidden]{display:none}
@media(min-width:801px){.mosaic{grid-template-columns:repeat(9,minmax(0,1fr))}.tile.feature:first-child{grid-column:2 / span 3}.tile.feature:nth-child(4){grid-column:7 / span 3}}
.review-description ol{margin:0;padding-left:22px}.review-description li{line-height:1.7;padding-left:4px;margin:0 0 8px}

/* Designer adjustment: retain the existing grid and detail template. */
.home{background:#2d7ff9}
.tile.feature{grid-column:span 2;grid-row:span 2}
.tile.feature:first-child{grid-column:2 / span 2;grid-row:1 / span 2}
.tile.feature:nth-child(4){grid-column:7 / span 2;grid-row:2 / span 2}
.review-page{background:#fff}
.review-identity{grid-template-columns:185px minmax(0,1fr);border-bottom:0}
.identity-icon{width:185px;height:185px}
.review-facts{border-top:0}
.review-facts div:last-child{border-bottom:0}
.gallery{scrollbar-width:none;-ms-overflow-style:none;padding-bottom:0}
.gallery::-webkit-scrollbar{display:none}
.rail-card .card-art{width:70px;height:70px}
@media(max-width:800px){
 .tile.feature:first-child{grid-column:span 2;grid-row:span 2}
 .tile.feature:nth-child(4){grid-column:span 2;grid-row:span 2}
 .review-identity{grid-template-columns:100px minmax(0,1fr);gap:18px}
 .identity-icon{width:100px;height:100px}
}
.review-page .store-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.apk-button:disabled{border:0;background:#e3eaf0;color:#52697e;cursor:not-allowed}
@media(max-width:800px){
 .review-page .store-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .review-page .apk-button{grid-column:1/-1}
}

/* Detail identity hierarchy */
.review-page .identity-content h1{font-size:38px}
.review-page .identity-metrics strong{font-size:16px;font-weight:600}
.review-page .identity-rating strong{font-size:19px;font-weight:600}
@media(max-width:800px){
 .review-page .identity-content h1{font-size:27px;overflow-wrap:anywhere}
 .review-page .identity-metrics strong{font-size:13px}
 .review-page .identity-rating strong{font-size:16px}
}

/* Featured games rail */
.review-page .rail h2{border-bottom:0}
.review-page .rail-card:last-child{border-bottom:0}
.review-page .rail-copy strong{font-size:16px}

/* Two store actions above a full-width APK action. */
.review-page .store-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.review-page .apk-button{grid-column:1/-1}

/* Feedback on detail recommendations and available actions. */
.review-page .rail-copy small{color:#647689;font-weight:500}
.review-page .rail-copy small span{color:#e59800}
.review-page .rail-card,.review-page .recommendation,.review-page .store-button:not(:disabled),.review-page .play-button,.review-page .gallery-prev,.review-page .gallery-next{transition:background-color .16s ease,box-shadow .16s ease,transform .16s ease,filter .16s ease}
@media(hover:hover){
 .review-page .rail-card:hover{background:#d5e8f8;box-shadow:0 0 0 6px #d5e8f8;border-radius:3px}
 .review-page .recommendation:hover .card-art{filter:brightness(.82)}
 .review-page .recommendation:hover>span{color:#0966b8}
 .review-page .store-button:not(:disabled):hover,.review-page .play-button:hover{background:#064c8c;box-shadow:0 5px 12px #0b477c55;transform:translateY(-2px)}
 .review-page .gallery-prev:not(:disabled):hover,.review-page .gallery-next:not(:disabled):hover{background:#d8ebfb;box-shadow:0 4px 16px #153f6866}
}
.review-page .rail-card:active,.review-page .recommendation:active{transform:scale(.96)}
.review-page .store-button:not(:disabled):active,.review-page .play-button:active{background:#043964;transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 5px #002c4b66}
.review-page .gallery-prev:not(:disabled):active,.review-page .gallery-next:not(:disabled):active{background:#b8d8f1;transform:translateY(-50%) scale(.9)}
.review-page .rail-card:focus-visible,.review-page .recommendation:focus-visible,.review-page .store-button:focus-visible,.review-page .play-button:focus-visible,.review-page .gallery-prev:focus-visible,.review-page .gallery-next:focus-visible{outline:3px solid #2d7ff9;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.review-page .rail-card,.review-page .recommendation,.review-page .store-button,.review-page .play-button,.review-page .gallery-prev,.review-page .gallery-next{transition:none}}

/* On phones, stagger the two featured tiles and show artwork only. */
@media(max-width:800px){
 .home .mosaic{grid-auto-flow:row dense}
 .home .tile.feature:first-child{grid-column:1 / span 2;grid-row:1 / span 2}
 .home .tile.feature:nth-child(4){grid-column:2 / span 2;grid-row:3 / span 2}
 .home .tile>span{display:none}
}
@media(max-width:800px){
 .review-page .identity-metrics{display:none}
 .review-page .review-facts div:last-child{border-bottom:0}
}
@media(max-width:800px){
 .review-page .store-actions .store-button{min-height:52px}
}

/* Keep the gap from each detail heading to its content consistent. */
.review-page .section>h2,.review-page .rail>h2{margin:0 0 20px;padding-bottom:0}
.review-page .rail>h2 + .rail-card{padding-top:0}
.review-page .rail{background:transparent}
@media(min-width:801px){.review-page .columns{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:800px){.review-page .rail{width:max(300px,100%);max-width:100vw;align-self:center}}

/* A restrained hover that leaves the rail and dividers in place. */
.review-page .rail-card .card-art,.review-page .rail-card .rail-copy strong{transition:box-shadow .16s ease,filter .16s ease,color .16s ease}
@media(hover:hover){
 .review-page .rail-card:hover{background:transparent;box-shadow:none}
 .review-page .rail-card:hover .card-art{filter:brightness(.91);box-shadow:0 0 0 3px #b7d9fa}
 .review-page .rail-card:hover .rail-copy strong{color:#0966b8}
}
@media(prefers-reduced-motion:reduce){.review-page .rail-card .card-art,.review-page .rail-card .rail-copy strong{transition:none}}
@media(max-width:800px){
 .review-page .columns{margin-left:14px;margin-right:14px}
 .review-page .rail{width:100%;max-width:100%;padding:0}
 .review-page footer{padding-left:14px;padding-right:14px}
}

/* Desktop identity facts use compact, labelled icons. */
@media(min-width:801px){
 .review-page .identity-metrics{display:flex;flex-wrap:nowrap;gap:20px;min-width:0}
 .review-page .identity-metrics .identity-metric{display:flex;align-items:center;gap:6px;min-width:0;color:#52697e}
 .review-page .identity-metric svg{flex:none}
 .review-page .identity-metric strong{color:#122c48;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(min-width:801px) and (max-width:1050px){
 .review-page .review-identity{grid-template-columns:120px minmax(0,1fr);gap:16px}
 .review-page .identity-icon{width:120px;height:120px}
 .review-page .identity-metrics{gap:10px}
}

/* Short pages fill the viewport while the footer stays in normal flow. */
body{min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1}
.info-page .info{max-width:860px;line-height:1.7}
.info-page .info h1{margin:0 0 24px;font-size:36px;line-height:1.15}
.info-page .info h2{font-family:PlayDisplay,system-ui,sans-serif;font-size:21px;line-height:1.3;margin:30px 0 12px}
.info-page .info p{margin:0 0 16px}
@media(max-width:800px){.info-page .info h1{font-size:28px}.info-page .info h2{font-size:20px}}
@media(max-width:400px){.info-page header{padding-left:14px;padding-right:14px;gap:10px}}

/* Keep game icon slots fixed while their images load. */
.js .card-art.image-pending:not(.shot)::after{
 content:'';position:absolute;inset:50% auto auto 50%;width:24px;height:24px;
 border:2px solid #ffffffa8;border-top-color:#1875cf;border-radius:50%;
 background:none;transform:translate(-50%,-50%);
}
@media(prefers-reduced-motion:reduce){
 .js .card-art.image-pending:not(.shot)::after{animation:none;transform:translate(-50%,-50%)}
}
.home footer{padding-left:28px;padding-right:28px}
@media(max-width:800px){.home footer{padding-left:20px;padding-right:20px}}

/* More room for discovery on wide phones and tablets. */
@media(min-width:500px) and (max-width:639px){
 .home .mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}
 .home .tile.feature:nth-child(4){grid-column:3 / span 2;grid-row:3 / span 2}
}
@media(min-width:640px) and (max-width:800px){
 .home .mosaic{grid-template-columns:repeat(6,minmax(0,1fr))}
 .home .tile.feature:nth-child(4){grid-column:5 / span 2;grid-row:3 / span 2}
}
@media(min-width:801px) and (max-width:1050px){
 .home .mosaic{grid-template-columns:repeat(7,minmax(0,1fr))}
 .home .tile.feature:nth-child(4){grid-column:6 / span 2;grid-row:2 / span 2}
}

/* Tablet details use a single reading column. */
@media(min-width:768px) and (max-width:1050px){
 .review-page .rail{display:none}
 .review-page .columns{grid-template-columns:minmax(0,1fr)}
}
.review-page .identity-metric svg{color:#777}
@media(max-width:800px){.review-page .review-identity{align-items:center}}

/* A single score without a duplicate progress bar. */
.review-page .rating-card{display:flex;align-items:center;gap:24px;max-width:500px;padding:20px 24px;background:#f3f7fb;border-radius:10px}
.review-page .rating-score{display:grid;gap:4px;min-width:92px;padding-right:24px;border-right:1px solid #d7e1e9}
.review-page .rating-score strong{font-family:PlayDisplay,system-ui,sans-serif;font-size:48px;line-height:1;letter-spacing:-.03em}
.review-page .rating-score>span{font-size:14px;color:#596b7b}
.review-page .rating-detail{display:grid;gap:7px;min-width:0}
.review-page .rating-detail .stars{font-size:25px;line-height:1}
@media(max-width:800px){
 .review-page .rating-card{gap:20px;padding:18px 20px}
 .review-page .rating-score{min-width:82px;padding-right:20px}
 .review-page .rating-score strong{font-size:40px}
 .review-page .rating-detail .stars{font-size:23px}
}

/* Footer: clear separation, compact navigation, and visible link states. */
footer{border-top:1px solid #dbe5ed;gap:20px}
footer .logo{font-size:15px;letter-spacing:.045em}
footer .logo-mark{width:28px;height:28px;font-size:15px}
footer nav{gap:24px;align-items:center}
footer nav a{display:inline-flex;align-items:center;min-height:44px;padding:0;text-decoration:none;font-size:14px;font-weight:600;color:inherit;transition:color .16s ease}
footer nav a:hover{color:#0966b8;text-decoration:underline;text-underline-offset:4px}
footer nav a:active{opacity:.65}
.home footer{border-top-color:#ffffff55}
.home footer nav a:hover{color:#fff}
@media(max-width:800px){
 footer{gap:12px;padding-top:22px;padding-bottom:22px}
 footer nav{gap:22px}
}
@media(prefers-reduced-motion:reduce){footer nav a{transition:none}}

/* Blue footer across the site. */
footer,.home footer{background:#0075e0;color:#fff;border-top-color:transparent}
footer .logo,.home footer .logo{color:#fff}
footer .logo-mark,.home footer .logo-mark{background:#fff;color:#0075e0}
footer nav a:hover,.home footer nav a:hover{color:#fff}
footer nav a:focus-visible{outline-color:#fff}
.review-page .review-facts div{border-bottom-color:#edf2f5}
.review-page .identity-metric svg{color:#999}
@media(min-width:801px){.review-page .rating-card{max-width:none;width:100%}}
.review-page .identity-metric strong,.review-page .identity-rating strong{color:#666}
.review-page .identity-metric strong,.review-page .identity-rating strong{font-weight:500}
.review-page .review-description>p{font-size:18px}
.review-page .identity-metric strong,.review-page .identity-rating strong{color:#52697e}
.home .tile{border-radius:6px;overflow:hidden}
.review-page .rail-card{border-bottom-color:#edf2f5}
@media(max-width:800px){
 .home .mosaic{padding-left:14px;padding-right:14px}
 .home footer{padding-left:14px;padding-right:14px}
}

/* A brief elastic response without moving neighboring tiles. */
.home .tile{transition:transform .28s cubic-bezier(.2,1.6,.4,1)}
.home .tile .card-art img{transition:transform .32s cubic-bezier(.2,1.6,.4,1)}
@media(hover:hover){.home .tile:hover .card-art img{transform:scale(1.05)}}
.home .tile:active{transform:scale(.95);transition-duration:.1s}
.home .tile:active .card-art img{transform:scale(.98);transition-duration:.1s}
@media(prefers-reduced-motion:reduce){
 .home .tile,.home .tile .card-art img{transition:none}
 .home .tile:hover .card-art img,.home .tile:active,.home .tile:active .card-art img{transform:none}
}
.home .tile,.home .tile .card-art{border-radius:12px}

/* Separate detail modules consistently; heading-to-content remains 20px. */
.review-page .review-identity{padding-bottom:0}
.review-page .review-facts{margin-top:40px}
.review-page .section{margin-top:40px}
.review-page .store-actions{margin-top:40px}

/* Soft sheen and a compact pulse while game artwork loads. */
.js .card-art.image-pending:not(.shot)::before{
 content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(110deg,transparent 20%,#ffffff70 48%,transparent 76%);
 transform:translateX(-100%);animation:icon-sheen 1.7s ease-in-out infinite;
}
.js .card-art.image-pending:not(.shot)::after{
 z-index:2;width:6px;height:6px;border:0;background:#397ab6;
 border-radius:50%;box-shadow:-11px 0 #397ab6,11px 0 #397ab6;
 transform:translate(-50%,-50%);animation:icon-pulse 1.05s ease-in-out infinite;
}
@keyframes icon-sheen{0%,15%{transform:translateX(-100%)}65%,100%{transform:translateX(100%)}}
@keyframes icon-pulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.8)}50%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){
 .js .card-art.image-pending:not(.shot)::before{animation:none;opacity:0}
 .js .card-art.image-pending:not(.shot)::after{animation:none;opacity:.8;transform:translate(-50%,-50%)}
}

/* Touch feedback follows the desktop hover treatment without the browser tint. */
a,button{-webkit-tap-highlight-color:transparent}
@media(hover:none){
 .home .tile:active{transform:none}
 .home .tile:active .card-art{filter:brightness(.84)}
 .home .tile:active .card-art img{transform:scale(1.05)}
 .review-page .rail-card:active,.review-page .recommendation:active{transform:none}
 .review-page .rail-card:active .card-art{filter:brightness(.91);box-shadow:0 0 0 3px #b7d9fa}
 .review-page .rail-card:active .rail-copy strong,.review-page .recommendation:active>span{color:#0966b8}
 .review-page .recommendation:active .card-art{filter:brightness(.82)}
 .review-page .store-button:not(:disabled):active,.review-page .play-button:active{background:#064c8c;box-shadow:0 5px 12px #0b477c55;transform:none}
 .review-page .gallery-prev:not(:disabled):active,.review-page .gallery-next:not(:disabled):active{background:#d8ebfb;box-shadow:0 4px 16px #153f6866;transform:translateY(-50%)}
}
@media(hover:none) and (prefers-reduced-motion:reduce){.home .tile:active .card-art img{transform:none}}
.js .card-art.image-pending:not(.shot){background:#e5f2ff}

/* Dedicated browser game */
.game-page .play-page-content{max-width:1200px;margin:0 auto;padding:32px 24px 40px}.play-heading{display:flex;align-items:center;gap:18px;margin-bottom:20px}.play-icon{width:72px;height:72px;flex:none;border-radius:14px;overflow:hidden}.play-icon img{width:100%;height:100%;object-fit:cover}.play-heading h1{font-size:32px;line-height:1.15;margin:0 0 6px}.play-heading p{color:#64748b;margin:0}.play-frame{position:relative;width:100%;aspect-ratio:16/10;background:#102e50;border-radius:12px;overflow:hidden}.play-frame iframe{display:block;width:100%;height:100%;border:0}@media(max-width:600px){.game-page .play-page-content{padding:24px 14px 40px}.play-heading h1{font-size:26px}.play-icon{width:60px;height:60px}.play-frame{aspect-ratio:4/3}}

/* Online game entry for API-provided browser games */
.review-page .online-game-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;background:#f0f7ff;border:1px solid #dfedfa;border-radius:14px}
.review-page .online-game-info{display:flex;align-items:center;gap:18px;min-width:0}
.review-page .online-game-icon{width:80px;height:80px;flex:none;border-radius:12px;overflow:hidden}
.review-page .online-game-icon img{display:block;width:100%;height:100%;object-fit:cover}
.review-page .online-game-copy{display:grid;gap:7px;min-width:0}
.review-page .online-game-copy strong{font-family:PlayDisplay,system-ui,sans-serif;font-size:20px;line-height:1.25;color:#102d4e}
.review-page .online-game-copy span{font-size:15px;line-height:1.4;color:#61758a}
.review-page .online-game-card .play-button{flex:none;min-height:52px;padding:0 22px;gap:10px;border-radius:9px;font-size:16px;font-weight:700;white-space:nowrap}
.online-play-symbol{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ffffff2b}
.online-play-arrow{margin-left:8px;font-size:20px;line-height:1}
@media(max-width:600px){.review-page .online-game-card{flex-direction:column;align-items:stretch;gap:18px;padding:18px}.review-page .online-game-icon{width:64px;height:64px;border-radius:10px}.review-page .online-game-info{gap:14px}.review-page .online-game-copy strong{font-size:18px}.review-page .online-game-card .play-button{max-width:none;width:100%;min-height:48px}}

/* Match the detail page layout around the playable game. */
.game-page .play-columns{margin:0;max-width:none;padding:0;gap:30px}
.game-page .play-columns .rail{padding-top:0}
@media(max-width:800px){.game-page .play-columns{margin:0;gap:40px}}

/* Let the playable area reach both edges on mobile. */
@media(max-width:800px){.game-page .play-page-content{padding-left:14px;padding-right:14px}.game-page .play-frame{width:calc(100% + 28px);margin-left:-14px;border-radius:0}}

/* Shared illustrated loading state for browser games. */
.game-loading{background:#082e78 url("game-loading-general.webp") center / cover no-repeat}
.loading-caption{font-family:PlayDisplay,system-ui,sans-serif;font-size:clamp(20px,3vw,28px);font-weight:700;letter-spacing:.01em;color:#fff;text-shadow:0 2px 10px #001c5a}
.loading-dots{display:inline-flex;width:1em}.loading-dots span{animation:loading-dot 1.2s infinite ease-in-out}.loading-dots span:nth-child(2){animation-delay:.15s}.loading-dots span:nth-child(3){animation-delay:.3s}
@keyframes loading-dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.loading-dots span{animation:none;opacity:1}}

@media(max-width:800px){.game-page .play-page-content{padding-top:0}}

@media(max-width:800px){.review-page .gallery-prev,.review-page .gallery-next{display:none}}

/* Lift the home game cards off the blue background. */
.home .tile{box-shadow:0 3px 8px rgba(8,40,105,.24),0 8px 18px rgba(8,40,105,.14)}

.home .tile .card-art{border:0}
.home .tile::after{content:'';position:absolute;inset:0;border:1px solid #fff;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .18s ease}

.home .tile:active::after,.home .tile:focus-visible::after{opacity:1}
@media(prefers-reduced-motion:reduce){.home .tile::after{transition:none}}

/* Home placeholders blend into the homepage canvas while artwork loads. */
.js .home .card-art.image-pending:not(.shot){background:#2d7ff9}

/* Desktop grid adapts around the existing nine-column layout. */
@media (min-width:801px) and (max-width:1199.98px){
 .home .mosaic{grid-template-columns:repeat(7,minmax(0,1fr))}
 .home .tile.feature:nth-child(4){grid-column:6 / span 2;grid-row:2 / span 2}
}
@media (min-width:1921px){
 .home .mosaic{grid-template-columns:repeat(11,minmax(0,1fr))}
 .home .tile.feature:nth-child(4){grid-column:9 / span 2;grid-row:2 / span 2}
}

/* Light loading dots remain visible against the home canvas. */
.js .home .card-art.image-pending:not(.shot)::after{background:#eaf4ff;box-shadow:-11px 0 #eaf4ff,11px 0 #eaf4ff}

/* Keep the home footer compact without reducing link targets. */
.home footer{padding-top:12px;padding-bottom:12px}
@media(max-width:800px){.home footer{gap:8px;padding-top:12px;padding-bottom:12px}}

/* Start the home grid with its first 2×2 featured card. */
.home .tile.feature:first-child{grid-column:1 / span 2;grid-row:1 / span 2}

/* Animate the whole home card; keep image and placeholder colors in sync. */
.home{background:#4b91fa}
.js .home .card-art.image-pending:not(.shot){background:#4b91fa}
@media(hover:hover){.home .tile:hover{transform:scale(1.05);z-index:2}}
.home .tile:hover .card-art img,.home .tile:active .card-art img{transform:none}
.home .tile:active{transform:scale(.95);z-index:2}
@media(hover:none){.home .tile:active{transform:scale(.95)}.home .tile:active .card-art img{transform:none}}
@media(prefers-reduced-motion:reduce){.home .tile:hover,.home .tile:active{transform:none}}

/* Home background and loading placeholders share the same color. */
.home{background:#1596ff}
.js .home .card-art.image-pending:not(.shot){background:#1596ff}

/* Scale icon rounding with the icon size across the site. */
.home .tile,.home .tile .card-art,.review-page .identity-icon,.review-page .rail-card .card-art,.review-page .recommendation .card-art,.review-page .online-game-icon,.game-page .play-icon{border-radius:14%}

/* Match the visible corner radius of featured cards to one grid cell. */
.home .tile.feature,.home .tile.feature .card-art{border-radius:calc(7% - .77px)}
@media(max-width:800px){.home .tile.feature,.home .tile.feature .card-art{border-radius:calc(7% - .7px)}}

/* Keep offscreen/background placeholders static; reveal decoded covers individually. */
.js .card-art.image-pending:not([data-image-loading="active"])::before,.js .card-art.image-pending:not([data-image-loading="active"])::after{animation-play-state:paused}
.js .card-art.image-pending[data-image-loading="active"]::before,.js .card-art.image-pending[data-image-loading="active"]::after{animation-play-state:running}
@keyframes an-cover-settle{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){.js .card-art img.is-cover-ready{animation:an-cover-settle .24s cubic-bezier(.16,1,.3,1) var(--cover-reveal-delay,0ms) backwards}}