/* ===========================================================================
   ArcadeSMP Store — stylesheet
   Single committed visual world: a dark arcade cabinet. Every colour is an
   explicit token so the page holds its own look on any host background.
   =========================================================================== */

:root {
  /* ground + surfaces — violet-biased neutrals, never pure grey */
  --ground:     #070C16;
  --ground-2:   #04070F;
  --surface:    #0F1828;
  --surface-2:  #152134;
  --surface-3:  #1D2C44;
  --line:       #26374F;
  --line-soft:  #1B2A3F;

  /* ink */
  --ink:        #EAF3FF;
  --ink-2:      #A6BCD8;
  --ink-3:      #6C82A0;

  /* accents */
  --accent:     #2F93FF;
  --accent-dim: #1A66C4;
  --accent-ink: #03101F;
  --cyan:       #5FE1FF;
  --gold:       #F5C33C;
  --good:       #34D67F;

  /* default tier tint, overridden per card */
  --tier:       var(--accent);
  --tier-soft:  var(--accent-dim);

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 18px;

  --shadow:    0 18px 40px -20px rgba(0,0,0,.85);
  --shadow-lg: 0 30px 70px -28px rgba(0,0,0,.95);

  --font-display: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --font-label:   "Silkscreen", "Courier New", monospace;
  --font-body:    "Archivo", "Segoe UI", system-ui, sans-serif;
  /* Digits never use the pixel face — a pixel 5 reads as an 8 at small sizes.
     This is also how the reference stores set their prices. */
  --font-num:     "Archivo", "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(.2, .8, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* anchors clear the sticky header instead of hiding under it */
.section, .hero { scroll-margin-top: calc(74px + env(safe-area-inset-top, 0px)); }

/* every number on the page, in one place */
.num {
  font-family: var(--font-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* the cabinet grain: a fixed vignette + faint scanlines behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(47,147,255,.20), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(55,230,255,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { max-width: 100%; }
input { font: inherit; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---- layout primitives ------------------------------------------------- */

.wrap {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 34px);
  position: relative;
  z-index: 1;
}

.eyebrow {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section { padding-block: clamp(46px, 7vw, 82px); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.section-head h2 { font-size: clamp(26px, 4vw, 38px); letter-spacing: .01em; }
.section-head p { color: var(--ink-2); max-width: 56ch; margin-top: 6px; }

.rule { height: 1px; background: linear-gradient(90deg, var(--line), transparent); border: 0; margin: 0; }

/* ---- pixel sprites ----------------------------------------------------- */

.px { display: block; image-rendering: pixelated; }
.px-item  { width: 100%; height: auto; }
.px-glyph { width: 18px; height: 18px; }
/* A 64px skin head shown at 22-28px: nearest-neighbour would drop rows and
   make the face look chewed, so let the browser resample this one smoothly. */
.px-head  { width: 28px; height: 28px; border-radius: 3px; image-rendering: auto; }

.well {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--r);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tier) 26%, transparent), transparent 66%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  overflow: hidden;
}
.well::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 4px);
  opacity: .2;
}
.well .sprite { width: 66%; animation: bob 4.6s var(--ease) infinite; }
.well .sprite > * { filter: drop-shadow(0 4px 7px rgba(0,0,0,.6)); }

@keyframes bob {
  0%, 100% { transform: translateY(-3%) rotate(-1.2deg); }
  50%      { transform: translateY(4%)  rotate(1.2deg); }
}

/* ---- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--surface-3); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 0 rgba(47,147,255,.45);
}
.btn-primary:hover {
  background: #4FA6FF;
  border-color: #4FA6FF;
  box-shadow: 0 10px 34px -12px rgba(47,147,255,.9);
}

.btn-cyan { background: var(--cyan); border-color: var(--cyan); color: #031A22; }
.btn-cyan:hover { background: #85e9ff; border-color: #85e9ff; box-shadow: 0 10px 34px -12px rgba(95,225,255,.8); }

.btn-block { width: 100%; }

/* ---- top bar ----------------------------------------------------------- */

.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--ground-2) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-in { display: flex; align-items: center; gap: 18px; height: 62px; }

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: linear-gradient(140deg, var(--accent), #114A8F 70%);
  font-family: var(--font-display);
  font-size: 17px;
  color: #fff;
  box-shadow: 0 6px 18px -8px var(--accent);
}
.logo-word { font-family: var(--font-display); font-size: 19px; letter-spacing: .02em; }
@media (max-width: 420px) { img.logo-mark { width: 30px; height: 30px; } }
.logo-word span { color: var(--accent); }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 11px;
  border-radius: var(--r-sm);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }

