/* ============================================================
   Game shop skin — collectible product cards
   Scoped to .gs-* so it can sit on top of the tenant theme.
   Works with data-theme light/dark and the existing palettes.
   ============================================================ */

.gs-catalog {
    --gs-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --gs-ui: "Manrope", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
    --gs-mono: "SFMono-Regular", "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
    --gs-surface: var(--rb-surface);
    --gs-text: var(--rb-text);
    --gs-heading: var(--rb-heading);
    --gs-muted: var(--rb-muted);
    --gs-line: var(--rb-border);
    --gs-gold: #4f46e5;
    --gs-frame-core: linear-gradient(135deg, #c7d2fe 0%, #4f46e5 48%, #eef2ff 100%);
    --gs-frame-core-hover: conic-gradient(from var(--gs-angle, 180deg) at var(--gs-x, 50%) var(--gs-y, 35%), #eef2ff, #818cf8, #ffffff, #a5b4fc, #eef2ff);
    --gs-frame-limited: linear-gradient(135deg, #f0abfc 0%, #7c3aed 50%, #e9d5ff 100%);
    --gs-frame-limited-hover: conic-gradient(from var(--gs-angle, 180deg) at var(--gs-x, 50%) var(--gs-y, 35%), #f5d0fe, #a78bfa, #67e8f9, #c4b5fd, #f5d0fe);
    --gs-frame-legend: conic-gradient(from 0deg, #25e6ff, #7b5cff, #ff4fd8, #ffc857, #25e6ff);
    --gs-paper: #eef2ff;
    --gs-tag-bg: rgba(20, 26, 51, .88);
    --gs-tag-text: #eef2ff;
    --gs-tag-border: rgba(20, 26, 51, .22);
    --gs-cta: #312e81;
    --gs-cta-text: #eef2ff;
    --gs-cta-hover: #1e1b4b;
    --gs-shadow: 0 12px 28px rgba(27, 33, 64, .14), 0 0 0 1px rgba(27, 33, 64, .06);
    --gs-glare: rgba(255, 255, 255, .5);
    --gs-hinge: rgba(27, 33, 64, .08);
    --gs-radius: 18px;
    color: var(--gs-text);
    font-family: var(--gs-ui);
}

[data-theme="dark"] .gs-catalog {
    --gs-surface: var(--rb-surface);
    --gs-text: var(--rb-text);
    --gs-heading: var(--rb-heading);
    --gs-muted: var(--rb-muted);
    --gs-line: var(--rb-border);
    --gs-gold: #a5b4fc;
    --gs-frame-core: linear-gradient(135deg, #eef2ff 0%, #818cf8 46%, #eef2ff 100%);
    --gs-frame-core-hover: conic-gradient(from var(--gs-angle, 180deg) at var(--gs-x, 50%) var(--gs-y, 35%), #ffffff, #a5b4fc, #e0f2fe, #c7d2fe, #ffffff);
    --gs-frame-limited: linear-gradient(135deg, #f5d0fe 0%, #c084fc 48%, #f5d0fe 100%);
    --gs-frame-limited-hover: conic-gradient(from var(--gs-angle, 180deg) at var(--gs-x, 50%) var(--gs-y, 35%), #fae8ff, #c084fc, #67e8f9, #a78bfa, #fae8ff);
    --gs-frame-legend: conic-gradient(from 0deg, #25e6ff, #7b5cff, #ff4fd8, #ffc857, #25e6ff);
    --gs-tag-bg: rgba(238, 242, 255, .94);
    --gs-tag-text: #141a3a;
    --gs-tag-border: rgba(238, 242, 255, .18);
    --gs-cta: #818cf8;
    --gs-cta-text: #0b1020;
    --gs-cta-hover: #a5b4fc;
    --gs-shadow: 0 16px 36px rgba(0, 0, 0, .45);
    --gs-glare: rgba(255, 255, 255, .5);
    --gs-hinge: rgba(10, 15, 31, .18);
}

/* ---------- catalog head ---------- */
main.article .gs-head {
    position: static;
    top: auto;
    z-index: auto;
    display: block;
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--gs-text);
}
.gs-eyebrow {
    margin: 0;
    font-family: var(--gs-mono);
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gs-muted);
}
.gs-head__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 8px;
}
.gs-title {
    margin: 0;
    font-family: var(--gs-display);
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.025em;
    color: var(--gs-heading);
}
.gs-count {
    padding-bottom: 7px;
    font-family: var(--gs-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gs-muted);
    white-space: nowrap;
}

.gs-notice {
    max-width: 900px;
    margin: 18px auto;
    padding: 13px 16px;
    border: 1px solid var(--gs-line);
    border-radius: 12px;
    background: var(--rb-surface-3);
    color: var(--rb-heading);
    font-size: 13px;
    font-weight: 600;
}

/* ---------- search / sort ---------- */
[data-theme] main.article form.gs-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 22px 0 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
main.article .gs-tools .gs-search {
    flex: 1 1 260px;
    margin: 0;
    font-weight: 400;
}
.gs-search {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--gs-line);
    border-radius: 999px;
    background: var(--gs-surface);
    color: var(--gs-muted);
}
.gs-search input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--gs-text);
    font: 13px var(--gs-ui);
}
.gs-search input::placeholder { color: var(--gs-muted); }
main.article .gs-tools .gs-select {
    width: auto;
    height: 46px;
    margin: 0;
    padding: 0 38px 0 14px;
    border: 1px solid var(--gs-line);
    border-radius: 999px;
    background-color: var(--gs-surface);
    color: var(--gs-text);
    font: 12px var(--gs-ui);
}
.gs-select {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--gs-line);
    border-radius: 999px;
    background: var(--gs-surface);
    color: var(--gs-text);
    font: 12px var(--gs-ui);
}
main.article .gs-tools .gs-submit {
    width: auto;
    margin: 0;
}
[data-app] .gs-catalog .gs-submit {
    height: 46px;
    padding: 0 20px;
    border: 1px solid var(--gs-cta);
    border-radius: 999px;
    background: var(--gs-cta);
    color: var(--gs-cta-text);
    font: 700 12px var(--gs-ui);
    cursor: pointer;
    transition: background .2s, color .2s;
}
[data-app] .gs-catalog .gs-submit:hover {
    background: var(--gs-cta-hover);
    border-color: var(--gs-cta-hover);
    color: var(--gs-cta-text);
}

/* ---------- category chips ---------- */
.gs-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px;
}
.gs-catalog .gs-chip {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--gs-line);
    border-radius: 999px;
    color: var(--gs-muted);
    font-size: 11px;
    letter-spacing: .03em;
    text-decoration: none;
    transition: color .2s, border-color .2s, background .2s;
}
.gs-catalog .gs-chip:hover {
    color: var(--gs-text);
    border-color: var(--gs-muted);
    text-decoration: none;
}
.gs-catalog .gs-chip.is-active {
    background: var(--gs-text);
    border-color: var(--gs-text);
    color: var(--rb-bg);
}

/* ---------- grid ---------- */
.gs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 22px;
    margin: 0 0 42px;
}

