/* ============================================================
   IMMORASHOP — design system

   Art direction: "Bench".

   The product is measurement software, so the page borrows from
   the world measurement lives in: parts catalogs, spec sheets,
   hardware review layouts. Rules that actually divide content.
   Labels left, figures right, tabular. Nothing decorative that
   isn't also structural.

   The chrome is monochrome on purpose. Every bit of colour on
   the page comes from game key art — eight photographs doing
   the work an accent colour used to do badly. The lime survives
   as an instrument: brand glyph, live status, focus. It is not
   the identity.
   ============================================================ */

/* ── tokens ─────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* True neutrals. A hue bias here would fight the photography,
     which is the only thing on the page allowed to be colourful. */
  --nk-0: #0a0a0b;   /* page ground */
  --nk-1: #101011;   /* alternating band */
  --nk-2: #161618;   /* panel */
  --nk-3: #1d1d20;   /* raised, inputs */
  --nk-4: #26262a;   /* pressed, wells */

  /* Rules are solid, not translucent: a hairline that shifts with
     whatever is behind it reads as an artefact, not a decision. */
  --rule: #232326;
  --rule-2: #313136;
  --rule-3: #45454c;

  /* Warm off-white. Pure #fff on near-black glares and reads
     screen-native; bone reads printed. */
  --bone: #edebe5;
  --bone-2: #9a968e;
  --bone-3: #63605a;

  /* Instrument colours. Volt is state, never surface. */
  --volt: #c9f73f;
  --volt-dim: #8ba82a;
  --volt-wash: rgba(201, 247, 63, 0.09);
  --flag: #f0522f;

  --f-display: "Archivo", "Helvetica Neue", sans-serif;
  --f-body: "Instrument Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Two radii, both small. Soft cards everywhere is the look of
     a component library, not a catalog. */
  --r: 3px;
  --r-lg: 6px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-firm: cubic-bezier(0.65, 0, 0.35, 1);

  --hdr-h: 62px;
  --pad: clamp(18px, 4vw, 56px);
  --maxw: 1520px;
}

/* ── reset / base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--nk-0);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-height: 100svh;
}
body.locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--bone); color: var(--nk-0); }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; border-radius: 2px; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--nk-0); }
::-webkit-scrollbar-thumb { background: var(--nk-4); border: 3px solid var(--nk-0); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--rule-3); }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 999;
  background: var(--bone); color: var(--nk-0); padding: 10px 18px;
  font-weight: 600; font-size: 0.85rem; border-radius: var(--r); transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

/* ── typography ─────────────────────────────────────────────
   Archivo is variable on both axes. Width does the work that a
   second display face usually would: expanded for statements,
   condensed for dense labels, normal for everything between. */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Sized so the whole hero — eyebrow through to the figures strip —
   lands inside one viewport at laptop height. A headline that pushes
   its own call to action below the fold is not a big headline, it is
   a broken one. */
.display-xl {
  font-size: clamp(2.3rem, 4.7vw, 4.15rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.display-lg {
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  font-weight: 700;
  font-stretch: 105%;
  letter-spacing: -0.028em;
  line-height: 1.02;
}

/* Mono is the label voice: units, counts, states, codes. Anything
   that is a measurement rather than a sentence. */
.mono {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.dim { color: var(--bone-2); }
.volt { color: var(--volt); }

/* Legacy hooks from the previous system. Kept so admin-authored
   copy and any stale markup degrade to plain emphasis rather than
   to invisible outlined text. */
.outline, .outline-volt { color: inherit; -webkit-text-stroke: 0; }
.outline-volt { color: var(--volt); }

/* ── buttons ────────────────────────────────────────────────
   The primary action is bone on black. It is the highest
   contrast pair available and leaves volt free to mean "live". */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--r);
  font-family: var(--f-display);
  font-weight: 600; font-size: 0.9rem; letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.22s var(--ease); }
.btn:hover svg:last-child { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn-volt { background: var(--bone); color: var(--nk-0); }
.btn-volt:hover { background: #fff; }

.btn-ghost { border-color: var(--rule-2); color: var(--bone); }
.btn-ghost:hover { border-color: var(--rule-3); background: var(--nk-2); }

.btn-dark { background: var(--nk-3); border-color: var(--rule); }
.btn-dark:hover { background: var(--nk-4); border-color: var(--rule-2); }

.btn-sm { padding: 9px 15px; font-size: 0.82rem; }
.btn-lg { padding: 16px 30px; font-size: 0.98rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ── chips (filters) ────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--rule);
  border-radius: var(--r); background: var(--nk-1);
  font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bone-2); white-space: nowrap;
  transition: border-color 0.16s, color 0.16s, background 0.16s;
}
.chip:hover { border-color: var(--rule-3); color: var(--bone); }
.chip.on, .chip[aria-pressed="true"] {
  background: var(--bone); border-color: var(--bone); color: var(--nk-0); font-weight: 600;
}
.chip .n { opacity: 0.5; }
.chip-thumb { width: 16px; height: 16px; border-radius: 2px; object-fit: cover; margin-left: -3px; }

.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--bone-2); position: relative;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { color: var(--bone); border-color: var(--rule-3); background: var(--nk-2); }
.icon-btn.sm { width: 28px; height: 28px; border-radius: 2px; }
.icon-btn.sm svg { width: 13px; height: 13px; }

/* ── header ─────────────────────────────────────────────────
   Flat and ruled rather than a floating pill. The rule is the
   same hairline used everywhere else, so the header reads as the
   first row of the document. */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: var(--hdr-h);
  border-bottom: 1px solid transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hdr.scrolled {
  background: rgba(10, 10, 11, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--rule);
}
/* Tucked away on scroll-down, back on scroll-up. Named is-tucked
   rather than hidden so it can't be confused with the [hidden]
   attribute rule, which would display:none the whole header. */
.hdr { transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.3s var(--ease); }
.hdr.is-tucked { transform: translateY(-101%); }
.hdr-in {
  display: flex; align-items: center; gap: 28px;
  height: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad);
}

.logo { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.logo-glyph { width: 20px; height: 20px; color: var(--volt); flex: none; }
.logo-word {
  font-family: var(--f-display); font-weight: 700; font-size: 0.92rem;
  font-stretch: 92%; letter-spacing: 0.02em; text-transform: uppercase;
}
.logo-word i { font-style: normal; color: var(--bone-2); }

.nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.nav a {
  padding: 7px 12px; font-size: 0.875rem; font-weight: 500;
  color: var(--bone-2); border-radius: var(--r);
  transition: color 0.16s, background 0.16s;
}
.nav a:hover { color: var(--bone); background: var(--nk-2); }
.nav a.is-active { color: var(--bone); }
.nav a.is-active::after {
  content: ""; display: block; height: 1px; margin-top: 4px;
  background: var(--volt);
}

.hdr-acts { display: flex; align-items: center; gap: 7px; flex: none; }
.cart-count {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px;
  display: grid; place-items: center; padding: 0 4px;
  background: var(--volt); color: var(--nk-0); border-radius: 99px;
  font-family: var(--f-mono); font-size: 0.62rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.burger {
  display: none; flex-direction: column; gap: 4px;
  width: 36px; height: 36px; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: var(--r);
}
.burger span { width: 14px; height: 1.5px; background: var(--bone); transition: transform 0.25s var(--ease-firm), opacity 0.15s; }
body.nav-open .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* mobile nav.
   visibility, not just opacity on the children: .mnav-links carries a
   border-top, and a border paints even when every child inside it is
   transparent — which drew a stray hairline across the top of every
   page at every width. */
.mnav {
  position: fixed; inset: 0; z-index: 110; pointer-events: none;
  display: flex; flex-direction: column;
  padding: calc(var(--hdr-h) + 28px) var(--pad) 28px;
  visibility: hidden; transition: visibility 0s 0.32s;
}
body.nav-open .mnav { visibility: visible; transition-delay: 0s; }
.mnav-bg { position: absolute; inset: 0; background: var(--nk-0); opacity: 0; transition: opacity 0.28s; }
.mnav-links { position: relative; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.mnav-links a {
  font-family: var(--f-display); font-size: 1.55rem; font-weight: 600;
  font-stretch: 108%; letter-spacing: -0.02em;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  transition-delay: calc(var(--i) * 0.035s);
}
.mnav-foot { position: relative; margin-top: auto; padding-top: 24px; opacity: 0; transition: opacity 0.3s 0.2s; }
body.nav-open .mnav { pointer-events: auto; }
body.nav-open .mnav-bg { opacity: 0.97; }
body.nav-open .mnav-foot { opacity: 1; }
body.nav-open .mnav-links a { opacity: 1; transform: none; }

/* ── layout scaffolding ─────────────────────────────────── */
main { display: block; }

/* width:100% because .wrap is used inside flex columns, where
   `margin:0 auto` would otherwise shrink it to fit-content. */
.wrap {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-left: var(--pad); padding-right: var(--pad);
}

/* padding-block, not the shorthand: .sec and .wrap sit on the same
   element throughout, and the shorthand would wipe .wrap's inline
   padding and push sections flush to the viewport edge. */
.sec { padding-block: clamp(56px, 6.5vw, 104px); position: relative; }

/* Every section opens on a rule. This is the spine of the layout:
   content is divided by lines that mean "new section", not by
   whitespace alone. */
.sec::before {
  content: ""; position: absolute; top: 0;
  left: var(--pad); right: var(--pad);
  height: 1px; background: var(--rule);
}
.sec.no-rule::before { display: none; }

.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(26px, 3.4vw, 44px);
}
.sec-kicker {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-3); margin-bottom: 14px;
}
.sec-kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--volt); flex: none;
}
.sec-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-2); white-space: nowrap;
  padding-bottom: 5px; border-bottom: 1px solid var(--rule-2);
  transition: color 0.18s, border-color 0.18s;
}
.sec-link svg { width: 14px; height: 14px; transition: transform 0.22s var(--ease); }
.sec-link:hover { color: var(--bone); border-color: var(--bone); }
.sec-link:hover svg { transform: translateX(3px); }

