/* ============================================================
   Poncash packs. Owns the pk- prefix and nothing else.

   Every surface on this page is translucent on purpose. The
   wireframe ground the shell mounts sits behind the whole app and
   must stay readable straight through the hero, the tiles and the
   rails, so nothing here paints an opaque full width band. Depth
   comes from blur, the inset highlight and the shadow.

   glass-refract is spent on exactly two surfaces per page: the
   hero and the grails rail on the home page, and the product
   header on a pack page. Grid tiles stay on the cheap .glass.
   ============================================================ */

.pk-page {
  position: relative;
  z-index: 1;
  padding-bottom: 40px;
}

.pk-section { margin-top: clamp(38px, 5vw, 64px); }

.pk-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--muted-fg);
}
.pk-link:hover { color: var(--fg); }
.pk-link-ico { display: inline-flex; }

.pk-live-dot {
  width: 7px; height: 7px; border-radius: 999px; flex: none;
  background: var(--lime);
  box-shadow: 0 0 0 3px var(--lime-glow);
  animation: pk-pulse 2.4s ease-in-out infinite;
}
@keyframes pk-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px var(--lime-glow); }
  50% { opacity: .5; box-shadow: 0 0 0 6px transparent; }
}

/* ============================================================
   1. live pull ticker
   ============================================================ */
.pk-ticker {
  display: flex; align-items: center; gap: 12px;
  width: min(100% - 32px, var(--shell-w));
  margin: 14px auto 0;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  overflow: hidden;
}

.pk-ticker-tag {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted-fg);
}

.pk-ticker-vp {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}

/* Two identical tracks, translated by exactly half the rail. Nothing here
   touches scrollLeft, so the loop stays on the compositor. */
.pk-tick-rail {
  display: flex; width: max-content;
  animation: pk-marquee var(--pk-tick-dur, 44s) linear infinite;
  will-change: transform;
}
@keyframes pk-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.pk-ticker:hover .pk-tick-rail,
.pk-ticker:focus-within .pk-tick-rail { animation-play-state: paused; }

.pk-tick-track { display: flex; align-items: center; }

.pk-tick {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 16px 4px 10px;
  border-right: 1px solid var(--glass-border);
  white-space: nowrap; font-size: 12.5px;
  margin-right: 6px;
}
.pk-tick:hover .pk-tick-name { color: var(--primary-soft); }
.pk-tick-art { display: block; line-height: 0; flex: none; }
.pk-tick-art svg { width: 26px; height: auto; border-radius: 3px; }
.pk-tick-who { font-weight: 700; }
.pk-tick.is-mine .pk-tick-who { color: var(--lime); }
.pk-tick-sep { color: var(--muted-fg); font-size: 11.5px; }
.pk-tick-name { font-weight: 600; transition: color .15s ease; }

/* ============================================================
   2. hero
   ============================================================ */
/* The hero must NOT clip: the pack selector menu is an absolutely positioned
   descendant and `overflow:hidden` here cut it off mid-list, leaving four of the
   six packs unreachable. Nothing else needs the clip, because .pk-hero-fx does
   its own `overflow:hidden` and .glass-sheen::before is inset:0 with an
   inherited radius, so both stay inside the box on their own. */
.pk-hero {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-top: 22px;
  padding: clamp(30px, 5vw, 66px) clamp(18px, 4vw, 56px) clamp(28px, 4vw, 50px);
  text-align: center;
}

/* The neon stage paints an opaque ground of its own, so it is held down to a
   partial opacity and masked away at the edges. That is what keeps the
   wireframe lattice readable straight through the biggest panel on the site. */
.pk-hero-fx {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  opacity: .34;
  -webkit-mask-image: radial-gradient(125% 105% at 50% 42%, #000 0%, #000 34%, transparent 78%);
  mask-image: radial-gradient(125% 105% at 50% 42%, #000 0%, #000 34%, transparent 78%);
}
:root.dark .pk-hero-fx { opacity: .56; }

.pk-hero-in { position: relative; z-index: 1; }

.pk-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px 5px 11px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.pk-hero-title { margin: 18px 0 0; }

.pk-hero-sub {
  margin: 16px auto 0;
  max-width: 46ch;
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--muted-fg);
  line-height: 1.6;
}

.pk-hero-stats {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(20px, 4vw, 46px);
  margin-top: clamp(24px, 3vw, 36px);
  flex-wrap: wrap;
}
.pk-hstat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pk-hstat-v { font-size: clamp(24px, 3vw, 34px); line-height: 1; }
.pk-hstat-l {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-fg);
}

