/* =============================================================================
   81-roblox-preset.css — Roblox preset surface (DEV ONLY)
   =============================================================================
   Deliberately small. The Roblox grid reuses the preset card classes, so
   everything about spacing, hover, the panel shell and the filter sheet is
   inherited. Only two things are genuinely different and neither can be
   inherited: the icon is SQUARE where every other card is portrait, and the
   stat line replaces a star rating with a magnitude.

   Nothing here uses !important: these rules are more specific than the base
   card rules they refine (.is-roblox scopes every one of them), so they win on
   specificity and the cascade stays readable.
   ============================================================================= */

/* Roblox ships one 512x512 icon per experience — there is no portrait key art
   to fall back on. 150% (the default) or 126% (the games override) would
   letterbox every card with dead space, so the frame matches the source. */
.shelfd-search-preset-title-card.is-roblox .shelfd-search-preset-poster {
  padding-top: 100%;
  border-radius: 8px;
}

.shelfd-search-preset-title-card.is-roblox .shelfd-search-preset-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The magnitude that ordered the grid. Lavender rather than the gold star
   colour, because it is not a rating — sorting by Playing Now puts a live
   player count here, and gold would read as a score. */
.shelfd-search-preset-title-card.is-roblox .rbx-stat {
  color: #C4B5FD;
  font-weight: 600;
  letter-spacing: 0.00em;
  font-variant-numeric: tabular-nums;
}

/* Load-more. Full-bleed row under the grid; retires itself when a short page
   comes back, so it is only ever on screen when there is genuinely more. */
.rbx-more-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 26px;
}

.rbx-more {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(196, 181, 253, 0.22);
  background: rgba(255, 255, 255, 0.055);
  color: #EDE9FE;
  font-size: calc(13 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0.00em;
  transition: background 160ms ease, transform 160ms ease;
}

.rbx-more:active { transform: scale(0.97); }
.rbx-more[disabled] { opacity: 0.55; }

/* The vote-floor note under the sheet's last group. Sits apart from the group
   hints above it so it reads as a footnote to the sheet, not to Creator. */
.preset-filter-group-hint.rbx-sheet-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.62;
  line-height: 1.45;
}