/* Reveal-on-scroll. One motion for the whole site — a short lift.
   Anything more elaborate stacks up into the look this redesign
   is getting away from. */
[data-rv] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-rv].in { opacity: 1; transform: none; }

/* A hairline spec row: label left, figure right, tabular. The
   single most reused pattern on the site. */
.spec {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 7px 0; border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.spec dt, .spec .k { color: var(--bone-3); text-transform: uppercase; }
.spec dd, .spec .v { color: var(--bone); text-align: right; }
.spec .v.is-volt { color: var(--volt); }

/* Live/available indicator. The only place a coloured dot appears. */
.dot {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--bone-3); display: inline-block;
}
.dot.is-live { background: var(--volt); }

/* ── HERO ───────────────────────────────────────────────────
   The artwork is the hero. Back to front: key art, a bloom in that
   game's own sampled colour, a veil that buys the type its contrast,
   the copy, then the same artwork again masked to its lower band so
   the foreground rises in front of the headline.

   --acc is set per layer from var(--acc-<gameId>), written on :root
   once store.js has sampled the picture. Everything tinted in here
   reads from it, so the whole composition changes colour together. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: clip;
  --acc: 201 247 63;
}

/* Photographed environment. Pushed well down in brightness and
   slightly defocused: it is the room the shelf stands in, not the
   subject, and every pixel of contrast it keeps is contrast the
   headline has to fight. */
.hero-bg {
  position: absolute; inset: -2%; z-index: 0;
  background: url("../img/bg/hero-desk.jpg") center 38% / cover no-repeat;
  filter: brightness(0.4) saturate(0.85) blur(2px);
}

/* Light in the selected title's own colour, thrown across the room.
   screen so it adds light rather than painting over it. */
.hero-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(52% 46% at 72% 46%, rgb(var(--acc) / 0.34), transparent 72%),
    radial-gradient(46% 38% at 12% 88%, rgb(var(--acc) / 0.2), transparent 74%);
  transition: background 0.9s var(--ease);
}

.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10, 10, 11, 0.9) 0%, rgba(10, 10, 11, 0.6) 38%, rgba(10, 10, 11, 0.1) 72%),
    linear-gradient(to top, var(--nk-0) 1%, rgba(10, 10, 11, 0.55) 18%, transparent 52%),
    linear-gradient(to bottom, rgba(10, 10, 11, 0.8) 0%, transparent 20%);
}

.hero-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 72px); align-items: center;
  padding-top: calc(var(--hdr-h) + clamp(34px, 5vw, 68px));
  padding-bottom: clamp(34px, 4.5vw, 62px);
}
/* Wide enough that the two calls to action sit side by side; the
   headline and standfirst keep their own tighter measures. */
.hero-copy { max-width: 44ch; }

/* ── COVER SHELF ────────────────────────────────────────────
   The store's own key art, shown at the size it was made for so it
   stays sharp. Fanned like covers on a shelf; the selected one
   straightens, lifts and lights up in its own colour. */
.hero-posters { display: flex; align-items: center; padding: 30px 22px; }
.hposter {
  --acc: 201 247 63;
  position: relative; flex: none;
  width: clamp(104px, 11.5vw, 172px); aspect-ratio: 2 / 3;
  margin-left: clamp(-38px, -1.8vw, -18px);
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(237, 235, 229, 0.14);
  background: var(--nk-2);
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)) scale(var(--sc, 1));
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease),
              border-color 0.4s var(--ease), filter 0.55s var(--ease);
  filter: brightness(0.62) saturate(0.7);
  z-index: 1;
}
.hposter:first-child { margin-left: 0; }
.hposter:nth-child(1) { --rot: -7deg; --dy: 14px; }
.hposter:nth-child(2) { --rot: -2.5deg; --dy: 4px; }
.hposter:nth-child(3) { --rot: 2.5deg; --dy: 4px; }
.hposter:nth-child(4) { --rot: 7deg; --dy: 14px; }
.hposter:nth-child(5) { --rot: 11deg; --dy: 28px; }
.hposter img { width: 100%; height: 100%; object-fit: cover; }

.hposter:hover { filter: brightness(0.85) saturate(0.9); }
.hposter.on {
  --rot: 0deg; --dy: -20px; --sc: 1.16;
  z-index: 5; filter: none;
  border-color: rgb(var(--acc) / 0.7);
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.95), 0 0 60px -12px rgb(var(--acc) / 0.6);
}

.hposter-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 22px 10px 9px;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 11, 0.92) 58%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.hposter.on .hposter-meta, .hposter:hover .hposter-meta { opacity: 1; }
.hposter-meta b {
  font-family: var(--f-display); font-weight: 700; font-size: 0.68rem;
  font-stretch: 88%; letter-spacing: 0.02em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hposter-meta i {
  font-style: normal; font-family: var(--f-mono); font-size: 0.58rem; font-weight: 600;
  color: var(--nk-0); background: rgb(var(--acc)); border-radius: 99px;
  padding: 1px 6px; flex: none; font-variant-numeric: tabular-nums;
}
.hposter-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(237, 235, 229, 0.15); opacity: 0; }
.hposter.on .hposter-bar { opacity: 1; }
.hposter-bar i { display: block; height: 100%; width: 0; background: rgb(var(--acc)); }
.hposter.on .hposter-bar i { animation: railfill 5.6s linear forwards; }
@keyframes railfill { to { width: 100%; } }

