/* Compact illustrated tiles and dimensional, theme-specific names on the art. */
.game-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  background: linear-gradient(150deg, #113b43, #0e2e34);
  border: 0;
}
.catalogue-page .game-grid { max-width: 1000px; margin: 0 auto; background: transparent; }
.catalogue-page .search-form, .catalogue-page > .muted { max-width: 1000px; margin-left: auto; margin-right: auto; }
.home-game-showcase { width: calc(100% - 64px); max-width: none; }
.home-game-showcase .game-grid { grid-template-columns: none; grid-template-rows: repeat(3, 150px); grid-auto-columns: 150px; grid-auto-flow: column; justify-content: space-between; gap: 24px 16px; padding: 32px; border-radius: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #52909c #133339; }
.home-game-showcase .game-card { scroll-snap-align: start; }
.game-card { min-width: 0; --cover-light: #fffed7; --cover-mid: #ffe567; --cover-edge: #ffa92d; --cover-base: #fff5b4; --cover-outline: #542013; }
.game-card[data-cover-theme="mint"] { --cover-light: #f1ffd8; --cover-mid: #c1ff67; --cover-edge: #53c445; --cover-base: #e3ff8d; --cover-outline: #103d27; }
.game-card[data-cover-theme="ice"] { --cover-light: #f7ffff; --cover-mid: #adf5ff; --cover-edge: #549edd; --cover-base: #e1edff; --cover-outline: #162f65; }
.game-card[data-cover-theme="rose"] { --cover-light: #f0fdff; --cover-mid: #ffc2ee; --cover-edge: #f375c8; --cover-base: #ffe2f6; --cover-outline: #175764; }
.game-cover { display: block; position: relative; aspect-ratio: 1; overflow: hidden; isolation: isolate; border-radius: 12px; background: #17353b; box-shadow: 0 6px 16px #030f1166, inset 0 0 0 1px #fff2; transition: transform .22s, box-shadow .22s; }
.game-card .game-cover img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; transition: transform .35s, filter .35s; }
.game-cover-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 35%, #051f2410 45%, #051f24c9 90%, #052228e8); box-shadow: inset 0 0 0 1px #ffefc522; border-radius: inherit; }
.game-card .game-cover-title { position: absolute; bottom: 2%; left: 2%; width: 96%; margin: 0; z-index: 2; transform: rotate(-3deg); pointer-events: none; }
.game-cover-title .cover-wordmark { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 2px #000f12b3); }
.cover-wordmark text { font-family: "Arial Black", Inter, sans-serif; font-size: 42px; font-weight: 900; letter-spacing: -1px; paint-order: stroke fill; stroke-linejoin: round; }
.cover-type-depth { fill: var(--cover-outline); stroke: #071d21; stroke-width: 9px; }
.cover-type-side { fill: var(--cover-edge); stroke: var(--cover-outline); stroke-width: 5px; }
.cover-type-face { stroke: var(--cover-light); stroke-width: 1.6px; }
.game-card[data-cover-theme="gold"] .cover-wordmark text, .game-card[data-cover-theme="ice"] .cover-wordmark text { font-family: Georgia, "Times New Roman", serif; font-weight: 900; }
.cover-ink-light { stop-color: var(--cover-light); }
.cover-ink-mid { stop-color: var(--cover-mid); }
.cover-ink-edge { stop-color: var(--cover-edge); }
.cover-ink-base { stop-color: var(--cover-base); }
.game-cover-play { position: absolute; inset: 0 0 32%; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 700; color: #fff3be; text-shadow: 0 2px 6px #000; opacity: 0; transform: translateY(5px); transition: opacity .2s, transform .2s; }
.game-cover-play > span { display: grid; place-items: center; width: 48px; height: 48px; padding-left: 3px; border-radius: 50%; color: #102a2f; background: linear-gradient(135deg, #fff5bb, #f5c746); box-shadow: 0 3px 0 #a57125, 0 4px 22px #06272dcc; font-size: 19px; text-shadow: none; }
.game-cover:focus-visible { outline: 3px solid #ffe782; outline-offset: 5px; }
.game-cover:focus-visible .game-cover-play { opacity: 1; transform: none; }
.game-cover-lettered .game-cover-shade { background: none; }
.search-form input[type="search"] { flex: 1 1 300px; width: auto; }
.search-form input[type="submit"] { flex: 0 0 auto; width: auto; background: linear-gradient(115deg, #fff1b2, #ffdf6d 60%, #f7cb44); color: #111718; border: 0; }
@media (hover:hover) {
  .game-cover:hover { transform: translateY(-5px); box-shadow: 0 12px 28px #020c0eaa, 0 0 0 2px #dfb85f; }
  .game-card .game-cover:hover img { transform: scale(1.06); filter: brightness(.77); }
  .game-cover:hover .game-cover-play { opacity: 1; transform: none; }
}
.document .game-grid { grid-template-columns: minmax(0, 240px); justify-content: start; margin: 25px 0; }
@media (max-width: 1120px) { .home-game-showcase .game-grid { padding: 24px; } }
@media (max-width: 950px) { .catalogue-page .game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 760px) { .catalogue-page .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .catalogue-page { width: calc(100% - 48px); }
  .catalogue-page .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .home-game-showcase { width: calc(100% - 32px); }
  .home-game-showcase .game-grid { display: grid; grid-template-rows: repeat(3, 92px); grid-template-columns: none; grid-auto-columns: 92px; grid-auto-flow: column; justify-content: start; gap: 16px; padding: 24px; }
  .home-game-showcase .game-card { scroll-snap-align: start; }
  .game-cover { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .game-cover, .game-card .game-cover img, .game-cover-play { transition: none; } .game-cover:hover, .game-card .game-cover:hover img { transform: none; } }