.meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
    border-top: 1px solid rgba(233,201,106,0.22);
    padding-top: 22px;
}
.meta dt {
    font-family: var(--sans);
    font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--gold);
}
.meta dd {
    font-family: var(--sans);
    font-size: 0.88rem;
    color: var(--silver-hi);
    margin-top: 6px;
    line-height: 1.5;
}

/* ── Exhibits: one live interaction per row ── */
.exhibit {
    max-width: 1200px;
    margin: 0 auto;
    padding: 90px 40px 0;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}
.exhibit.flip { grid-template-columns: 1fr 1.35fr; }
.exhibit.flip .ex-stage { order: 2; }
.ex-stage {
    position: relative;
    height: clamp(380px, 38vw, 460px);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(233,201,106,0.18);
    box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 0 6px rgba(0,0,0,0.25);
}
.ex-live {
    position: absolute; top: 14px; left: 14px;
    z-index: 20;
    display: flex; align-items: center; gap: 8px;
    font-family: var(--sans);
    font-size: 0.55rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--gold-hi);
    background: rgba(10,4,3,0.7);
    border: 1px solid rgba(233,201,106,0.3);
    padding: 5px 10px;
    border-radius: 999px;
    pointer-events: none;
}
.ex-live::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold-hi);
    box-shadow: 0 0 8px var(--gold-hi);
    animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse { 50% { opacity: 0.3; } }
.nat-demo .ex-live { background: rgba(255,255,255,0.85); color: #7a5215; border-color: rgba(122,82,21,0.3); }
.ex-num {
    font-family: var(--serif); font-style: italic;
    font-size: 0.95rem;
    color: var(--gold);
}
.ex-copy .h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin-top: 10px; }
.ex-try {
    margin-top: 22px;
    padding: 14px 16px;
    border-left: 2px solid var(--gold);
    background: linear-gradient(90deg, rgba(233,201,106,0.08), transparent);
    font-family: var(--sans);
    font-size: 0.86rem;
    color: var(--silver-hi);
    line-height: 1.55;
}
.ex-try b { color: var(--gold-hi); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips span {
    font-family: var(--sans);
    font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--silver-mid);
    border: 1px solid rgba(228,228,228,0.16);
    padding: 5px 10px;
    border-radius: 999px;
}

/* ── Also built ── */
.also-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 40px;
    background: rgba(228,228,228,0.08);
    border: 1px solid rgba(228,228,228,0.08);
}
.also-card {
    background: var(--red-deep);
    padding: 30px 26px 32px;
    position: relative;
    transition: background 0.35s ease;
}
.also-card:hover { background: rgba(60,12,10,0.9); }
.also-card i {
    text-transform: uppercase;
    font-style: normal;
    font-family: var(--serif);
    color: var(--gold);
    font-size: 0.8rem;
}
.also-card h3 {
    font-family: var(--serif); font-weight: 500;
    font-size: 1.3rem;
    color: var(--white);
    margin-top: 12px;
}
.also-card p {
    font-family: var(--sans);
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--silver-mid);
    margin-top: 8px;
}