.ip-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: .05em;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ip-chip:hover { border-color: var(--cyan); background: var(--surface-2); }
.ip-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(52,214,127,.6); animation: ping 2.4s ease-out infinite; }
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(52,214,127,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(52,214,127,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,214,127,0); }
}

.user-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px 7px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: .05em;
  flex-shrink: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.user-chip:hover { border-color: var(--accent); background: var(--surface-2); }
.user-chip .uc-head { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.user-chip .uc-head .px-head { width: 22px; height: 22px; }
.user-chip .uc-head:empty {
  border-radius: 3px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
.uc-name { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.field-error { display: block; margin-top: 7px; font-size: 12px; color: #ff7a93; }

/* ---- hero -------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.hero-grid {
  position: absolute; inset: -40% -10% auto -10%;
  height: 150%;
  background-image:
    linear-gradient(rgba(47,147,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,225,255,.07) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(520px) rotateX(58deg);
  transform-origin: 50% 0;
  animation: gridrun 9s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, transparent 78%);
  mask-image: linear-gradient(180deg, transparent, #000 25%, transparent 78%);
}
@keyframes gridrun { to { background-position: 0 46px, 46px 0; } }

.hero-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  padding-block: clamp(44px, 7vw, 86px);
}

.hero h1 {
  font-size: clamp(42px, 8.5vw, 82px);
  letter-spacing: .005em;
  margin-bottom: 14px;
}
.hero h1 .slash { color: var(--accent); }
.hero-lead { color: var(--ink-2); font-size: clamp(15px, 1.5vw, 17px); max-width: 48ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.hero-stats div { display: flex; flex-direction: column; gap: 2px; }
.hero-stats b { font-family: var(--font-num); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* floating item showcase */
.hero-art { position: relative; aspect-ratio: 1 / 1; max-width: 420px; margin-inline: auto; width: 100%; }
.hero-art .orb {
  position: absolute; inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(47,147,255,.34), transparent 64%);
  filter: blur(22px);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }

.hero-art .float { position: absolute; width: 26%; animation: drift var(--dur, 8s) var(--ease) infinite; animation-delay: var(--delay, 0s); }
.hero-art .float svg { filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
@keyframes drift {
  0%, 100% { transform: translate3d(0, -8px, 0) rotate(-4deg); }
  50%      { transform: translate3d(0, 10px, 0) rotate(5deg); }
}
.hero-art .f1 { top: 6%;  left: 34%; width: 34%; --dur: 7.5s; }
.hero-art .f2 { top: 34%; left: 2%;  --dur: 9s;   --delay: -1.5s; }
.hero-art .f3 { top: 32%; right: 0;  --dur: 8.2s; --delay: -3s; }
.hero-art .f4 { bottom: 8%; left: 18%; --dur: 10s; --delay: -2.2s; }
.hero-art .f5 { bottom: 4%; right: 14%; width: 22%; --dur: 8.8s; --delay: -4s; }

/* ---- store shell: category rail + panel -------------------------------- */

.store { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }

.rail { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 3px; }
.rail a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), padding-left .18s var(--ease);
}
.rail a:hover { color: var(--ink); background: var(--surface); padding-left: 18px; }
.rail a.on { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
.rail a.on::before { content: ""; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; margin-right: -4px; }
.rail .count { font-size: 9.5px; color: var(--ink-3); }
.rail-sep { height: 1px; background: var(--line-soft); margin: 10px 4px; }

/* ---- billing toggle ---------------------------------------------------- */

.billing {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  margin-bottom: 26px;
}
.billing-label { font-family: var(--font-label); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.seg { position: relative; display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--ground-2); border: 1px solid var(--line-soft); }
.seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--line);
  transition: transform .34s var(--ease), width .34s var(--ease);
  pointer-events: none;
}
.seg button {
  position: relative;
  padding: 8px 15px;
  border-radius: 7px;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .22s var(--ease);
  white-space: nowrap;
}
.seg button[aria-selected="true"] { color: var(--ink); }
.seg button .save { color: var(--good); margin-left: 6px; font-size: 9px; }
.billing-note { color: var(--ink-3); font-size: 13px; margin-left: auto; }

/* ---- rank cards -------------------------------------------------------- */

.ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 16px; }

