/* Store — Dragon Scale vault ecosystem (GLOBAL, non-isolated chrome).
 *
 * These `store-*` layout/chrome rules are shared by three consumers:
 *   - Pages/Store/Store.razor
 *   - Pages/Store/CosmeticShopPage.razor
 *   - Pages/Vault/CosmeticsCloset.razor
 *
 * They live here (loaded globally via index.html), NOT in a `.razor.css`
 * file, because Blazor CSS isolation rewrites scoped selectors to
 * `.store-content[b-{hash}]` and stamps the scope attribute onto only the
 * owning component's markup. A scoped copy in Store.razor.css therefore
 * never reaches CosmeticsCloset.razor / CosmeticShopPage.razor, which is
 * exactly the layout regression this file fixes (centered ≤900px container,
 * gradient hero icon tile, bundle grid).
 *
 * Page-specific rules and any `::deep` combinator rules stay in the owning
 * component's `.razor.css` (`::deep` is invalid in a global stylesheet).
 * Closet-specific `.cosmetic-equipped*` overrides stay in
 * CosmeticsCloset.razor.css.
 *
 * Dragon Scale tokens only (--m-* / --d-*); no hardcoded colors.
 */

.store-layout {
    box-sizing: border-box;
    font-family: var(--d-font-display);
    color: var(--m-text);
    background-color: var(--d-bg);
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.store-layout *,
.store-layout *::before,
.store-layout *::after {
    box-sizing: border-box;
}

.store-shell {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background:
        radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--m-primary) 16%, transparent), transparent 45%),
        radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--m-accent) 12%, transparent), transparent 40%),
        var(--d-bg);
}

.store-content {
    padding: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    min-width: 0;
}

/* Hero section */
.store-hero {
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--m-card) 80%, transparent);
    border: 1px solid var(--m-border);
    margin-bottom: 1.5rem;
}

.store-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 25%, transparent), color-mix(in srgb, var(--m-accent) 15%, transparent));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--m-primary) 15%, transparent);
    margin-bottom: 1rem;
}

.store-hero-icon .material-symbols-outlined {
    font-size: 2rem;
    color: var(--m-primary);
}

.store-title {
    font-family: var(--d-font-serif);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--m-text);
    margin: 0 0 0.5rem;
    letter-spacing: 0.04em;
}

.store-subtitle {
    color: var(--m-text-2);
    margin: 0 auto;
    max-width: 560px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Sparkles balance pill */
.store-balance {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-accent) 10%, var(--m-card));
    border: 1px solid color-mix(in srgb, var(--m-accent) 20%, transparent);
    color: var(--m-text);
}

.store-balance-icon {
    font-size: 1.125rem;
    color: var(--m-accent);
}

.store-balance-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.store-balance-label {
    font-size: 0.85rem;
    color: var(--m-text-2);
    font-weight: 600;
}

.store-balance-nudge {
    margin-left: 0.25rem;
    padding-left: 0.75rem;
    border-left: 1px solid color-mix(in srgb, var(--m-accent) 28%, transparent);
    color: var(--m-accent);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

.store-balance-nudge:hover {
    color: var(--m-text);
}

.store-catalog-notice {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--m-info) 10%, var(--m-card));
    border: 1px solid color-mix(in srgb, var(--m-info) 24%, transparent);
    color: var(--m-text);
    font-size: 0.9rem;
    line-height: 1.45;
}

.store-catalog-notice .material-symbols-outlined {
    color: var(--m-info);
    flex-shrink: 0;
}

/* Card grid */
.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.store-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    border-radius: 14px;
    background: var(--m-card);
    border: 1px solid var(--m-border);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-bg) 24%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.store-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--m-bg) 34%, transparent);
}

