/* ==========================================================================
   Illusion — design layer (overhaul, 2026-11).
   Loads last. theme.css holds the frozen legacy layers; everything visual that
   changed in the overhaul lives here, so reverting the look is one file.

   Direction: ink-black canvas, one pink-to-violet brand gradient used for the
   primary action and the hero line, glass chrome, bigger type, calmer meta.
   ========================================================================== */

:root {
  --ov-ink: #110d12;          /* same as theme.css html:root, so html and body never show a seam */
  --ov-panel: #100e16;
  --ov-raised: #16131e;
  --ov-line: rgba(255, 255, 255, .075);
  --ov-line-2: rgba(255, 255, 255, .13);
  --ov-text: #f6f4f8;
  --ov-body: #cfcad6;
  --ov-muted: #a7a1b0;          /* 7.6:1 on ink; the floor for secondary text */
  --ov-pink: #ff6fd2;
  --ov-violet: #a374ff;
  /* Primary action: both stops hold white text at >= 4.6:1. */
  --ov-grad: linear-gradient(135deg, #c9349f 0%, #9a35d6 55%, #7c3aed 100%);
  --ov-grad-text: linear-gradient(92deg, #ff8ad8 0%, #d98bff 45%, #9f86ff 100%);
  --ov-glow: 0 14px 40px -14px rgba(201, 52, 159, .75), 0 6px 24px -12px rgba(124, 58, 237, .7);
  --ov-ok: #3ddc84;
  --ov-warn: #f5b544;
  --ov-bad: #f87171;
  --ov-r: 18px;
  --ov-ease: cubic-bezier(.2, .7, .2, 1);
}

/* --------------------------------------------------------------------------
   1. Canvas. One cheap layer replaces the 130-140px blur washes and the
      feTurbulence noise: an aurora at the top of the document that scrolls
      away, and a faint grid masked to the first screen.
   -------------------------------------------------------------------------- */
html:root { background-color: var(--ov-ink); }
html body {
  background-color: var(--ov-ink);
  background-image:
    radial-gradient(60rem 32rem at 78% -6rem, rgba(163, 116, 255, .16), transparent 70%),
    radial-gradient(52rem 30rem at 12% -8rem, rgba(255, 111, 210, .13), transparent 70%);
  background-repeat: no-repeat;
  color: var(--ov-body);
}
html body::after { display: none; }
html body::before {
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 52% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 52% at 50% 0%, #000 10%, transparent 72%);
  position: absolute;
  height: 1100px;
  bottom: auto;
}
.page-fx::after,
.pfx-glows::before,
.pfx-glows-corners::before,
.pfx-glows-corners::after,
.sa-hero .hero-bg-glow { display: none !important; }

::selection { background: rgba(201, 52, 159, .38); color: #fff; }

/* --------------------------------------------------------------------------
   2. Type
   -------------------------------------------------------------------------- */
h1, h2, h3 { color: var(--ov-text); }
.sa-section-title,
.hm-head h2,
.hm-end h2 {
  font-size: clamp(32px, 4.4vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.032em !important;
  font-weight: 800;
}
.sa-section-subtitle,
.hm-head p { color: var(--ov-muted); font-size: 16.5px; line-height: 1.6; }

/* One eyebrow treatment everywhere: gradient-edged pill. */
.hm-kicker,
.sa-section-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 13px !important;
  border: 1px solid transparent !important;
  border-radius: 999px;
  background:
    linear-gradient(var(--ov-ink), var(--ov-ink)) padding-box,
    linear-gradient(90deg, rgba(255, 111, 210, .55), rgba(163, 116, 255, .55)) border-box !important;
  color: #f1d9ff !important;
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: .02em;
}
.hm-kicker::before,
.sa-section-eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ov-grad);
  box-shadow: 0 0 10px rgba(255, 111, 210, .8);
}

/* --------------------------------------------------------------------------
   3. Buttons. Every primary action wears the brand gradient.
   -------------------------------------------------------------------------- */
.hm-btn-primary,
.sa-btn--primary.sa-btn--solid,
html body .sa-buy-now,
.sa-buybar-cta,
.sa-page-products form button[type="submit"],
.sa-page-cart button[type="submit"],
.sa-faq-support-card-link,
html body .sa-tk-btn--primary,
html body a.bg-accent-500,
html body button.bg-accent-500:not(.sa-add-to-cart) {
  position: relative;
  border: 0 !important;
  background: var(--ov-grad) !important;
  background-size: 140% 140% !important;
  background-position: 0% 50% !important;
  color: #fff !important;
  font-weight: 650 !important;
  box-shadow: var(--ov-glow), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  transition: background-position .5s var(--ov-ease), transform .2s var(--ov-ease), box-shadow .3s var(--ov-ease) !important;
}
.hm-btn-primary:not(:disabled):not([aria-disabled="true"]):hover,
.sa-btn--primary.sa-btn--solid:not(:disabled):not([aria-disabled="true"]):hover,
html body .sa-buy-now:not(:disabled):not([aria-disabled="true"]):hover,
.sa-buybar-cta:not(:disabled):not([aria-disabled="true"]):hover,
.sa-page-products form button[type="submit"]:not(:disabled):not([aria-disabled="true"]):hover,
.sa-page-cart button[type="submit"]:not(:disabled):not([aria-disabled="true"]):hover,
.sa-faq-support-card-link:not(:disabled):not([aria-disabled="true"]):hover,
html body .sa-tk-btn--primary:not(:disabled):not([aria-disabled="true"]):hover,
html body a.bg-accent-500:not(:disabled):not([aria-disabled="true"]):hover,
html body button.bg-accent-500:not(.sa-add-to-cart):not(:disabled):hover {
  background-position: 100% 50% !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 46px -14px rgba(201, 52, 159, .9), 0 8px 30px -12px rgba(124, 58, 237, .85), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
.hm-btn { height: 50px; padding: 0 24px; border-radius: 14px; font-size: 15px; }
.hm-btn-ghost,
html body .sa-add-to-cart {
  border: 1px solid var(--ov-line-2) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: var(--ov-text) !important;
  backdrop-filter: blur(10px);
}
.hm-btn-ghost:hover,
html body .sa-add-to-cart:hover { border-color: rgba(255, 255, 255, .28) !important; background: rgba(255, 255, 255, .07) !important; }

/* --------------------------------------------------------------------------
   4. Chrome: announcement, header
   -------------------------------------------------------------------------- */
html body .sa-announcement {
  background: transparent !important;
  border-bottom: 1px solid var(--ov-line) !important;
  color: var(--ov-muted) !important;
  font-size: 12.5px !important;
}
@media (max-width: 639px) { html body .sa-announcement { display: none !important; } }

html body .sa-header { background: linear-gradient(var(--ov-ink) 0%, rgba(17, 13, 18, .86) 62%, transparent) !important; }
html body .sa-navbar > div > div {
  border: 1px solid var(--ov-line-2) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)), rgba(13, 11, 19, .78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 50px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4) !important;
}
html body .sa-navbar-link { font-size: 14px !important; color: var(--ov-muted); border-radius: 10px !important; position: relative; }
html body .sa-navbar-link:hover { color: var(--ov-text) !important; background: rgba(255, 255, 255, .05) !important; }
html body .sa-navbar-link[aria-current="page"],
html body .sa-navbar-link.text-t-primary {
  color: var(--ov-text) !important;
  background: rgba(255, 255, 255, .06) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
html body .sa-navbar-link[aria-current="page"]::after,
html body .sa-navbar-link.text-t-primary::after {
  content: '';
  position: absolute; left: 30%; right: 30%; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--ov-grad);
  box-shadow: 0 0 12px rgba(255, 111, 210, .9);
}
.sa-navbar-logo span { font-weight: 800; font-size: 19px; letter-spacing: -.03em; }