/* ---------- collectible card ---------- */
.gs-card {
    position: relative;
    display: flex;
    perspective: 1100px;
}
.gs-card[data-rarity="core"] { --gs-frame: var(--gs-frame-core); --gs-rarity: var(--gs-gold); }
.gs-card[data-rarity="limited"] { --gs-frame: var(--gs-frame-limited); --gs-rarity: #7c3aed; }
.gs-card[data-rarity="legend"] { --gs-frame: var(--gs-frame-legend); --gs-rarity: var(--gs-gold); }

[data-theme="dark"] .gs-card[data-rarity="limited"] { --gs-rarity: #c084fc; }

.gs-card__tilt {
    width: 100%;
    display: flex;
    transform-style: preserve-3d;
    transition: transform .38s cubic-bezier(.18, .9, .58, 1);
}
.gs-card__frame {
    width: 100%;
    display: flex;
    padding: 2px;
    border-radius: var(--gs-radius);
    background: var(--gs-frame);
    overflow: hidden;
    overflow: clip;
    box-shadow: var(--gs-shadow);
    transform-style: preserve-3d;
    transition: box-shadow .35s, background .35s;
}
.gs-card__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: calc(var(--gs-radius) - 2px);
    background: var(--gs-surface);
    transform-style: preserve-3d;
}
.gs-card__cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: calc(var(--gs-radius) - 2px) calc(var(--gs-radius) - 2px) 0 0;
    background: var(--gs-paper);
    color: #1a1712;
    text-decoration: none;
    isolation: isolate;
    transform-origin: top center;
    transform-style: preserve-3d;
    transition: transform .38s cubic-bezier(.18, .9, .58, 1), box-shadow .38s;
}
.gs-catalog .gs-card__cover {
    color: #1a1712;
}
.gs-catalog .gs-card__cover:hover,
.gs-catalog .gs-card__body h3 a:hover,
.gs-catalog .gs-chip:hover,
.gs-catalog .gs-pagination a:hover,
.gs-catalog .gs-card__btn:hover {
    text-decoration: none;
}
.gs-card__cover:hover { text-decoration: none; }
.gs-catalog .gs-card__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: scale(1.01);
    transition: transform .7s cubic-bezier(.18, .9, .58, 1);
}
.gs-card__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(80% 70% at 70% 20%, rgba(255, 255, 255, .7), transparent 65%),
        linear-gradient(145deg, #e9ddcb, #cdbb9f 55%, #eadfce);
    color: #6b5333;
    font-family: var(--gs-display);
    font-size: clamp(58px, 9vw, 96px);
    line-height: 1;
}
.gs-card__placeholder::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(107, 83, 51, .28);
    border-radius: 50%;
}
.gs-card__glare {
    position: absolute;
    inset: -10% 0 auto;
    height: 120%;
    z-index: 2;
    background: linear-gradient(226deg, rgba(255, 255, 255, .5) 0 28%, rgba(255, 255, 255, .18) 40%, transparent 58%);
    transform: translateY(-115%);
    opacity: 0;
    visibility: hidden;
    mix-blend-mode: screen;
    pointer-events: none;
    transition: transform .7s cubic-bezier(.18, .9, .58, 1), opacity .35s, visibility .35s;
}
.gs-card__cover::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 64px;
    z-index: 2;
    background: linear-gradient(180deg, var(--gs-hinge), transparent);
    opacity: .55;
    pointer-events: none;
    transition: opacity .3s;
}
.gs-card__top,
.gs-card__bottom {
    position: absolute;
    left: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
}
.gs-card__top { top: 12px; }
.gs-card__bottom { bottom: 12px; }
.gs-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 62%;
    padding: 5px 8px;
    border: 1px solid var(--gs-tag-border);
    border-radius: 999px;
    background: var(--gs-tag-bg);
    color: var(--gs-tag-text);
    font-family: var(--gs-mono);
    font-size: 8.5px;
    letter-spacing: .13em;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gs-card__tag--mono { flex: 0 0 auto; }
