/* Touch/no-hover uses the original complete cover. 3D is a mouse/hover enhancement. */
.page.home { max-width:1600px; padding-inline:clamp(20px,3.5vw,56px); }
.portal-page:has(.page.home) .header-inner { max-width:1600px; padding-inline:clamp(20px,3.5vw,56px); }
.home .game-grid,.related .game-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 20px; padding-top:0; }
.game-card--art { position:relative; min-width:0; border:0; background:transparent; box-shadow:none; align-self:start; }
.game-card--art .cover-link { display:block; position:relative; border-radius:13px; clip-path:none; overflow:hidden; }
.game-card--art .depth-scene { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:13px; background:#e2edf1; transform:none; }
.depth-scene>.depth-flat-cover { display:block; width:100%; height:100%; }
.depth-scene>.depth-flat-cover>img { width:100%; height:100%; object-fit:contain; object-position:center; transform:none; }
.depth-scene>.depth-plate,.depth-scene>.depth-source { display:none; }
.game-card--art .depth-scene .play-peek { display:none; }
.game-card--art .game-caption { display:block; position:relative; min-height:44px; margin:0; padding:12px 48px 8px 4px; background:transparent; }
.game-card--art .game-caption .card-category { display:block; margin:0; color:#526e7d; font-size:11px; font-weight:750; line-height:1.5; text-transform:uppercase; letter-spacing:1px; }
.game-card--art .game-caption h3.sr-only { margin:0; }
.game-card--art>.favorite { top:auto; right:0; bottom:0; z-index:8; width:44px; min-width:44px; height:44px; color:#173b51; background:#fffffff0; box-shadow:0 2px 8px #10283f13; }
.game-card--art>.favorite[aria-pressed="true"] { color:#d54968; }
.game-card--art .cover-link:focus-visible { outline-offset:5px; }
@media(max-width:1000px) { .home .game-grid,.related .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
 .page.home { padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px)); }
 .portal-page:has(.page.home) .header-inner { padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); }
 .game-card--art .game-caption .card-category { font-size:10px; letter-spacing:.8px; }
}
@media(max-width:380px) {
 .header-inner { gap:4px; }
 .brand img { width:96px; }
 .site-header nav>a { min-width:44px; padding-inline:4px; }
 .site-header nav>a:last-child { font-size:10px; }
 .portal-language { width:48px; min-width:48px; }
}
@media(hover:hover) and (pointer:fine) {
 .home .game-grid,.related .game-grid { column-gap:56px; row-gap:56px; padding-top:32px; }
 .game-card--art:hover,.game-card--art:focus-within { z-index:3; transform:none; }
 .game-card--art .cover-link { border-radius:20px; overflow:visible; }
 .game-card--art .cover-link:focus-visible { outline-offset:9px; }
 .game-card--art .depth-scene { aspect-ratio:4/3; overflow:visible; isolation:auto; border-radius:20px; background:transparent; transform-style:preserve-3d; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .3s ease; }
 .depth-scene.depth-moving { transition:transform .09s linear; }
 .depth-scene>.depth-flat-cover { display:none; }
 .depth-scene>.depth-source,.depth-plate>.depth-source { display:contents; }
 .game-card--art .depth-plate { display:block; position:absolute; inset:4% -3% -2%; overflow:hidden; border-radius:20px; background:#173b51; box-shadow:0 13px 24px #10283f24; transform:translateZ(-24px); transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .35s; }
 .game-card--art .depth-plate img { width:100%; height:100%; object-fit:cover; object-position:50% 58%; transform:none; }
 .depth-scene img.depth-logo,.depth-scene img.depth-foreground { position:absolute; max-width:none; pointer-events:none; object-fit:contain; transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s; }
 .game-card--art .depth-scene img.depth-logo { width:54%; height:60%; left:-1%; top:25%; transform:translateZ(46px); filter:drop-shadow(0 9px 5px #07192d3d); }
 .game-card--art .depth-scene img.depth-foreground { width:64%; height:auto; max-height:104%; left:33%; top:-3%; transform:translateZ(30px); filter:drop-shadow(0 17px 9px #07192d45); }
 .game-card--art .depth-scene[data-depth="ninjablock"] img.depth-foreground { width:70%; left:28%; top:-6%; }
 .game-card--art .depth-scene[data-depth="ricopop"] img.depth-logo { width:88%; height:22%; left:2%; top:5%; }
 .game-card--art .depth-scene[data-depth="ricopop"] img.depth-foreground { width:67%; height:auto; left:25%; top:10%; }
 .game-card--art .depth-scene[data-depth="riffvolt"] img.depth-logo { width:90%; height:25%; left:1%; top:3%; }
 .game-card--art .depth-scene[data-depth="riffvolt"] img.depth-foreground { width:84%; max-height:80%; left:10%; top:24%; }
 .game-card--art .depth-scene[data-depth="twirldrop"] img.depth-foreground { width:58%; height:103%; left:40%; top:-4%; }
 .game-card--art .depth-scene[data-depth="trimora"] img.depth-foreground { width:62%; height:98%; left:37%; top:0; }
 .game-card--art .depth-scene[data-depth="barricade-z"] img.depth-logo { width:58%; height:62%; left:-3%; top:29%; }
 .game-card--art .depth-scene[data-depth="barricade-z"] img.depth-foreground { width:62%; height:110%; max-height:110%; left:52%; top:-8%; }
 .game-card--art .game-caption { min-height:0; padding:28px 6px 8px; }
 .game-card--art>.favorite { top:calc(4% + 8px); right:calc(-3% + 8px); bottom:auto; width:34px; min-width:34px; height:34px; }
 .game-card--art .cover-link:hover .depth-logo,.game-card--art .cover-link:focus-visible .depth-logo { transform:translate3d(-3px,-6px,72px) scale(1.035); }
 .game-card--art .cover-link:hover .depth-foreground,.game-card--art .cover-link:focus-visible .depth-foreground { transform:translate3d(2px,-12px,55px) scale(1.045); filter:drop-shadow(0 25px 13px #07192d55); }
 .game-card--art .cover-link:hover .depth-plate { transform:translate3d(0,4px,-32px) rotateX(2deg); }
}
@media(hover:hover) and (pointer:fine) and (max-width:1000px) { .home .game-grid,.related .game-grid { column-gap:44px; } }
@media(hover:hover) and (pointer:fine) and (max-width:580px) { .game-card--art { grid-column:1/-1; } }
@media(prefers-reduced-motion:reduce) {
 .game-card--art .depth-scene,.game-card--art .depth-plate,.depth-scene img.depth-logo,.depth-scene img.depth-foreground { transform:none!important; transition:none!important; }
}