/* --------------------------------------------------------------------------
   5. Home hero
   -------------------------------------------------------------------------- */
.hm-hero { --hm-bg: var(--ov-ink); padding-top: clamp(56px, 8vw, 112px); }
.hm-hero::before {
  top: -60px; right: -6%; width: 64%; height: 760px;
  background:
    radial-gradient(closest-side at 55% 45%, rgba(163, 116, 255, .26), transparent 72%),
    radial-gradient(closest-side at 35% 60%, rgba(255, 111, 210, .18), transparent 70%) !important;
}
.hm-hero h1 {
  margin: 26px 0 22px;
  font-size: clamp(44px, 5.4vw, 80px) !important;
  line-height: .96 !important;
  letter-spacing: -.035em !important;
}
.hm-hero h1 span {
  display: inline-block;
  padding-bottom: .06em;
  background: var(--ov-grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 10px 40px rgba(201, 52, 159, .35));
}
@media (min-width: 1024px) {
  .hm-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important; }
}
@media (max-width: 1023px) {
  .hm-hero::before { right: -30%; width: 160%; height: 620px; }
}
.hm-lead { font-size: 18px; color: var(--ov-body); max-width: 520px; }
.hm-live {
  height: 36px;
  background: rgba(61, 220, 132, .07) !important;
  border-color: rgba(61, 220, 132, .28) !important;
  color: #d7f7e6 !important;
  font-weight: 550;
}
.hm-live.is-incident { background: rgba(245, 181, 68, .08) !important; border-color: rgba(245, 181, 68, .32) !important; color: #fbe7c2 !important; }
.hm-proof { font-size: 14px; color: var(--ov-muted); }
.hm-proof li { display: inline-flex; align-items: center; gap: 6px; }

@media (min-width: 1024px) {
  .hm-stage { perspective: 1800px; }
  .hm-window {
    transform: rotateY(-9deg) rotateX(4deg) translateZ(0);
    transform-origin: 70% 50%;
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .04), 0 0 90px -20px rgba(163, 116, 255, .45) !important;
    transition: transform .8s var(--ov-ease);
  }
  .hm-stage:hover .hm-window { transform: rotateY(-4deg) rotateX(2deg) translateZ(0); }
}
.hm-float {
  background: rgba(14, 12, 20, .86) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9) !important;
}
.hm-float-head { font-size: 11.5px; color: var(--ov-muted) !important; }
.hm-float-kicker { color: var(--ov-muted) !important; font-size: 12px; }

/* Status palette, one set everywhere. */
.hm-hero, .hm-why, .hm-flow, .hm-faq, .hm-end {
  --hm-ok: var(--ov-ok); --hm-warn: var(--ov-warn); --hm-bad: var(--ov-bad);
  --hm-muted: var(--ov-muted); --hm-faint: #8f899a;
  --hm-surface: var(--ov-panel); --hm-raised: var(--ov-raised);
}

/* --------------------------------------------------------------------------
   6. Game / product cards
   -------------------------------------------------------------------------- */
html body .sa-product-card {
  border-radius: 20px !important;
  border: 1px solid var(--ov-line) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 45%), var(--ov-panel) !important;
  box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .9) !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ov-ease), border-color .35s var(--ov-ease), box-shadow .35s var(--ov-ease) !important;
}
html body .sa-product-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255, 111, 210, .85), rgba(163, 116, 255, .2) 40%, transparent 60%, rgba(163, 116, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .35s var(--ov-ease);
}
@media (hover: hover) {
  html body .sa-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .95), 0 0 60px -18px rgba(201, 52, 159, .55) !important;
  }
  html body .sa-product-card:hover::before { opacity: 1; }
}
html body .sa-product-card img { transition: transform .7s var(--ov-ease), filter .5s; }
@media (hover: hover) {
  html body .sa-product-card:hover img { transform: scale(1.06); }
}
.sa-group-card-art::after { background: linear-gradient(180deg, transparent 45%, rgba(16, 14, 22, .92)) !important; opacity: 1 !important; }
html[data-scheme] body .sa-group-card-body { padding: 14px 16px 16px !important; gap: 10px !important; background: transparent !important; }
html body .sa-group-card-heading .sa-product-card-title { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.015em; color: var(--ov-text) !important; }
html body .sa-group-card-details { font-size: 13px !important; color: var(--ov-muted) !important; }
html body .sa-product-card--group .sa-group-card-price .sa-product-card-price { font-size: 17px !important; color: var(--ov-text) !important; font-weight: 750 !important; }
html body .sa-group-card-price .sa-product-card-price-label { font-size: 12.5px; color: var(--ov-muted); }
html body .sa-group-card-count {
  height: 26px; padding: 0 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--ov-line);
  font-size: 12.5px !important; color: var(--ov-body) !important;
}
html body .sa-group-card-count i { color: var(--ov-pink) !important; font-size: 11px !important; }
html body .sa-group-card-arrow {
  background: var(--ov-grad) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: var(--ov-glow);
}

/* Phones: two cards per row on home and the catalog, compact body. */
@media (max-width: 639px) {
  html body .sa-page-products-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body :is(.sa-products, .sa-page-products) .sa-product-card { border-radius: 16px !important; }
  html body :is(.sa-products, .sa-page-products) .sa-product-card--group .sa-product-card-media img { aspect-ratio: 4 / 3; }
  html[data-scheme] body :is(.sa-products, .sa-page-products) .sa-group-card-body { padding: 10px 11px 12px !important; gap: 6px !important; }
  html body :is(.sa-products, .sa-page-products) .sa-group-card-heading .sa-product-card-title { font-size: 14.5px !important; }
  html body :is(.sa-products, .sa-page-products) .sa-group-card-details { flex-direction: column; align-items: flex-start; gap: 6px; }
  html body :is(.sa-products, .sa-page-products) .sa-product-card--group .sa-group-card-price .sa-product-card-price { font-size: 15px !important; }
  html body :is(.sa-products, .sa-page-products) .sa-group-card-count { height: 22px; padding: 0 8px; font-size: 12px !important; }
  html body :is(.sa-products, .sa-page-products) .sa-group-card-arrow { display: none !important; }
  html body .sa-page-products-items > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Catalog header on home */
.sa-catalog-heading h2, .sa-catalog-header h2 { letter-spacing: -.032em; }

/* --------------------------------------------------------------------------
   7. Status chips. Templates set --chip from one tone rule (mirrors tone()
      in custom.js), so merchant colours that disagree render the same.
   -------------------------------------------------------------------------- */
html body .sa-chip[data-label] {
  color: color-mix(in srgb, var(--chip) 78%, #fff) !important;
  background: color-mix(in srgb, var(--chip) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--chip) 34%, transparent) !important;
  font-weight: 600;
}
html body .sa-chip[data-label] .sa-chip-dot { background: var(--chip) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip) 22%, transparent); }

.st-live.is-warn, .st-live.is-warn::after { background: var(--ov-warn) !important; color: var(--ov-warn) !important; }
.st-live.is-bad, .st-live.is-bad::after { background: var(--ov-bad) !important; color: var(--ov-bad) !important; }

