/* The application's CSS owns the UI. Only embedded-preview constraints live here. */
html, body { min-width: 0; }
html { scrollbar-color: var(--palette-wine) var(--backdrop-deep); }
.preview-loading { margin: 1.5rem; color: var(--text-soft); }
/* Keep the real layout, but make small labels readable within the marketing frame. */
.brand-name small, .version-label, .user-chip small, .home-panel-duo span,
.home-panel-kv, .home-online, .carousel-controls > span, .platform-card-copy small,
.game-card-kicker, .game-card-meta, .site-footer, .breadcrumbs, .back-link,
.platform-pill, .detail-tags span, .detail-facts dt, .download-panel-heading > div > p:last-child,
.download-file-name small, .download-file-size, .download-help { font-size: 0.75rem; }
.brand-name small, .version-label { letter-spacing: 0.04em; }
:root { --muted: color-mix(in srgb, var(--palette-paper) 68%, transparent); }
@media (max-width: 350px) {
  .header-inner { gap: 0.35rem; }
  .brand-symbol { width: 2.35rem; height: 2.35rem; }
  .header-search > .icon { display: none; }
  .game-card-kicker, .game-card-meta { flex-wrap: wrap; gap: 0.2rem; }
  .recent-game-platform-icon { width: 2rem; height: 2rem; }
}