/* Games hub — the landing menu. Shared chrome lives in base.css. */

.hub {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.4);
  /* Scroll when the tiles don't fit (the grid grows as games are added). */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.hub__title {
  font-size: 1.05em;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 14vw, 200px), 1fr));
  gap: calc(var(--u) * 1.6);
  /* Breathing room so the focus ring/lift isn't clipped by the scroll box. */
  padding: calc(var(--u) * 0.8);
}

.tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--text);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  outline: none;
  cursor: pointer;
  transform: scale(1);
  transition: transform 160ms ease, box-shadow 160ms ease;
  will-change: transform;
}
.tile__art {
  position: absolute; inset: 0;
  background: var(--art, var(--surface-2));
  opacity: 0.92;
}
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,15,0.92) 8%, rgba(5,6,15,0.15) 60%, transparent 85%);
}
.tile__body { position: absolute; inset: auto 0 0 0; z-index: 1; padding: calc(var(--u) * 1.2); }
.tile__title { font-size: 1.15em; font-weight: 800; line-height: 1.1; }
.tile__tag { color: var(--text-dim); font-size: 0.78em; margin-top: 0.2em; }

/* Focus — the key 10-foot affordance: high-contrast ring + lift. */
.tile.is-focused {
  transform: scale(1.04);
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 6px var(--focus),
    0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, 0.55);
  z-index: 2;
}

/* Phones: smaller two-up tiles that scroll. */
@media (max-width: 640px) {
  .hub__grid {
    grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 42vw, 200px), 1fr));
    gap: calc(var(--u) * 1.2);
  }
}