.hero-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone); margin-bottom: 22px;
  border: 1px solid rgb(var(--acc) / 0.4); border-radius: 99px;
  padding: 6px 14px 6px 11px; background: rgb(var(--acc) / 0.1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.8s var(--ease), background 0.8s var(--ease);
}
.hero-tag .pulse {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: rgb(var(--acc)); box-shadow: 0 0 0 0 rgb(var(--acc) / 0.6);
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping { 60%, 100% { box-shadow: 0 0 0 8px rgb(var(--acc) / 0); } }

/* Set on the artwork, so it needs both weight and a shadow to hold.
   The shadow is deliberately large and soft — a hard drop shadow
   would read as a filter rather than as light. */
.hero h1 {
  margin-bottom: 18px; max-width: 13ch;
  text-shadow: 0 2px 40px rgba(10, 10, 11, 0.85), 0 1px 4px rgba(10, 10, 11, 0.6);
}

/* The stacked shape the admin is built around: three short words, one
   per line, set large. Tighter leading than the sentence shape, since
   three lines of display type stacked at normal leading drift apart. */
.hero h1.is-stacked { display: flex; flex-direction: column; max-width: none; line-height: 0.88; }
.hero h1.is-stacked .hl { display: block; }
.hero h1.is-stacked:not(.is-long):not(.is-xlong) { font-size: clamp(2.6rem, 5.6vw, 5rem); }

/* The marked word takes the colour of whichever title is showing on
   the shelf, so the headline and the artwork move together. */
.hero h1 .is-mark { color: rgb(var(--acc)); transition: color 0.8s var(--ease); }
/* The headline is admin-editable, so step it down past two length
   thresholds rather than letting a long sentence overrun the hero. */
.hero h1.is-long { font-size: clamp(2rem, 3.9vw, 3.35rem); max-width: 17ch; }
.hero h1.is-xlong { font-size: clamp(1.8rem, 3.2vw, 2.7rem); max-width: 22ch; }

.hero-sub {
  max-width: 40ch; color: var(--bone-2);
  font-size: clamp(0.94rem, 1vw, 1.03rem); line-height: 1.5; margin-bottom: 24px;
  text-shadow: 0 1px 20px rgba(10, 10, 11, 0.9);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .btn-ghost { background: rgba(10, 10, 11, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* No artwork in the catalog at all — fall back to a plain hero rather
   than an empty room. */
.hero.no-art { min-height: auto; }
.hero.no-art .hero-glow, .hero.no-art .hero-posters { display: none; }
.hero.no-art .hero-bg { filter: brightness(0.22) saturate(0.5) blur(4px); }
.hero.no-art .hero-in { grid-template-columns: 1fr; padding-top: calc(var(--hdr-h) + 70px); }

/* Build-out progress. A real number from D1, drawn as a measure
   rather than as a decorative bar. */
.hero-progress { margin-top: 32px; max-width: 340px; }
.prog-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bone-3); margin-bottom: 8px;
}
.prog-head b { color: var(--bone); font-weight: 600; font-variant-numeric: tabular-nums; }
.prog-track { height: 2px; background: var(--rule-2); position: relative; }
.prog-fill { position: absolute; inset: 0 auto 0 0; background: var(--volt); }

/* Figures strip. Real counts off the live catalog. */
.hero-strip {
  position: relative; z-index: 4;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--nk-0);
}
.hstrip-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 20px 0 20px 22px; border-left: 1px solid var(--rule);
}
.hstrip-item:first-child { border-left: 0; padding-left: 0; }
.hstrip-item b {
  font-family: var(--f-display); font-weight: 700; font-stretch: 108%;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.hstrip-item i {
  font-style: normal; font-family: var(--f-mono); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-3);
}

/* ── PRODUCT CARD ───────────────────────────────────────────
   Art-led. The plate is the card: the picture runs the full width,
   the title sits on it, and the spec block sits under a hairline in
   the dark. On hover the whole card lifts into its game's own light.
   --acc is that game's sampled colour. */
.grid-products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
/* Grid rather than flex, with the plate and the title sharing one
   cell: the title has to sit ON the artwork, and it cannot be a child
   of the plate because the plate is itself a link. Row two holds the
   figures, in the dark, below the picture. */
.pcard {
  --acc: 201 247 63;
  position: relative; display: grid; grid-template-rows: 1fr auto;
  background: var(--nk-1); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  transition: border-color 0.3s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.pcard:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--acc) / 0.45);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.95), 0 0 46px -22px rgb(var(--acc) / 0.65);
}
/* Light spilling up from the card's own artwork. */
.pcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgb(var(--acc) / 0.16), transparent 55%);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.pcard:hover::after { opacity: 1; }

.pcard-art {
  grid-area: 1 / 1;
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 11; background: var(--nk-2);
}
.pcard-img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--art-zoom, 1));
  filter: saturate(1.02) contrast(1.05) brightness(0.94);
  transition: transform 0.7s var(--ease);
}
.pcard:hover .pcard-img { transform: scale(calc(var(--art-zoom, 1) * 1.06)); }
/* Weighted hard to the foot of the plate: the title and standfirst sit
   there, and they have to hold over whatever the artwork happens to
   be doing underneath them. */
.pcard-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.5) 0%, transparent 28%, rgba(10, 10, 11, 0.55) 52%, rgba(10, 10, 11, 0.93) 82%, rgba(10, 10, 11, 0.97) 100%),
    radial-gradient(80% 60% at 50% 100%, rgb(var(--acc) / 0.24), transparent 70%);
}
.pcard-tech { position: absolute; inset: 0; }
.pcard-tech > * { width: 100%; height: 100%; }

/* Stock photography has none of the saturation or contrast that game
   key art brings, so it needs lifting and a lighter scrim to survive
   the same treatment. */
.pcard-img.is-photo { filter: saturate(1.25) contrast(1.14) brightness(1.28); }
.pcard:hover .pcard-img.is-photo { filter: saturate(1.4) contrast(1.16) brightness(1.42); }
.pcard-shade.is-soft {
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.4) 0%, transparent 30%, rgba(10, 10, 11, 0.35) 54%, rgba(10, 10, 11, 0.88) 84%, rgba(10, 10, 11, 0.95) 100%),
    radial-gradient(80% 60% at 50% 100%, rgb(var(--acc) / 0.2), transparent 70%);
}

.pcard-tags {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  display: flex; gap: 5px; flex-wrap: wrap;
}
.tag {
  font-family: var(--f-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 99px;
  background: rgba(10, 10, 11, 0.6); border: 1px solid rgba(237, 235, 229, 0.18);
  color: var(--bone); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tag-badge {
  background: rgb(var(--acc) / 0.92); border-color: transparent;
  color: var(--nk-0); font-weight: 700;
}
.pcard-game {
  position: absolute; top: 11px; right: 11px; z-index: 2;
  font-family: var(--f-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* Title and vendor sit on the picture, at its foot. */
.pcard-body {
  grid-area: 1 / 1; align-self: end; position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 5px; padding: 16px 16px 14px;
  pointer-events: none;
}
.pcard-body a { pointer-events: auto; }
.pcard-provider {
  font-family: var(--f-mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--acc));
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.pcard h3 {
  font-size: 1.16rem; font-weight: 700; font-stretch: 100%;
  letter-spacing: -0.022em; line-height: 1.15;
  text-shadow: 0 2px 14px rgba(10, 10, 11, 0.9);
}
.pcard-tagline {
  font-size: 0.83rem; color: var(--bone-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* The figures a buyer actually compares on, under the picture. */
.pcard-specs { grid-area: 2 / 1; padding: 4px 16px 14px; }
.pcard-specs .spec { border-color: rgba(237, 235, 229, 0.09); }
.pcard-price { font-weight: 700; color: var(--bone); }
.pcard-price i { font-style: normal; color: var(--bone-3); font-weight: 400; }
.pcard .dot.is-live { background: rgb(var(--acc)); box-shadow: 0 0 8px rgb(var(--acc) / 0.8); }

/* deactivated listings */
.pcard.paused .pcard-img { filter: grayscale(1) brightness(0.42); }
.pcard-paused-tag {
  position: absolute; top: 11px; right: 11px; z-index: 3;
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 99px;
  background: rgba(10, 10, 11, 0.82); border: 1px solid var(--rule-2); color: var(--bone-2);
}

/* The lead card spans two columns and runs the artwork tall — a shelf
   with a hero rather than a flat repeat. */
@media (min-width: 900px) {
  .pcard.is-lead { grid-column: span 2; grid-row: span 2; }
  .pcard.is-lead .pcard-art { aspect-ratio: auto; min-height: 320px; height: 100%; }
  .pcard.is-lead .pcard-body { padding: 26px 24px 20px; gap: 7px; }
  .pcard.is-lead h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.03em; }
  .pcard.is-lead .pcard-tagline { -webkit-line-clamp: 3; font-size: 0.92rem; max-width: 46ch; }
  .pcard.is-lead .pcard-specs { padding: 6px 24px 20px; }
  .pcard.is-lead .pcard-specs .spec { font-size: 0.74rem; padding: 9px 0; }
}

/* ── CATEGORY CARD ──────────────────────────────────────── */
.grid-cats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.ccat {
  --acc: 201 247 63;
  position: relative; display: flex; flex-direction: column;
  min-height: 300px; background: var(--nk-1); overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  justify-content: flex-end; padding: 26px;
  transition: border-color 0.3s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.ccat:hover {
  transform: translateY(-4px); border-color: rgb(var(--acc) / 0.45);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.95), 0 0 50px -24px rgb(var(--acc) / 0.6);
}
.ccat-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.7) contrast(1.06) brightness(0.62);
  transition: filter 0.45s var(--ease), transform 0.7s var(--ease);
}
.ccat:hover .ccat-img { filter: saturate(0.95) brightness(0.8); transform: scale(1.04); }
.ccat-tech { position: absolute; inset: 0; opacity: 0.7; }
.ccat-tech > * { width: 100%; height: 100%; }
/* Weighted to the bottom so the copy sits on near-solid ground while
   the top of the picture stays readable, with the category's accent
   rising off the floor of the card. */
.ccat-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.15) 0%, rgba(10, 10, 11, 0.55) 46%, rgba(10, 10, 11, 0.96) 88%),
    radial-gradient(85% 55% at 30% 100%, rgb(var(--acc) / 0.3), transparent 72%);
}
.ccat-body { position: relative; display: flex; flex-direction: column; gap: 8px; }
.ccat-count {
  font-family: var(--f-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgb(var(--acc)); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.ccat h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.75rem); font-weight: 750; letter-spacing: -0.028em;
  text-shadow: 0 2px 16px rgba(10, 10, 11, 0.9);
}
.ccat p { font-size: 0.875rem; color: var(--bone-2); line-height: 1.5; max-width: 34ch; }
.ccat-foot {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--bone-2);
  padding-top: 12px; margin-top: 6px; border-top: 1px solid rgba(237, 235, 229, 0.18);
  font-variant-numeric: tabular-nums;
}
.ccat:hover .ccat-foot { color: var(--bone); }