.rank {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-top: 2px solid color-mix(in srgb, var(--tier) 55%, var(--line));
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface), var(--ground-2));
  overflow: hidden;
  transition: transform .26s var(--ease), border-color .26s var(--ease), box-shadow .3s var(--ease);
}
.rank::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--tier) 16%, transparent) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease);
  pointer-events: none;
}
.rank:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--tier) 60%, var(--line));
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--tier) 26%, transparent);
}
.rank:hover::after { transform: translateX(120%); }
.rank:hover .well .sprite { animation-duration: 2.2s; }
.rank:hover .btn { border-color: color-mix(in srgb, var(--tier) 65%, var(--line)); background: var(--surface-3); }
.rank .btn { position: relative; z-index: 1; }

.rank-well { padding: 16px 16px 0; }
.rank-well .well { aspect-ratio: 16 / 11; border-radius: 9px; }

.rank-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rank-name { font-size: 25px; }
.rank-tag { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }

.perks { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.perks li { display: flex; gap: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.perks li::before { content: "+"; color: var(--tier); font-family: var(--font-label); font-size: 11px; flex-shrink: 0; margin-top: 2px; }

.rank-foot { padding: 14px 16px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 11px; }
.price { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.price .amt { font-family: var(--font-num); font-weight: 700; font-size: 25px; letter-spacing: -.015em; }
.price .per { font-size: 12px; color: var(--ink-3); }
.price .was { font-size: 12px; color: var(--ink-3); text-decoration: line-through; margin-left: 4px; }
.price-roll { display: inline-block; animation: roll .34s var(--ease); }
@keyframes roll { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 8.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: var(--tier);
  color: #0c0410;
  box-shadow: 0 6px 18px -8px var(--tier);
}
.badge-soft { background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; }

/* ---- upgrade calculator ------------------------------------------------ */

.upgrade {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
  margin-top: 16px;
  padding: clamp(18px, 2.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--ground-2));
}
.up-body h3 { font-size: clamp(20px, 2.6vw, 26px); margin: 6px 0 8px; }
.up-body > p { color: var(--ink-2); font-size: 14px; max-width: 52ch; }

.up-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.up-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 140px; min-width: 0; }
.up-field label {
  font-family: var(--font-label); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.up-arrow { color: var(--accent); font-size: 18px; padding-bottom: 11px; }

.up-sel { position: relative; }
.up-sel::after {
  content: "";
  position: absolute; right: 13px; top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.up-sel select {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  padding: 11px 34px 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--ground-2);
  color: var(--ink);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.up-sel select:hover { border-color: var(--accent); }
/* Windows renders the dropdown list with OS colours unless these are set */
.up-sel option { background: #14111F; color: #F3EFFF; }

.up-out {
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ground-2);
}
.up-amt {
  font-family: var(--font-num); font-weight: 700; font-size: 38px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--accent); line-height: 1.05;
  display: inline-block;
}
.up-amt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.up-amt-row .save-pill { flex-shrink: 0; }
.up-was { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.up-was b { color: var(--ink-2); font-weight: 700; }
.up-out .btn { margin-top: 6px; }
.up-fine { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

/* ---- bundle ------------------------------------------------------------ */

.bundle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  padding: clamp(22px, 3.4vw, 38px);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--r-lg);
  background:
    radial-gradient(760px 320px at 18% 0%, rgba(47,147,255,.20), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--ground-2));
  overflow: hidden;
}
/* breathing rim + a slow sheen — this is the hero product, it may move */
.bundle::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
              inset 0 0 40px -12px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: rim 4.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rim { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }

.bundle::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(112deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: bundleSheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bundleSheen { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

.bundle > * { position: relative; z-index: 1; }

.bundle-art { position: relative; max-width: 300px; width: 100%; margin-inline: auto; }
.bundle-art .well { border-radius: var(--r-lg); --tier: var(--accent); }
.bundle-art .well .sprite { width: 62%; animation-duration: 5.4s; }

.bundle h2 { font-size: clamp(28px, 4.4vw, 44px); }
.bundle-lead { color: var(--ink-2); margin-top: 10px; max-width: 54ch; }
.bundle-items { display: flex; flex-direction: column; gap: 9px; margin: 20px 0; }
.bundle-items li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(255,255,255,.02); }
.bundle-items .mini { width: 26px; height: 26px; flex-shrink: 0; }
.bundle-items .txt { flex: 1; font-size: 13.5px; }
.bundle-items .worth { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.bundle-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.bundle-price { display: flex; align-items: baseline; gap: 9px; font-variant-numeric: tabular-nums; }
.bundle-price .amt { font-family: var(--font-num); font-weight: 700; font-size: 40px; letter-spacing: -.02em; }
.bundle-price .was { color: var(--ink-3); text-decoration: line-through; }
.save-pill { padding: 4px 10px; border-radius: 999px; background: rgba(52,214,127,.14); border: 1px solid rgba(52,214,127,.4); color: var(--good); font-family: var(--font-label); font-size: 9.5px; letter-spacing: .08em; }

/* ---- coin packs -------------------------------------------------------- */

.coins { display: flex; flex-direction: column; gap: 10px; }
.coin-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: linear-gradient(90deg, var(--surface), var(--ground-2));
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.coin-row:hover { transform: translateX(5px); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: linear-gradient(90deg, var(--surface-2), var(--ground-2)); }
.coin-row:hover .sprite { animation-duration: 1.8s; }
.coin-art { --tier: var(--gold); }
.coin-art .well { border-radius: 9px; }
.coin-art .well .sprite { width: 76%; }
/* number in the clear face, the word in the pixel face */
.coin-amount { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.coin-amount .num { font-size: 21px; }
.coin-amount .unit { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--ink-3); }
.coin-rate { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.coin-buy { display: flex; align-items: center; gap: 12px; }

/* ---- small product grid (boosters, cosmetics) -------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; }
.tile {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--surface);
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tier) 50%, var(--line)); }
.tile-head { display: flex; align-items: center; gap: 12px; }
.tile-mini { width: 38px; height: 38px; flex-shrink: 0; }
.tile-mini .well { border-radius: 8px; }
.tile-mini .well .sprite { width: 80%; }
/* product names carry digits ("2x Coins") — the pixel face mangles them */
.tile h3 { font-family: var(--font-body); font-weight: 700; font-size: 15.5px; line-height: 1.25; }

/* a reserved row for the badge; the absolute version landed on the title */
.tile-tag { display: flex; min-height: 16px; }
.tile-tag .badge { position: static; top: auto; right: auto; }
.tile .sub { font-size: 12px; color: var(--ink-3); }
.tile .desc { font-size: 13px; color: var(--ink-2); flex: 1; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.tile-foot .amt { font-family: var(--font-num); font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; }

/* ---- booster builder ---------------------------------------------------
   One product, any length. --heat runs 0 to 1 with the chosen duration and
   drives the glow and the sprite's speed, so the card visibly reacts. */

.bb {
  --tier: var(--accent);
  --heat: .1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  padding: clamp(22px, 3.4vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(720px 340px at 14% 0%, rgba(47, 147, 255, calc(.05 + var(--heat) * .24)), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--ground-2));
  overflow: hidden;
  transition: border-color .4s var(--ease);
}

.bb-art { max-width: 262px; width: 100%; margin-inline: auto; }
.bb-art .well { border-radius: var(--r-lg); }
.bb-art .well .sprite { width: 58%; animation-duration: calc(4.6s - var(--heat) * 2.8s); }

.bb-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bb-body h2 { font-size: clamp(24px, 3.6vw, 34px); margin-top: 6px; }
.bb-lead { color: var(--ink-2); max-width: 56ch; margin-top: 10px; }

.bb-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 5px 20px; }
.bb-perks li { display: flex; gap: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.bb-perks li::before { content: "+"; color: var(--accent); font-family: var(--font-label); font-size: 11px; flex-shrink: 0; margin-top: 2px; }

.bb-readout {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ground-2);
}
.bb-readout > div { display: flex; flex-direction: column; gap: 3px; }
.bb-readout .val {
  font-family: var(--font-num); font-weight: 700; font-size: 28px;
  font-variant-numeric: tabular-nums; letter-spacing: -.015em; line-height: 1.1;
}
.bb-cost { text-align: right; margin-left: auto; }
.bb-cost .val { font-size: 38px; color: var(--accent); }

.bb-controls { display: flex; align-items: center; gap: 12px; }
.bb-step {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink);
  font-size: 20px; line-height: 1;
  transition: transform .16s var(--ease), border-color .2s var(--ease), background .2s var(--ease), opacity .2s var(--ease);
}
.bb-step:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); background: var(--surface-3); }
.bb-step:disabled { opacity: .3; cursor: not-allowed; }

.bb-range {
  flex: 1; min-width: 0;
  -webkit-appearance: none; appearance: none;
  height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 0%), var(--surface-3) var(--fill, 0%));
  cursor: pointer;
}
.bb-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--accent);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .65);
  transition: transform .15s var(--ease);
}
.bb-range::-webkit-slider-thumb:hover { transform: scale(1.14); }
.bb-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--accent);
}
.bb-range::-moz-range-track { background: transparent; }