.gs-card__tag--state { flex: 0 0 auto; }
.gs-pips { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.gs-pips i {
    display: block;
    width: 5px;
    height: 5px;
    background: currentColor;
    transform: rotate(45deg);
}
.gs-card[data-owned="true"] .gs-card__tag--state {
    background: var(--gs-gold);
    color: var(--gs-cta-text);
    border-color: transparent;
}

.gs-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 15px 16px;
    border-top: 1px solid var(--gs-line);
    background: var(--gs-surface);
}
.gs-card__body h3 {
    margin: 0;
    font-family: var(--gs-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.01em;
}
.gs-catalog .gs-card__body h3 a {
    color: var(--gs-text);
    text-decoration: none;
}
.gs-catalog .gs-card__body h3 a:hover {
    color: var(--gs-text);
    text-decoration: none;
}
.gs-card__sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 6px 0 0;
    color: var(--gs-muted);
    font-size: 11.5px;
    line-height: 1.45;
}
.gs-card__rating {
    margin: 8px 0 0;
    color: var(--gs-gold);
    font-size: 11px;
    font-weight: 700;
}
.gs-card__rating span { color: var(--gs-muted); font-weight: 400; }
.gs-card__stock {
    margin: 6px 0 0;
    color: var(--gs-muted);
    font-size: 10.5px;
}
.gs-card__stock.is-out { color: #b42318; }
.gs-card__buy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
}
.gs-card__price {
    color: var(--gs-text);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
[data-app] .gs-catalog .gs-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 104px;
    height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--gs-gold) 55%, transparent);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--gs-gold);
    font: 600 12px var(--gs-ui);
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
[data-app] .gs-catalog .gs-card__btn:hover {
    background: var(--gs-cta);
    border-color: var(--gs-cta);
    color: var(--gs-cta-text);
    text-decoration: none;
}
[data-app] .gs-catalog .gs-card__btn:disabled,
[data-app] .gs-catalog .gs-card__btn.is-disabled {
    opacity: .5;
    cursor: default;
    border-color: var(--gs-line);
    background: transparent;
    color: var(--gs-muted);
}
[data-app] .gs-catalog .gs-card form {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* ---------- hover ---------- */
@media (hover: hover) {
    .gs-card:hover .gs-card__tilt {
        transform: rotateX(var(--gs-rx, 5deg)) rotateY(var(--gs-ry, -3deg)) translateY(-6px);
    }
    .gs-card:hover .gs-card__cover {
        transform: rotateX(7deg) translateY(-8px);
        box-shadow: 0 22px 34px rgba(0, 0, 0, .4);
    }
    .gs-card:hover .gs-card__cover::before { opacity: 1; }
    .gs-card:hover .gs-card__art { transform: scale(1.035); }
    .gs-card:hover .gs-card__glare { transform: translateY(0); opacity: .45; visibility: visible; }
    .gs-card[data-rarity="core"]:hover .gs-card__frame { background: var(--gs-frame-core-hover); }
    .gs-card[data-rarity="limited"]:hover .gs-card__frame { background: var(--gs-frame-limited-hover); }
    .gs-card:hover .gs-card__frame {
        box-shadow: 0 30px 62px rgba(0, 0, 0, .45), 0 0 42px color-mix(in srgb, var(--gs-rarity) 24%, transparent);
    }
}

/* ---------- pagination ---------- */
.gs-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 30px;
    color: var(--gs-muted);
    font-size: 12px;
}
.gs-catalog .gs-pagination a,
.gs-catalog .gs-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--gs-line);
    border-radius: 999px;
    color: var(--gs-muted);
    text-decoration: none;
}
.gs-catalog .gs-pagination a:hover {
    color: var(--gs-text);
    border-color: var(--gs-muted);
    text-decoration: none;
}
.gs-empty {
    grid-column: 1 / -1;
    padding: 30px 0;
    color: var(--gs-muted);
    text-align: center;
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
    .gs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .gs-head__row { align-items: flex-start; flex-direction: column; gap: 8px; }
    .gs-count { padding-bottom: 0; }
    .gs-tools { gap: 8px; }
    .gs-search { flex-basis: 100%; }
    .gs-select { flex: 1 1 45%; }
    .gs-submit { flex: 1 1 45%; }
    .gs-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .gs-chip { flex: 0 0 auto; }
    .gs-grid { grid-template-columns: 1fr; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .gs-card__tilt,
    .gs-card__frame,
    .gs-card__cover,
    .gs-card__art,
    .gs-card__glare,
    .gs-card__cover::before,
    .gs-card__btn,
    .gs-chip,
    .gs-submit {
        transition-duration: .01ms !important;
    }
    .gs-card:hover .gs-card__tilt,
    .gs-card:hover .gs-card__cover { transform: none; }
    .gs-card:hover .gs-card__art { transform: none; }
    .gs-card:hover .gs-card__glare { opacity: 0; }
}

/* ---------- full-screen card view ---------- */
dialog.gs-expand {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gs-text);
    overflow: hidden;
}
dialog.gs-expand::backdrop {
    background: rgba(10, 8, 6, .72);
    backdrop-filter: blur(8px);
}
.gs-expand__stage {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(20px, 5vw, 54px);
    overflow: auto;
    overscroll-behavior: contain;
}
.gs-expand__close {
    position: fixed;
    top: clamp(14px, 3vw, 28px);
    right: clamp(14px, 3vw, 28px);
    z-index: 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244, 239, 230, .28);
    border-radius: 50%;
    background: rgba(10, 11, 16, .72);
    color: #f4efe6;
    font: 300 28px/1 var(--gs-ui);
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.gs-expand__close:hover {
    border-color: rgba(244, 239, 230, .55);
    background: rgba(10, 11, 16, .9);
}
.gs-expand .gs-card.gs-card--expanded {
    width: min(520px, 92vw);
    perspective: 1400px;
    animation: gs-card-unfold .5s cubic-bezier(.18, .9, .25, 1) both;
}
dialog.gs-expand .gs-card__tilt {
    transform: rotateX(var(--gs-rx, 0deg)) rotateY(var(--gs-ry, 0deg));
    transform-style: preserve-3d;
    transition: transform .16s ease-out;
}
dialog.gs-expand .gs-card__frame {
    box-shadow: 0 42px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
}
dialog.gs-expand .gs-card__cover {
    transform: translateZ(18px);
    box-shadow: 0 26px 46px rgba(0, 0, 0, .35);
}
dialog.gs-expand .gs-card__glare {
    visibility: visible;
    opacity: .5;
    transform: translateY(0);
    background:
        radial-gradient(260px circle at var(--gs-x, 50%) var(--gs-y, 35%), rgba(255, 255, 255, .56), rgba(255, 255, 255, .12) 42%, transparent 68%),
        linear-gradient(226deg, rgba(255, 255, 255, .22) 0 28%, transparent 58%);
}
.gs-expand .gs-card__body {
    padding: 20px 22px 22px;
}
.gs-expand .gs-card__body h3 {
    font-size: clamp(26px, 3.5vw, 34px);
}
.gs-expand .gs-card__sub {
    max-width: 42ch;
    font-size: 13px;
}
.gs-expand .gs-card__price {
    font-size: 24px;
}
.gs-expand .gs-card__btn {
    min-width: 132px;
    height: 48px;
    font-size: 13px;
}
@keyframes gs-card-unfold {
    from {
        opacity: 0;
        transform: translateY(26px) scale(.9) rotateX(-7deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0);
    }
}
@media (max-width: 640px) {
    .gs-expand__stage {
        padding: 54px 14px 24px;
    }
    .gs-expand .gs-card.gs-card--expanded {
        width: min(430px, 94vw);
    }
}
@media (prefers-reduced-motion: reduce) {
    .gs-expand .gs-card.gs-card--expanded {
        animation: none;
    }
    dialog.gs-expand .gs-card__tilt {
        transition: none;
    }
}