/* ── GAME PANELS ────────────────────────────────────────────
   A launcher shelf: tall cinematic panels that give way to each
   other as you move across them. The one you're pointing at takes
   the room, comes up to full colour and lights in its own accent.
   Flex-basis, not width, so the row always fills exactly. */
.grid-games {
  display: flex; gap: 6px; height: clamp(360px, 48vw, 560px);
}
.gtile {
  --acc: 201 247 63;
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; background: var(--nk-2); border-radius: var(--r-lg);
  padding: 20px; text-align: left;
  transition: flex-grow 0.55s var(--ease), box-shadow 0.4s var(--ease);
}
.grid-games:hover .gtile { flex-grow: 0.82; }
.grid-games .gtile:hover {
  flex-grow: 2.1;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95), 0 0 60px -26px rgb(var(--acc) / 0.75);
}
.gtile-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.7) contrast(1.08) brightness(0.62);
  transition: filter 0.5s var(--ease), transform 0.8s var(--ease);
}
.gtile:hover .gtile-img { filter: saturate(1.08) contrast(1.04) brightness(0.95); transform: scale(1.04); }
.gtile-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.25) 0%, transparent 42%, rgba(10, 10, 11, 0.9) 95%),
    radial-gradient(85% 55% at 50% 100%, rgb(var(--acc) / 0.34), transparent 72%);
  transition: opacity 0.4s;
}
.gtile-body {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding-top: 13px;
}
/* The rule fills in its accent as the panel opens. */
.gtile-body::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(237, 235, 229, 0.28);
}
.gtile-body::after {
  content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 0;
  background: rgb(var(--acc)); transition: width 0.5s var(--ease);
}
.gtile:hover .gtile-body::after { width: 100%; }
.gtile-body h3 {
  font-size: clamp(1rem, 1.4vw, 1.3rem); font-weight: 750;
  font-stretch: 96%; letter-spacing: 0.005em; text-transform: uppercase;
  white-space: nowrap; text-shadow: 0 2px 14px rgba(10, 10, 11, 0.9);
}
.gtile-body .mono {
  font-size: 0.64rem; color: var(--bone-2); letter-spacing: 0.12em;
  transition: color 0.3s;
}
.gtile:hover .gtile-body .mono { color: rgb(var(--acc)); }
/* Counts on the left, entry price on the right: the two things a
   shopper weighs before opening a title. */
.gtile-facts {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.gtile-facts b {
  font-size: 0.66rem; font-weight: 600; color: var(--bone);
  letter-spacing: 0.06em; text-transform: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gtile:hover .gtile-facts b { color: rgb(var(--acc)); }
.gtile-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--f-mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(10, 10, 11, 0.6); border: 1px solid rgba(237, 235, 229, 0.2);
  color: var(--bone); border-radius: 99px; padding: 3px 9px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ── GAME PAGE ──────────────────────────────────────────────
   The per-title comparison hub. Masthead in the title's own art and
   sampled colour, then the figures that make the catalog's premise
   legible: how many optimizers, from how many vendors, from what
   price. */
.gm-hero {
  --acc: 201 247 63;
  position: relative; overflow: clip;
  min-height: min(62svh, 620px);
  display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--rule);
}
.gm-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
  filter: saturate(1.02) contrast(1.05) brightness(0.7);
}

/* Portrait-only titles (Fortnite, Tarkov, anything in NO_WIDE) —
   stretching a 600x900 cover across a 1920x620 masthead upscales it
   into visible blur. Instead we run the cover twice: once as a
   heavily-blurred, tinted colour wash across the full masthead, and
   once as a sharp portrait poster pinned to the right. The copy on
   the left keeps its size; a min-height bump gives the poster room
   at desktop widths. */
.gm-hero.is-cover-fallback .gm-art {
  object-position: 50% 45%;
  transform: scale(1.15);
  filter: saturate(1.4) contrast(1.02) brightness(0.42) blur(28px);
}
.gm-hero.is-cover-fallback {
  min-height: min(72svh, 720px);
}
.gm-poster {
  position: absolute;
  z-index: 1;
  right: clamp(24px, 5vw, 72px);
  bottom: clamp(28px, 3.6vw, 46px);
  height: clamp(280px, 42vw, 480px);
  aspect-ratio: 2 / 3;
  width: auto;
  border-radius: 18px;
  object-fit: cover;
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgb(var(--acc) / 0.24) inset,
    0 0 60px -18px rgb(var(--acc) / 0.5);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 780px) {
  .gm-hero.is-cover-fallback {
    min-height: min(72svh, 620px);
  }
  .gm-poster {
    right: 50%;
    transform: translateX(50%);
    bottom: auto;
    top: calc(var(--hdr-h) + 24px);
    height: clamp(160px, 34vw, 220px);
    opacity: 0.55;
    filter: saturate(1.1);
  }
}

.gm-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 10, 11, 0.93) 0%, rgba(10, 10, 11, 0.6) 42%, rgba(10, 10, 11, 0.12) 78%),
    linear-gradient(to top, var(--nk-0) 2%, rgba(10, 10, 11, 0.5) 26%, transparent 62%),
    linear-gradient(to bottom, rgba(10, 10, 11, 0.82) 0%, transparent 22%),
    radial-gradient(52% 46% at 20% 84%, rgb(var(--acc) / 0.24), transparent 72%);
}
.gm-in {
  position: relative; z-index: 2;
  padding-top: calc(var(--hdr-h) + clamp(46px, 7vw, 96px));
  padding-bottom: clamp(28px, 3.6vw, 46px);
}
.gm-in .crumbs {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--bone-2); margin-bottom: 16px;
}
.gm-in .crumbs a:hover { color: var(--bone); }
.gm-in .crumbs i { font-style: normal; color: var(--rule-3); }
.gm-in h1 {
  margin-bottom: 14px; max-width: 16ch;
  text-shadow: 0 2px 40px rgba(10, 10, 11, 0.85), 0 1px 4px rgba(10, 10, 11, 0.6);
}
.gm-lede {
  max-width: 54ch; color: var(--bone-2); font-size: clamp(0.95rem, 1.05vw, 1.06rem);
  text-shadow: 0 1px 18px rgba(10, 10, 11, 0.9); margin-bottom: 24px;
}
.gm-figures { display: flex; flex-wrap: wrap; gap: 1px; background: rgba(237, 235, 229, 0.16); width: fit-content; }
.gm-fig {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 22px 12px 16px; background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.gm-fig b {
  font-family: var(--f-display); font-weight: 750; font-stretch: 106%;
  font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.gm-fig i {
  font-style: normal; font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-2);
}
.gm-provs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.gm-provs-k {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bone-3);
}
.gm-provs .chip { background: rgba(10, 10, 11, 0.55); backdrop-filter: blur(8px); }

/* ── FEATURE MATRIX ─────────────────────────────────────────
   Which optimizer covers what. The first column is sticky so the
   feature name stays readable while the table scrolls sideways
   through however many vendors a title ends up with. */
