:root {
  --bg: #070910;
  --surface: rgba(13, 17, 27, .8);
  --surface-2: rgba(21, 27, 41, .74);
  --ink: #f0f1f5;
  --muted: #969eaf;
  --line: rgba(184, 199, 231, .12);
  --accent: #d9bd7e;
  --accent-hover: #f0d79f;
  --on-accent: #17130b;
  --highlight: #9bafff;
  --gold: #dfc588;
  --blue: #829dff;
  --dark: #070910;
  --dark-muted: #9da6b9;
  --radius: 14px;
  --radius-lg: 24px;
  --display: 'Unbounded', 'Onest', sans-serif;
  --shadow: 0 28px 80px rgba(0, 0, 0, .34);
  color-scheme: dark;
  background: var(--bg);
}

:root[data-theme="light"] {
  --bg: #eef1f6;
  --surface: rgba(255, 255, 255, .76);
  --surface-2: rgba(231, 235, 242, .74);
  --ink: #171b27;
  --muted: #687286;
  --line: rgba(39, 54, 83, .13);
  --accent: #896728;
  --accent-hover: #654815;
  --on-accent: #ffffff;
  --highlight: #4b65bd;
  --gold: #8d6b2c;
  --shadow: 0 24px 65px rgba(28, 35, 53, .13);
  color-scheme: light;
}

body {
  background: radial-gradient(ellipse at 12% -8%, rgba(83, 103, 183, .12), transparent 34%), radial-gradient(ellipse at 90% 24%, rgba(111, 77, 143, .08), transparent 28%);
  background-attachment: fixed;
}

:root[data-theme="light"] body { background: radial-gradient(ellipse at 12% -8%, rgba(83, 103, 183, .1), transparent 34%); }
::selection { background: var(--accent); color: #101321; }
.container { width: min(1280px, calc(100% - 56px)); }
h1, h2, h3 { text-wrap: balance; }
h2, .page-intro h1 { font-family: var(--display); font-weight: 600; letter-spacing: -.045em; }
.button { min-height: 46px; border-radius: 12px; letter-spacing: -.01em; }
.button--accent { box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 11%, transparent); }
.button--accent:hover { box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 20%, transparent); }
.section-kicker { letter-spacing: 1.7px; }
.section-heading { margin-bottom: 28px; }
.section-note { line-height: 1.75; }

.topline { background: #05070c; border-bottom: 1px solid rgba(255,255,255,.05); color: #818ba0; }
.topline__inner { min-height: 34px; }
.status-dot { background: #a8bdff; box-shadow: 0 0 14px rgba(155, 175, 255, .8); }
.header { border-bottom-color: var(--line); background: rgba(7, 9, 16, .78); backdrop-filter: blur(24px) saturate(130%); }
:root[data-theme="light"] .header { background: rgba(255,255,255,.82); }
.header__inner { min-height: 80px; gap: 25px; }
.logo { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -1.4px; }
.logo__mark { color: var(--accent); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 22%, transparent)); }
.header__nav--pages { display: flex; align-items: center; gap: 22px; margin-left: 20px; }
.header__nav--pages > a { position: relative; display: inline-flex; align-items: center; min-height: 40px; border: 0; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.header__nav--pages > a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--accent); transition: right .2s ease; }
.header__nav--pages > a:hover, .header__nav--pages > a.active { color: var(--ink); border: 0; }
.header__nav--pages > a:hover::after, .header__nav--pages > a.active::after { right: 0; }
.header__nav--account { gap: 16px; }
.header__login { border-radius: 11px; }
.wallet-button, .catalog-search, .offer-search, .offer-sort select, .topup-form input, .topup-form select { border-radius: 12px; }
.mobile-menu { background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(24px); }

main > .hero--gateway { order: 0; }
main > .quick-worlds-shell { order: 1; }
main > .directions { order: 2; }
main > .trust-row { order: 4; }
main > .catalog { order: 5; }
main > .all-games { order: 6; }
main > .black-club { order: 7; }
main > .how { order: 8; }
main > .reviews { order: 9; }
main > .subscriptions, main > .digital-goods, main > .topup-section, main > .community, main > .mini-games { order: 2; }
main > .support { order: 20; }

