/* THE SIMCOIN SHOP (/rewards/shop). Noir and gilt on the site's own tokens; 390px first.
 *
 * The rarity frames are declared once, here, for both themes: Common grey, Rare blue, Epic
 * purple, Legendary gold. Every rule below reads a token; no rule carries a colour of its own.
 */
.page-shop {
  --shop-common: #9aa3ad;
  --shop-rare: #4d8dff;
  --shop-epic: #a86bff;
  --shop-legendary: #e6c97c;
  --shop-card: #100f0c;
  --shop-card-2: #17150f;
  --shop-page: #0a0a0a;
  --shop-bar: rgba(20, 20, 20, 0.88);
  --shop-bar-2: rgba(10, 10, 10, 0.72);
  --shop-foot: rgba(10, 10, 10, 0.82);
  background: var(--shop-page);
}
:root[data-theme="light"] .page-shop {
  --shop-common: #6b7480;
  --shop-rare: #2f6fd0;
  --shop-epic: #7a45c8;
  --shop-legendary: #8a6d2e;
  --shop-card: #ffffff;
  --shop-card-2: #f7f8fb;
  --shop-page: #f4f5f8;
  --shop-bar: rgba(244, 245, 248, 0.9);
  --shop-bar-2: rgba(244, 245, 248, 0.78);
  --shop-foot: rgba(244, 245, 248, 0.9);
}

/* Above the fixed page plate, with the masthead's own layer kept above the page. */
.page-shop main,
.page-shop .site-footer { position: relative; z-index: 1; }
.page-shop .masthead { position: sticky; z-index: 30; background: linear-gradient(180deg, var(--shop-bar), var(--shop-bar-2)); }
.page-shop .site-footer { background: var(--shop-foot); }
.page-shop main { padding-top: var(--s6); padding-bottom: var(--s8); }

/* ---------- head ---------- */
.shop-head { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.shop-head__crumb { margin: 0; font: 600 var(--t-micro)/1.2 var(--ui); color: var(--muted); }
.shop-head__crumb a { color: var(--brass); }
.shop-head__title {
  margin: 0; font: 800 clamp(40px, 11vw, 72px)/1 var(--display); letter-spacing: var(--track-tight);
  background: var(--metal-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shop-head__lede { margin: 0; max-width: 46ch; color: var(--muted); font-size: var(--t-body); line-height: 1.5; }

/* ---------- balance ---------- */
.shop-balance {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: center;
  padding: var(--s4); border-radius: var(--radius-lg);
  background: var(--glass-bg); border: 1px solid var(--line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.shop-balance__coin img { display: block; width: 72px; height: 72px; }
.shop-balance__body { min-width: 0; }
.shop-balance__label { margin: 0; font: 700 11px/1.2 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.shop-balance__n { margin: 2px 0 0; display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.shop-balance__n [data-shop-balance] {
  font: 800 clamp(34px, 10vw, 56px)/1 var(--display); letter-spacing: var(--track-tight);
  background: var(--metal-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.shop-balance__unit { font: 600 16px/1 var(--display); color: var(--text); }
.shop-balance__note { margin: var(--s2) 0 0; color: var(--muted); font-size: 14px; }
.shop-balance__go { grid-column: 1 / -1; display: flex; gap: var(--s2); flex-wrap: wrap; }

.shop-status { min-height: 1.4em; margin: var(--s3) 0 0; color: var(--gold-bright); font: 600 14px/1.4 var(--ui); }

/* ---------- sections ---------- */
.shop-section { margin-top: var(--s6); }
.shop-section__head { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.shop-section__head h2 { margin: 0; font: 700 clamp(24px, 6vw, 32px)/1.1 var(--display); letter-spacing: var(--track-tight); color: var(--text); }
.shop-section__sub { margin: 0; max-width: 56ch; color: var(--muted); font-size: 15px; line-height: 1.5; }
.shop-note { color: var(--muted); }

.shop-key { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.shop-key__item {
  padding: 3px 9px; border-radius: var(--radius-pill); font: 700 10px/1.4 var(--ui); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rarity); border: 1px solid color-mix(in srgb, var(--rarity) 60%, transparent);
}
.shop-key__item--common, .shop-card--common { --rarity: var(--shop-common); }
.shop-key__item--rare, .shop-card--rare { --rarity: var(--shop-rare); }
.shop-key__item--epic, .shop-card--epic { --rarity: var(--shop-epic); }
.shop-key__item--legendary, .shop-card--legendary { --rarity: var(--shop-legendary); }

/* ---------- pack cards ---------- */
.shop-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.shop-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
  gap: var(--s3); padding: var(--s4); border-radius: var(--radius);
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--rarity) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--shop-card-2), var(--shop-card));
  border: 1px solid color-mix(in srgb, var(--rarity) 55%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rarity) 35%, transparent), 0 18px 40px -28px var(--shadow);
}
.shop-card--epic { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rarity) 45%, transparent), 0 0 28px -12px color-mix(in srgb, var(--rarity) 70%, transparent); }
.shop-card--legendary {
  border-width: 1.5px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rarity) 60%, transparent), 0 0 36px -10px color-mix(in srgb, var(--rarity) 75%, transparent);
}
.shop-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.shop-rarity {
  padding: 3px 9px; border-radius: var(--radius-pill); font: 800 10px/1.4 var(--ui); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rarity); background: color-mix(in srgb, var(--rarity) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rarity) 55%, transparent);
}
.shop-card__count { font: 600 12px/1.2 var(--ui); color: var(--muted); }
.shop-card__name { margin: 0; font: 700 22px/1.15 var(--display); letter-spacing: var(--track-tight); color: var(--text); }