.mx-table th[scope="row"] {
  position: sticky; left: 0; z-index: 1;
  background: var(--nk-0); font-family: var(--f-body);
  font-weight: 500; font-size: 0.855rem; color: var(--bone-2);
  min-width: 220px;
}
.mx-table tbody tr:hover th[scope="row"] { background: var(--nk-1); color: var(--bone); }
.mx-h { min-width: 148px; }
.mx-h a {
  display: block; font-family: var(--f-display); font-weight: 650;
  font-size: 0.82rem; letter-spacing: -0.012em; text-transform: none;
  color: var(--bone); margin-bottom: 2px;
}
.mx-h a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mx-h i {
  font-style: normal; display: block; font-family: var(--f-mono);
  font-size: 0.58rem; letter-spacing: 0.12em; color: var(--volt-dim);
}
.mx-table td { text-align: center; }
.mx-y svg { width: 15px; height: 15px; color: var(--volt); margin: 0 auto; }
.mx-n { color: var(--rule-3); }
.gtile-check {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--f-mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgb(var(--acc)); color: var(--nk-0); padding: 4px 8px; border-radius: 99px;
  opacity: 0; transition: opacity 0.2s;
}
.gtile.on .gtile-check { opacity: 1; }
.gtile.on { outline: 1px solid rgb(var(--acc)); outline-offset: -1px; }

/* Touch and small screens have no hover to drive the shelf, so it
   becomes an ordinary grid of the same panels. */
@media (max-width: 900px), (pointer: coarse) {
  .grid-games { display: grid; grid-template-columns: repeat(3, 1fr); height: auto; gap: 10px; }
  .gtile { aspect-ratio: 3 / 4; flex: none; }
  .grid-games:hover .gtile, .grid-games .gtile:hover { flex-grow: 0; }
  .gtile-body::after { width: 100%; }
}

/* ── COMING SOON TILES ──────────────────────────────────────
   Covers of titles the shop covers but hasn't stocked. Smaller and
   held back in colour, so the row reads as a roadmap sitting behind
   the live shelf rather than competing with it. No hover lift and no
   link, because there is nowhere to go yet. */
.grid-soon {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: clamp(8px, 1vw, 14px);
}
.stile {
  --acc: 201 247 63;
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--rule);
  background: var(--nk-2);
  display: flex; align-items: flex-end;
}
.stile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.35) brightness(0.5) contrast(1.02);
  transition: filter 0.45s var(--ease);
}
.stile:hover img { filter: saturate(0.85) brightness(0.78); }
.stile-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.94) 4%, transparent 58%);
}
.stile-name {
  position: relative; z-index: 1; padding: 10px 11px;
  font-family: var(--f-display); font-weight: 650; font-size: 0.74rem;
  font-stretch: 90%; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--bone-2); line-height: 1.2;
  transition: color 0.3s;
}
.stile:hover .stile-name { color: var(--bone); }

/* ── STEPS (ordering) ───────────────────────────────────────
   Numbered because this genuinely is a sequence — you cannot pay
   before you choose, or receive before you pay. */
.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rule); border-top: 1px solid var(--rule);
}
.vcard { background: var(--nk-0); padding: 26px 24px 30px; counter-increment: step; }
.vcard::before {
  content: counter(step, decimal-leading-zero);
  display: block; font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.16em; color: var(--volt); margin-bottom: 18px;
}
.values-grid { counter-reset: step; }
.vcard h3 { font-size: 1.06rem; font-weight: 650; letter-spacing: -0.018em; margin-bottom: 9px; }
.vcard p { font-size: 0.885rem; color: var(--bone-2); line-height: 1.62; }
.vcard p + p { margin-top: 10px; }
.vcard a { color: var(--bone); border-bottom: 1px solid var(--rule-3); }
.vcard a:hover { border-color: var(--volt); color: var(--volt); }

/* Contact/product asides reuse .vcard without the sequence. */
.vcard.plain { counter-increment: none; border: 1px solid var(--rule); }
.vcard.plain::before { display: none; }

/* ── TRADE FIGURES ──────────────────────────────────────────
   Counted, not claimed. Set large and tabular, on rules rather than
   in boxes — a figure that has to sit in a card to look important
   usually isn't. */
.proof {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; background: var(--rule);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.proof-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(26px, 3.4vw, 44px) clamp(18px, 2vw, 28px);
  background: var(--nk-0);
}
.proof-item b {
  font-family: var(--f-display); font-weight: 800; font-stretch: 110%;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 0.92;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.proof-item b i { font-style: normal; color: var(--volt); margin-left: 0.04em; }
.proof-item span {
  font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone);
}
.proof-item em {
  font-style: normal; font-size: 0.82rem; color: var(--bone-3); line-height: 1.5;
}

/* ── TIMELINE / UPDATES ─────────────────────────────────────
   A dated log reads best as a list of rows, not as cards. */
.timeline { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.tl-item {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--rule);
}
.tl-item time {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.09em;
  color: var(--bone-3); font-variant-numeric: tabular-nums; padding-top: 2px;
}
.tl-item h3 { font-size: 1.06rem; font-weight: 650; letter-spacing: -0.018em; margin-bottom: 6px; }
.tl-item p { font-size: 0.9rem; color: var(--bone-2); max-width: 72ch; line-height: 1.62; }

/* ── FOOTER ─────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--rule); margin-top: clamp(50px, 6vw, 90px); }
.footer-in {
  display: grid; grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 34px; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(38px, 4.6vw, 62px) var(--pad);
}
.footer-brand p { color: var(--bone-2); font-size: 0.875rem; margin: 14px 0 18px; max-width: 34ch; line-height: 1.6; }
.footer-social { display: flex; gap: 7px; }
.footer-social a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: var(--r); color: var(--bone-2);
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.footer-social a svg { width: 16px; height: 16px; }
.footer-social a:hover { color: var(--bone); border-color: var(--rule-3); background: var(--nk-2); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-col h4 {
  font-family: var(--f-mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-3); margin-bottom: 4px;
}
.footer-col a { color: var(--bone-2); font-size: 0.875rem; transition: color 0.16s; }
.footer-col a:hover { color: var(--bone); }
.footer-col > div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); max-width: var(--maxw); margin: 0 auto;
  padding: 18px var(--pad); color: var(--bone-3);
}
.footer-bottom .mono { font-size: 0.66rem; letter-spacing: 0.08em; }

/* ── SEARCH OVERLAY ─────────────────────────────────────── */
.search-ov { position: fixed; inset: 0; z-index: 180; pointer-events: none; }
.search-ov-bg { position: absolute; inset: 0; background: rgba(10, 10, 11, 0.9); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.25s; }
.search-panel {
  position: relative; max-width: 700px; margin: 0 auto;
  padding: clamp(70px, 11vh, 130px) var(--pad) 0;
  opacity: 0; transform: translateY(-12px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.search-ov.open { pointer-events: auto; }
.search-ov.open .search-ov-bg { opacity: 1; }
.search-ov.open .search-panel { opacity: 1; transform: none; }
.search-bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--nk-2); border: 1px solid var(--rule-2); border-radius: var(--r);
  padding: 6px 14px;
}
.search-bar > svg { width: 17px; height: 17px; color: var(--bone-3); flex: none; }
.search-bar input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 1rem; padding: 12px 0; }
.search-bar kbd {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  border: 1px solid var(--rule-2); border-radius: 2px; padding: 3px 6px; color: var(--bone-3);
}
.search-hints { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.search-hints .mono.dim { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--bone-3); }
.search-results { margin-top: 14px; display: flex; flex-direction: column; max-height: 54vh; overflow: auto; border-top: 1px solid var(--rule); }
.search-hit {
  display: flex; align-items: center; gap: 13px; padding: 11px 4px;
  border-bottom: 1px solid var(--rule); transition: background 0.15s, padding-left 0.18s var(--ease);
}
.search-hit:hover { background: var(--nk-2); padding-left: 10px; }
.search-hit-art { width: 66px; height: 42px; overflow: hidden; flex: none; border-radius: 2px; background: var(--nk-3); }
.search-hit-art > * { width: 100%; height: 100%; object-fit: cover; }
.search-hit-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-hit-body strong { font-size: 0.9rem; font-weight: 600; }
.search-hit-body .mono { font-size: 0.62rem; color: var(--bone-3); }
.search-hit > .mono { font-size: 0.7rem; white-space: nowrap; color: var(--bone); }
.search-none { padding: 26px 0; color: var(--bone-3); font-size: 0.7rem; letter-spacing: 0.1em; }

