:root {
  --store-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --store-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --store-cut: 9px;

  /* STORE-enter cascade budget: base + step * lastIndex + duration <= 450ms.
     Worst case is the 9-card shop grid: 60 + 8*14 + 240 = 412ms. */
  --store-base: 60ms;
  --store-step: 14ms;
  --store-dur: 240ms;

  --rarity-common: #9aa3ad;
  --rarity-rare: #39aef2;
  --rarity-epic: #b86bff;
  --rarity-legendary: #ff9d0a;
}

/* Shared cascade primitive — children opt in with --i */
@keyframes store-rise {
  from { opacity: 0; transform: translate3d(0, 9px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes store-slide-in {
  from { opacity: 0; transform: translate3d(10px, 0, 0); }
  to { opacity: 1; transform: none; }
}

/* ── Top nav: Play becomes the return cue in Store / Inventory ──
   Same tab geometry always. Store/Inventory keep the only full is-active chrome
   (rim + bottom glow); Play must never read as a second active tab.

   The cue is a solid amber KEY PLATE fused to the tab's leading edge — the same
   chamfer as the tab itself, so it reads as hardware rather than a glyph parked
   next to the word. It lives in the tab's 20px left gutter, absolutely
   positioned, so "Play" stays optically centred and the nav never reflows on a
   mode change (an inline icon would widen the tab and shove every sibling). */
.slant-nav__item[data-nav="play"] .slant-nav__return {
  position: absolute;
  top: 50%;
  left: 8px;
  z-index: 1;
  display: grid;
  width: 17px;
  height: 21px;
  place-items: center;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  background: linear-gradient(180deg, var(--amber-hot, #ffc252), var(--amber-deep, #d87800));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  color: #1c1305;
  font-size: 10px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-5px) scaleX(0.4);
  transform-origin: left center;
  transition:
    opacity 160ms var(--store-ease),
    transform 240ms var(--store-spring);
}

body[data-lobby-panel="store"] .slant-nav__item[data-nav="play"] .slant-nav__return,
body[data-lobby-panel="inventory"] .slant-nav__item[data-nav="play"] .slant-nav__return {
  opacity: 1;
  transform: translateY(-50%);
}

/* Quiet lit plate: warm steel, no amber rim and no bottom glow bar. Enough to
   read as "this is the way out" without borrowing the active tab's signature. */
body[data-lobby-panel="store"] .slant-nav__item[data-nav="play"],
body[data-lobby-panel="inventory"] .slant-nav__item[data-nav="play"] {
  color: #f2e6d2;
}

body[data-lobby-panel="store"] .slant-nav__item[data-nav="play"] .slant-nav__surface::before,
body[data-lobby-panel="inventory"] .slant-nav__item[data-nav="play"] .slant-nav__surface::before {
  background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.26), rgba(255, 255, 255, 0.06) 52%, rgba(var(--amber-rgb), 0.16));
}

body[data-lobby-panel="store"] .slant-nav__item[data-nav="play"] .slant-nav__surface::after,
body[data-lobby-panel="inventory"] .slant-nav__item[data-nav="play"] .slant-nav__surface::after {
  background:
    linear-gradient(115deg, rgba(var(--amber-rgb), 0.1), transparent 40%),
    linear-gradient(180deg, #171b21, #0b0e12);
}

body[data-lobby-panel="store"] .slant-nav__item[data-nav="play"]:hover,
body[data-lobby-panel="inventory"] .slant-nav__item[data-nav="play"]:hover {
  color: #fff;
}

body[data-lobby-panel="store"] .slant-nav__item[data-nav="play"]:hover .slant-nav__surface::before,
body[data-lobby-panel="inventory"] .slant-nav__item[data-nav="play"]:hover .slant-nav__surface::before {
  background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.5), rgba(var(--amber-rgb), 0.14) 52%, rgba(var(--amber-rgb), 0.34));
}

body[data-lobby-panel="store"] .slant-nav__item[data-nav="play"]:hover .slant-nav__return,
body[data-lobby-panel="inventory"] .slant-nav__item[data-nav="play"]:hover .slant-nav__return {
  transform: translateY(-50%) translateX(-2px);
}

/* Opacity only — a saturate() filter here would rasterise the whole rail. */
body[data-lobby-panel="store"] .play-left-dim,
body[data-lobby-panel="inventory"] .play-left-dim {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 280ms var(--store-ease);
}

body[data-lobby-panel="store"] .lobby-left .play-cluster .quick-play-frame,
body[data-lobby-panel="inventory"] .lobby-left .play-cluster .quick-play-frame {
  opacity: 1;
  pointer-events: auto;
}

/* ── Below stage: Combat Record (Play/Inventory) ↔ Packages (Store) ──
   Same outside footprint in every mode — Combat Record's 138px. Store must
   densify chrome inside that box, never grow the slot and steal hero height. */

/* Height snaps, it never tweens: the hero stage is a flex sibling, so animating
   min-height here would fire the arena canvas ResizeObserver (renderer.setSize +
   drawing-buffer realloc) on every frame. The packages fade in over the change. */
.below-stage-slot {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 138px;
  min-height: 138px;
  max-height: 138px;
}

.below-stage-slot .combat-record-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  transition: opacity 220ms var(--store-ease), transform 300ms var(--store-spring);
}

/* visibility (not just opacity) keeps the inactive layer out of the a11y tree
   and off the paint list; it flips back instantly on the way in. */
.coin-packages-shell {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 260ms var(--store-ease),
    transform 320ms var(--store-spring),
    visibility 0s linear 260ms;
}

body[data-lobby-panel="store"] .below-stage-slot .combat-record-shell {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -6px, 0);
}

body[data-lobby-panel="store"] .coin-packages-shell {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 260ms var(--store-ease),
    transform 320ms var(--store-spring),
    visibility 0s;
}

.coin-packages {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6px 14px 7px;
  border: 0;
  clip-path: polygon(0 0, calc(100% - var(--store-cut)) 0, 100% var(--store-cut), 100% 100%, var(--store-cut) 100%, 0 calc(100% - var(--store-cut)));
  background: linear-gradient(180deg, #0e141b, #080b10);
  box-sizing: border-box;
  overflow: hidden;
}

/* Insufficient-funds / wallet+ emphasis — opacity-animated ring, no box-shadow tween */
.coin-packages::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 1px solid rgba(var(--amber-rgb, 255, 157, 10), 0.85);
  opacity: 0;
  pointer-events: none;
}

body.is-emphasize-packages .coin-packages::after {
  animation: store-ring-flash 620ms var(--store-ease) 2;
}

@keyframes store-ring-flash {
  0%, 100% { opacity: 0; }
  45% { opacity: 1; }
}

.coin-packages.cc-live-ref {
  max-width: none;
  margin: 0;
}

/* ── Pack card: rim + face bevel (ks-hex / lo-chip DNA), no flat borders ──
   Every card shares one internal rhythm so the totals sit on a common baseline
   across the row; the badge is an in-flow row, never an overlay that clips it. */