/* ══ Live demos — CSS carried over unchanged from the Khora source ══ */
/* ── FEATURED-PIECE DRAG (copied verbatim from locker_room.html, self-styled dark card) ── */
.bl-home {
    --bl-accent: #e9c46a; --bl-bg: #0f1119; --bl-text: #f0f0f0; --bl-text-sec: #9ca3af;
    width: 100%; height: 100%;
    background: var(--bl-bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
/* Animated swirl BG */
.bl-home::before {
    content: '';
    position: absolute; inset: -50%;
    width: 200%; height: 200%;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(233,196,106,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(42,157,143,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 30%, rgba(123,45,142,0.04) 0%, transparent 50%);
    animation: bgSwirl 20s ease-in-out infinite;
    pointer-events: none; z-index: 0;
}
@keyframes bgSwirl {
    0%,100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(3deg) scale(1.02); }
    50% { transform: rotate(0deg) scale(1.01); }
    75% { transform: rotate(-3deg) scale(1.02); }
}
/* Scanlines */
.bl-home::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px
    );
    pointer-events: none; z-index: 1;
}
.bl-home-center { position: relative; z-index: 10; flex: 1; display: flex; align-items: center; justify-content: center; }
.bl-featured-card {
    width: 220px; min-width: 220px; max-width: 220px;
    display: flex; flex-direction: column;
    border-radius: 10px; overflow: visible;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 30px rgba(233,196,106,0.1);
    position: relative; background: #111820;
}
.bl-featured-card::before {
    content: ''; position: absolute; inset: 0; z-index: 4;
    border-radius: inherit; pointer-events: none;
    background:
        linear-gradient(125deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 15%, transparent 30%),
        linear-gradient(165deg, transparent 45%, rgba(255,255,255,0.025) 50%, transparent 55%),
        linear-gradient(0deg, rgba(255,255,255,0.03) 0%, transparent 20%);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-left: 1px solid rgba(255,255,255,0.05);
    border-right: 1px solid rgba(255,255,255,0.02);
}
.bl-featured-card::after {
    content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    pointer-events: none; z-index: 4;
}
.bl-featured-art {
    height: 190px; flex: none; position: relative;
    overflow: hidden; border-radius: 10px 10px 0 0;
    background: linear-gradient(150deg, #1a2636, #121c28);
}
.bl-featured-card.era-pioneers .bl-featured-art { background: linear-gradient(150deg, #4a3520, #352516); }
.bl-featured-card.era-golden   .bl-featured-art { background: linear-gradient(150deg, #3a3a40, #282830); }
.bl-featured-card.era-modern   .bl-featured-art { background: linear-gradient(150deg, #3a3210, #2a2408); }
.bl-featured-card.era-millennium .bl-featured-art { background: linear-gradient(150deg, #2a2a32, #1c1c24); }
.bl-featured-art::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(233,196,106,0.15), transparent);
}
.bl-featured-shape {
    position: absolute; top: -8px; left: -6px; width: 70px; height: 70px;
    background: rgba(255,255,255,0.05);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    pointer-events: none; z-index: 2;
}
.bl-featured-img-wrap {
    position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%);
    z-index: 10; pointer-events: none;
}
.bl-featured-img-wrap > img {
    width: 180px; height: auto; object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
    cursor: grab; user-select: none; -webkit-user-drag: none;
    will-change: transform; pointer-events: auto !important;
    transition: transform 0.05s linear, filter 0.08s ease;
}
.bl-featured-img-wrap > img.dragging { filter: drop-shadow(0 10px 30px rgba(0,0,0,0.7)); }
/* Boards and stadiums sit in the art area like pieces; titles at piece scale */
.bl-featured-card[data-feat-type="board"] .bl-featured-img-wrap > img,
.bl-featured-card[data-feat-type="stadium"] .bl-featured-img-wrap > img {
    width: 150px;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.7));
}
.bl-featured-card[data-feat-type="title"] .bl-featured-img-wrap > img {
    width: 120px;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
}
.bl-home.is-dragging .bl-home-center { z-index: 200; }
.bl-home.is-dragging .bl-featured-img-wrap { z-index: 200; }
.bl-home.is-dragging .bl-featured-info,
.bl-home.is-dragging .bl-featured-shine { pointer-events: none; }
.bl-featured-info {
    min-height: 95px; overflow: visible;
    padding: 0.4rem 0.6rem 0.4rem;
    background: #0d1520; border-top: 1px solid rgba(255,255,255,0.06);
    border-radius: 0 0 10px 10px;
    display: flex; flex-direction: column; align-items: center;
    position: relative; z-index: 1;
}
.bl-featured-info-group .spin-reveal-badge { margin: -0.1rem 0 0; transform: scale(0.85); }
.bl-featured-info-group { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; width: 100%; }
.bl-featured-info-name { font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1.5px; text-align: center; }
.bl-featured-info-sub { font-size: 0.55rem; font-weight: 600; color: rgba(255,255,255,0.35); text-transform: capitalize; letter-spacing: 0.5px; text-align: center; margin-top: 0.15rem; }
.bl-featured-info-year { font-size: 1.1rem; font-weight: 900; color: var(--bl-accent); font-variant-numeric: tabular-nums; }
.bl-featured-info-type { flex-shrink: 0; margin-top: 0.15rem; line-height: 1; padding-bottom: 0.1rem; }
.bl-featured-info-type img { height: 16px; width: auto; filter: brightness(0) invert(1); opacity: 0.25; }
.bl-featured-shine { position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; overflow: hidden; }
.bl-featured-shine::after {
    content: ''; position: absolute; top: -50%; left: -100%; width: 50%; height: 200%;
    background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.08) 55%, transparent 75%);
    transform: skewX(-12deg); opacity: 0;
    animation: blFeatShineSweep 4s ease-in-out infinite;
}
@keyframes blFeatShineSweep {
    0%, 80% { left: -100%; opacity: 0; } 85% { opacity: 1; } 100% { left: 150%; opacity: 0; }
}

/* ── PACK OPENING (real PackSpinner + the shop's own deck, kept in-frame) ── */
.pack-demo {
    width: 100%; height: 100%;
    position: relative; overflow: hidden;
    background: #0f1119;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Segoe UI', system-ui, sans-serif;
    --bl-accent: #e9c46a; --bl-text: #f0f0f0; --bl-text-sec: #9ca3af; --bl-green: #2a9d8f;
}
.pack-demo::before {
    content: '';
    position: absolute; inset: -50%;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(233,196,106,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(42,157,143,0.05) 0%, transparent 50%);
    animation: bgSwirl 20s ease-in-out infinite;
    pointer-events: none;
}
.pack-demo .shop-deck { position: relative; width: 100%; height: 190px; flex: none; }

/* Deck cards, copied from club_shop.css and scoped to the demo */
.pack-demo .pack-name {
  font-size: 0.48rem; font-weight: 700; color: rgba(255,255,255,0.8);
  line-height: 1.1;
}
.pack-demo .pack-price {
  font-size: 0.44rem; font-weight: 700; color: var(--bl-accent);
}
.pack-demo .pack-price .ch-millions { font-size: inherit; font-weight: inherit; color: inherit; gap: 0.12rem; }
.pack-demo .pack-price .ch-coin { width: 8px; height: 8px; font-size: 0.28rem; border-width: 1px; }
.pack-demo .pack-price .ch-coin::after { width: 3px; height: 2px; }
.pack-demo .pack-rarity-tag {
  font-size: 0.3rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 0.02rem 0.15rem; border-radius: 2px;
  margin-bottom: 0.02rem;
}
.pack-demo .tier-common .pack-rarity-tag { color: #888; border: 1px solid rgba(136,136,136,0.2); }
.pack-demo .tier-uncommon .pack-rarity-tag { color: #aaa; border: 1px solid rgba(170,170,170,0.2); }
.pack-demo .tier-rare .pack-rarity-tag { color: #ccc; border: 1px solid rgba(200,200,210,0.2); }
.pack-demo .tier-epic .pack-rarity-tag { color: #cd7f32; border: 1px solid rgba(205,127,50,0.2); }
.pack-demo .tier-legendary .pack-rarity-tag { color: #e9c46a; border: 1px solid rgba(233,196,106,0.2); }
.pack-demo .tier-icon .pack-rarity-tag { color: #ddd; border: 1px solid rgba(220,220,230,0.2); }
.pack-demo .pack-pick .pack-rarity-tag { color: var(--bl-teal); border: 1px solid rgba(42,157,143,0.2); }
.pack-demo .pack-field-pick .pack-rarity-tag { color: #c49630; border: 1px solid rgba(196,150,48,0.2); }
.pack-demo .shop-deck-section {
  width: 100%; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pack-demo .shop-deck-label {
  font-size: 0.55rem; font-weight: 700; color: var(--bl-text-dim);
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 0.3rem;
  text-align: left; flex-shrink: 0;
}
.pack-demo .shop-deck {
  position: relative; width: 100%;
  flex: 1; min-height: 0;
}
.pack-demo .deck-card {
  width: 74px; height: 100px; position: absolute; top: 10px;
  border-radius: 7px; cursor: var(--cur-hand, pointer);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  left: 50%;
  transition: transform 0.35s cubic-bezier(0.25,0.8,0.25,1);
  display: flex; flex-direction: column;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: deckCardIn 0.4s ease both;
}
.pack-demo .deck-card-art {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.pack-demo .deck-card-icon { font-size: 1.5rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.pack-demo .deck-card.era-pioneers .deck-card-art { background: linear-gradient(150deg, #4a3520, #352516); }
.pack-demo .deck-card.era-golden .deck-card-art { background: linear-gradient(150deg, #3a3a40, #282830); }
.pack-demo .deck-card.era-modern .deck-card-art { background: linear-gradient(150deg, #3a3210, #2a2408); }
.pack-demo .deck-card.era-millennium .deck-card-art { background: linear-gradient(150deg, #2a2a32, #1c1c24); }
.pack-demo .deck-card.era-all .deck-card-art { background: linear-gradient(150deg, #1e2830, #141c24); }
.pack-demo .deck-card.era-new_era .deck-card-art { background: linear-gradient(150deg, rgba(42,157,143,0.18), rgba(20,40,36,0.9)); }
.pack-demo .deck-card.tier-common .deck-card-info { background: #0e0e0e; }
.pack-demo .deck-card.tier-common { border-color: rgba(120,120,120,0.2); }
.pack-demo .deck-card.tier-uncommon .deck-card-info { background: #121212; }
.pack-demo .deck-card.tier-uncommon { border-color: rgba(150,150,150,0.25); }
.pack-demo .deck-card.tier-rare .deck-card-info {
  background: linear-gradient(170deg, #161618, #111113);
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.pack-demo .deck-card.tier-rare { border-color: rgba(200,200,210,0.25); }
.pack-demo .deck-card.tier-epic .deck-card-info {
  background: linear-gradient(170deg, #18120c, #100c08);
  border-top: 1px solid rgba(205,127,50,0.12) !important;
}
.pack-demo .deck-card.tier-epic { border-color: rgba(205,127,50,0.25); }
.pack-demo .deck-card.tier-epic:hover { box-shadow: 0 0 12px rgba(205,127,50,0.08); }
.pack-demo .deck-card.tier-legendary .deck-card-info {
  background: linear-gradient(170deg, #161208, #0e0c06);
  border-top: 1px solid rgba(255,215,0,0.1) !important;
}
.pack-demo .deck-card.tier-legendary { border-color: rgba(255,215,0,0.2); }
.pack-demo .deck-card.tier-legendary:hover { box-shadow: 0 0 14px rgba(255,215,0,0.08); }
.pack-demo .deck-card.tier-icon .deck-card-info {
  background: linear-gradient(170deg, #141418, #0e0e12);
  border-top: 1px solid rgba(220,220,230,0.12) !important;
}
.pack-demo .deck-card.tier-icon { border-color: rgba(200,200,220,0.3); }
.pack-demo .deck-card.tier-icon:hover { box-shadow: 0 0 16px rgba(200,200,220,0.1); }
.pack-demo .deck-card-art .deck-item-img {
  position: absolute; bottom: -5px; right: -5px;
  width: 110%; max-width: none; height: auto;
  object-fit: cover; opacity: 0.8;
  filter: drop-shadow(-2px -2px 8px rgba(0,0,0,0.5));
  transition: opacity 0.3s ease;
  z-index: 0;
}
.pack-demo .deck-card:hover .deck-item-img { opacity: 0.95; }
.pack-demo .deck-card-art .deck-card-shape {
  position: absolute; top: -4px; left: -3px;
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.1);
  -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  pointer-events: none; z-index: 1;
}
.pack-demo .deck-card-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.pack-demo .deck-card-icon-img {
  width: 32px; height: 32px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.25;
  transition: opacity 0.25s ease, filter 0.25s ease;
  pointer-events: none;
}
.pack-demo .tier-common .deck-card-icon-img { opacity: 0.18; }
.pack-demo .tier-common:hover .deck-card-icon-img, .pack-demo .tier-common.deck-hover .deck-card-icon-img { opacity: 0.4; }
.pack-demo .tier-uncommon .deck-card-icon-img { opacity: 0.22; }
.pack-demo .tier-uncommon:hover .deck-card-icon-img, .pack-demo .tier-uncommon.deck-hover .deck-card-icon-img { opacity: 0.48; }
.pack-demo .tier-rare .deck-card-icon-img { opacity: 0.35; }
.pack-demo .tier-rare:hover .deck-card-icon-img, .pack-demo .tier-rare.deck-hover .deck-card-icon-img {
  opacity: 0.55;
  filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(255,255,255,0.3));
}
.pack-demo .tier-epic .deck-card-icon-img {
  opacity: 0.45;
  filter: brightness(0) invert(1) sepia(0.3) saturate(2) hue-rotate(-10deg);
}
.pack-demo .tier-epic:hover .deck-card-icon-img, .pack-demo .tier-epic.deck-hover .deck-card-icon-img {
  opacity: 0.65;
  filter: brightness(0) invert(1) sepia(0.3) saturate(2) hue-rotate(-10deg)
    drop-shadow(0 0 5px rgba(205,127,50,0.5));
}
.pack-demo .tier-legendary .deck-card-icon-img {
  opacity: 0.55;
  filter: brightness(0) invert(1) sepia(0.5) saturate(3) hue-rotate(-15deg) brightness(1.1)
    drop-shadow(0 0 3px rgba(233,196,106,0.3));
}
.pack-demo .tier-legendary:hover .deck-card-icon-img, .pack-demo .tier-legendary.deck-hover .deck-card-icon-img {
  opacity: 0.75;
  filter: brightness(0) invert(1) sepia(0.5) saturate(3) hue-rotate(-15deg) brightness(1.1)
    drop-shadow(0 0 6px rgba(233,196,106,0.5)) drop-shadow(0 0 12px rgba(233,196,106,0.2));
}
.pack-demo .tier-icon .deck-card-icon-img {
  opacity: 0.6;
  filter: brightness(0) invert(1) brightness(1.2)
    drop-shadow(0 0 3px rgba(220,220,230,0.3));
}
.pack-demo .tier-icon:hover .deck-card-icon-img, .pack-demo .tier-icon.deck-hover .deck-card-icon-img {
  opacity: 0.8;
  filter: brightness(0) invert(1) brightness(1.2)
    drop-shadow(0 0 6px rgba(220,220,230,0.5)) drop-shadow(0 0 14px rgba(220,220,230,0.2));
}
.pack-demo .deck-card-info {
  height: 0; overflow: hidden; background: rgba(17,24,32,0.88);
  padding: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pack-demo .deck-card-info .pack-name { font-size: 0.42rem; line-height: 1.1; white-space: nowrap; }
.pack-demo .deck-card-info .pack-rarity-tag { font-size: 0.26rem; padding: 0.01rem 0.12rem; white-space: nowrap; }
.pack-demo .deck-card-info .pack-desc { font-size: 0.3rem; line-height: 1; white-space: nowrap; }
.pack-demo .deck-card-info .pack-price { font-size: 0.38rem; white-space: nowrap; }
.pack-demo .deck-card.deck-hover {
  transition: transform 0.35s cubic-bezier(0.25,0.8,0.25,1);
}
.pack-demo .deck-card.deck-hover .deck-card-art { height: 64px; flex: none; }
.pack-demo .deck-card.deck-hover .deck-card-info {
  height: 36px; padding: 0.1rem 0.15rem 0.15rem;
}
.pack-demo .deck-card-art::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
}
.pack-demo .rarity-common .deck-card-art::after { background: linear-gradient(90deg, transparent, #9e9e9e44, transparent); }
.pack-demo .rarity-uncommon .deck-card-art::after { background: linear-gradient(90deg, transparent, #4caf5044, transparent); }
.pack-demo .rarity-rare .deck-card-art::after { background: linear-gradient(90deg, transparent, #ffd70044, transparent); }
.pack-demo .rarity-epic .deck-card-art::after { background: linear-gradient(90deg, transparent, #9c27b044, transparent); }
.pack-demo .rarity-legendary .deck-card-art::after { background: linear-gradient(90deg, transparent, #ff980044, transparent); }
.pack-demo .rarity-icon .deck-card-art::after { background: linear-gradient(90deg, transparent, #c0c0c044, transparent); }
.pack-demo .pack-pick .deck-card-art::after { background: linear-gradient(90deg, transparent, #2a9d8f44, transparent); }
.pack-demo .pack-field-pick .deck-card-art::after { background: linear-gradient(90deg, transparent, #c4963044, transparent); }
.pack-demo .deck-card-glass {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(130deg, rgba(255,255,255,0.07) 0%, transparent 30%);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pack-demo .deck-card .deck-shine {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit;
  pointer-events: none; overflow: hidden;
}
.pack-demo .deck-card .deck-shine::after {
  content: ''; position: absolute; top: -50%; left: -100%;
  width: 50%; height: 200%;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.08) 55%, transparent 75%);
  transform: skewX(-12deg); opacity: 0;
}
.pack-demo .deck-card.deck-hover .deck-shine::after {
  animation: shineLTR 0.8s cubic-bezier(0.25,0.8,0.25,1) forwards;
}
.pack-demo .shop-fd-price .ch-millions { font-size: inherit; font-weight: inherit; color: inherit; gap: 0.35rem; }
.pack-demo .shop-fd-price .ch-coin { width: 18px; height: 18px; font-size: 0.55rem; border-width: 1.5px; }
.pack-demo .shop-fd-price .ch-coin::after { width: 7px; height: 4px; }

/* One pack at a time here, so the "1 of 1" counter has nothing to say */
.pack-demo .spin-counter { display: none !important; }
/* the reel sits inside a clip inset 20px from the container top: pull it back up */
.pack-demo .spinner-container { margin-top: -22px; }

/* The spinner normally covers the page; here it stays inside the frame */
.pack-demo .pack-spinner-overlay {
    position: absolute; top: 0; left: 0;
    z-index: 30;
    width: calc(100% / var(--spin-scale, 0.62));
    height: calc(100% / var(--spin-scale, 0.62));
    transform: scale(var(--spin-scale, 0.62));
    transform-origin: top left;
}


/* ── NATIONALITY CAROUSEL (copied from home.html/home.js — real markup, real physics, white scene) ── */
.nat-demo {
    width: 100%; height: 100%;
    background: #ffffff;
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
#natRail {
    position: relative; width: 100%; height: 100%;
    overflow: hidden; display: flex; align-items: center;
    -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 8%,rgba(0,0,0,.7) 18%,black 30%,black 70%,rgba(0,0,0,.7) 82%,rgba(0,0,0,.15) 92%,transparent 100%);
    mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 8%,rgba(0,0,0,.7) 18%,black 30%,black 70%,rgba(0,0,0,.7) 82%,rgba(0,0,0,.15) 92%,transparent 100%);
}
#natTrack {
    display: flex; flex-wrap: nowrap; gap: 2rem; align-items: center;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    padding: 0 calc(50% - 40px); will-change: transform;
}
.nb { flex: 0 0 auto; width: 80px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    cursor: default; user-select: none; pointer-events: none; transition: opacity .4s, filter .4s; opacity: .12; filter: saturate(.3) brightness(.6); }
.nb.c1 { opacity: .38; filter: saturate(.55) brightness(.85); }
.nb.c0 { opacity: 1; filter: none; pointer-events: auto; cursor: var(--cur-hand, pointer); z-index: 5; }
.nb.c0 .country-badge-wrapper { transform: scale(1.22); transition: transform .4s cubic-bezier(.25,.1,.25,1); }
.nb .country-badge-wrapper { transition: transform .4s cubic-bezier(.25,.1,.25,1); pointer-events: none !important; }
.nb.c3 { opacity: 0; pointer-events: none; }
.nb .nn { font-size: .65rem; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; opacity: 0; color: #666; transition: opacity .3s; font-family: 'Selawik', sans-serif; }
.nb.c0 .nn { opacity: 1; }
#natCfm {
    position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%);
    z-index: 501; opacity: 0; pointer-events: none; transition: opacity .35s;
}
#natCfmCard { display: flex; border: 2px solid rgba(0,0,0,0.12); border-radius: 10px; overflow: hidden; font-family: 'Selawik', sans-serif; }
#natCfmCard button {
    width: 110px; padding: 0.5rem 0; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; cursor: var(--cur-hand, pointer);
    transition: all .2s; border: none; text-align: center;
}
#natCancel { background: transparent; color: rgba(0,0,0,0.35); }
#natOk { border-left: 2px solid rgba(0,0,0,0.12); background: rgba(0,0,0,0.04); color: #000; }
#natCancel:hover, #natOk:hover { background: #e9c46a !important; color: #fff !important; }

/* Demo stages fill their exhibit frame */
.ex-stage > .bl-home, .ex-stage > .pack-demo, .ex-stage > .nat-demo { position: absolute; inset: 0; }
/* ── Social carousels ── */
/* --ui is the reveal factor for the arrows and the counter: they only
   appear while the carousel is hovered or focused, so with the pointer
   away the artwork stands on its own. A factor rather than a plain
   `:hover { opacity: 1 }` so a disabled arrow keeps its dimmed look
   instead of being overridden by the more specific hover rule. */
.ig { position: relative; width: min(100%, 420px); justify-self: center; --ui: 0; }
.ig:hover, .ig:focus-within { --ui: 1; }
/* No hover on touch — leave the controls up so they stay reachable. */
@media (hover: none) { .ig { --ui: 1; } }
.exhibit.flip .ig { order: 2; }
.ig-track {
    display: flex;
    aspect-ratio: var(--ratio);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 14px;
    border: 1px solid rgba(233,201,106,0.18);
    box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 0 6px rgba(0,0,0,0.25);
    background: #0c0403;
    cursor: grab;
    outline: none;
}
.ig-track::-webkit-scrollbar { display: none; }
.ig-track:focus-visible { border-color: var(--gold-hi); }
.ig-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.ig-track img {
    flex: 0 0 100%;
    width: 100%; height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
    user-select: none;
    -webkit-user-drag: none;
}
.ig-btn {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%;
    width: 44px; height: 44px;
    margin-top: -38px;
    border-radius: 50%;
    border: 1px solid rgba(228,228,228,0.25);
    background: rgba(10,4,3,0.75);
    color: var(--white);
    font-size: 1rem;
    cursor: var(--cur-hand, pointer);
    opacity: var(--ui);
    pointer-events: none;   /* invisible arrows must not catch the pointer */
    transition: border-color 0.2s, background 0.2s, opacity 0.25s;
}
.ig:hover .ig-btn:not([disabled]),
.ig:focus-within .ig-btn:not([disabled]) { pointer-events: auto; }
.ig-btn:hover { border-color: var(--gold-hi); background: rgba(233,201,106,0.16); }
.ig-btn[disabled] { opacity: calc(var(--ui) * 0.25); pointer-events: none; }
.ig-btn.prev { left: -22px; }
.ig-btn.next { right: -22px; }
.ig-count {
    position: absolute; top: 14px; right: 14px;
    font-family: var(--sans);
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em;
    color: var(--silver-hi);
    background: rgba(10,4,3,0.7);
    border: 1px solid rgba(233,201,106,0.3);
    padding: 5px 10px;
    border-radius: 999px;
    pointer-events: none;
    opacity: var(--ui);
    transition: opacity 0.25s;
}
.ig-count b { color: var(--gold-hi); font-weight: 600; }
.ig-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.ig-dots i {
    width: 6px; height: 6px;
    border-radius: 3px;
    background: rgba(228,228,228,0.25);
    transition: width 0.3s, background 0.3s;
}
.ig-dots i.on { width: 18px; background: var(--gold-hi); }

@media (max-width: 900px) {
    .exhibit, .exhibit.flip { grid-template-columns: 1fr; padding: 70px 20px 0; }
    /* Stacked into one column, the copy goes FIRST: read what a demo is,
       then meet it. The DOM has the stage first because that is what the
       desktop two-column layout wants, and .flip pushes it to order 2 —
       both are overridden here, so every exhibit reads the same way down
       the page whether or not it is flipped. Covers .ig too, the social
       carousels being the same pairing with a different visual. */
    .exhibit .ex-copy { order: -1; margin-bottom: 4px; }
    .exhibit.flip .ex-stage, .exhibit.flip .ig { order: 0; }
    .ig-btn.prev { left: 8px; }
    .ig-btn.next { right: 8px; }
    .also-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .meta { grid-template-columns: 1fr; }
    .also-grid { grid-template-columns: 1fr; }
}