/* ---------- pack selector ---------- */
.pk-sel {
  display: flex; align-items: stretch; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  max-width: 700px;
  margin: clamp(22px, 3vw, 32px) auto 0;
}
.pk-sel-shell { position: relative; flex: 1 1 330px; min-width: 0; }

.pk-sel-btn {
  display: flex; align-items: center; gap: 13px;
  width: 100%; padding: 11px 14px;
  cursor: pointer; text-align: left;
  transition: border-color .16s ease, transform .12s ease;
}
.pk-sel-btn:hover { border-color: var(--glass-hi); }
.pk-sel-btn:active { transform: translateY(1px); }
.pk-sel-art { display: block; line-height: 0; flex: none; }
.pk-sel-art svg { width: 46px; height: auto; }
.pk-sel-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pk-sel-name {
  font-size: 15px; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-sel-meta { font-size: 11px; color: var(--muted-fg); }
.pk-sel-price { font-size: 24px; line-height: 1; flex: none; }
.pk-sel-caret {
  display: inline-flex; flex: none; color: var(--muted-fg);
  transition: transform .2s ease;
}
.pk-sel-btn.is-open .pk-sel-caret { transform: rotate(180deg); }

/* .pk-hero isolates, so the menu's z-index only ranks it inside the hero. While
   the menu is open the hero itself has to outrank the sections below it or the
   grid paints over the overflowing part of the list. */
.pk-hero:has(.pk-sel-btn.is-open) { z-index: 5; }

.pk-sel-menu {
  position: absolute; z-index: 40;
  top: calc(100% + 8px); left: 0; right: 0;
  padding: 7px;
  display: flex; flex-direction: column; gap: 3px;
  max-height: min(58vh, 440px); overflow-y: auto;
  /* A popover sits on top of the hero's own headline and stat figures, and at
     --glass-bg-strong (white / .1) those read straight through the rows. This
     is also the one place a second backdrop-filter would nest inside the hero's,
     which is the fill-rate cliff. Give the menu an elevated ground of its own
     and drop the nested blur: the lattice still shows through everywhere else. */
  background: color-mix(in oklab, var(--elev) 97%, transparent);
  -webkit-backdrop-filter: saturate(var(--glass-sat));
  backdrop-filter: saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-2);
}

.pk-sel-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 8px 10px;
  border: 1px solid transparent; border-radius: calc(var(--radius) - 2px);
  background: transparent; cursor: pointer; text-align: left;
  transition: background .14s ease, border-color .14s ease;
}
.pk-sel-row:hover { background: var(--glass-bg); }
.pk-sel-row.is-active { background: var(--glass-bg-strong); border-color: var(--glass-border); }
.pk-sel-row.is-out { opacity: .5; }
.pk-sel-row .pk-thumb { line-height: 0; flex: none; }
.pk-sel-row .pk-thumb svg { width: 38px; height: auto; }
.pk-sel-row-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pk-sel-row-name {
  font-size: 13.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-sel-row-meta { font-size: 10.5px; color: var(--muted-fg); }
.pk-sel-row-odds { flex: none; }
.pk-sel-row-price { flex: none; font-size: 16px; min-width: 58px; text-align: right; }

.pk-sel-rip { flex: 0 0 auto; }

/* ============================================================
   3. pack grid
   ============================================================ */
.pk-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
}

.pk-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), border-color .18s ease;
}
.pk-card:hover { transform: translateY(-3px); border-color: var(--glass-hi); }
.pk-card.is-out:hover { transform: none; }

.pk-card-art {
  position: relative; display: block;
  padding: 22px 22px 8px;
}
/* .pk-card clips, and this link sits flush inside it, so the default 2px
   outline offset lands outside the clip and the ring vanishes. Draw it inside
   the link instead. Same reason on .pk-tick inside the ticker window. */