.pack {
  --pack-rim: linear-gradient(150deg, rgba(203, 219, 234, 0.3), rgba(126, 142, 158, 0.13) 48%, rgba(94, 108, 122, 0.22));
  --pack-accent: 159, 181, 201;
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 0;
  padding: 1px;
  border: 0;
  clip-path: polygon(
    var(--store-cut) 0,
    100% 0,
    100% calc(100% - var(--store-cut)),
    calc(100% - var(--store-cut)) 100%,
    0 100%,
    0 var(--store-cut)
  );
  background: var(--pack-rim);
  color: inherit;
  cursor: pointer;
  text-align: center;
  /* Depth via rim/face bevel — no filter:drop-shadow (clips + alpha blur ×N cards). */
  transition: transform 180ms var(--store-ease);
}

.pack__face {
  display: grid;
  grid-template-rows: 14px auto 11px 1fr auto auto;
  align-items: center;
  row-gap: 2px;
  height: 100%;
  min-height: 0;
  padding: 5px 8px 3px;
  clip-path: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 28%),
    linear-gradient(160deg, rgba(var(--pack-accent), 0.09), transparent 42%),
    linear-gradient(180deg, #111922, #080c11);
  box-sizing: border-box;
}

.pack:hover { transform: translateY(-2px); }
.pack:active { transform: translateY(-1px); }

.pack:disabled { cursor: default; }
.pack:disabled:hover { transform: none; }