.bb-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.bb-preset {
  padding: 7px 14px;
  border: 1px solid var(--line-soft); border-radius: 99px;
  background: var(--surface);
  font-family: var(--font-label); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.bb-preset:hover { color: var(--ink); border-color: var(--accent); }
.bb-preset[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}

.bb-buy { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; padding-top: 4px; }
.bb-fine { font-size: 12.5px; color: var(--ink-3); }

/* ---- community board (top buyers + recent) ----------------------------- */

.board { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 16px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line-soft); }
.panel-head h3 { font-size: 19px; }
.live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-label); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ping2 1.8s ease-out infinite; }
@keyframes ping2 { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.lb { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.lb-row {
  display: grid;
  grid-template-columns: 26px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  transition: background .18s var(--ease);
}
.lb-row:hover { background: var(--surface-2); }
.lb-rank { font-family: var(--font-num); font-weight: 700; font-size: 14px; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.lb-row.top1 .lb-rank { color: var(--gold); }
.lb-row.top2 .lb-rank { color: #cfd6e0; }
.lb-row.top3 .lb-rank { color: #c98b52; }
.lb-name { font-size: 13.5px; font-weight: 600; }
.lb-meta { font-size: 11.5px; color: var(--ink-3); }
.lb-total { font-family: var(--font-num); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.lb-bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--line-soft); overflow: hidden; margin-top: 2px; }
.lb-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--cyan)); width: var(--w, 0%); transform-origin: left; animation: grow 1.1s var(--ease) both; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.feed { padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: 430px; overflow-y: auto; }
.feed-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.feed-row:hover { background: var(--surface-2); border-color: var(--line-soft); }
.feed-row.fresh { animation: tick .5s var(--ease); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
@keyframes tick { from { opacity: 0; transform: translateY(-10px); background: rgba(47,147,255,.20); } to { opacity: 1; transform: none; } }
.feed-item { font-size: 13px; }
.feed-item b { font-weight: 600; }
.feed-item span { color: var(--ink-3); }
.feed-when { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* shown until there is something real to put in a panel */
.empty { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 40px 22px; text-align: center; }
.empty p { font-family: var(--font-display); font-size: 18px; color: var(--ink-2); }
.empty span { font-size: 12.5px; color: var(--ink-3); max-width: 34ch; line-height: 1.5; }

/* ---- community CTA ----------------------------------------------------- */

.community { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 16px; }
.discord-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: clamp(22px, 3.2vw, 36px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(47,147,255,.38);
  background:
    radial-gradient(560px 260px at 88% 110%, rgba(47,147,255,.32), transparent 70%),
    linear-gradient(140deg, #10254A, var(--ground-2));
  overflow: hidden;
}
.discord-card h3 { font-size: clamp(24px, 3.6vw, 34px); }
.discord-card p { color: var(--ink-2); max-width: 46ch; }
.discord-card .ghost {
  position: absolute; right: -16px; bottom: -24px;
  width: 168px; color: rgba(95,180,255,.22);
  animation: bob 6s var(--ease) infinite;
}
.discord-card .ghost .px-glyph { width: 100%; height: auto; }

.socials { display: flex; flex-direction: column; gap: 8px; }
.social {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--surface);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.social:hover { transform: translateX(5px); border-color: var(--accent); background: var(--surface-2); }
.social .ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-3); color: var(--ink-2); flex-shrink: 0; }
.social:hover .ic { color: var(--accent); }
.social b { display: block; font-size: 13.5px; }
.social span { font-size: 11.5px; color: var(--ink-3); }
.social .go { margin-left: auto; color: var(--ink-3); font-family: var(--font-label); font-size: 12px; }

/* ---- faq --------------------------------------------------------------- */

.faq { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 12px; }
.faq details { border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.faq summary { padding: 14px 16px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-label); color: var(--accent); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 16px 15px; color: var(--ink-2); font-size: 13.5px; }

/* ---- detail view ------------------------------------------------------- */

.back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); padding: 20px 0;
  transition: color .18s var(--ease), gap .18s var(--ease);
}
.back:hover { color: var(--ink); gap: 12px; }

.detail { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); align-items: start; padding-bottom: 60px; }
.detail-side { position: sticky; top: calc(88px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 16px; }
.detail-hero {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--tier) 40%, var(--line));
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--ground-2));
  padding: 18px;
  overflow: hidden;
}
.detail-hero .well { aspect-ratio: 4 / 3; border-radius: var(--r); }
.detail-hero .well .sprite { width: 56%; }
.detail-title { padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.detail-title h1 { font-size: clamp(34px, 5vw, 46px); color: var(--tier); }
.detail-title p { color: var(--ink-2); font-size: 14px; }

.opt {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.opt:hover { border-color: color-mix(in srgb, var(--tier) 50%, var(--line)); transform: translateY(-2px); }
.opt[aria-checked="true"] { border-color: var(--tier); background: color-mix(in srgb, var(--tier) 9%, var(--surface)); }
.opt .mark { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.opt[aria-checked="true"] .mark { border-color: var(--tier); box-shadow: inset 0 0 0 3px var(--tier); }
/* The title and the subtitle are two inline spans with no whitespace between
   them in the markup, so without this they render as "MonthlyRenews every
   month". Lifetime only looked right because its "Save 50%" badge happened to
   sit in the gap. */
.opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt .ttl { font-weight: 600; font-size: 14px; line-height: 1.3; }
.opt .sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.opt .amt { font-family: var(--font-num); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.opt .best { display: inline-block; margin-left: 7px; font-family: var(--font-label); font-size: 8.5px; letter-spacing: .07em; color: var(--good); }

.detail-main { display: flex; flex-direction: column; gap: 26px; }
.inherit-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 13px; color: var(--ink-2);
  align-self: flex-start;
}
.inherit-chip b { color: var(--ink); }

.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.group { border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface); padding: 16px; }
.group h4 { font-family: var(--font-body); font-weight: 700; font-size: 14px; margin-bottom: 11px; color: var(--tier); }
.group li { display: flex; gap: 9px; font-size: 13.2px; color: var(--ink-2); line-height: 1.5; padding: 4px 0; }
.group li::before { content: "\25AA"; color: var(--tier); font-size: 9px; margin-top: 5px; flex-shrink: 0; }

.compare { border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.compare-scroll { overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; min-width: 420px; }
.compare th, .compare td { padding: 11px 14px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--line-soft); }
.compare thead th { font-family: var(--font-label); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare td.this { color: var(--tier); font-weight: 600; background: color-mix(in srgb, var(--tier) 7%, transparent); }
.compare th[scope="row"] { color: var(--ink-2); font-weight: 500; }

.fineprint { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.fineprint b { color: var(--ink-2); }

.otherTiers { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.mini-tier {
  flex: 0 0 132px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--surface);
  text-align: center;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.mini-tier:hover { transform: translateY(-4px); border-color: var(--tier); }
.mini-tier .ms { width: 40px; }
.mini-tier b { font-family: var(--font-body); font-weight: 700; font-size: 14px; }
.mini-tier span { font-family: var(--font-num); font-weight: 700; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mini-tier.current { border-color: var(--tier); background: color-mix(in srgb, var(--tier) 9%, var(--surface)); }

/* ---- checkout dialog --------------------------------------------------- */

.scrim {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(4, 3, 8, .74);
  backdrop-filter: blur(6px);
  animation: fade .2s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(430px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--ground-2));
  box-shadow: var(--shadow-lg);
  padding: 22px;
  animation: pop .28s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.modal h3 { font-family: var(--font-body); font-weight: 700; font-size: 19px; margin-bottom: 4px; }
.modal .line { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.modal .line span { color: var(--ink-3); }
.modal label { display: block; font-family: var(--font-label); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 7px; }
.modal input {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--ground-2); color: var(--ink);
}
.modal input::placeholder { color: var(--ink-3); }
.modal input:focus { border-color: var(--accent); outline: none; }
.modal-actions { display: flex; gap: 9px; margin-top: 18px; }
.modal-note { margin-top: 14px; font-size: 11.5px; color: var(--ink-3); line-height: 1.55; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.modal-note code { font-family: var(--font-label); font-size: 10.5px; color: var(--cyan); }

.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 120;
  transform: translateX(-50%);
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  font-family: var(--font-label); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  animation: pop .25s var(--ease);
}

/* ---- footer ------------------------------------------------------------ */

.foot { border-top: 1px solid var(--line-soft); margin-top: 30px; padding-block: 40px 52px; text-align: center; }
.foot-word { font-family: var(--font-display); font-size: clamp(30px, 6vw, 52px); color: var(--ink); }
.foot-word span { color: var(--accent); }
.foot p { color: var(--ink-3); font-size: 12.5px; margin-top: 8px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-top: 18px; }
.foot-links a { font-family: var(--font-label); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.foot-links a:hover { color: var(--accent); }

/* ---- reveal on scroll (starts visible; only off-screen blocks animate) -- */

.reveal.pending { opacity: 0; transform: translateY(18px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .58s var(--ease);
  transition-delay: var(--d, 0ms);
}

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 1020px) {
  .store { grid-template-columns: 1fr; }
  .rail {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 6px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line-soft);
  }
  .rail a { white-space: nowrap; border: 1px solid var(--line-soft); }
  .rail a:hover { padding-left: 14px; }
  .rail a.on::before { display: none; }
  .rail .count, .rail-sep { display: none; }
  .board, .community { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; }
  .detail-side { position: static; }
}

@media (max-width: 820px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-art { max-width: 300px; order: -1; }
  .bundle, .bb, .upgrade { grid-template-columns: 1fr; }
  .bb-art { max-width: 200px; }
  .nav { display: none; }
}

@media (max-width: 620px) {
  .ranks { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .coin-row { grid-template-columns: 48px minmax(0, 1fr); row-gap: 12px; }
  .coin-buy { grid-column: 1 / -1; justify-content: space-between; }
  .billing-note { margin-left: 0; width: 100%; }
  .logo-word { display: none; }
  .lb-row { grid-template-columns: 22px 24px minmax(0, 1fr) auto; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal.pending { opacity: 1; transform: none; }
}

/* ---- digits never get the pixel face ----------------------------------
   Silkscreen's 8 and 0 are near-identical at label sizes: "58% off" was
   being read as "50% off", which on a price claim is not a cosmetic bug.
   Everything below can contain a number, so it uses the clear face while
   keeping the uppercase and tracking that make it read as a label.
   This block sits last on purpose — it has to win over the rules above.
   ---------------------------------------------------------------------- */

.save-pill,
.seg button .save,
.opt .best,
.bb-preset,
.rail .count,
.eyebrow,
.uc-name {
  font-family: var(--font-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.save-pill { font-size: 10px; letter-spacing: .04em; }
.eyebrow   { letter-spacing: .12em; }
.bb-preset { letter-spacing: .04em; font-size: 10.5px; }

/* ---- brand logo -------------------------------------------------------- */

img.logo-mark {
  width: 34px; height: 34px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  image-rendering: pixelated;   /* it is pixel art, keep the edges hard */
  flex-shrink: 0;
}

.foot-logo {
  width: 72px; height: 72px;
  margin: 0 auto 10px;
  display: block;
  image-rendering: pixelated;
}

/* ---- cart --------------------------------------------------------------
   The drawer is kept in the DOM and slid off-screen rather than rebuilt, so
   the open/close transition has something to animate. `hidden` is toggled
   around the transition in JS so a closed cart is not reachable by Tab.
   ------------------------------------------------------------------------ */

.cart-chip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink);
  cursor: pointer; flex-shrink: 0;
  transition: border-color .16s, color .16s, transform .16s;
}
.cart-chip:hover { border-color: var(--accent); color: var(--accent); }
.cart-chip:active { transform: translateY(1px); }

.cart-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--accent); color: #04101F;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--ground);
}

.cart-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(3, 7, 14, .62);
  opacity: 0; transition: opacity .22s ease;
}
body.cart-in .cart-scrim { opacity: 1; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .45);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.22, .8, .3, 1);
}
body.cart-in .cart-drawer { transform: translateX(0); }
body.cart-open { overflow: hidden; }

.cart-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.cart-head h3 { font-size: 20px; margin-top: 3px; }

.cart-x {
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 19px; line-height: 1; cursor: pointer;
}
.cart-x:hover { color: var(--ink); border-color: var(--accent); }

.cart-body { flex: 1; overflow-y: auto; padding: 14px 18px 18px; }

.cart-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.ci {
  display: flex; gap: 12px;
  padding: 11px;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--surface-2);
}
.ci-art {
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--tier) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier) 26%, transparent);
}
.ci-art svg, .ci-art img { width: 30px; height: 30px; image-rendering: pixelated; }

