/* The catalog uses each game's original landscape artwork, edge to edge. */
body #catalog-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
body .catalog-card { position: relative; display: block; padding: 0; width: 100%; height: auto; min-height: 0; aspect-ratio: 460/215; border: 1px solid #ffffff24; border-radius: 18px; overflow: hidden; background: #17121a; text-align: left; box-shadow: 0 4px 18px #0002; isolation: isolate; }
body .catalog-card:hover { transform: none; border-color: #ff96758c; box-shadow: 0 0 0 1px #ff96751a,0 8px 24px #0003; }
body .catalog-card-art { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; overflow: hidden; background: #17121a; }
body .catalog-card-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; }
body .catalog-card .game-art-placeholder { width: 40px; height: 40px; opacity: .25; }
body .catalog-card-meta { position: absolute; top: 11px; left: 11px; right: 11px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 7px; width: auto; margin: 0; padding: 0; }
body .catalog-card-engine,body .catalog-card-status { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 500; color: #ffcfbf; padding: 5px 8px; border: 1px solid #ffffff20; border-radius: 7px; background: #17131ddd; backdrop-filter: blur(12px); line-height: 1.35; }
body .catalog-card-status { color: #f1e4ef; font-size: 8px; }
body .catalog-card-status::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #ffad91; box-shadow: 0 0 5px #ffad9155; }
body .catalog-card-body { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; display: flex; align-items: end; min-height: 58px; padding: 22px 45px 12px 13px; background: linear-gradient(transparent,#0b0812df); z-index: 1; opacity: 0; translate: 0 4px; transition: opacity .2s,translate .2s; }
body .catalog-card-name { font-size: 13px; line-height: 1.3; font-weight: 550; color: #fff; margin: 0; }
body .catalog-card:hover .catalog-card-body,body .catalog-card:focus-visible .catalog-card-body,body .catalog-card:has([data-art-state=unavailable]) .catalog-card-body { opacity: 1; translate: 0 0; }
body .catalog-card:has([data-art-state=unavailable]) .catalog-card-body { min-height: 100%; align-items: center; padding-top: 30px; background: none; }
.catalog-banner-arrow { position: absolute; bottom: 9px; right: 10px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #ffffff30; background: #17131ddd; color: #fff; font-size: 17px; opacity: 0; transition: opacity .2s; }
.catalog-card:hover .catalog-banner-arrow,.catalog-card:focus-visible .catalog-banner-arrow { opacity: 1; }
body #catalog-results .catalog-empty { grid-column: 1/-1; }
@media(max-width:900px) { body #catalog-results { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; } }
@media(max-width:500px) { body #catalog-results { grid-template-columns: 1fr; } body .catalog-card { border-radius: 16px; } }
@media(hover:none) { body .catalog-card-body { opacity: 1; translate: 0 0; } }
@media(prefers-reduced-motion:reduce) { .catalog-card,.catalog-card * { transition: none !important; } }