/* ── vendor/fonts/google.css ───────────────────────────────── */
/* latin-ext */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg69CK48gW7PXoo9Wdhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2?v=2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(vendor/fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */


/* JetBrains Mono — только для блока с данными для входа.
   Обычный шрифт сайта (Montserrat) рисует I и l двумя одинаковыми штрихами,
   а 0 и O отличает лишь шириной: клиенты не могли набрать пароль на консоли.
   Здесь у нуля точка внутри, у строчной l хвостик, у заглавной I засечки. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(vendor/fonts/jetbrains-mono-latin.woff2?v=1) format('woff2');
  unicode-range: U+0020-007F;
}

/* ── vendor/phosphor/bold.css ───────────────────────────────── */
@font-face {
  font-family: "Phosphor-Bold";
  src: url("vendor/phosphor/Phosphor-Bold.woff2?v=8") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ph-bold {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor-Bold" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph-bold.ph-archive:before {
  content: "\e00c";
}
.ph-bold.ph-arrow-square-out:before {
  content: "\e5de";
}
.ph-bold.ph-arrows-clockwise:before {
  content: "\e094";
}
.ph-bold.ph-at:before {
  content: "\e0ac";
}
.ph-bold.ph-biohazard:before {
  content: "\e9e0";
}
.ph-bold.ph-boxing-glove:before {
  content: "\ea36";
}
.ph-bold.ph-car-simple:before {
  content: "\e114";
}
.ph-bold.ph-caret-left:before {
  content: "\e138";
}
.ph-bold.ph-caret-right:before {
  content: "\e13a";
}
.ph-bold.ph-caret-up:before {
  content: "\e13c";
}
.ph-bold.ph-chat-circle-dots:before {
  content: "\e16c";
}
.ph-bold.ph-chat-circle-text:before {
  content: "\e16e";
}
.ph-bold.ph-check-circle:before {
  content: "\e184";
}
.ph-bold.ph-checks:before {
  content: "\e53a";
}
.ph-bold.ph-clock:before {
  content: "\e19a";
}
.ph-bold.ph-clock-countdown:before {
  content: "\ed2c";
}
.ph-bold.ph-compass:before {
  content: "\e1c8";
}
.ph-bold.ph-copy:before {
  content: "\e1ca";
}
.ph-bold.ph-cowboy-hat:before {
  content: "\ed12";
}
.ph-bold.ph-cpu:before {
  content: "\e610";
}
.ph-bold.ph-credit-card:before {
  content: "\e1d2";
}
.ph-bold.ph-crosshair:before {
  content: "\e1d6";
}
.ph-bold.ph-crosshair-simple:before {
  content: "\e1d8";
}
.ph-bold.ph-crown:before {
  content: "\e614";
}
.ph-bold.ph-desktop-tower:before {
  content: "\e562";
}
.ph-bold.ph-dice-five:before {
  content: "\e1ee";
}
.ph-bold.ph-envelope-simple:before {
  content: "\e218";
}
.ph-bold.ph-eye-slash:before {
  content: "\e224";
}
.ph-bold.ph-film-slate:before {
  content: "\e8c2";
}
.ph-bold.ph-film-strip:before {
  content: "\e792";
}
.ph-bold.ph-fire:before {
  content: "\e242";
}
.ph-bold.ph-flag:before {
  content: "\e244";
}
.ph-bold.ph-flame:before {
  content: "\e624";
}
.ph-bold.ph-flower-lotus:before {
  content: "\e6cc";
}
.ph-bold.ph-game-controller:before {
  content: "\e26e";
}
.ph-bold.ph-gear-six:before {
  content: "\e272";
}
.ph-bold.ph-ghost:before {
  content: "\e62a";
}
.ph-bold.ph-gift:before {
  content: "\e276";
}
.ph-bold.ph-globe-hemisphere-east:before {
  content: "\e28a";
}
.ph-bold.ph-globe-hemisphere-west:before {
  content: "\e28c";
}
.ph-bold.ph-goggles:before {
  content: "\ecb4";
}
.ph-bold.ph-headset:before {
  content: "\e584";
}
.ph-bold.ph-heart:before {
  content: "\e2a8";
}
.ph-bold.ph-horse:before {
  content: "\e2b0";
}
.ph-bold.ph-hourglass:before {
  content: "\e2b2";
}
.ph-bold.ph-hourglass-medium:before {
  content: "\e2b8";
}
.ph-bold.ph-house:before {
  content: "\e2c2";
}
.ph-bold.ph-image:before {
  content: "\e2ca";
}
.ph-bold.ph-images:before {
  content: "\e836";
}
.ph-bold.ph-info:before {
  content: "\e2ce";
}
.ph-bold.ph-key:before {
  content: "\e2d6";
}
.ph-bold.ph-lightning:before {
  content: "\e2de";
}
.ph-bold.ph-list-bullets:before {
  content: "\e2f2";
}
.ph-bold.ph-magic-wand:before {
  content: "\e6b6";
}
.ph-bold.ph-magnifying-glass:before {
  content: "\e30c";
}
.ph-bold.ph-map-trifold:before {
  content: "\e31a";
}
.ph-bold.ph-medal:before {
  content: "\e320";
}
.ph-bold.ph-microphone:before {
  content: "\e326";
}
.ph-bold.ph-moon-stars:before {
  content: "\e58e";
}
.ph-bold.ph-package:before {
  content: "\e390";
}
.ph-bold.ph-paper-plane-right:before {
  content: "\e396";
}
.ph-bold.ph-paper-plane-tilt:before {
  content: "\e398";
}
.ph-bold.ph-paperclip:before {
  content: "\e39a";
}
.ph-bold.ph-person-simple-run:before {
  content: "\e730";
}
.ph-bold.ph-prohibit:before {
  content: "\e3de";
}
.ph-bold.ph-puzzle-piece:before {
  content: "\e596";
}
.ph-bold.ph-question:before {
  content: "\e3e8";
}
.ph-bold.ph-receipt:before {
  content: "\e3ec";
}
.ph-bold.ph-rocket:before {
  content: "\e3fc";
}
.ph-bold.ph-seal-check:before {
  content: "\e606";
}
.ph-bold.ph-share-network:before {
  content: "\e408";
}
.ph-bold.ph-shield-check:before {
  content: "\e40c";
}
.ph-bold.ph-shield-slash:before {
  content: "\e410";
}
.ph-bold.ph-shield-star:before {
  content: "\ec34";
}
.ph-bold.ph-shield-warning:before {
  content: "\e412";
}
.ph-bold.ph-shopping-bag:before {
  content: "\e416";
}
.ph-bold.ph-shopping-cart-simple:before {
  content: "\e420";
}
.ph-bold.ph-sign-in:before {
  content: "\e428";
}
.ph-bold.ph-sign-out:before {
  content: "\e42a";
}
.ph-bold.ph-skull:before {
  content: "\e916";
}
.ph-bold.ph-sliders-horizontal:before {
  content: "\e434";
}
.ph-bold.ph-soccer-ball:before {
  content: "\e716";
}
.ph-bold.ph-sparkle:before {
  content: "\e6a2";
}
.ph-bold.ph-squares-four:before {
  content: "\e464";
}
.ph-bold.ph-stairs:before {
  content: "\e8ec";
}
.ph-bold.ph-star:before {
  content: "\e46a";
}
.ph-bold.ph-steering-wheel:before {
  content: "\e9ac";
}
.ph-bold.ph-storefront:before {
  content: "\e470";
}
.ph-bold.ph-strategy:before {
  content: "\ea3a";
}
.ph-bold.ph-sun:before {
  content: "\e472";
}
.ph-bold.ph-sword:before {
  content: "\e5ba";
}
.ph-bold.ph-tag:before {
  content: "\e478";
}
.ph-bold.ph-telegram-logo:before {
  content: "\e5bc";
}
.ph-bold.ph-tent:before {
  content: "\e8ba";
}
.ph-bold.ph-ticket:before {
  content: "\e490";
}
.ph-bold.ph-trophy:before {
  content: "\e67e";
}
.ph-bold.ph-user:before {
  content: "\e4c2";
}
.ph-bold.ph-user-circle:before {
  content: "\e4c4";
}
.ph-bold.ph-users:before {
  content: "\e4d6";
}
.ph-bold.ph-users-three:before {
  content: "\e68e";
}
.ph-bold.ph-warning:before {
  content: "\e4e0";
}
.ph-bold.ph-warning-circle:before {
  content: "\e4e2";
}
.ph-bold.ph-x:before {
  content: "\e4f6";
}
.ph-bold.ph-x-circle:before {
  content: "\e4f8";
}

/* ── vendor/phosphor/fill.css ───────────────────────────────── */
@font-face {
  font-family: "Phosphor-Fill";
  src: url("vendor/phosphor/Phosphor-Fill.woff2?v=8") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ph-fill {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor-Fill" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph-fill.ph-archive:before {
  content: "\e00c";
}
.ph-fill.ph-arrow-square-out:before {
  content: "\e5de";
}
.ph-fill.ph-arrows-clockwise:before {
  content: "\e094";
}
.ph-fill.ph-at:before {
  content: "\e0ac";
}
.ph-fill.ph-biohazard:before {
  content: "\e9e0";
}
.ph-fill.ph-boxing-glove:before {
  content: "\ea36";
}
.ph-fill.ph-car-simple:before {
  content: "\e114";
}
.ph-fill.ph-caret-left:before {
  content: "\e138";
}
.ph-fill.ph-caret-right:before {
  content: "\e13a";
}
.ph-fill.ph-caret-up:before {
  content: "\e13c";
}
.ph-fill.ph-chat-circle-dots:before {
  content: "\e16c";
}
.ph-fill.ph-chat-circle-text:before {
  content: "\e16e";
}
.ph-fill.ph-check-circle:before {
  content: "\e184";
}
.ph-fill.ph-checks:before {
  content: "\e53a";
}
.ph-fill.ph-clock:before {
  content: "\e19a";
}
.ph-fill.ph-clock-countdown:before {
  content: "\ed2c";
}
.ph-fill.ph-compass:before {
  content: "\e1c8";
}
.ph-fill.ph-copy:before {
  content: "\e1ca";
}
.ph-fill.ph-cowboy-hat:before {
  content: "\ed12";
}
.ph-fill.ph-cpu:before {
  content: "\e610";
}
.ph-fill.ph-credit-card:before {
  content: "\e1d2";
}
.ph-fill.ph-crosshair:before {
  content: "\e1d6";
}
.ph-fill.ph-crosshair-simple:before {
  content: "\e1d8";
}
.ph-fill.ph-crown:before {
  content: "\e614";
}
.ph-fill.ph-desktop-tower:before {
  content: "\e562";
}
.ph-fill.ph-dice-five:before {
  content: "\e1ee";
}
.ph-fill.ph-envelope-simple:before {
  content: "\e218";
}
.ph-fill.ph-eye-slash:before {
  content: "\e224";
}
.ph-fill.ph-film-slate:before {
  content: "\e8c2";
}
.ph-fill.ph-film-strip:before {
  content: "\e792";
}
.ph-fill.ph-fire:before {
  content: "\e242";
}
.ph-fill.ph-flag:before {
  content: "\e244";
}
.ph-fill.ph-flame:before {
  content: "\e624";
}
.ph-fill.ph-flower-lotus:before {
  content: "\e6cc";
}
.ph-fill.ph-game-controller:before {
  content: "\e26e";
}
.ph-fill.ph-gear-six:before {
  content: "\e272";
}
.ph-fill.ph-ghost:before {
  content: "\e62a";
}
.ph-fill.ph-gift:before {
  content: "\e276";
}
.ph-fill.ph-globe-hemisphere-east:before {
  content: "\e28a";
}
.ph-fill.ph-globe-hemisphere-west:before {
  content: "\e28c";
}
.ph-fill.ph-goggles:before {
  content: "\ecb4";
}
.ph-fill.ph-headset:before {
  content: "\e584";
}
.ph-fill.ph-heart:before {
  content: "\e2a8";
}
.ph-fill.ph-horse:before {
  content: "\e2b0";
}
.ph-fill.ph-hourglass:before {
  content: "\e2b2";
}
.ph-fill.ph-hourglass-medium:before {
  content: "\e2b8";
}
.ph-fill.ph-house:before {
  content: "\e2c2";
}
.ph-fill.ph-image:before {
  content: "\e2ca";
}
.ph-fill.ph-images:before {
  content: "\e836";
}
.ph-fill.ph-info:before {
  content: "\e2ce";
}
.ph-fill.ph-key:before {
  content: "\e2d6";
}
.ph-fill.ph-lightning:before {
  content: "\e2de";
}
.ph-fill.ph-list-bullets:before {
  content: "\e2f2";
}
.ph-fill.ph-magic-wand:before {
  content: "\e6b6";
}
.ph-fill.ph-magnifying-glass:before {
  content: "\e30c";
}
.ph-fill.ph-map-trifold:before {
  content: "\e31a";
}
.ph-fill.ph-medal:before {
  content: "\e320";
}
.ph-fill.ph-microphone:before {
  content: "\e326";
}
.ph-fill.ph-moon-stars:before {
  content: "\e58e";
}
.ph-fill.ph-package:before {
  content: "\e390";
}
.ph-fill.ph-paper-plane-right:before {
  content: "\e396";
}
.ph-fill.ph-paper-plane-tilt:before {
  content: "\e398";
}
.ph-fill.ph-paperclip:before {
  content: "\e39a";
}
.ph-fill.ph-person-simple-run:before {
  content: "\e730";
}
.ph-fill.ph-prohibit:before {
  content: "\e3de";
}
.ph-fill.ph-puzzle-piece:before {
  content: "\e596";
}
.ph-fill.ph-question:before {
  content: "\e3e8";
}
.ph-fill.ph-receipt:before {
  content: "\e3ec";
}
.ph-fill.ph-rocket:before {
  content: "\e3fc";
}
.ph-fill.ph-seal-check:before {
  content: "\e606";
}
.ph-fill.ph-share-network:before {
  content: "\e408";
}
.ph-fill.ph-shield-check:before {
  content: "\e40c";
}
.ph-fill.ph-shield-slash:before {
  content: "\e410";
}
.ph-fill.ph-shield-star:before {
  content: "\ec34";
}
.ph-fill.ph-shield-warning:before {
  content: "\e412";
}
.ph-fill.ph-shopping-bag:before {
  content: "\e416";
}
.ph-fill.ph-shopping-cart-simple:before {
  content: "\e420";
}
.ph-fill.ph-sign-in:before {
  content: "\e428";
}
.ph-fill.ph-sign-out:before {
  content: "\e42a";
}
.ph-fill.ph-skull:before {
  content: "\e916";
}
.ph-fill.ph-sliders-horizontal:before {
  content: "\e434";
}
.ph-fill.ph-soccer-ball:before {
  content: "\e716";
}
.ph-fill.ph-sparkle:before {
  content: "\e6a2";
}
.ph-fill.ph-squares-four:before {
  content: "\e464";
}
.ph-fill.ph-stairs:before {
  content: "\e8ec";
}
.ph-fill.ph-star:before {
  content: "\e46a";
}
.ph-fill.ph-steering-wheel:before {
  content: "\e9ac";
}
.ph-fill.ph-storefront:before {
  content: "\e470";
}
.ph-fill.ph-strategy:before {
  content: "\ea3a";
}
.ph-fill.ph-sun:before {
  content: "\e472";
}
.ph-fill.ph-sword:before {
  content: "\e5ba";
}
.ph-fill.ph-tag:before {
  content: "\e478";
}
.ph-fill.ph-telegram-logo:before {
  content: "\e5bc";
}
.ph-fill.ph-tent:before {
  content: "\e8ba";
}
.ph-fill.ph-ticket:before {
  content: "\e490";
}
.ph-fill.ph-trophy:before {
  content: "\e67e";
}
.ph-fill.ph-user:before {
  content: "\e4c2";
}
.ph-fill.ph-user-circle:before {
  content: "\e4c4";
}
.ph-fill.ph-users:before {
  content: "\e4d6";
}
.ph-fill.ph-users-three:before {
  content: "\e68e";
}
.ph-fill.ph-warning:before {
  content: "\e4e0";
}
.ph-fill.ph-warning-circle:before {
  content: "\e4e2";
}
.ph-fill.ph-x:before {
  content: "\e4f6";
}
.ph-fill.ph-x-circle:before {
  content: "\e4f8";
}

/* ── app.css ───────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Запрет приближения пальцами (щипок) и двойным касанием. pan-x pan-y = браузеру
   разрешено ТОЛЬКО прокручивать, любые масштабирующие жесты отключены. Работает
   там, где мета-тег viewport игнорируется, — в первую очередь на iOS.
   Важно: обычная прокрутка не страдает, а элементы со своим touch-action
   (ползунок бонусов — none, лента скриншотов — pan-y) сохраняют своё поведение. */
html,body{touch-action:pan-x pan-y}
/* Не меняет вид (скрыт визуально), но виден скринридерам и поисковым роботам —
   у сайта раньше не было ни одного <h1>/<h2> нигде, кроме одного случайного
   <h3> в самом низу FAQ. См. buildGenreHome()/buildGameDetail(). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root{
  --bg:#f2f2f7;
  --bg2:#ffffff;
  --bg3:#e5e5ea;
  --text:#1c1c1e;
  --muted:#8e8e93;
  --accent:#f97316;
  --accent2:#ea6010;
  --radius:14px;
  --shadow:0 2px 12px rgba(0,0,0,.08),0 0 0 0.5px rgba(0,0,0,.06);
  --shadow-sm:0 1px 4px rgba(0,0,0,.08);
  --border:rgba(0,0,0,.08);
}
/* Тёмная тема — только сайт (переключатель в профиле), Mini App не трогаем.
   Почти все компоненты уже используют var(--bg)/(--bg2)/(--bg3)/(--text)/(--muted),
   поэтому одной переменной-палитры хватает, чтобы перекрасить весь интерфейс. */
body.dark-theme{
  --bg:#0c0c0e;
  --bg2:#1c1c1f;
  --bg3:#2c2c30;
  --text:#f2f2f7;
  --muted:#9a9aa2;
  --shadow:0 2px 12px rgba(0,0,0,.35),0 0 0 0.5px rgba(255,255,255,.06);
  --shadow-sm:0 1px 4px rgba(0,0,0,.3);
  --border:rgba(255,255,255,.08);
}
body.dark-theme .login-google-btn{background:var(--bg2);color:var(--text);border-color:var(--bg3)}
body.dark-theme .card-media-wrap,body.dark-theme .gd-hero-wrap{background:var(--bg3)}
/* На тёмном фоне полупрозрачная чёрная box-shadow (--shadow-sm) не даёт
   эффекта "тени под карточкой" как на светлой теме — вместо этого на стыке
   размытия и обложки получается едва заметный серый ободок вокруг всей
   картинки, который выглядит как грязь/дефект. В тёмных интерфейсах тени
   для глубины обычно не нужны — просто убираем её у обложек игр/жанров. */
body.dark-theme .game-card-img,body.dark-theme .game-card-ph,
body.dark-theme .genre-card-img,body.dark-theme .genre-card-ph{box-shadow:none}

/* ── Блоки бонусов на тёмной теме ─────────────────────────────────────────
   Цвета внутри этих карточек подбирались под СВЕТЛЫЙ фон: тёмно-коричневый
   #6b4f00 для названия бонуса, #8a6200 для срока, тёмно-оранжевый и
   тёмно-зелёный для меток, подложка rgba(0,0,0,.04). На фоне #0c0c0e это
   тёмное по тёмному — текст почти не читается, а сами карточки с заливкой
   в 5-10 % прозрачности сливаются с фоном. Отсюда и ощущение мутности.
   Здесь те же элементы получают светлые оттенки и заметную подложку. */
body.dark-theme .preorder-bonus-card{
  background:linear-gradient(135deg,rgba(212,160,23,.16),rgba(245,200,66,.07));
  border-color:rgba(240,208,96,.45)}
body.dark-theme .preorder-bonus-until{color:#f0d060;background:rgba(212,160,23,.24)}
body.dark-theme .preorder-bonus-name{color:#f0d060}
body.dark-theme .gta-plus-row{background:rgba(255,255,255,.06)}
body.dark-theme .p3-bonus-warn{
  background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.42)}
body.dark-theme .p3-bonus-warn-row{border-bottom-color:rgba(249,115,22,.18)}
body.dark-theme .p3-bonus-warn-note{border-top-color:rgba(249,115,22,.18)}
body.dark-theme .p3bw-chip.maybe{background:rgba(249,115,22,.26);color:#ffb27a}
body.dark-theme .p3bw-chip.ok{background:rgba(52,199,89,.22);color:#7fe0a0}
/* ── Переключатель темы (профиль, только сайт) ── */
.theme-toggle-row{display:flex;align-items:center;justify-content:space-between;background:var(--bg2);border-radius:14px;padding:14px 16px;margin-bottom:8px}
.theme-toggle-label{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--text)}
.theme-toggle-icon{width:36px;height:36px;border-radius:10px;background:rgba(99,102,241,.15);display:flex;align-items:center;justify-content:center;font-size:17px;color:#6366f1;flex-shrink:0}
.theme-switch{position:relative;width:48px;height:28px;flex-shrink:0;display:block}
.theme-switch input{opacity:0;width:0;height:0;position:absolute}
.theme-switch-track{position:absolute;inset:0;background:var(--bg3);border-radius:14px;cursor:pointer;transition:background .2s}
.theme-switch-track::before{content:'';position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.theme-switch input:checked + .theme-switch-track{background:var(--accent)}
.theme-switch input:checked + .theme-switch-track::before{transform:translateX(20px)}
body{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);height:var(--app-height,100vh);overflow:hidden;font-size:15px;display:flex;justify-content:center}
#app{display:flex;flex-direction:column;height:var(--app-height,100vh);width:100%;max-width:430px;background:var(--bg);position:relative}
/* На САЙТЕ в телефоне высоту задаёт сам браузер через dvh, а не наша
   JS-переменная. --app-height пересчитывается по событию resize, а Safari его
   при появлении и скрытии своих панелей — той самой полосы «уменьшите защиту»,
   баннера «открыть в приложении» и адресной строки при прокрутке — присылает
   не всегда. Высота оставалась прежней, и нижнее меню зависало над реальным
   низом экрана, оставляя пустую полосу. dvh следит за этим сам, без JS.
   В Mini App правило НЕ действует (там нет класса web-mode): туда нужна
   именно keyboard-stable высота от Telegram, иначе меню поедет при открытии
   клавиатуры. Для десктопа ниже своё правило в @media (min-width:900px) —
   оно идёт позже и перекрывает это. */
@supports (height: 100dvh){
  body.web-mode,
  body.web-mode #app{height:100dvh}
}
/* ── Уведомления на сайте: пилюля-счётчик и всплывающий тост ── */
.notify-pill{background:var(--accent);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.notify-toast-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom));z-index:9000;width:min(420px,calc(100vw - 24px));pointer-events:none}
@media(min-width:900px){.notify-toast-wrap{bottom:24px}}
.notify-toast{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--bg3);box-shadow:0 8px 30px rgba(0,0,0,.28);border-radius:16px;padding:13px 15px;cursor:pointer;pointer-events:auto;animation:notifyIn .28s cubic-bezier(.2,.9,.3,1.2)}
.notify-toast.leaving{animation:notifyOut .22s ease forwards}
.notify-toast-ico{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;background:rgba(249,115,22,.14)}
.notify-toast-ico.chat{background:rgba(0,136,204,.16)}
/* Готовые данные — зелёным, с полосой слева: отличать их от ответа поддержки
   нужно с одного взгляда, потому что действие требуется разное. */
.notify-toast-ico.ready{background:rgba(29,185,110,.18)}
.notify-toast.ready{border-left:3px solid #1db96e}
.notify-toast.ready .notify-toast-go{background:rgba(29,185,110,.16);color:#0b7a45}
body.dark-theme .notify-toast.ready .notify-toast-go{color:#5dd97d}
.notify-toast-txt{flex:1;min-width:0}
.notify-toast-title{font-size:13.5px;font-weight:800;color:var(--text);line-height:1.25}
.notify-toast-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.notify-toast-go{font-size:12px;font-weight:800;color:var(--accent);flex-shrink:0}
@keyframes notifyIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes notifyOut{to{opacity:0;transform:translateY(10px) scale(.97)}}

/* ── Cart badge (bnav) ── */
.cart-badge{position:absolute;top:-2px;right:-2px;background:var(--accent);color:#fff;font-size:9px;font-weight:800;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;border:2px solid var(--bg2)}
/* Футер сайта (не Mini App) — в конце содержимого каждого экрана, см.
   buildSiteFooter() / buildPage(). На узком экране колонки стоят одна под
   другой, на широком (body.web-mode, см. ниже) — в ряд. */
.site-footer{margin-top:72px;padding:28px 16px calc(24px + env(safe-area-inset-bottom));background:var(--bg2);border-radius:20px 20px 0 0;display:flex;flex-direction:column;gap:26px}
.site-footer-logo{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;color:var(--text)}
.site-footer-logo span{color:var(--accent)}
.site-footer-about{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:8px;max-width:340px}
.site-footer-social{display:flex;gap:10px;margin-top:14px}
.site-footer-social-btn{width:38px;height:38px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--text);font-size:18px;text-decoration:none;transition:background .15s,color .15s}
.site-footer-social-btn:hover{background:var(--accent);color:#fff}
.site-footer-hdr{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px}
.site-footer-steps{padding-left:18px;font-size:12.5px;color:var(--text);line-height:1.7}
.site-footer-steps li{margin-bottom:6px}
.site-footer-link{display:block;font-size:13px;color:var(--text);text-decoration:none;padding:6px 0;opacity:.85}
.site-footer-link:hover{opacity:1;color:var(--accent)}
.site-footer-copyright{text-align:center;font-size:11.5px;color:var(--muted);padding:16px 16px calc(20px + env(safe-area-inset-bottom));background:var(--bg2);border-top:1px solid var(--bg3)}
/* ── Content ── */
.content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;display:flex;flex-direction:column}
/* Обёртка вокруг самого контента экрана (не футера) — flex:1 внутри .content
   гарантирует, что футер сайта всегда прижат к низу экрана, даже если сам
   контент короткий (например, профиль без входа, пустая корзина) — раньше
   футер просто шёл сразу за коротким контентом, а не в конец видимой области. */
/* ── Данные для входа ─────────────────────────────────────────────────────
   Обычный шрифт сайта (Montserrat) рисует I и l двумя одинаковыми штрихами,
   а 0 и O отличает только шириной — набрать такой пароль на консоли нельзя.
   Здесь моноширинный JetBrains Mono: у нуля точка внутри, у строчной l
   хвостик, у заглавной I засечки. Плюс цифры и символы подкрашены, чтобы
   0 и O различались ещё и цветом, а не только начертанием. */
.creds-box{font-family:'JetBrains Mono',ui-monospace,'SF Mono','Cascadia Mono','Segoe UI Mono',Menlo,Consolas,monospace;font-variant-ligatures:none;font-size:13.5px;line-height:1.75;letter-spacing:.2px;color:var(--text);white-space:pre-wrap;word-break:break-word;background:var(--bg3);border-radius:10px;padding:12px 13px;-webkit-user-select:text;user-select:text}
.creds-box.old{font-size:12.5px;padding:10px}
.creds-d{color:#e8873a;font-weight:700}
body.dark-theme .creds-d{color:#ffa552}
.creds-p{color:#8e8e93}

/* Разбор по символам — для набора на геймпаде, когда скопировать нельзя */
.creds-bd-btn{width:100%;margin-top:8px;background:none;border:1.5px solid var(--bg3);border-radius:10px;padding:9px 12px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:border-color .15s,color .15s;font-family:inherit}
.creds-bd-btn:hover{border-color:var(--accent);color:var(--accent)}
.creds-bd{margin-top:10px;display:none;flex-direction:column;gap:12px}
.creds-bd.on{display:flex}
.creds-bd-line{background:var(--bg3);border-radius:10px;padding:10px 11px}
.creds-bd-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.creds-bd-chips{display:flex;flex-wrap:wrap;gap:4px}
.creds-chip{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:26px;padding:5px 4px 4px;background:var(--bg2);border:1px solid transparent;border-radius:7px}
.creds-chip b{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:15px;font-weight:700;color:var(--text);line-height:1}
.creds-chip i{font-size:8.5px;font-style:normal;font-weight:700;color:var(--muted);letter-spacing:.2px;line-height:1.1;text-align:center;white-space:nowrap}
/* Спорные символы — те, из-за которых всё и затевалось */
.creds-chip.amb{border-color:rgba(249,115,22,.5);background:rgba(249,115,22,.1)}
.creds-chip.amb i{color:var(--accent)}
.creds-chip.dig b{color:#e8873a}
body.dark-theme .creds-chip.dig b{color:#ffa552}
/* ── Ход выполнения оплаченного заказа ──────────────────────────────────── */
.order-progress{background:rgba(255,193,7,.08);border:1px solid rgba(255,193,7,.28);border-radius:14px;padding:13px 15px;margin-bottom:10px}
.order-progress.work{background:rgba(93,169,255,.09);border-color:rgba(93,169,255,.3)}
.order-progress.done{background:rgba(93,217,125,.08);border-color:rgba(93,217,125,.25)}
.order-progress-hdr{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;color:var(--text);line-height:1.3}
.order-progress-hdr i{font-size:19px;flex-shrink:0;color:#ffc107}
.order-progress.work .order-progress-hdr i{color:#5da9ff}
.order-progress.done .order-progress-hdr i{color:#5dd97d}
.order-progress-sub{font-size:12px;color:var(--muted);font-weight:600;margin-top:8px}
.order-progress-note{font-size:12.5px;color:var(--text);line-height:1.55;margin-top:7px;opacity:.9}
.order-progress-notify{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding-top:10px;border-top:1px solid var(--bg3)}
.order-progress-notify i{font-size:15px;color:var(--muted);flex-shrink:0;margin-top:1px}
.order-progress-notify span{font-size:12px;color:var(--muted);line-height:1.5}
.order-progress-notify b{color:var(--text);font-weight:700;overflow-wrap:anywhere}

/* ── Продавец просит новый токен ────────────────────────────────────────── */
/* Просьба заметнее остальных примечаний в карточке: пока человек её не
   увидит, заказ стоит. Цвет — акцентный, но фон приглушённый: это не ошибка. */
.order-progress-notify.token-req i{color:var(--accent)}
.token-req-open{display:block;margin-top:8px;background:var(--accent);color:#fff;border:none;
  border-radius:10px;padding:9px 14px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer}
.token-req-open:hover{filter:brightness(1.08)}
.token-req-help{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.22);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.token-req-help-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:6px}
.token-req-help-steps{font-size:12.5px;line-height:1.6;color:var(--muted);word-break:break-word}
.token-req-warn{font-size:12px;line-height:1.5;color:#b45309;margin-top:8px}
body.dark-theme .token-req-warn{color:#fbbf24}
.token-req-form{margin-top:10px}
.token-req-form .promo-textarea{min-height:110px}
.token-req-actions{display:flex;gap:8px;align-items:stretch;margin-top:8px}
.token-req-actions .token-req-send{flex:1;margin:0}
.token-req-cancel{background:var(--bg3);color:var(--muted);border:none;border-radius:12px;
  padding:0 16px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
.token-req-cancel:hover{color:var(--text)}

/* ── Двухэтапная проверка: пояснение и гайд ─────────────────────────────── */
.twofa-why{display:flex;gap:9px;align-items:flex-start;background:rgba(93,169,255,.09);border:1px solid rgba(93,169,255,.25);border-radius:12px;padding:11px 13px;margin-top:8px}
.twofa-why i{font-size:17px;color:#5da9ff;flex-shrink:0;margin-top:1px}
.twofa-why span{font-size:12.5px;color:var(--text);line-height:1.55}
.twofa-why b{font-weight:800}

.twofa-step{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px}
.twofa-step:last-of-type{margin-bottom:10px}
.twofa-step-num{width:23px;height:23px;flex-shrink:0;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.twofa-step-body{flex:1;min-width:0}
.twofa-step-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:5px}
.twofa-step-text{font-size:12.5px;color:var(--text);line-height:1.65;opacity:.92}
.twofa-path{display:inline-block;font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;background:var(--bg3);border-radius:6px;padding:1px 6px;margin:1px 0;word-break:break-word}
.twofa-note{display:flex;gap:9px;align-items:flex-start;background:var(--bg3);border-radius:10px;padding:10px 12px}
.twofa-note i{font-size:15px;color:var(--muted);flex-shrink:0;margin-top:1px}
.twofa-note span{font-size:12px;color:var(--muted);line-height:1.55}
.promo-net-hint{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:6px}
.content-body{flex:1 0 auto}
/* Экран чата на телефоне и в мини-приложении: колонка во всю доступную высоту,
   чтобы список сообщений внутри получил ограниченную высоту и прокручивался
   сам. min-height:0 обязателен — без него флекс-элемент не даёт себя сжать
   ниже содержимого. На десктопе (от 900px) у чата своя раскладка с
   фиксированной высотой, там это правило не нужно и только мешало бы. */
@media (max-width:899px){
  .content-body.chat-mode{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
  /* Нижняя панель (каталог/поиск/корзина/профиль) на экране чата убирается —
     переписке отдаётся вся высота, а внизу остаётся только поле ввода. */
  body.chat-fullscreen .bnav{display:none}
  /* Ничего, кроме самой переписки, не прокручивается: и .content, и страница
     жёстко по высоте экрана. Скроллится только список сообщений внутри. */
  body.chat-fullscreen .content{overflow:hidden}
  /* Подвал сайта на экране чата забирал 426 из 753 пикселей высоты — переписке
     оставалось меньше трети экрана. В чате он не нужен. */
  .content-body.chat-mode ~ .site-footer,
  .content-body.chat-mode ~ .site-footer-copyright{display:none}
}
.content::-webkit-scrollbar{display:none}
/* ── Search ── */
.search-wrap{padding:10px 16px;background:var(--bg2);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.search-input{width:100%;background:var(--bg3);border:none;border-radius:999px;padding:11px 14px 11px 40px;color:var(--text);font-size:14px;font-family:'Montserrat',sans-serif;font-weight:600;outline:none;transition:box-shadow .15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:13px center}
.search-input:focus{box-shadow:0 0 0 3px rgba(249,115,22,.2)}
.search-input::placeholder{color:var(--muted)}
.search-svc-section{margin:12px 16px 4px}
.search-svc-hdr{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px 2px}
.search-svc-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.search-svc-row::-webkit-scrollbar{display:none}
.search-svc-card{flex:0 0 auto;width:130px;border-radius:16px;padding:12px 10px;cursor:pointer;color:#fff;display:flex;flex-direction:column;gap:7px;transition:transform .12s;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.search-svc-card:active{transform:scale(.96)}
.search-svc-card-icon{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.search-svc-card-icon svg{width:20px;height:20px}
.search-svc-card-name{font-size:12.5px;font-weight:800;line-height:1.25}
.search-svc-card-sub{font-size:9.5px;color:rgba(255,255,255,.82);line-height:1.3;font-weight:600}
/* ── Section title ── */
.sec-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;padding:14px 16px 10px;text-transform:uppercase;color:var(--text)}
/* ── Game grid ── */
.games-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 16px 80px}
.game-card{background:transparent;border-radius:0;overflow:visible;cursor:pointer;transition:transform .2s;position:relative}
/* card-media-wrap — обёртка вокруг обложки (плюс бейджи поверх). Сама
   обёртка раньше не имела ни border-radius, ни overflow:hidden — в светлой
   теме это было незаметно (фона у нее не было), но в тёмной теме ей
   добавляется background:var(--bg3) (см. body.dark-theme ниже), и этот
   ПРЯМОУГОЛЬНЫЙ фон торчал из-под скруглённых углов обложки поверх —
   тёмные уголки по краям карточки. Скругляем и обрезаем саму обёртку. */
.card-media-wrap{border-radius:var(--radius);overflow:hidden}
.game-card:active{transform:scale(.95)}
.game-card-img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:var(--radius)}
.game-card-img{box-shadow:var(--shadow-sm)}
.game-card-ph{width:100%;aspect-ratio:2/3;background:linear-gradient(135deg,#c9c9d0,#a0a0aa);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:rgba(255,255,255,.8);letter-spacing:1px;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.game-card-info{padding:7px 2px 0}
.game-card-price{font-size:14px;font-weight:800;color:var(--text);display:block;margin-bottom:2px}
.game-card-title{font-size:11px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted)}
.game-card-pl{font-size:9px;font-weight:600;color:var(--muted);margin-top:3px;display:block}
/* ── Pagination ── */
.pager{display:flex;justify-content:center;align-items:center;gap:12px;padding:10px 16px;flex-shrink:0}
.pager-btn{width:36px;height:36px;border-radius:50%;background:var(--bg2);border:none;color:var(--text);font-size:20px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:background .15s,color .15s;flex-shrink:0;line-height:1}
.pager-btn:not(:disabled):active{background:rgba(249,115,22,.12);color:var(--accent)}
.pager-btn:disabled{opacity:.3;cursor:default}
.pager-dots{display:flex;gap:6px;align-items:center}
.pager-dot{width:7px;height:7px;border-radius:50%;background:var(--bg3);transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0}
.pager-dot.active{background:var(--accent);width:22px;border-radius:4px}
/* ── Game Detail ── */
.gd-hero-wrap{position:relative;overflow:hidden}
/* Раньше обложка была жёстко 220px высотой с object-fit:cover — прямоугольные
   (не портретные) обложки обрезались или обрастали белыми полосами по бокам,
   если картинка квадратная/портретная и её вписывали в невысокую широкую
   рамку. Теперь высота идёт от самой картинки (height:auto) — какой
   формат у обложки, такой и остаётся, без обрезки и без белых полей. */
.gd-hero{width:100%;height:auto;display:block}
.gd-hero-ph{width:100%;height:220px;background:linear-gradient(135deg,var(--bg3),#1a2635);display:flex;align-items:center;justify-content:center;font-size:60px}
.gd-hero-grad{position:absolute;bottom:0;left:0;right:0;height:48px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.back-btn{position:absolute;top:12px;left:12px;width:36px;height:36px;background:rgba(0,0,0,.55);border:none;border-radius:50%;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.gd-body{padding:14px 16px 100px}
/* Блок "Информация" (платформа/язык/жанр/дата выхода) — единственное место,
   где это показывается (бейджи-дубликаты над названием убрали). На десктопе
   ниже переключается на двухколоночную карточку покрупнее. */
.gd-info-grid{display:flex;flex-direction:column;gap:2px;background:var(--bg2);border-radius:14px;padding:4px 16px;margin:14px 0}
/* Раньше строка была горизонтальной (label слева, value справа,
   align-items:center) — нормально смотрелось, пока значение помещалось в
   одну строку. Как только текст стал длиннее и перенёсся на 2 строки
   (например "Русская озвучка, интерфейс и субтитры"), label центрировался
   по высоте ДВУХ строк и визуально "съезжал" относительно короткого
   "Платформа" в соседней строке. Кладём label над value всегда — надёжно
   работает для текста любой длины. */
.gd-info-row{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 0;border-bottom:1px solid var(--bg3)}
.gd-info-row:last-child{border-bottom:none}
.gd-info-row-clickable{cursor:pointer}
.gd-info-row-clickable:active{opacity:.7}
.gd-info-label{display:block;font-size:12.5px;color:var(--muted)}
.gd-info-value{display:flex;align-items:center;gap:4px;font-size:13.5px;font-weight:700;color:var(--text)}
.gd-section-title{font-size:15px;font-weight:800;margin:18px 0 8px;color:var(--text)}
.gd-title{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:1.5px;margin-bottom:8px;line-height:1.2}
.gd-fav-btn{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--bg3);border:none;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,transform .1s}
.gd-fav-btn.active{background:rgba(239,68,68,.12);color:#ef4444}
.gd-fav-btn:active{transform:scale(.9)}
.card-fav-btn{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);border:none;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;cursor:pointer;transition:transform .1s,background .15s}
.card-fav-btn.active{background:#ef4444}
.card-fav-btn:active{transform:scale(.88)}

/* ── Добавление в избранное ────────────────────────────────────────────────
   Сердечко «отпружинивает», из-под него расходится кольцо и разлетаются
   искорки. Всё построено на transform и opacity — они считаются видеокартой,
   поэтому даже на слабом телефоне не дёргается (анимация ширины/высоты или
   top/left заставляла бы браузер пересчитывать раскладку каждый кадр). */
@keyframes favPop{
  0%   {transform:scale(1)}
  30%  {transform:scale(.82)}
  55%  {transform:scale(1.28)}
  75%  {transform:scale(.94)}
  100% {transform:scale(1)}
}
@keyframes favPopOff{
  0%   {transform:scale(1)}
  40%  {transform:scale(.8)}
  100% {transform:scale(1)}
}
.fav-anim-on  > i{animation:favPop .52s cubic-bezier(.34,1.56,.64,1)}
.fav-anim-off > i{animation:favPopOff .3s ease}

/* Кольцо и искры живут в отдельном слое поверх страницы (position:fixed),
   а не внутри кнопки: у карточки overflow:hidden, внутри он бы их обрезал. */
.fav-fx{position:fixed;pointer-events:none;z-index:10000;left:0;top:0;width:0;height:0}
.fav-fx-ring{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;
  border:2px solid #ef4444;opacity:.9;animation:favRing .6s cubic-bezier(.22,1,.36,1) forwards}
@keyframes favRing{
  0%   {transform:scale(.3);opacity:.9}
  100% {transform:scale(2.1);opacity:0}
}
.fav-fx-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:#ef4444;animation:favDot .62s cubic-bezier(.22,1,.36,1) forwards}
@keyframes favDot{
  0%   {transform:translate(0,0) scale(1);opacity:1}
  100% {transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}
}

/* Уважаем системную настройку «меньше движения»: там, где человек попросил
   отключить анимации, оставляем только мгновенную смену состояния. */
@media (prefers-reduced-motion: reduce){
  .fav-anim-on > i, .fav-anim-off > i{animation:none}
  .fav-fx{display:none}
}
.pl-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pl-badge{background:var(--bg3);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;color:var(--muted)}
.gd-desc{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:18px}
/* Скриншоты — отдельный цельный блок (карточка), как у конкурентов, со
   стрелками (работают и на ПК-клик, и на телефоне через тач-скролл) и
   drag-скроллом мышью на десктопе (initDragScroll, см. JS). */
.gd-screenshots-section{background:var(--bg2);border-radius:16px;padding:18px 16px;margin:20px 0 24px}
.gd-screenshots-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.gd-screenshots-title{font-size:15px;font-weight:800;color:var(--text)}
.gd-screenshots-arrows{display:flex;gap:8px}
.gd-screenshots-arrow{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--bg3);background:var(--bg);color:var(--text);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s}
.gd-screenshots-arrow:hover{background:rgba(249,115,22,.12);color:var(--accent);border-color:var(--accent)}
.gd-screenshots-arrow:active{transform:scale(.92)}
.gd-screenshots-row{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;cursor:grab}
.gd-screenshots-row.dragging{cursor:grabbing;scroll-behavior:auto}
.gd-screenshots-row::-webkit-scrollbar{display:none}
.gd-screenshot{flex:0 0 auto;height:130px;width:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:var(--bg3);cursor:pointer;user-select:none;-webkit-user-drag:none}
.gd-screenshots-arrow:disabled{opacity:.35;cursor:default}
.gd-screenshots-arrow:disabled:hover{background:var(--bg);color:var(--text);border-color:var(--bg3)}
/* ── Полноэкранный просмотрщик скриншотов — миниатюры слева, стрелки,
   крестик закрыть (как у конкурентов). ── */
/* var(--app-height) — JS-переменная, посчитанная под tg.viewportStableHeight
   для #app в целом (специально исключает высоту клавиатуры) — она могла ещё
   не успеть пересчитаться на актуальное значение к моменту открытия
   просмотрщика (гонка с раскрытием Telegram WebView через tg.expand()),
   отсюда — зажатое в маленький прямоугольник окно. Для полноэкранного
   оверлея (без текстовых полей внутри) не нужна именно keyboard-stable
   семантика — используем 100dvh: современная CSS-единица, которая сама,
   без единой строчки JS, всегда равна реально видимой области. Оставляем
   var(--app-height) как фолбэк для браузеров без поддержки dvh. */
.sv-overlay{--sv-thumbs-w:130px;position:fixed;inset:0;background:#0a0a0c;z-index:400;display:flex;align-items:stretch}
.sv-thumbs{width:var(--sv-thumbs-w);flex-shrink:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding:16px 12px;scrollbar-width:none}
.sv-thumbs::-webkit-scrollbar{display:none}
.sv-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;cursor:pointer;opacity:.5;border:2px solid transparent;transition:opacity .15s,border-color .15s;flex-shrink:0}
.sv-thumb.active{opacity:1;border-color:var(--accent)}
.sv-thumb:hover{opacity:.85}
.sv-main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;min-width:0;min-height:0}
/* Раньше .sv-close/.sv-nav стояли у краёв .sv-main (position:relative) —
   но .sv-main растянут на всю оставшуюся ширину экрана, а сама картинка
   (object-fit:contain, пропорции 16:9) внутри него ГОРАЗДО уже — на широком
   экране между кнопками и картинкой оставался огромный зазор.
   Раньше здесь был .sv-frame{display:inline-grid} с grid-area:1/1 у всех
   детей — на обычных браузерах (сайт) это отлично сжималось по размеру
   картинки, но в WebView Telegram (и на телефоне, и в Desktop/Web — то есть
   именно в родном движке Telegram, а не в браузере) inline-grid с процентными
   img внутри считался неправильно и просто схлопывался в маленький
   квадратик — воспроизвести это в обычном браузере невозможно, поэтому баг
   был не виден при тестировании. inline-block — гораздо более старый и
   универсально поддерживаемый способ "сжаться по контенту", без Grid
   вообще — обёртка сама подстраивается под РЕАЛЬНЫЙ размер картинки
   (intrinsic size, ограниченный max-width/max-height), кнопки — просто
   position:absolute внутри неё. */
.sv-frame{position:relative;display:inline-block;max-width:100%;max-height:100%;line-height:0;font-size:0}
.sv-frame img{display:block;max-width:100%;max-height:100%;border-radius:10px}
.sv-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.55);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .15s}
.sv-close:hover{background:rgba(0,0,0,.75)}
.sv-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.55);border:none;color:#fff;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .15s}
.sv-nav:hover{background:rgba(0,0,0,.75)}
.sv-prev{left:10px}
.sv-next{right:10px}
@media (max-width:900px){
  .sv-overlay{--sv-thumbs-w:70px}
}
@media (max-width:480px){
  .sv-overlay{--sv-thumbs-w:52px}
  .sv-thumb{border-width:1.5px}
  .sv-nav{width:34px;height:34px;font-size:16px}
}
/* Компактный режим (узкие экраны — телефон и панель мини-приложения
   Telegram): вместо колонки миниатюр — просто крестик над картинкой и
   стрелки по бокам + точки-индикатор снизу, плюс свайп пальцем. На
   ширине сайта колонка миниатюр остаётся как есть (её не трогаем). */
.sv-overlay.sv-compact{flex-direction:column}
/* Оверлей просмотрщика — position:fixed;inset:0, то есть занимает ВЕСЬ
   вьюпорт, включая ту область сверху, где в мини-приложении Telegram рисует
   свою собственную шапку (стрелка назад/меню) поверх нашего WebView —
   крестик на top:14px оказывался прямо под ней/впритык, визуально "очень
   сверху". --top-inset — та же переменная, что уже используется для отступа
   под шапку Telegram в остальном приложении (см. applyTopInset()) — берём
   её и здесь, чтобы крестик оказался явно НИЖЕ родной шапки Telegram, а не
   вплотную к ней. */
.sv-compact .sv-close-top{position:absolute;top:calc(var(--top-inset,50px) + 10px);right:14px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.55);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5}
.sv-compact .sv-close-top:hover{background:rgba(0,0,0,.75)}
.sv-compact .sv-main{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:60px 12px 20px;min-width:0;min-height:0;touch-action:pan-y}
.sv-compact .sv-img{display:block;max-width:100%;max-height:100%;border-radius:14px;pointer-events:none;user-select:none}
.sv-compact .sv-nav{top:50%}
.sv-compact .sv-dots{display:flex;justify-content:center;gap:6px;padding:2px 0 18px;flex-shrink:0}
.sv-compact .sv-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .15s,transform .15s}
.sv-compact .sv-dot.active{background:var(--accent);transform:scale(1.3)}
.label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.help-btn{background:var(--bg3);border:none;color:var(--muted);width:18px;height:18px;border-radius:50%;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700}
.type-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.type-opt{border:2px solid var(--bg3);background:var(--bg3);border-radius:var(--radius);padding:14px 12px;cursor:pointer;transition:all .18s;text-align:center}
.type-opt.sel{border-color:var(--accent);background:rgba(249,115,22,.1);box-shadow:0 0 0 1px rgba(249,115,22,.2),0 4px 16px rgba(249,115,22,.15)}
.type-opt-label{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.type-opt.sel .type-opt-label{color:var(--accent)}
.type-opt-price{font-size:20px;font-weight:800;color:var(--text)}
.type-opt-na{font-size:11px;color:var(--muted);margin-top:2px}
.btn-add{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:var(--radius);padding:16px;font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .15s,transform .1s;letter-spacing:.5px;box-shadow:0 6px 20px rgba(249,115,22,.35);font-family:'Montserrat',sans-serif}
.btn-add:active{opacity:.85;transform:scale(.98)}
.btn-add:disabled{background:var(--bg3);color:var(--muted);cursor:default;box-shadow:none}
/* ── Cart ── */
.cart-hdr{padding:18px 16px 10px;font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px}
.cart-items{padding:0 16px}
.cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--bg3);align-items:center}
.cart-item-img{width:58px;height:58px;border-radius:10px;object-fit:cover;background:var(--bg3);flex-shrink:0}
.cart-item-img-ph{width:58px;height:58px;border-radius:10px;background:var(--bg3);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:24px}
.cart-item-info{flex:1;min-width:0}
.cart-item-title{font-size:13px;font-weight:600;margin-bottom:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cart-item-sub{font-size:11px;color:var(--muted);margin-bottom:4px}
.cart-item-price{font-size:14px;font-weight:700;color:var(--accent)}
.cart-item-rm{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;flex-shrink:0;line-height:1;width:44px;height:44px;margin:-8px;display:flex;align-items:center;justify-content:center}
/* Экран "оплата открылась в новой вкладке" — список товаров заказа + карточка
   про безопасность оплаты (СБП/VPN), см. buildCart()/cartPayPending. */
.pay-pending-card{background:var(--bg2);border-radius:16px;padding:16px;margin:0 16px 12px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.pay-pending-card-hdr{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px}
.pay-pending-item{padding:8px 0;border-bottom:1px solid var(--bg3)}
.pay-pending-item:last-of-type{border-bottom:none}
.pay-pending-item-title{font-size:13px;font-weight:600}
.pay-pending-item-sub{font-size:11px;color:var(--muted);margin:2px 0}
.pay-pending-item-price{font-size:13px;font-weight:700;color:var(--accent)}
.pay-pending-total{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1.5px solid var(--bg3);font-size:14px;font-weight:800}
.pay-safety-card{background:var(--bg2);border-radius:16px;padding:16px;margin:0 16px 16px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.pay-safety-row{display:flex;align-items:flex-start;gap:11px;font-size:13px;line-height:1.5}
.pay-safety-row>i{font-size:20px;color:#22c55e;flex-shrink:0;margin-top:1px}
.pay-safety-row.pay-safety-warn>i{color:#f59e0b}
.pay-safety-divider{height:1px;background:var(--bg3);margin:12px 0}
.pay-safety-tip{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-top:5px}
.pay-safety-tip>i{font-size:14px;flex-shrink:0}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;padding:16px;margin-top:4px}
.cart-total-lbl{font-size:16px;color:var(--muted)}
.cart-total-val{font-size:22px;font-weight:800}
.terms-row{display:flex;align-items:flex-start;gap:12px;background:var(--bg2);border-radius:14px;padding:14px;margin:12px 16px 0;border:1.5px solid var(--bg3);transition:border-color .2s,background .2s}
.terms-row.terms-highlight{border-color:var(--accent)!important;background:rgba(249,115,22,.07)!important}
@keyframes termsShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.terms-row.terms-shake{animation:termsShake .4s ease}
.terms-row input{width:20px;height:20px;min-width:20px;margin-top:1px;accent-color:var(--accent);flex-shrink:0;cursor:pointer;border-radius:6px}
.terms-text{font-size:12px;color:var(--muted);line-height:1.6}
.terms-text a{color:var(--accent);text-decoration:none;font-weight:600}
.cart-order-wrap{padding:12px 16px 32px}
.btn-order{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:var(--radius);padding:16px;font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .15s,transform .1s;letter-spacing:.5px;box-shadow:0 6px 20px rgba(249,115,22,.35);font-family:'Montserrat',sans-serif}
.btn-order:active{opacity:.85;transform:scale(.98)}
.btn-order:disabled{background:var(--bg3);color:var(--muted);cursor:default;box-shadow:none}
.pay-disabled-notice{width:100%;padding:16px;background:var(--bg3);border-radius:var(--radius);color:var(--muted);font-size:14px;font-weight:600;text-align:center;line-height:1.5;border:1.5px solid var(--border)}
.off-hours-card{background:rgba(99,102,241,.07);border:1.5px solid rgba(99,102,241,.2);border-radius:18px;padding:22px 16px 18px;text-align:center}
.off-hours-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(99,102,241,.14);color:#6366f1;font-size:11px;font-weight:800;padding:4px 14px;border-radius:20px;margin-bottom:12px;letter-spacing:.3px}
.off-hours-title{font-size:15px;font-weight:800;color:var(--text);margin-bottom:8px}
.off-hours-hours{display:inline-block;font-size:12px;font-weight:800;color:#6366f1;background:rgba(99,102,241,.1);padding:5px 14px;border-radius:10px;margin-bottom:10px}
.off-hours-desc{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.btn-order-offhours{width:100%;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;border-radius:var(--radius);padding:15px;font-size:14px;font-weight:800;cursor:pointer;letter-spacing:.3px;margin-bottom:10px;box-shadow:0 6px 20px rgba(99,102,241,.3);font-family:'Montserrat',sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .15s,transform .1s}
.btn-order-offhours:active{opacity:.85;transform:scale(.98)}
.off-hours-or{font-size:12px;color:var(--muted)}
.confirm-ovl{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:flex-end;justify-content:center;z-index:150;opacity:0;pointer-events:none;transition:opacity .2s}
.confirm-ovl.open{opacity:1;pointer-events:all}
.confirm-sheet{background:var(--bg);border-radius:22px 22px 0 0;padding:24px 20px calc(36px + env(safe-area-inset-bottom));width:100%;max-width:480px;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,1,.6,1)}
.confirm-ovl.open .confirm-sheet{transform:translateY(0)}
.confirm-title{font-size:18px;font-weight:800;margin-bottom:6px;color:var(--text)}
.confirm-sub{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.5}
.confirm-info{background:var(--bg2);border-radius:14px;padding:14px 16px;margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.confirm-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text)}
.confirm-tag{font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap}
.confirm-warn{background:rgba(239,68,68,.1);border:1.5px solid rgba(239,68,68,.2);border-radius:12px;padding:12px 14px;font-size:12px;color:#ef4444;line-height:1.5;margin-bottom:18px;display:flex;align-items:flex-start;gap:8px}
.confirm-btn-main{width:100%;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;border:none;border-radius:14px;padding:15px;font-size:15px;font-weight:800;cursor:pointer;margin-bottom:12px;font-family:'Montserrat',sans-serif;letter-spacing:.3px}
.confirm-btn-back{width:100%;background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:4px;text-decoration:underline;font-family:'Montserrat',sans-serif}
/* ── Promo & Bonus ── */
.bonus-card{background:linear-gradient(135deg,#f97316,#ea6010);border-radius:18px;padding:18px 20px;margin:0 0 14px;display:flex;align-items:center;gap:16px;color:#fff;position:relative;overflow:hidden}
.bonus-card::before{content:'';position:absolute;right:-20px;top:-20px;width:100px;height:100px;background:rgba(255,255,255,.08);border-radius:50%}
.bonus-card-icon{font-size:34px;flex-shrink:0}
.bonus-card-amount{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1}
.bonus-card-label{font-size:12px;font-weight:600;opacity:.85;margin-top:4px}
.bonus-card-sub{font-size:11px;opacity:.7;margin-top:2px}
/* Клик "Обновить" на карточках, которые не смогли загрузиться (кешбек-уровень,
   реферальная статистика, баланс бонусов, заказы) — после 3 неудачных попыток
   показываем это сообщение, но параллельно продолжаем тихо пробовать в фоне
   каждые 20с — см. _autoRetry() и одноимённую логику в loadBonusBalance()/
   loadOrders(). Клик просто форсирует немедленную попытку. */
.load-fail-retry{cursor:pointer;opacity:.85}
.load-fail-retry:active{opacity:.6}
.level-card{background:linear-gradient(135deg,#7c3aed,#4f46e5);border-radius:18px;padding:18px 20px;margin-bottom:14px;color:#fff;position:relative;overflow:hidden}
.level-card::before{content:'';position:absolute;right:-20px;top:-20px;width:110px;height:110px;background:rgba(255,255,255,.07);border-radius:50%}
.level-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;position:relative}
.level-name{font-size:17px;font-weight:800;line-height:1.2}
.level-cashback-lbl{font-size:12px;opacity:.82;margin-top:4px}
.level-spent-wrap{text-align:right;flex-shrink:0}
.level-spent-lbl{font-size:10px;opacity:.7;text-transform:uppercase;letter-spacing:.5px}
.level-spent-val{font-size:16px;font-weight:800;line-height:1.1;margin-top:2px}
.level-progress-wrap{background:rgba(255,255,255,.2);border-radius:100px;height:5px;margin-bottom:8px;overflow:hidden;position:relative}
.level-progress-bar{height:100%;background:#fff;border-radius:100px;transition:width .6s ease}
.level-next-lbl{font-size:11px;opacity:.75}
.referral-card{background:linear-gradient(135deg,#0d9488,#0f766e);border-radius:18px;padding:18px 20px;color:#fff;position:relative;overflow:hidden}
.referral-card::before{content:'';position:absolute;right:-24px;top:-24px;width:120px;height:120px;background:rgba(255,255,255,.07);border-radius:50%}
.referral-card-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;position:relative}
.referral-card-icon{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.referral-card-title{font-size:15px;font-weight:800}
.referral-card-sub{font-size:12px;opacity:.85;margin-top:3px;line-height:1.4}
.referral-stats-row{display:flex;background:rgba(255,255,255,.1);border-radius:12px;margin-bottom:12px;position:relative}
.referral-stat{flex:1;text-align:center;padding:10px 4px}
.referral-stat-val{font-size:17px;font-weight:800;line-height:1.1}
.referral-stat-lbl{font-size:10.5px;opacity:.8;margin-top:2px}
.referral-link-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border-radius:12px;padding:11px 12px;margin-bottom:10px;position:relative}
.referral-link-text{flex:1;min-width:0;font-size:12px;font-family:'Montserrat',sans-serif;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.95}
.referral-copy-btn{flex-shrink:0;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.18);border:none;color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.referral-copy-btn:active{transform:scale(.92)}
.referral-share-btn{width:100%;background:#fff;color:#0f766e;border:none;border-radius:12px;padding:12px;font-size:13.5px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;position:relative;font-family:'Montserrat',sans-serif}
.referral-share-btn:active{opacity:.85}
.bonus-page-card{background:linear-gradient(135deg,#6d28d9,#4c1d95);border-radius:22px;padding:22px 20px;color:#fff;position:relative;overflow:hidden;margin-bottom:14px;box-shadow:0 8px 32px rgba(109,40,217,.35)}
.bonus-page-card::before{content:'';position:absolute;right:-30px;top:-30px;width:160px;height:160px;background:rgba(255,255,255,.07);border-radius:50%}
.bonus-page-card::after{content:'';position:absolute;left:-20px;bottom:-40px;width:110px;height:110px;background:rgba(255,255,255,.05);border-radius:50%}
.bonus-stat-chip{background:var(--bg2);border-radius:16px;padding:14px 16px;flex:1;border:1px solid var(--border)}
/* ── Страница "Наши отзывы" (профиль) ── */
.reviews-hero{text-align:center;background:linear-gradient(135deg,#f59e0b,#ea580c);border-radius:22px;padding:28px 20px 24px;color:#fff;margin-bottom:16px;box-shadow:0 8px 32px rgba(234,88,12,.3)}
.reviews-hero-badge{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px}
.reviews-hero-count{font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1}
.reviews-hero-sub{font-size:13px;opacity:.92;margin-top:8px;max-width:260px;margin-left:auto;margin-right:auto;line-height:1.5}
.reviews-hero-stars{margin-top:14px;font-size:18px;color:#ffe08a;display:flex;gap:4px;justify-content:center}
.review-src-card{background:var(--bg2);border:1.5px solid var(--bg3);border-radius:18px;padding:18px;margin-bottom:14px}
.review-src-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-src-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.review-src-name{font-size:14.5px;font-weight:800;color:var(--text)}
.review-src-count{font-size:12.5px;font-weight:700;color:var(--rc,var(--accent));margin-top:2px}
.review-src-desc{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.review-src-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;color:#fff;border:none;border-radius:13px;padding:13px;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:transform .1s}
.review-src-btn:active{transform:scale(.98)}
.reviews-trust-note{display:flex;gap:12px;background:rgba(93,217,125,.08);border:1.5px solid rgba(93,217,125,.22);border-radius:16px;padding:16px;margin-top:6px}
.reviews-trust-note i{font-size:22px;color:#5dd97d;flex-shrink:0;margin-top:1px}
.reviews-trust-note div{font-size:12.5px;color:var(--text);line-height:1.6}
.reviews-trust-note b{color:var(--text)}
.promo-section-wrap{background:var(--bg2);border-radius:16px;padding:16px;margin-bottom:10px}
.promo-input-wrap{display:flex;gap:8px;align-items:stretch;width:100%;overflow:hidden}
.promo-input{flex:1;min-width:0;background:var(--bg3);border:2px solid var(--bg3);border-radius:12px;padding:13px 14px;color:var(--text);font-size:14px;font-family:'Montserrat',sans-serif;font-weight:700;outline:none;transition:border-color .2s;letter-spacing:1px}
.promo-input:focus{border-color:var(--accent)}
.promo-input::placeholder{letter-spacing:0;font-weight:600}
.promo-btn{flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:12px;padding:13px 18px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;font-family:'Montserrat',sans-serif;transition:opacity .15s;letter-spacing:.3px}
.promo-btn:active{opacity:.8}
.promo-msg{font-size:13px;font-weight:600;margin-top:10px;min-height:0;padding:0;transition:all .2s;line-height:1.4;border-radius:8px}
.promo-msg.ok{color:#2ecc71;background:rgba(46,204,113,.1);padding:8px 12px;margin-top:10px}
.promo-msg.err{color:#e74c3c;background:rgba(231,76,60,.1);padding:8px 12px;margin-top:10px}
.promo-locked-note{display:flex;align-items:center;gap:8px;background:var(--bg3);color:var(--muted);font-size:13px;font-weight:600;padding:13px 14px;border-radius:12px}
.promo-locked-note i{color:var(--accent);font-size:16px}
/* ── Cart extras (promo + bonus) ── */
.cart-extras{padding:0 16px;display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.cart-promo-link{display:flex;align-items:center;justify-content:space-between;background:var(--bg2);border:none;border-radius:14px;padding:13px 14px;width:100%;cursor:pointer;text-align:left;transition:opacity .12s}
.cart-promo-link:active{opacity:.7}
.cart-promo-icon{width:36px;height:36px;border-radius:10px;background:rgba(249,115,22,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cart-bonus-wrap{background:linear-gradient(135deg,rgba(249,115,22,.08),rgba(234,96,16,.04));border:1.5px solid rgba(249,115,22,.2);border-radius:16px;padding:16px}
.cart-bonus-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cart-bonus-title{font-size:14px;font-weight:800;display:flex;align-items:center;gap:6px;color:var(--text)}
.cart-bonus-avail{font-size:12px;color:var(--accent);font-weight:700;background:rgba(249,115,22,.12);padding:3px 9px;border-radius:20px}
.bonus-slider{width:100%;accent-color:var(--accent);height:6px;cursor:pointer;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--bg3);outline:none;touch-action:none;margin:8px 0}
.bonus-slider::-webkit-slider-thumb{appearance:none;width:30px;height:30px;border-radius:50%;background:var(--accent);cursor:grab;box-shadow:0 2px 12px rgba(249,115,22,.5);border:3px solid #fff;active:cursor:grabbing}
.bonus-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}
.bonus-slider::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--accent);cursor:grab;box-shadow:0 2px 12px rgba(249,115,22,.5);border:3px solid #fff}
.cart-bonus-using{font-size:14px;font-weight:800;color:var(--accent);margin-top:12px;text-align:center}
.cart-bonus-note{font-size:12px;font-weight:600;color:var(--muted);margin-top:6px;text-align:center;opacity:.85}
.bonus-locked-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0}
.bonus-locked-track{width:100%;height:6px;background:var(--bg3);border-radius:3px;position:relative;overflow:hidden}
.bonus-locked-track::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--bg3)}
.bonus-locked-thumb{width:30px;height:30px;border-radius:50%;background:var(--bg3);border:3px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;margin:4px auto}
.bonus-locked-hint{font-size:11px;color:var(--muted);text-align:center}
.cart-promo-wrap{background:var(--bg2);border:1.5px solid var(--bg3);border-radius:16px;padding:14px 16px}
.cart-promo-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.cart-discount-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 0}
.cart-discount-lbl{font-size:13px;color:var(--accent);font-weight:700;display:flex;align-items:center;gap:5px}
.cart-discount-val{font-size:15px;color:var(--accent);font-weight:800}
/* ── Карточка кешбека в корзине — при смешанной корзине (игра + сервис/код)
   показывает разбивку по категориям (у каждой свой процент), плюс всегда
   доступное по клику объяснение "почему кешбек разный". ── */
.cashback-card{margin:10px 16px 0;padding:12px 16px;background:rgba(167,139,250,.1);border:1.5px solid rgba(167,139,250,.22);border-radius:14px}
.cashback-card.is-off{background:var(--bg3);border-color:var(--border)}
.cashback-card-hdr{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cashback-card-hdr-lbl{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
.cashback-card-hdr-lbl i{color:#a78bfa;font-size:15px}
.cashback-card-hdr-val{font-size:16px;font-weight:800;color:#a78bfa;white-space:nowrap}
.cashback-card.is-off .cashback-card-hdr-lbl{color:var(--muted)}
.cashback-card.is-off .cashback-card-hdr-lbl i{color:var(--muted)}
.cashback-card.is-off .cashback-card-hdr-val{color:var(--muted);font-size:13px;font-weight:600}
.cashback-rows{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(167,139,250,.25);display:flex;flex-direction:column;gap:7px}
.cashback-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text)}
.cashback-row-lbl{display:flex;align-items:center;gap:6px;opacity:.85}
.cashback-row-lbl i{font-size:13px;color:#a78bfa;width:14px;text-align:center;flex-shrink:0}
.cashback-row-val{font-weight:800;color:#a78bfa;white-space:nowrap;flex-shrink:0;margin-left:10px}
.cashback-row-muted .cashback-row-val{color:var(--muted);font-weight:600}
.cashback-off-note{margin-top:8px;font-size:11.5px;color:var(--muted);line-height:1.5}
.cashback-why-btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;border-top:1px solid rgba(167,139,250,.18);margin-top:10px;padding-top:9px;font-size:11.5px;font-weight:700;color:#a78bfa;cursor:pointer;opacity:.85}
.cashback-card.is-off .cashback-why-btn{border-top-color:var(--border);color:var(--muted)}
.cashback-why-body{margin-top:9px;display:flex;flex-direction:column;gap:8px}
.cashback-why-row{font-size:11.5px;line-height:1.55;color:var(--muted)}
.cashback-why-row b{color:var(--text)}
/* ── Empty ── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;color:var(--muted);text-align:center}
.empty-icon{font-size:40px;margin-bottom:18px;width:96px;height:96px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(249,115,22,.09)}
.empty-text{font-size:16px;margin-bottom:20px;line-height:1.5}
.btn-ghost{background:var(--bg3);color:var(--text);border:none;border-radius:var(--radius);padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer}
/* ── Modal ── */
.modal-ovl{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:flex-end;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-ovl.open{opacity:1;pointer-events:all}
.modal{background:var(--bg2);border-radius:20px 20px 0 0;padding:24px 20px calc(36px + env(safe-area-inset-bottom));width:100%;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1)}
.modal-ovl.open .modal{transform:translateY(0)}
/* Высота шторок — от ДИНАМИЧЕСКОЙ высоты вьюпорта (dvh), а не от vh.
   В Safari на iPhone vh — это высота экрана БЕЗ адресной строки. Пока строка
   видна, шторка в 88-90vh оказывается выше видимой области, и её верх —
   заголовок и первые пункты — уезжает под адресную строку: именно так
   обрезались "Что такое П2 и П3" и "Частые вопросы". dvh следит за строкой
   сам, без JS, и одинаково работает в Safari, Chrome и Firefox.
   Первая строка каждой пары — запас для браузеров без dvh (iOS до 15.4,
   Chrome до 108): там вычитаем высоту строки браузера вручную.
   env(safe-area-inset-top) — чтобы шторка не подлезала под чёлку, когда
   сайт открыт как приложение с домашнего экрана. */
.modal-ovl,.confirm-ovl{height:100vh;height:100dvh}
.modal,.confirm-sheet,.sub-info-sheet{
  max-height:calc(100vh - 64px);
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - 24px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.modal-title{font-size:17px;font-weight:800;margin-bottom:20px}
.modal-item{display:flex;gap:12px;margin-bottom:18px}
.modal-dot{flex-shrink:0;width:8px;height:8px;background:var(--accent);border-radius:50%;margin-top:6px}
.modal-item-title{font-size:14px;font-weight:700;margin-bottom:4px}
.modal-item-desc{font-size:13px;color:var(--muted);line-height:1.55}
.btn-ok{width:100%;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:14px;font-size:15px;font-weight:700;cursor:pointer;margin-top:8px}
/* ── Success ── */
.success-ovl{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;opacity:0;pointer-events:none;transition:opacity .3s;text-align:center;padding:40px}
.success-ovl.show{opacity:1;pointer-events:all}
.success-icon{font-size:72px;margin-bottom:20px}
.success-title{font-size:24px;font-weight:800;margin-bottom:12px}
.success-sub{font-size:15px;color:var(--muted);line-height:1.6}
/* ── Promo success toast ── */
.promo-toast{position:fixed;top:calc(var(--top-inset, 50px) + 8px);left:50%;transform:translateX(-50%) translateY(-80px);background:#1a1a2e;color:#fff;padding:12px 20px;border-radius:14px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,.3);z-index:9999;transition:transform .35s cubic-bezier(0.22,1,0.36,1),opacity .35s;opacity:0;pointer-events:none;white-space:nowrap;max-width:90vw}
.promo-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
/* Пружинка на въезде: чуть перелетает вниз и возвращается — движение читается
   как «прилетело», а не «проявилось». Уход остаётся спокойным (см. .promo-toast
   выше), чтобы не дёргать глаз, когда человек уже читает дальше. */
.promo-toast.show{animation:toastIn .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes toastIn{
  0%   {transform:translateX(-50%) translateY(-80px) scale(.92)}
  60%  {transform:translateX(-50%) translateY(6px)   scale(1.02)}
  100% {transform:translateX(-50%) translateY(0)     scale(1)}
}
/* Полоска снизу показывает, сколько уведомление ещё провисит — без неё оно
   пропадает внезапно, и непонятно, успел ты прочитать или нет. */
.promo-toast-bar{position:absolute;left:0;bottom:0;height:2.5px;width:100%;
  background:linear-gradient(90deg,#f97316,#fb923c);border-radius:0 0 14px 14px;transform-origin:left center}
.promo-toast.show .promo-toast-bar{animation:toastBar 3.5s linear forwards}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.promo-toast-icon{font-size:22px;flex-shrink:0}
.promo-toast.show .promo-toast-icon{animation:favPop .6s cubic-bezier(.34,1.56,.64,1) .08s both}
@media (prefers-reduced-motion: reduce){
  .promo-toast.show{animation:none}
  .promo-toast.show .promo-toast-icon{animation:none}
  .promo-toast.show .promo-toast-bar{animation:none}
}
.promo-toast-body{display:flex;flex-direction:column;gap:2px}
.promo-toast-title{font-size:13px;font-weight:800}
.promo-toast-sub{font-size:11px;font-weight:600;color:rgba(255,255,255,.7)}
/* ── Bottom nav ── */
.bnav{display:flex;background:var(--bg2);box-shadow:0 -1px 10px rgba(0,0,0,.07);border-radius:20px 20px 0 0;flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}
body.kb-open .bnav{display:none}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 2px 8px;cursor:pointer;border:none;background:none;color:var(--muted);font-size:9px;font-weight:700;transition:color .15s;letter-spacing:.3px;text-transform:uppercase}
.bnav-item.active{color:var(--accent)}
.bnav-item.active .bnav-icon-wrap{background:rgba(249,115,22,.12);border-radius:999px}
.bnav-icon-wrap{width:42px;height:28px;display:flex;align-items:center;justify-content:center;transition:background .15s;border-radius:999px}
@keyframes cartBump{0%{transform:scale(1)}35%{transform:scale(1.3)}60%{transform:scale(.92)}100%{transform:scale(1)}}
.cart-bump{animation:cartBump .42s cubic-bezier(.34,1.56,.64,1)}
.bnav-icon-wrap i{font-size:20px}
/* ── Profile page ── */
.profile-hdr{padding:20px 16px 8px;font-size:20px;font-weight:800;color:var(--text)}
.profile-section{padding:0 16px 12px}
.profile-section-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.profile-btn{display:flex;align-items:center;gap:12px;background:var(--bg2);border:none;width:100%;padding:14px 16px;border-radius:14px;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:8px;text-align:left}
.profile-btn-icon{font-size:22px;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.order-item{background:var(--bg2);border-radius:14px;padding:14px 16px;margin-bottom:8px}
/* ── Чат поддержки (только сайт) ── */
.support-pick-item{display:flex;align-items:center;justify-content:space-between;background:var(--bg2);border-radius:14px;padding:14px 16px;margin-bottom:8px;cursor:pointer}
/* Чат занимает оставшуюся высоту, а прокручивается ВНУТРЕННИЙ список.
   Раньше overflow-y:auto стоял только в десктопной медиа-выборке, и на
   телефоне список не был областью прокрутки вообще: list.scrollTop в коде
   был пустой операцией, чат открывался на самых старых сообщениях, и к
   новому приходилось листать руками. */
.support-chat-wrap{display:flex;flex-direction:column;flex:1;min-height:0}
.support-chat-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 16px 12px;display:flex;flex-direction:column;gap:3px}
/* Прижимает переписку к низу, пока она короткая. Отдельный псевдоэлемент,
   а не justify-content:flex-end: с flex-end при переполнении верхние
   сообщения обрезаются и до них нельзя доскроллить — известная беда
   флексбокса. */
.support-chat-list::before{content:"";margin-top:auto}
.support-msg{max-width:78%;width:fit-content;padding:8px 12px;border-radius:16px;font-size:14px;line-height:1.4;word-break:break-word;box-shadow:0 1px 3px rgba(0,0,0,.12);margin-bottom:3px}
.support-msg.client{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
/* Пузырь поддержки — сплошной приятный индиго, чтобы чётко отличаться и от
   оранжевых сообщений клиента, и от фона чата (var(--bg2) сливался с панелью
   чата, у которой тот же фон, — сообщение выглядело как "голый" текст без
   пузыря вообще). */
.support-msg.admin{align-self:flex-start;background:linear-gradient(135deg,#5b7cfa,#4c63e0);color:#fff;border-bottom-left-radius:4px}
.support-msg-text{display:block;white-space:pre-wrap}
.support-msg-time{font-size:10.5px;opacity:.65;margin-top:3px;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:4px}
.support-msg.admin .support-msg-time{opacity:.8}
.support-msg-media{display:block;max-width:220px;width:100%;border-radius:10px;margin-bottom:5px}
img.support-msg-media{cursor:zoom-in}
/* ── Разделитель непрочитанных ── */
.support-media-fail{display:flex;align-items:center;gap:6px;max-width:220px;width:100%;margin-bottom:5px;padding:14px 12px;border-radius:10px;border:1px dashed var(--border);background:var(--bg3);color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.support-media-fail i{font-size:16px;color:#ff9f0a;flex-shrink:0}
.support-media-fail u{margin-left:auto;color:var(--text);font-weight:700}
.support-older-btn{align-self:center;margin:0 0 10px;padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.support-older-btn:disabled{opacity:.6;cursor:default}
.support-pending-box{display:contents}
.support-msg-progress{margin-right:6px;font-weight:700}
/* ── Вложение на весь экран ── */
.media-viewer{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.93);display:flex;align-items:center;justify-content:center;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))}
.media-viewer img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.media-viewer-close{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:19px;display:flex;align-items:center;justify-content:center;cursor:pointer}
/* ── Лейбл "Поддержка" над группой сообщений от админа (Telegram-ответ) —
   показывается один раз перед первым сообщением подряд идущей группы,
   не над каждым сообщением, как в обычных мессенджерах. Цвет в тон пузырю
   сообщений поддержки — сразу видно, чьи это сообщения, даже до прочтения. ── */
.support-sender-label{display:flex;align-items:center;gap:7px;align-self:flex-start;margin:16px 0 4px;padding-left:1px}
.support-chat-list > .support-sender-label:first-child{margin-top:0}
.support-sender-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#5b7cfa,#4c63e0);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex-shrink:0;box-shadow:0 1px 4px rgba(76,99,224,.4)}
.support-sender-name{font-size:12px;font-weight:800;color:#5b7cfa;letter-spacing:.1px}
body.dark-theme .support-sender-name{color:#8ba3ff}
/* ── Статус отправки сообщения клиента — как в мессенджерах: часики пока
   letit "в полёте", галочки когда сервер подтвердил, восклицательный знак
   (кликабельный — повторная отправка) если не дошло. ── */
.support-msg-status{display:inline-flex;align-items:center}
.support-msg.client .support-msg-status{opacity:.85}
.support-msg-pending{opacity:.6}
.support-msg-error-row{align-self:flex-end;display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#ff5b5b;cursor:pointer;margin:-1px 2px 4px;padding:2px 4px}
.support-msg-error-row:hover{text-decoration:underline}
.support-chat-input-bar{position:sticky;bottom:0;display:flex;gap:8px;align-items:flex-end;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--bg2);border-top:1px solid var(--bg3);z-index:15}
.support-chat-attach-btn{width:44px;height:44px;border-radius:50%;background:var(--bg3);border:none;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.support-chat-attach-btn:hover{background:rgba(249,115,22,.14);color:var(--accent)}
.support-chat-input{flex:1;border:1.5px solid var(--bg3);border-radius:22px;padding:12px 18px;font-size:14.5px;line-height:1.4;background:var(--bg);color:var(--text);resize:none;min-height:46px;max-height:120px;font-family:inherit}
.support-chat-input:focus{outline:none;border-color:var(--accent)}
.support-chat-send{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;border:none;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer;transition:transform .1s,opacity .15s}
.support-chat-send:active{transform:scale(.94)}
.support-chat-send:disabled{opacity:.4;cursor:default}
.support-chat-preview{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bg2);border-top:1px solid var(--bg3)}
.support-chat-preview img,.support-chat-preview video{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--bg3)}
/* Значок вместо самого ролика: видео пришлось бы вставлять ссылкой data:
   целиком, а это десяток мегабайт строкой в разметке. */
.support-chat-preview-vid{width:44px;height:44px;border-radius:8px;background:var(--bg3);
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:20px;flex-shrink:0}
.support-chat-preview-name{flex:1;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.support-chat-preview-rm{width:26px;height:26px;border-radius:50%;background:var(--bg3);border:none;color:var(--muted);cursor:pointer;flex-shrink:0}
/* ── Сайдбар чата (список заказов + часы работы) — только десктоп, как в Avito ── */
.support-desktop-layout{display:contents}
.support-sidebar{display:none}
.support-status-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;position:relative}
.support-status-dot.online{background:#2ecc71}
.support-status-dot.online::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:#2ecc71;opacity:.5;animation:supportPulse 1.8s ease-out infinite}
.support-status-dot.offline{background:#8e8e93}
@keyframes supportPulse{0%{transform:scale(.5);opacity:.6}100%{transform:scale(2.2);opacity:0}}
.support-hours-badge{display:flex;align-items:center;gap:9px;background:var(--bg2);border-radius:14px;padding:14px 16px}
.support-hours-title{font-size:13px;font-weight:700;color:var(--text)}
.support-hours-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
/* Часы работы на телефоне. Раньше они жили только в боковой панели, а её на
   узком экране нет — человек открывал чат ночью и не понимал, ждать ответа
   сейчас или утром. Здесь это одна строка под шапкой: занимает мало места,
   не отодвигает переписку и повторяет ту же зелёную точку с пульсацией,
   что и в панели, чтобы состояние читалось с одного взгляда.
   На десктопе строка скрыта — там уже есть панель, и дублировать незачем. */
.support-hours-line{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;margin:0 0 10px;
  background:var(--bg2);border-radius:12px;
  font-size:12px;line-height:1.35;
}
.support-hours-line b{font-weight:700;color:var(--text)}
.support-hours-line span{color:var(--muted)}
.support-hours-line .support-status-dot{margin-left:1px}
.support-sidebar-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:18px 0 8px 2px}
.support-sidebar-item{display:flex;align-items:center;gap:11px;background:var(--bg2);border-radius:12px;padding:10px 12px;margin-bottom:6px;cursor:pointer;border:1.5px solid transparent;transition:border-color .15s,background .15s}
.support-sidebar-item:hover{border-color:rgba(249,115,22,.3)}
.support-sidebar-item.active{border-color:var(--accent);background:rgba(249,115,22,.07)}
.support-sidebar-item-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#c2410c);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.support-sidebar-item-body{flex:1;min-width:0}
.support-sidebar-item-title{font-size:13px;font-weight:700;color:var(--text)}
.support-sidebar-item-sub{font-size:11px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.support-sidebar-link{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:9px 2px;cursor:pointer;text-decoration:none}
.support-sidebar-link:hover{color:var(--accent)}
/* ── Карточка личности и выход из аккаунта — только для веб-входа (сайт) ── */
.web-identity-card{background:linear-gradient(135deg,var(--bg2),var(--bg3));border-radius:18px;padding:18px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.web-identity-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#f97316,#ea6010);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;flex-shrink:0;box-shadow:0 4px 14px rgba(249,115,22,.35)}
.web-identity-info{flex:1;min-width:0}
.web-identity-name{font-size:16px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-identity-email{font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-identity-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;margin-top:8px}
.web-identity-badge svg{width:12px;height:12px;flex-shrink:0}
.web-logout-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;background:rgba(239,68,68,.1);color:#ef4444;border:1.5px solid rgba(239,68,68,.22);border-radius:12px;padding:12px;font-size:13.5px;font-weight:700;cursor:pointer;margin-top:14px;transition:background .15s,transform .1s}
.web-logout-btn:hover{background:rgba(239,68,68,.18)}
.web-logout-btn:active{transform:scale(.98)}
.order-item-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.order-id{font-size:13px;font-weight:700;color:var(--text)}
.order-date{font-size:11px;color:var(--muted)}
.order-games{font-size:12px;color:var(--muted);margin-bottom:4px}
.order-total{font-size:14px;font-weight:700;color:var(--accent)}
.orders-empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:14px}
.order-status{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
.order-status.paid{background:rgba(93,217,125,.15);color:#5dd97d}
.order-status.pending{background:rgba(255,193,7,.12);color:#ffc107}
.order-status.cancelled{background:rgba(255,80,80,.12);color:#ff5050}
.order-item{cursor:pointer}
.order-item:active{opacity:.75}
.orders-page-hdr{display:flex;align-items:center;gap:10px;padding:16px 16px 8px}
/* Пользовательское соглашение / Политика конфиденциальности — на десктопе
   выглядят как обычная статья (хлебные крошки + крупный заголовок), как у
   конкурента, а не узкая мобильная карточка со стрелкой "назад". На
   мобильном/в приложении .legal-hero скрыт — там достаточно compact-хедера
   .orders-page-hdr, который уже используется везде. */
.legal-hero{display:none}
.orders-page-back{background:var(--bg3);border:none;color:var(--text);width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.orders-page-title{font-size:18px;font-weight:800}
.order-card{background:var(--bg2);border-radius:14px;box-shadow:0 1px 8px rgba(0,0,0,.07),0 0 0 0.5px rgba(0,0,0,.05);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:opacity .12s}
.order-card:active{opacity:.7}
.order-card-row1{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7px}
.order-card-name{font-size:14px;font-weight:700;color:var(--text)}
.order-card-date{font-size:11px;color:var(--muted);margin-top:2px}
.order-card-right{display:flex;align-items:center;gap:6px}
.order-card-total{font-size:16px;font-weight:800;color:var(--text)}
.order-card-items{font-size:12px;color:var(--muted);margin-bottom:9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.order-card-footer{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.order-bonus-chip{font-size:11px;font-weight:700;color:var(--accent);background:rgba(249,115,22,.12);padding:2px 8px;border-radius:10px}
/* «Данные готовы» — зелёная и заметнее соседних: это единственное событие,
   ради которого покупатель вообще открывает список заказов. Пульсация мягкая,
   без резких вспышек, и полностью отключается тем, кто просил меньше анимации. */
.order-ready-chip{font-size:11px;font-weight:800;color:#0b7a45;background:rgba(29,185,110,.16);
  border:1px solid rgba(29,185,110,.35);padding:2px 8px;border-radius:10px;
  animation:readyPulse 2.4s ease-in-out infinite}
@keyframes readyPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(29,185,110,0)}
  50%{box-shadow:0 0 0 4px rgba(29,185,110,.14)}
}
@media (prefers-reduced-motion: reduce){.order-ready-chip{animation:none}}
/* На тёмном фоне тёмно-зелёный текст нечитаем — берём светлый оттенок. */
body.dark-theme .order-ready-chip{color:#5dd97d;background:rgba(29,185,110,.18);border-color:rgba(29,185,110,.42)}
.order-action-btn{width:100%;background:var(--bg2);border:none;border-radius:14px;box-shadow:0 1px 6px rgba(0,0,0,.07),0 0 0 0.5px rgba(0,0,0,.05);padding:15px 16px;margin-bottom:10px;display:flex;align-items:center;gap:13px;font-size:14px;font-weight:600;cursor:pointer;color:var(--text);text-align:left;transition:opacity .12s}
.order-action-btn:active{opacity:.7}
.order-cancel-btn{color:#ff5050}
.order-pay-btn{color:#5dd97d}
.promo-toggle-btn{display:flex;align-items:center;gap:12px;background:none;border:none;width:100%;padding:0;cursor:pointer;text-align:left}
.promo-list-wrap{overflow:hidden;transition:max-height .25s ease,opacity .25s ease}
.order-detail-card{background:var(--bg2);border-radius:14px;box-shadow:0 1px 8px rgba(0,0,0,.07),0 0 0 0.5px rgba(0,0,0,.05);padding:18px;margin-bottom:12px}
.order-detail-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--bg3)}
.order-detail-row:last-child{border-bottom:none}
.order-detail-lbl{font-size:13px;color:var(--muted)}
.order-detail-val{font-size:13px;color:var(--text);font-weight:600;text-align:right}
/* ── Edition bonus ── */
.edition-bonus{background:var(--bg2);border-radius:12px;padding:12px 14px;margin:12px 0 4px}
.bonus-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.bonus-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.bonus-list li{font-size:13px;color:var(--text);line-height:1.4}
.p2-warning{background:rgba(249,115,22,.07);border:1.5px solid rgba(249,115,22,.28);border-radius:10px;padding:10px 12px;margin-top:10px;font-size:12px;color:var(--text);line-height:1.55}
.p2-warning b{color:var(--accent)}
.edition-note{background:rgba(59,130,246,.08);border:1.5px solid rgba(59,130,246,.3);border-radius:10px;padding:10px 12px;margin:12px 0 4px;font-size:12px;color:var(--text);line-height:1.55}
.bonus-toggle-btn{background:none;border:1.5px solid var(--bg3);border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;width:100%;text-align:left;margin:6px 0 0;font-family:'Montserrat',sans-serif;transition:border-color .15s}
.bonus-toggle-btn:active{border-color:var(--accent)}
/* ── Collapsible sections ── */
.collapsible-hdr{display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.collapse-arrow{font-size:18px;color:var(--muted);transition:transform .22s cubic-bezier(0.22,1,0.36,1);flex-shrink:0;line-height:1}
/* ── П3 bonus warning ── */
.p3-bonus-warn{background:rgba(249,115,22,.07);border:1.5px solid rgba(249,115,22,.30);border-radius:14px;padding:13px 14px;margin:10px 0 4px}
.p3-bonus-warn-hdr{font-size:13px;font-weight:800;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.p3-bonus-warn-row{display:flex;align-items:flex-start;gap:9px;padding:6px 0;border-bottom:1px solid rgba(249,115,22,.12);font-size:12px;color:var(--text);line-height:1.5}
.p3-bonus-warn-row:last-of-type{border-bottom:none;padding-bottom:0}
.p3bw-chip{font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;margin-top:1px}
.p3bw-chip.maybe{background:rgba(249,115,22,.18);color:#b84400}
.p3bw-chip.ok{background:rgba(52,199,89,.14);color:#1a6930}
.p3-bonus-warn-note{font-size:11px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid rgba(249,115,22,.12);line-height:1.5}
/* ── Preorder bonus card ── */
/* Игра временно снята с продажи.
   Намеренно НЕ красное и не жёлтое: человек ничего не сделал не так, и пугать
   его незачем. Спокойный синевато-серый тон, мягкая подложка, крупный значок
   ожидания — та же интонация, что у «мы сейчас не работаем», а не у ошибки. */
.pause-badge{background:rgba(100,116,139,.12);color:#475569;font-size:12px;font-weight:700;
  padding:10px 14px;border-radius:10px;margin:8px 0;display:flex;align-items:center;gap:8px}
.pause-card{background:linear-gradient(135deg,rgba(100,116,139,.10),rgba(148,163,184,.05));
  border:1.5px solid rgba(100,116,139,.22);border-radius:16px;padding:22px 18px;margin:12px 0 4px;
  text-align:center}
.pause-card-icon{font-size:34px;color:#64748b;line-height:1;margin-bottom:10px}
.pause-card-title{font-size:17px;font-weight:800;color:var(--text);margin-bottom:8px}
.pause-card-text{font-size:13.5px;line-height:1.55;color:var(--muted);max-width:340px;margin:0 auto}
.pause-card-btn{margin-top:16px;background:var(--bg2);color:var(--text);border:1px solid var(--border);
  border-radius:12px;padding:11px 18px;font-size:13.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm)}
.pause-card-btn:active{transform:scale(.97)}
body.dark-theme .pause-badge{background:rgba(148,163,184,.16);color:#cbd5e1}
body.dark-theme .pause-card{background:linear-gradient(135deg,rgba(148,163,184,.14),rgba(148,163,184,.06));
  border-color:rgba(148,163,184,.30)}
body.dark-theme .pause-card-icon{color:#cbd5e1}
.preorder-bonus-card{background:linear-gradient(135deg,rgba(212,160,23,.10),rgba(245,200,66,.05));border:1.5px solid rgba(212,160,23,.32);border-radius:14px;padding:14px;margin:10px 0 4px}
.preorder-bonus-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.preorder-bonus-hdr-title{font-size:13px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:6px}
.preorder-bonus-until{font-size:11px;font-weight:700;color:#8a6200;background:rgba(212,160,23,.18);padding:3px 9px;border-radius:20px}
.preorder-bonus-name{font-size:13px;font-weight:700;color:#6b4f00;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.gta-plus-row{display:flex;align-items:center;gap:10px;margin-top:10px;background:rgba(0,0,0,.04);border-radius:10px;padding:9px 12px}
.gta-plus-badge{font-size:12px;font-weight:800;color:#1a1a1a;background:linear-gradient(90deg,#c9a227,#f0d060);border-radius:20px;padding:4px 12px;white-space:nowrap;flex-shrink:0}
.gta-plus-note{font-size:11px;color:var(--muted);line-height:1.4}
.single-ed-label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--text);background:var(--bg3);border-radius:22px;padding:9px 16px;margin-bottom:20px}
.single-ed-label i{font-size:16px;color:var(--accent)}
/* ── Subscription info popup ── */
.sub-info-btn{display:flex;align-items:center;gap:8px;background:var(--bg2);border:none;width:100%;padding:12px 16px;border-radius:12px;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;margin:8px 0;text-align:left}
.sub-info-ovl{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;display:flex;align-items:flex-end;padding:16px}
.sub-info-sheet{background:var(--bg2);border-radius:20px;padding:20px 18px 28px;width:100%}
.sub-info-sheet h3{font-size:15px;font-weight:800;margin:0 0 14px;color:var(--text)}
.sub-info-sheet p,.sub-info-sheet li{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 8px}
.sub-info-sheet ul{padding-left:20px;margin:0 0 12px}
.sub-info-close{display:block;margin:16px auto 0;background:var(--accent);border:none;color:#fff;padding:10px 32px;border-radius:20px;font-size:14px;font-weight:700;cursor:pointer}
/* ── PS5-only badge ── */
.ps5-only-badge{background:linear-gradient(90deg,#003087,#0070d1);color:#fff;font-size:12px;font-weight:700;padding:8px 14px;border-radius:10px;margin:8px 0;display:flex;align-items:center;gap:8px}
/* ── Animations ── */
@keyframes slideUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.slide-up{animation:slideUp .25s cubic-bezier(0.22,1,0.36,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.page-enter{animation:pageIn .28s cubic-bezier(0.22,1,0.36,1)}
@keyframes checkPop{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
@keyframes cardIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.game-card:nth-child(1){animation:cardIn .22s cubic-bezier(0.22,1,0.36,1) both .02s}
.game-card:nth-child(2){animation:cardIn .22s cubic-bezier(0.22,1,0.36,1) both .05s}
.game-card:nth-child(3){animation:cardIn .22s cubic-bezier(0.22,1,0.36,1) both .08s}
.game-card:nth-child(4){animation:cardIn .22s cubic-bezier(0.22,1,0.36,1) both .11s}
.game-card:nth-child(5){animation:cardIn .22s cubic-bezier(0.22,1,0.36,1) both .14s}
.game-card:nth-child(6){animation:cardIn .22s cubic-bezier(0.22,1,0.36,1) both .17s}
.game-card:nth-child(7){animation:cardIn .22s cubic-bezier(0.22,1,0.36,1) both .20s}
.game-card:nth-child(8){animation:cardIn .22s cubic-bezier(0.22,1,0.36,1) both .23s}
@keyframes optSelect{0%{transform:scale(.93)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes selectorIn{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.type-opt{transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.type-opt.sel{animation:optSelect .22s cubic-bezier(.34,1.56,.64,1) both}
.console-opt{transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.console-opt.sel{animation:optSelect .22s cubic-bezier(.34,1.56,.64,1) both}
.edition-opt{transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.edition-opt.sel{animation:optSelect .18s cubic-bezier(.34,1.56,.64,1) both}
#gd-selectors{animation:selectorIn .16s ease both}
.rank-badge{position:absolute;top:5px;right:5px;font-size:16px;z-index:2;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));line-height:1;pointer-events:none}
.top-card .genre-card-img,.top-card .genre-card-ph{box-shadow:0 8px 28px rgba(249,115,22,.32),0 0 0 2.5px rgba(249,115,22,.5)}
.ed-lang-tag{font-size:9px;font-weight:800;letter-spacing:.4px;padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.1);margin-left:5px;vertical-align:middle;display:inline-block}
.edition-opt.sel .ed-lang-tag{background:rgba(255,255,255,.22)}
@media(hover:hover){
  .game-card:hover{transform:translateY(-3px);transition:transform .25s cubic-bezier(0.22,1,0.36,1)}
  .game-card:hover .game-card-img{box-shadow:0 8px 24px rgba(0,0,0,.15);transition:box-shadow .25s cubic-bezier(0.22,1,0.36,1)}
  .genre-card:hover{transform:translateY(-2px);transition:transform .25s cubic-bezier(0.22,1,0.36,1)}
  .genre-tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.1),0 0 0 0.5px rgba(0,0,0,.06);transition:transform .25s cubic-bezier(0.22,1,0.36,1),box-shadow .25s cubic-bezier(0.22,1,0.36,1)}
  .sub-card:hover{transform:translateY(-3px);transition:transform .25s cubic-bezier(0.22,1,0.36,1)}
  .btn-order:hover{opacity:.88;transform:translateY(-1px);transition:opacity .15s,transform .15s}
  .btn-add:hover{opacity:.88;transform:translateY(-1px);transition:opacity .15s,transform .15s}
  .bnav-item:hover{color:var(--accent)}
  .bnav-item:hover .bnav-icon-wrap{background:rgba(249,115,22,.08);border-radius:999px}
  .cart-item-rm:hover{background:rgba(231,76,60,.18);color:#e74c3c}
  .btn-ghost:hover{background:rgba(249,115,22,.08);color:var(--accent)}
  .back-btn:hover{background:rgba(0,0,0,.75)}
  .svc-banner:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.22)}
  .tariff-row:hover{border-color:rgba(255,255,255,.18)}
  .region-tab:hover{border-color:var(--accent)}
  .acct-mode-card:hover{border-color:rgba(255,255,255,.22)}
  .cat-tab:not(.active):hover{color:var(--text)}
  .ai-check-row:hover{border-color:rgba(255,255,255,.22)}
  .giftcard-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.16)}
  .svc-nav-item:hover{border-color:rgba(255,255,255,.2)}
}
/* ── Sub banner image ── */
.sub-card-bg-img{position:absolute;right:0;top:0;height:100%;width:55%;object-fit:cover;object-position:center;border-radius:0 22px 22px 0;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 35%,black 65%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 35%,black 65%)}
.sub-detail-banner{height:185px;border-radius:20px;margin:12px 16px 0;overflow:hidden;position:relative;flex-shrink:0}
.sub-detail-banner img{width:100%;height:100%;object-fit:cover;display:block}
.sub-detail-banner-over{position:absolute;bottom:0;left:0;right:0;padding:16px 18px;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.3) 55%,transparent 100%)}
.sub-detail-banner-name{font-size:22px;font-weight:800;color:#fff;line-height:1.2;font-family:'Montserrat',sans-serif}
.sub-detail-banner-period{font-size:12px;color:rgba(255,255,255,.7);margin-top:4px}
/* ── Category tabs ── */
.cat-tabs{display:flex;gap:0;background:var(--bg2);box-shadow:0 2px 8px rgba(0,0,0,.06);padding-top:var(--top-inset,50px);flex-shrink:0}
.cat-tab{flex:1 1 0;min-width:0;padding:13px 8px;text-align:center;font-size:13px;font-weight:600;color:var(--muted);border:none;background:transparent;cursor:pointer;border-radius:0;transition:color .18s;letter-spacing:.2px;display:flex;align-items:center;justify-content:center;gap:7px;position:relative}
.cat-tab i{font-size:16px}
.cat-tab.active{color:var(--accent)}
.cat-tab.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);border-radius:2px 2px 0 0;animation:tabIn .22s cubic-bezier(0.22,1,0.36,1) both}
.cat-tab:active{transform:scale(.96);transition:transform .12s}
/* Иконка поиска встроена в ту же строку, что и вкладки категорий — раньше
   под вкладками была ещё целая строка с полем ввода, теперь это одна
   компактная строка, как в мобильном web у конкурентов. */
.cat-tabs-search-btn{flex:0 0 44px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-left:1px solid rgba(0,0,0,.06);color:var(--muted);font-size:16px;cursor:pointer}
.cat-tabs-search-btn:active{transform:scale(.9);color:var(--accent)}
@keyframes tabIn{from{transform:scaleX(.4);opacity:0}to{transform:scaleX(1);opacity:1}}
/* ── Subscription cards ── */
.sub-list{padding:12px 16px 80px;display:flex;flex-direction:column;gap:12px}
.svc-tabs{display:flex;gap:8px;padding:14px 16px 4px;overflow-x:auto;scrollbar-width:none}
.svc-tab{flex-shrink:0;padding:8px 16px;border-radius:20px;border:1.5px solid var(--bg3);background:var(--bg3);color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .18s;font-family:'Montserrat',sans-serif}
.svc-tab.active{border-color:var(--accent);background:rgba(249,115,22,.12);color:var(--accent)}
.svc-nav{display:flex;flex-direction:column;gap:10px;padding:14px 16px 4px}
.svc-nav-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:16px;border:1.5px solid var(--bg3);background:var(--bg3);cursor:pointer;transition:border-color .2s cubic-bezier(0.22,1,0.36,1),background .2s cubic-bezier(0.22,1,0.36,1),transform .12s cubic-bezier(0.22,1,0.36,1)}
.svc-nav-item:active{transform:scale(.98)}
.svc-nav-item.active{border-color:var(--accent);background:rgba(249,115,22,.1)}
.svc-nav-item-left{display:flex;align-items:center;gap:12px;min-width:0}
.svc-nav-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;background:rgba(255,255,255,.06);flex-shrink:0}
.svc-nav-title{font-size:14px;font-weight:800;color:var(--text)}
.svc-nav-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.svc-nav-chevron{font-size:18px;color:var(--muted);flex-shrink:0}
.region-tabs{display:flex;gap:8px;padding:12px 16px;overflow-x:auto;scrollbar-width:none;cursor:grab}
.region-tabs.dragging{cursor:grabbing;user-select:none}
.region-tab{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:20px;border:1.5px solid var(--bg3);background:var(--bg3);color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:border-color .2s cubic-bezier(0.22,1,0.36,1),background .2s cubic-bezier(0.22,1,0.36,1),color .2s cubic-bezier(0.22,1,0.36,1),transform .12s cubic-bezier(0.22,1,0.36,1)}
.region-tab:active{transform:scale(.95)}
.region-tab.active{border-color:#0073e6;background:rgba(0,115,230,.14);color:#0073e6}
.giftcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 16px 24px}
.giftcard-card{background:linear-gradient(160deg,var(--bg2),var(--bg3));border-radius:18px;padding:16px 14px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.07);transition:transform .2s cubic-bezier(0.22,1,0.36,1),box-shadow .2s cubic-bezier(0.22,1,0.36,1);position:relative;overflow:hidden;animation:slideUp .18s cubic-bezier(0.22,1,0.36,1) both}
.giftcard-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.giftcard-card:active{transform:scale(.96)}
.giftcard-flag{margin-bottom:8px;display:flex;justify-content:center}
.giftcard-flag .flag-icon{width:30px;height:20px}
.flag-icon{display:inline-block;width:20px;height:14px;border-radius:3px;overflow:hidden;vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.1);flex-shrink:0}
.flag-icon svg{width:100%;height:100%;display:block}
/* Флаги теперь картинки, а не разметка в коде: со странами поставщика их
   стало 54, и в виде SVG они весили бы 215 КБ в главном файле. */
img.flag-icon{object-fit:cover}
.giftcard-denom{font-size:19px;font-weight:800;color:var(--text)}
.giftcard-type{font-size:10.5px;color:var(--muted);margin:6px 0 10px;font-weight:600}
.giftcard-price{font-size:16px;font-weight:800;color:var(--accent)}
.giftcard-btn{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:12px;padding:10px;font-size:12.5px;font-weight:700;cursor:pointer;margin-top:10px;transition:transform .12s,opacity .15s;box-shadow:0 4px 14px rgba(249,115,22,.28)}
.giftcard-btn:active{transform:scale(.95);opacity:.9}
.giftcard-instr-btn{width:100%;background:var(--bg2);color:var(--accent);border:1.5px solid var(--accent);border-radius:var(--radius);padding:13px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s}
.giftcard-instr-btn:active{transform:scale(.97)}
.howto-link-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);color:var(--accent);border:1.5px solid var(--accent);border-radius:20px;padding:9px 14px;font-size:12px;font-weight:700;cursor:pointer;margin:2px 0 16px;transition:transform .12s}
.howto-link-btn:active{transform:scale(.96)}
.ua-quick-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.ua-quick-btn{flex-shrink:0;padding:8px 16px;border-radius:20px;border:1.5px solid var(--bg3);background:var(--bg3);color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
.ua-quick-btn.sel{border-color:#0073e6;background:rgba(0,115,230,.14);color:#0073e6}
.ua-cost-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:14px;font-weight:700;color:var(--text);border-bottom:1px solid var(--bg3);margin-bottom:14px}
.ua-rate-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.ua-rate-table th{text-align:left;color:var(--muted);font-weight:700;padding:6px 4px;font-size:10.5px;text-transform:uppercase}
.ua-rate-table td{padding:7px 4px;color:var(--text);border-top:1px solid var(--bg3)}
.how-it-works-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px;margin-top:6px}
.hiw-card{background:var(--bg2);border-radius:14px;padding:12px}
.hiw-num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.hiw-title{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:3px}
.hiw-sub{font-size:11px;color:var(--muted);line-height:1.4}
.tariff-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:2px solid var(--bg3);background:var(--bg3);border-radius:16px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .22s cubic-bezier(0.22,1,0.36,1),background .22s cubic-bezier(0.22,1,0.36,1),transform .12s cubic-bezier(0.22,1,0.36,1)}
.tariff-row-disabled{cursor:not-allowed;opacity:.55}
.tariff-row-disabled .tariff-name,.tariff-row-disabled .tariff-price{color:var(--muted)}
.tariff-row.sel{border-color:#22c55e;background:rgba(34,197,94,.1)}
.tariff-row:active{transform:scale(.98)}
.tariff-row-left{display:flex;align-items:center;gap:12px;min-width:0}
.tariff-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--bg2);background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0;transition:all .2s cubic-bezier(0.22,1,0.36,1)}
.tariff-row.sel .tariff-check{background:#22c55e;border-color:#22c55e;animation:checkPop .32s cubic-bezier(.34,1.56,.64,1) both}
.tariff-name{font-size:13.5px;font-weight:800;color:var(--text)}
.tariff-sub{font-size:11px;color:var(--muted);margin-top:2px}
.tariff-price-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tariff-price{font-size:14px;font-weight:800;color:#22c55e}
.tariff-info-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid #22c55e;color:#22c55e;background:none;font-size:11px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-check-row{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1.5px solid var(--bg3);border-radius:12px;margin-bottom:10px;cursor:pointer;transition:border-color .2s cubic-bezier(0.22,1,0.36,1),transform .12s cubic-bezier(0.22,1,0.36,1)}
.ai-check-row:active{transform:scale(.98)}
.ai-check-box{width:20px;height:20px;border-radius:6px;border:2px solid var(--bg3);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;margin-top:1px;transition:all .2s cubic-bezier(0.22,1,0.36,1)}
.ai-check-row.checked .ai-check-box{background:#f59e0b;border-color:#f59e0b;animation:checkPop .32s cubic-bezier(.34,1.56,.64,1) both}
.ai-check-text{font-size:12px;color:var(--text);line-height:1.4}
.promo-textarea{width:100%;box-sizing:border-box;background:var(--bg3);border:2px solid var(--bg3);border-radius:12px;padding:12px 14px;color:var(--text);font-size:12px;font-family:'JetBrains Mono',monospace;outline:none;resize:vertical;min-height:90px;line-height:1.5}
.promo-textarea:focus{border-color:var(--accent)}
.ai-hiw-box{background:var(--bg2);border-radius:14px;padding:14px;margin:16px 0;font-size:12.5px;color:var(--text);line-height:1.7}
.svc-banners{padding:16px 16px 80px;display:flex;flex-direction:column;gap:14px}
.svc-banner{border:none;border-radius:22px;padding:22px 20px;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:96px;justify-content:center;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s;animation:slideUp .18s cubic-bezier(0.22,1,0.36,1) both}
.svc-banner:active{transform:scale(.98)}
.svc-banner-icon{line-height:1;margin-bottom:2px;position:relative;z-index:1}
.svc-banner-title{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:1px;color:#fff;position:relative;z-index:1}
.svc-banner-sub{font-size:12.5px;color:rgba(255,255,255,.82);font-weight:600;line-height:1.4;position:relative;z-index:1}
.svc-banner-watermark{position:absolute;right:-16px;top:50%;transform:translateY(-50%);width:110px;height:110px;opacity:.14;pointer-events:none;z-index:0}
.svc-banner-watermark svg{width:100%;height:100%;display:block}
.svc-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.svc-logo svg{width:100%;height:100%;display:block}
.svc-logo-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%}
.svc-soon-chip{display:inline-flex;align-items:center;background:var(--bg3);color:var(--muted);font-size:11px;font-weight:700;padding:6px 14px;border-radius:20px;margin:4px}
.svc-soon-chips{display:flex;flex-wrap:wrap;justify-content:center;margin-top:16px;max-width:320px}
.acct-mode-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.acct-mode-card{border:2px solid var(--bg3);background:var(--bg3);border-radius:16px;padding:14px;cursor:pointer;transition:border-color .22s cubic-bezier(0.22,1,0.36,1),background .22s cubic-bezier(0.22,1,0.36,1),transform .12s cubic-bezier(0.22,1,0.36,1)}
.acct-mode-card.sel{border-color:#3b82f6;background:rgba(59,130,246,.12)}
.acct-mode-card:active{transform:scale(.98)}
.acct-mode-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--bg2);background:var(--bg2);display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:12px;font-weight:800;color:#fff;transition:all .2s cubic-bezier(0.22,1,0.36,1)}
.acct-mode-card.sel .acct-mode-check{background:#3b82f6;border-color:#3b82f6;animation:checkPop .32s cubic-bezier(.34,1.56,.64,1) both}
.acct-mode-title{font-size:13.5px;font-weight:800;color:var(--text);display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:4px}
.acct-mode-sub{font-size:11px;color:var(--muted);line-height:1.4}
.acct-mode-fee{display:inline-block;background:rgba(251,191,36,.18);color:#d97706;font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px}
.psn-field-label{font-size:12px;font-weight:700;color:var(--muted);margin:0 0 6px;display:flex;align-items:center;gap:6px}
.token-help-btn{display:inline-flex;align-items:center;gap:3px;background:rgba(34,197,94,.14);color:#16a34a;font-weight:800;font-size:11px;padding:4px 10px;border-radius:20px;cursor:pointer;white-space:nowrap}
.psn-disclaimer{font-size:12.5px;color:var(--muted);line-height:1.6;margin:12px 0;padding:12px 14px;background:var(--bg2);border-radius:10px;display:flex;gap:10px;align-items:flex-start}
.ps-usage-banner{display:flex;gap:12px;align-items:flex-start;margin:14px 16px;padding:15px 16px;border-radius:16px;font-size:14px;font-weight:600;line-height:1.55;color:var(--text)}
.ps-usage-banner-icon{font-size:22px;line-height:1;flex-shrink:0}
.ps-usage-banner.ok{background:rgba(93,217,125,.13);border:1.5px solid rgba(93,217,125,.32)}
.ps-usage-banner.limited{background:rgba(251,191,36,.13);border:1.5px solid rgba(251,191,36,.34)}
.sub-card{border:none;border-radius:22px;padding:20px;cursor:pointer;display:flex;flex-direction:column;gap:14px;transition:transform .2s;position:relative;overflow:hidden;min-height:140px}
.sub-card:active{transform:scale(.97)}
.sub-card-top{display:flex;align-items:center;justify-content:space-between}
.sub-card-label{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(255,255,255,.18);padding:5px 12px;border-radius:20px}
.sub-ps-mark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;background:rgba(255,255,255,.18);border-radius:12px;font-size:15px;font-weight:800;color:#fff;font-family:'Montserrat',sans-serif;letter-spacing:-0.5px}
.sub-card-name{font-size:20px;font-weight:800;color:#fff;line-height:1.15;letter-spacing:.1px;margin-bottom:2px}
.sub-card-period{font-size:12px;color:rgba(255,255,255,.6);font-weight:600}
.sub-card-prices{display:flex;gap:8px;flex-wrap:wrap}
.sub-price-pill{font-size:12px;font-weight:700;background:rgba(255,255,255,.2);padding:5px 14px;border-radius:20px;color:#fff}
/* ── Subscription detail ── */
.sub-detail-hero{padding:24px 16px 16px;display:flex;align-items:center;gap:16px}
.sub-detail-icon{font-size:48px;width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border-radius:16px;flex-shrink:0}
.sub-detail-name{font-size:20px;font-weight:800;line-height:1.3;margin-bottom:4px}
.sub-detail-period{font-size:13px;color:var(--muted)}
.sub-detail-body{padding:14px 16px 100px}
.sub-desc{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:20px}
.sub-benefits{margin-bottom:20px}
.sub-benefit{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;font-size:13px;line-height:1.5}
.sub-benefit-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;margin-top:6px;flex-shrink:0}
/* ── Genre home ── */
.genre-section{padding-top:10px;margin-bottom:6px}
.genre-hdr{display:flex;justify-content:space-between;align-items:center;padding:0 16px 10px}
.genre-hdr-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1.5px;color:var(--text)}
.genre-hdr-all{background:rgba(249,115,22,.1);border:none;color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;padding:5px 12px;border-radius:20px;letter-spacing:.3px}
.genre-row{display:flex;gap:10px;padding:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:6px;cursor:grab}
.genre-row::-webkit-scrollbar{display:none}
.genre-row.dragging,.carousel-wrap.dragging{cursor:grabbing}
.genre-card{width:128px;flex-shrink:0;border-radius:0;overflow:visible;cursor:pointer;transition:transform .2s;position:relative}
.genre-card:active{transform:scale(.95)}
.genre-card-img{width:128px;height:172px;object-fit:cover;display:block;border-radius:var(--radius)}
.genre-card-img{box-shadow:var(--shadow-sm)}
.genre-card-ph{width:128px;height:172px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:rgba(255,255,255,.8);background:linear-gradient(135deg,#b0b0bb,#8e8e99);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.genre-card-info{padding:5px 2px 0;width:128px}
.genre-card-title{font-size:10px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted)}
/* ── Genre filter header ── */
.genre-filter-hdr{display:flex;align-items:center;gap:10px;padding:14px 16px 6px}
.genre-filter-back{background:var(--bg3);border:none;color:var(--text);width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.genre-filter-name{font-size:18px;font-weight:800;display:flex;align-items:center;gap:8px}
/* ── Genre tile grid ── */
.genre-grid-wrap{padding:12px 16px 90px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.genre-tile{border-radius:18px;padding:18px 16px 16px;cursor:pointer;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;min-height:110px;transition:transform .15s,box-shadow .15s;background:var(--bg2);box-shadow:var(--shadow)}
.genre-tile:active{transform:scale(.96)}
.genre-tile-icon{font-size:24px;line-height:1;color:var(--accent);width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:rgba(249,115,22,.1);border-radius:14px}
.genre-tile-name{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--text);letter-spacing:.1px;line-height:1.2}
.genre-tile-count{font-size:11px;color:var(--muted);font-weight:600}
/* transform:scale прячет размытые/светлые края фильтра blur() за пределами
   рамки (сама рамка обрезает картинку через overflow:hidden у .genre-tile) —
   без запаса по краям было бы видно нерезкую полоску по контуру плитки. */
.genre-tile-bg{position:absolute;inset:0;background-size:cover;background-position:center top;filter:blur(3px);transform:scale(1.08)}
.genre-tile-overlay{position:absolute;inset:0}
.genre-tile-content{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;gap:6px;justify-content:flex-end}
.genre-tile.has-bg .genre-tile-icon{background:rgba(255,255,255,.18);color:#fff}
.genre-tile.has-bg .genre-tile-name{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.7)}
.genre-tile.has-bg .genre-tile-count{color:rgba(255,255,255,.85);text-shadow:0 1px 4px rgba(0,0,0,.8)}
.genre-tile-wide{grid-column:1 / -1;min-height:96px}
.genre-tile-sale{grid-column:1 / -1;min-height:96px;background:linear-gradient(135deg,#f97316 0%,#dc2626 100%)}
.genre-tile-sale .genre-tile-name{color:#fff;font-size:15px}
.genre-tile-sale .genre-tile-count{color:rgba(255,255,255,.8)}
.genre-tile-sale .genre-tile-icon{background:rgba(255,255,255,.2);color:#fff}
.sale-badge-tag{display:inline-flex;align-items:center;background:rgba(255,255,255,.25);color:#fff;font-size:9px;font-weight:800;letter-spacing:1px;padding:3px 8px;border-radius:6px;width:fit-content;margin-bottom:4px}
.sale-sec-hdr{background:linear-gradient(90deg,rgba(249,115,22,.1),transparent);border-radius:10px;padding:6px 10px;margin:0 4px 8px}
.sale-section-banner{background:linear-gradient(135deg,#f97316 0%,#dc2626 100%);border-radius:16px;padding:14px 16px;margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#sec-sale{background:linear-gradient(180deg,rgba(249,115,22,.09) 0%,rgba(249,115,22,.03) 100%);border-radius:20px;margin:12px 8px 12px;padding:10px 8px 10px}
.sale-banner-icon{width:46px;height:46px;background:rgba(255,255,255,.2);border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;flex-shrink:0}
.sale-banner-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;color:#fff;line-height:1.1}
.sale-banner-sub{font-size:11px;color:rgba(255,255,255,.82);font-weight:600;margin-top:3px}
.sale-sec-btn{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.35);font-size:11px;font-weight:700;padding:7px 14px;border-radius:20px;white-space:nowrap;cursor:pointer;flex-shrink:0}
.genre-tile-recent{grid-column:1 / -1;min-height:96px;background:linear-gradient(135deg,#0891b2 0%,#164e63 100%)}
.genre-tile-recent .genre-tile-name{color:#fff;font-size:15px}
.genre-tile-recent .genre-tile-count{color:rgba(255,255,255,.8)}
.genre-tile-recent .genre-tile-icon{background:rgba(255,255,255,.2);color:#fff}
.recent-section-banner{background:linear-gradient(135deg,#0891b2 0%,#164e63 100%);border-radius:16px;padding:14px 16px;margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#sec-recent{background:linear-gradient(180deg,rgba(8,145,178,.09) 0%,rgba(8,145,178,.03) 100%);border-radius:20px;margin:12px 8px 12px;padding:10px 8px 10px}
.recent-banner-icon{width:46px;height:46px;background:rgba(255,255,255,.2);border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;flex-shrink:0}
.recent-banner-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;color:#fff;line-height:1.1}
.recent-banner-sub{font-size:11px;color:rgba(255,255,255,.82);font-weight:600;margin-top:3px}
.recent-sec-btn{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.35);font-size:11px;font-weight:700;padding:7px 14px;border-radius:20px;white-space:nowrap;cursor:pointer;flex-shrink:0}
.genre-tile-preorder{grid-column:1 / -1;min-height:96px;background:linear-gradient(135deg,#7c3aed 0%,#4527a0 100%)}
.genre-tile-preorder .genre-tile-name{color:#fff;font-size:15px}
.genre-tile-preorder .genre-tile-count{color:rgba(255,255,255,.8)}
.genre-tile-preorder .genre-tile-icon{background:rgba(255,255,255,.2);color:#fff}
.preorder-section-banner{background:linear-gradient(135deg,#7c3aed 0%,#4527a0 100%);border-radius:16px;padding:14px 16px;margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#sec-preorder{background:linear-gradient(180deg,rgba(124,58,237,.09) 0%,rgba(124,58,237,.03) 100%);border-radius:20px;margin:12px 8px 12px;padding:10px 8px 10px}
.preorder-banner-icon{width:46px;height:46px;background:rgba(255,255,255,.2);border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;flex-shrink:0}
.preorder-banner-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;color:#fff;line-height:1.1}
.preorder-banner-sub{font-size:11px;color:rgba(255,255,255,.82);font-weight:600;margin-top:3px}
.preorder-sec-btn{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.35);font-size:11px;font-weight:700;padding:7px 14px;border-radius:20px;white-space:nowrap;cursor:pointer;flex-shrink:0}
/* ── Carousel ── */
.carousel-wrap{overflow-x:scroll;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:12px 0 8px;margin:0 12px;border-radius:20px}
.carousel-wrap::-webkit-scrollbar{display:none}
.carousel-track{display:flex;gap:10px;padding:0 4px}
.carousel-slide{min-width:265px;height:265px;border-radius:18px;position:relative;overflow:hidden;cursor:pointer;flex-shrink:0;scroll-snap-align:start}
.carousel-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.carousel-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
.carousel-ph-icon{font-size:36px;color:rgba(255,255,255,.5)}
.carousel-ph-text{font-size:11px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:1px;text-transform:uppercase}
.carousel-icon-decor{position:absolute;right:-10px;top:-10px;font-size:150px;color:rgba(255,255,255,.16);line-height:1;pointer-events:none}
.carousel-overlay{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.75));display:flex;flex-direction:column;justify-content:flex-end;padding:14px}
.carousel-tag{display:inline-block;background:var(--accent);font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#fff;padding:3px 8px;border-radius:6px;margin-bottom:6px;align-self:flex-start}
.carousel-title{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:1.5px;color:#fff;line-height:1.1;margin-bottom:3px}
.carousel-sub{font-size:10px;color:rgba(255,255,255,.7);font-weight:600}
.carousel-dots{display:flex;gap:5px;align-items:center;justify-content:center;padding:6px 0 0}
.c-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s;cursor:pointer}
.c-dot.on{background:var(--accent);width:18px;border-radius:3px}
/* ── New / Hot sections ── */
.home-section{padding-top:12px;margin-bottom:2px}
.home-sec-hdr{display:flex;justify-content:space-between;align-items:center;padding:0 16px 10px}
.home-sec-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1.5px;color:var(--text);display:flex;align-items:center;gap:8px}
.home-sec-title i{font-size:16px;color:var(--accent)}
.home-sec-all{background:rgba(249,115,22,.1);border:none;color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;padding:5px 12px;border-radius:20px;letter-spacing:.3px}
/* ── Featured sections (НОВИНКИ / ЛИДЕРЫ) — dark ── */
#sec-new,#sec-hot{background:linear-gradient(145deg,#1e1b2e 0%,#231f34 100%);border-radius:22px;margin:10px 12px 4px;padding:0;box-shadow:0 10px 36px rgba(0,0,0,.32),0 0 0 .5px rgba(255,255,255,.07);overflow:hidden;position:relative}
#sec-new::before,#sec-hot::before{content:'';display:block;height:3px;background:linear-gradient(90deg,#f97316 0%,rgba(249,115,22,.55) 45%,transparent 100%);border-radius:22px 22px 0 0}
#sec-new::after,#sec-hot::after{content:'';position:absolute;bottom:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(249,115,22,.1) 0%,transparent 70%);pointer-events:none}
#sec-new .home-sec-hdr,#sec-hot .home-sec-hdr{padding:12px 16px 8px}
#sec-new .home-sec-title,#sec-hot .home-sec-title{font-size:23px;letter-spacing:2px;color:#fff}
#sec-new .home-sec-title i,#sec-hot .home-sec-title i{font-size:19px;color:#f97316}
#sec-new .genre-row,#sec-hot .genre-row{padding-bottom:14px}
#sec-new .home-sec-all,#sec-hot .home-sec-all{background:rgba(249,115,22,.18);color:#f97316;border:1px solid rgba(249,115,22,.28);font-size:12px;padding:6px 14px}
#sec-new .genre-card-title,#sec-hot .genre-card-title{color:rgba(255,255,255,.72)}
#sec-new .genre-card-img,#sec-hot .genre-card-img,#sec-new .genre-card-ph,#sec-hot .genre-card-ph{box-shadow:0 4px 20px rgba(0,0,0,.5)}
#sec-new .game-card-price,#sec-hot .game-card-price{color:#fff}
#sec-new .game-card-pl,#sec-hot .game-card-pl{color:rgba(255,255,255,.5)}
/* ── P2P3 info button ── */
.p2p3-btn{width:100%;background:rgba(249,115,22,.12);color:var(--text);border:1px solid rgba(249,115,22,.3);border-radius:10px;padding:11px 14px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin-bottom:10px;text-align:left}
.p2p3-btn-icon{font-size:18px;flex-shrink:0}
/* ── FAQ button ── */
.faq-btn{width:100%;background:rgba(99,102,241,.1);color:var(--text);border:1px solid rgba(99,102,241,.25);border-radius:10px;padding:11px 14px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin-bottom:18px;text-align:left}
.faq-btn-icon{font-size:18px;flex-shrink:0}
/* ── FAQ modal items ── */
.faq-item{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--bg3)}
.faq-item:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
.faq-q{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;display:flex;align-items:flex-start;gap:8px}
.faq-q-num{min-width:22px;height:22px;background:rgba(99,102,241,.15);color:rgb(99,102,241);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;margin-top:1px}
.faq-a{font-size:13px;color:var(--muted);line-height:1.65;padding-left:30px}
.faq-a b{color:var(--text)}
/* ── Carousel PC drag ── */
.carousel-wrap{cursor:grab}
.carousel-wrap.dragging{cursor:grabbing;user-select:none}
/* ── Game info badges ── */
.game-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.badge{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.3px}
.badge-pl{background:#e1f0fb;color:#0a6eb4}
.badge-lang{background:#e8f8ef;color:#1a8a44}
.badge-genre{background:rgba(249,115,22,.1);color:var(--accent2)}
/* ── Description show/hide ── */
.desc-toggle{background:none;border:none;color:var(--accent);font-size:12px;font-weight:700;cursor:pointer;padding:4px 0;display:block;margin-top:4px}
/* ── Console selection ── */
.console-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.console-opt{border:2px solid var(--bg3);background:var(--bg3);border-radius:var(--radius);padding:14px 8px;cursor:pointer;transition:all .18s;text-align:center}
.console-opt.sel{border-color:var(--accent);background:rgba(249,115,22,.1);box-shadow:0 0 0 1px rgba(249,115,22,.2),0 4px 16px rgba(249,115,22,.15)}
.console-opt-name{font-size:13px;font-weight:800;color:var(--muted);margin-top:6px;letter-spacing:.3px}
.console-opt.sel .console-opt-name{color:var(--accent)}
.console-opt-icon{font-size:26px}
/* ── Edition selector ── */
.edition-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.edition-opt{border:2px solid var(--bg3);background:var(--bg3);border-radius:20px;padding:8px 18px;cursor:pointer;transition:all .18s;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;letter-spacing:.3px}
.edition-opt:active{transform:scale(.95)}
.edition-opt.sel{border-color:var(--accent);background:rgba(249,115,22,.12);color:var(--accent);box-shadow:0 0 0 1px rgba(249,115,22,.2)}
.edition-hint{font-size:12px;color:var(--muted);text-align:center;padding:12px 0 4px}
/* ── P2P3 modal redesign ── */
.modal-section{margin-bottom:20px}
.modal-section-title{font-size:15px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.modal-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;font-size:13px;line-height:1.55;color:var(--muted)}
.modal-row-icon{flex-shrink:0;margin-top:1px}
.modal-divider{border:none;border-top:1px solid var(--bg3);margin:18px 0}
.modal-note{background:rgba(249,115,22,.1);border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.6;margin-bottom:16px}
/* ── Card overlay badges ── */
.card-badge-abs{position:absolute;bottom:5px;left:5px;pointer-events:none}
.card-oo-badge,.card-rb-badge,.card-dns-badge,.card-vr-badge,.card-po-badge{color:#fff;font-size:8px;font-weight:800;padding:3px 7px;border-radius:6px;display:inline-block;letter-spacing:.3px;line-height:1.4}
.card-oo-badge{background:rgba(94,96,206,.88);backdrop-filter:blur(3px)}
.card-rb-badge{background:rgba(214,40,40,.88);backdrop-filter:blur(3px)}
.card-dns-badge{background:rgba(247,127,0,.88);backdrop-filter:blur(3px)}
.card-vr-badge{background:rgba(98,0,234,.88);backdrop-filter:blur(3px)}
.card-po-badge{background:linear-gradient(90deg,#d4a017,#f5c842);color:#000;backdrop-filter:blur(3px)}
/* ── Detail info badges ── */
.preorder-badge{background:linear-gradient(90deg,#b8860b,#f5c842);color:#000;font-size:12px;font-weight:800;padding:10px 14px;border-radius:10px;margin:8px 0;display:flex;align-items:center;gap:8px}
.release-badge{background:linear-gradient(90deg,#0f766e,#14b8a6);color:#fff;font-size:12px;font-weight:800;padding:10px 14px;border-radius:10px;margin:8px 0;display:flex;align-items:center;gap:8px}
/* Дата выхода на карточке игры. Один блок и для вышедших, и для тех, что ещё
   впереди; если премиальные издания открываются раньше — они идут отдельными
   строками под чертой, чтобы покупатель видел разницу до покупки, а не после. */
.gd-release{background:linear-gradient(90deg,#0f766e,#14b8a6);color:#fff;border-radius:10px;padding:10px 14px;margin:8px 0}
.gd-release-main{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800}
.gd-release-eds{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.28);display:flex;flex-direction:column;gap:6px}
.gd-release-ed{display:flex;align-items:baseline;gap:7px;font-size:11.5px;font-weight:600;line-height:1.35}
.gd-release-ed-name{font-weight:800;flex-shrink:0}
.gd-release-ed-date{opacity:.92}
.gd-release-ed-gain{background:rgba(255,255,255,.2);border-radius:5px;padding:1px 6px;font-weight:800;font-size:10.5px;white-space:nowrap;flex-shrink:0}
.gd-release-unknown{opacity:.9;font-weight:700}
.online-only-badge,.ru-blocked-badge,.ru-bonus-badge,.dns-req-badge{font-size:12px;font-weight:700;padding:10px 14px;border-radius:10px;margin:8px 0;display:flex;align-items:center;gap:8px}
.online-only-badge{background:linear-gradient(90deg,#5e60ce,#6930c3);color:#fff}
/* Игра с зарубежными серверами: объяснение, а не запрет.
   Спокойный синий вместо красного — человек ничего не нарушил, ему нужно
   условие до покупки. Иконка глобуса вместо перечёркнутого круга по той же
   причине. */
.geo-card{background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(59,130,246,.05));
  border:1.5px solid rgba(37,99,235,.24);border-radius:14px;padding:14px 16px;margin:8px 0}
.geo-card-hdr{font-size:13.5px;font-weight:800;color:var(--text);display:flex;align-items:center;
  gap:8px;margin-bottom:7px}
.geo-card-hdr i{font-size:18px;color:#2563eb;flex-shrink:0}
.geo-card-text{font-size:12.5px;line-height:1.6;color:var(--muted)}
body.dark-theme .geo-card{background:linear-gradient(135deg,rgba(96,165,250,.14),rgba(96,165,250,.05));
  border-color:rgba(96,165,250,.32)}
body.dark-theme .geo-card-hdr i{color:#93c5fd}
.ru-blocked-badge{background:linear-gradient(90deg,#d62828,#e63946);color:#fff}
.ru-bonus-badge{background:linear-gradient(90deg,#b8860b,#d4a017);color:#000}
.dns-req-badge{background:linear-gradient(90deg,#f77f00,#d62828);color:#fff;cursor:pointer;transition:opacity .15s}
.dns-req-badge:active{opacity:.8}
/* ── VR badges ── */
.vr-req-badge{background:linear-gradient(135deg,#4a148c,#6200ea);color:#fff;font-size:12px;font-weight:700;padding:11px 14px;border-radius:12px;margin:6px 0;display:flex;align-items:center;gap:8px}
.vr-opt-badge{background:linear-gradient(135deg,#0277bd,#0288d1);color:#fff;font-size:12px;font-weight:700;padding:11px 14px;border-radius:12px;margin:6px 0;display:flex;align-items:center;gap:8px}
/* ── Go-to-cart button ── */
.btn-go-cart{background:linear-gradient(135deg,#2e7d32,#43a047)!important;box-shadow:0 6px 20px rgba(46,125,50,.4)!important}
/* ── Экран входа (только вне Telegram, на сайте) ── */
.login-screen{height:var(--app-height,100vh);width:100%;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-card{background:var(--bg2);border-radius:20px;padding:32px 28px;max-width:340px;width:calc(100% - 40px);box-shadow:var(--shadow);text-align:center}
.login-logo{font-size:22px;font-weight:800;margin-bottom:6px;color:var(--text)}
.login-logo span{color:var(--accent)}
.login-sub{font-size:13px;color:var(--muted);margin-bottom:24px}
.login-google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:#1c1c1e;border:1.5px solid var(--bg3);border-radius:14px;padding:15px;font-size:14.5px;font-weight:700;cursor:pointer;text-decoration:none;box-sizing:border-box;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:transform .1s,box-shadow .15s}
.login-google-btn:hover{box-shadow:0 4px 14px rgba(0,0,0,.09)}
.login-google-btn:active{transform:scale(.98)}
.magic-link-block .login-google-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;box-shadow:0 4px 14px rgba(249,115,22,.3)}
.login-google-btn svg{width:18px;height:18px;flex-shrink:0}
.login-error{font-size:12.5px;color:#ef4444;margin-top:14px}
.login-or{font-size:12px;color:var(--muted);text-align:center;margin:2px 0 10px;text-transform:uppercase;letter-spacing:.5px}
.magic-sent-box{text-align:center;background:rgba(249,115,22,.08);border-radius:12px;padding:16px 14px;box-sizing:border-box}
.magic-code-input{width:100%;box-sizing:border-box;text-align:center;font-size:24px;font-weight:800;letter-spacing:12px;padding:12px 10px 12px 22px;border-radius:12px;border:1.5px solid var(--bg3);background:var(--bg);color:var(--text);font-family:inherit}
.magic-code-input:focus{outline:none;border-color:var(--accent)}
.magic-code-input::placeholder{letter-spacing:12px;color:var(--muted);opacity:.4}
/* ── Блок "Войдите в аккаунт" в личном кабинете (только сайт) ── */
.login-hero-wrap{position:relative;overflow:hidden;min-height:440px;display:flex;align-items:center;justify-content:center;text-align:center}
.login-hero-content{position:relative;z-index:2;width:100%}
.floating-logo{position:absolute;z-index:1;opacity:.45;pointer-events:none;animation-name:floatSide;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.floating-logo .svc-logo{display:block;width:34px;height:34px}
body.dark-theme .floating-logo{opacity:.4}
@keyframes floatSide{
  0%{transform:translate(0,0) rotate(0deg)}
  50%{transform:translate(38px,-30px) rotate(10deg)}
  100%{transform:translate(-32px,26px) rotate(-10deg)}
}
/* ── Летающие логотипы на всю ширину экрана (десктоп-браузер, ≥900px) ──
   Живут вне #app (position:fixed от вьюпорта, не от узкой колонки 430px) —
   заполняют пустое пространство по бокам всего экрана, а не только внутри
   карточки. На мобильном/узком экране не нужны — там и так тесно, скрыты. */
.floating-logos-overlay{position:absolute;top:0;left:0;right:0;height:100vh;pointer-events:none;z-index:0;display:none}
.floating-logos-overlay .floating-logo{opacity:.5}
.floating-logos-overlay .floating-logo .svc-logo{width:42px;height:42px}
body.dark-theme .floating-logos-overlay .floating-logo{opacity:.42}
@media (max-width:480px){
  .login-hero-wrap{min-height:400px}
  .floating-logo{transform:scale(.8)}
}
.login-hero-icon{width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,rgba(249,115,22,.16),rgba(249,115,22,.04));display:flex;align-items:center;justify-content:center;margin:6px auto 16px}
.login-hero-icon i{font-size:28px;color:var(--accent)}
.login-hero-title{font-size:19px;font-weight:800;margin-bottom:16px}
.login-perks{display:flex;flex-direction:column;gap:9px;max-width:250px;margin:0 auto 24px;text-align:left}
.login-perk{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);font-weight:600}
.login-perk i{color:#22c55e;font-size:17px;flex-shrink:0}
.login-methods{max-width:280px;margin:0 auto}
/* Кнопка входа через Telegram — тот же класс .login-google-btn, что и у
   Google (гарантированно один размер), только свои цвета поверх. */
.login-tg-btn{background:#29A9EA;color:#fff;border:none}
.login-tg-btn:hover{box-shadow:0 4px 14px rgba(41,169,234,.35)}
/* ── Режим "сайт" на широком экране (десктоп-браузер, не Telegram) ──
   Мобильная вёрстка (Mini App и телефон-браузер) не трогается вообще —
   всё ниже работает только внутри body.web-mode и только от 900px. ── */
.web-topnav{display:none}
.row-arrows{display:none}
.card-media-bg{display:none}
@media (min-width:900px){
  /* Фон страницы и фон витрины — один и тот же цвет (без этого на широких
     экранах виден шов между "карточкой-приложением" и страницей). Раньше
     здесь стоял var(--bg2) (белый) — из-за этого ВСЕ элементы по всему
     сайту, которые всегда красились в var(--bg2) как "белая карточка на
     сером фоне страницы" (кнопки профиля, карточки правил, промо-блоки
     и т.д.), сливались с одноцветным белым фоном и переставали быть видны.
     var(--bg) (серый) и здесь, и у #app — тот же приём против шва, но
     теперь var(--bg2)-карточки везде на сайте снова контрастны, как и
     было в мобильной версии. */
  /* scrollbar-gutter:stable — резервирует место под вертикальный скроллбар
     ВСЕГДА, даже когда страница короткая и он не нужен. Без этого переход
     со страницы, где скроллбар был (например, "Сервисы"), на короткую, где
     его нет (например, "Корзина"), сразу освобождал те ~15px и весь контент
     заметно дёргался вбок. Поддерживается Chrome/Firefox/Яндекс.Браузер —
     то, чем реально пользуются клиенты сайта. */
  body.web-mode{overflow-y:auto;height:auto;min-height:100vh;align-items:flex-start;background:var(--bg);scrollbar-gutter:stable}
  body.web-mode #app{max-width:1760px;height:auto;min-height:100vh;background:var(--bg)}
  body.web-mode .content{overflow-y:visible}
  body.web-mode .bnav{display:none}
  body.web-mode .cat-tabs{display:none}
  /* Верхняя навигация вместо нижнего меню и вкладок-полосок — плавающая
     карточка с отступами по бокам и мягкой тенью вместо жёсткой линии-границы
     во всю ширину (раньше была `border-bottom:1px solid`, прижата к краям
     экрана — визуально тяжелее и "суше", чем у конкурентов). */
  body.web-mode .web-topnav{display:flex;align-items:center;gap:28px;padding:14px 28px;background:var(--bg2);border-radius:20px;box-shadow:0 6px 20px rgba(0,0,0,.09);position:sticky;top:16px;z-index:20;margin:16px 24px 0}
  .web-topnav-logo{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;color:var(--text);flex-shrink:0;cursor:pointer}
  .web-topnav-logo span{color:var(--accent)}
  .web-topnav-tabs{display:flex;gap:6px;flex-shrink:0}
  .web-topnav-tab{display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;background:none;border:none;font-family:inherit}
  .web-topnav-tab.active{color:var(--accent);background:rgba(249,115,22,.1)}
  .web-topnav-search{flex:1;max-width:420px}
  .web-topnav-search input{width:100%;background:var(--bg3);border:none;border-radius:999px;padding:11px 14px 11px 38px;color:var(--text);font-size:13.5px;font-family:inherit;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}
  .web-topnav-icons{display:flex;gap:10px;margin-left:auto;flex-shrink:0}
  .web-topnav-icon{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:auto;height:42px;padding:0 18px;border-radius:999px;background:var(--bg3);color:var(--text);font-size:16px;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:background .15s}
  .web-topnav-icon:hover{background:rgba(249,115,22,.14);color:var(--accent)}
  .web-topnav-icon-label{font-size:13px}
  .web-topnav-icon .cart-badge{position:absolute;top:-4px;right:6px}
  /* Каталог/жанры/поиск — из горизонтального скролла в широкую сетку колонками */
  body.web-mode .search-wrap{display:none} /* поиск переехал в web-topnav */
  body.web-mode .carousel-wrap{margin:0 32px;overflow:visible}
  body.web-mode .carousel-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
  /* Баннеры на телефоне — квадрат 265×265 (min-width/height фиксированные).
     На десктопе колонка стала намного шире, а высота оставалась той же
     265px — плашка превращалась в узкую вытянутую полосу, и картинка внутри
     (background:cover) обрезалась совсем не так, как задумано. Задаём
     нормальное широкое соотношение сторон вместо фиксированной высоты. */
  body.web-mode .carousel-slide{width:auto;min-width:0;height:auto;aspect-ratio:1/1;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.1);transition:transform .25s cubic-bezier(0.22,1,0.36,1),box-shadow .25s}
  body.web-mode .carousel-slide:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.14)}
  body.web-mode .carousel-dots{display:none} /* баннеры и так все видны в сетке — точки-пагинация не нужны */
  body.web-mode .cat-tabs-search-btn{display:none} /* на десктопе поиск уже есть в web-topnav */
  body.web-mode .home-section{padding:36px 32px 0}
  body.web-mode .home-sec-hdr{padding:0 0 18px}
  body.web-mode .home-sec-title{font-size:29px;letter-spacing:1.8px}
  body.web-mode .home-sec-title i{font-size:23px}
  body.web-mode .home-sec-all{font-size:12.5px;padding:7px 16px}
  body.web-mode #sec-sale,body.web-mode #sec-recent,body.web-mode #sec-preorder{margin:36px 32px}
  /* Жанровые секции в полном каталоге ("Игры") — на телефоне у них крошечный
     6px отступ между блоками, из-за чего на широком экране всё превращается
     в слипшуюся простыню карточек одна под другой. Разносим их по вертикали
     и укрупняем заголовок так же, как у Новинок/Лидеров выше. */
  body.web-mode .genre-section{padding:0 32px;margin-bottom:44px}
  body.web-mode .genre-section:first-of-type{margin-top:8px}
  body.web-mode .genre-hdr{padding:0 0 18px}
  body.web-mode .genre-hdr-title{font-size:29px;letter-spacing:1.8px;display:flex;align-items:center;gap:10px}
  body.web-mode .genre-hdr-title i{font-size:23px}
  body.web-mode .genre-hdr-all{font-size:12.5px;padding:7px 16px}
  /* Тёмный акцентный фон #sec-new/#sec-hot — это оригинальный дизайн,
     оставляем его и на десктопе как есть, просто больше отступов и крупнее
     заголовок, чтобы не терялось на широком экране. */
  body.web-mode #sec-new,body.web-mode #sec-hot{margin:24px 0;padding:4px 32px 20px}
  body.web-mode #sec-new .home-sec-hdr,body.web-mode #sec-hot .home-sec-hdr{padding:16px 0 14px}
  body.web-mode #sec-new .home-sec-title,body.web-mode #sec-hot .home-sec-title{font-size:29px;letter-spacing:1.8px}
  body.web-mode #sec-new .home-sec-title i,body.web-mode #sec-hot .home-sec-title i{font-size:23px}
  body.web-mode #sec-new .home-sec-all,body.web-mode #sec-hot .home-sec-all{font-size:13.5px;padding:10px 20px}
  body.web-mode #sec-new .game-card-pl,body.web-mode #sec-hot .game-card-pl{color:var(--muted)}
  /* Карточки товара — на телефоне это просто картинка+текст, на десктопе
     этого мало (выглядит плоско). Оборачиваем в белую карточку с тенью и
     добавляем лёгкий подъём при наведении — так карточка читается как
     самостоятельный, кликабельный элемент витрины, а не картинка в списке. */
  body.web-mode .game-card,body.web-mode .genre-card{background:var(--bg2);border-radius:16px;padding:10px 10px 14px;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:transform .22s cubic-bezier(0.22,1,0.36,1),box-shadow .22s;width:auto}
  /* Внутри тёмных секций #sec-new/#sec-hot карточка не должна получать
     белую подложку — из-за неё побелевшее название (расчитанное на тёмный
     фон, rgba(255,255,255,.72)) становилось невидимым: белый текст на
     белой карточке. Там карточки остаются прозрачными, как в мобильной
     версии — просто картинка+текст поверх общего тёмного фона секции. */
  body.web-mode #sec-new .genre-card,body.web-mode #sec-hot .genre-card{background:transparent;box-shadow:none}
  body.web-mode .game-card:hover,body.web-mode .genre-card:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(0,0,0,.12)}
  /* .genre-card-img/.genre-card-ph были зафиксированы под мобильный размер
     128×172px — на десктопе, где сама карточка стала намного шире (264px),
     картинка не растягивалась вместе с карточкой и выглядела крошечной
     "маркой" на большом белом поле. Возвращаем её к пропорции обложки 2/3
     и растягиваем на всю ширину карточки, как и .game-card-img. */
  body.web-mode .game-card-img,body.web-mode .genre-card-img,body.web-mode .game-card-ph,body.web-mode .genre-card-ph{border-radius:11px;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;background:var(--bg3)}
  body.web-mode .card-media-wrap{border-radius:11px}
  /* Гибрид (обложка целиком + размытая подложка под ней вместо серых
     полей) — только на самой странице игры (.gd-hero), не на карточках
     каталога: там нужно просто заполнить рамку картинкой, как раньше. */
  body.web-mode .gd-hero-bg{display:block;position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(20px) brightness(.6);transform:scale(1.2);z-index:0}
  body.web-mode .game-card-info,body.web-mode .genre-card-info{padding:10px 2px 0}
  /* Секции на главной (Новинки, Лидеры, по жанрам и т.д.) — как у reloc.ru:
     ряд из 6 крупных карточек за раз, остальное — прокруткой по стрелочкам
     (scrollGenreRow) или по кнопке "Все →" (открывает полный список). */
  body.web-mode .genre-row{display:flex;flex-wrap:nowrap;gap:22px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:0;cursor:default}
  body.web-mode .genre-row::-webkit-scrollbar{display:none}
  body.web-mode .genre-row>.genre-card{flex:0 0 calc((100% - 22px*5)/6)}
  body.web-mode .row-arrows{display:flex;gap:8px;margin-left:auto;margin-right:14px}
  body.web-mode .row-arrow{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(0,0,0,.14);background:var(--bg2);color:var(--text);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
  body.web-mode .row-arrow:hover{background:rgba(249,115,22,.12);border-color:var(--accent);color:var(--accent)}
  body.web-mode #sec-new .row-arrow,body.web-mode #sec-hot .row-arrow{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}
  body.web-mode #sec-new .row-arrow:hover,body.web-mode #sec-hot .row-arrow:hover{background:rgba(249,115,22,.25);border-color:var(--accent);color:#fff}
  body.web-mode .home-sec-all,body.web-mode .genre-hdr-all{font-size:13.5px;font-weight:800;padding:10px 20px;border-radius:24px}
  body.web-mode .games-grid{padding:4px 32px 60px;gap:22px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  /* Плитки жанров на телефоне стоят с зазором 10px — на широком экране,
     где сами плитки стали крупнее, это выглядело слишком плотно/навалено.
     Увеличиваем зазор и высоту плиток, крупнее шрифт названия. */
  body.web-mode .genre-grid-wrap{padding:24px 32px 60px;gap:22px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  body.web-mode .genre-tile{min-height:150px;border-radius:20px;padding:22px 20px 20px}
  body.web-mode .genre-tile-wide,body.web-mode .genre-tile-sale,body.web-mode .genre-tile-recent{min-height:130px}
  body.web-mode .genre-tile-name{font-size:16px}
  body.web-mode .genre-tile-count{font-size:12.5px}
  body.web-mode .genre-tile-wide{grid-column:span 2}
  /* Страница "Сервисы" — на телефоне это 5 компактных плашек одна под
     другой. На широком десктопе те же плашки в 1 маленький ряд оставляли
     под собой сплошной пустой белый экран. Делаем плитки крупнее и выше,
     чтобы раздел выглядел цельным, а не "5 карточек и пустота". */
  body.web-mode .svc-banners{padding:24px 32px 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
  body.web-mode .svc-banner{min-height:190px !important;padding:26px 26px;border-radius:20px}
  body.web-mode .svc-banner-icon{margin-bottom:10px;font-size:1.15em}
  body.web-mode .svc-banner-title{font-size:27px}
  body.web-mode .svc-banner-sub{font-size:13.5px;max-width:88%}
  /* На главном экране "Сервисы" всего 5 плиток — при auto-fill они умещались
     в один неширокий ряд, а под ним оставалось сплошное пустое поле до
     конца экрана. Только здесь фиксируем 3 колонки (2 ряда) и укрупняем
     плитки — остальные под-страницы (PlayStation/AI/Steam и т.д.) со своим
     числом карточек остаются на адаптивной сетке выше. */
  body.web-mode .svc-banners-home{grid-template-columns:repeat(3,1fr)}
  body.web-mode .svc-banners-home .svc-banner{min-height:260px !important;padding:30px}
  body.web-mode .svc-banners-home .svc-banner-icon{font-size:1.3em}
  body.web-mode .svc-banners-home .svc-banner-title{font-size:30px}
  body.web-mode .svc-banners-home .svc-banner-sub{font-size:14px;line-height:1.5}
  /* Карточка товара — цена/платформа как отдельные "чипы" вместо голого
     текста, ближе к тому, как оформлены цены в настоящих витринах. */
  body.web-mode .game-card-price{display:inline-block;background:rgba(249,115,22,.12);color:var(--accent);padding:5px 11px;border-radius:8px;font-size:16px;font-weight:800}
  /* Сплошной белый чип цены и серый чип платформы на тёмных карточках
     Новинки/Лидеры смотрелись слишком контрастно/крикливо на фоне
     тёмно-синей секции. Делаем их полупрозрачными в тон карточки —
     спокойнее, но текст всё ещё читается благодаря плотному белому цвету. */
  body.web-mode #sec-new .game-card-price,body.web-mode #sec-hot .game-card-price{background:rgba(255,255,255,.14);color:#fff}
  body.web-mode #sec-new .game-card-pl,body.web-mode #sec-hot .game-card-pl{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
  /* Название игры на карточке было в базовом мобильном размере 10-11px —
     на крупной десктопной карточке оно терялось (сливалось с фоном не по
     цвету, а из-за того что было почти нечитаемо мелким). */
  body.web-mode .game-card-title,body.web-mode .genre-card-title{margin-top:8px;font-weight:700;font-size:15px;-webkit-line-clamp:2}
  body.web-mode .game-card-pl{display:inline-block;margin-top:6px;background:var(--bg3);padding:3px 9px;border-radius:6px;font-size:12px}
  /* На телефоне .profile-btn белый на сером фоне страницы — контраст есть.
     На десктопе страница тоже белая (см. правку фона выше), и кнопка
     полностью сливалась с фоном, становясь невидимой. Добавляем рамку. */
  body.web-mode .profile-btn{border:none;box-shadow:0 2px 8px rgba(0,0,0,.06)}
  body.web-mode .site-footer{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:100px;padding:40px 32px}
  body.web-mode .site-footer-copyright{padding:16px 32px}
  body.web-mode .content-body:has(.legal-page-body) .orders-page-hdr{display:none}
  body.web-mode .legal-hero{display:block;padding:32px 0 8px}
  body.web-mode .legal-hero-crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
  body.web-mode .legal-hero-crumbs span{cursor:pointer;text-decoration:underline}
  body.web-mode .legal-hero-crumbs span:hover{color:var(--accent)}
  body.web-mode .legal-hero-title{font-size:32px;font-weight:800;color:var(--text);margin:0 0 8px;letter-spacing:-.5px}
  /* Инлайн-стили h()/p()/li() внутри buildOferta()/buildPrivacyPolicy() —
     держат размер под мобильный экран; на десктопе делаем текст крупнее и
     просторнее для чтения, как у конкурента (см. скриншот). !important
     нужен, т.к. это единственный способ перебить style="" в самой разметке. */
  body.web-mode .legal-page-body div[style*="font-size:13px"]{font-size:15px!important;line-height:1.8!important}
  body.web-mode .legal-page-body div[style*="font-size:15px"]{font-size:19px!important}
  body.web-mode .site-footer-about{max-width:none}
  body.web-mode .promo-input{border-color:var(--bg3)}
  /* Раньше .support-chat-wrap рос по высоте под весь экран (min-height:60vh
     от родителя без верхнего/нижнего предела) — при малом числе сообщений
     под них оставалась огромная пустая чёрная область, а при большом числе
     сообщений скроллилась вся страница целиком, а не сама переписка.
     Пробовали сделать карточку маленькой фиксированной высоты — стало
     наоборот: поле ввода оказалось прилипшим у верха страницы, а под ним —
     ещё больше пустоты до низа экрана. Теперь карточка растягивается ПОЧТИ
     до низа реального вьюпорта (как окно мессенджера на весь экран), а
     список сообщений скроллится ВНУТРИ неё — поле ввода остаётся у самого
     низа экрана, а не посередине пустой страницы. */
  body.web-mode .support-chat-input-bar{border-radius:0 0 16px 16px}
  body.web-mode .support-chat-wrap{height:calc(var(--app-height,100vh) - 168px);min-height:460px;background:var(--bg2);border:1px solid var(--bg3);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
  body.web-mode .support-chat-list{overflow-y:auto}
  /* "Избранное" в профиле дублирует пункт в верхнем меню десктопа — там,
     где меню видно, прячем повтор. На мобильном сайте (verSet <900px, меню
     скрыто) кнопка в профиле остаётся единственным способом туда попасть. */
  body.web-mode .profile-fav-btn{display:none}
  /* Чат поддержки на десктопе — как в Avito: слева список заказов (можно
     сразу переключиться на другой), справа сама переписка. */
  body.web-mode .support-desktop-layout{display:flex;gap:22px;align-items:flex-start;margin-top:14px}
  body.web-mode .support-sidebar{display:flex;flex-direction:column;width:270px;flex-shrink:0}
  /* Появилась боковая панель — строка с часами под шапкой не нужна,
     иначе одно и то же написано дважды на одном экране. */
  body.web-mode .support-hours-line{display:none}
  body.web-mode .support-chat-wrap{flex:1;min-width:0}
  /* Все правила ширины ниже висят на .content-body (сама карточка/список
     конкретного экрана), а НЕ на .content — .content остаётся всегда во всю
     доступную ширину (= ширина #app), потому что футер сайта — сосед
     content-body внутри .content (см. buildPage()) и должен растягиваться
     на всю ширину независимо от того, узкий сам экран или нет. Раньше здесь
     стояло правило прямо на .content, из-за которого сжимался и футер тоже. */
  body.web-mode .content-body{max-width:960px;margin:0 auto;width:100%}
  body.web-mode .content-body:has(.genre-grid-wrap),
  body.web-mode .content-body:has(.games-grid),
  body.web-mode .content-body:has(.svc-banners),
  body.web-mode .content-body:has(.home-section),
  body.web-mode .content-body:has(.search-svc-section){max-width:none}
  body.web-mode .content-body:has(.gd-body){max-width:1280px}
  body.web-mode .content-body:has(.support-desktop-layout){max-width:900px}
  /* Личный кабинет, история заказов, корзина — узкие "настроечные"
     страницы-списки, не сетки. На 960px кнопки/карточки растягивались почти
     на всю ширину экрана и выглядели неестественно широкими — держим их в
     удобной колонке, как в обычных десктоп-аккаунтах. */
  body.web-mode .content-body:has(.profile-hdr):not(:has(.games-grid)),
  body.web-mode .content-body:has(.orders-page-hdr):not(:has(.games-grid)):not(:has(.support-desktop-layout)):not(:has(.legal-page-body)),
  body.web-mode .content-body:has(.cart-hdr):not(:has(.games-grid)){max-width:560px}
  /* Пользовательское соглашение / Политика конфиденциальности — во всю
     читаемую ширину текстом, как у конкурента, а не узкой карточкой-списком. */
  body.web-mode .content-body:has(.legal-page-body){max-width:860px}

  /* Карточка игры — как у reloc.ru: обложка целиком (без обрезки и
     растяжения) слева отдельной колонкой, описание — по центру, панель
     покупки — справа. Раньше обложка была верхним на всю ширину баннером
     с object-fit:cover, из-за чего верх/низ картинки обрезались. */
  body.web-mode .gd-hero-wrap{border-radius:16px;overflow:hidden;background:var(--bg3);position:relative}
  /* .gd-hero сам по себе (базовое мобильное правило) красит letterbox
     непрозрачным var(--bg3) — это рисуется ПОВЕРХ подложки .gd-hero-bg,
     из-за чего блюр не был виден. Убираем фон у самой картинки. */
  body.web-mode .gd-hero,body.web-mode .gd-hero-ph{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;position:relative;z-index:1;background:transparent}
  body.web-mode .gd-hero-grad{display:none}
  body.web-mode .gd-body{display:grid;grid-template-columns:320px 1fr 380px;gap:32px;align-items:start;padding:28px 32px 100px}
  body.web-mode .gd-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;background:var(--bg3);border-radius:16px;padding:20px 22px;margin-top:8px}
  /* Базовое правило .gd-info-row задаёт justify-content:space-between для
     горизонтального (мобильного) варианта — при переключении на колонку
     (flex-direction:column) для десктопа это же space-between начинало
     разносить label и value по всей высоте ячейки грида (растянутой до
     высоты соседней, более длинной ячейки) — отсюда "уехавшее" вниз
     значение "PS4/PS5". Сбрасываем на flex-start. */
  body.web-mode .gd-info-row{border-bottom:none;padding:0;gap:4px}
  body.web-mode .gd-main{min-width:0}
  body.web-mode .gd-side{position:sticky;top:96px;background:var(--bg3);border-radius:16px;padding:20px}
  /* Кнопки выбора консоли и "Добавить в корзину" на сером фоне сайдбара
     были того же серого цвета, что и сам сайдбар, — терялись, непонятно
     что кликабельно. Даём им явную рамку и белую подложку. */
  body.web-mode .console-opt{background:var(--bg2);border-color:rgba(0,0,0,.14)}
  body.web-mode .console-opt.sel{border-color:var(--accent)}
  body.web-mode .btn-add{border:2px solid rgba(249,115,22,.5);box-shadow:0 8px 26px rgba(249,115,22,.4)}
  body.web-mode .edition-opt,body.web-mode .type-opt{background:var(--bg2);border:2px solid rgba(0,0,0,.1)}
  /* Название, бейджи, цена и кнопки выбора на странице игры были подобраны
     под тесный телефонный экран — на широкой десктопной колонке смотрятся
     мелкими. Укрупняем. */
  body.web-mode .gd-title{font-size:34px}
  body.web-mode .gd-screenshot{height:220px}
  body.web-mode .badge{font-size:13px;padding:6px 12px}
  body.web-mode .console-opt-icon{font-size:32px}
  body.web-mode .console-opt-name{font-size:15px}
  body.web-mode .console-opt{padding:18px 10px}
  body.web-mode .edition-opt{font-size:14px;padding:10px 20px}
  body.web-mode .type-opt-label{font-size:12.5px}
  body.web-mode .type-opt-price{font-size:24px}
  body.web-mode .type-opt-na{font-size:12.5px}
  body.web-mode .btn-add{font-size:16px;padding:18px}
  body.web-mode .gd-info-label{font-size:12px}
  body.web-mode .gd-info-value{font-size:16px}
  /* Кнопки листания страниц каталога (‹ ›) были 36px и почти не видны на
     широком светлом фоне десктопа — крупнее, с рамкой и заметной тенью. */
  body.web-mode .pager{padding:28px 16px 40px;gap:16px}
  body.web-mode .pager-btn{width:48px;height:48px;font-size:24px;border:1.5px solid rgba(0,0,0,.1);box-shadow:0 4px 14px rgba(0,0,0,.08)}
  body.web-mode .pager-btn:hover:not(:disabled){background:rgba(249,115,22,.12);color:var(--accent);border-color:var(--accent)}
  body.web-mode .pager-dot{width:9px;height:9px}
  body.web-mode .pager-dot.active{width:28px}
}

/* Подсказка на экране ожидания оплаты: человек должен видеть, что оплату
   проверяют сами, и не тянуться к кнопке отмены уже оплаченного заказа. */
.pay-wait-note{display:flex;gap:8px;align-items:flex-start;text-align:left;margin:12px 0 4px;padding:10px 12px;border-radius:12px;background:rgba(93,169,255,.10);border:1px solid rgba(93,169,255,.26);font-size:12.5px;line-height:1.5;color:var(--text)}
.pay-wait-note i{font-size:16px;color:#5da9ff;flex-shrink:0;margin-top:1px;animation:pay-wait-spin 2.4s linear infinite}
@keyframes pay-wait-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pay-wait-note i{animation:none}}

/* Полоска «магазин обновился»: новая версия приезжает фоном, и без неё человек
   увидел бы её только со второго захода. */
.update-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:9000;display:flex;align-items:center;gap:12px;padding:11px 12px 11px 16px;border-radius:14px;background:var(--bg2);border:1px solid var(--border);box-shadow:0 8px 28px rgba(0,0,0,.35);font-size:13.5px;color:var(--text);animation:update-bar-in .25s ease-out}
.update-bar span{flex:1;font-weight:700}
.update-bar-btn{border:0;border-radius:9px;padding:8px 14px;background:var(--accent);color:#fff;font-size:13px;font-weight:800;cursor:pointer}
.update-bar-close{border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;padding:0 4px;cursor:pointer}
@keyframes update-bar-in{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.update-bar{animation:none}}
@media(min-width:768px){.update-bar{left:auto;right:24px;bottom:24px;max-width:380px}}

/* Кнопка во время запроса. runOnce вешает этот класс с 3 сентября 2026, но в
   оформлении его не было вовсе — и пока шёл запрос (до 20 секунд на мобильном
   интернете), кнопка выглядела мёртвой: ни отклика, ни подсказки, а повторные
   нажатия молча игнорировались. */
.is-busy{opacity:.6;pointer-events:none;position:relative}
.is-busy::after{content:'';position:absolute;top:50%;right:14px;width:16px;height:16px;margin-top:-8px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:busy-spin .7s linear infinite}
@keyframes busy-spin{to{transform:rotate(360deg)}}

/* Ссылка оплаты текстом — на случай, когда браузер не даёт открыть вкладку. */
.pay-link-box{margin-top:12px;padding:12px;background:var(--bg2);border:1px solid var(--bg3);border-radius:12px;text-align:left}
.pay-link-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.pay-link-text{font-size:12px;color:var(--text);word-break:break-all;line-height:1.5;margin-bottom:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pay-link-copy{width:100%;padding:10px;border:1px solid var(--bg3);border-radius:10px;background:var(--bg3);
  color:var(--text);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:6px}
.pay-link-copy:active{opacity:.7}