.ci-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.ci-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ci-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ci-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

.ci-x {
  width: 24px; height: 24px; flex-shrink: 0;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-3);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.ci-x:hover { background: color-mix(in srgb, #FF4D5E 16%, transparent); color: #FF8A94; }

.ci-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ci-foot .amt { font-size: 15px; font-weight: 700; }

.ci-qty { display: flex; align-items: center; gap: 2px; }
.ci-step {
  width: 24px; height: 24px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.ci-step:hover { border-color: var(--accent); color: var(--accent); }
.ci-qty .num { min-width: 24px; text-align: center; font-size: 13px; font-weight: 700; }
.ci-unit { font-size: 10.5px; color: var(--ink-3); margin-left: 5px; }
.ci-fixed { font-size: 12px; color: var(--ink-3); }

.cart-empty { text-align: center; padding: 42px 10px; }
.cart-empty .ghost { opacity: .22; margin-bottom: 14px; }
.cart-empty .ghost svg, .cart-empty .ghost img { width: 72px; height: 72px; image-rendering: pixelated; }
.cart-empty h4 { font-size: 16px; margin-bottom: 7px; }
.cart-empty p { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; line-height: 1.55; }

.cart-sugg { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.cart-sugg h4 { font-size: 12px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }

.cs {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 7px;
  border: 1px dashed var(--line); border-radius: 10px;
  background: transparent; color: inherit;
  text-align: left; cursor: pointer;
  transition: border-color .16s, background .16s;
}
.cs:hover { border-color: var(--accent); border-style: solid; background: var(--surface-2); }
.cs-art { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cs-art svg, .cs-art img { width: 24px; height: 24px; image-rendering: pixelated; }
.cs-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cs-name { font-size: 12.5px; font-weight: 600; }
.cs-why { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.cs-add { font-size: 12.5px; font-weight: 700; color: var(--accent); flex-shrink: 0; }

.cart-foot {
  padding: 15px 18px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.cart-foot .line {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--ink-2); padding: 3px 0;
}
.cart-foot .line b { color: var(--ink); font-weight: 700; }
.cart-foot .line-total { font-size: 15px; padding-top: 8px; margin-top: 5px; border-top: 1px solid var(--line-soft); }
.cart-foot .btn { margin-top: 12px; }
.cart-foot .btn[disabled] { opacity: .45; cursor: not-allowed; }

.cart-warn {
  margin-top: 10px; padding: 9px 11px;
  border-radius: 8px;
  background: color-mix(in srgb, #FFCC66 12%, transparent);
  border: 1px solid color-mix(in srgb, #FFCC66 30%, transparent);
  font-size: 11.5px; color: #FFCC66; line-height: 1.5;
}
.cart-fine { margin-top: 9px; font-size: 11px; color: var(--ink-3); line-height: 1.5; text-align: center; }

.modal .line-total { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line-soft); font-size: 15px; }

@media (max-width: 560px) {
  .cart-drawer { width: 100vw; border-left: 0; }
  .cart-head h3 { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer, .cart-scrim { transition: none; }
}

/* ---- the funding bar ---------------------------------------------------
   Sits next to the wordmark. It is hidden unless the Worker has reported
   real money this month, so there is no "empty state" to design for.
   ------------------------------------------------------------------------ */

.goal-pill {
  --pct: 0%;
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 11px 7px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2);
  flex-shrink: 0; min-width: 142px;
}
.goal-nums { display: flex; align-items: baseline; gap: 5px; line-height: 1; }
.goal-nums b {
  font-family: var(--font-num); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.goal-nums span {
  font-family: var(--font-num); font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.goal-track {
  display: block;          /* a span is inline, and an inline box ignores height */
  height: 4px; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--line) 70%, transparent);
}
.goal-fill {
  display: block; height: 100%; width: var(--pct);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transition: width .6s var(--ease);
}
.goal-label {
  font-family: var(--font-label); font-size: 8.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.2;
}
.goal-pill.done .goal-fill { background: linear-gradient(90deg, var(--good), var(--cyan)); }
.goal-pill.done .goal-label { color: var(--good); }

/* The header is already busy; below this the pill is the first thing to go. */
@media (max-width: 1100px) { .goal-pill { display: none; } }
@media (prefers-reduced-motion: reduce) { .goal-fill { transition: none; } }