.pack:focus-visible {
  outline: 2px solid var(--amber, #ff9d0a);
  outline-offset: 2px;
}

/* Featured: wider column, amber rim, lit face, brighter total. Hierarchy comes
   from size and light — not from filter glow. */
.pack.is-featured {
  --pack-rim: linear-gradient(150deg, rgba(255, 214, 130, 0.95), rgba(var(--amber-rgb), 0.58) 46%, rgba(var(--amber-rgb), 0.78));
  --pack-accent: var(--amber-rgb, 255, 157, 10);
}

.pack.is-featured .pack__face {
  background:
    linear-gradient(180deg, rgba(255, 214, 130, 0.1), transparent 32%),
    linear-gradient(160deg, rgba(var(--pack-accent), 0.16), transparent 48%),
    linear-gradient(180deg, #161c24, #0a0e14);
}

.pack__badge {
  align-self: start;
  justify-self: center;
  padding: 1px 8px 2px;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, var(--amber-hot, #ffc252), var(--amber, #ff9d0a));
  color: #241800;
  font-family: Rajdhani, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.pack__total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #f4f6f8;
  font-family: Rajdhani, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
}

.pack.is-featured .pack__total {
  color: #fff;
  font-size: 22px;
}

.pack__total i {
  color: var(--amber-hot, #ffc252);
  font-size: 0.56em;
}

.pack__bonus {
  color: #34d17a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 11px;
}

.pack__bonus:empty::before {
  content: "—";
  color: rgba(159, 181, 201, 0.22);
}

/* Price is the action — amber slab, the only filled surface on the card. */
.pack__buy {
  width: 100%;
  min-height: 24px;
  margin-top: 0;
  border: 0;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  background: linear-gradient(180deg, #2a3542, #18212b);
  color: #e9edf1;
  cursor: pointer;
  font-family: Rajdhani, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 24px;
  transition: background 150ms ease, color 150ms ease;
}

.pack:hover .pack__buy {
  background: linear-gradient(180deg, #35424f, #1e2833);
  color: #fff;
}

.pack.is-featured .pack__buy {
  background: linear-gradient(180deg, var(--amber-hot, #ffc252), var(--amber, #ff9d0a) 55%, var(--amber-deep, #d87800));
  color: #241800;
}

.pack.is-featured:hover .pack__buy {
  background: linear-gradient(180deg, #ffd36a, var(--amber-hot, #ffc252) 55%, var(--amber, #ff9d0a));
}

.pack__rate {
  margin-top: 2px;
  color: #6f7a86;
  font-size: 9px;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.pack.is-pulse { animation: store-pack-pulse 640ms var(--store-ease) 2; }

body[data-lobby-panel="store"] .pack {
  animation: store-rise var(--store-dur) var(--store-spring) both;
  animation-delay: calc(var(--store-base) + var(--i, 0) * var(--store-step));
}

/* Header: title · subtitle · Powered by Stripe (live top-up DNA, compressed) */
.coin-packages .cc-topup-header {
  flex: 0 0 auto;
  margin-bottom: 4px;
  flex-wrap: nowrap;
  gap: 10px;
  min-height: 0;
}

.coin-packages .cc-topup-title {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1;
}

.coin-packages .cc-topup-subtitle {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coin-packages .cc-topup-powered-by {
  flex: 0 0 auto;
  opacity: 0.85;
}

.coin-packages .cc-topup-powered-by img {
  display: block;
  height: 18px;
}

.cc-live-ref .cc-topup-loading {
  color: var(--muted, #858e99);
  font-size: 12px;
  padding: 10px 2px;
}

/* Four packs, one row — locked to the 138px Combat Record footprint.
   Wider gutters shrink each card slightly and give the strip breathing room. */
.coin-packages .cc-coin-packages {
  flex: 1 1 auto;
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 1.05fr;
  gap: 18px;
  min-height: 0;
  padding: 0 4px 1px;
}

@keyframes store-pack-pulse {
  0%, 100% { transform: none; }
  50% { transform: translateY(-2px) scale(1.015); }
}

/* ── Right rail: Play stack ↔ Shop ↔ Inventory (one 340px column) ── */

.lobby-right { position: relative; }

.play-right-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  height: 100%;
  transition: opacity 240ms var(--store-ease), transform 300ms var(--store-spring);
}

/* Only the active panel is visible, hit-testable and exposed to assistive tech. */
.store-shop-panel,
.inventory-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(12px, 0, 0);
  transition:
    opacity 260ms var(--store-ease),
    transform 320ms var(--store-spring),
    visibility 0s linear 260ms;
}

body[data-lobby-panel="store"] .play-right-stack,
body[data-lobby-panel="inventory"] .play-right-stack {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-8px, 0, 0);
  transition:
    opacity 240ms var(--store-ease),
    transform 300ms var(--store-spring),
    visibility 0s linear 240ms;
}

body[data-lobby-panel="store"] .store-shop-panel,
body[data-lobby-panel="inventory"] .inventory-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 260ms var(--store-ease),
    transform 320ms var(--store-spring),
    visibility 0s;
}

/* Inventory keeps Combat Record under the stage — packages are Store-only */
body[data-lobby-panel="inventory"] .coin-packages-shell {
  opacity: 0;
  pointer-events: none;
}

body[data-lobby-panel="inventory"] .below-stage-slot .combat-record-shell {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Shared panel shell for Shop + Inventory.
   position:relative anchors the purchase reveal to the panel, not the grid. */
.shop-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 11px 11px 10px;
  border: 1px solid var(--line, rgba(159, 181, 201, 0.14));
  clip-path: polygon(0 0, calc(100% - var(--store-cut)) 0, 100% var(--store-cut), 100% 100%, var(--store-cut) 100%, 0 calc(100% - var(--store-cut)));
  background:
    linear-gradient(150deg, rgba(var(--amber-rgb, 255, 157, 10), 0.07), transparent 30%),
    linear-gradient(180deg, #0d141b, #080b10);
  box-sizing: border-box;
}

/* Header IS the category tab strip (friends-squad DNA). No panel title: the top
   nav already names the destination, so a title here is duplicate wayfinding —
   and duplicate wayfinding is what makes a rail read as boxes-in-boxes. */
.shop-panel__header {
  position: relative;
  flex: 0 0 auto;
  margin-bottom: 10px;
  padding-bottom: 6px;
}

.shop-panel__header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(174, 191, 207, 0.18), rgba(174, 191, 207, 0.06) 62%, transparent);
}

.shop-tabs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
}

.shop-tab {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #78838e;
  cursor: pointer;
  font-family: Rajdhani, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 150ms ease;
}

.shop-tab::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 1px;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01) 62%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(188, 203, 216, 0.055),
    inset 0 -1px 0 rgba(188, 203, 216, 0.035);
  transition: background 150ms ease, box-shadow 150ms ease;
}

.shop-tab:hover { color: #dfe5e9; }
.shop-tab:hover::before { background: rgba(255, 255, 255, 0.05); }

.shop-tab[aria-selected="true"] { color: #fff; }

.shop-tab[aria-selected="true"]::before {
  background:
    linear-gradient(112deg, rgba(var(--amber-rgb), 0.085), transparent 34%),
    linear-gradient(180deg, rgba(var(--amber-rgb), 0.13), rgba(var(--amber-rgb), 0.025));
  box-shadow:
    inset 0 1px 0 rgba(255, 204, 112, 0.16),
    inset 0 -2px 0 var(--amber, #ff9d0a);
}

.shop-tab:focus-visible { outline: none; }

.shop-tab:focus-visible::before {
  box-shadow: inset 0 0 0 1px rgba(231, 238, 244, 0.42);
}

.shop-tab[aria-selected="true"]:focus-visible::before {
  box-shadow:
    inset 0 -2px 0 var(--amber, #ff9d0a),
    inset 0 0 0 1px rgba(231, 238, 244, 0.34);
}

.shop-tab__badge {
  display: inline-flex;
  min-width: 20px;
  height: 15px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(157, 176, 194, 0.085);
  color: #98a3ad;
  font-size: 8px;
  letter-spacing: 0.08em;
}

/* Pane = the scroll/flex column under the tabs. */
.shop-pane {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.shop-pane[hidden] { display: none; }

/* ── Featured hero ───────────────────────────────────────────────────────────
   AAA read: ONE surface. No box border, no framed art well, no rounded pill —
   the old version stacked three rectangles inside a panel that already has one.
   Hierarchy now comes from a rarity wash, a single leading accent, and scale.
   The only hard line is the bottom hairline, which doubles as the divider
   between the hero and the grid. */

.shop-hero {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: -2px -3px 9px;
  padding: 8px 3px 11px;
  --rar: 154, 163, 173;
  --rar-hot: #c3ccd6;
}

.shop-hero[data-rarity="rare"]      { --rar: 41, 182, 246;  --rar-hot: #7fd4ff; }
.shop-hero[data-rarity="epic"]      { --rar: 176, 101, 255; --rar-hot: #d3a6ff; }
.shop-hero[data-rarity="legendary"] { --rar: 255, 199, 60;  --rar-hot: #ffe08a; }

/* Wash + bottom hairline in one pseudo — zero extra nodes, zero borders. */
.shop-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 130% at 11% 46%, rgba(var(--rar), 0.16), transparent 70%),
    linear-gradient(100deg, rgba(var(--rar), 0.07), transparent 62%);
  box-shadow: inset 0 -1px 0 rgba(174, 191, 207, 0.12);
  pointer-events: none;
}

body[data-lobby-panel="store"] .shop-hero {
  animation: store-slide-in var(--store-dur) var(--store-spring) both;
  animation-delay: var(--store-base);
}

.shop-hero__pick {
  display: grid;
  min-width: 0;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.shop-hero__pick:focus-visible {
  outline: 2px solid var(--amber, #ff9d0a);
  outline-offset: 3px;
}

/* Art floats on the rarity bloom — same material language as .spin-card__art. */
.shop-hero__art {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  background: radial-gradient(circle at 50% 48%, rgba(var(--rar), 0.42), transparent 68%);
}

.shop-hero__img {
  display: block;
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
  transition: transform 200ms var(--store-spring);
}

.shop-hero__pick:hover .shop-hero__img { transform: scale(1.07) translateY(-1px); }

.shop-hero__copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.shop-hero__eyebrow {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  font-family: Rajdhani, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

/* Meta chrome stays steel — amber is reserved for spend CTAs so orange/gold
   spinner art never fights the "Featured" label for the same hue. */
.shop-hero__tag {
  position: relative;
  padding-left: 8px;
  color: #8b96a1;
}

/* The single leading accent — replaces the old rarity border-top on a boxed well. */
.shop-hero__tag::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 2px;
  background: var(--rar-hot);
}

.shop-hero__rarity {
  overflow: hidden;
  color: rgba(var(--rar), 0.95);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-hero__name {
  overflow: hidden;
  color: #f1f4f7;
  font-family: Rajdhani, sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Compact sibling of the panel-floor CTA: same amber slab language, smaller
   weight, so the two never read as competing primaries. */
.shop-hero__buy {
  display: flex;
  min-width: 74px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 13px;
  border: 0;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  background: linear-gradient(180deg, var(--amber-hot, #ffc252), var(--amber, #ff9d0a) 52%, var(--amber-deep, #d87800));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  color: #1c1305;
  cursor: pointer;
  font-family: Rajdhani, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: background 150ms ease, transform 170ms var(--store-ease);
}

.shop-hero__buy i { font-size: 11px; opacity: 0.72; }

.shop-hero__buy:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffdc86, var(--amber-hot, #ffc252) 52%, var(--amber, #ff9d0a));
  transform: translateY(-1px);
}

.shop-hero__buy:focus-visible {
  outline: 2px solid var(--amber-hot, #ffc252);
  outline-offset: 2px;
}

/* Owned / equipped: steel, so the amber slab always means "spend". */
.shop-hero__buy:disabled,
.shop-hero__buy.is-owned {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.18);
  color: #9aa4ae;
  cursor: default;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.shop-hero__buy.is-owned {
  color: var(--amber-hot, #ffc252);
  cursor: pointer;
}

.shop-hero__buy.is-owned:hover {
  background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.2), rgba(var(--amber-rgb), 0.06));
  box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.42);
  transform: translateY(-1px);
}

/* ── FEATURED dual buy ──────────────────────────────────────────────────────
   Two siblings inside the buy slot the hero already had. The hero does not get
   taller and never grows a second amber slab: Coins keeps the orange (that is
   the live "buy" identity), Tags is steel with the cyan tag glyph.

   Both CTAs drop their 74px floor and shrink to content so the featured NAME
   keeps its room. At the 280px density floor the pair costs ~120px, so
   `.shop-hero__name` still has ~90px before its existing ellipsis engages —
   and at the 340px design rail it has ~150px, more than it needs. */

.shop-hero__buy[hidden] { display: none; }

.shop-hero.is-dual {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

/* Beats `.shop-hero__buy:disabled`, which shrinks type for OWNED chrome — a
   locked or signed-out PRICE is still a price and must not restyle as a label. */
.shop-hero.is-dual .shop-hero__buy {
  min-width: 0;
  gap: 4px;
  padding: 0 9px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: none;
}

.shop-hero__buy--tags {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 0 0 1px rgba(159, 181, 201, 0.3);
  color: #d2dde6;
}

.shop-hero__buy--tags i { color: var(--cyan, #39aef2); opacity: 1; }

.shop-hero__buy--tags:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(var(--cyan-rgb, 57, 174, 242), 0.2), rgba(var(--cyan-rgb, 57, 174, 242), 0.06));
  box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb, 57, 174, 242), 0.5);
  color: #fff;
}

.shop-hero__buy--tags:focus-visible {
  outline: 2px solid var(--cyan, #39aef2);
  outline-offset: 2px;
}

.shop-hero__buy--tags:disabled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.14);
  color: #79838d;
  cursor: default;
}

.shop-hero__buy--tags:disabled i { color: #5f6b76; }

/* Grid — 3 hard columns inside the 340px rail (see also cc-live-baseline) */
.store-shop-panel .inventory-grid,
.inventory-panel .inventory-grid {
  contain: layout paint;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-right: 5px;
}

body[data-lobby-panel="store"] #shop-grid > .spin-card,
body[data-lobby-panel="inventory"] #inv-grid > .spin-card {
  animation: store-rise var(--store-dur) var(--store-spring) both;
  animation-delay: calc(var(--store-base) + var(--i, 0) * var(--store-step));
}

/* ── Spinner card ────────────────────────────────────────────────────────────
   AAA read: one surface, not nested boxes. Icon floats on a soft rarity bloom;
   name + CTA sit in a soft dock. No art-well rectangle, no inset selection frame.
   Perf: no filter:drop-shadow; contain:paint isolates hover paint. */

.spin-card {
  --rar: 154, 163, 173;
  --rar-hot: #c3ccd6;
  --rar-lift: 0;
  --rar-rim: 0.38;
  position: relative;
  isolation: isolate;
  display: block;
  contain: paint;
  padding: 1px;
  border: 0;
  clip-path: polygon(
    var(--card-cut, 7px) 0,
    100% 0,
    100% calc(100% - var(--card-cut, 7px)),
    calc(100% - var(--card-cut, 7px)) 100%,
    0 100%,
    0 var(--card-cut, 7px)
  );
  background: linear-gradient(
    155deg,
    rgba(var(--rar), var(--rar-rim)),
    rgba(var(--rar), 0.1) 50%,
    rgba(var(--rar), calc(var(--rar-rim) * 0.55))
  );
  color: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform 170ms var(--store-ease);
}

.spin-card[data-rarity="rare"]      { --rar: 41, 182, 246;  --rar-hot: #7fd4ff; --rar-rim: 0.48; }
.spin-card[data-rarity="epic"]      { --rar: 176, 101, 255; --rar-hot: #d3a6ff; --rar-rim: 0.62; }
.spin-card[data-rarity="legendary"] { --rar: 255, 199, 60;  --rar-hot: #ffe08a; --rar-rim: 0.78; }

.spin-card:hover { transform: translateY(-3px); }
.spin-card:active { transform: translateY(-1px); }

.spin-card:focus-visible {
  outline: 2px solid var(--amber, #ff9d0a);
  outline-offset: 3px;
}

.spin-card__face {
  position: relative;
  display: grid;
  grid-template-rows: 2px 1fr auto;
  gap: 0;
  height: 100%;
  padding: 0 0 7px;
  clip-path: inherit;
  background:
    radial-gradient(ellipse 90% 55% at 50% 28%, rgba(var(--rar), 0.14), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%),
    linear-gradient(180deg, #0e141b 0%, #0a0e13 62%, #070a0e 100%);
  box-sizing: border-box;
  overflow: hidden;
}

.spin-card[data-rarity="epic"] .spin-card__face {
  background:
    radial-gradient(ellipse 90% 55% at 50% 28%, rgba(var(--rar), 0.2), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%),
    linear-gradient(180deg, #10141e 0%, #0a0e14 62%, #070a0e 100%);
}

.spin-card[data-rarity="legendary"] .spin-card__face {
  background:
    radial-gradient(ellipse 90% 55% at 50% 26%, rgba(var(--rar), 0.24), transparent 72%),
    linear-gradient(180deg, rgba(255, 224, 160, 0.06), transparent 28%),
    linear-gradient(180deg, #14120e 0%, #0c0b09 62%, #080706 100%);
}

/* Tier ribbon — thin rarity signal, not a second frame. */
.spin-card__tier {
  display: block;
  background: linear-gradient(90deg, transparent, var(--rar-hot) 22%, rgba(var(--rar), 0.85) 78%, transparent);
}

/* Preview control: art + name. Sibling of the buy button so neither nests. */
.spin-card__pick {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.spin-card__pick:focus-visible {
  outline: 2px solid var(--amber, #ff9d0a);
  outline-offset: -2px;
}

/* Art floats — soft bloom only. No filled square well. */
.spin-card__art {
  position: relative;
  display: grid;
  place-items: center;
  margin: 4px 2px 0;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 46%, rgba(var(--rar), 0.32), transparent 68%);
}

.spin-card[data-rarity="epic"] .spin-card__art {
  background: radial-gradient(circle at 50% 46%, rgba(var(--rar), 0.4), transparent 70%);
}

.spin-card[data-rarity="legendary"] .spin-card__art {
  background: radial-gradient(circle at 50% 44%, rgba(var(--rar), 0.48), transparent 72%);
}

.spin-card__emoji {
  font-size: 30px;
  line-height: 1;
  transition: transform 200ms var(--store-spring);
}

.spin-card__img {
  display: block;
  width: 82%;
  height: 82%;
  object-fit: contain;
  pointer-events: none;
  transition: transform 200ms var(--store-spring);
}

.spin-card:hover .spin-card__emoji,
.spin-card:hover .spin-card__img {
  transform: scale(1.06) translateY(-1px);
}

.spin-card[data-rarity="legendary"] .spin-card__face::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -60%;
  width: 40%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 190, 0.16), transparent);
  transform: skewX(-18deg) translate3d(0, 0, 0);
  animation: spin-sheen 4.2s var(--store-ease) infinite;
  pointer-events: none;
}

@keyframes spin-sheen {
  0%, 62% { transform: skewX(-18deg) translate3d(0, 0, 0); }
  100% { transform: skewX(-18deg) translate3d(430%, 0, 0); }
}

/* Soft dock: hairline fade into name — not a boxed footer. */
.spin-card__name {
  position: relative;
  margin-top: 2px;
  padding: 8px 7px 3px;
  color: #dfe5ea;
  font-family: Rajdhani, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spin-card__name::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.spin-card[data-rarity="legendary"] .spin-card__name { color: var(--rar-hot); }

/* CTA reads as its own control, not fused to the tile body. */
.spin-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: calc(100% - 14px);
  min-height: 26px;
  margin: 5px 7px 0;
  border: 0;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  background: linear-gradient(180deg, #2a3542, #161d26);
  color: var(--amber-hot, #ffc252);
  cursor: pointer;
  font-family: Rajdhani, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: background 150ms ease, color 150ms ease;
}

.spin-card__btn i { font-size: 10px; }

/* Card hover lights the single CTA. Dual halves must not inherit this —
   otherwise hovering the art whites out both prices at once. */
.spin-card:hover .spin-card__btn:not(.spin-card__btn--half) {
  background: linear-gradient(180deg, #354352, #1c2530);
  color: #fff;
}

/* Solid, not a translucent wash — same reason as .shop-buy-btn.
   Equipped cards expose Unequip on this CTA, so keep the amber face but stay clickable. */
.spin-card__btn.is-equipped {
  background: linear-gradient(180deg, var(--amber-hot, #ffc252), var(--amber, #ff9d0a) 58%, var(--amber-deep, #d87800));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #1c1305;
  cursor: pointer;
}

.spin-card__btn.is-equipped:disabled {
  cursor: default;
}

.spin-card:hover .spin-card__btn.is-equipped:not(:disabled):not(.spin-card__btn--half) {
  background: linear-gradient(180deg, #ffdc86, var(--amber-hot, #ffc252) 52%, var(--amber, #ff9d0a));
  color: #1c1305;
}

.spin-card:hover .spin-card__btn.is-equipped:disabled:not(.spin-card__btn--half) {
  background: linear-gradient(180deg, var(--amber-hot, #ffc252), var(--amber, #ff9d0a) 58%, var(--amber-deep, #d87800));
  color: #1c1305;
}

.spin-card__btn.is-locked { color: #8b959f; }

/* ── Dual price: Tags + Coins on ONE row, in the single CTA's slot ───────────
   Only catalog rows that carry BOTH a tags_price and a coin_price paint this.
   The single `.spin-card__btn` keeps its node and steps out of the grid row, so
   a coins-only card's footer is byte-for-byte what it has always been.

   What this has to hold at every rail width the shell can bake (280–480px)
   and the snap-960 3-col rail: ONE row, never a wrap, never taller than the
   26px CTA slot, never wider than the card. Type is small on purpose so
   "1,600" / "1,200" stay fully visible in a ~34px half (280px rail, 3-col).
   Ellipsis on a price is a ship bug — do not bring it back. */

.spin-card__btn[hidden],
.spin-card__split[hidden] { display: none; }

.spin-card__split {
  display: flex;
  gap: 2px;
  /* Same 5px lift off the name as the single CTA. Side inset is tighter than
     the 7px single-CTA slot so a 280px 3-col half still fits "1,600". */
  width: calc(100% - 8px);
  margin: 5px 4px 0;
}

.spin-card__btn--half {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin: 0;
  gap: 2px;
  padding: 0 1px;
  font-size: 9px;
  letter-spacing: 0;
  overflow: hidden;
}

.spin-card__btn--half i {
  flex: 0 0 8px;
  width: 8px;
  font-size: 8px;
  text-align: center;
}

.spin-card__btn-price {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* Amber is Stick Coins everywhere, so the Coins half IS the shipped card CTA —
   no new colour. Tags takes the same steel slab with the cyan tag glyph the
   topbar wallet already wears; a second amber slab would read as two primaries. */
.spin-card__btn--tags { color: #c5d2dd; }
.spin-card__btn--tags i { color: var(--cyan, #39aef2); }

/* Each half lights itself. Card :hover must not reach in. */
.spin-card__btn--half:hover:not(:disabled):not(.is-locked),
.spin-card__btn--half:focus-visible:not(:disabled) {
  background: linear-gradient(180deg, #354352, #1c2530);
  color: #fff;
}

.spin-card__btn--tags:hover:not(:disabled):not(.is-locked),
.spin-card__btn--tags:focus-visible:not(:disabled) {
  color: #fff;
}

.spin-card__btn--tags:hover:not(:disabled):not(.is-locked) i,
.spin-card__btn--tags:focus-visible:not(:disabled) i {
  color: var(--cyan, #39aef2);
}

/* Cannot afford: quiet, but the price is still legible — it is the reason. */
.spin-card__btn--half.is-locked i { color: #6b757f; }
.spin-card__btn--half:disabled { cursor: default; }

/* Selected: lift + rarity rim/ribbon — never amber (conflicts with price CTA). */
.spin-card.is-selected {
  --rar-lift: 1;
  --rar-rim: 0.95;
  transform: translateY(-2px);
}

.spin-card.is-selected .spin-card__tier {
  background: linear-gradient(90deg, transparent, var(--rar-hot) 20%, rgba(var(--rar), 0.95) 80%, transparent);
}

.spin-card.is-selected .spin-card__face {
  box-shadow: inset 0 0 0 1px rgba(var(--rar), 0.85);
  background:
    radial-gradient(ellipse 90% 55% at 50% 28%, rgba(var(--rar), 0.22), transparent 70%),
    linear-gradient(180deg, rgba(var(--rar), 0.12), transparent 36%),
    linear-gradient(180deg, #121820 0%, #0a0e13 62%, #070a0e 100%);
}

.spin-card.is-owned .spin-card__img,
.spin-card.is-owned .spin-card__emoji { opacity: 0.78; }

/* Just-purchased card pops once as the item flies to Inventory */
.spin-card.is-acquired { animation: spin-acquire 620ms var(--store-spring); }

@keyframes spin-acquire {
  0% { transform: none; }
  28% { transform: translateY(-8px) scale(1.07); }
  100% { transform: none; }
}

/* ── Item ghost flying into the Inventory nav ─────────────────────────────── */

.cc-fly-item {
  position: fixed;
  z-index: 15000;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--fly-color, #ffd700) 35%, transparent), transparent 68%),
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.22), transparent 62%),
    linear-gradient(180deg, #1b232d, #0c1219);
  /* 0-blur ring only — soft bloom via radial, not box-shadow blur. */
  box-shadow: 0 0 0 1px var(--fly-color, #ffd700);
  font-size: 24px;
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
}

.cc-fly-item img {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
}

/* Landing beat. The POC drew this on the top-up particle canvas; over the live
   WebGL stage a second rAF canvas is the expensive path, so the ring and its
   sparks are compositor-only nodes that delete themselves on animationend. */

.cc-fly-ring,
.cc-fly-spark {
  position: fixed;
  z-index: 15000;
  pointer-events: none;
  will-change: transform, opacity;
}

.cc-fly-ring {
  width: 12px;
  height: 12px;
  border: 2px solid var(--fly-color, #ffd700);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: fly-ring 420ms var(--store-ease) forwards;
}

@keyframes fly-ring {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.35); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
}

.cc-fly-spark {
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--fly-color, #ffd700) 55%, transparent 72%);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: fly-spark 520ms var(--store-ease) forwards;
}

@keyframes fly-spark {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.2);
  }
}

/* Inventory nav button flashes when the item lands */
.slant-nav__item.is-restock .slant-nav__label {
  animation: nav-restock 620ms var(--store-ease);
}

@keyframes nav-restock {
  0%, 100% { transform: translateY(1px) scale(1); color: inherit; }
  35% { transform: translateY(1px) scale(1.16); color: var(--amber-hot, #ffc252); }
}

/* Action bar pinned to the panel floor: select → preview → buy/equip */
.shop-actions-bar {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line, rgba(159, 181, 201, 0.14));
}

/* Primary CTA: a SOLID amber slab with real top light and dark ink — the old
   translucent amber-over-steel fill is what read as burnt orange (a 30% amber
   wash over #0a0e13 lands around #4a3210). Same gradient the v2 loadout and the
   Best Value pack already use, so "spend" looks identical everywhere. */
.shop-buy-btn {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  clip-path: polygon(var(--store-cut) 0, 100% 0, calc(100% - var(--store-cut)) 100%, 0 100%);
  background: linear-gradient(180deg, var(--amber-hot, #ffc252), var(--amber, #ff9d0a) 52%, var(--amber-deep, #d87800));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  color: #1c1305;
  cursor: pointer;
  font-family: Rajdhani, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 150ms ease, transform 170ms var(--store-ease);
}

/* Ink coin glyph — matches .shop-hero__buy (inherits #1c1305, not amber). */
.shop-buy-btn > .fa-coins {
  font-size: 12px;
  opacity: 0.78;
  vertical-align: -0.05em;
}

.shop-buy-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffdc86, var(--amber-hot, #ffc252) 52%, var(--amber, #ff9d0a));
  transform: translateY(-1px);
}

.shop-buy-btn:active:not(:disabled) { transform: none; }

.shop-buy-btn:focus-visible {
  outline: 2px solid var(--amber-hot, #ffc252);
  outline-offset: 2px;
}

/* Equipped / inert: steel. Amber is reserved for "there is something to spend". */
.shop-buy-btn:disabled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.16);
  color: #8d959d;
  cursor: default;
}

/* Short-of-coins routes to the packages strip — steel face, amber text. */
.shop-buy-btn.is-short {
  background: linear-gradient(180deg, rgba(var(--amber-rgb, 255, 157, 10), 0.11), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb, 255, 157, 10), 0.34);
  color: var(--amber-hot, #ffc252);
}

.shop-buy-btn.is-short:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(var(--amber-rgb, 255, 157, 10), 0.2), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb, 255, 157, 10), 0.62);
}

.shop-buy-btn__sub {
  display: block;
  margin-top: 1px;
  color: rgba(28, 19, 5, 0.62);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.shop-buy-btn.is-short .shop-buy-btn__sub,
.shop-buy-btn:disabled .shop-buy-btn__sub {
  color: var(--muted, #858e99);
  font-weight: 600;
}

/* ── Panel-floor dual buy ───────────────────────────────────────────────────
   The bar is already `display: flex; gap: 8px`, so dual is two `flex: 1`
   children (`.shop-buy-btn` already carries `flex: 1; min-width: 0`). Coins
   keeps the amber slab; Tags is the same 44px chamfered slab in steel with the
   cyan tag glyph. Equip / Unequip / Claim / Drop stay ONE full-width control. */

.shop-buy-btn--tags {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 0 0 1px rgba(159, 181, 201, 0.3);
  color: #d7e2ea;
}

.shop-buy-btn--tags > .fa-tag {
  color: var(--cyan, #39aef2);
  font-size: 12px;
  vertical-align: -0.05em;
}

.shop-buy-btn--tags .shop-buy-btn__sub {
  color: var(--muted, #858e99);
  font-weight: 600;
}

.shop-buy-btn--tags:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(var(--cyan-rgb, 57, 174, 242), 0.2), rgba(var(--cyan-rgb, 57, 174, 242), 0.06));
  box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb, 57, 174, 242), 0.55);
  color: #fff;
  transform: translateY(-1px);
}

.shop-buy-btn--tags:focus-visible {
  outline: 2px solid var(--cyan, #39aef2);
  outline-offset: 2px;
}

/* Short of Tags: quiet and inert. It never routes anywhere — there is no Tags
   shop, and a Tags shortfall must never open Stripe or the coin packages. */
.shop-buy-btn--tags.is-locked,
.shop-buy-btn--tags:disabled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.14);
  color: #79838d;
  cursor: default;
}

.shop-buy-btn--tags.is-locked > .fa-tag,
.shop-buy-btn--tags:disabled > .fa-tag { color: #5f6b76; }

/* Secondary / dismiss — same chamfer DNA as shop-buy-btn, quieter fill */
.shop-buy-btn--ghost {
  flex: 0 1 auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(159, 181, 201, 0.28);
  color: #c8d0d8;
}

.shop-buy-btn--ghost:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.035));
  box-shadow: inset 0 0 0 1px rgba(159, 181, 201, 0.55);
  color: #fff;
}

/* ── Purchase reveal chrome: reuse spin-card + shop-buy-btn (not live rounded UI) ── */

.spin-card--hero {
  z-index: 1;
  width: 138px;
  cursor: default;
  pointer-events: none;
}

.spin-card--hero:hover,
.spin-card--hero:active {
  transform: none;
}

.spin-card--hero .spin-card__face {
  grid-template-rows: 3px 1fr;
  padding: 0 0 12px;
}

.spin-card--hero .spin-card__art {
  margin: 8px 6px 0;
  min-height: 112px;
}

.spin-card--hero .spin-card__img {
  width: 86%;
  height: 86%;
}

.store-shop-panel .reveal-actions,
.inventory-panel .reveal-actions {
  display: flex;
  gap: 8px;
  width: min(100%, 280px);
  margin-top: 18px;
}

.store-shop-panel .reveal-actions .shop-buy-btn,
.inventory-panel .reveal-actions .shop-buy-btn {
  flex: 1 1 0;
  min-height: 40px;
}

.store-shop-panel .reveal-info,
.inventory-panel .reveal-info {
  margin-top: 14px;
}

.store-shop-panel .reveal-rarity,
.inventory-panel .reveal-rarity {
  font-size: 12px;
  letter-spacing: 0.14em;
}

.store-shop-panel .reveal-name,
.inventory-panel .reveal-name {
  font-size: 22px;
  letter-spacing: 0.04em;
  text-shadow: none;
}

/* ── Boosts (Store pane + Inventory pane) ────────────────────────────────────
   Deliberately NOT the spinner tile. Spinners are art, so they get a 3-up grid
   of square-art tiles; boosts are stat modifiers, so they get full-width rows —
   name and effect read left-to-right, and the state chip has room to be honest.
   Cheap by construction: one rim/face pair, no art, no ambient motion. */

.boost-note {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 9px 11px;
  clip-path: polygon(var(--store-cut) 0, 100% 0, calc(100% - var(--store-cut)) 100%, 0 100%);
  background:
    linear-gradient(104deg, rgba(var(--amber-rgb), 0.1), transparent 58%),
    rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.1);
}

.boost-note > i {
  color: var(--amber, #ff9d0a);
  font-size: 15px;
  text-align: center;
}

.boost-note__copy { display: grid; min-width: 0; gap: 2px; }

.boost-note__copy strong {
  color: #eaeef2;
  font-family: Rajdhani, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.boost-note__copy span {
  color: var(--muted, #858e99);
  font-size: 10px;
  line-height: 1.3;
}

/* Four roadmap rows always fit the rail. overflow-y:auto flashed a scrollbar
   on tab switch because store-rise's translateY briefly expands scroll overflow
   even though the settled layout never needs to scroll. */
.boost-list {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  gap: 7px;
  overflow: hidden;
}

.boost-card {
  --boost: 159, 181, 201;
  position: relative;
  isolation: isolate;
  display: block;
  padding: 1px;
  clip-path: polygon(
    var(--store-cut) 0,
    100% 0,
    100% calc(100% - var(--store-cut)),
    calc(100% - var(--store-cut)) 100%,
    0 100%,
    0 var(--store-cut)
  );
  background: linear-gradient(
    150deg,
    rgba(var(--boost), 0.34),
    rgba(var(--boost), 0.09) 52%,
    rgba(var(--boost), 0.2)
  );
}

.boost-card__face {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 7px 10px 7px 8px;
  clip-path: inherit;
  background:
    linear-gradient(104deg, rgba(var(--boost), 0.1), transparent 46%),
    linear-gradient(180deg, #0e141b, #080b10);
}

/* Icon socket carries the boost's own colour — the card's only saturated area. */
.boost-card__glyph {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background:
    radial-gradient(circle at 50% 34%, rgba(var(--boost), 0.28), transparent 70%),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(var(--boost), 0.24);
  color: rgb(var(--boost));
  font-size: 15px;
}

.boost-card__copy { display: grid; min-width: 0; gap: 3px; }

.boost-card__copy strong {
  overflow: hidden;
  color: #e6ebef;
  font-family: Rajdhani, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.boost-card__copy span {
  overflow: hidden;
  color: var(--muted, #858e99);
  font-size: 10px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boost-card__state {
  display: inline-flex;
  height: 20px;
  align-items: center;
  padding: 0 8px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  background: rgba(255, 255, 255, 0.05);
  color: #8b959f;
  font-family: Rajdhani, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.boost-card.is-locked .boost-card__glyph { opacity: 0.62; }
.boost-card.is-locked .boost-card__copy strong { color: #b9c2ca; }

body[data-lobby-panel="store"] .boost-list > .boost-card,
body[data-lobby-panel="inventory"] .boost-list > .boost-card {
  animation: store-rise var(--store-dur) var(--store-spring) both;
  animation-delay: calc(var(--store-base) + var(--i, 0) * var(--store-step));
}

/* Inventory > Boosts: an honest empty state, not a second copy of the Store. */
.boost-empty {
  display: grid;
  flex: 1;
  align-content: center;
  justify-items: center;
  gap: 9px;
  padding: 18px 14px;
  text-align: center;
}

.boost-empty__mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  background:
    radial-gradient(circle at 50% 34%, rgba(var(--amber-rgb), 0.2), transparent 70%),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.26);
  color: var(--amber, #ff9d0a);
  font-size: 18px;
}

.boost-empty strong {
  color: #e9edf1;
  font-family: Rajdhani, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.boost-empty p {
  max-width: 30ch;
  margin: 0;
  color: var(--muted, #858e99);
  font-size: 11px;
  line-height: 1.45;
}

.boost-empty__types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 2px;
}

.boost-type-chip {
  --boost: 159, 181, 201;
  display: inline-flex;
  height: 22px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  background: rgba(var(--boost), 0.09);
  box-shadow: inset 0 0 0 1px rgba(var(--boost), 0.24);
  color: rgb(var(--boost));
  font-family: Rajdhani, sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.boost-type-chip i { font-size: 9px; }

.boost-empty .shop-buy-btn--ghost {
  min-height: 38px;
  margin-top: 4px;
  padding-inline: 20px;
  flex: 0 0 auto;
  font-size: 12px;
}

/* ── Inventory extras ── */

.inventory-panel__inner { height: 100%; }

/* ── Sealed crates ───────────────────────────────────────────────────────────
   Same angled parallelogram DNA as .boost-note (not the old cut-corner plate).
   Count lives on the ×N chip; no stack-plate decoration behind the SVG. */

.crate-entry {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 0;
  clip-path: polygon(var(--store-cut) 0, 100% 0, calc(100% - var(--store-cut)) 100%, 0 100%);
  background:
    linear-gradient(104deg, rgba(var(--amber-rgb, 255, 157, 10), 0.12), transparent 58%),
    rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.12);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: box-shadow 160ms ease, background 160ms ease;
}

.crate-entry:hover {
  background:
    linear-gradient(104deg, rgba(var(--amber-rgb, 255, 157, 10), 0.18), transparent 58%),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb, 255, 157, 10), 0.34);
}

.crate-entry:focus-visible {
  outline: 2px solid var(--amber, #ff9d0a);
  outline-offset: 2px;
}

/* Slow warm breath so waiting loot reads as live. Opacity only, and it only
   ticks while Inventory is the active mode (see the ambient-pause block). */
.crate-entry__wash {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 42% 130% at 13% 50%, rgba(var(--amber-rgb), 0.2), transparent 72%);
  opacity: 0.55;
  pointer-events: none;
  animation: crate-breathe 3.6s var(--store-ease) infinite alternate;
}

@keyframes crate-breathe {
  from { opacity: 0.35; }
  to { opacity: 0.9; }
}

.crate-entry__art {
  position: relative;
  display: grid;
  width: 52px;
  height: 48px;
  place-items: center;
}

.crate-entry__img {
  display: block;
  width: 42px;
  height: auto;
  transform-origin: 50% 70%;
  pointer-events: none;
}

/* Mild live crate shake (match-summary mild / shake-mild DNA) — three short
   knocks that loop while hovered. Not the escalating open thump. */
@keyframes crate-hover-shake {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(-3.5deg); }
  36% { transform: rotate(3.5deg); }
  54% { transform: rotate(-2.5deg); }
  72% { transform: rotate(2deg); }
  88% { transform: rotate(-1deg); }
}

.crate-entry:hover .crate-entry__img {
  animation: crate-hover-shake 520ms ease-in-out infinite;
}

.crate-entry__count {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 24px;
  height: 18px;
  padding: 0 5px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  background: linear-gradient(180deg, var(--amber-hot, #ffc252), var(--amber-deep, #d87800));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  color: #1c1305;
  font-family: Rajdhani, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 18px;
  text-align: center;
}

.crate-entry__copy { display: grid; min-width: 0; gap: 3px; }

.crate-entry__eyebrow {
  color: var(--amber, #ff9d0a);
  font-family: Rajdhani, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.crate-entry__name {
  overflow: hidden;
  color: #f1f4f7;
  font-family: Rajdhani, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.crate-entry__meta {
  overflow: hidden;
  color: var(--muted, #858e99);
  font-size: 10px;
  letter-spacing: 0.03em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crate-entry__cta {
  display: grid;
  min-width: 62px;
  min-height: 34px;
  place-items: center;
  padding: 0 12px;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: linear-gradient(180deg, var(--amber-hot, #ffc252), var(--amber, #ff9d0a) 52%, var(--amber-deep, #d87800));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44);
  color: #1c1305;
  font-family: Rajdhani, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 150ms ease;
}

.crate-entry:hover .crate-entry__cta {
  background: linear-gradient(180deg, #ffdc86, var(--amber-hot, #ffc252) 52%, var(--amber, #ff9d0a));
}

body[data-lobby-panel="inventory"] .crate-entry {
  animation: store-slide-in var(--store-dur) var(--store-spring) both;
  animation-delay: var(--store-base);
}

.inv-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 26px 16px;
  color: var(--muted, #858e99);
  text-align: center;
}

.inv-empty i {
  font-size: 21px;
  color: var(--amber, #ff9d0a);
  opacity: 0.7;
}

.inv-empty p {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Stage + wallet cues ──
   Deliberately NOT a filter on #lobby-character-stage: that would rasterise the
   arena canvas every frame. Purchase feedback lives on the rail edge + wallet. */

.store-shop-panel::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  border: 1px solid var(--reward-color, var(--amber, #ff9d0a));
  opacity: 0;
  pointer-events: none;
}

.store-shop-panel.is-purchase-flash::after {
  animation: store-ring-flash 620ms var(--store-ease);
}

/* Squad panel steps back so the stage reads as "preview", not "party" */
body[data-lobby-panel="store"] .panel--squad,
body[data-lobby-panel="inventory"] .panel--squad {
  opacity: 0.3;
  transition: opacity 280ms var(--store-ease);
}

/* Purchase reveal keeps live juice (blur glow / rays / flash) — short-lived overlay.
   Idle ambient loops stay paused until .active so the rail costs nothing at rest. */
.store-shop-panel .purchase-overlay:not(.active) .reveal-glow,
.inventory-panel .purchase-overlay:not(.active) .reveal-glow,
.store-shop-panel .purchase-overlay:not(.active) .legendary-rays,
.inventory-panel .purchase-overlay:not(.active) .legendary-rays {
  animation: none;
}

/* ── Ambient loops only tick while their panel IS the active mode ─────────────
   visibility:hidden stops paint, but it does NOT stop an infinite animation:
   the legendary sheen and the crate breath keep advancing (and keep their
   compositor layers alive) the whole time you are on Play. Both panels are
   built at init, so without this the Play screen carries their cost forever. */
body:not([data-lobby-panel="store"]) .store-shop-panel .spin-card[data-rarity="legendary"] .spin-card__face::after,
body:not([data-lobby-panel="inventory"]) .inventory-panel .spin-card[data-rarity="legendary"] .spin-card__face::after,
body:not([data-lobby-panel="inventory"]) .inventory-panel .crate-entry__wash {
  animation: none;
}

/* ── Guest overlay (short-lived; never embedded in the strip) ── */

.guest-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 7, 10, 0.74);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--store-ease);
}

.guest-lock-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.guest-lock-overlay[hidden] {
  display: none;
}

.guest-lock-overlay {
  /* Solid scrim only — never blur the GL stage behind. */
  backdrop-filter: none;
}

.guest-lock-sheet {
  width: min(420px, 100%);
  padding: 18px 18px 14px;
  border: 1px solid rgba(var(--amber-rgb, 255, 157, 10), 0.3);
  border-radius: 6px;
  background: linear-gradient(180deg, #121820, #0a0e13);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  animation: sheet-in 260ms var(--store-spring);
}

@keyframes sheet-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.guest-lock-sheet h3 {
  margin: 0;
  font-family: Rajdhani, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guest-lock-sheet p {
  margin: 0 0 14px;
  color: var(--muted, #858e99);
  font-size: 13px;
  line-height: 1.45;
}

.guest-lock-sheet {
  display: grid;
  gap: 8px;
  text-align: center;
}

/* ── Reduced motion: keep the remap, drop the travel ── */

@media (prefers-reduced-motion: reduce) {
  .below-stage-slot,
  .coin-packages-shell,
  .play-right-stack,
  .store-shop-panel,
  .inventory-panel,
  .below-stage-slot .combat-record-shell {
    transition-duration: 1ms;
  }

  body[data-lobby-panel="store"] .pack,
  body[data-lobby-panel="store"] #shop-grid > .spin-card,
  body[data-lobby-panel="inventory"] #inv-grid > .spin-card,
  body[data-lobby-panel="store"] .shop-hero,
  body[data-lobby-panel="store"] .boost-list > .boost-card,
  body[data-lobby-panel="inventory"] .boost-list > .boost-card,
  body[data-lobby-panel="inventory"] .crate-entry,
  .guest-lock-sheet {
    animation: none;
  }

  /* Ambient loops are the first thing to go */
  .crate-entry__wash,
  .crate-entry:hover .crate-entry__img,
  .spin-card[data-rarity="legendary"] .spin-card__face::after,
  .spin-card.is-acquired,
  .pack.is-pulse,
  .cc-fly-ring,
  .cc-fly-spark,
  .slant-nav__item.is-restock .slant-nav__label,
  .store-shop-panel.is-purchase-flash::after,
  body.is-emphasize-packages .coin-packages::after,
  .store-shop-panel .purchase-overlay.tier-common.active .purchase-reveal-box,
  .store-shop-panel .purchase-overlay.tier-rare.active .purchase-reveal-box,
  .store-shop-panel .purchase-overlay.tier-epic.active .purchase-reveal-box,
  .store-shop-panel .purchase-overlay.tier-legendary.active .purchase-reveal-box,
  .store-shop-panel .purchase-overlay.active .reveal-rarity,
  .store-shop-panel .purchase-overlay.active .reveal-name,
  .store-shop-panel .purchase-overlay.active .reveal-actions,
  .store-shop-panel .purchase-overlay.active .confetti,
  .store-shop-panel .purchase-overlay.tier-epic.active .flash-overlay,
  .store-shop-panel .purchase-overlay.tier-legendary.active .flash-overlay,
  .store-shop-panel .reveal-glow,
  .store-shop-panel .legendary-rays {
    animation: none;
  }

  .store-shop-panel .purchase-overlay.active .reveal-rarity,
  .store-shop-panel .purchase-overlay.active .reveal-name,
  .store-shop-panel .purchase-overlay.active .reveal-actions,
  .store-shop-panel .purchase-overlay.active .purchase-reveal-box {
    opacity: 1;
    transform: none;
  }
}

/* ── Narrow desktop: rail stacks under the stage (v2 breakpoint) ── */

@media (max-width: 1280px) {
  .store-shop-panel,
  .inventory-panel {
    position: relative;
    inset: auto;
    min-height: 520px;
  }

  body[data-lobby-panel="store"] .play-right-stack,
  body[data-lobby-panel="inventory"] .play-right-stack {
    display: none;
  }

  body[data-lobby-panel="play"] .store-shop-panel,
  body[data-lobby-panel="play"] .inventory-panel,
  body[data-lobby-panel="inventory"] .store-shop-panel,
  body[data-lobby-panel="store"] .inventory-panel {
    display: none;
  }

  .store-shop-panel .inventory-grid,
  .inventory-panel .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }

  /* Stacked rail is full-width: boost rows would stretch to ~1100px with a
     36px glyph adrift on the left. Wrap them instead of letting them run. */
  .boost-list {
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  }
}

@media (max-width: 1100px) {
  /* Stay 4-up and keep the 138px Combat Record footprint — never grow the slot. */
  .coin-packages .cc-coin-packages {
    grid-template-columns: 1fr 1fr 1.16fr 1fr;
    gap: 12px;
    padding-inline: 0;
  }

  .coin-packages .cc-topup-subtitle {
    display: none;
  }

  .pack__total { font-size: 17px; }
  .pack.is-featured .pack__total { font-size: 18px; }
  .pack__buy { font-size: 12px; }
}