/* Updating notice on product pages */
.sa-status-notice {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 4px 0 16px;
  padding: 13px 15px;
  border: 1px solid rgba(245, 181, 68, .32);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(245, 181, 68, .1), rgba(245, 181, 68, .04));
  color: #f7e6c6;
  font-size: 13.5px; line-height: 1.5;
}
.sa-status-notice svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ov-warn); }
.sa-status-notice strong { display: block; color: #fff3dc; font-weight: 650; font-size: 14px; }
.sa-status-notice span { display: block; color: #e9d5b0; }
.sa-status-notice a { display: inline-block; margin-top: 4px; color: var(--ov-warn); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   8. Product page
   -------------------------------------------------------------------------- */
html body .sa-product-media-shell {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html body .sa-product-media-shell img {
  border-radius: 22px !important;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .07);
}
html body .sa-product-buybox {
  border-radius: 24px !important;
  border: 1px solid var(--ov-line-2) !important;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(163, 116, 255, .1), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 40%),
    var(--ov-panel) !important;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
html body .sa-buybox-title,
html body .sa-page-product-title {
  font-size: clamp(30px, 3vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  line-height: 1.05 !important;
}
html body .sa-variant-card {
  border-radius: 14px !important;
  transition: border-color .2s, background-color .2s;
}
html body .sa-variant-card:has(input:checked),
html body .sa-variant-card.is-selected {
  border-color: transparent !important;
  background:
    linear-gradient(var(--ov-raised), var(--ov-raised)) padding-box,
    linear-gradient(120deg, #ff6fd2, #a374ff) border-box !important;
  box-shadow: 0 10px 30px -14px rgba(201, 52, 159, .6);
}
html body .sa-variant-name { font-size: 15px !important; font-weight: 650 !important; color: var(--ov-text) !important; }
html body .sa-variant-sub { font-size: 13px !important; color: var(--ov-muted) !important; }
html body .sa-variant-price { font-size: 16px !important; font-weight: 750 !important; color: var(--ov-text) !important; }
html body .sa-variant-save {
  background: rgba(61, 220, 132, .12) !important;
  color: #9ff0c4 !important;
  border: 1px solid rgba(61, 220, 132, .3) !important;
  font-size: 11.5px !important; font-weight: 650 !important;
}
html body .sa-product-total-amount small { font-size: 13px !important; letter-spacing: 0 !important; color: #8ee8b5 !important; font-weight: 550 !important; }
html body .sa-total-value {
  font-size: clamp(34px, 3.4vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: #fff !important;
}
html body .sa-buy-now,
html body .sa-add-to-cart { min-height: 54px !important; border-radius: 14px !important; font-size: 15.5px !important; }
html body .sa-buy-trust { font-size: 12.5px !important; color: var(--ov-muted) !important; }
html body .sa-product-tabs-nav { border-radius: 14px; }

/* --------------------------------------------------------------------------
   9. Phone: dock + product buy bar
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  html body .sa-mobile-dock {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; max-width: none !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid var(--ov-line-2) !important;
    border-radius: 0 !important;
    background: rgba(10, 9, 15, .96) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, .9) !important;
  }
  html body .sa-mobile-dock-link {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 52px; padding: 4px 0 !important;
    border-radius: 12px !important;
    background: none !important;
    color: var(--ov-muted) !important;
    font-size: 11.5px !important; font-weight: 600 !important;
  }
  html body .sa-mobile-dock-link svg { width: 22px; height: 22px; }
  html body .sa-mobile-dock-link.is-active { color: #fff !important; }
  html body .sa-mobile-dock-link.is-active svg { color: var(--ov-pink); filter: drop-shadow(0 0 8px rgba(255, 111, 210, .7)); }
  .sa-mobile-dock-icon { position: relative; display: inline-flex; }
  .sa-mobile-dock-icon b {
    position: absolute; top: -5px; right: -9px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px;
    background: var(--ov-grad);
    color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px #0a090f;
  }
  html body { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }

  /* Product pages: the dock gives way to a purchase bar. */
  .sa-tpl-product .sa-mobile-dock { display: none !important; }
  .sa-buybar {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; /* below the z-40 modal/drawer backdrops */
    transform: translateY(110%); visibility: hidden;
    transition: transform .28s var(--ov-ease), visibility 0s linear .28s;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ov-line-2);
    background: rgba(10, 9, 15, .96);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, .9);
  }
  .sa-buybar-total { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
  .sa-buybar-total span { font-size: 12.5px; color: var(--ov-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sa-buybar-total strong { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
  .sa-buybar-cta {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    min-height: 50px; border-radius: 14px; font-size: 15.5px;
  }
  .sa-buybar.is-on { transform: none; visibility: visible; transition: transform .28s var(--ov-ease), visibility 0s; }
  .sa-buybar-cta { min-width: 0; }
  .sa-buybar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sa-buybar-cta:disabled { opacity: 1; background: #2a2531 !important; color: var(--ov-body) !important; box-shadow: none !important; }
}
@media (min-width: 1024px) { .sa-buybar { display: none !important; } }

/* --------------------------------------------------------------------------
   10. Forms: visible control edges (>= 3:1 against the panel)
   -------------------------------------------------------------------------- */
html body .input,
html body input[type="text"].input,
html body input[type="email"],
html body input[type="number"],
html body textarea,
html body select {
  border-color: #5f5868 !important;
  background-color: rgba(255, 255, 255, .03) !important;
  border-radius: 12px !important;
}
html body .input:focus,
html body input:focus,
html body textarea:focus { border-color: #d36be3 !important; box-shadow: 0 0 0 4px rgba(201, 52, 159, .2) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: #c9349f; }
html body .border-theme.peer-checked\:bg-accent-500,
html body label > span.size-4.rounded-\[5px\] { border-color: #6a6470 !important; }

/* --------------------------------------------------------------------------
   11. Cart
   -------------------------------------------------------------------------- */
.sa-cart-trust {
  display: grid; gap: 9px;
  margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--ov-line);
  list-style: none;
  font-size: 13.5px; color: var(--ov-body);
}
.sa-cart-trust li { display: flex; align-items: center; gap: 10px; }
.sa-cart-trust i {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--ov-line);
  color: var(--ov-pink); font-size: 12px;
}
.sa-cart-secondary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 4px 2px;
  font-size: 14px;
}
.sa-cart-continue { display: inline-flex; align-items: center; gap: 8px; color: var(--ov-body); font-weight: 600; }
.sa-cart-continue svg, .sa-buybar-cta svg { flex: none; width: 16px; height: 16px; }
.sa-buybar-cta { gap: 8px; white-space: nowrap; }
.sa-cart-continue:hover { color: #fff; }
.sa-cart-clear { color: var(--ov-muted); font-weight: 500; }
.sa-cart-clear:hover { color: var(--ov-bad); }
html body .sa-page-cart-item { border-radius: 18px !important; }
html body .sa-page-cart-price { color: #fff !important; font-weight: 750 !important; }

/* altcha widget: match the panel instead of a stock white checkbox row */
html body altcha-widget {
  --altcha-color-base: #120f19;
  --altcha-color-border: #5f5868;
  --altcha-color-text: #e8e4ee;
  --altcha-color-border-focus: #d36be3;
  --altcha-border-radius: 12px;
  --altcha-max-width: 100%;
}

/* --------------------------------------------------------------------------
   12. Reviews
   -------------------------------------------------------------------------- */
.sa-feedbacks-all {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; padding: 0 18px; height: 44px;
  border: 1px solid var(--ov-line-2); border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--ov-text); font-weight: 600; font-size: 14px;
}
.sa-feedbacks-all:hover { border-color: rgba(255, 255, 255, .28); }

/* --------------------------------------------------------------------------
   12b. Closing CTA on home: the last thing before the footer gets the light.
   -------------------------------------------------------------------------- */
html body .hm-end-card {
  overflow: hidden;
  border: 1px solid transparent !important;
  border-radius: 28px !important;
  padding: clamp(32px, 6vw, 72px) !important;
  background:
    radial-gradient(60% 120% at 100% 100%, rgba(124, 58, 237, .38), transparent 60%),
    radial-gradient(50% 120% at 0% 0%, rgba(201, 52, 159, .26), transparent 60%),
    linear-gradient(var(--ov-panel), var(--ov-panel)) padding-box,
    linear-gradient(120deg, rgba(255, 111, 210, .6), rgba(255, 255, 255, .08) 40%, rgba(163, 116, 255, .6)) border-box !important;
  box-shadow: 0 50px 120px -50px rgba(124, 58, 237, .6) !important;
}
html body .hm-end h2 { font-size: clamp(36px, 5vw, 64px) !important; }
.hm-end-rating b { color: #fff; font-size: 16px; }

/* FAQ page uses the home help centre */
.sa-tpl-faq .hm-faq { padding-top: clamp(40px, 6vw, 80px); }
.sa-tpl-faq .hm-faq h1 { font-family: var(--ff-heading); color: var(--ov-text); font-size: clamp(38px, 5vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.035em; margin: 16px 0 12px; }

/* --------------------------------------------------------------------------
   13. Meta text floor and footer
   -------------------------------------------------------------------------- */
html body .text-xs { font-size: max(.75rem, 12px); }
html body .sa-footer { position: relative; overflow: hidden; padding-bottom: clamp(84px, 16vw, 250px) !important; }
html body .sa-footer::after {
  content: 'illusion';
  position: absolute; left: 50%; bottom: -.2em; z-index: 0;
  transform: translateX(-50%);
  font-family: var(--ff-heading);
  font-size: clamp(110px, 22vw, 340px); font-weight: 800; letter-spacing: -.06em; line-height: 1;
  white-space: nowrap; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 111, 210, .16), rgba(163, 116, 255, .08) 45%, rgba(163, 116, 255, 0) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html body .sa-footer > * { position: relative; z-index: 1; }
html body .sa-footer { border-top: 1px solid var(--ov-line) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent) !important; }
html body .sa-footer-link { color: var(--ov-muted) !important; }
html body .sa-footer-link:hover { color: #fff !important; }

/* --------------------------------------------------------------------------
   14. Motion: honour the user's setting without a 650ms floor.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* :not(#_rm) adds ID-level specificity so this beats every component transition, including the !important ones. */
  html *:not(#_rm), html *:not(#_rm)::before, html *:not(#_rm)::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  html body .sa-product-card, html body .sa-product-card img { transform: none !important; }
}


/* ==========================================================================
   Round 2
   ========================================================================== */

/* Game cards: live status summary from the group's products */
.sa-group-card-status {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  --tone: var(--ov-ok); color: color-mix(in srgb, var(--tone) 70%, #fff);
}
.sa-group-card-status[data-tone="warn"] { --tone: var(--ov-warn); }
.sa-group-card-status[data-tone="bad"] { --tone: var(--ov-bad); }
.sa-group-card-status-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); }

/* Shape + colour on status chips (not colour alone) */
html body .sa-chip[data-tone] .sa-chip-dot { border-radius: 50%; }
html body .sa-chip[data-tone="warn"] .sa-chip-dot { border-radius: 2px; transform: rotate(45deg) scale(.85); }
html body .sa-chip[data-tone="bad"] .sa-chip-dot { border-radius: 1px; }

/* Secondary text floor on the hub pages (status, guides, updates, tickets) */
html body .gd-hub { --gd-muted: #b3aebd; --gd-faint: #9b96a7; }
html body .sa-tk, html body [class*="sa-tk-"] { --tk-faint: #a398a6; }
html body .hm-hero, html body .hm-why, html body .hm-flow, html body .hm-faq, html body .hm-end { --hm-faint: #9b96a7; }

/* Control edges: >= 3:1 everywhere, including hub inputs and search fields */
html body input[type="search"],
html body .sa-tk-input,
html body .hm-faq-search,
html body .st-search,
html body .gd-search { border-color: #6a6375 !important; }
html body ::placeholder { color: #9590a2 !important; opacity: 1; }

/* altcha: compact, labelled security check */
html body altcha-widget { display: block; font-size: 14px; }

/* Phones: bigger tap targets, slimmer header */
@media (max-width: 1023px) {
  html body .sa-nav-icon-btn { min-width: 44px !important; min-height: 44px !important; }
  html body .sa-page-cart-item button { min-width: 40px; min-height: 40px; }
  html body .st-chip, html body .st-filter button, html body .hm-faq-topics button { min-height: 40px; }
}
@media (max-width: 639px) {
  html body .sa-navbar .h-16 { height: 56px !important; }
  html body .sa-page-products-intro { display: none !important; }

  /* Home: shoppable content sooner. The menu mock-up hides; the live status card stays. */
  .hm-hero { padding-top: 28px !important; padding-bottom: 32px !important; }
  .hm-window { display: none !important; }
  .hm-float-status { margin: 4px 0 0 !important; }

}

/* Rating panel (shown when there are no written reviews) */
.sa-rating-panel {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  max-width: 760px; margin: 8px auto 0; padding: 22px 26px;
  border: 1px solid var(--ov-line-2); border-radius: 20px;
  background: radial-gradient(80% 120% at 0% 0%, rgba(245, 192, 74, .1), transparent 60%), var(--ov-panel);
  color: var(--ov-body); text-decoration: none;
  transition: border-color .2s;
}
.sa-rating-panel:hover { border-color: rgba(255, 255, 255, .26); }
.sa-rating-score { font-family: var(--ff-heading); font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #fff; }
.sa-rating-copy { display: grid; gap: 3px; }
.sa-rating-stars { color: #f5c04a; letter-spacing: 2px; font-size: 15px; }
.sa-rating-copy b { color: var(--ov-text); font-size: 15.5px; font-weight: 650; }
.sa-rating-copy small { color: var(--ov-muted); font-size: 13px; }
.sa-rating-go { font-weight: 650; color: var(--ov-text); white-space: nowrap; }
@media (max-width: 639px) {
  .sa-rating-panel { grid-template-columns: auto 1fr; gap: 14px 16px; padding: 18px; }
  .sa-rating-go { grid-column: 1 / -1; }
  .sa-rating-score { font-size: 44px; }
}


/* ==========================================================================
   Round 3: council round-2 fixes
   ========================================================================== */

/* Control edges at 3:1 or better against their surface (WCAG 1.4.11). Cards stay subtle: they are not controls. */
:root { --ov-control-edge: #6e6478; }
html body .sa-variant-card:not([aria-pressed="true"]) .sa-variant-radio { border: 1.5px solid #8a8094 !important; }
html body .hm-btn-ghost,
html body .sa-add-to-cart { border-color: var(--ov-control-edge) !important; }
html body .sa-page-products button[class*="border-theme"],
html body .hm-faq-topics button { border-color: var(--ov-control-edge) !important; }

/* Feature list: one accordion per category, summary previews the first features. */
.fp-list--accordion .fp-cat { padding: 0 !important; border-top: 1px solid var(--ov-line, rgba(255,255,255,.08)) !important; }
.fp-list--accordion .fp-list-sum + .fp-cat { border-top: 0 !important; }
.fp-list--accordion summary {
  list-style: none; cursor: pointer; min-height: 56px;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) 18px; align-items: center; gap: 10px;
  padding: 14px 6px; border-radius: 10px;
}
.fp-list--accordion summary::-webkit-details-marker { display: none; }
.fp-list--accordion summary:hover { background: rgba(255,255,255,.025); }
.fp-list--accordion summary:focus-visible { outline: 2px solid #d36be3; outline-offset: 2px; }
.fp-cat-title { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; color: var(--ov-text, #f6f4f8); }
.fp-list--accordion summary em {
  padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: .75rem; font-weight: 700;
  background: rgba(201, 52, 159, .16); color: #f3b5e4;
}
.fp-cat-peek { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ov-muted, #a7a1b0); font-size: .86rem; }
.fp-list--accordion .fp-cat[open] .fp-cat-peek { visibility: hidden; }
.fp-cat-chev { color: var(--ov-muted, #a7a1b0); transition: transform .2s ease; }
.fp-list--accordion .fp-cat[open] .fp-cat-chev { transform: rotate(180deg); }
.fp-list--accordion .fp-cat ul { padding: 2px 6px 20px; }
.fp-list--accordion .fp-cat.is-req summary em { background: rgba(245, 181, 68, .16); color: #f5c772; }
@media (max-width: 640px) { .fp-cat-peek { font-size: .8rem; } }

/* Compatibility check next to the purchase decision. */
.sa-req-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 10px;
  color: var(--ov-body, #cfcad6); font-size: 14px; font-weight: 500;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 4px;
}
.sa-req-link:hover { color: #fff; text-decoration-color: currentColor; }
.sa-req-link svg { color: #f5b544; flex: none; }

/* Updating products: the total note turns amber instead of a green "In stock". */
html body .sa-product-total-amount small.is-warn { color: #f5b544 !important; }

/* Status page: group-header dots get a shape per tone (circle ok, diamond warn, square bad). */
.st-group-dots i { width: 7px !important; height: 7px !important; background: #8a8794 !important; border-radius: 50% !important; }
.st-group-dots i.is-ok { background: #3ddc84 !important; }
.st-group-dots i.is-warn { background: #f5b544 !important; border-radius: 1px !important; transform: rotate(45deg) scale(.88); }
.st-group-dots i.is-bad { background: #f87171 !important; border-radius: 1px !important; }
/* Rows that open a product say so. */
.st-row-main[href] .st-row-text strong::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; vertical-align: .12em;
  border-right: 1.75px solid currentColor; border-top: 1.75px solid currentColor;
  transform: rotate(45deg); opacity: .45; transition: opacity .2s, transform .2s;
}
.st-row-main[href]:hover .st-row-text strong::after { opacity: 1; transform: translateX(2px) rotate(45deg); }

/* Catalog: the products intro box is filler on every viewport. */
html body .sa-page-products-intro { display: none !important; }
/* Game-card status stays on one line so cards in a row share a height. */
html body .sa-group-card-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Home */
html body .hm-proof li { white-space: nowrap; }
.hm-faq-all {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; padding: 0 18px;
  border: 1px solid var(--ov-control-edge); border-radius: 999px; color: var(--ov-text, #f6f4f8); font-weight: 600; font-size: 14px;
}
.hm-faq-all:hover { border-color: #d36be3; }
.hm-faq-all svg { transition: transform .2s; }
.hm-faq-all:hover svg { transform: translateX(3px); }

/* Cart */
.sa-cart-stepper {
  display: inline-grid; grid-template-columns: 44px 40px 44px; align-items: center; height: 44px;
  border: 1.5px solid var(--ov-control-edge); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.02);
}
.sa-cart-stepper button { height: 100%; display: grid; place-items: center; color: var(--ov-text, #f6f4f8); }
.sa-cart-stepper button:hover { background: rgba(255,255,255,.06); }
.sa-cart-stepper button:focus-visible { outline: 2px solid #d36be3; outline-offset: -2px; }
.sa-cart-stepper span { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.sa-cart-remove {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; margin-left: 4px;
  border-radius: 10px; color: var(--ov-muted, #a7a1b0); font-size: 14px;
}
.sa-cart-remove:hover { color: #f87171; background: rgba(248,113,113,.08); }
.sa-cart-item-status { margin-top: 4px; color: #f5b544; font-size: 13px; font-weight: 500; }
.sa-cart-skeleton { display: grid; gap: 24px; padding-block: 8px 40px; }
@media (min-width: 1024px) { .sa-cart-skeleton { grid-template-columns: 2fr 1fr; align-items: start; } }
.sa-cart-skel-item, .sa-cart-skel-summary { border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: rgba(255,255,255,.02); padding: 20px; }
.sa-cart-skel-item { display: flex; gap: 16px; }
.sa-cart-skel-item i { width: 64px; height: 64px; border-radius: 12px; flex: none; }
.sa-cart-skel-item span { flex: 1; display: grid; gap: 10px; align-content: start; }
.sa-cart-skel-summary { display: grid; gap: 14px; }
.sa-cart-skeleton i, .sa-cart-skeleton b {
  display: block; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.09), rgba(255,255,255,.05));
  background-size: 200% 100%; animation: ov-skel 1.4s ease-in-out infinite;
}
.sa-cart-skeleton b { height: 12px; border-radius: 6px; }
.sa-cart-skel-item b:nth-child(1) { width: 55%; height: 16px; }
.sa-cart-skel-item b:nth-child(2) { width: 30%; }
.sa-cart-skel-item b:nth-child(3) { width: 40%; height: 44px; border-radius: 12px; }
.sa-cart-skel-summary b:nth-child(1) { width: 50%; height: 18px; }
.sa-cart-skel-summary b:nth-child(3) { height: 52px; border-radius: 14px; }
@keyframes ov-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (max-width: 1023px) {
  /* The cart page swaps the dock for its own checkout bar. */
  .sa-tpl-cart .sa-mobile-dock { display: none !important; }
  /* The dock already carries Cart, so the header drops its duplicate (kept where the dock is hidden). */
  body:not(.sa-tpl-product):not(.sa-tpl-cart) .sa-header .sa-navbar-cart { display: none !important; }
  /* Home: the radar art squeezed product names to "R…"; the list gets the full card width. */
  .hm-art-status .hm-radar { display: none !important; }
}
@media (max-width: 639px) {
  /* The Discord preview is decoration; on phones the steps carry the message. */
  html body .hm-discord { display: none !important; }
}


/* ==========================================================================
   Round 3b: fixes from the full-site check (guides, downloads, cart)
   ========================================================================== */

/* Inputs that sit inside a styled wrapper (icon + field) must not paint a second box:
   the wrapper owns the border, background and focus ring. */
html body :is(.gd-input, .gd-palette-input, .dl-search, .hub-search, .hm-faq-search, .st-search, .sa-catalog-search, .sa-preference-search, .sa-tk-input, .gd-search) input,
html body :is(.gd-input, .gd-palette-input, .dl-search, .hub-search, .hm-faq-search, .st-search, .sa-catalog-search, .sa-preference-search, .sa-tk-input, .gd-search) input:focus {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html body :is(.gd-input, .dl-search, .hub-search, .sa-tk-input, .hm-faq-search, .st-search, .sa-catalog-search, .gd-search, .gd-palette-input, .sa-preference-search):focus-within { border-color: #d36be3 !important; box-shadow: 0 0 0 4px rgba(201, 52, 159, .2) !important; }
html body .gd-input { border-color: var(--ov-control-edge) !important; }

/* Guides / downloads unlock form: the two fields shared 1fr columns with a min-content floor,
   so they pushed 7px+ past the card. minmax(0, 1fr) keeps them inside. */
html body .gd-access-form .gd-form,
html body .dl-lock-card .gd-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html body .gd-field, html body .gd-input { min-width: 0; }
@media (max-width: 760px) {
  html body .gd-access-form .gd-form, html body .dl-lock-card .gd-form { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Every primary action on the hub pages uses the brand gradient, like the storefront. */
html body .gd-btn:not(.is-muted):not(:disabled),
html body .dl-btn:not(.is-muted):not(:disabled) {
  background: var(--ov-grad) !important; box-shadow: 0 12px 28px -14px rgba(201, 52, 159, .75) !important; filter: none !important;
}
html body .gd-btn:not(.is-muted):not(:disabled):hover,
html body .dl-btn:not(.is-muted):not(:disabled):hover { box-shadow: 0 16px 34px -14px rgba(201, 52, 159, .95) !important; transform: translateY(-1px); }
html body .gd-btn { height: 48px; border-radius: 12px; }

/* Cart stepper: flex shrink squeezed the grid to 77px and clipped "+". */
html body .sa-cart-stepper { flex: none !important; width: 128px !important; min-width: 128px !important; }
html body .sa-cart-stepper svg, html body .sa-cart-remove svg { width: 16px !important; height: 16px !important; flex: none !important; display: block !important; }


/* ==========================================================================
   Round 4: one site, not a kit. Shared canvas, shared grid, cinematic product top.
   ========================================================================== */

/* One canvas colour on every template: --ov-ink (hub pages used a cooler grey and left a seam at the footer). */
html body .gd-hub { --gd-surface: #15111a; --gd-raised: #1a1520; --gd-sunk: #0d0a10; background: transparent !important; }

/* One content edge: 1184px of content on every page (was 1084 product, 1184 store, 1280 hub). */
html body .sa-page-product .wrap { max-width: 1280px !important; width: min(100% - 2rem, 1280px) !important; }
@media (min-width: 1024px) {
  html body .gd-hub > .wrap, html body .hub-page > .wrap { padding-inline: 48px; }
}
html body .hub-updates-layout { max-width: none !important; }

/* Product top: an ambient backdrop drawn from the product art, so even a flat logo image sits in a lit scene. */
html body .sa-page-product { position: relative; isolation: isolate; overflow-x: clip; }
html body .sa-page-product::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -160px; height: 940px; pointer-events: none;
  background: var(--p-art, none) center 35% / cover no-repeat;
  filter: blur(80px) saturate(1.6); opacity: .34; transform: scale(1.2);
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 100%); mask-image: linear-gradient(to bottom, #000 25%, transparent 100%);
}
html body .sa-page-product::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -160px; height: 940px; pointer-events: none;
  background: radial-gradient(70% 60% at 30% 30%, transparent 0, rgba(17, 13, 18, .55) 70%, #110d12 100%);
}
html body .sa-page-product .sa-product-gallery img,
html body .sa-page-product img.sa-product-gallery {
  box-shadow: 0 48px 90px -36px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .09) !important;
  border-color: transparent !important;
}
html body .sa-page-product .sa-product-buybox {
  background: linear-gradient(180deg, rgba(28, 22, 34, .86), rgba(19, 15, 24, .92)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
@media (min-width: 1024px) {
  html body .sa-page-product .sa-product-top { gap: 40px !important; }
  html body .sa-page-product .sa-page-product-title { font-size: clamp(34px, 3.2vw, 46px) !important; letter-spacing: -.03em; line-height: 1.02; }
}

/* Reviews: automatic ratings are real orders without words, so they render as compact rows, not empty cards. */
html body .sa-feedback-card.is-auto { min-height: 0 !important; }
html body .sa-feedback-card.is-auto > .relative.flex-1 { padding: 14px 16px 10px !important; }
html body .sa-feedback-card.is-auto .mb-3 { margin-bottom: 6px !important; }
.sa-fb-auto { color: var(--ov-muted, #a7a1b0); font-size: 12.5px; }
html body .sa-feedback-card.is-auto > :last-child:not(.relative) { padding-top: 10px !important; padding-bottom: 12px !important; }

/* Updates: long provider notes collapse to six lines. */
.hub-update-copy.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.hub-update-more {
  display: inline-flex; align-items: center; min-height: 36px; margin-top: 6px; padding: 0 12px;
  border: 1px solid var(--ov-control-edge); border-radius: 999px; color: var(--ov-text, #f6f4f8); font-size: 13px; font-weight: 600;
}
.hub-update-more:hover { border-color: #d36be3; }


/* ==========================================================================
   Round 5: council round-3 fixes
   ========================================================================== */

/* Contrast tokens (WCAG 1.4.3 / 1.4.11): meta text, control outlines and placeholders. */
:root { --ov-meta: #aaa3b4; --ov-chip-text: #ddd8e3; }
html body :is(.hub-search, .st-search, .gd-search, .dl-search, .gd-palette-input, .hm-faq-search, .sa-catalog-search, .sa-preference-search) { border-color: var(--ov-control-edge) !important; }
html body input::placeholder, html body textarea::placeholder { color: #918a9d !important; opacity: 1 !important; }
html body .hm-faq-plus { border-color: var(--ov-control-edge) !important; }
/* Open FAQ item: an outlined minus instead of a hot-pink disc (glare on a dark page). */
html body .hm-faq-item.is-open .hm-faq-plus { background: transparent !important; border-color: #e7a6f2 !important; color: #f0c2f7 !important; }

/* Primary buttons: a tighter glow. The 40px pink halo blurred text edges on the ink canvas. */
:root { --ov-glow: 0 8px 20px -10px rgba(201, 52, 159, .55), 0 2px 8px -4px rgba(124, 58, 237, .45); }
html body .gd-btn:not(.is-muted):not(:disabled), html body .dl-btn:not(.is-muted):not(:disabled) { box-shadow: var(--ov-glow) !important; }

/* Home: inactive "what happens when a game updates" steps stay readable (about 8:1, was 3.9:1). */
html body .hm-step:not(.is-on) { opacity: 1 !important; }
html body .hm-step:not(.is-on) .hm-step-body :is(p, small, span:not(.hm-step-top):not(.hm-step-bar)) { color: #b4aebd !important; }
html body .hm-end-rating small { color: var(--ov-meta) !important; font-size: 13px !important; }

/* Status rows: larger, lighter meta and a real "Updates" control. */
html body .st-row-text small { font-size: 13px !important; color: var(--ov-meta) !important; }
html body .st-supplier { font-size: 12px !important; color: var(--ov-chip-text) !important; }
html body .st-row-updates {
  display: inline-flex !important; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px !important;
  border: 1px solid var(--ov-control-edge) !important; border-radius: 10px !important;
  color: var(--ov-chip-text) !important; font-size: 13px !important; font-weight: 600;
}
html body .st-row-updates:hover { border-color: #d36be3 !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   Updates page: same container, header and card surface as the other hub pages.
   -------------------------------------------------------------------------- */
html body .sa-updates-page > .wrap { max-width: 1280px !important; }
html body .sa-updates-page .sa-docs-kicker {
  display: inline-flex !important; align-items: center; gap: 8px; margin-bottom: 18px !important;
  color: #b3aebd !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: .25px !important; text-transform: none !important;
}
html body .sa-updates-page .sa-docs-kicker .gd-dot { width: 6px; height: 6px; border-radius: 50%; background: #e452bd; box-shadow: 0 0 0 4px rgba(228, 82, 189, .14); flex: none; }
html body .sa-updates-page .sa-docs-title::after { content: "."; }
html body .sa-updates-page .hub-update-entry {
  display: grid !important; grid-template-columns: minmax(0, 1fr) 132px; gap: 24px; align-items: start;
  padding: 20px 22px !important; border-radius: 16px !important;
  background: linear-gradient(180deg, #1a1520, #151119) !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  box-shadow: inset 2px 0 0 var(--hub-edge, rgba(255, 255, 255, .12)) !important;
}
html body .sa-updates-page .hub-update-entry.is-status { --hub-edge: #c9349f; }
html body .sa-updates-page .hub-update-entry.is-incident { --hub-edge: #f5b544; }
html body .sa-updates-page .hub-update-image,
html body .sa-updates-page .hub-update-fallback { width: 132px !important; height: 74px !important; object-fit: cover; border-radius: 10px !important; margin: 0 !important; align-self: start; }
html body .sa-updates-page .hub-update-meta { gap: 8px !important; }
html body .sa-updates-page .hub-update-kind { font-size: 11.5px !important; color: var(--ov-chip-text) !important; background: #2a2431 !important; letter-spacing: .04em; }
html body .sa-updates-page .hub-update-meta time { font-size: 12.5px !important; color: var(--ov-meta) !important; font-variant-numeric: tabular-nums; }
html body .sa-updates-page .hub-update-game { font-size: 13px !important; color: var(--ov-meta) !important; }
html body .sa-updates-page .hub-update-copy { color: #d6d1dc !important; font-size: 14px !important; line-height: 1.6 !important; }
html body .sa-updates-page .hub-update-copy.is-clamped {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
}
.hub-note-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-note-chips > span {
  padding: 3px 10px; border-radius: 999px; font-size: 12.5px; line-height: 1.5; font-weight: 500;
  color: var(--ov-chip-text); background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09);
}
@media (max-width: 640px) {
  html body .sa-updates-page .hub-update-entry { grid-template-columns: minmax(0, 1fr) 76px; gap: 14px; padding: 16px !important; }
  html body .sa-updates-page .hub-update-image,
  html body .sa-updates-page .hub-update-fallback { width: 76px !important; height: 48px !important; border-radius: 8px !important; }
}

/* --------------------------------------------------------------------------
   Order ratings page: summary first, written reviews as cards, automatic ratings as one list.
   -------------------------------------------------------------------------- */
.sa-fb-head { display: grid; gap: 24px; align-items: end; margin-bottom: 28px; }
.sa-fb-head .sa-section-header { margin-bottom: 0 !important; }
@media (min-width: 1024px) { .sa-fb-head { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); } }
.sa-fb-summary {
  display: flex; gap: 20px; align-items: center; padding: 20px 22px; border-radius: 18px;
  background: linear-gradient(180deg, #1a1520, #151119); border: 1px solid rgba(255, 255, 255, .08);
}
.sa-fb-score { display: grid; justify-items: center; flex: none; min-width: 88px; }
.sa-fb-score b { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.sa-fb-score span { margin-top: 4px; font-size: 12.5px; color: var(--ov-meta); }
.sa-fb-summary-copy { display: grid; gap: 4px; min-width: 0; }
.sa-fb-stars { display: flex; gap: 2px; }
.sa-fb-stars svg { width: 18px; height: 18px; color: rgba(255, 255, 255, .2); }
.sa-fb-stars svg.is-on { color: #f5b544; }
.sa-fb-total { font-weight: 700; color: var(--ov-text, #f6f4f8); font-size: 15px; }
.sa-fb-note { color: var(--ov-meta); font-size: 13.5px; line-height: 1.5; }
html body .sa-page-feedback-actions { display: flex; gap: 8px; margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
html body .sa-page-feedback-actions::-webkit-scrollbar { display: none; }
html body .sa-page-feedback-link {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--ov-control-edge); color: var(--ov-chip-text); font-size: 14px; font-weight: 600; white-space: nowrap;
}
html body .sa-page-feedback-link:hover { border-color: #d36be3; color: #fff; }
html body .sa-page-feedback-link.is-active { background: var(--ov-grad); border-color: transparent; color: #fff; }
.sa-fb-section-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 18px; font-weight: 800; color: var(--ov-text, #f6f4f8); }
.sa-fb-section-title span { font-size: 13px; font-weight: 500; color: var(--ov-meta); }
.sa-fb-written { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 28px; }
html body .sa-fb-written .sa-feedback-card { min-height: 0 !important; }
/* Stars use the same amber everywhere (cards were orange, home was gold). */
html body .sa-feedback-card .text-warning { color: #f5b544 !important; }
.sa-fb-auto-group { border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); }
.sa-fb-auto-group summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 14px 20px; border-radius: 18px;
}
.sa-fb-auto-group summary::-webkit-details-marker { display: none; }
.sa-fb-auto-group summary:focus-visible { outline: 2px solid #d36be3; outline-offset: 2px; }
.sa-fb-auto-head { display: grid; gap: 2px; }
.sa-fb-auto-head b { color: var(--ov-text, #f6f4f8); font-size: 15px; }
.sa-fb-auto-head small { color: var(--ov-meta); font-size: 13px; }
.sa-fb-auto-chev { flex: none; color: var(--ov-meta); transition: transform .2s; }
.sa-fb-auto-group[open] .sa-fb-auto-chev { transform: rotate(180deg); }
.sa-fb-auto-list { display: grid; padding: 0 20px 12px; }
.sa-fb-auto-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  min-height: 44px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 14px;
}
.sa-fb-auto-stars { display: inline-flex; gap: 1px; font-size: 13px; letter-spacing: 0; }
.sa-fb-auto-stars i { font-style: normal; color: rgba(255, 255, 255, .2); }
.sa-fb-auto-stars i.is-on { color: #f5b544; }
.sa-fb-auto-product { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #d6d1dc; }
.sa-fb-auto-list time { color: var(--ov-meta); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .sa-fb-summary { padding: 16px; gap: 14px; }
  .sa-fb-score b { font-size: 36px; }
  .sa-fb-auto-list { padding: 0 16px 10px; }
  .sa-fb-auto-list li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; }
  .sa-fb-auto-stars { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Phones and tablets
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Product: the glass buy box (backdrop-filter) and its reveal transform made it the containing
     block of the fixed buy bar, so the bar sat inside the page instead of on the screen. */
  html body .sa-page-product .sa-product-buybox { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; }
  /* Product content runs to the same 16px gutter as the breadcrumb (was nested 36px). */
  html body .sa-page-product .wrap { width: 100% !important; }
  /* A shorter banner, so the durations and price reach the first screen. */
  html body .sa-page-product .sa-product-gallery--single { aspect-ratio: 2.4 / 1 !important; height: auto !important; object-fit: cover !important; }
  /* Header: no stray divider where the cart button is hidden, and the menu button gets the same box. */
  body:not(.sa-tpl-product):not(.sa-tpl-cart) .sa-header .sa-navbar-account { border-left-width: 0 !important; }
  html body .sa-header button[aria-label="Menu"] {
    width: 44px !important; height: 44px !important; padding: 0 !important; display: grid !important; place-items: center;
    border: 1px solid rgb(84, 69, 84) !important; border-radius: 12px !important;
  }
  /* Status filters scroll sideways: a fade on the right edge shows there is more. */
  html body .st-games {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

.sa-cart-qty-note { color: var(--ov-meta); font-size: 13px; }
/* Home bento: with the radar hidden on phones, the status list takes the full card (names were cut to "R"). */
@media (max-width: 1023px) { html body .hm-art-status { grid-template-columns: minmax(0, 1fr) !important; } }
.hub-note-chips { margin: 4px 0; }

/* ==========================================================================
   Round 6: council round-4 fixes
   ========================================================================== */

/* One eyebrow: the hub pages' dot labels become the same gradient-edged pill as the storefront.
   They keep their own dot element (gd-dot / live status), so no ::before here. */
html body .gd-kicker,
html body .sa-updates-page .sa-docs-kicker {
  display: inline-flex !important; align-items: center; gap: 8px; height: 30px; padding: 0 13px !important;
  border: 1px solid transparent !important; border-radius: 999px !important;
  background:
    linear-gradient(var(--ov-ink), var(--ov-ink)) padding-box,
    linear-gradient(90deg, rgba(255, 111, 210, .55), rgba(163, 116, 255, .55)) border-box !important;
  color: #f1d9ff !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: .02em !important;
}

/* One active-filter chip: FAQ topics, reviews sort, status games, updates games. */
html body .hm-faq-topics button,
html body .st-games button,
html body .hub-game-filters button {
  min-height: 40px !important; border: 1px solid var(--ov-control-edge) !important; color: var(--ov-chip-text) !important; background: transparent !important;
}
html body .hm-faq-topics button[aria-pressed="true"],
html body .st-games button.is-active,
html body .hub-game-filters button.is-active,
html body .sa-page-feedback-link.is-active {
  background: rgba(201, 52, 159, .18) !important; border-color: #d36be3 !important; color: #fff !important; box-shadow: none !important;
}
html body :is(.st-games, .hub-game-filters) button small,
html body .st-games button span { font-size: 12px !important; color: #c9c3d1 !important; }

/* Small text floor: 12px for labels and badges. */
html body .sa-variant-save { font-size: 12px !important; }
html body .sa-updates-page .hub-provider { font-size: 12px !important; color: var(--ov-chip-text) !important; }
html body .sa-updates-page .hub-update-main h4 { font-size: 12.5px !important; font-weight: 600 !important; color: var(--ov-meta) !important; letter-spacing: .02em; margin-top: 10px !important; }
html body .sa-fb-section-title span { font-size: 13px; }

/* Control outlines at 3:1+: ticket and download fields, price filters, outlined buttons. */
html body :is(.sa-tk-input, .gd-input, .sa-page-products input[type="number"], .sa-page-products input[type="text"]) { border-color: var(--ov-control-edge) !important; }
html body :is(.hm-btn-ghost, .sa-add-to-cart, .gd-btn.is-muted, .dl-btn.is-muted, .hm-discord-btn) { border-color: var(--ov-control-edge) !important; }

/* Product: sales badges hide while the product is not working. */
html body .sa-page-product:has(.sa-product-status-chip:not([data-tone="ok"])) .sa-chip.is-sales { display: none !important; }
/* Phone buy bar: the error and the updating note sit right above the button. */
.sa-buybar-error { flex-basis: 100%; margin: 0 0 6px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.sa-buybar-error { color: #fca5a5; }
html body .sa-buybar { flex-wrap: wrap; }

/* Catalog: games with no working product are moved to the end of the grid in the DOM (assets/custom.js,
   sinkUnavailableGames), so reading and tab order match what is shown. */

/* Home sections share the storefront's 1184px content edge (they were 1200px, 8px wider each side). */
html body .hm-wrap { width: min(1184px, 100% - 40px) !important; }

/* Updates: loading skeleton instead of a spinner line. */
html body .sa-updates-page .hub-loading { display: grid; justify-content: stretch !important; width: 100%; gap: 12px; padding: 0 !important; background: none !important; border: 0 !important; }
.hub-skel {
  display: block; width: 100%; height: 148px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  background-size: 200% 100%; animation: ov-skel 1.4s ease-in-out infinite;
}

/* Keyboard hint only on devices with a keyboard and pointer. */
@media (hover: none) { .hm-kbd-hint { display: none; } html body .hm-search kbd { display: none; } }

@media (max-width: 1023px) {
  /* Status rows: Updates becomes a 40px icon button so rows stay one line. */
  html body .st-row-updates { width: 40px; min-height: 40px !important; padding: 0 !important; justify-content: center; }
  html body .st-row-updates span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Updates header: the status link aligns left with everything else. */
  html body .sa-updates-page .hub-updates-header { align-items: flex-start !important; text-align: left !important; }
  html body .sa-updates-page .hub-status-link { align-self: flex-start !important; margin-inline: 0 !important; }
  /* Chip rows that scroll: fade the right edge. */
  html body :is(.hm-faq-topics, .hub-game-filters, .sa-page-feedback-actions) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
}

/* ==========================================================================
   Round 7: council round-5 fixes
   ========================================================================== */

/* Hub pages sit on the same plum page colour as the storefront (the updates hub painted its own grey). */
html body .sa-docs-hub { background: transparent !important; }

/* Docs sub-tabs: 14px labels and 44px tap height. */
html body .hub-navigation a { font-size: 14px !important; min-height: 44px; display: inline-flex !important; align-items: center; }

/* Updates game filters: same pill as the status page and FAQ topics. */
html body .sa-updates-page .hub-game-filters button { border-radius: 999px !important; padding: 0 14px !important; font-size: 13px !important; font-weight: 500 !important; }

/* Reviews: written cards fill the row instead of leaving an empty fourth column. */
html body .sa-fb-written { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; align-items: start; gap: 16px !important; }

/* Pagination: current page is the selected pill; keyboard focus is visible; dead Prev/Next are placeholders. */
html body .sa-pagination a:focus-visible { outline: 2px solid #d36be3 !important; outline-offset: 2px; position: relative; z-index: 2; }
html body .sa-pagination .sa-page-current { background: rgba(201, 52, 159, .18) !important; border-color: #d36be3 !important; color: #fff !important; }
html body .sa-pagination .sa-page-disabled { visibility: hidden; }

/* White on the pink accent was 3.4:1; the deeper accent is 4.7:1. */
html body .sa-nav-cart-count { background: #c934a0 !important; color: #fff !important; }

/* Announcement marquee pauses while pointed at or focused (WCAG 2.2.2). */
html body .sa-announcement:is(:hover, :focus-within) .animate-announcement-scroll { animation-play-state: paused !important; }

/* Phone buy bar: the updating state rides in the label, one compact bar. */
html body .sa-buybar.is-updating .sa-buybar-total > span { color: #f5c772 !important; }
.sa-status-notice-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
html body .sa-status-notice .sa-status-notice-links a { margin-top: 0; }

@media (max-width: 767px) {
  /* Status rows: name, status and the history button stay on one line. */
  html body .st-row { grid-template-columns: minmax(0, 1fr) auto auto !important; gap: 8px !important; }
}

/* Products, desktop: the filter card starts level with the first row of cards, not with the results bar. */
@media (min-width: 1024px) {
  html body .sa-page-products-layout > aside { margin-top: 69px; }
}

/* ==========================================================================
   Round 8: council round-6 fixes
   ========================================================================== */

/* Product notice: the two links are separate targets (the generic notice span rule made them one block). */
html body .sa-status-notice .sa-status-notice-links { display: flex !important; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }
html body .sa-status-notice .sa-status-notice-links a { display: inline-flex; align-items: center; min-height: 28px; margin: 0; }

/* Announcement bar: a calm static row instead of an endless marquee (WCAG 2.2.2); the loop copy is not shown. */
html body .sa-announcement .animate-announcement-scroll { animation: none !important; transform: none !important; }
html body .sa-announcement .animate-announcement-scroll[aria-hidden="true"] { display: none !important; }

/* Updates: a resolved incident gets the green edge (amber means "updating" everywhere else). */
html body .sa-updates-page .hub-update-entry.is-incident.is-resolved { --hub-edge: #45d58a; }

/* Paragraphs avoid one-word last lines where the browser supports it. */
html body :is(p, .hm-card-text p, .sa-status-notice span) { text-wrap: pretty; }

/* Footer links: at least 24px tall targets (WCAG 2.5.8). */
html body footer a { display: inline-flex; align-items: center; min-height: 28px; }

@media (max-width: 1023px) {
  /* Focus never ends up under the bottom dock or the phone buy bar (WCAG 2.4.11). */
  html { scroll-padding-top: 96px; scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (max-width: 767px) {
  /* Status: the game chips scroll inside the screen, so every game can be reached and the fade shows. */
  html body .st-toolbar { min-width: 0; max-width: 100%; }
  html body .st-games { min-width: 0; max-width: calc(100% + 32px); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  /* Status rows: the whole row is the link; the chevron after the name only caused lone-arrow lines. */
  html body .st-row-text strong::after { display: none !important; }
}