.store-card:focus-visible {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.store-card-icon {
    font-size: 1.75rem;
    color: var(--m-primary);
}

.store-card-title {
    font-weight: 700;
    color: var(--m-text);
    font-size: 0.95rem;
}

.store-card-body {
    color: var(--m-text-2);
    font-size: 0.85rem;
    line-height: 1.5;
}

.store-card-price {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
    color: var(--m-accent);
    font-size: 0.9rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

.store-card-price .material-symbols-outlined {
    font-size: 1rem;
}

/* Disabled cards */
.store-card--disabled {
    opacity: 0.55;
    cursor: default;
    user-select: none;
}

.store-card--disabled:hover {
    transform: none;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-bg) 24%, transparent);
}

/* ---- Store sections ---- */
.store-section {
    margin-bottom: 2rem;
}

.store-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--d-font-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0 0 1rem;
}

.store-section-title .material-symbols-outlined {
    font-size: 1.25rem;
    color: var(--m-accent);
}

/* ---- Bundle grid ---- */
.store-bundle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem;
    min-width: 0;
}

.store-bundle {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 14px;
    background: var(--m-card);
    border: 1px solid var(--m-border);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.store-bundle:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--m-bg) 28%, transparent);
}

.store-bundle-owned {
    opacity: 0.7;
}

.store-bundle-purchasing {
    pointer-events: none;
    opacity: 0.6;
}

/* Cover */
.store-bundle-cover {
    position: relative;
    height: 140px;
    background: color-mix(in srgb, var(--m-primary) 12%, var(--m-card));
    overflow: hidden;
}

.store-bundle-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cosmetic item artwork is inspectable inventory, not photographic cover art, so
   it must fit fully inside its card instead of being cropped by the default
   `object-fit: cover` above (tall items such as wizard hats or a portal door
   otherwise lose their top/bottom). These rules live in the shared, non-scoped
   stylesheet so they apply to every cosmetic card — the Glowdome closet and the
   standalone cosmetic shop alike — and can never be defeated by per-page
   CSS-isolation bundling (cf. PR #1828, which restored chrome broken that way). */
.store-bundle-cover.cosmetic-thumbnail {
    box-sizing: border-box;
    height: 160px;
    display: grid;
    place-items: center;
    padding: 0.75rem;
}

.cosmetic-thumbnail .store-bundle-cover-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.cosmetic-thumbnail .cosmetic-thumbnail-img--raw {
    transform: scale(2.15);
    transform-origin: center;
}

.cosmetic-thumbnail .cosmetic-thumbnail-img--trimmed {
    transform: none;
}

.store-bundle-cover-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-bundle-cover-fallback .material-symbols-outlined {
    font-size: 2.5rem;
    color: color-mix(in srgb, var(--m-primary) 40%, transparent);
}

.store-bundle-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--m-accent) 85%, transparent);
    color: var(--m-on-accent);
}

/* Info */
.store-bundle-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.store-bundle-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.3;
}

.store-bundle-desc {
    margin: 0;
    font-size: 0.8rem;
    color: var(--m-text-2);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.store-bundle-meta {
    font-size: 0.75rem;
    color: var(--m-text-2);
}

.store-bundle-stories {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.store-bundle-stories .material-symbols-outlined {
    font-size: 0.875rem;
}

/* Action area */
.store-bundle-action {
    margin-top: auto;
    padding-top: 0.75rem;
}

.store-buy-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Defensive: never wrap the icon + price onto a new flex line. Without these
       a slow/failed Material Symbols load (font-display:block) — or any future
       CSS-isolation regression that drops this rule — let the button content
       (literal "auto_awesome" + uppercase + letter-spacing) blow out to 2-3 rows.
       flex-wrap:nowrap keeps it one line; white-space:nowrap stops the bare price
       text node wrapping; line-height stabilises the row height. */
    flex-wrap: nowrap;
    white-space: nowrap;
    line-height: 1.2;
    gap: 0.375rem;
    padding: 0.625rem 0;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, var(--m-primary), color-mix(in srgb, var(--m-primary) 80%, var(--m-accent)));
    color: var(--m-on-primary);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
    text-decoration: none;
}

