/* Game District: preview slots (hub-previews.js).  A slot fills the art box of a card, tile or stage; its content is a canvas,
 * an inline svg (avatar engine) or a cached image. */
.hp-slot { display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; position: relative; }
.hp-slot--modal { aspect-ratio: 600 / 550; max-width: 640px; max-height: 62vh; margin-inline: auto; overflow: visible; }
.hp-slot.hp-pending:empty { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .06) 50%, transparent 80%) 0 0 / 200% 100%; border-radius: 12px; animation: hpShimmer 1.3s linear infinite; }
@keyframes hpShimmer { to { background-position: -200% 0; } }
.hp-host { display: grid; place-items: center; max-width: 100%; max-height: 100%; position: relative; }
.hp-host > canvas, .hp-host > svg, .hp-host > .hp-img, .hp-slot > .hp-img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.hp-slot--modal .hp-host { width: 100%; height: 100%; }
.hp-avatar-svg { width: 100%; height: 100%; display: block; }
.hp-slot--tray .hp-avatar-svg, .hp-slot--card .hp-avatar-svg { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.hp-slot.hp-legacy { overflow: hidden; }
body[data-motion="reduced"] .hp-slot.hp-pending:empty { animation: none; }
@media (prefers-reduced-motion: reduce) { body[data-motion="auto"] .hp-slot.hp-pending:empty { animation: none; } }
html[data-lite="1"] .hp-slot.hp-pending:empty { animation: none; }
.hub-preview-stage .hp-slot--modal { max-height: 48vh; }
.hub-phone .hub-preview-stage .hp-slot--modal { max-height: 100%; height: 100%; aspect-ratio: auto; }

/* when a game's own art fills the stage, the generic per-game stage decoration (paper lines, felt, sky ...) steps aside */
.hub-ctx:has(> .hub-item-art > .hp-done:not(.hp-legacy)), .hub-ctx:has(> .hp-slot.hp-done:not(.hp-legacy)), .hub-ctx:has(> .hub-item-art .hp-done:not(.hp-legacy)) { background-image: none !important; }
.hub-ctx:has(.hp-slot--modal.hp-done:not(.hp-legacy)) { background: radial-gradient(90% 80% at 50% 35%, #2c2160, #140e2e) !important; }
.hub-ctx:has(.hp-slot--modal.hp-done:not(.hp-legacy))::before, .hub-ctx:has(.hp-slot--modal.hp-done:not(.hp-legacy))::after { display: none; }

/* the avatar stage in the big window: a bigger figure, no heavy frame */
.hub-preview-stage .hub-avatar-stage { width: min(100%, 360px); max-height: 100%; border-radius: 24px; background: rgba(255, 255, 255, .05); }
.hub-preview-stage .hub-avatar-stage--bg { width: min(100%, 380px); }
.dashboard-shop-grid { scroll-margin-top: calc(var(--top-h, 64px) + 90px); }