/* Home feed / grid (rail chrome lives in css/nav-rail.css via .rail-shell) */

.home-feed {
  padding: 12px 14px 8px;
  display: grid;
  gap: 12px;
}

/* Exact tile sizes: normal 128×128, featured 256×256 (desktop) */
.poki-grid {
  --tile: 128px;
  --feat: 256px;
  --gap: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tile));
  grid-auto-rows: var(--tile);
  gap: var(--gap);
  grid-auto-flow: dense;
  justify-content: center;
}

.poki-grid .game-tile {
  width: var(--tile);
  height: var(--tile);
  min-width: var(--tile);
  min-height: var(--tile);
  max-width: var(--tile);
  max-height: var(--tile);
  aspect-ratio: auto;
  border-radius: 12px;
  box-sizing: border-box;
}

.poki-grid .game-tile .game-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.poki-grid .game-tile--featured {
  --tile: var(--feat);
  width: var(--feat);
  height: var(--feat);
  min-width: var(--feat);
  min-height: var(--feat);
  max-width: var(--feat);
  max-height: var(--feat);
  grid-column: span 2;
  grid-row: span 2;
  border-radius: 14px;
}

.poki-grid .game-tile--featured .game-tile-label {
  opacity: 1;
  background: linear-gradient(to top, rgba(3, 5, 20, 0.88) 0%, rgba(3, 5, 20, 0.25) 55%, transparent 100%);
  padding: 10px;
}

.poki-grid .game-tile--featured .game-tile-label span {
  font-size: 13px;
}

.poki-grid .game-tile-label {
  opacity: 0;
}

.poki-grid .game-tile:hover .game-tile-label,
.poki-grid .game-tile:focus-visible .game-tile-label {
  opacity: 1;
}

.poki-grid .game-tile:hover {
  transform: translateY(-2px) scale(1.02);
  z-index: 2;
}

.poki-grid .game-tile--featured:hover {
  transform: translateY(-2px) scale(1.01);
}

.poki-grid .game-tile--recent {
  box-shadow: 0 0 0 2px #ffe600;
}

.home-poki footer {
  margin: 8px 14px 14px;
}

.home-poki .main-grid,
.home-poki .rightbar,
.home-poki .benefits,
.home-poki .hero {
  display: none !important;
}

@media (max-width: 1180px) {
  .poki-grid {
    --tile: 128px;
    --feat: 256px;
    --gap: 10px;
  }
}

@media (max-width: 760px) {
  .home-feed {
    padding: 8px 10px;
  }

  .poki-grid {
    --tile: 112px;
    --feat: 236px;
    --gap: 8px;
    width: 100%;
  }

  .poki-grid .game-tile:not(.game-tile--featured) .game-tile-label {
    display: none !important;
  }

  .poki-grid .game-tile--featured .game-tile-label span {
    font-size: 13px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .poki-grid .game-tile:hover {
    transform: none;
  }
}