.store-buy-btn:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.store-buy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.store-buy-btn:focus-visible {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.store-buy-btn .material-symbols-outlined {
    font-size: 0.875rem;
    /* Pin the glyph box so the row height can't be inflated by the base 24px
       size if this override is ever lost, and clip the literal ligature text
       ("auto_awesome"/"check") to the icon box during the font block period so a
       failed/slow font load degrades to a single-row button, not a wrapped one. */
    line-height: 1;
    flex: 0 0 auto;
    max-width: 1.25em;
    overflow: hidden;
}

.store-buy-btn-free {
    background: color-mix(in srgb, var(--m-teal) 15%, transparent);
    color: var(--m-teal);
    border: 1px solid color-mix(in srgb, var(--m-teal) 30%, transparent);
}

.store-buy-btn-free:hover:not(:disabled) {
    background: color-mix(in srgb, var(--m-teal) 25%, transparent);
}

/* Owned label */
.store-bundle-owned-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--m-teal);
}

.store-bundle-owned-label .material-symbols-outlined {
    font-size: 1rem;
}

/* ---- Quick links ---- */
.store-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    min-width: 0;
}

.store-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--m-text-2);
    border: 1px solid var(--m-border);
    transition: background 0.15s, color 0.15s;
    min-width: 0;
}

.store-link:hover {
    background: color-mix(in srgb, var(--m-surface) 8%, transparent);
    color: var(--m-text);
}

.store-link:focus-visible {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.store-link .material-symbols-outlined {
    font-size: 1rem;
}

/* ---- Empty state ---- */
.store-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    gap: 0.75rem;
}

.store-empty-icon {
    font-size: 3.5rem;
    color: var(--m-primary);
    opacity: 0.5;
}

.store-empty-title {
    font-family: var(--d-font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0;
}

.store-empty-body {
    font-size: 0.9rem;
    color: var(--m-text-2);
    max-width: 400px;
    line-height: 1.6;
    margin: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .store-card,
    .store-bundle,
    .store-buy-btn {
        transition: none;
    }

    .store-card:hover,
    .store-bundle:hover,
    .store-buy-btn:hover:not(:disabled) {
        transform: none;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .store-content {
        padding: 1rem;
    }

    .store-hero {
        padding: 1.5rem 1rem;
    }

    .store-title {
        font-size: 1.25rem;
    }

    .store-balance {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        border-radius: 14px;
        row-gap: 0.375rem;
    }

    .store-balance-nudge {
        flex: 1 0 100%;
        margin-left: 0;
        padding-left: 0;
        padding-top: 0.5rem;
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--m-accent) 28%, transparent);
        text-align: center;
    }

    .store-bundle-grid {
        grid-template-columns: 1fr;
    }

    .store-grid {
        grid-template-columns: 1fr;
    }
}

/* Light/bright theme. Plain selectors (no ::deep), so they belong here and
   apply to every store-* consumer page. */
.store-layout:is([data-theme="light"], [data-theme="bright"]) .store-shell {
    background:
        radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--m-primary) 10%, transparent), transparent 45%),
        radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--m-secondary) 8%, transparent), transparent 40%),
        var(--m-bg);
}

.store-layout:is([data-theme="light"], [data-theme="bright"]) .store-hero {
    background: color-mix(in srgb, var(--m-card) 90%, transparent);
}

.store-layout:is([data-theme="light"], [data-theme="bright"]) .store-card {
    background: var(--m-card);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--m-bg) 12%, transparent);
}

.store-layout:is([data-theme="light"], [data-theme="bright"]) .store-card:hover {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-bg) 18%, transparent);
}

.store-layout:is([data-theme="light"], [data-theme="bright"]) .store-bundle {
    background: var(--m-card);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--m-bg) 12%, transparent);
}

.store-layout:is([data-theme="light"], [data-theme="bright"]) .store-bundle:hover {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-bg) 18%, transparent);
}

.store-layout:is([data-theme="light"], [data-theme="bright"]) .store-link {
    background: color-mix(in srgb, var(--m-card) 60%, transparent);
}