@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Variable.e468bc8b4317.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #080b11;
  --bg-soft: #0b1018;
  --surface: #111720;
  --surface-2: #171f2b;
  --surface-3: #202a38;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f5f7fb;
  --muted: #a6b0c0;
  --muted-2: #788496;
  --accent: #d9f96f;
  --accent-strong: #c4ee45;
  --accent-ink: #131a08;
  --cloud: #82d9ff;
  --amber: #ffc66d;
  --danger: #ff7f8e;
  --success: #71e5a3;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  --page-gutter: clamp(20px, 2vw, 40px);
  font-family: "Montserrat", Arial, sans-serif;
  font-synthesis: none;
}

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

html {
  min-width: 320px;
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -10%, rgba(122, 95, 255, 0.13), transparent 30rem),
    var(--bg);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: 0.16;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
summary,
select {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p,
dl,
dd {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--text);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

h1 {
  margin-bottom: 24px;
  font-size: clamp(2.7rem, 6.1vw, 6.2rem);
  font-weight: 760;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(2rem, 3.3vw, 3.6rem);
  font-weight: 720;
}

h3 {
  margin-bottom: 12px;
  font-size: 1.3rem;
}

h4 {
  margin-bottom: 8px;
  font-size: 0.83rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

em {
  color: var(--accent);
  font-style: normal;
}

::selection {
  color: var(--accent-ink);
  background: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--cloud);
  outline-offset: 3px;
}

.shell {
  width: 100%;
  max-width: none;
  padding-inline: var(--page-gutter);
  margin-inline: auto;
}

.narrow-shell {
  max-width: 790px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 8px;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.eyebrow {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 17px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 26px;
  height: 1px;
  background: currentColor;
}

.section {
  padding: 104px 0;
}

.section-heading {
  display: flex;
  gap: 32px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 44px;
}

.section-heading > div {
  max-width: 760px;
}

.section-heading h2,
.section-heading p:last-child {
  margin-bottom: 0;
}

.section-heading p:last-child,
.hero-lead,
.page-hero p,
.seo-copy p,
.prose,
.content-section > p {
  color: var(--muted);
}

.centered-heading {
  justify-content: center;
  text-align: center;
}

.centered-heading .eyebrow {
  justify-content: center;
}

.button {
  display: inline-flex;
  min-height: 48px;
  padding: 12px 20px;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.button:hover {
  color: inherit;
  transform: translateY(-2px);
}

.button-primary {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 10px 32px rgba(202, 239, 77, 0.13);
}

.button-primary:hover {
  color: var(--accent-ink);
  background: var(--accent-strong);
}

.button-cloud {
  color: #06121a;
  background: var(--cloud);
}

.button-cloud:hover {
  color: #06121a;
  background: #b0e9ff;
}

.button-ghost {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255,255,255,.025);
}

.button-ghost:hover {
  border-color: var(--accent);
  background: rgba(217,249,111,.06);
}

.button-disabled,
.button:disabled {
  color: var(--muted-2);
  border-color: var(--line);
  background: #151b24;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.button-block {
  width: 100%;
}

.button-large {
  min-height: 58px;
  padding: 16px 24px;
}

.text-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--text);
  font-weight: 700;
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 11, 17, 0.86);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: flex;
  min-height: 82px;
  gap: 18px;
  align-items: center;
}

.brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  flex: 0 0 auto;
}

.brand:hover {
  color: var(--text);
}