.pk-card-art:focus-visible { outline-offset: -3px; border-radius: var(--radius-lg); }
.pk-tick:focus-visible { outline-offset: -2px; }
.pk-card-art .pk-thumb { display: block; margin-inline: auto; max-width: 190px; }
.pk-card-art .pk-thumb svg {
  width: 100%; height: auto;
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.pk-card:not(.is-out):hover .pk-card-art .pk-thumb svg { transform: translateY(-4px) rotate(-1.4deg); }
.pk-card.is-out .pk-card-art .pk-thumb { filter: grayscale(.75); opacity: .55; }

.pk-out-flag, .pk-tier-flag {
  position: absolute; top: 14px; left: 14px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.pk-out-flag {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--fg);
}
.pk-tier-flag {
  left: auto; right: 14px;
  background: var(--grad-legendary);
  color: #17120e;
}

.pk-card-body {
  display: flex; flex-direction: column; gap: 9px;
  padding: 4px 18px 18px;
  margin-top: auto;
}
.pk-card-top { display: flex; align-items: baseline; gap: 10px; }
.pk-card-name { font-size: 15px; font-weight: 700; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.pk-card-name:hover { color: var(--primary-soft); }
.pk-card-price { font-size: 21px; line-height: 1; flex: none; }
.pk-card-set { font-size: 10px; }

.pk-chase { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.pk-chase-txt { color: var(--muted-fg); }
.pk-chase-txt strong { font-weight: 700; }

/* ---------- supply bar ---------- */
.pk-supply { display: flex; flex-direction: column; gap: 5px; }
.pk-bar {
  position: relative; height: 5px; border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.pk-bar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--primary-grad);
}
.pk-card.is-out .pk-bar-fill { background: var(--grad-silver); }
.pk-bar-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 10.5px; color: var(--muted-fg);
}
.pk-out-txt { color: var(--warning); font-weight: 700; }

/* ============================================================
   4. recent grails rail
   ============================================================ */
.pk-rail {
  padding: 20px 0 22px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.pk-rail-track {
  display: flex; gap: 18px; width: max-content;
  padding-inline: 20px;
}
.pk-rail-item { width: 200px; flex: none; }
.pk-rail-dot {
  width: 3px; height: 3px; border-radius: 999px;
  background: var(--muted-fg); opacity: .6; flex: none;
}
.pk-rail-note { font-size: 12px; }

/* ============================================================
   the rip flow
   ============================================================ */
.pk-rip {
  display: flex; flex-direction: column;
  min-height: min(76vh, 740px);
}

.pk-rip-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--glass-border);
}
.pk-rip-head-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pk-rip-sub {
  font-size: 14px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-rip-head-act { display: flex; align-items: center; gap: 8px; flex: none; }

.pk-rip-stage {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 22px 18px 28px;
}

/* ---------- (c) shake and tear ---------- */
.pk-tear {
  position: relative;
  display: grid; place-items: center;
  padding: 20px;
}
.pk-tear-art { line-height: 0; }
.pk-tear-art svg { width: min(250px, 54vw); height: auto; }

@keyframes pk-shake {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  12% { transform: translate3d(-6px, 1px, 0) rotate(-1.8deg); }
  26% { transform: translate3d(5px, -2px, 0) rotate(1.6deg); }
  41% { transform: translate3d(-7px, 2px, 0) rotate(-2.2deg); }
  57% { transform: translate3d(6px, -1px, 0) rotate(1.9deg); }
  72% { transform: translate3d(-4px, 1px, 0) rotate(-1.2deg); }
  88% { transform: translate3d(3px, 0, 0) rotate(.8deg); }
}
.pk-tear.is-shaking .pk-tear-art {
  animation: pk-shake .62s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes pk-open {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  48% { transform: scale(1.12) rotate(2.4deg); opacity: 1; }
  100% { transform: scale(1.72) rotate(-4deg); opacity: 0; }
}
/* Written after the shake rule on purpose. Both selectors carry the same
   specificity, so source order is what lets the tear take over. */
.pk-tear.is-tearing .pk-tear-art {
  animation: pk-open .42s cubic-bezier(.3, 0, .2, 1) forwards;
}

.pk-burst {
  position: absolute; inset: 0; margin: auto;
  width: min(58vmin, 430px); height: min(58vmin, 430px);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle,
    oklch(from var(--lime) l c h / .9) 0%,
    oklch(from var(--lime) l c h / .38) 24%,
    oklch(from var(--primary-soft) l c h / .18) 46%,
    transparent 68%);
}
@keyframes pk-flash {
  0% { opacity: 0; transform: scale(.35); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.05); }
}
.pk-tear.is-tearing .pk-burst { animation: pk-flash .5s ease-out forwards; }

/* ---------- (d) deal and flip ---------- */
.pk-reveal {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  justify-items: center; align-items: start;
  width: 100%; max-width: 960px; margin-inline: auto;
}
.pk-reveal.is-dense {
  gap: 11px;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  max-width: 1060px;
}

.pk-slot {
  position: relative;
  width: 100%; max-width: 196px;
  perspective: 1300px;
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.94);
  transition: opacity .34s ease, transform .34s cubic-bezier(.2, .85, .3, 1);
}
.pk-reveal.is-dense .pk-slot { max-width: 132px; }
.pk-slot.is-dealt { opacity: 1; transform: none; }

.pk-slot-inner {
  position: relative; width: 100%;
  aspect-ratio: 372 / 576;
  transform-style: preserve-3d;
  transition: transform .52s cubic-bezier(.25, .8, .3, 1);
}
.pk-slot.is-flipped .pk-slot-inner { transform: rotateY(180deg); }

