/* Game gallery: distinct artwork above a solid, readable caption. Scoped to games. */
#gamesScreen .game-card.board-game-card { background-image:none!important; text-decoration:none; container-type:inline-size; }
#gamesScreen .game-card.board-game-card > img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; flex:none; }
#gamesScreen .game-card.board-game-card > span:not(.favorite-pin) { margin-top:0!important; }
#gamesScreen .chess-board-card { --tile-ink:#1c302b; --tile-accent:#d79861; }
#gamesScreen .reversi-board-card { --tile-ink:#153c34; --tile-accent:#7acbb2; }
#gamesScreen .mill-board-card { --tile-ink:#3c3025; --tile-accent:#e7b780; }
#gamesScreen .game-category-block { --tile-ink:#102b39; --tile-accent:#57c7c8; }
#gamesScreen #games-math { --tile-ink:#17284d; --tile-accent:#70a9ff; }
#gamesScreen #games-memory { --tile-ink:#342444; --tile-accent:#d6acf0; }
#gamesScreen #games-action { --tile-ink:#43292c; --tile-accent:#ffae7a; }
#gamesScreen #games-puzzle { --tile-ink:#202b44; --tile-accent:#8dd4ef; }
#gamesScreen #games-nature { --tile-ink:#173b2e; --tile-accent:#b4d781; }
#gamesScreen #games-custom-quiz { --tile-ink:#42243c; --tile-accent:#f0b1d6; }
#gamesScreen #games-geo { --tile-ink:#15384b; --tile-accent:#f2c675; }
#gamesScreen .game-card {
  position:relative; display:flex!important; flex-direction:column!important;
  justify-content:flex-start!important; align-items:stretch!important; gap:0!important;
  min-height:0!important; height:auto!important; aspect-ratio:auto!important; padding:0!important; overflow:hidden;
  border:1px solid var(--tile-accent)!important; border-top-width:4px!important;
  border-radius:17px!important; background-color:var(--tile-ink)!important;
  background-position:center top!important; background-size:100% auto!important;
  background-repeat:no-repeat!important; color:#fff!important;
  box-shadow:0 7px 20px rgba(12,28,44,.15)!important;
}
#gamesScreen .game-card::before,
#gamesScreen .game-card::after { display:none!important; }
#gamesScreen .game-card > span:not(.favorite-pin),
#gamesScreen .game-card > strong,
#gamesScreen .game-card > .game-catalog-badge {
  position:relative!important; inset:auto!important; transform:none!important;
  width:100%!important; max-width:100%!important; box-sizing:border-box;
  border:0!important; border-radius:0!important; background:var(--tile-ink)!important;
  color:#fff!important; box-shadow:none!important; backdrop-filter:none!important;
  text-shadow:none!important; overflow-wrap:anywhere!important; text-align:left!important;
}
#gamesScreen .game-card > span:not(.favorite-pin) {
  display:block!important; margin:66.667cqw 0 0!important; padding:14px 14px 6px!important;
  font-size:clamp(1.05rem,6.8cqw,1.4rem)!important; line-height:1.2!important;
}
#gamesScreen .game-card > strong {
  flex:1 0 auto; display:block!important; margin:0!important; padding:0 14px 12px!important;
  font-size:.9rem!important; font-weight:500!important; line-height:1.45!important;
}
#gamesScreen .game-card > .game-catalog-badge {
  margin:0!important; padding:9px 14px 12px!important; color:var(--tile-accent)!important;
  border-top:1px solid rgba(255,255,255,.16)!important; opacity:1!important;
  font-size:.875rem!important; line-height:1.4!important;
}
#gamesScreen .game-card > .favorite-pin { min-width:36px; min-height:36px; z-index:3!important; }
#gamesScreen .game-card:focus-visible { outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px #124666!important; }
#gamesScreen .map-mistake-card {
  --tile-ink:#153247; --tile-accent:#f1c376;
  background-image:url('/public/images/game-tiles-20260905/map-detective.jpg')!important;
}
#gamesScreen .focus-finder-card {
  --tile-ink:#152943; --tile-accent:#ffb583;
  background-image:url('/public/images/game-tiles-20260905/focus-finder.jpg')!important;
}
#gamesScreen .grid-order-card {
  --tile-ink:#39243c; --tile-accent:#ffdb88;
  background-image:url('/public/images/game-tiles-20260905/nine-tiles.jpg')!important;
}
#gamesScreen .game-card.iq-sequence-card { background-image:url('/games/iq-test/tile.svg') !important; --tile-ink:#193247; --tile-accent:#a9ecd0; }
#gamesScreen .game-card.visual-search-card { background-image:url('/games/visual-search/assets/workshop.webp') !important; --tile-ink:#293c3e; --tile-accent:#d0ac75; }
/* Real gameplay captures: preserve the full scene, including the player and goal. */
#gamesScreen .game-card.star-jump-card {
  background-image:url('/public/images/gameplay-tiles-20260906/star-jump.webp')!important;
  --tile-ink:#263b31; --tile-accent:#ffe18c;
}
#gamesScreen .game-card.time-eater-card {
  background-image:url('/public/images/gameplay-tiles-20260906/time-eater.webp')!important;
  --tile-ink:#17253b; --tile-accent:#83e7ff;
}
/* One geometry for every category, including sparse and filtered rows.
   Reserve equal text tracks rather than clipping descriptions to a line clamp. */
#gamesScreen .game-category-block .game-grid {
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))!important;
  gap:12px!important;
}
#gamesScreen .game-category-block .game-card {
  container-type:inline-size;
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 6.2rem 12rem 4.5rem;
  align-content:start;
  width:100%!important; max-width:none!important; box-sizing:border-box;
  background-size:0 0!important;
}
#gamesScreen .game-category-block .game-card::before {
  content:""; display:block!important; position:static!important;
  grid-column:1; grid-row:1; inset:auto!important;
  width:100%; height:auto; aspect-ratio:3 / 2; margin:0; padding:0;
  /* Global page-visual-card overlays use !important. The gallery preview must
     inherit its actual artwork even when the global sheet loads afterwards. */
  background-image:inherit!important; background-size:contain!important;
  background-repeat:no-repeat!important; background-position:center!important;
  transform:none!important; opacity:1; pointer-events:none;
}
#gamesScreen .game-category-block .game-card > img {
  grid-column:1; grid-row:1; width:100%; height:auto;
  object-fit:contain; aspect-ratio:3 / 2; min-height:0;
}
#gamesScreen .game-category-block .game-card > span:not(.favorite-pin) {
  grid-column:1; grid-row:2; margin:0!important;
  /* Wrap at spaces and existing hyphens, never through a word such as Merkspiel. */
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:manual!important;
}
#gamesScreen .game-category-block .game-card > strong {
  grid-column:1; grid-row:3; min-height:0;
}
#gamesScreen .game-category-block .game-card > .game-catalog-badge {
  grid-column:1; grid-row:4; min-height:0;
}
#gamesScreen .game-category-block .game-card[hidden] { display:none!important; }

/* Reuse a real portrait from the memory game, matching all other tile dimensions. */
#gamesScreen .game-category-block .game-card.seen-before-card::before{background-image:url("/games/visual-search/assets/portraits-two.webp")!important;background-size:600% 900%!important;background-position:40% 18.75%!important;}

#gamesScreen .game-category-block .game-card.orbit-pinball-card::before{background-image:url("/games/orbit-pinball/tile.svg")!important;background-size:cover!important;background-position:center!important;}
#gamesScreen .orbit-pinball-card{--tile-ink:#10253b;--tile-accent:#72edf0;}