/* ── CART DRAWER ────────────────────────────────────────── */
.drawer-ov { position: fixed; inset: 0; z-index: 190; pointer-events: none; }
.drawer-bg { position: absolute; inset: 0; background: rgba(10, 10, 11, 0.7); opacity: 0; transition: opacity 0.3s; }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  background: var(--nk-1); border-left: 1px solid var(--rule);
  display: flex; flex-direction: column;
  transform: translateX(101%); transition: transform 0.38s var(--ease-firm);
}
.drawer-ov.open { pointer-events: auto; }
.drawer-ov.open .drawer-bg { opacity: 1; }
.drawer-ov.open .drawer { transform: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--rule); flex: none;
}
.drawer-head h3 { font-size: 0.82rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; font-stretch: 92%; }
.drawer-head .mono { font-size: 0.68rem; color: var(--volt); }
.drawer-items { flex: 1; overflow-y: auto; padding: 0 20px; }
.drawer-item { display: flex; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.drawer-item-art { width: 76px; height: 50px; overflow: hidden; flex: none; border-radius: 2px; background: var(--nk-3); }
.drawer-item-art > * { width: 100%; height: 100%; object-fit: cover; }
.drawer-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.drawer-item-body strong { font-size: 0.875rem; font-weight: 600; }
.drawer-item-body a:hover strong { color: #fff; }
.drawer-item-body .mono { font-size: 0.62rem; color: var(--bone-3); }
.qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 5px; border: 1px solid var(--rule); border-radius: var(--r); width: fit-content; }
.qty button { width: 24px; height: 22px; display: grid; place-items: center; color: var(--bone-2); transition: color 0.15s, background 0.15s; }
.qty button:hover { color: var(--bone); background: var(--nk-3); }
.qty button svg { width: 10px; height: 10px; }
.qty span { min-width: 24px; text-align: center; font-family: var(--f-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.drawer-item-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.drawer-item-end .mono { font-size: 0.78rem; font-weight: 600; color: var(--bone); }
.drawer-foot { border-top: 1px solid var(--rule); padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; background: var(--nk-2); flex: none; }
.drawer-total { display: flex; align-items: baseline; justify-content: space-between; }
.drawer-total span { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-3); }
.drawer-total b { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.drawer-note { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.05em; color: var(--bone-3); line-height: 1.6; text-transform: none; }
.drawer-empty { text-align: center; padding: 64px 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.drawer-empty-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--rule-2); border-radius: 50%; color: var(--bone-3); margin-bottom: 10px; }
.drawer-empty-icon svg { width: 20px; height: 20px; }
.drawer-empty p { font-size: 0.88rem; }
.drawer-empty .dim { color: var(--bone-3); font-size: 0.82rem; }
.drawer-empty .btn { margin-top: 12px; }

/* ── TOASTS ─────────────────────────────────────────────── */
.toasts {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 360; display: flex; flex-direction: column; gap: 7px;
  align-items: center; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  background: var(--nk-3); border: 1px solid var(--rule-2); border-radius: var(--r);
  padding: 10px 16px; font-size: 0.84rem;
  opacity: 0; transform: translateY(10px); transition: opacity 0.25s, transform 0.25s var(--ease);
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, 0.9);
}
.toast.in { opacity: 1; transform: none; }
.toast-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--volt); flex: none; }
.toast.err .toast-dot { background: var(--flag); }
.toast.warn .toast-dot { background: #e8b33c; }

/* ── PAGE HERO (inner pages) ────────────────────────────────
   Shop, games, contact, FAQ, updates and the legal pages all opened
   on a flat black band. They now open on a photograph — pushed well
   down and blurred, so it reads as depth behind the type rather than
   as a picture competing with it. Pseudo-elements only, so no page's
   markup had to change. */
.phero {
  position: relative; isolation: isolate; overflow: clip;
  padding: calc(var(--hdr-h) + clamp(40px, 5.5vw, 74px)) 0 clamp(28px, 3.6vw, 46px);
  border-bottom: 1px solid var(--rule);
}
.phero::before {
  content: ""; position: absolute; inset: -4%; z-index: -2;
  background: url("../img/tex/header-dark.jpg") center 40% / cover no-repeat;
  filter: brightness(0.5) saturate(0.9) blur(1px);
}
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(10, 10, 11, 0.95) 0%, rgba(10, 10, 11, 0.74) 44%, rgba(10, 10, 11, 0.3) 88%),
    linear-gradient(to top, var(--nk-0) 1%, transparent 62%);
}
/* Each page takes a different crop of the same frame, so the set reads
   as one shoot rather than one repeated image. */
body[data-page="shop"] .phero::before    { background-position: 18% 46%; }
body[data-page="games"] .phero::before   { background-position: 72% 34%; }
body[data-page="contact"] .phero::before { background-position: 44% 68%; }
body[data-page="updates"] .phero::before { background-position: 86% 52%; }
body[data-page="faq"] .phero::before     { background-position: 30% 22%; }
body[data-page="legal"] .phero::before   { background-position: 60% 60%; }
.phero .crumbs {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--bone-3); margin-bottom: 18px;
}
.phero .crumbs a:hover { color: var(--bone); }
.phero .crumbs i { font-style: normal; color: var(--rule-3); }
.phero h1 { margin-bottom: 14px; }
.phero .lede, .phero .hero-sub { max-width: 58ch; color: var(--bone-2); font-size: clamp(0.95rem, 1.1vw, 1.06rem); margin-bottom: 0; }
.phero .sec-kicker { margin-bottom: 12px; }

/* ── SHOP ───────────────────────────────────────────────── */
.shop-bar {
  position: sticky; top: var(--hdr-h); z-index: 90;
  background: rgba(10, 10, 11, 0.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule); padding: 11px 0;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.shop-bar-in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shop-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--nk-2); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 0 13px; flex: 1; min-width: 190px; max-width: 320px;
  transition: border-color 0.18s;
}
.shop-search:focus-within { border-color: var(--rule-3); }
.shop-search svg { width: 14px; height: 14px; color: var(--bone-3); flex: none; }
.shop-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 10px 0; font-size: 0.875rem; }
.shop-sort { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.shop-sort label { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-3); }
.select-wrap { position: relative; }
.select-wrap select {
  appearance: none; background: var(--nk-2); border: 1px solid var(--rule); color: var(--bone);
  border-radius: var(--r); padding: 9px 32px 9px 13px; font-size: 0.84rem; cursor: pointer;
  transition: border-color 0.18s;
}
.select-wrap select:focus { outline: none; border-color: var(--rule-3); }
.select-wrap::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 5px; height: 5px;
  border-right: 1.5px solid var(--bone-3); border-bottom: 1.5px solid var(--bone-3);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

.filter-groups, .filter-chips { display: flex; flex-direction: column; gap: 0; margin-bottom: clamp(22px, 3vw, 32px); }
.filter-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.filter-row:first-child { border-top: 1px solid var(--rule); }
.filter-label {
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bone-3); min-width: 74px; flex: none;
}
.shop-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 16px; font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-3);
  font-variant-numeric: tabular-nums;
}
.shop-empty {
  padding: 72px 24px; border: 1px solid var(--rule); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.shop-empty strong { font-size: 1.05rem; font-family: var(--f-display); font-weight: 650; }
.shop-empty p { color: var(--bone-2); font-size: 0.9rem; }
.shop-empty .btn { margin-top: 10px; }

/* ── PRODUCT DETAIL ─────────────────────────────────────── */
.pd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 58px); align-items: start; }
.pd-gallery { position: sticky; top: calc(var(--hdr-h) + 20px); display: flex; flex-direction: column; }
.pd-art {
  position: relative; overflow: hidden; border: 1px solid var(--rule);
  aspect-ratio: 4 / 3; background: var(--nk-2);
}
.pd-art > * { width: 100%; height: 100%; object-fit: cover; }
/* Identification block, directly under the plate: what the thing is
   before what it costs. */
.pd-idspecs { margin-top: -1px; border: 1px solid var(--rule); padding: 4px 16px 12px; }
.pd-idspecs .spec:first-child { border-top: 0; }
.pd-art .tag-badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.pd-info { display: flex; flex-direction: column; gap: 18px; }
.pd-meta { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-3); }
.pd-title { font-size: clamp(1.8rem, 3.4vw, 2.75rem); font-weight: 750; font-stretch: 106%; letter-spacing: -0.032em; }
.pd-tagline { font-size: 1.02rem; color: var(--bone-2); line-height: 1.6; max-width: 52ch; }
.pd-status {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bone-2);
  border: 1px solid var(--rule); border-radius: var(--r); padding: 6px 11px;
}

