/* site-tiles.css: game tile marks and meta sized against the tile itself, not the viewport.
   ONLINE (127px) + HOT (81px) only share one row on art 230px or wider; narrower tiles (4-up at 1024/768,
   2-up on phones, related games) stacked them over half the picture. There HOT moves to the bottom-right
   corner, opposite the runs count, at full height. */
.tile-frame { container: tile / inline-size; }
.tile-media { container: tile-media / inline-size; }

@container tile-media (max-width: 230px) {
  .tile-badges { bottom: 8px; flex-wrap: nowrap; align-items: flex-start; pointer-events: none; }
  .tile-badges .mark-online { max-width: 100%; object-fit: contain; object-position: left top; }
  .tile-badges .mark-hot { position: absolute; right: 0; bottom: 0; max-width: 56%; object-fit: contain; object-position: right bottom; }
}

/* Narrow tiles: the creator gets its own line instead of a three-letter ellipsis next to the genre. */
@container tile (max-width: 240px) {
  .tile-sub { flex-wrap: wrap; row-gap: 5px; }
  .tile-by { flex-basis: 100%; }
}