.pk-slot-back, .pk-slot-front {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pk-slot-front { transform: rotateY(180deg); }
.pk-slot-front .sl-slab { width: 100%; }
.pk-slot-back .sl-card { width: 82%; }

/* rarity landing glow, rare and above only */
.pk-slot::after {
  content: ''; position: absolute; inset: -8% -10%;
  border-radius: 22px; z-index: -1;
  pointer-events: none; opacity: 0;
  transition: opacity .5s ease;
  background: radial-gradient(58% 48% at 50% 50%,
    oklch(from var(--rarity-rare) l c h / .4), transparent 72%);
}
.pk-slot[data-rarity="common"]::after,
.pk-slot[data-rarity="uncommon"]::after { display: none; }
.pk-slot[data-rarity="mythic"]::after {
  background: radial-gradient(58% 48% at 50% 50%,
    oklch(from var(--rarity-mythic) l c h / .5), transparent 72%);
}
.pk-slot[data-rarity="legendary"]::after {
  background: radial-gradient(62% 52% at 50% 50%,
    oklch(from var(--rarity-legendary) l c h / .55), transparent 74%);
}
.pk-slot.is-hit::after { opacity: 1; }

/* Skip lands the whole board in one frame. Transitions are muted for exactly
   that frame, then handed straight back so the slabs still tilt. */
.pk-reveal.pk-no-anim .pk-slot,
.pk-reveal.pk-no-anim .pk-slot-inner,
.pk-reveal.pk-no-anim .pk-slot::after { transition: none !important; }

/* ---------- (b) insufficient funds and other messages ---------- */
.pk-rip-msg { text-align: center; gap: 12px; }
.pk-msg-glyph {
  display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 20px;
  margin-bottom: 4px;
  color: var(--muted-fg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.pk-msg-p { max-width: 44ch; margin: 6px 0 0; font-size: 14px; line-height: 1.6; }
.pk-msg-p strong { color: var(--fg); font-weight: 700; }
.pk-msg-act { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.pk-msg-note { max-width: 40ch; margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; }

/* ---------- (f) summary ---------- */
.pk-rip-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 15px 18px;
  border-top: 1px solid var(--glass-border);
  background: var(--glass-bg-faint);
}
.pk-sum-stats { display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap; flex: 1 1 auto; }
.pk-sum-stat { display: flex; flex-direction: column; gap: 0; }
.pk-sum-v { font-size: 26px; line-height: 1.1; }
.pk-sum-l {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-fg);
}
.pk-sum-best { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pk-sum-best-row { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.pk-sum-best-name { font-size: 14px; font-weight: 700; }
.pk-sum-best-grade { font-size: 11px; color: var(--muted-fg); }
.pk-sum-act { display: flex; gap: 9px; flex-wrap: wrap; margin-left: auto; }

/* ============================================================
   pack detail
   ============================================================ */
.pk-back {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 22px 0 14px;
  font-size: 13px; font-weight: 600; color: var(--muted-fg);
}
.pk-back:hover { color: var(--fg); }
.pk-back-ico { display: inline-flex; transform: rotate(90deg); }

.pk-top {
  display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: start;
  padding: clamp(20px, 3vw, 34px);
}
.pk-top-art { position: relative; }
.pk-top-art .pk-thumb { display: block; margin-inline: auto; max-width: 300px; }
.pk-top-art .pk-thumb svg { width: 100%; height: auto; }

.pk-top-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pk-top-title { margin: 4px 0 0; }
.pk-top-blurb { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted-fg); max-width: 56ch; }
.pk-top-lore {
  margin: 0; padding-left: 14px;
  border-left: 2px solid var(--glass-border);
  font-size: 17px; line-height: 1.45; color: var(--muted-fg);
  max-width: 52ch;
}
.pk-top-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- buy control ---------- */
.pk-buy { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.pk-buy-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pk-qty { flex: none; }
.pk-buy-cost { display: flex; flex-direction: column; gap: 0; margin-left: auto; text-align: right; }
.pk-buy-total { font-size: 30px; line-height: 1.05; }
.pk-buy-per { font-size: 11px; color: var(--muted-fg); }
.pk-buy-note { margin: 0; font-size: 11.5px; }

/* ---------- drop table ---------- */
.pk-odds { padding: 6px 18px 16px; }
.pk-odds-note { font-size: 12px; }
.pk-odds-table { width: 100%; border-collapse: collapse; }
.pk-odds-table th {
  padding: 12px 8px 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-fg); text-align: left;
}
.pk-odds-table td {
  padding: 10px 8px;
  border-top: 1px solid var(--glass-border);
  vertical-align: middle;
}
.pk-odds-table tr.is-off td { opacity: .42; }
.pk-odds-bar-cell { width: 46%; }
.pk-odds-bar {
  display: block; height: 7px; border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.pk-odds-fill { display: block; height: 100%; border-radius: 999px; background: var(--grad-common); }
.pk-odds-fill[data-rarity="uncommon"] { background: var(--grad-uncommon); }
.pk-odds-fill[data-rarity="rare"] { background: var(--grad-rare); }
.pk-odds-fill[data-rarity="mythic"] { background: var(--grad-mythic); }
.pk-odds-fill[data-rarity="legendary"] { background: var(--grad-legendary); }
.pk-odds-pct { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pk-odds-exp { font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; text-align: right; }
.pk-odds-foot { margin: 14px 0 0; font-size: 12px; line-height: 1.6; max-width: 68ch; }

/* ---------- checklist ---------- */
.pk-checklist {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.pk-cardlet { min-width: 0; }
.pk-cardlet .sl-slab { width: 100%; }

/* ---------- not found ---------- */
.pk-404 {
  display: grid; justify-items: center; gap: 12px;
  margin-top: 60px; padding: clamp(34px, 6vw, 66px) 24px; text-align: center;
}
.pk-404-p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.6; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 900px) {
  .pk-top { grid-template-columns: minmax(0, 1fr); }
  .pk-top-art .pk-thumb { max-width: 230px; }
  .pk-sum-act { margin-left: 0; width: 100%; }
  .pk-sum-act .btn { flex: 1 1 auto; }
}

@media (max-width: 620px) {
  .pk-ticker { width: calc(100% - 20px); padding-left: 11px; }
  .pk-ticker-tag span:last-child { display: none; }
  .pk-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .pk-card-art { padding: 16px 16px 4px; }
  .pk-card-body { padding: 4px 13px 14px; }
  .pk-card-price { font-size: 18px; }
  .pk-sel { flex-direction: column; }
  /* flex-basis follows the main axis. .pk-sel-shell carries `flex: 1 1 330px`
     for the row layout, and once the column kicks in that 330px becomes a
     minimum HEIGHT, which opened a dead gap and pushed the rip button under the
     mobile nav. Reset the basis with the direction. */
  .pk-sel-shell { flex: 0 0 auto; width: 100%; }
  .pk-sel-rip { width: 100%; }
  .pk-sel-price { font-size: 20px; }
  .pk-rail-item { width: 158px; }
  .pk-rail-track { gap: 12px; padding-inline: 14px; }
  .pk-checklist { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; }
  .pk-reveal { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
  .pk-buy-cost { margin-left: 0; text-align: left; }
  .pk-buy-total { font-size: 25px; }
  .pk-odds { padding-inline: 12px; }
  .pk-odds-bar-cell { display: none; }
  .pk-odds-table th:nth-child(2) { display: none; }
}

@media (max-width: 440px) {
  .pk-qty button { padding-inline: 11px; }
  .pk-sel-row-odds { display: none; }
  /* Reclaim width for the selected-pack name. Pack names are data, so the
     name also stops being a single ellipsised line and wraps to two instead of
     hiding which product is about to be bought. */
  .pk-hero { padding-inline: 14px; }
  .pk-sel-btn { gap: 10px; padding-inline: 12px; }
  .pk-sel-art svg { width: 40px; }
  .pk-sel-name {
    white-space: normal; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
}

/* ============================================================
   preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pk-tick-rail { animation: none; transform: none; }
  .pk-live-dot { animation: none; }
  .pk-tear.is-shaking .pk-tear-art,
  .pk-tear.is-tearing .pk-tear-art,
  .pk-tear.is-tearing .pk-burst { animation: none; }
  .pk-slot, .pk-slot-inner, .pk-slot::after,
  .pk-card, .pk-card-art .pk-thumb svg, .pk-sel-caret { transition: none; }
  .pk-card:hover { transform: none; }
  .pk-card:not(.is-out):hover .pk-card-art .pk-thumb svg { transform: none; }
}

/* Glass on this page is a background treatment, never the only thing carrying
   contrast, so dropping the blur leaves every surface readable. */
@media (prefers-reduced-transparency: reduce) {
  .pk-ticker, .pk-hero, .pk-card, .pk-rail, .pk-odds, .pk-top, .pk-404,
  .pk-sel-btn, .pk-sel-menu {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--card);
  }
  .pk-hero-fx { opacity: .22; }
  .pk-rip-foot { background: var(--card); }
}