.pd-durations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.pd-dur {
  position: relative; background: var(--nk-0); padding: 15px 14px;
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  transition: background 0.18s;
}
.pd-dur:hover { background: var(--nk-2); }
.pd-dur.on { background: var(--nk-3); box-shadow: inset 0 2px 0 var(--volt); }
.pd-dur b { font-family: var(--f-display); font-size: 0.92rem; font-weight: 650; letter-spacing: -0.01em; }
.pd-dur .mono { font-size: 0.86rem; color: var(--bone); font-weight: 600; letter-spacing: 0.01em; text-transform: none; }
.pd-dur.on .mono { color: var(--volt); }
.pd-dur em { font-style: normal; font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--bone-3); font-variant-numeric: tabular-nums; }
.pd-dur i { font-style: normal; font-size: 0.72rem; color: var(--bone-3); line-height: 1.45; margin-top: 3px; }
.pd-dur .save {
  position: absolute; top: 0; right: 0;
  font-family: var(--f-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.08em;
  background: var(--volt); color: var(--nk-0); padding: 2px 6px;
}

.pd-actions { display: flex; flex-direction: column; gap: 10px; }
.pd-actions .btn { width: 100%; }
.pd-actions p { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--bone-3); text-transform: none; }
.pd-trust {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.8rem; color: var(--bone-3); line-height: 1.55;
  border-top: 1px solid var(--rule); padding-top: 15px; text-transform: none;
  letter-spacing: 0; font-family: var(--f-body);
}
.pd-trust svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--bone-3); }

/* Feature list. .feat must be on the <li> — the icon sizing hangs
   off it, and without it the checkmarks render at full svg size. */
.feat-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
.feat {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  font-size: 0.885rem; color: var(--bone-2); line-height: 1.5;
}
.feat svg { width: 14px; height: 14px; color: var(--volt); flex: none; margin-top: 4px; }

/* ── COMPARISON TABLE ─────────────────────────────────────
   The reason this catalog exists: one game, several vendors. */
.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--rule); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 640px; }
.cmp-table th, .cmp-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--rule); }
.cmp-table thead th {
  font-family: var(--f-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-3);
  background: var(--nk-1); white-space: nowrap;
}
.cmp-table tbody th { font-weight: 600; color: var(--bone); font-family: var(--f-body); }
.cmp-table tbody th a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cmp-table td { color: var(--bone-2); }
.cmp-table .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--bone); letter-spacing: 0.02em; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tbody tr:hover td, .cmp-table tbody tr:hover th { background: var(--nk-1); }
.cmp-table tr.is-current th { box-shadow: inset 2px 0 0 var(--volt); }
.cmp-table tr.is-current td, .cmp-table tr.is-current th { background: var(--nk-2); }
.cmp-you {
  font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--volt); margin-left: 8px;
  border: 1px solid var(--volt-dim); border-radius: 2px; padding: 2px 5px;
}

/* ── CHECKOUT ───────────────────────────────────────────── */
.co { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 52px); align-items: start; }
.co-panel, .co-summary { border: 1px solid var(--rule); padding: clamp(20px, 2.6vw, 30px); }
.co-summary { position: sticky; top: calc(var(--hdr-h) + 20px); }
.co-panel h2, .co-summary h2 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.018em; margin-bottom: 18px; }
.co-items { display: flex; flex-direction: column; border-top: 1px solid var(--rule); margin-bottom: 16px; }
.co-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
/* flex:0 0 auto beats the sibling `.co-item div { flex:1 }` below,
   which would otherwise stretch the thumbnail to fill the row. */
.co-item .co-item-art { flex: 0 0 auto; width: 62px; height: 40px; overflow: hidden; border-radius: 2px; background: var(--nk-3); }
.co-item .co-item-art > * { width: 100%; height: 100%; object-fit: cover; }
.co-item div { flex: 1; min-width: 0; }
.co-item strong { font-size: 0.865rem; display: block; font-weight: 600; }
.co-item .mono { font-size: 0.62rem; color: var(--bone-3); }
.co-item > .mono { font-size: 0.8rem; color: var(--bone); font-weight: 600; white-space: nowrap; }
.totals { display: flex; flex-direction: column; gap: 8px; }
.totals .trow { display: flex; justify-content: space-between; align-items: baseline; }
.totals .trow span { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-3); }
.totals .trow b { font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.totals p { text-transform: none; letter-spacing: 0.03em; font-size: 0.66rem; color: var(--bone-3); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.field span, .field label {
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bone-3);
}
.field input, .field textarea, .field select {
  background: var(--nk-2); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 12px 13px; font-size: 0.92rem; width: 100%;
  transition: border-color 0.18s, background 0.18s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--rule-3); background: var(--nk-3); }
.field input::placeholder { color: var(--bone-3); }
.field .hint { font-size: 0.7rem; color: var(--flag); min-height: 1em; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }

.pay-methods { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 14px; }
.co-secure { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--bone-3); line-height: 1.6; text-transform: none; }
#coErr { color: var(--flag); font-size: 0.8rem; margin-top: 10px; font-family: var(--f-body); letter-spacing: 0; text-transform: none; }

/* order result */
.success { max-width: 660px; margin: 0 auto; }
.success-burst {
  width: 52px; height: 52px; margin-bottom: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--volt-dim); border-radius: 50%; color: var(--volt);
}
.success-burst svg { width: 22px; height: 22px; }
.keys-list { display: flex; flex-direction: column; margin: 26px 0; border-top: 1px solid var(--rule); }
.key-row { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.key-row .key-art { width: 54px; height: 36px; overflow: hidden; flex: none; border-radius: 2px; }
.key-row .key-art > * { width: 100%; height: 100%; object-fit: cover; }
.key-row .key-body { flex: 1; min-width: 0; }
.key-row .key-body strong { display: block; font-size: 0.88rem; font-weight: 600; }
.key-row .key-code { font-family: var(--f-mono); color: var(--volt); font-size: 0.82rem; letter-spacing: 0.06em; }
.copy-btn.copied { border-color: var(--volt); color: var(--volt); }

.processing { position: fixed; inset: 0; z-index: 320; background: rgba(10, 10, 11, 0.92); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.processing.on { opacity: 1; pointer-events: auto; }
.proc-ring { width: 34px; height: 34px; margin: 0 auto 18px; border-radius: 50%; border: 1.5px solid var(--rule-2); border-top-color: var(--volt); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.proc-box .mono { letter-spacing: 0.18em; color: var(--bone-3); font-size: 0.7rem; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-wrap { max-width: 820px; }
.faq-cat {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bone-3);
  margin: 44px 0 0; padding-bottom: 12px;
  display: flex; align-items: center; gap: 11px;
}
.faq-cat:first-child { margin-top: 0; }
.faq-cat::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--volt); }
.acc { border-top: 1px solid var(--rule); }
.acc:last-of-type { border-bottom: 1px solid var(--rule); }
.acc-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; text-align: left; padding: 17px 0;
  font-family: var(--f-display); font-weight: 600; font-size: 0.985rem;
  letter-spacing: -0.014em; transition: color 0.16s;
}
.acc-q:hover { color: #fff; }
.acc-q .acc-ico {
  flex: none; width: 20px; height: 20px; position: relative;
  transition: transform 0.3s var(--ease-firm);
}
.acc-q .acc-ico::before, .acc-q .acc-ico::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--bone-2);
  transform: translate(-50%, -50%);
}
.acc-q .acc-ico::before { width: 11px; height: 1.5px; }
.acc-q .acc-ico::after { width: 1.5px; height: 11px; transition: opacity 0.25s; }
.acc-q .acc-ico svg { display: none; }
.acc.open .acc-ico::after { opacity: 0; }
.acc.open .acc-ico::before { background: var(--volt); }
.acc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.acc-a > div { overflow: hidden; }
.acc-a p { padding: 0 40px 20px 0; color: var(--bone-2); font-size: 0.9rem; line-height: 1.65; max-width: 70ch; }
.acc.open .acc-a { grid-template-rows: 1fr; }

/* ── CONTACT ────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 3.6vw, 56px); align-items: start; }
.contact-col { display: flex; flex-direction: column; gap: 20px; }
.contact-cards { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }

/* .ic is required on the icon wrapper — it constrains the svg. A
   .ccard without it renders a 700px-tall mail glyph. */