.brand-mark {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-copy strong {
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}

.brand-copy small {
  margin-top: 5px;
  color: var(--muted-2);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.desktop-nav {
  display: flex;
  margin-left: auto;
  gap: 8px;
  align-items: center;
}

.desktop-nav a {
  padding: 10px 14px;
  color: var(--muted);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 650;
}

.header-search-trigger {
  display: grid;
  width: clamp(190px, 16vw, 280px);
  min-width: 44px;
  height: 44px;
  padding: 0 10px 0 12px;
  gap: 10px;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  font: inherit;
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.header-search-trigger:hover,
.header-search-trigger:focus-visible {
  color: var(--text);
  border-color: rgba(130,217,255,.55);
  background: rgba(255,255,255,.05);
}

.header-search-trigger kbd {
  padding: 2px 7px;
  color: var(--muted-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  font-family: inherit;
  font-size: .68rem;
  font-weight: 700;
}

.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] {
  color: var(--text);
  background: rgba(255,255,255,.055);
}

.desktop-nav a.nav-accent {
  color: var(--success);
}

.cart-link {
  display: flex;
  min-height: 42px;
  padding: 8px 9px 8px 14px;
  gap: 10px;
  align-items: center;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 720;
}

.cart-count {
  display: grid;
  min-width: 25px;
  height: 25px;
  padding: 0 5px;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 8px;
  font-size: 0.74rem;
}

.mobile-nav {
  display: none;
  margin-left: auto;
}

.mobile-nav summary {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 12px;
  gap: 5px;
  align-content: center;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.mobile-nav summary::-webkit-details-marker {
  display: none;
}

.mobile-nav summary span {
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

.mobile-nav nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  left: 16px;
  display: grid;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #111720;
  box-shadow: var(--shadow);
}

.mobile-nav nav a {
  display: flex;
  padding: 13px;
  justify-content: space-between;
  border-radius: 9px;
  font-size: 1rem;
}

.mobile-nav-search {
  display: grid;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  margin-bottom: 8px;
  gap: 12px;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

.mobile-nav-search:hover {
  background: rgba(255,255,255,.06);
}

.mobile-nav nav a:hover {
  background: rgba(255,255,255,.05);
}

/* Плашка о cookie. */
.cookie-notice {
  position: fixed;
  z-index: 320;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 14px var(--page-gutter);
  /* Отступ снизу учитывает «шторку» iPhone; браузеры без env() берут строку выше. */
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-strong);
  background: rgba(17, 23, 32, .96);
  box-shadow: 0 -18px 46px rgba(0, 0, 0, .38);
  animation: cookie-notice-in 260ms ease-out both;
}

@supports (backdrop-filter: blur(14px)) {
  .cookie-notice {
    background: rgba(17, 23, 32, .82);
    backdrop-filter: blur(14px);
  }
}

.cookie-notice[hidden] { display: none; }

.cookie-notice-inner {
  display: flex;
  width: min(1180px, 100%);
  margin: 0 auto;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cookie-notice p {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}

.cookie-notice a { color: var(--cloud); text-decoration: underline; text-underline-offset: 2px; }

.cookie-notice-accept {
  min-height: 42px;
  flex: none;
  padding: 9px 26px;
  font-size: .84rem;
}

@keyframes cookie-notice-in {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-notice { animation: none; }
}

.toast-stack {
  position: fixed;
  z-index: 300;
  right: var(--page-gutter);
  bottom: clamp(20px, 3vw, 36px);
  display: flex;
  width: min(380px, calc(100vw - var(--page-gutter) * 2));
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

/* Плашка о cookie занимает низ экрана — стопка тостов поднимается над ней. */
body.has-cookie-notice .toast-stack { bottom: calc(clamp(20px, 3vw, 36px) + 78px); }

@media (max-width: 700px) {
  .cookie-notice-accept { width: 100%; }
  body.has-cookie-notice .toast-stack { bottom: calc(clamp(20px, 3vw, 36px) + 132px); }
}

.toast {
  display: grid;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45);
  gap: 12px;
  grid-template-columns: 22px 1fr;
  pointer-events: auto;
}

.toast p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.4;
}

.toast-icon {
  display: grid;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text);
  font-size: 0.78rem;
  place-items: center;
}

.toast-icon::before { content: "i"; }
.toast-success { border-color: rgba(113, 229, 163, 0.45); }
.toast-success .toast-icon { background: rgba(113, 229, 163, 0.18); color: var(--success); }
.toast-success .toast-icon::before { content: "✓"; }
.toast-error { border-color: rgba(255, 127, 142, 0.5); }
.toast-error .toast-icon { background: rgba(255, 127, 142, 0.18); color: var(--danger); }
.toast-error .toast-icon::before { content: "!"; }
.toast-warning { border-color: rgba(255, 198, 109, 0.5); }
.toast-warning .toast-icon { background: rgba(255, 198, 109, 0.18); color: var(--amber); }
.toast-warning .toast-icon::before { content: "!"; }

/* The close button only exists once the script upgrades the toast, so a
   no-JS visitor is never left with a control that cannot dismiss anything. */
.toast-has-close { grid-template-columns: 22px 1fr 26px; }

.toast-close {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
}

.toast-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }

.toast-enter { animation: toast-in 0.22s ease-out both; }
.toast-leave { animation: toast-out 0.22s ease-in both; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  .toast-enter,
  .toast-leave { animation: none; }
}

.home-hero {
  position: relative;
  min-height: 690px;
  padding: 108px 0 88px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-glow,
.topup-glow,
.not-found-glow {
  position: absolute;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  background: rgba(115, 87, 255, 0.2);
  filter: blur(120px);
  pointer-events: none;
}

.hero-glow {
  top: -240px;
  right: -100px;
}

/* The grid sits above the drift wall and spans the whole hero, yet only its
   first column holds anything.  Left hit-testable, the empty second column
   swallows the pointer over every row of cover art except the ones peeking
   out above and below it, so only the copy itself takes pointer events. */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: center;
  pointer-events: none;
}

.hero-copy { pointer-events: auto; }

.hero-copy h1 {
  max-width: 830px;
}

.hero-lead {
  max-width: 680px;
  margin-bottom: 30px;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
}

.hero-search {
  position: relative;
  display: grid;
  max-width: 680px;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(19, 26, 36, .88);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}

.hero-search:focus-within {
  border-color: var(--cloud);
  box-shadow: 0 0 0 3px rgba(130,217,255,.12);
}

.hero-search input {
  width: 100%;
  min-width: 0;
  height: 48px;
  color: var(--text);
  border: 0;
  outline: 0;
  background: transparent;
}

.hero-search input::placeholder {
  color: var(--muted-2);
}

.hero-search button {
  min-height: 47px;
  padding: 0 20px;
  color: var(--accent-ink);
  border: 0;
  border-radius: 9px;
  background: var(--accent);
  font-weight: 760;
}

.search-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid var(--muted);
  border-radius: 50%;
}

.search-icon::after {
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  content: "";
  background: var(--muted);
  transform: rotate(45deg);
}

/* Tied to the dialog's own state: a stale class would leave the page locked
   if a close event ever went missing. */
body:has(.search-overlay[open]) {
  overflow: hidden;
}

.search-overlay {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  color: var(--text);
  border: 0;
  background: rgba(6, 9, 14, .96);
}

.search-overlay[open] {
  display: block;
}

.search-overlay::backdrop {
  background: rgba(4, 6, 10, .88);
  backdrop-filter: blur(14px);
}

.search-overlay-inner {
  display: grid;
  width: min(760px, calc(100% - var(--page-gutter) * 2));
  max-height: 100dvh;
  padding: clamp(48px, 9vh, 120px) 0 40px;
  margin: 0 auto;
  gap: 16px;
  align-content: start;
}

.search-overlay-head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.search-overlay-close {
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.03);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.search-overlay-close:hover {
  color: var(--text);
  background: rgba(255,255,255,.07);
}

.search-overlay-form {
  display: grid;
  padding: 7px;
  gap: 8px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
}

.search-overlay-form:focus-within {
  border-color: var(--cloud);
  box-shadow: 0 0 0 3px rgba(130,217,255,.12);
}

.search-overlay-form input {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0;
  color: var(--text);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1.05rem;
}

.search-overlay-form input::placeholder { color: var(--muted-2); }

.search-overlay-hint {
  margin: 0;
  color: var(--muted-2);
  font-size: .78rem;
}

.search-suggest {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  max-height: min(60vh, 420px);
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.search-suggest[hidden] {
  display: none;
}

.search-suggest-static {
  position: static;
  max-height: min(58dvh, 520px);
}

.search-suggest-item {
  display: grid;
  padding: 8px;
  gap: 12px;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  border-radius: 10px;
  color: var(--text);
}

.search-suggest-item.search-suggest-all {
  grid-template-columns: minmax(0, 1fr);
  min-height: 44px;
  align-content: center;
  color: var(--cloud);
  border-top: 1px solid var(--line);
  border-radius: 0 0 9px 9px;
  font-size: .84rem;
  font-weight: 700;
}

.search-suggest-item.is-active,
.search-suggest-item:hover {
  background: rgba(255,255,255,.06);
}

.search-suggest-thumb {
  display: block;
  height: 38px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--surface-2);
}

.search-suggest-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-suggest-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.search-suggest-name {
  overflow: hidden;
  font-size: .9rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest-meta {
  color: var(--muted-2);
  font-size: .72rem;
}

.search-suggest-empty {
  padding: 14px;
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
}

/* The band sits on the hero's bottom border, so without the top padding the
   search field lands right on the seam and reads as part of the hero. */
.catalog-search-band {
  padding: 34px 0 6px;
}

.catalog-search-row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.catalog-search {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px;
  gap: 8px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}

.catalog-search:focus-within {
  border-color: var(--cloud);
  box-shadow: 0 0 0 3px rgba(130,217,255,.12);
}

.catalog-search input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0;
  color: var(--text);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: .95rem;
}

.catalog-search input::placeholder { color: var(--muted-2); }

.catalog-search .search-icon {
  margin: auto;
}

.catalog-shuffle {
  flex: 0 0 auto;
  min-height: 62px;
}

.hero-actions {
  display: flex;
  margin-top: 24px;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

/* Drift wall — columns of cover art sliding in alternating directions behind a
   tilted 3D plane.  Geometry lives in these custom properties so the markup
   stays a single empty element that site.js fills in. */
.drift-wall {
  --dw-tile-w: 208px;
  --dw-tile-h: 98px;
  --dw-gap: 16px;
  --dw-radius: 12px;
  --dw-perspective: 1200px;
  --dw-lift: 56px;
  --dw-dim: .55;
  --dw-shade: .42;
  --dw-overlay: #080b11;
  --dw-edge: 40%;
  --dw-origin-x: 50%;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: var(--dw-perspective);
  perspective-origin: var(--dw-origin-x) 50%;
  -webkit-mask-image:
    radial-gradient(ellipse 78% 82% at var(--dw-origin-x) 46%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 78% 82% at var(--dw-origin-x) 46%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  mask-composite: intersect;
}

/* In the hero the wall is the backdrop of the whole section: the plane is
   pushed to the right so the cover art gathers next to the copy, and the mask
   dissolves it well before it reaches the headline. */
.hero-wall {
  --dw-origin-x: 74%;
  --dw-dim: .42;
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-mask-image:
    linear-gradient(to right, transparent 28%, rgba(0,0,0,.34) 50%, #000 74%),
    radial-gradient(ellipse 66% 96% at 74% 48%, #000 40%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 66%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 28%, rgba(0,0,0,.34) 50%, #000 74%),
    radial-gradient(ellipse 66% 96% at 74% 48%, #000 40%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 66%, transparent 97%);
  mask-composite: intersect;
}

.drift-wall__plane {
  position: absolute;
  top: 50%;
  left: var(--dw-origin-x);
  display: flex;
  flex-direction: row;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

.drift-wall__col {
  position: relative;
  width: calc(var(--dw-tile-w) + var(--dw-gap));
  transform-style: preserve-3d;
}

.drift-wall__track {
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  will-change: transform;
}

.drift-wall__tile {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--dw-tile-h) + var(--dw-gap));
  flex: 0 0 auto;
  transform-style: preserve-3d;
}

.drift-wall__inner {
  position: absolute;
  inset: calc(var(--dw-gap) / 2);
  display: block;
  overflow: hidden;
  border-radius: var(--dw-radius);
  background: #0b0f16;
  opacity: var(--dw-dim);
  pointer-events: none;
  transform: translateZ(0);
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    opacity .42s cubic-bezier(.22, 1, .36, 1),
    box-shadow .42s cubic-bezier(.22, 1, .36, 1);
}

.drift-wall__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92);
  transition: filter .42s cubic-bezier(.22, 1, .36, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.drift-wall__overlay {
  position: absolute;
  inset: 0;
  background: var(--dw-overlay);
  opacity: var(--dw-shade);
  transition: opacity .42s cubic-bezier(.22, 1, .36, 1);
}

.drift-wall__tile.is-active .drift-wall__inner {
  opacity: 1;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.7);
  transform: translateZ(var(--dw-lift));
}

.drift-wall__tile.is-active img { filter: saturate(1.05); }
.drift-wall__tile.is-active .drift-wall__overlay { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .drift-wall__plane,
  .drift-wall__track { will-change: auto; }
  .drift-wall__inner,
  .drift-wall__tile img,
  .drift-wall__overlay { transition: none; }
}

.trust-strip {
  border-bottom: 1px solid var(--line);
  background: #0b1017;
}

.trust-block {
  padding-top: 62px;
  padding-bottom: 62px;
}

.trust-title {
  max-width: 720px;
  margin-bottom: 34px;
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  font-weight: 720;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(17,23,32,.55);
}

.trust-grid p {
  display: grid;
  min-height: 116px;
  margin: 0;
  padding: 22px 24px;
  gap: 0 14px;
  grid-template-columns: 30px 1fr;
  /* Top-aligned so the four titles line up even when a description wraps to a
     different number of lines. */
  align-content: start;
  border-right: 1px solid var(--line);
}

.trust-grid p:last-child { border-right: 0; }
.trust-icon { grid-row: 1 / 3; color: var(--accent); font-size: 1.3rem; line-height: 1.2; }
.trust-grid strong { margin-bottom: 4px; font-size: .92rem; }
.trust-grid small { color: var(--muted-2); font-size: .76rem; line-height: 1.5; }

.section-games {
  background: linear-gradient(to bottom, #0a0e15, var(--bg));
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.game-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.game-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 24px 50px rgba(0,0,0,.25);
  transform: translateY(-5px);
}

.game-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 460 / 215;
  background: var(--surface-2);
}

.game-card-media img,
.image-placeholder {
  width: 100%;
  height: 100%;
}

.game-card-media img {
  transition: transform 500ms ease;
}

.game-card:hover .game-card-media img {
  transform: scale(1.045);
}

.image-placeholder {
  display: grid;
  place-items: center;
  color: var(--accent);
  background: radial-gradient(circle at 40% 30%, #283445, #111720 64%);
  font-size: 3rem;
  font-weight: 800;
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,11,17,.58), transparent 55%);
}

.card-arrow {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--accent-ink);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.game-card:hover .card-arrow {
  opacity: 1;
  transform: none;
}

.card-discount {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 9px;
  color: #12220f;
  border-radius: 7px;
  background: var(--success);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.game-card-body {
  padding: 19px;
}

.card-kickers {
  display: flex;
  min-height: 25px;
  margin-bottom: 10px;
  gap: 6px;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  min-height: 23px;
  padding: 3px 8px;
  align-items: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  font-size: .64rem;
  font-weight: 760;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.pill-green,
.pill-stock {
  color: var(--success);
  border-color: rgba(113,229,163,.25);
  background: rgba(113,229,163,.07);
}

.pill-popular {
  color: #ffd79a;
  border-color: rgba(255,174,63,.32);
  background: rgba(255,174,63,.1);
}

.game-card h3 {
  margin-bottom: 10px;
  font-size: 1.11rem;
}

.game-card h3 a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.game-card-body > p {
  min-height: 66px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}

.game-card-footer {
  display: flex;
  padding-top: 14px;
  justify-content: space-between;
  color: var(--muted-2);
  border-top: 1px solid var(--line);
  font-size: .76rem;
}

.game-card-footer strong {
  color: var(--accent);
  font-size: .88rem;
}

.card-price-sale {
  display: inline-flex;
  gap: 7px;
  align-items: baseline;
}

.card-price-sale s {
  color: var(--muted-2);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.step-card {
  position: relative;
  min-height: 360px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.step-card-accent {
  border-color: rgba(217,249,111,.24);
  background: linear-gradient(145deg, rgba(217,249,111,.08), var(--surface) 45%);
}

.step-number {
  position: absolute;
  top: 22px;
  right: 25px;
  color: rgba(255,255,255,.08);
  font-size: 3.2rem;
  font-weight: 850;
  letter-spacing: -.08em;
}

.step-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 70px;
  place-items: center;
  color: var(--accent-ink);
  border-radius: 15px;
  background: var(--accent);
  font-size: 1.4rem;
}

.step-card p {
  color: var(--muted);
  font-size: .9rem;
}

.step-card h4 {
  margin-top: 24px;
  color: var(--muted);
}

.seo-copy-section {
  border-top: 1px solid var(--line);
  background: #0b1017;
}

.seo-copy-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
}

.seo-copy p {
  margin-bottom: 18px;
}

.page-hero {
  position: relative;
  padding: 78px 0 62px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(117,90,255,.1), transparent 38%), #0b1017;
}

.page-hero h1 {
  max-width: 900px;
  margin-bottom: 16px;
  font-size: clamp(2.7rem, 5vw, 5.2rem);
}

.page-hero > .shell > p:last-child,
.catalog-title-row > div > p:last-child,
.topup-hero-grid > div > p {
  max-width: 740px;
  margin-bottom: 0;
  color: var(--muted);
}

.compact-page-hero {
  padding-top: 56px;
  padding-bottom: 42px;
}

.compact-page-hero h1 {
  font-size: clamp(2.5rem, 4vw, 4.2rem);
}

.breadcrumbs {
  display: flex;
  margin-bottom: 40px;
  gap: 9px;
  align-items: center;
  color: var(--muted-2);
  font-size: .75rem;
  flex-wrap: wrap;
}

.breadcrumbs a:hover {
  color: var(--text);
}

.catalog-title-row {
  display: flex;
  gap: 32px;
  align-items: end;
  justify-content: space-between;
}

/* The 900px hero cap dropped «Steam» onto a second line and made this hero
   taller than the Игры и Скидки landings; the flex row already bounds the
   heading, and balance keeps the split even when it does have to wrap. */
.catalog-title-row h1 {
  max-width: none;
  text-wrap: balance;
}

.result-count {
  display: flex;
  margin: 0 0 10px;
  flex-direction: column;
  text-align: right;
}

.result-count strong {
  color: var(--accent);
  font-size: 2.25rem;
  line-height: 1;
}

.result-count span {
  color: var(--muted-2);
  font-size: .72rem;
}

.catalog-section {
  padding: 56px 0 110px;
}

.catalog-layout {
  display: grid;
  /* Wide enough for the longest option label ("Массовый мультиплеер") to stay
     readable next to the dropdown arrow instead of running under it. */
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.catalog-results {
  width: 100%;
  min-width: 0;
}

.filter-panel {
  position: sticky;
  top: 102px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.filter-heading {
  display: flex;
  margin-bottom: 24px;
  align-items: center;
  justify-content: space-between;
}

.filter-heading h2 {
  margin: 0;
  font-size: 1.2rem;
}

.filter-heading a,
.mobile-filter-actions a {
  color: var(--muted);
  font-size: .73rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filter-panel fieldset {
  padding: 18px 0 16px;
  margin: 0 0 20px;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.filter-panel legend,
.field-group > label,
.mobile-filter-bar form > label,
.form-field > label,
.purchase-form > label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 740;
}

.field-group {
  margin-bottom: 20px;
}

/* The ``:not`` guards keep this text-field sizing away from the checkboxes
   that live in the same panels: a checkbox inheriting ``min-height: 46px``
   stretched into a 17x46 sliver and pushed its label out of line. */
.field-group select,
.filter-panel input:not([type="checkbox"]),
.filter-panel select,
.mobile-filter-bar input:not([type="checkbox"]),
.mobile-filter-bar select,
.form-field input,
.purchase-form input[type="number"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  outline: 0;
  background: #0b1017;
}

/* Native select chrome varies per platform and its arrow overlaps the label on
   a narrow control, so the panels draw their own chevron in reserved space. */
.filter-panel select,
.mobile-filter-bar select {
  padding-right: 34px;
  text-overflow: ellipsis;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a6b0c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px 8px;
}

/* The sidebar controls inherit the 18px body size, which is a size and a half
   above their own labels and leaves no room for an option name. The mobile
   sheet is full width and keeps the larger text, which iOS Safari needs to not
   zoom the page when a control takes focus. */
.filter-panel select {
  font-size: .82rem;
}

.filter-hint {
  margin: 0;
  color: var(--muted-2);
  font-size: .72rem;
}

.input-with-icon {
  position: relative;
}

.input-with-icon .search-icon {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 14px;
}

.input-with-icon input {
  padding-left: 42px;
}

.check-row {
  display: flex;
  min-height: 35px;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
  font-size: .82rem;
}

.check-row input {
  flex: none;
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  margin: 3px 0 0;
  accent-color: var(--accent-strong);
}

/* Filter checkboxes are single-line switches rather than the multi-line
   consent rows the base style is built for, so they centre on their label and
   gain the hit area and hover feedback of a list of clickable options. */
.filter-panel .check-row,
.mobile-checks .check-row {
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  align-items: center;
  line-height: 1.35;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}

.filter-panel .check-row:hover,
.mobile-checks .check-row:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .045);
}

.filter-panel .check-row input,
.mobile-checks .check-row input {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.topup-quick-form input[type="text"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  outline: 0;
  background: #0b1017;
}

.topup-quick-form input[type="text"]:focus {
  border-color: var(--accent-strong);
}

.topup-quick-consent {
  margin: 14px 0 16px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.orders-link .cart-count {
  background: var(--surface-3);
  color: var(--text);
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-row {
  display: grid;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  gap: 6px 18px;
  grid-template-columns: minmax(140px, auto) minmax(0, 1fr) auto auto;
  align-items: center;
}

.order-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.order-row-status {
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 740;
  text-transform: lowercase;
}

.order-row-completed .order-row-status { color: var(--success); }
.order-row-failed .order-row-status,
.order-row-cancelled .order-row-status { color: var(--danger); }

.order-row-id {
  color: var(--muted-2);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.order-row-kind {
  color: var(--muted);
  font-size: 0.82rem;
}

.order-row-total {
  font-size: 1.05rem;
  font-weight: 760;
}

.order-row-date {
  grid-column: 1 / -1;
  color: var(--muted-2);
  font-size: 0.74rem;
}

@media (max-width: 720px) {
  .order-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .order-row-id { grid-column: 1 / -1; }
}

.game-grid-catalog {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mobile-filter-bar {
  display: none;
}

.catalog-toolbar {
  display: grid;
  margin-bottom: 26px;
  gap: 14px;
}

.catalog-toolbar > * {
  min-width: 0;
}

.active-filter-bar,
.alphabet-shortcuts,
.genre-shortcuts {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(17, 23, 32, .72);
}

.active-filter-heading,
.alphabet-shortcuts-heading,
.genre-shortcuts-heading {
  display: flex;
  margin-bottom: 13px;
  gap: 20px;
  align-items: baseline;
  justify-content: space-between;
}

.active-filter-heading h2,
.alphabet-shortcuts-heading h2,
.genre-shortcuts-heading h2 {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .02em;
}

.active-filter-heading a {
  color: var(--muted-2);
  font-size: .7rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.active-filter-list {
  display: flex;
  padding: 0;
  margin: 0;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
}

.active-filter-chip {
  display: inline-flex;
  min-height: 34px;
  padding: 6px 9px 6px 12px;
  gap: 9px;
  align-items: center;
  color: var(--text);
  border: 1px solid rgba(217, 249, 111, .24);
  border-radius: 999px;
  background: rgba(217, 249, 111, .075);
  font-size: .73rem;
  font-weight: 700;
}

.active-filter-chip > span:last-child {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--accent-ink);
  border-radius: 50%;
  background: var(--accent);
  font-size: .9rem;
  line-height: 1;
}

.active-filter-chip:hover {
  border-color: rgba(217, 249, 111, .5);
  background: rgba(217, 249, 111, .12);
}

.alphabet-shortcuts-heading > div:first-child {
  min-width: 0;
}

.alphabet-shortcuts-heading p,
.genre-shortcuts-heading p {
  margin: 0;
  color: var(--muted-2);
  font-size: .7rem;
}

.alphabet-shortcuts-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}

.alphabet-shortcuts-actions a {
  display: inline-flex;
  min-height: 40px;
  padding: 7px 13px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0b1017;
  font-size: .74rem;
  font-weight: 720;
  white-space: nowrap;
}

.alphabet-shortcuts-actions a:hover,
.alphabet-shortcuts-actions a.is-active {
  color: var(--accent);
  border-color: rgba(217, 249, 111, .38);
  background: rgba(217, 249, 111, .08);
}

.alphabet-shortcuts-actions .alphabet-random {
  color: var(--cloud);
  border-color: rgba(130, 217, 255, .24);
  background: rgba(130, 217, 255, .055);
}

.alphabet-shortcuts-actions .alphabet-random:hover {
  color: var(--text);
  border-color: rgba(130, 217, 255, .5);
  background: rgba(130, 217, 255, .1);
}

.alphabet-groups {
  display: grid;
  gap: 9px;
}

.alphabet-group {
  display: grid;
  grid-template-columns: minmax(68px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.alphabet-group > p {
  padding-top: 9px;
  margin: 0;
  color: var(--muted-2);
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.alphabet-list {
  display: flex;
  min-width: 0;
  padding: 0;
  margin: 0;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
}

.alphabet-list a {
  display: grid;
  min-width: 40px;
  min-height: 40px;
  padding: 6px 9px;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0b1017;
  font-size: .76rem;
  font-weight: 740;
  line-height: 1;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.alphabet-list a:hover {
  color: var(--accent);
  border-color: rgba(217, 249, 111, .38);
  background: rgba(217, 249, 111, .07);
  transform: translateY(-1px);
}

.alphabet-list a.is-active {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--accent);
  font-weight: 820;
}

.genre-shortcut-list {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.genre-shortcut-list a {
  display: inline-flex;
  min-height: 32px;
  padding: 6px 11px;
  align-items: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1017;
  font-size: .72rem;
  font-weight: 680;
}

.genre-shortcut-list a:hover,
.genre-shortcut-list a.is-active {
  color: var(--accent);
  border-color: rgba(217, 249, 111, .3);
  background: rgba(217, 249, 111, .07);
}

.active-filter-heading a:focus-visible,
.active-filter-chip:focus-visible,
.alphabet-shortcuts-actions a:focus-visible,
.alphabet-list a:focus-visible,
.genre-shortcut-list a:focus-visible {
  outline: 2px solid var(--cloud);
  outline-offset: 3px;
}

.pagination {
  display: flex;
  margin-top: 46px;
  gap: 18px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.pagination-main {
  display: flex;
  min-width: 0;
  max-width: 100%;
  gap: 9px;
  align-items: center;
}

.pagination-pages {
  display: flex;
  width: max-content;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  margin: 0;
  gap: 7px;
  align-items: center;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.pagination-pages > li {
  flex: 0 0 auto;
}

.page-link,
.page-current,
.page-ellipsis {
  display: grid;
  min-width: 46px;
  min-height: 46px;
  padding: 0 12px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 700;
}

.page-link {
  color: var(--text);
  background: rgba(255,255,255,.025);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.page-link:not(.is-disabled):hover {
  color: var(--accent);
  border-color: rgba(217, 249, 111, .46);
  background: rgba(217, 249, 111, .07);
  transform: translateY(-1px);
}

.page-direction {
  display: inline-flex;
  min-width: 108px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.page-current {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--accent);
  font-weight: 800;
}

.page-ellipsis {
  min-width: 28px;
  padding-inline: 4px;
  color: var(--muted);
  border-color: transparent;
}

.page-direction.is-disabled {
  color: var(--muted-2);
  opacity: .55;
}

.pagination-summary {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
}

.pagination-summary strong {
  color: var(--text);
}

.empty-state {
  padding: 70px 30px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255,255,255,.018);
  text-align: center;
}

.empty-state > span {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 2.4rem;
}

.empty-state p {
  max-width: 520px;
  margin: 0 auto 24px;
  color: var(--muted);
}

.game-detail-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(680px, 78vh, 920px);
  padding: 44px 0 72px;
  border-bottom: 1px solid var(--line);
  background: #0b1017;
}

.detail-backdrop,
.detail-backdrop-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.detail-backdrop-image {
  opacity: 1;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.01);
}

.detail-backdrop {
  background:
    linear-gradient(90deg, rgba(8,11,17,.72) 0%, rgba(8,11,17,.4) 42%, rgba(8,11,17,.08) 78%, rgba(8,11,17,.04) 100%),
    linear-gradient(to bottom, rgba(8,11,17,.06) 0%, transparent 58%, rgba(11,16,23,.88) 100%);
}

.game-detail-hero .shell {
  position: relative;
  z-index: 2;
}

.breadcrumbs-on-dark {
  margin-bottom: 30px;
}

.detail-heading {
  min-width: 0;
  max-width: min(100%, 1480px);
}

.detail-heading h1 {
  max-width: 100%;
  margin-bottom: 22px;
  font-size: clamp(3.2rem, 7vw, 8rem);
  line-height: .98;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
  text-shadow: 0 4px 34px rgba(0, 0, 0, .55);
  text-wrap: balance;
}

.detail-heading > p {
  max-width: 1180px;
  margin-bottom: 0;
  color: #d5dae3;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.55;
}

.detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: clamp(34px, 5vw, 76px);
  /* The purchase card is the hero's call to action, so it starts at the top of
     the row, level with the title. It also grows with its form, and bottom
     alignment used to push the much shorter facts column down by the whole
     height difference — up to ~450px of empty backdrop under the description. */
  align-items: start;
}

.detail-hero-main {
  min-width: 0;
}

.detail-facts-wrap {
  margin-top: clamp(44px, 6vw, 78px);
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 11, 17, .62);
  backdrop-filter: blur(16px);
}

.detail-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  gap: 16px;
}

.detail-facts div {
  min-width: 0;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}

.detail-facts div:last-child {
  padding-right: 0;
  border-right: 0;
}

.detail-facts dt,
.sidebar-card dt,
.order-summary dt,
.contact-list dt {
  color: var(--muted-2);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.detail-facts dd {
  margin: 6px 0 0;
  font-size: .88rem;
  overflow-wrap: anywhere;
}

.platform-list span + span::before {
  margin: 0 5px;
  color: var(--muted-2);
  content: "·";
}

.purchase-card,
.sidebar-card,
.order-summary,
.checkout-form-card,
.status-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(18,24,34,.94);
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}

.purchase-card {
  padding: 24px;
}

.purchase-card h2 {
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.purchase-card > p,
.affiliate-note {
  color: var(--muted);
  font-size: .78rem;
}

.availability {
  display: flex;
  margin-bottom: 12px !important;
  gap: 8px;
  align-items: center;
  color: var(--success) !important;
  font-size: .68rem !important;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.availability span,
.stock-note span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(113,229,163,.08);
}

.availability-muted {
  color: var(--muted-2) !important;
}

.purchase-price {
  display: flex;
  margin-bottom: 12px;
  gap: 12px;
  align-items: baseline;
}

.purchase-price strong {
  color: var(--accent);
  font-size: 2rem;
}

.purchase-price del,
.topup-price del {
  color: var(--muted-2);
  font-size: .8rem;
}

.purchase-form {
  margin: 18px 0 12px;
}

.purchase-form input[type="number"] {
  margin-bottom: 12px;
}

.purchase-note,
.affiliate-note {
  margin: 10px 0 0 !important;
  text-align: center;
}

.purchase-note span {
  color: var(--success);
}

.purchase-card .button-cloud {
  margin-top: 18px;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 72px;
  padding-top: 82px;
  padding-bottom: 100px;
  align-items: start;
}

.content-section {
  padding-bottom: 70px;
  margin-bottom: 70px;
  border-bottom: 1px solid var(--line);
}

.content-section:last-child {
  margin-bottom: 0;
}
/*
.content-section > h2 {
  max-width: 820px;
}
*/
.prose {
  /*max-width: 820px;*/
  font-size: 1.02rem;
}

.prose p {
  margin-bottom: 18px;
}

/* Живой перевод: описание догоняет страницу уже после загрузки, поэтому
   текст сменяется через затухание, а не подпрыгивает под курсором. */
[data-translation-field] {
  transition: opacity 0.22s ease;
}

.is-translation-swapping {
  opacity: 0.25;
}

.is-translation-swapped {
  animation: translation-swap-in 0.6s ease;
}

@keyframes translation-swap-in {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-translation-field] { transition: none; }
  .is-translation-swapped { animation: none; }
}

.requirements-grid,
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.requirements-grid article,
.info-grid article {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.requirements-level {
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.requirements-copy,
.requirements-grid p,
.info-list p {
  color: var(--muted);
  font-size: .82rem;
}

/* A long GPU line must scroll inside the table instead of widening the page. */
.requirements-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.requirements-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  text-align: left;
}

.requirements-table th,
.requirements-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.requirements-table tbody tr:last-child th,
.requirements-table tbody tr:last-child td {
  border-bottom: 0;
}

.requirements-table thead th {
  color: var(--accent);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.requirements-table tbody th {
  width: 1%;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.requirements-table td {
  color: var(--muted);
}

.requirements-table-wrap + .requirements-grid {
  margin-top: 18px;
}

.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.screenshots-grid a {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.screenshots-grid img {
  width: 100%;
  height: 100%;
  transition: transform 300ms ease;
}

.screenshots-grid a:hover img {
  transform: scale(1.03);
}

.screenshot-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  min-height: 38px;
  padding: 8px 13px;
  align-items: center;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(8, 11, 17, .78);
  backdrop-filter: blur(12px);
  font-size: .72rem;
  font-weight: 750;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.screenshots-grid a:hover .screenshot-zoom,
.screenshots-grid a:focus-visible .screenshot-zoom {
  opacity: 1;
  transform: none;
}

body.lightbox-open {
  overflow: hidden;
}

.screenshot-lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  border: 0;
  background: rgba(4, 6, 10, .96);
}

.screenshot-lightbox[open] {
  display: block;
}

.screenshot-lightbox::backdrop {
  background: rgba(4, 6, 10, .88);
  backdrop-filter: blur(14px);
}

.lightbox-panel {
  display: grid;
  width: 100%;
  height: 100dvh;
  padding: clamp(16px, 2vw, 34px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
}

.lightbox-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.lightbox-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.lightbox-close,
.lightbox-nav {
  display: grid;
  width: 52px;
  height: 52px;
  padding: 0;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  font-size: 1.45rem;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--accent);
}

.lightbox-stage {
  position: relative;
  display: grid;
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 30px);
  align-items: center;
}

.lightbox-stage figure {
  display: grid;
  min-width: 0;
  height: 100%;
  margin: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  place-items: center;
}

.lightbox-stage img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 150px);
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}

.lightbox-stage figcaption {
  max-width: 900px;
  color: var(--muted);
  font-size: .74rem;
  text-align: center;
}

.lightbox-nav:disabled {
  visibility: hidden;
}

.info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-grid h3 {
  font-size: 1rem;
}

.info-list > div {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.info-list p {
  margin-bottom: 0;
}

.external-source {
  margin-top: 24px;
}

.external-source a {
  color: var(--cloud);
  font-weight: 650;
}

.detail-sidebar {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 16px;
}

.sidebar-card {
  padding: 23px;
}

.sidebar-card h2 {
  font-size: 1.15rem;
}

.sidebar-card dl {
  margin: 0;
}

.sidebar-card dl > div {
  display: flex;
  padding: 13px 0;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}

.sidebar-card dd {
  margin: 0;
  font-size: .78rem;
  text-align: right;
}

.sidebar-help > span {
  display: grid;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  place-items: center;
  color: var(--accent-ink);
  border-radius: 12px;
  background: var(--accent);
  font-weight: 850;
}

.sidebar-help p {
  color: var(--muted);
  font-size: .8rem;
}

.sidebar-help a {
  color: var(--cloud);
  font-size: .78rem;
  font-weight: 700;
}

.related-section {
  border-top: 1px solid var(--line);
  background: #0b1017;
}

.topup-hero {
  padding: 90px 0;
}

.topup-glow {
  right: -160px;
  bottom: -360px;
  background: rgba(217,249,111,.13);
}

.topup-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
  gap: 90px;
  align-items: center;
}

.topup-safety,
.security-callout {
  display: flex;
  max-width: 660px;
  padding: 15px 17px;
  margin-top: 26px;
  gap: 12px;
  color: var(--muted);
  border: 1px solid rgba(130,217,255,.2);
  border-radius: 12px;
  background: rgba(130,217,255,.055);
  font-size: .8rem;
}

.topup-safety > span,
.security-callout > span {
  color: var(--cloud);
  font-weight: 850;
}

.topup-safety p,
.security-callout p {
  margin: 0;
}

.topup-visual {
  position: relative;
  min-height: 340px;
}

.wallet-card {
  position: absolute;
  top: 45px;
  right: 20px;
  left: 20px;
  display: flex;
  height: 230px;
  padding: 28px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: var(--accent-ink);
  border-radius: 27px;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.55), transparent 24%),
    var(--accent);
  box-shadow: 0 32px 80px rgba(0,0,0,.32);
  transform: rotate(4deg);
}

.wallet-card::after {
  position: absolute;
  width: 180px;
  height: 180px;
  right: -50px;
  bottom: -80px;
  content: "";
  border: 2px solid rgba(19,26,8,.2);
  border-radius: 50%;
}

.wallet-logo {
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .15em;
}

.wallet-lines {
  width: 44px;
  height: 30px;
  border: 2px solid rgba(19,26,8,.5);
  border-radius: 7px;
}

.wallet-card small { font-weight: 700; }
.wallet-card strong { position: absolute; right: 28px; bottom: 24px; font-size: 4rem; line-height: 1; }

.wallet-chip {
  position: absolute;
  z-index: 2;
  display: grid;
  min-height: 42px;
  padding: 8px 14px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: 0 12px 35px rgba(0,0,0,.3);
  font-size: .75rem;
  font-weight: 800;
}

.chip-plus { top: 16px; left: 0; color: var(--accent); font-size: 1.2rem; }
.chip-secure { right: 0; bottom: 25px; color: var(--success); }

.topup-products-section {
  background: linear-gradient(to bottom, #0a0e15, var(--bg));
}

.topup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.topup-card {
  position: relative;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.topup-card-featured {
  border-color: rgba(217,249,111,.3);
  background: linear-gradient(145deg, rgba(217,249,111,.065), var(--surface) 40%);
}

.topup-popular {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--accent);
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.topup-card-icon {
  display: grid;
  width: 50px;
  height: 50px;
  margin-bottom: 44px;
  place-items: center;
  color: var(--accent-ink);
  border-radius: 14px;
  background: var(--accent);
  font-size: 1.25rem;
  font-weight: 850;
}

.topup-card > p {
  min-height: 52px;
  color: var(--muted);
  font-size: .84rem;
}

.topup-price {
  display: flex;
  margin: 25px 0 20px;
  gap: 10px;
  align-items: baseline;
}

.topup-price strong {
  color: var(--accent);
  font-size: 1.8rem;
}

.stock-note {
  display: flex;
  margin: 14px 0 0 !important;
  min-height: auto !important;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: var(--success) !important;
  font-size: .68rem !important;
}

.stock-note-off { color: var(--muted-2) !important; }

.how-topup-section {
  border-top: 1px solid var(--line);
  background: #0b1017;
}

.compact-steps .step-card {
  min-height: 300px;
}

.compact-steps .step-icon {
  margin-bottom: 38px;
}

.topup-faq-section {
  border-top: 1px solid var(--line);
}

.steam-topup-page {
  position: relative;
  min-height: calc(100vh - 82px);
  padding: 54px 0 110px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 8%, rgba(95,44,170,.16), transparent 34rem),
    #050608;
}

.steam-topup-page::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #050608 0%, rgba(5,6,8,.98) 44%, rgba(5,6,8,.72) 72%, rgba(5,6,8,.88) 100%);
}

.topup-image-mosaic {
  position: absolute;
  z-index: 0;
  top: -20px;
  right: -5vw;
  display: grid;
  width: min(54vw, 920px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  opacity: .38;
  filter: saturate(.7) contrast(1.08);
  transform: rotate(-8deg);
  transform-origin: top right;
}

.topup-image-mosaic img {
  width: 100%;
  height: 230px;
  border-radius: 8px;
  object-fit: cover;
}

.topup-image-mosaic img:first-child { grid-row: span 2; height: 470px; }

.topup-page-shell {
  position: relative;
  z-index: 2;
}

.topup-page-heading {
  max-width: 980px;
  padding: 26px 0 46px;
}

.topup-page-heading h1 {
  margin-bottom: 12px;
  font-size: clamp(3rem, 5.3vw, 5.9rem);
}

.topup-page-heading > p:last-child {
  max-width: 820px;
  margin: 0;
  color: #c2c5cc;
  font-size: clamp(1rem, 1.45vw, 1.3rem);
}

/* Wins over the lead-paragraph rule above, which also matches :last-child. */
.topup-page-heading > p.topup-paused-notice {
  display: inline-flex;
  max-width: 820px;
  align-items: center;
  margin-top: 20px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 198, 109, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(255, 198, 109, 0.1);
  color: var(--amber);
  font-size: 1rem;
  font-weight: 600;
}

.topup-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 500px);
  gap: clamp(36px, 6vw, 92px);
  align-items: start;
}

.topup-entry-column,
.topup-calculator {
  display: grid;
  gap: 24px;
}

.topup-panel {
  padding: 30px 34px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  background: rgba(25,25,26,.96);
  box-shadow: 0 24px 60px rgba(0,0,0,.2);
}

.topup-panel-heading {
  display: flex;
  margin-bottom: 18px;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.topup-panel h2,
.topup-amount-field > label {
  margin: 0;
  color: var(--text);
  font-size: 1.22rem;
  font-weight: 680;
  letter-spacing: -.02em;
}

.topup-panel-heading a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: .86rem;
}

.topup-panel-heading a span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #171719;
  border-radius: 50%;
  background: #a9abb0;
  font-size: .72rem;
  font-weight: 900;
}

.topup-login-panel input,
.topup-amount-control input {
  width: 100%;
  height: 68px;
  padding: 0 22px;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 13px;
  outline: 0;
  background: #303031;
  font-size: 1.15rem;
  font-weight: 650;
}

.topup-login-panel input:focus,
.topup-amount-control input:focus {
  border-color: rgba(180,99,255,.8);
  box-shadow: 0 0 0 4px rgba(180,99,255,.12);
}

.topup-login-panel input::placeholder { color: #8e8e91; }

.topup-login-panel > p {
  margin: 12px 0 0;
  color: #8f9095;
  font-size: .84rem;
}

.topup-amount-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr);
  gap: 34px;
  align-items: end;
}

.topup-amount-field {
  display: grid;
  gap: 14px;
}

.topup-amount-control {
  position: relative;
}

.topup-amount-control input {
  padding-right: 64px;
}

.topup-amount-control > span {
  position: absolute;
  top: 50%;
  right: 22px;
  color: #c9c9cd;
  font-size: 1.15rem;
  font-weight: 750;
  pointer-events: none;
  transform: translateY(-50%);
}

.topup-amount-field > p {
  margin: -5px 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.topup-pay-preview {
  display: flex;
  min-height: 108px;
  flex-direction: column;
  justify-content: center;
}

.topup-pay-preview > span {
  color: var(--text);
  font-size: 1.1rem;
}

.topup-pay-preview strong {
  font-size: clamp(1.55rem, 2.4vw, 2.2rem);
  line-height: 1.2;
}

.topup-pay-preview small {
  margin-top: 7px;
  color: var(--muted-2);
  font-size: .7rem;
}

.topup-provider-note {
  margin: -8px 0 32px;
  color: var(--muted-2);
  font-size: .78rem;
}

.form-errors,
.field-errors {
  color: #ffc0c8;
  font-size: .82rem;
}

.form-errors ul,
.field-errors ul {
  padding: 0;
  margin: 8px 0 0;
  list-style: none;
}

.topup-summary-card {
  position: sticky;
  top: 108px;
  padding: 38px 40px 34px;
  color: #fff;
  border: 1px solid rgba(178,93,255,.15);
  border-radius: 24px;
  background:
    radial-gradient(circle at 110% -10%, rgba(145,73,255,.24), transparent 18rem),
    #100323;
  box-shadow: 0 32px 80px rgba(0,0,0,.34);
}

.topup-summary-total {
  display: flex;
  margin-bottom: 28px;
  align-items: baseline;
  justify-content: space-between;
}

.topup-summary-total h2,
.topup-summary-total output {
  margin: 0;
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  font-weight: 760;
}

.topup-summary-card dl { margin: 0 0 28px; }

.topup-summary-card dl > div {
  display: flex;
  min-height: 48px;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.topup-summary-card dt { color: #a9a3b6; }

.topup-summary-card dd {
  max-width: 58%;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-weight: 650;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topup-summary-card [data-topup-account] { color: #ffb219; }

.topup-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 18px;
  border-radius: 13px;
  background: rgba(255,255,255,.08);
}

.topup-promo input,
.topup-promo button {
  height: 58px;
  color: #777180;
  border: 0;
  background: transparent;
}

.topup-promo input { min-width: 0; padding: 0 18px; }
.topup-promo button { padding: 0 18px; font-weight: 700; }

.topup-pay-button {
  width: 100%;
  min-height: 68px;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #9f57ef, #bd72ff);
  box-shadow: 0 16px 40px rgba(167,79,245,.22);
  font-size: 1.15rem;
}

.topup-pay-button:not(:disabled):hover { color: #fff; background: linear-gradient(135deg, #ad65f5, #c982ff); }

.topup-summary-card > p {
  margin: 14px 0 22px;
  color: #a69daf;
  font-size: .74rem;
  line-height: 1.5;
}

.topup-summary-card > p a { text-decoration: underline; }

.topup-secure {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.topup-secure > span:first-child {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--accent-ink);
  border-radius: 50%;
  background: var(--accent);
  font-weight: 900;
}

.topup-secure > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.topup-secure strong { font-size: .8rem; }
.topup-secure small { color: #aaa2b3; font-size: .7rem; }

.topup-faq { grid-column: 1; padding-top: 10px; }
.topup-faq > h2 { margin-bottom: 24px; font-size: 1.8rem; }

.topup-faq-list details { border-bottom: 1px solid rgba(255,255,255,.12); }

.topup-faq-list summary {
  display: flex;
  min-height: 76px;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  font-size: 1.15rem;
  font-weight: 560;
}

.topup-faq-list summary::-webkit-details-marker { display: none; }
.topup-faq-list summary span { color: #89898d; font-size: 1.7rem; transition: transform 160ms ease; }
.topup-faq-list details[open] summary span { transform: rotate(180deg); }
.topup-faq-list details p { max-width: 760px; padding: 0 50px 24px 0; margin: 0; color: var(--muted); }
.topup-empty { max-width: 760px; margin-top: 20px; }

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-list details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.faq-list summary {
  display: flex;
  min-height: 64px;
  padding: 17px 20px;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  font-weight: 700;
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--accent); }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { padding: 0 20px 20px; margin: 0; color: var(--muted); }

.nickname-hero {
  min-height: 480px;
}

.nickname-hero .shell {
  position: relative;
  z-index: 1;
}

.nickname-glow {
  position: absolute;
  top: -240px;
  right: -80px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: rgba(130, 217, 255, .14);
  filter: blur(120px);
  pointer-events: none;
}

.nickname-workbench {
  background: linear-gradient(to bottom, #0a0e15, var(--bg));
}

.nickname-layout {
  display: grid;
  grid-template-columns: minmax(290px, 370px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.nickname-form-card,
.nickname-results-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.nickname-form-card {
  position: sticky;
  top: 104px;
}

.nickname-form-card h2,
.nickname-results-heading h2 {
  margin-bottom: 10px;
  font-size: 1.65rem;
}

.nickname-form-card > p:not(.eyebrow) {
  margin-bottom: 26px;
  color: var(--muted);
  font-size: .82rem;
}

.nickname-field {
  margin-bottom: 18px;
}

.nickname-field > label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 740;
}

.nickname-field input,
.nickname-field select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  outline: 0;
  background: #0b1017;
}

.nickname-field input:focus,
.nickname-field select:focus {
  border-color: var(--cloud);
  box-shadow: 0 0 0 3px rgba(130,217,255,.1);
}

.nickname-field.has-error input,
.nickname-field.has-error select {
  border-color: var(--danger);
}

.nickname-actions {
  display: grid;
  margin-top: 26px;
  gap: 10px;
}

.nickname-results-card {
  min-height: 620px;
}

.nickname-results-heading {
  display: flex;
  margin-bottom: 28px;
  gap: 20px;
  align-items: end;
  justify-content: space-between;
}

.nickname-results-heading > p {
  display: flex;
  margin: 0 0 5px;
  flex-direction: column;
  color: var(--muted-2);
  font-size: .68rem;
  text-align: right;
  text-transform: uppercase;
}

.nickname-results-heading > p span {
  color: var(--accent);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.nickname-list {
  display: grid;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
}

.nickname-list li {
  display: flex;
  min-height: 64px;
  padding: 13px 16px;
  gap: 13px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #0b1017;
}

.nickname-list li > span {
  color: var(--muted-2);
  font-size: .65rem;
  font-weight: 750;
}

.nickname-list strong {
  overflow-wrap: anywhere;
  font-size: 1.02rem;
  letter-spacing: .02em;
}

.nickname-seed-note {
  display: flex;
  padding: 15px 17px;
  margin-top: 22px;
  gap: 12px;
  color: var(--muted);
  border: 1px solid rgba(217,249,111,.2);
  border-radius: 11px;
  background: rgba(217,249,111,.045);
  font-size: .76rem;
}

.nickname-seed-note > span {
  color: var(--accent);
}

.nickname-seed-note p {
  margin: 0;
}

.nickname-seed-note code {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.nickname-empty {
  margin-top: 60px;
}

.nickname-guide-section {
  border-top: 1px solid var(--line);
  background: #0b1017;
}

.commerce-section {
  min-height: 520px;
  padding: 54px 0 110px;
}

.commerce-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 34px;
  align-items: start;
}

.cart-lines,
.checkout-form-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.cart-heading,
.summary-title-row {
  display: flex;
  margin-bottom: 22px;
  align-items: center;
  justify-content: space-between;
}

.cart-heading h2,
.summary-title-row h2,
.order-summary > h2 {
  margin: 0;
  font-size: 1.3rem;
}

.cart-heading span,
.summary-title-row a {
  color: var(--muted-2);
  font-size: .75rem;
}

.cart-line {
  position: relative;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto 32px;
  gap: 18px;
  padding: 22px 0;
  align-items: center;
  border-top: 1px solid var(--line);
}

.cart-line-media {
  display: grid;
  height: 72px;
  place-items: center;
  overflow: hidden;
  color: var(--accent);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 1.8rem;
}

.cart-line-media img { width: 100%; height: 100%; }
.cart-line-copy p { margin: 0 0 3px; color: var(--muted-2); font-size: .68rem; text-transform: uppercase; }
.cart-line-copy h3 { margin-bottom: 4px; font-size: 1rem; }
.cart-line-copy > span { color: var(--muted); font-size: .74rem; }
.cart-line-price { display: flex; flex-direction: column; text-align: right; }
.cart-line-price strong { color: var(--accent); }
.cart-line-price small { color: var(--muted-2); font-size: .67rem; }
.remove-form button { padding: 4px; color: transparent; border: 0; background: transparent; }
.remove-form button::before { content: "×"; color: var(--muted-2); font-size: 1.4rem; }
.remove-form button:hover::before { color: var(--danger); }

.back-shopping {
  display: inline-flex;
  margin-top: 20px;
  gap: 8px;
  color: var(--muted);
  font-size: .8rem;
}

.order-summary {
  position: sticky;
  top: 104px;
  padding: 26px;
}

.order-summary dl {
  margin: 24px 0;
}

.order-summary dl > div {
  display: flex;
  padding: 10px 0;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.order-summary dd {
  margin: 0;
  font-size: .8rem;
}

.summary-total {
  display: flex;
  padding: 20px 0;
  margin-bottom: 18px;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--line-strong);
}

.summary-total strong {
  color: var(--accent);
  font-size: 1.7rem;
}

.summary-benefits {
  padding: 18px 0;
  margin: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.summary-benefits li {
  padding: 5px 0;
  color: var(--muted);
  font-size: .75rem;
}

.summary-benefits span { color: var(--success); margin-right: 5px; }
.order-summary > p { margin: 0; color: var(--muted-2); font-size: .7rem; }
.order-summary > p a { text-decoration: underline; }

.cart-empty {
  max-width: 720px;
  margin: 28px auto;
}

.empty-actions,
.status-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.checkout-form-card {
  border-color: var(--line-strong);
}

.form-field {
  margin-bottom: 24px;
}

.form-field input:focus,
.filter-panel input:focus,
.filter-panel select:focus,
.mobile-filter-bar input:focus,
.mobile-filter-bar select:focus {
  border-color: var(--cloud);
  box-shadow: 0 0 0 3px rgba(130,217,255,.1);
}

.field-help,
.field-error,
.provider-warning {
  margin: 7px 0 0;
  color: var(--muted-2);
  font-size: .72rem;
}

.field-error,
.has-error label,
.provider-warning {
  color: var(--danger);
}

.has-error input {
  border-color: var(--danger);
}

.form-alert {
  padding: 13px 15px;
  margin-bottom: 20px;
  color: #ffd4da;
  border: 1px solid rgba(255,127,142,.3);
  border-radius: 10px;
  background: rgba(255,127,142,.07);
}

.form-alert p { margin: 0; }
.security-callout { margin: -8px 0 24px; }

.consent-field {
  padding: 18px 0;
  margin: 8px 0 16px;
  border-top: 1px solid var(--line);
}

.consent-field a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkout-lines {
  margin: 20px 0;
}

.checkout-line {
  display: flex;
  padding: 13px 0;
  gap: 14px;
  align-items: start;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}

.checkout-line div {
  display: flex;
  gap: 7px;
}

.checkout-line span,
.checkout-line p {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
}

.checkout-line strong { font-size: .78rem; white-space: nowrap; }

.payment-brand {
  display: flex;
  padding-top: 18px;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.payment-brand > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #fff;
  border-radius: 10px;
  background: #1678ff;
  font-weight: 900;
}

.payment-brand p { display: flex; margin: 0; flex-direction: column; }
.payment-brand strong { font-size: .76rem; }
.payment-brand small { color: var(--muted-2); font-size: .65rem; }

.payment-methods {
  padding: 0;
  margin: 0 0 20px;
  border: 0;
}

.payment-methods legend {
  padding: 0;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 740;
}

.payment-method {
  display: flex;
  padding: 14px 16px;
  margin-bottom: 10px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #0b1017;
  cursor: pointer;
}

.payment-method:hover { border-color: var(--line-strong); background: var(--surface-2); }

.payment-method input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--accent-strong);
}

.payment-method-copy { display: flex; flex-direction: column; gap: 3px; }
.payment-method-copy strong { font-size: .86rem; }
.payment-method-copy small { color: var(--muted-2); font-size: .7rem; }
.payment-method:has(input:checked) { border-color: var(--accent); background: rgba(217, 249, 111, .05); }

.secure-payment {
  display: flex;
  padding: 14px 16px;
  margin-bottom: 20px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

/* display:flex would otherwise win over the [hidden] default. */
.secure-payment[hidden] { display: none; }

.secure-payment > span { font-size: 1.1rem; line-height: 1; }
.secure-payment p { display: flex; margin: 0; flex-direction: column; gap: 3px; }
.secure-payment strong { font-size: .8rem; }
.secure-payment small { color: var(--muted); font-size: .72rem; line-height: 1.5; }

.privacy-consent {
  margin: 12px 0 0;
  color: var(--muted-2);
  font-size: .72rem;
  text-align: center;
}

.privacy-consent a { color: var(--cloud); text-decoration: underline; text-underline-offset: 2px; }

/* Подсказка «Где найти логин?» внутри поля логина Steam. */
.login-field {
  position: relative;
  container-type: inline-size;
}

.login-field input { padding-right: 214px; }

.login-help-trigger {
  position: absolute;
  top: 50%;
  right: 9px;
  display: inline-flex;
  padding: 9px 15px 9px 10px;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
}

.login-help-trigger:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface-3);
}

.login-help-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  color: #171719;
  border-radius: 50%;
  background: #a9abb0;
  font-size: .7rem;
  font-weight: 900;
}

@container (max-width: 480px) {
  .login-field input { padding-right: 58px; }
  .login-help-trigger { padding: 9px; }
  .login-help-label { display: none; }
}

@media (max-width: 640px) {
  .login-field input { padding-right: 58px; }
  .login-help-trigger { padding: 9px; }
  .login-help-label { display: none; }
}

.login-help-dialog {
  width: min(640px, calc(100vw - 32px));
  padding: 0;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.login-help-dialog::backdrop { background: rgba(4, 6, 10, .74); }

.login-help-panel {
  position: relative;
  padding: 30px clamp(20px, 4vw, 34px) 28px;
}

.login-help-panel h2 {
  margin: 0 40px 18px 0;
  font-size: 1.55rem;
}

.login-help-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
}

.login-help-close:hover { color: var(--text); background: rgba(255, 255, 255, .08); }

.login-help-figure { margin: 0 0 20px; }

.login-help-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.login-help-figure figcaption {
  margin-top: 9px;
  color: var(--muted-2);
  font-size: .72rem;
}

.login-help-warning {
  padding: 14px 16px;
  margin: 0 0 18px;
  color: #ffe0b0;
  border: 1px solid rgba(255, 198, 109, .34);
  border-radius: 12px;
  background: rgba(255, 198, 109, .08);
  font-size: .84rem;
  line-height: 1.55;
}

.login-help-steps {
  padding-left: 20px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.6;
}

.login-help-steps li { margin-bottom: 7px; }

.login-help-link { margin: 0 0 22px; color: var(--muted); font-size: .84rem; }
.login-help-link a { color: var(--cloud); text-decoration: underline; text-underline-offset: 2px; }

.login-help-actions {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.login-help-more { color: var(--muted); font-size: .78rem; }
.login-help-more:hover { color: var(--accent); }

/* Памятка покупателю. */
.purchase-reminders {
  padding: 22px 24px;
  margin: 26px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.purchase-reminders h2 {
  display: flex;
  margin: 0 0 12px;
  gap: 10px;
  align-items: center;
  font-size: .95rem;
}

.purchase-reminders h2 > span {
  display: grid;
  width: 22px;
  height: 22px;
  flex: none;
  place-items: center;
  color: var(--accent-ink);
  border-radius: 50%;
  background: var(--amber);
  font-size: .72rem;
  font-weight: 900;
}

.purchase-reminders ul {
  padding-left: 18px;
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.65;
}

.order-summary .purchase-reminders { padding: 18px 18px 16px; }
.order-summary .purchase-reminders ul { font-size: .74rem; }
.legal-content .purchase-reminders { margin-bottom: 34px; }
.topup-notes { grid-column: 1; }
.topup-faq-more { margin: 22px 0 0; font-size: .84rem; }
.topup-faq-more a { color: var(--cloud); text-decoration: underline; text-underline-offset: 2px; }
.redirect-secure { margin: 14px 0 0; color: var(--muted-2); font-size: .74rem; }

.legal-steps {
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.7;
}

.legal-steps li { margin-bottom: 8px; }

/* Страница-инструкция «Где найти логин Steam». */
.login-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 60px;
  padding-top: 66px;
  padding-bottom: 110px;
  align-items: start;
}

.login-guide-warning {
  display: flex;
  padding: 18px 20px;
  margin-bottom: 34px;
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(255, 198, 109, .34);
  border-radius: var(--radius);
  background: rgba(255, 198, 109, .08);
}

.login-guide-warning > span {
  display: grid;
  width: 26px;
  height: 26px;
  flex: none;
  place-items: center;
  color: var(--accent-ink);
  border-radius: 50%;
  background: var(--amber);
  font-weight: 900;
}

.login-guide-warning p { margin: 0; color: #ffe0b0; line-height: 1.6; }

.login-guide-steps {
  padding-left: 22px;
  margin: 0 0 34px;
}

.login-guide-steps > li { margin-bottom: 20px; }
.login-guide-steps h2 { margin: 0 0 5px; font-size: 1.1rem; }
.login-guide-steps p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }

.login-guide-figure { margin: 0 0 40px; }

.login-guide-figure figcaption {
  margin-top: 10px;
  color: var(--muted-2);
  font-size: .78rem;
}

.login-guide-figure a { color: var(--cloud); text-decoration: underline; text-underline-offset: 2px; }
.login-guide-faq h2 { margin-bottom: 16px; font-size: 1.5rem; }

.login-guide-side {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 16px;
}

.legal-hero h1 {
  font-size: clamp(2.7rem, 5vw, 5rem);
}

.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 80px;
  padding-top: 74px;
  padding-bottom: 110px;
  align-items: start;
}

.legal-nav {
  position: sticky;
  top: 104px;
}

.legal-nav nav {
  display: grid;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.legal-nav h2 {
  padding: 8px 10px 16px;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}

.legal-nav a {
  padding: 10px;
  color: var(--muted);
  border-radius: 8px;
  font-size: .8rem;
}

.legal-nav a:hover,
.legal-nav a[aria-current="page"] {
  color: var(--text);
  background: rgba(255,255,255,.05);
}

.legal-content > section {
  position: relative;
  padding: 0 0 60px 64px;
  margin-bottom: 60px;
  border-bottom: 1px solid var(--line);
}

.legal-number {
  position: absolute;
  top: 2px;
  left: 0;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 850;
}

.legal-content h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
.legal-content h3 { margin-top: 36px; font-size: 1.15rem; }
.legal-content h4 { margin-top: 26px; color: var(--muted); }
.legal-content p { color: var(--muted); }
.legal-content a { color: var(--cloud); text-decoration: underline; }

/* Полный текст политики по 152-ФЗ: много коротких пронумерованных пунктов,
   поэтому шрифт мельче, а интервал между абзацами плотнее обычного. */
.legal-doc h3 { margin-top: 44px; color: var(--text); font-size: 1.25rem; }
.legal-doc h3:first-of-type { margin-top: 30px; }
.legal-doc p { margin: 0 0 12px; font-size: .86rem; line-height: 1.7; }
.legal-doc .contact-list { margin: 16px 0 0; }

.legal-list {
  padding-left: 20px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.7;
}

.legal-list li { margin-bottom: 8px; }

.contact-list > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.contact-list dd { margin: 0; }
.legal-updated { color: var(--muted-2) !important; font-size: .74rem; }

.status-page {
  display: grid;
  min-height: calc(100vh - 76px);
  padding: 80px 0 110px;
  place-items: start center;
  background: radial-gradient(circle at 50% 15%, rgba(115,90,255,.11), transparent 28rem);
}

.status-card {
  padding: 46px;
  text-align: center;
}

.status-card .eyebrow {
  justify-content: center;
}

.status-card h1 {
  margin-bottom: 18px;
  font-size: clamp(2.3rem, 5vw, 4.5rem);
}

.status-card > p {
  max-width: 590px;
  margin-right: auto;
  margin-left: auto;
  color: var(--muted);
}

.status-icon {
  display: grid;
  width: 72px;
  height: 72px;
  margin: 0 auto 25px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface-2);
  font-size: 1.8rem;
  font-weight: 850;
}

.status-icon-success { color: var(--success); border-color: rgba(113,229,163,.3); }
.status-icon-error { color: var(--danger); border-color: rgba(255,127,142,.3); }
.status-icon-neutral { color: var(--amber); }
.status-icon-progress { color: var(--cloud); }

.status-icon-progress span {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(130,217,255,.25);
  border-top-color: var(--cloud);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.order-reference {
  display: grid;
  max-width: 600px;
  padding: 18px;
  margin: 28px auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b1017;
}

.order-reference span,
.order-reference small {
  color: var(--muted-2);
  font-size: .68rem;
}

.order-reference strong {
  margin: 5px 0;
  overflow-wrap: anywhere;
  font-size: .83rem;
  letter-spacing: .03em;
}

.redirect-card form {
  max-width: 500px;
  margin: 0 auto;
}

.status-security {
  margin-top: 22px !important;
  color: var(--muted-2) !important;
  font-size: .72rem;
}

.status-security span { color: var(--success); }

.order-status-shell {
  max-width: 940px;
}

.order-status-card {
  text-align: left;
}

.order-status-card > .status-icon {
  margin-left: 0;
}

.order-status-card > .eyebrow {
  justify-content: flex-start;
}

.order-status-card > p {
  margin-left: 0;
}

.order-status-card .order-reference {
  max-width: none;
  margin: 28px 0;
}

.order-items {
  margin: 35px 0;
  text-align: left;
}

.order-items h2 {
  font-size: 1.25rem;
}

.order-items article {
  display: flex;
  padding: 18px 0;
  gap: 20px;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}

.order-items article span,
.order-items article p {
  margin: 0;
  color: var(--muted-2);
  font-size: .7rem;
}

.order-items article h3 {
  margin: 4px 0;
  font-size: 1rem;
}

.order-total {
  display: flex;
  padding: 20px 0;
  justify-content: space-between;
  border-top: 1px solid var(--line-strong);
}

.order-total strong { color: var(--accent); font-size: 1.35rem; }

.order-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 30px;
  gap: 10px;
}

.order-meta > div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0b1017;
}

.order-meta h3 {
  margin-bottom: 5px;
  color: var(--muted-2);
  font-size: .67rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.order-meta p { margin: 0; color: var(--text); font-size: .8rem; overflow-wrap: anywhere; }
.order-status-card .status-actions { justify-content: flex-start; }

.not-found-page {
  position: relative;
  display: grid;
  min-height: calc(100vh - 76px);
  padding: 90px 0;
  place-items: center;
  overflow: hidden;
}

.not-found-glow {
  right: 5%;
  bottom: -320px;
}

.not-found-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.not-found-code {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.08);
  font-size: clamp(5rem, 13vw, 11rem);
  font-weight: 850;
  letter-spacing: -.1em;
}

.not-found-code i {
  color: var(--accent);
  font-size: .56em;
  font-style: normal;
}

.not-found-copy h1 {
  font-size: clamp(2.7rem, 5.2vw, 5.5rem);
}

.not-found-copy > p {
  color: var(--muted);
}

.not-found-copy .status-actions {
  margin-top: 22px;
  justify-content: flex-start;
}

.site-footer {
  padding: 68px 0 26px;
  border-top: 1px solid var(--line);
  background: #080b10;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr .7fr .7fr;
  gap: 70px;
  padding-bottom: 55px;
}

.footer-intro p {
  max-width: 410px;
  margin-top: 20px;
  color: var(--muted-2);
  font-size: .95rem;
}

.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.site-footer nav h2 {
  margin-bottom: 8px;
  color: var(--muted-2);
  font-size: .84rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.site-footer nav a {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
}

.footer-bottom {
  display: flex;
  padding-top: 22px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted-2);
  border-top: 1px solid var(--line);
  font-size: .8rem;
  line-height: 1.55;
}

.footer-bottom p {
  margin: 0;
}

@media (max-width: 1380px) {
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .header-search-trigger { width: min(34vw, 360px); margin-left: auto; }
  .cart-link,
  .mobile-nav { margin-left: 0; }
}

@media (max-width: 1080px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-grid-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid p:nth-child(2n) { border-right: 0; }
  .trust-grid p:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .hero-grid,
  .topup-hero-grid,
  .seo-copy-grid,
  .not-found-grid { grid-template-columns: 1fr; }
  .home-hero { padding-top: 74px; }
  .hero-copy { max-width: 760px; }
  /* Single column: the copy now sits on top of the wall, so it retreats to a
     dim glow in the upper right instead of a full-height backdrop. */
  .hero-wall { --dw-origin-x: 84%; --dw-dim: .2; --dw-shade: .6; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 0; }
  .step-icon { margin-bottom: 45px; }
  .topup-visual { width: min(100%, 540px); }
  .catalog-layout { grid-template-columns: 1fr; }
  .filter-panel { display: none; }
  .mobile-filter-bar { display: block; margin-bottom: 24px; }
  .mobile-filter-bar details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .mobile-filter-bar summary { display: flex; padding: 15px 17px; justify-content: space-between; list-style: none; font-weight: 700; }
  .mobile-filter-bar summary::-webkit-details-marker { display: none; }
  .mobile-filter-bar form { display: grid; padding: 18px; gap: 12px; border-top: 1px solid var(--line); }
  .mobile-checks { display: grid; grid-template-columns: repeat(2, 1fr); padding: 12px 0; }
  .mobile-filter-actions { display: flex; gap: 18px; align-items: center; }
  .detail-layout { grid-template-columns: 1fr; gap: 30px; }
  .game-detail-hero { min-height: 0; }
  .detail-hero-grid { grid-template-columns: 1fr; }
  .purchase-card { max-width: 620px; }
  .detail-sidebar { position: static; grid-template-columns: repeat(2, 1fr); }
  .commerce-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .legal-layout { grid-template-columns: 1fr; gap: 34px; }
  .login-guide { grid-template-columns: 1fr; gap: 34px; }
  .login-guide-side { position: static; }
  .legal-nav { position: static; }
  .legal-nav nav { grid-template-columns: repeat(2, 1fr); }
  .legal-nav h2 { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 35px; }
  .not-found-code { display: none; }
  .nickname-layout { grid-template-columns: 1fr; }
  .nickname-form-card { position: static; }
  .topup-workspace { grid-template-columns: 1fr; gap: 26px; }
  .topup-provider-note { margin-bottom: 0; }
  .topup-summary-card { position: static; }
}

@media (max-width: 700px) {
  :root { --page-gutter: 16px; }
  .shell { width: 100%; }
  .site-header .brand-copy small { display: none; }
  .cart-link > span:first-child { display: none; }
  .header-inner { min-height: 68px; gap: 12px; }
  .section { padding: 76px 0; }
  .section-heading { align-items: start; flex-direction: column; }
  h1 { font-size: clamp(2.45rem, 13vw, 4.2rem); }
  h2 { font-size: clamp(1.8rem, 9vw, 2.8rem); }
  .hero-search { grid-template-columns: 42px 1fr; }
  .hero-search button { grid-column: 1 / -1; width: 100%; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .text-link { justify-content: center; }
  .drift-wall { --dw-tile-w: 168px; --dw-tile-h: 80px; --dw-gap: 13px; --dw-lift: 40px; }
  .hero-wall { --dw-dim: .14; --dw-shade: .68; }
  .trust-block { padding-top: 46px; padding-bottom: 46px; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid p { min-height: 0; }
  .trust-grid p,
  .trust-grid p:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-grid p:last-child { border-bottom: 0; }
  .game-grid,
  .game-grid-catalog,
  .topup-grid { grid-template-columns: 1fr; }
  .game-card-body > p { min-height: 0; }
  .catalog-title-row { align-items: start; flex-direction: column; }
  .result-count { text-align: left; }
  .active-filter-heading,
  .alphabet-shortcuts-heading,
  .genre-shortcuts-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .active-filter-bar,
  .alphabet-shortcuts,
  .genre-shortcuts { padding: 16px; }
  .alphabet-shortcuts-heading { gap: 11px; }
  .alphabet-shortcuts-actions { display: grid; width: 100%; grid-template-columns: minmax(72px, auto) minmax(0, 1fr); }
  .alphabet-shortcuts-actions a { min-height: 44px; }
  .alphabet-group { grid-template-columns: 1fr; gap: 6px; }
  .alphabet-group > p { padding-top: 0; }
  .alphabet-list { flex-wrap: nowrap; margin: 0 -16px; padding: 0 16px 7px; overflow-x: auto; scrollbar-width: thin; }
  .alphabet-list li { flex: 0 0 auto; }
  .alphabet-list a { min-width: 44px; min-height: 44px; }
  .genre-shortcut-list { flex-wrap: nowrap; margin: 0 -16px -4px; padding: 0 16px 5px; overflow-x: auto; scrollbar-width: thin; }
  .genre-shortcut-list a { flex: 0 0 auto; }
  .pagination { align-items: center; flex-direction: column; }
  .pagination-main { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pagination-pages { grid-row: 1; grid-column: 1 / -1; margin-inline: auto; padding: 0 0 7px; overflow-x: auto; scrollbar-width: thin; }
  .pagination-main > .page-direction:first-child { grid-row: 2; grid-column: 1; }
  .pagination-main > .page-direction:last-child { grid-row: 2; grid-column: 2; }
  .page-direction { width: 100%; }
  .pagination-summary { text-align: center; }
  .game-detail-hero { padding-top: 28px; padding-bottom: 52px; }
  .header-search-trigger { width: 44px; padding: 0; grid-template-columns: 1fr; justify-items: center; }
  .header-search-trigger-label,
  .header-search-trigger kbd { display: none; }
  .catalog-search-band { padding-top: 24px; }
  .catalog-search-row { align-items: stretch; flex-direction: column; }
  .catalog-search { grid-template-columns: 40px minmax(0, 1fr); }
  .catalog-search button[type="submit"] { grid-column: 1 / -1; width: 100%; }
  .catalog-shuffle { width: 100%; min-height: 52px; }
  .search-overlay-inner { padding-top: 28px; }
  .search-overlay-form { grid-template-columns: 34px minmax(0, 1fr); }
  .search-overlay-form .button { grid-column: 1 / -1; width: 100%; }
  .search-suggest-item { grid-template-columns: 58px minmax(0, 1fr); }
  .detail-backdrop-image { opacity: 1; }
  .detail-backdrop {
    background:
      linear-gradient(90deg, rgba(8,11,17,.54), rgba(8,11,17,.12)),
      linear-gradient(to bottom, rgba(8,11,17,.1), rgba(11,16,23,.9) 100%);
  }
  .detail-heading h1 { font-size: clamp(2.45rem, 13vw, 4.5rem); }
  .detail-heading > p { font-size: 1rem; }
  .detail-hero-grid { gap: 22px; }
  .detail-facts-wrap { margin-top: 38px; padding: 20px; }
  .purchase-card { display: block; }
  .purchase-card .button-cloud { margin-top: 20px; }
  .detail-facts { grid-template-columns: 1fr; }
  .detail-facts div,
  .detail-facts div:last-child { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .detail-facts div:first-child { padding-top: 0; }
  .detail-facts div:last-child { padding-bottom: 0; border-bottom: 0; }
  .detail-layout { padding-top: 62px; padding-bottom: 70px; }
  .requirements-grid,
  .screenshots-grid { grid-template-columns: 1fr; }
  .requirements-table th,
  .requirements-table td { padding: 12px 14px; }
  .detail-sidebar { grid-template-columns: 1fr; }
  .topup-hero { padding: 64px 0 84px; }
  .topup-hero-grid { gap: 38px; }
  .topup-visual { min-height: 290px; }
  .wallet-card { height: 205px; }
  .steam-topup-page { padding: 34px 0 80px; }
  .steam-topup-page::before { background: rgba(5,6,8,.82); }
  .topup-image-mosaic { right: -45%; width: 130%; opacity: .2; }
  .topup-page-heading { padding: 22px 0 34px; }
  .topup-page-heading h1 { font-size: clamp(2.6rem, 12vw, 4.5rem); }
  .topup-panel { padding: 23px; }
  .topup-panel-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .topup-amount-panel { grid-template-columns: 1fr; gap: 12px; }
  .topup-pay-preview { min-height: 0; }
  .topup-summary-card { padding: 28px 24px; }
  .topup-summary-card dd { max-width: 62%; }
  .topup-faq-list summary { min-height: 68px; font-size: 1rem; }
  .topup-faq-list details p { padding-right: 0; }
  .cart-lines,
  .checkout-form-card,
  .status-card { padding: 22px; }
  .cart-line { grid-template-columns: 86px minmax(0, 1fr) 28px; }
  .cart-line-price { grid-column: 2; grid-row: 2; text-align: left; }
  .remove-form { grid-column: 3; grid-row: 1; }
  .checkout-layout { gap: 18px; }
  .legal-content > section { padding-left: 0; }
  .legal-number { position: static; display: block; margin-bottom: 12px; }
  .legal-nav nav { grid-template-columns: 1fr; }
  .legal-nav h2 { grid-column: auto; }
  .contact-list > div { grid-template-columns: 1fr; gap: 5px; }
  .status-page { padding: 48px 0 80px; }
  .order-meta { grid-template-columns: 1fr; }
  .order-status-card .status-actions { flex-direction: column; }
  .order-status-card .button { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-bottom { gap: 12px; align-items: start; flex-direction: column; }
  .nickname-hero { min-height: 0; }
  .nickname-form-card,
  .nickname-results-card { padding: 22px; }
  .nickname-results-card { min-height: 0; }
  .nickname-list { grid-template-columns: 1fr; }
  .nickname-results-heading { align-items: flex-start; flex-direction: column; }
  .nickname-results-heading > p { text-align: left; }
  .lightbox-panel { padding: 12px; gap: 10px; }
  .lightbox-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .lightbox-close,
  .lightbox-nav { width: 44px; height: 44px; }
  .lightbox-stage { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; }
  .lightbox-stage img { max-height: calc(100dvh - 132px); border-radius: 8px; }
  .lightbox-stage figcaption { display: none; }
}

@media (max-width: 430px) {
  .brand-copy strong { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  .mobile-checks { grid-template-columns: 1fr; }
  .page-current,
  .page-link { min-width: 36px; height: 38px; }
  .cart-line { grid-template-columns: 64px minmax(0, 1fr) 24px; gap: 12px; }
  .cart-line-media { height: 56px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-intro { grid-column: auto; }
  .topup-login-panel input,
  .topup-amount-control input { height: 60px; padding: 0 52px 0 16px; font-size: 1rem; }
  .topup-amount-control > span { right: 16px; font-size: 1rem; }
  .topup-summary-total { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Editorial copy under the indexable catalog sections (free, popular,
   discounts, all games) and the sections strip on the home page. */
.landing-copy-section {
  border-top: 1px solid var(--line);
  background: #0b1017;
}

.landing-copy-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
}

.landing-copy-grid h2 {
  margin-bottom: 0;
}

.landing-related {
  display: flex;
  margin-top: 22px;
  gap: 8px;
  flex-wrap: wrap;
}

.landing-faq {
  max-width: 900px;
  margin-top: 64px;
}

.landing-faq h2 {
  margin-bottom: 22px;
  font-size: 1.6rem;
}

.home-sections {
  padding-top: 0;
}

.home-sections-group {
  margin-bottom: 26px;
}

.home-sections-group:last-child {
  margin-bottom: 0;
}

.home-sections-group h3 {
  margin-bottom: 12px;
  color: var(--muted-2);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

a.pill:hover,
a.pill:focus-visible {
  color: var(--text);
  border-color: var(--line-strong);
}

@media (max-width: 1080px) {
  .landing-copy-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .landing-faq {
    margin-top: 44px;
  }
}