/* Catalogue: the games grid and list on the redesign foundation.
 * The art carries each card; its text sits on paper underneath. The list view is one white group of
 * hairline rows. While the snapshot loads, placeholder cards hold the grid's exact size. */
.toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,230px) minmax(150px,190px) auto;gap:10px;align-items:center}
.search-field{min-width:0}
.search kbd{flex:none}
.select-wrap{display:block;min-width:0}
.view-toggle{justify-self:end}
.results-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:20px 0 24px;border-bottom:1px solid var(--gx-hair)}
.results-bar .gx-choices{border-bottom:0;margin-bottom:-1px}
#result-count{padding-bottom:11px;font-size:12px;color:var(--gx-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#status:not(:empty){margin:-8px 0 18px}

/* Grid: art frames match the catalogue's own 358×480 artwork, so nearly every image fills its frame. */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:28px 16px}
.game-card,.game-skel{position:relative;min-width:0}
.game-card{content-visibility:auto;contain-intrinsic-size:auto 300px}
.card-open{display:block;min-width:0;color:inherit;border-radius:var(--gx-r-art);outline:none}
.art{position:relative;aspect-ratio:358/480;border-radius:var(--gx-r-art);overflow:hidden;background:var(--gx-soft);isolation:isolate}
.art::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--gx-stroke);pointer-events:none}
.card-open:focus-visible .art{outline:2px solid var(--gx-accent);outline-offset:3px}
.artwork{position:absolute;inset:0;display:block;background:var(--gx-soft)}
.artwork img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .55s var(--gx-ease)}
@media (hover:hover){.card-open:hover .artwork img{transform:scale(1.035)}.card-open:hover .game-title{color:var(--gx-accent)}}
.artwork-unavailable{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:10px;font-size:11.5px;color:var(--gx-faint);text-align:center}
.is-unavailable .artwork-unavailable{display:flex}
.card-copy{display:flex;flex-direction:column;gap:2px;padding:10px 1px 0;min-width:0}
.game-title{margin:0;font-size:13.5px;font-weight:600;letter-spacing:-.15px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease}
.studio{margin:0;font-size:12px;line-height:1.4;color:var(--gx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-stats{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:5px;font-size:12px;line-height:1.4;color:var(--gx-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.stars{font-size:11.5px;letter-spacing:1px;color:var(--gx-ink-2)}
.stars>span{color:var(--gx-rule)}
.card-age{font-size:11.5px;line-height:1.4;color:var(--gx-muted)}
.age-unknown{color:var(--gx-muted)}
/* Placeholders: the same frame and three text lines as a card. */
.game-skel .art{background:var(--gx-soft)}
.game-skel .art::after{content:none}
.game-skel>.gx-skel:not(.art){height:10px;margin-top:11px;width:78%}
.game-skel>.gx-skel:nth-child(3){width:52%;margin-top:8px}
.game-skel>.gx-skel:nth-child(4){width:38%;margin-top:12px}
/* One quiet rise as each card arrives (app.js marks them); reduced motion shows them at once. */
.catalogue-page .game-card.is-reveal-ready{transition:opacity .38s var(--gx-ease),transform .38s var(--gx-ease);transition-delay:var(--reveal-delay,0ms)}
.catalogue-page .game-card.is-awaiting-reveal{opacity:0;transform:translateY(5px)}
.catalogue-page .game-card:focus-within{opacity:1;transform:none;transition:none}

/* List: one white group of hairline rows; the whole row opens the game. */
.games.list{grid-template-columns:minmax(0,1fr);gap:0;padding:4px 6px;background:var(--gx-surface);border-radius:var(--gx-r-group);box-shadow:0 0 0 1px var(--gx-stroke)}
.games.list .game-card{display:flex;align-items:center;gap:12px;padding:0 8px 0 0;border-top:1px solid var(--gx-hair);contain-intrinsic-size:auto 76px}
.games.list .game-card:first-child{border-top:0}
.games.list .card-open{flex:1;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;min-height:74px;padding:10px 8px;border-radius:var(--gx-r-row);transition:background .15s ease}
@media (hover:hover){.games.list .card-open:hover{background:var(--gx-soft)}.games.list .card-open:hover .artwork img{transform:none}}
.games.list .card-open:focus-visible{outline:2px solid var(--gx-accent);outline-offset:-2px}
.games.list .card-open:focus-visible .art{outline:none}
.games.list .art{width:44px;border-radius:8px}
.games.list .card-copy{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.7fr);grid-template-areas:'title stats age' 'studio stats age';align-items:center;column-gap:18px;padding:0}
.games.list .game-title{grid-area:title;font-size:13.5px}
.games.list .studio{grid-area:studio}
.games.list .card-stats{grid-area:stats;justify-content:flex-start;gap:12px;margin:0}
.games.list .card-age{grid-area:age;text-align:right}
.compare-button{flex:none;height:30px;min-width:84px;padding:0 13px;border-radius:999px;background:var(--gx-soft);color:var(--gx-ink);font-size:12px;font-weight:500;transition:background .15s ease,color .15s ease,transform .2s var(--gx-spring)}
.compare-button:hover{background:var(--gx-press)}
.compare-button:active{transform:scale(.96)}
.compare-button[aria-pressed=true]{background:var(--gx-accent-soft);color:var(--gx-accent)}

/* Loading more: the sentinel loads the next batch; the button only shows for keyboard or on error. */
.catalogue-tail{position:relative;margin:28px 0 0;text-align:center}
.catalogue-sentinel{height:1px;pointer-events:none}
.catalogue-load{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.catalogue-load:focus-visible,.manual-loading .catalogue-load,.catalogue-tail[data-state=error] .catalogue-load{position:static;width:auto;height:36px;margin:0;padding:0 16px;overflow:visible;clip-path:none}
.catalogue-tail[data-state=error] #catalogue-progress{position:static;width:auto;height:auto;margin:8px 0 0;clip-path:none;overflow:visible;color:var(--gx-loss);font-size:12px}
.catalog-note{max-width:86ch;margin:32px 0 0;font-size:12px;line-height:1.6;color:var(--gx-muted)}
.catalogue-error{grid-column:1/-1}
.games>.empty-state{grid-column:1/-1;border-radius:var(--gx-r-group);background:var(--gx-surface);box-shadow:0 0 0 1px var(--gx-stroke)}
.games.list>.empty-state{background:none;box-shadow:none}

/* Compare: a floating tray, then a plain table in the dialog. */
.compare-tray{position:fixed;left:calc(50% + var(--site-sidebar-width,0px)/2);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:var(--z-sticky);display:flex;align-items:center;gap:6px;padding:6px 6px 6px 18px;border-radius:999px;background:var(--gx-surface);box-shadow:var(--gx-shadow),0 0 0 1px var(--gx-stroke);font-size:13px;color:var(--gx-ink-2);transform:translateX(-50%);animation:compare-in .46s var(--gx-ease) both}
.compare-tray b{color:var(--gx-ink);font-weight:600;font-variant-numeric:tabular-nums}
.compare-tray>span{margin-right:6px;white-space:nowrap}
.compare-tray .primary-button{height:34px;padding:0 16px;font-size:13px}
@keyframes compare-in{from{opacity:0;transform:translate(-50%,8px)}}
.comparison-scroll{overflow-x:auto;margin:6px -4px 0;padding:0 4px}
.compare-table{width:100%;min-width:460px;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.compare-table th,.compare-table td{padding:11px 12px;border-top:1px solid var(--gx-hair);text-align:left;vertical-align:top}
.compare-table thead th{border-top:0;font-weight:600;color:var(--gx-ink)}
.compare-table tbody th{width:28%;font-weight:500;font-size:12px;color:var(--gx-muted)}

@media (max-width:1023px) and (min-width:768px){.toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.toolbar .search-field{grid-column:1/-1}}
@media (max-width:767px){
 .toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
 .toolbar .search-field{grid-column:1/-1}
 .games{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:24px 12px}
 .games.list .card-copy{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'title stats' 'studio age'}
 .games.list .card-age{text-align:right}
 .compare-tray{left:50%}
}
@media (max-width:539px){
 .toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .view-toggle{display:none}
 .search kbd{display:none}
 .games{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
 .card-stats{flex-direction:column;align-items:flex-start;gap:1px}
 .catalogue-heading .quiet-button{height:32px;padding:0 13px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.catalogue-page .game-card.is-awaiting-reveal{opacity:1;transform:none}}