.ccard {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
  transition: padding-left 0.2s var(--ease);
}
.ccard:hover { padding-left: 8px; }
.ccard .ic {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--rule-2); border-radius: var(--r); color: var(--bone-2);
  transition: color 0.18s, border-color 0.18s;
}
.ccard .ic svg { width: 16px; height: 16px; }
.ccard:hover .ic { color: var(--volt); border-color: var(--volt-dim); }
.ccard h4 { font-family: var(--f-display); font-size: 0.95rem; font-weight: 650; letter-spacing: -0.014em; margin-bottom: 4px; }
.ccard p { font-size: 0.85rem; color: var(--bone-2); line-height: 1.55; }
.ccard .mono { font-size: 0.7rem; color: var(--bone); margin-bottom: 5px; }

/* ── LEGAL ──────────────────────────────────────────────── */
.legal-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(24px, 3.6vw, 56px); align-items: start; }
.legal-nav { position: sticky; top: calc(var(--hdr-h) + 20px); display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.legal-nav a {
  padding: 11px 0; font-size: 0.865rem; color: var(--bone-2);
  border-bottom: 1px solid var(--rule); transition: color 0.16s, padding-left 0.18s var(--ease);
}
.legal-nav a:hover { color: var(--bone); padding-left: 6px; }
.legal-nav a.on { color: var(--bone); box-shadow: inset 2px 0 0 var(--volt); padding-left: 12px; }
.legal-body { max-width: 68ch; }
.legal-body h2 { font-size: 1.2rem; font-weight: 650; letter-spacing: -0.02em; margin: 38px 0 12px; scroll-margin-top: 96px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1rem; margin: 24px 0 8px; }
.legal-body p, .legal-body li { color: var(--bone-2); font-size: 0.925rem; line-height: 1.7; margin-bottom: 12px; }
.legal-body ul, .legal-body ol { padding-left: 20px; margin-bottom: 16px; }
.legal-body strong { color: var(--bone); font-weight: 600; }
.legal-body a { color: var(--bone); border-bottom: 1px solid var(--rule-3); }
.legal-body a:hover { border-color: var(--volt); }
.legal-updated {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bone-3);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
  display: block; margin-bottom: 28px;
}

/* ── PRIVACY NOTICE ─────────────────────────────────────── */
.cookie-banner {
  position: fixed; left: var(--pad); right: var(--pad); bottom: 18px; z-index: 200;
  max-width: 520px; margin-left: auto;
  background: var(--nk-2); border: 1px solid var(--rule-2); border-radius: var(--r-lg);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}
.cookie-banner.in { opacity: 1; transform: none; }
.cookie-banner-inner { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px; }
.cookie-banner-icon { color: var(--volt); font-size: 0.9rem; line-height: 1.4; flex: none; }
.cookie-banner-text { flex: 1; font-size: 0.79rem; color: var(--bone-2); line-height: 1.55; }
.cookie-banner-text strong { display: block; color: var(--bone); font-size: 0.85rem; font-weight: 600; margin-bottom: 3px; }
.cookie-banner-text a { color: var(--bone); border-bottom: 1px solid var(--rule-3); }
.cookie-banner-text a:hover { border-color: var(--volt); }
.cookie-banner-ok {
  flex: none; align-self: center; background: var(--bone); color: var(--nk-0);
  font-family: var(--f-display); font-weight: 600; font-size: 0.8rem;
  padding: 8px 14px; border-radius: var(--r); transition: background 0.16s;
}
.cookie-banner-ok:hover { background: #fff; }

/* ── 404 ────────────────────────────────────────────────── */
.nf { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--pad) 60px; max-width: var(--maxw); margin: 0 auto; }
.nf-code {
  font-family: var(--f-display); font-weight: 800; font-stretch: 118%;
  font-size: clamp(5rem, 18vw, 13rem); line-height: 0.85; letter-spacing: -0.05em;
  color: var(--nk-3); user-select: none;
}
.nf-code .glitch-layer { display: none; }
.nf h1 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin: 22px 0 12px; }
.nf p { color: var(--bone-2); max-width: 44ch; margin-bottom: 26px; }
.nf-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.hr-volt { border: 0; height: 1px; background: var(--rule); margin: 0; }

/* ── breakpoints ────────────────────────────────────────── */
@media (max-width: 1180px) {
  .footer-in { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; }
}

@media (max-width: 980px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .hdr-in { justify-content: space-between; }
  /* minmax(0, 1fr), not 1fr: a bare 1fr track takes its minimum from
     the widest item's min-content, and the cover shelf is wider than
     a phone. That pushed the headline and buttons past the viewport
     edge while the column itself looked fine. */
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero h1 { max-width: 18ch; }
  .hero-copy { max-width: none; }
  .hero-posters { justify-content: center; padding: 26px 0; }
  .hposter { width: clamp(82px, 21vw, 132px); margin-left: clamp(-30px, -4vw, -14px); }
  /* Too narrow for a name that isn't already on the cover art — keep
     the count, which is the part the artwork can't tell you. */
  .hposter-meta b { display: none; }
  .hposter-meta { justify-content: flex-end; }
  .pd { grid-template-columns: 1fr; }
  .pd-gallery { position: static; }
  .co { grid-template-columns: 1fr; }
  .co-summary { position: static; order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; border-top: 0; }
  .legal-nav a { border: 1px solid var(--rule); border-radius: var(--r); padding: 8px 13px; font-size: 0.8rem; }
  .legal-nav a.on { box-shadow: none; border-color: var(--volt-dim); color: var(--volt); padding-left: 13px; }
  .values-grid { grid-template-columns: 1fr; }
  .pcard.is-lead { grid-column: auto; }
}

@media (max-width: 760px) {
  :root { --hdr-h: 56px; }
  .grid-games { grid-template-columns: repeat(2, 1fr); }
  .footer-in { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .pd-durations { grid-template-columns: 1fr; }
  .pd-dur { flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
  .pd-dur i { width: 100%; margin-top: 0; }
  .filter-label { min-width: 100%; }
  .shop-sort { margin-left: 0; width: 100%; justify-content: space-between; }
  .hero-strip { grid-auto-flow: row; grid-auto-columns: auto; }
  .hstrip-item { border-left: 0; border-top: 1px solid var(--rule); padding: 15px 0; }
  .hstrip-item:first-child { border-top: 0; }
  .tl-item { grid-template-columns: 1fr; gap: 7px; }
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; }
}

@media (max-width: 480px) {
  .grid-products { grid-template-columns: 1fr; }
  .grid-games { grid-template-columns: 1fr 1fr; }
  .hero-cta .btn { width: 100%; }
  .pd-actions { flex-direction: column; }
}

/* ── reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-rv] { opacity: 1; transform: none; }
}

/* ── LIVE STATUS STRIP ─────────────────────────────────────
   One pill per covered game. Colour tokens are shared with the
   rest of the storefront: --volt for live, amber for updating,
   the muted graphite chrome for soon/on-request. Each pill uses
   its game's sampled accent as a hairline outline. */
.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 0;
}
.stpill {
  --pill-c: 160 160 168;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.03);
  border: 1px solid rgb(var(--pill-c) / 0.28);
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  min-height: 40px;
  font-size: 14px;
  line-height: 1;
}
.stpill:hover {
  transform: translateY(-1px);
  border-color: rgb(var(--pill-c) / 0.55);
  background: rgb(255 255 255 / 0.05);
}
.stpill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--pill-c));
  box-shadow: 0 0 0 3px rgb(var(--pill-c) / 0.16);
  flex: none;
}
.stpill-name {
  font-weight: 600;
  letter-spacing: .01em;
}
.stpill-status {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--pill-c));
  padding-left: 10px;
  border-left: 1px solid rgb(var(--pill-c) / 0.25);
  margin-left: 2px;
}
.stpill.st-ok    { --pill-c: 201 247 63; }
.stpill.st-warn  { --pill-c: 255 176 64; }
.stpill.st-soon  { --pill-c: 128 130 138; }
.stpill.st-ok .stpill-dot {
  animation: stpulse 1.8s ease-in-out infinite;
}
@keyframes stpulse {
  0%, 100% { box-shadow: 0 0 0 3px rgb(var(--pill-c) / 0.16); }
  50%      { box-shadow: 0 0 0 6px rgb(var(--pill-c) / 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .stpill.st-ok .stpill-dot { animation: none; }
}