.hero--gateway {
  min-height: 620px;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: 24px;
  margin-top: 30px;
  padding: 50px 48px;
  overflow: hidden;
  border: 1px solid rgba(160, 180, 226, .15);
  border-radius: 28px;
  background: radial-gradient(circle at 79% 45%, rgba(78, 100, 179, .22), transparent 31%), radial-gradient(circle at 13% 105%, rgba(114, 81, 144, .17), transparent 42%), linear-gradient(135deg, rgba(10, 14, 24, .84), rgba(7, 9, 16, .76) 65%, rgba(11, 15, 29, .84));
  box-shadow: 0 34px 100px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255,255,255,.035);
  color: #f5f4f2;
}
.hero--gateway::before {
  background-image: radial-gradient(circle, rgba(222,231,255,.6) 0 1px, transparent 1.2px), radial-gradient(circle, rgba(222,231,255,.34) 0 1px, transparent 1.2px), linear-gradient(115deg, rgba(255,255,255,.025), transparent 40%);
  background-position: 0 0, 37px 29px, 0 0;
  background-size: 93px 93px, 137px 137px, 100% 100%;
  opacity: .48;
}
.hero--gateway::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 120px rgba(0,0,0,.24); pointer-events: none; }
.hero--gateway .hero__content { max-width: 590px; }
.hero--gateway .eyebrow { margin-bottom: 26px; color: #919cb2; font-size: 9px; }
.hero--gateway .eyebrow span { color: var(--gold); }
.hero--gateway h1 { max-width: 590px; margin-bottom: 24px; color: #f5f4f2; font-family: var(--display); font-size: clamp(39px, 3.75vw, 56px); font-weight: 600; line-height: 1.1; letter-spacing: -.055em; }
.hero--gateway h1 span { background: linear-gradient(115deg, #f1ddb0, #bca06a 70%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero--gateway .hero__description { max-width: 520px; margin-bottom: 28px; color: #a2abbd; font-size: 14px; line-height: 1.8; }
.hero-search { width: 100%; height: 60px; padding: 5px 5px 5px 17px; border: 1px solid rgba(172, 190, 229, .2); border-radius: 14px; background: rgba(4, 7, 14, .55); box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 14px 35px rgba(0,0,0,.15); backdrop-filter: blur(14px); }
.hero-search:focus-within { border-color: rgba(223,197,136,.72); box-shadow: 0 0 0 4px rgba(223,197,136,.08); }
.hero-search input { color: #eef1f8; font-size: 13px; }
.hero-search input::placeholder { color: #7d889e; }
.hero-search button { border-radius: 10px; padding-inline: 24px; background: var(--accent); color: #17130b; }
.hero-search button:hover { background: #f0d79f; }
:root[data-theme="light"] .hero-search button { color: #fff; background: #a7813d; }
.hero__catalog-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 17px; color: #d9dee9; font-size: 11px; font-weight: 600; }
.hero__catalog-link span { color: var(--gold); transition: transform .2s; }
.hero__catalog-link:hover span { transform: translateX(4px); }
.hero--gateway .popular-search { margin-top: 22px; gap: 13px; }
.hero--gateway .popular-search button { color: #b9c2d3; border-color: #354057; }
.hero--gateway .popular-search button:hover { color: var(--gold); border-color: var(--gold); }
.hero--gateway .hero__facts { margin-top: 28px; padding-top: 23px; border-color: rgba(159,177,217,.14); }
.hero--gateway .hero__facts b { font-family: var(--display); font-size: 13px; font-weight: 500; }

.celestial-scene { min-height: 510px; position: relative; display: grid; place-items: center; perspective: 1100px; touch-action: pan-y; isolation: isolate; }
.celestial-scene__stars { position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, rgba(97,120,209,.17), transparent 40%), radial-gradient(circle, rgba(210,221,255,.55) 0 1px, transparent 1.4px); background-size: 100% 100%, 71px 71px; opacity: .5; mask-image: radial-gradient(circle, #000, transparent 74%); }
.celestial-scene__sector { position: absolute; top: 10px; right: 5px; color: #69758e; font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 2px; }
.celestial-scene__loading { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 42%, rgba(62,79,130,.22), rgba(5,8,16,.72) 70%); color: #a8b4ca; pointer-events: none; }
.celestial-scene__loading > span { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(223,197,136,.35); border-radius: 50%; color: var(--gold); font-family: 'IBM Plex Mono', monospace; font-size: 12px; animation: celestial-loading-pulse 1.5s ease-in-out infinite; }
.celestial-scene__loading > small { font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 1.6px; text-transform: uppercase; }
.webgl-ready .celestial-scene__loading { display: none; }
@keyframes celestial-loading-pulse { 0%, 100% { opacity: .45; box-shadow: 0 0 0 rgba(223,197,136,0); } 50% { opacity: 1; box-shadow: 0 0 24px rgba(223,197,136,.18); } }
.celestial-scene__footer { position: absolute; left: 8px; right: 8px; bottom: 1px; display: flex; align-items: center; justify-content: space-between; color: #77839a; font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 1px; }
.celestial-scene__footer > span { display: flex; align-items: center; gap: 8px; }
.celestial-scene__footer i { width: 6px; height: 6px; border-radius: 50%; background: #a8baff; box-shadow: 0 0 12px #829dff; }
.celestial-scene__footer small { font-size: 8px; }

.quick-worlds-shell { margin-top: 20px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.quick-worlds { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.quick-world { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; }
.quick-world__icon { width: 54px; height: 54px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.quick-world__icon img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.quick-world strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }
.quick-world small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.quick-world:hover .quick-world__icon { border-color: var(--accent); }
.quick-world:hover img { transform: scale(1.08); }
.quick-worlds__all { justify-content: center; min-height: 54px; border: 1px dashed var(--line); border-radius: 16px; color: var(--accent); font-size: 11px; font-weight: 700; text-align: center; }
.quick-worlds__all:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }

.directions { padding-top: 66px; }
.direction-grid { gap: 14px; }
.direction-card { min-height: 172px; padding: 21px; border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-2) 68%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.direction-card::before { content: ''; position: absolute; right: -36px; bottom: -54px; width: 130px; height: 130px; border: 1px solid color-mix(in srgb, var(--realm-accent, #9bafff) 17%, transparent); border-radius: 50%; box-shadow: inset 12px 8px 30px color-mix(in srgb, var(--realm-accent, #9bafff) 8%, transparent); }
.direction-card[data-realm="currency"] { --realm-accent: #d9bd7e; }
.direction-card[data-realm="accounts"] { --realm-accent: #a5b8ff; }
.direction-card[data-realm="items"] { --realm-accent: #b393df; }
.direction-card[data-realm="services"] { --realm-accent: #77bdb5; }
.direction-card[data-realm="top-ups"] { --realm-accent: #e19c85; }
.direction-card::after { background: var(--realm-accent, #9bafff); opacity: .04; }
.direction-card:hover { border-color: color-mix(in srgb, var(--realm-accent) 40%, var(--line)); background: color-mix(in srgb, var(--realm-accent) 5%, var(--surface)); box-shadow: 0 20px 45px rgba(0,0,0,.2); }
.direction-card__number { position: absolute; right: 18px; top: 18px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 8px; }
.direction-card__icon { width: 45px; height: 45px; border-color: color-mix(in srgb, var(--realm-accent) 25%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--realm-accent) 7%, var(--surface)); color: var(--realm-accent); }
.direction-card__content { position: relative; z-index: 1; }
.direction-card__content strong { font-size: 13px; }
.direction-card__arrow { left: 21px; right: auto; top: auto; bottom: 21px; display: none; }
.direction-extras { padding-top: 20px; }


.trust-row { margin-top: 64px; padding-block: 28px; border-color: var(--line); }
.trust-item__icon { color: var(--accent); }
.catalog { padding-top: 72px; }
.catalog-toolbar { border-color: var(--line); }
.tab.active { color: var(--accent); }
.game-grid { gap: 20px; }
.game-card, .subscription-card, .digital-card, .review-card, .mini-game { border-color: var(--line); background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-2) 65%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.game-card { border-radius: 18px; }
.game-card__cover { border-bottom: 1px solid var(--line); }
.game-card__cover::after { background: linear-gradient(transparent 45%, rgba(5,8,13,.42)); }
.game-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow: 0 22px 48px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent); transform: translateY(-5px); }
.game-card__title h3 { font-size: 14px; }
.game-card__price strong { color: var(--ink); }
.game-card__badge { border: 1px solid rgba(255,255,255,.14); background: rgba(10,14,25,.76); color: #e6d19e; backdrop-filter: blur(8px); }
.game-card__open { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.game-card__open:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.favorite-button { background: rgba(8,12,22,.58); }
.subscription-card { border-radius: 18px; }
.subscription-card__body h3 { font-family: 'Onest', sans-serif; font-weight: 700; letter-spacing: -.02em; }
.digital-card:hover { border-color: var(--accent); box-shadow: 0 22px 45px rgba(0,0,0,.25); }

.page-heading-wrap { position: relative; }
.page-intro { padding: 45px 0 36px; }
.page-intro h1 { font-size: 43px; }
.page-intro > p { max-width: 650px; font-size: 13px; line-height: 1.8; }
.page-breadcrumbs { margin-bottom: 32px; }
.category-switcher a { border-radius: 11px; }
.category-switcher a.active, .offer-categories button.active { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.catalog-search { height: 50px; background: var(--surface); }
.topup-layout, .community-shell { border-radius: 22px; }
.purchase-panel, .lot-table, .offer-filters, .cart-layout, .support-widget__panel, .deal-chat { border-color: var(--line); }
.purchase-panel { border-radius: 20px; box-shadow: var(--shadow); }
.game-page__hero { border-radius: 24px; border-color: rgba(184,199,231,.16); }
.game-page__hero h1 { font-family: var(--display); font-size: 34px; font-weight: 600; }
.lot-row.selected { box-shadow: inset 2px 0 0 var(--accent); }
dialog { border-color: rgba(184,199,231,.17); }
dialog::backdrop { background: rgba(3,5,10,.8); backdrop-filter: blur(9px); }
.subscription-dialog, .wallet-dialog, .auth-dialog { border-radius: 22px; }

.how { margin-top: 12px; border: 1px solid rgba(184,199,231,.14); border-radius: 24px; background: radial-gradient(circle at 15% 20%, rgba(80,103,179,.16), transparent 36%), #090d17; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.how__intro h2 span { color: var(--gold); }
.step { border-color: rgba(184,199,231,.12); }
.step__icon { border-color: rgba(184,199,231,.17); border-radius: 13px; color: var(--gold); background: rgba(255,255,255,.02); }
/* Светлая тема: блок «Как это работает» становится светлым */
:root[data-theme="light"] .how { background: radial-gradient(circle at 15% 20%, rgba(66,99,217,.07), transparent 36%), rgba(255,255,255,.72); border-color: rgba(21,25,35,.08); box-shadow: 0 20px 45px rgba(21,25,35,.08); color: var(--ink); }
:root[data-theme="light"] .how__intro h2 { color: var(--ink); }
:root[data-theme="light"] .how__intro h2 span { color: var(--accent); }
:root[data-theme="light"] .how__intro p { color: var(--muted); }
:root[data-theme="light"] .step { border-color: rgba(21,25,35,.1); }
:root[data-theme="light"] .step h3 { color: var(--ink); }
:root[data-theme="light"] .step p { color: var(--muted); }
:root[data-theme="light"] .step__number { color: var(--accent); }
:root[data-theme="light"] .step__icon { border-color: rgba(154,116,47,.28); color: var(--accent); background: rgba(255,255,255,.6); }
:root[data-theme="light"] .how .button--lime { color: #fff; }
.review-card { border-radius: 18px; }
.review-avatar { background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); color: var(--accent); }
.mini-game { border-radius: 20px; }
.mini-game.won { box-shadow: 0 20px 45px color-mix(in srgb, var(--accent) 12%, transparent); }
.vault-display { border: 1px solid rgba(184,199,231,.12); border-radius: 14px; background: radial-gradient(circle at 50% 20%, #17213c, #080c16 70%); }
.duel-round { border-radius: 14px; }
.support { border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 22px; background: linear-gradient(110deg, #9b7a3d, #c5a96d); color: #14110a; }
.support__icon { border-radius: 13px; }
.footer { background: color-mix(in srgb, var(--surface) 76%, transparent); }
.footer__top { padding-block: 52px; }
.footer__column h3 { color: var(--ink); }
.support-widget__toggle { border-radius: 28px; background: #121827; color: #edf0f7; }
.support-widget__toggle-icon { color: #17130b; }

.celestial-scene { overflow: hidden; border-radius: 20px; background: radial-gradient(circle at 50% 35%, rgba(68,88,144,.13), transparent 42%); }
.celestial-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; pointer-events: none; filter: saturate(.9) contrast(1.04); transition: opacity 1.2s ease; }
/* Статичный фотокадр сцены: два снимка, переключаемые темой */
.celestial-scene__photo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.2s ease; }
.celestial-scene__photo--light { opacity: 0; }
:root[data-theme="light"] .celestial-scene__photo--light { opacity: 1; }
:root[data-theme="light"] .celestial-scene__photo--dark { opacity: 0; }
.webgl-ready .celestial-canvas { opacity: 1; }
.cinematic-sky { position: absolute; inset: -8%; background: url('/media/sky-dark.jpg') center / cover no-repeat; pointer-events: none; }
.cinematic-sky--back { z-index: 0; opacity: .58; filter: brightness(.42) saturate(.68) contrast(1.22); animation: cinematic-sky-drift 34s ease-in-out infinite alternate; }
.cinematic-sky--front { z-index: 3; opacity: .22; background-position: center bottom; filter: brightness(.34) saturate(.55) blur(9px); mask-image: linear-gradient(transparent 38%, #000 94%); animation: cinematic-sky-front 26s ease-in-out infinite alternate; }
@keyframes cinematic-sky-drift { from { transform: scale(1.14) translate3d(-1.5%, 0, 0); } to { transform: scale(1.2) translate3d(1.5%, -1%, 0); } }
@keyframes cinematic-sky-front { from { transform: scale(1.22) translate3d(-3%, 3%, 0); } to { transform: scale(1.3) translate3d(3%, 1%, 0); } }
@media (prefers-reduced-motion: reduce) { .cinematic-sky { animation: none; } }
.cinematic-lightning { position: absolute; top: 2%; z-index: 3; width: 120px; height: 72%; opacity: var(--flash, 0); pointer-events: none; filter: drop-shadow(0 0 5px #b9d5ff) drop-shadow(0 0 16px #86a9ff); }
.cinematic-lightning path { stroke: #e4efff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cinematic-lightning--left { left: 2%; }
.cinematic-lightning--right { right: 1%; }
.cinematic-flash { position: absolute; inset: 0; z-index: 4; background: radial-gradient(circle at 45% 20%, #e4edff, #7799df 55%, transparent 90%); opacity: calc(var(--flash, 0) * .2); mix-blend-mode: screen; pointer-events: none; }
.cinematic-vignette { position: absolute; inset: 0; z-index: 4; background: radial-gradient(ellipse at 50% 43%, transparent 42%, rgba(4,7,14,.18) 68%, rgba(4,7,14,.74) 100%); box-shadow: inset 0 0 70px rgba(2,4,10,.3); pointer-events: none; }
.celestial-scene__sector, .celestial-scene__footer { position: absolute; z-index: 5; }
.celestial-scene[data-webgl="ready"] .celestial-scene__footer > span { color: #aab8d2; text-shadow: 0 1px 8px #050912; }

@media (max-width: 1240px) {
  .header__inner { gap: 17px; }
  .header__nav--pages { gap: 15px; margin-left: 4px; }
  .header__nav--pages > a { font-size: 11px; }
  .header-chat span { display: none; }
  .quick-world { gap: 8px; }
  .quick-world__icon { width: 48px; height: 48px; }
  .quick-world strong { font-size: 10px; }
  .quick-world small { display: none; }
}

@media (max-width: 1120px) {
  .header__nav--pages { display: none; }
  .hero--gateway { padding: 44px 38px; }
  .quick-worlds { gap: 9px; }
  .quick-world { flex-direction: column; text-align: center; }
  .quick-worlds__all { flex-direction: row; }
}

@media (max-width: 900px) {
  .container { width: min(100% - 36px, 720px); }
  .hero--gateway { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 40px; }
  .hero--gateway .hero__content, .celestial-scene { min-width: 0; }
  .hero--gateway .hero__content { max-width: 640px; }
  .hero--gateway h1 { max-width: 640px; font-size: clamp(38px, 7vw, 52px); }
  .celestial-scene { min-height: 450px; }
  .quick-worlds { display: flex; overflow-x: auto; padding-bottom: 7px; scrollbar-width: none; }
  .quick-worlds::-webkit-scrollbar { display: none; }
  .quick-world { min-width: 86px; }
  .quick-worlds__all { min-width: 105px; }
}

@media (max-width: 600px) {
  .container { width: calc(100% - 28px); }
  .header__inner { min-height: 66px; }
  .header__nav--account > .header-chat, .header__nav--account > .header__login { display: none; }
  .topline__inner { min-height: 30px; }
  .hero--gateway { width: calc(100% - 20px); min-height: 0; margin-top: 16px; padding: 28px 20px 18px; border-radius: 22px; }
  .hero--gateway .eyebrow { margin-bottom: 20px; font-size: 7px; }
  .hero--gateway h1 { margin-bottom: 19px; font-size: 31px; line-height: 1.14; letter-spacing: -.05em; }
  .hero--gateway .hero__description { margin-bottom: 22px; font-size: 12px; line-height: 1.7; }
  .hero-search { height: 54px; padding-left: 12px; }
  .hero-search input { font-size: 11px; }
  .hero-search button { padding-inline: 14px; font-size: 10px; }
  .hero--gateway .popular-search { gap: 10px; font-size: 9px; }
  .hero--gateway .popular-search button { font-size: 9px; }
  .hero--gateway .hero__facts { margin-top: 23px; }
  .celestial-scene { min-height: 345px; margin-inline: -15px; }
  .celestial-scene__sector { top: 10px; right: 15px; font-size: 7px; }
  .celestial-scene__footer { left: 18px; right: 18px; bottom: 0; font-size: 7px; }
  .celestial-scene__footer small { font-size: 7px; }
  .quick-worlds-shell { margin-top: 12px; padding: 13px; border-radius: 17px; }
  .quick-world { min-width: 72px; }
  .quick-world__icon { width: 46px; height: 46px; border-radius: 14px; }
  .quick-world strong { font-size: 9px; }
  .quick-worlds__all { min-width: 88px; font-size: 9px; }
  .directions { padding-top: 48px; }
  .direction-card { min-height: 155px; padding: 16px; }
  .direction-card__number { right: 14px; top: 14px; }
  .direction-card__content strong { font-size: 11px; }
  .trust-row { margin-top: 46px; }
  .catalog { padding-top: 52px; }
  .game-card { border-radius: 14px; }
  .page-intro { padding: 30px 0 26px; }
  .page-intro h1 { font-size: 29px; }
  .page-breadcrumbs { margin-bottom: 24px; }
  .game-page__hero h1 { font-size: 26px; }
  .how { border-radius: 20px; }
  .support { border-radius: 18px; }
  .footer__top { padding-block: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .celestial-scene__loading > span { animation: none; }
}

/* ===== Глобальное живое небо на весь сайт ===== */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); pointer-events: none; }
.sky__layer { position: absolute; inset: -7%; background-position: center; background-size: cover; background-repeat: no-repeat; transition: opacity 1.4s ease; will-change: transform, opacity; }
.sky__layer--dark { background-image: url('/media/sky-dark.jpg'); opacity: 1; filter: brightness(1.18) saturate(1.06); animation: sky-drift 72s ease-in-out infinite alternate; }
.sky__layer--light { background-image: url('/media/sky-light.jpg'); opacity: 0; animation: sky-drift 84s ease-in-out infinite alternate-reverse; }
:root[data-theme="light"] .sky__layer--dark { opacity: 0; }
:root[data-theme="light"] .sky__layer--light { opacity: 1; }
@keyframes sky-drift { from { transform: scale(1.06) translate3d(-1.2%, 0, 0); } to { transform: scale(1.14) translate3d(1.2%, -1.6%, 0); } }
.sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,16,.38), rgba(7,9,16,.22) 38%, rgba(7,9,16,.56)); transition: background 1.4s ease; }
:root[data-theme="light"] .sky::after { background: linear-gradient(180deg, rgba(240,243,249,.34), rgba(238,241,246,.22) 38%, rgba(232,236,244,.5)); }
.sky__sun { position: absolute; top: -14%; right: -8%; width: 56vmax; height: 56vmax; background: radial-gradient(circle, rgba(255,240,198,.95), rgba(255,206,120,.38) 34%, transparent 68%); opacity: 0; mix-blend-mode: screen; transition: opacity 1.4s ease; animation: sky-sun-pulse 9s ease-in-out infinite; }
:root[data-theme="light"] .sky__sun { opacity: .85; }
@keyframes sky-sun-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.sky__flash { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 32% 8%, #e9f1ff, #8aa8e8 46%, transparent 78%); opacity: 0; mix-blend-mode: screen; animation: sky-flash 13s linear infinite; }
:root[data-theme="light"] .sky__flash { animation: none; opacity: 0; }
@keyframes sky-flash {
  0%, 6.2%, 8.4%, 41%, 44.2%, 100% { opacity: 0; }
  6.8% { opacity: .42; }
  7.6% { opacity: .14; }
  42% { opacity: .3; }
  43.1% { opacity: .1; }
}

/* ===== Hero: светлая тема и стеклянность ===== */
:root[data-theme="light"] .hero--gateway {
  border-color: rgba(255, 255, 255, .65);
  background: radial-gradient(circle at 79% 45%, rgba(120, 142, 210, .16), transparent 34%), radial-gradient(circle at 13% 105%, rgba(168, 132, 200, .12), transparent 42%), linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(233, 238, 246, .46) 65%, rgba(209, 220, 236, .52));
  box-shadow: 0 30px 80px rgba(60, 75, 110, .16), inset 0 1px 0 rgba(255, 255, 255, .65);
  color: #232a3c;
}
:root[data-theme="light"] .hero--gateway::before { opacity: .15; }
:root[data-theme="light"] .hero--gateway::after { box-shadow: inset 0 0 120px rgba(130, 150, 190, .14); }
:root[data-theme="light"] .hero--gateway .eyebrow { color: #5d6a84; }
:root[data-theme="light"] .hero--gateway h1 { color: #1a2130; }
:root[data-theme="light"] .hero--gateway h1 span { background: linear-gradient(115deg, #b4832f, #6d5118 72%); background-clip: text; -webkit-background-clip: text; }
:root[data-theme="light"] .hero--gateway .hero__description { color: #4c5871; }
:root[data-theme="light"] .hero-search { border-color: rgba(90, 110, 150, .3); background: rgba(255, 255, 255, .68); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 14px 35px rgba(60, 75, 110, .12); }
:root[data-theme="light"] .hero-search svg { color: #5d6a84; }
:root[data-theme="light"] .hero-search input { color: #1a2130; }
:root[data-theme="light"] .hero-search input::placeholder { color: #828da1; }
:root[data-theme="light"] .hero__catalog-link { color: #39435a; }
:root[data-theme="light"] .hero--gateway .popular-search { color: #5d6a84; }
:root[data-theme="light"] .hero--gateway .popular-search button { color: #4c5871; border-color: rgba(90, 110, 150, .38); }
:root[data-theme="light"] .hero--gateway .popular-search button:hover { color: var(--gold); border-color: var(--gold); }
:root[data-theme="light"] .hero--gateway .hero__facts { border-color: rgba(90, 110, 150, .28); color: #4c5871; }
:root[data-theme="light"] .hero--gateway .hero__facts b { color: #1a2130; }

/* ===== Сцена: светлая тема ===== */
:root[data-theme="light"] .celestial-scene { background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .3), transparent 46%); }
:root[data-theme="light"] .celestial-scene__stars { opacity: .12; }
:root[data-theme="light"] .cinematic-sky--back { background-image: url('/media/sky-light.jpg'); opacity: .9; filter: brightness(.95) saturate(1.05) contrast(1.04); }
:root[data-theme="light"] .cinematic-sky--front { background-image: url('/media/sky-light.jpg'); opacity: .08; filter: brightness(1.06) saturate(.9) blur(10px); }
:root[data-theme="light"] .cinematic-lightning, :root[data-theme="light"] .cinematic-flash { display: none; }
:root[data-theme="light"] .cinematic-vignette { background: radial-gradient(ellipse at 50% 43%, transparent 52%, rgba(226, 233, 244, .16) 74%, rgba(203, 214, 231, .42) 100%); box-shadow: inset 0 0 60px rgba(140, 160, 200, .14); }
:root[data-theme="light"] .celestial-scene__loading { background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .52), rgba(224, 231, 241, .88) 70%); color: #4c5871; }
:root[data-theme="light"] .celestial-scene__loading > span { border-color: rgba(141, 107, 44, .5); color: #8d6b2c; }
:root[data-theme="light"] .celestial-scene__sector { color: #6b7690; }
:root[data-theme="light"] .celestial-scene__footer { color: #5d6a84; }
:root[data-theme="light"] .celestial-scene__footer i { background: #c9a45c; box-shadow: 0 0 12px rgba(201, 164, 92, .85); }
:root[data-theme="light"] .celestial-scene[data-webgl="ready"] .celestial-scene__footer > span { color: #4c5871; text-shadow: 0 1px 8px rgba(255, 255, 255, .75); }

@media (prefers-reduced-motion: reduce) {
  .sky__layer, .sky__sun, .sky__flash { animation: none; }
}

/* ===== Небо сквозит сквозь поверхности на всех страницах ===== */
.topline { background: rgba(5, 7, 12, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
:root[data-theme="light"] .topline { background: rgba(255, 255, 255, .5); color: #4c5871; }
.game-card, .subscription-card, .review-card, .direction-card, .mini-game, .topup-workbench, .how, .support, .community-channels, .wonder-tab, .game-page__hero {
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}
.footer { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

/* Кнопка темы в шапке: компактная иконка, панель под ней */
.header__appearance { flex-shrink: 0; position: relative; }
.header__appearance .appearance__toggle { padding: 6px; border-radius: 10px; }
.header__appearance .appearance__toggle span { display: none; }
.header__appearance .appearance__toggle svg { width: 19px; height: 19px; }
.header__appearance .appearance__panel { right: -8px; }

/* ===== Читаемость на десктопе: весь интерфейс крупнее ===== */
/* Хочешь крупнее/мельче — поменяй коэффициент (1.05–1.3) */
@media (min-width: 1100px) {
  body { zoom: 1.15; }
}

/* ===== Переключатель темы: круглая кнопка солнце/луна ===== */
.appearance__toggle { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.header__appearance .appearance__toggle, .mobile-menu__appearance .appearance__toggle { padding: 0; border-radius: 50%; }
.appearance__toggle:hover { border-color: var(--accent); transform: scale(1.07); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent); }
.appearance__toggle svg { width: 18px; height: 18px; }


/* ===== Статичные карты: без анимаций и наклона за курсором ===== */
.wallet-card, .topup-coin, .black-card-model__card { animation: none; }
.topup-scene__object { transition: none; }

/* ===== Быстрые суммы: крупнее, живое активное состояние ===== */
.topup-quick-amounts button { padding: 12px 6px; font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 700; border-radius: 10px; transition: transform .12s ease, background .18s, color .18s, border-color .18s, box-shadow .18s; }
.topup-quick-amounts button:active { transform: scale(.93); }
.topup-quick-amounts button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: scale(1.06); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); }


/* ===== Карты Lootvex: фотодизайн и выбор тарифа ===== */
.topup-scene { min-height: 0; display: block; background: transparent; overflow: visible; perspective: none; }
.topup-scene::before { display: none; }
.topup-scene__object { position: relative; width: 100%; height: auto; transform: none; scale: 1; will-change: auto; }
.topup-card-img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .3); }
:root[data-theme="light"] .topup-card-img { box-shadow: 0 30px 60px rgba(40, 50, 80, .28), 0 4px 14px rgba(40, 50, 80, .16); }
.topup-card-img__total { position: absolute; left: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 12px; background: rgba(8, 10, 16, .74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; }
.topup-card-img__total span { font-size: 9px; font-weight: 700; letter-spacing: .16em; opacity: .72; }
.topup-card-img__total strong { font-size: 21px; font-weight: 800; letter-spacing: .01em; }
.topup-card-img__fee { position: absolute; top: 14px; right: 14px; padding: 7px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent); }
.topup-card-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.topup-card-switch button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: left; transition: transform .15s ease, border-color .15s, box-shadow .15s, background .15s; }
.topup-card-switch button strong { font-size: 13px; color: var(--ink); }
.topup-card-switch button small { font-size: 11px; color: var(--muted); }
.topup-card-switch button:hover { transform: translateY(-2px); border-color: var(--accent); }
.topup-card-switch button:active { transform: scale(.96); }
.topup-card-switch button.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent); }
.black-card-model__img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
@media (max-width: 640px) {
  .topup-card-switch { grid-template-columns: 1fr; }
  .topup-card-img__total strong { font-size: 17px; }
}

/* ===== Светлая тема: iOS Glass — матовое стекло ===== */
:root[data-theme="light"] .game-card,
:root[data-theme="light"] .subscription-card,
:root[data-theme="light"] .digital-card,
:root[data-theme="light"] .review-card,
:root[data-theme="light"] .mini-game,
:root[data-theme="light"] .empty-state,
:root[data-theme="light"] .topup-layout,
:root[data-theme="light"] .purchase-panel,
:root[data-theme="light"] .offer-filters,
:root[data-theme="light"] .lot-table,
:root[data-theme="light"] .community-shell,
:root[data-theme="light"] .appearance__panel,
:root[data-theme="light"] .mobile-menu,
:root[data-theme="light"] .support-widget__panel,
:root[data-theme="light"] .footer,
:root[data-theme="light"] dialog {
  background: rgba(255, 255, 255, .52);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border-color: rgba(255, 255, 255, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 18px 45px rgba(30, 40, 66, .12);
}
:root[data-theme="light"] .lot-row { background: transparent; }
:root[data-theme="light"] .how { backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); }
:root[data-theme="light"] .header { background: rgba(255, 255, 255, .55); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border-bottom-color: rgba(255, 255, 255, .6); }

/* Баннер поддержки: стекло вместо сплошной заливки */
:root[data-theme="light"] .support {
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 22px 50px rgba(30, 40, 66, .14);
  color: var(--ink);
}
:root[data-theme="light"] .support h2 { color: var(--ink); }
:root[data-theme="light"] .support p { color: var(--muted); opacity: 1; }
:root[data-theme="light"] .support__icon { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); border-radius: 12px; background: rgba(255, 255, 255, .55); }

/* Чат поддержки внутри стеклянной панели */
:root[data-theme="light"] .support-widget__messages { background: transparent; }
:root[data-theme="light"] .support-widget__message p { background: rgba(255, 255, 255, .62); }
:root[data-theme="light"] .support-widget__form textarea { background: rgba(255, 255, 255, .6); }

/* ===== Тёмная тема: iOS Glass — тёмное матовое стекло ===== */
:root[data-theme="dark"] .game-card,
:root[data-theme="dark"] .subscription-card,
:root[data-theme="dark"] .digital-card,
:root[data-theme="dark"] .review-card,
:root[data-theme="dark"] .mini-game,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .topup-layout,
:root[data-theme="dark"] .purchase-panel,
:root[data-theme="dark"] .offer-filters,
:root[data-theme="dark"] .lot-table,
:root[data-theme="dark"] .community-shell,
:root[data-theme="dark"] .appearance__panel,
:root[data-theme="dark"] .mobile-menu,
:root[data-theme="dark"] .support-widget__panel,
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] dialog {
  background: rgba(13, 17, 27, .55);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 45px rgba(0, 0, 0, .35);
}
:root[data-theme="dark"] .lot-row { background: transparent; }
:root[data-theme="dark"] .how { backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }

/* Баннер поддержки: тёмное стекло вместо сплошного золота */
:root[data-theme="dark"] .support {
  background: rgba(13, 17, 27, .55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 22px 50px rgba(0, 0, 0, .38);
  color: var(--ink);
}
:root[data-theme="dark"] .support h2 { color: var(--ink); }
:root[data-theme="dark"] .support p { color: var(--muted); opacity: 1; }
:root[data-theme="dark"] .support__icon { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); border-radius: 12px; background: rgba(255, 255, 255, .06); }

/* Чат поддержки в тёмном стекле */
:root[data-theme="dark"] .support-widget__messages { background: transparent; }
:root[data-theme="dark"] .support-widget__message p { background: rgba(255, 255, 255, .05); }
:root[data-theme="dark"] .support-widget__form textarea { background: rgba(7, 9, 16, .45); }

/* ===== Пополнение: единые синие кнопки (в цвет кнопки поддержки) ===== */
.topup-quick-amounts button.active {
  background: var(--highlight);
  border-color: var(--highlight);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--highlight) 38%, transparent);
}
button.topup-add.button--accent { background: var(--highlight); color: #fff; }
button.topup-add.button--accent:hover { background: color-mix(in srgb, var(--highlight) 86%, #ffffff); }
:root[data-theme="dark"] .topup-quick-amounts button.active,
:root[data-theme="dark"] button.topup-add.button--accent { color: #171815; }

/* ===== Аккаунты: регистрация, пользователь в шапке ===== */
.header__register { padding: 10px 17px; }
.header__user { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.header__user-avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--highlight); color: #fff; font-weight: 800; font-size: 12px; }
.header__user-name { font-size: 12px; font-weight: 700; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }

/* Вкладки «Вход / Регистрация» в диалоге */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.auth-tabs button { padding: 9px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.auth-tabs button.active { background: var(--highlight); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--highlight) 30%, transparent); }
.auth-error { margin: 0 0 13px; color: var(--danger); font-size: 11px; line-height: 1.5; }
:root[data-theme="dark"] .auth-tabs button.active { color: #171815; }

/* Кнопка «Зарегистрироваться» — синяя, как остальные CTA */
.header__register.button--accent { background: var(--highlight); color: #fff; }
.header__register.button--accent:hover { background: color-mix(in srgb, var(--highlight) 86%, #ffffff); }
:root[data-theme="dark"] .header__register.button--accent { color: #171815; }