/* Gallery grids — used by game.html and photo.html on top of styles.css */

.tile-grid {
  display: grid;
  gap: var(--sp-4);
}

/* Game covers are 16:9 screenshots — sizing the tile to match means no
   cropping of the part that actually identifies the game. Photos are
   mostly square exports, so a square tile fits the source material with
   the least cropping there too. */
#game-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
#photo-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.tile {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.06); }

.tile-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: linear-gradient(to top, hsl(220 40% 4% / 0.88), transparent);
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
}
.tile:hover .tile-caption, .tile:focus-visible .tile-caption { opacity: 1; transform: none; }
.tile-caption .t-main { font-weight: 700; font-size: 0.86rem; line-height: 1.25; }
.tile-caption .t-sub { font-size: 0.74rem; opacity: 0.85; margin-top: 0.15em; }

/* Photo gallery uses a plain square tile, no caption needed */
.tile.photo-tile { aspect-ratio: 1; }

.tile-skeleton {
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--border) 50%, var(--surface-2) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

@media (max-width: 560px) {
  #game-grid, #photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
}