.shop-card__art { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); align-content: start; }
.shop-card__tile {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--rarity) 8%, transparent); border: 1px solid var(--line-soft);
}
.shop-card__tile img, .shop-card__tile picture { display: block; width: 84%; height: 84%; min-width: 0; max-width: 100%; object-fit: contain; }
.shop-card__tile picture img { width: 100%; height: 100%; }
.shop-card__art--four .shop-card__tile img, .shop-card__art--four .shop-card__tile picture { width: 92%; height: 92%; }
.shop-card__tile--more { font: 800 18px/1 var(--display); color: var(--rarity); }
.shop-card__tile--pending {border-style: dashed; border-color: color-mix(in srgb, var(--rarity) 45%, transparent); background: transparent; }
.shop-card--owned .shop-card__tile { border-color: color-mix(in srgb, var(--rarity) 35%, transparent); }

.shop-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s2); border-top: 1px solid var(--line-soft); }
.shop-card__price { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font: 500 14px/1 var(--ui); }
.shop-card__price img { width: 18px; height: 18px; }
.shop-card__price strong { color: var(--text); font: 800 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.shop-card__buy { min-width: 120px; justify-content: center; }
.shop-card__buy.is-confirming { box-shadow: 0 0 0 2px var(--focus), var(--glow-gold); }
.shop-card__state { font: 700 13px/1.2 var(--ui); color: var(--muted); }
.shop-card__state--owned { color: var(--rarity); }
.shop-card__state--owned::before { content: "\2713\00a0"; }
.shop-card__state--short { color: var(--text); }
.shop-card__state--soon { font-style: italic; }

/* ---------- crest ladder ---------- */
.shop-progress { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.shop-progress[hidden] { display: none; }
.shop-progress__bar {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border: 0; border-radius: var(--radius-pill);
  background: var(--line-soft); overflow: hidden;
}
.shop-progress__bar::-webkit-progress-bar { background: var(--line-soft); border-radius: var(--radius-pill); }
.shop-progress__bar::-webkit-progress-value { background: var(--metal-gold); border-radius: var(--radius-pill); }
.shop-progress__bar::-moz-progress-bar { background: var(--metal-gold); border-radius: var(--radius-pill); }
.shop-progress__text { margin: 0; color: var(--text); font: 600 14px/1.4 var(--ui); }

.shop-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.shop-rung {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: var(--s3) var(--s2); text-align: center;
  border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--glass-bg);
}
.shop-rung__crest { width: 64px; height: 64px; }
.shop-rung__name { font: 700 14px/1.2 var(--display); color: var(--text); }
.shop-rung__won { font: 500 12px/1.2 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.shop-rung__you {
  margin-top: 2px; padding: 2px 8px; border-radius: var(--radius-pill); font: 800 9px/1.4 var(--ui); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--btn-gilt-text); background: var(--metal-gold);
}
.shop-rung--current { border-color: var(--gold-bright); box-shadow: var(--glow-gold); }
.shop-rung--next { border-style: dashed; border-color: var(--line); }
.shop-rung--locked .shop-rung__crest { filter: grayscale(0.85) brightness(0.8); opacity: 0.6; }
.shop-rung--locked .shop-rung__name { color: var(--muted); }

/* ---------- merch ---------- */
.shop-merch {
  margin-top: var(--s6); padding: var(--s5) var(--s4); border-radius: var(--radius-lg); text-align: center;
  border: 1px dashed var(--gold-deep); background: var(--glass-bg);
}
.shop-merch__kicker { margin: 0; font: 700 11px/1.2 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); }
.shop-merch__title { margin: var(--s2) 0 0; font: 700 clamp(22px, 6vw, 30px)/1.1 var(--display); color: var(--text); }

/* ---------- footer: the one fine-print line ---------- */
.shop-fine { margin: var(--s4) 0 0; color: var(--muted); font: 500 12px/1.6 var(--mono); }
.shop-fine a { color: var(--brass); }

/* ---------- wider ---------- */
@media (min-width: 640px) {
  .shop-balance { grid-template-columns: auto 1fr auto; padding: var(--s5); }
  .shop-balance__coin img { width: 84px; height: 84px; }
  .shop-balance__go { grid-column: auto; flex-direction: column; align-items: stretch; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-section__head { grid-template-columns: 1fr auto; align-items: end; }
  .shop-section__sub { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-ladder { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .shop-rung__crest { width: 80px; height: 80px; }
}
/* The chat rail's tab sits on the right edge of a phone; keep the head clear of it. */
@media (max-width: 859px) {
  .shop-head { padding-right: calc(var(--sf-rail-tab, 44px) + 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-card, .shop-card__buy { transition: none; }
}