/* =====================================================================
   DARKRUST — тема для GameStores (Внешний вид → Продвинутая конфигурация → CSS)
   Палитра взята с логотипа DarkRust. Селекторы — из реальной разметки
   витрины GameStores (template_5, CSS-модули вида Name-module__part).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Tiny5&family=Press+Start+2P&family=Manrope:wght@400;500;600;700&display=swap');

/* ---------- 1. Палитра и переменные ---------------------------------- */
:root,
:root[data-theme] {
    /* фирменные цвета логотипа */
    --dr-orange: #f57a00;
    --dr-orange-hot: #ff9a1f;
    --dr-orange-deep: #c24a00;
    --dr-yellow: #f2be00;
    --dr-green: #6ccc18;
    --dr-cyan: #0cb4e4;
    --dr-cyan-deep: #0c84b4;
    --dr-purple: #6c2478;
    --dr-purple-soft: #3a1544;
    --dr-rust: #cc4824;
    --dr-white: #f1eee8;
    --dr-navy-0: #03070d;
    --dr-navy-1: #07101c;
    --dr-navy-2: #0b1726;
    --dr-navy-3: #112236;
    --dr-line: rgba(12, 180, 228, .18);
    --dr-line-soft: rgba(255, 255, 255, .06);
    --dr-glow: 0 0 0 1px rgba(245, 122, 0, .55), 0 8px 28px -6px rgba(245, 122, 0, .55);
    --dr-radius: 10px;
    --dr-radius-sm: 6px;
    --dr-font-pixel: "Tiny5", "Press Start 2P", system-ui, sans-serif;
    --dr-font-8bit: "Press Start 2P", "Tiny5", monospace;
    --dr-font-body: "Manrope", "Roboto", system-ui, sans-serif;
    --dr-hazard: repeating-linear-gradient(-45deg, var(--dr-yellow) 0 10px, #111 10px 20px);

    /* переменные самой платформы GameStores */
    --default-font-family: var(--dr-font-body);
    --default-font-size: 14px;
    --safe-padding: 12px;
    --accent-color-800: var(--dr-orange);
    --accent-color-900: var(--dr-orange-deep);
    --font-color-700: var(--dr-white);
    --font-color-800: rgba(241, 238, 232, .78);
    --font-color-900: #7d8aa0;
    --bg-color-700: var(--dr-navy-2);
    --bg-color-800: var(--dr-navy-1);
    --bg-color-900: var(--dr-navy-1);
    --product-items-trans-bg-color: rgba(3, 7, 13, .72);
    --promocode-bg-color: rgba(7, 16, 28, .96);
    --monitoring-joining-color: var(--dr-yellow);
    --monitoring-queue-color: var(--dr-rust);
}

/* ---------- 2. Фон: ночное небо с закатом + пиксельная сетка ---------- */
html { font-synthesis: none; -webkit-font-smoothing: antialiased; scrollbar-color: var(--dr-orange-deep) var(--dr-navy-0); scrollbar-width: thin; }

body {
    font-family: var(--dr-font-body);
    color: var(--font-color-800);
    background-color: var(--dr-navy-0) !important;
    background-image:
        radial-gradient(1200px 420px at 50% -60px, rgba(245, 122, 0, .28), transparent 70%),
        radial-gradient(900px 500px at 12% 0%, rgba(108, 36, 120, .45), transparent 70%),
        radial-gradient(900px 500px at 88% 0%, rgba(108, 36, 120, .40), transparent 70%),
        linear-gradient(180deg, #120a1c 0%, var(--dr-navy-1) 38%, var(--dr-navy-0) 100%) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}
body::before {               /* едва заметная пиксельная сетка */
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 4px 4px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
.BGImage-module__img { opacity: .18; filter: saturate(.6) brightness(.6); }

::selection { background: var(--dr-orange); color: #000; }

/* скроллбары */
body::-webkit-scrollbar,
.ModalLayout-module__overflowWrapper::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track,
.ModalLayout-module__overflowWrapper::-webkit-scrollbar-track { background: var(--dr-navy-0); }
body::-webkit-scrollbar-thumb,
.ModalLayout-module__overflowWrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dr-orange), var(--dr-orange-deep));
    border-radius: 0; border: 2px solid var(--dr-navy-0);
}

/* ---------- 3. Общие блоки (boxHeader / boxBody / boxFooter) ---------- */
.boxHeader {
    position: relative;
    font-family: var(--dr-font-pixel);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dr-white);
    background: linear-gradient(180deg, var(--dr-navy-3), var(--dr-navy-2));
    border: 1px solid var(--dr-line);
    border-bottom: 0;
    border-radius: var(--dr-radius) var(--dr-radius) 0 0;
    padding: 14px 18px 14px 26px;
}
.boxHeader::before {          /* оранжевый «пиксель»-маркер */
    content: "";
    position: absolute; left: 12px; top: 50%;
    width: 6px; height: 6px; margin-top: -3px;
    background: var(--dr-orange);
    box-shadow: 0 0 10px var(--dr-orange);
}
.boxBody {
    background: linear-gradient(180deg, rgba(11, 23, 38, .92), rgba(7, 16, 28, .92));
    border: 1px solid var(--dr-line);
    border-top-color: var(--dr-line-soft);
}
.boxBody:last-child { border-radius: 0 0 var(--dr-radius) var(--dr-radius); }
.boxFooter {
    background: var(--dr-navy-2);
    border: 1px solid var(--dr-line);
    border-top: 1px solid var(--dr-line-soft);
    border-radius: 0 0 var(--dr-radius) var(--dr-radius);
}

/* ---------- 4. Баннер: логотип «выходит» из-за панели навигации ------
   Загрузите assets/logo-2x.png (прозрачный фон, 2030×1357) как баннер/логотип
   в разделе «Дизайн». Низ логотипа уходит под шапку (отрицательный отступ +
   шапка выше по z-index), а маска растворяет камни в сайте. */
.container.bannerContainer {
    position: relative;
    isolation: isolate;                /* свой слой; шапка ниже по DOM рисуется поверх */
    padding-top: 10px;
    pointer-events: none;              /* логотип не перекрывает клики по шапке */
}
.container.bannerContainer::before {   /* мягкое оранжевое свечение за логотипом */
    content: "";
    position: absolute; left: 50%; top: 46%;
    width: min(820px, 96%); height: 70%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(245, 122, 0, .30), rgba(108, 36, 120, .16) 45%, transparent 70%);
    filter: blur(8px);
    z-index: -1;
    animation: drLogoGlow 5s ease-in-out 1s infinite;
}
.Banner-module__img {
    width: min(780px, 100%);
    max-height: none;
    height: auto;
    margin: 0 auto -76px;              /* нижняя часть прячется за панелью */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0,0,0,.55) 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0,0,0,.55) 86%, transparent 100%);
    filter: drop-shadow(0 14px 34px rgba(245, 122, 0, .28));
    transform-origin: 50% 100%;
    will-change: transform, opacity;
    animation:
        drEmerge .9s cubic-bezier(.2, 1.25, .35, 1) both,
        drFloat 6s ease-in-out .9s infinite;
}
@keyframes drEmerge {
    0%   { opacity: 0; transform: translateY(64px) scale(.96); }
    35%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes drFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes drLogoGlow { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
.container.headerContainer { position: relative; }   /* панель — перед логотипом (без z-index, чтобы не запирать мобильное меню) */

/* ---------- 5. Шапка / навигация ----------------------------------- */
.Header-module__wrapper {
    position: relative;
    min-height: 64px;
    padding: 0 18px;
    margin-bottom: 22px;
    /* без backdrop-filter/transform: иначе мобильное меню (position:fixed внутри шапки) «запирается» в шапке */
    background: linear-gradient(180deg, rgba(13, 26, 42, .96), rgba(7, 16, 28, .96));
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius);
    box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .9);
    overflow: visible;
}
.Header-module__wrapper::after {      /* «опасная» полоса снизу */
    content: "";
    position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px;
    background: var(--dr-hazard);
    background-size: 28px 28px;
    border-radius: 2px;
    opacity: .9;
}
.Header-module__logo {
    font-family: var(--dr-font-pixel);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .04em;
    color: var(--dr-orange);
    text-shadow: 0 2px 0 #4a1c00, 0 0 18px rgba(245, 122, 0, .45);
    transition: color .2s ease, text-shadow .2s ease;
}
.Header-module__logo:hover { color: var(--dr-orange-hot); }

.HeaderNav-module__link,
.NavDropDown-module__btn {
    position: relative;
    font-family: var(--dr-font-pixel);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .05em;
    color: var(--font-color-800);
    padding: 10px 12px;
    border-radius: var(--dr-radius-sm);
    transition: color .15s ease, background-color .15s ease;
}
.HeaderNav-module__link::after {
    content: "";
    position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
    background: var(--dr-orange);
    box-shadow: 0 0 8px var(--dr-orange);
    transform: scaleX(0); transform-origin: left;
    transition: transform .2s ease;
}
.HeaderNav-module__link:hover,
.HeaderNav-module__link:focus,
.NavDropDown-module__btn:hover { color: var(--dr-white); background: rgba(245, 122, 0, .08); }
.HeaderNav-module__link:hover::after,
.HeaderNav-module__link:focus::after { transform: scaleX(1); }
.NavDropDown-module__list,
.NavServerDropDown-module__list {
    background: var(--dr-navy-1);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .8);
}

/* кнопки входа / профиля / баланса */
.PlayerMenu-module__loginLink,
.PlayerMenu-module__profileLink,
.PlayerMenuMobile-module__loginLink,
.PlayerMenuMobile-module__profileLink {
    font-family: var(--dr-font-pixel);
    font-weight: 700;
    letter-spacing: .06em;
    color: #160800 !important;
    background: linear-gradient(180deg, var(--dr-orange-hot), var(--dr-orange));
    border: 1px solid #ffb35c;
    border-radius: var(--dr-radius-sm);
    padding: 10px 18px;
    box-shadow: 0 4px 0 var(--dr-orange-deep), 0 10px 24px -8px rgba(245, 122, 0, .8);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.PlayerMenu-module__loginLink:hover,
.PlayerMenu-module__profileLink:hover,
.PlayerMenu-module__loginLink:focus,
.PlayerMenu-module__profileLink:focus {
    background: linear-gradient(180deg, #ffb040, var(--dr-orange-hot));
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.PlayerMenu-module__loginLink:active,
.PlayerMenu-module__profileLink:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--dr-orange-deep); }

.PlayerBalance-module__btn,
.LangSwitcher-module__btn {
    font-family: var(--dr-font-pixel);
    font-weight: 600;
    color: var(--dr-white);
    background: var(--dr-navy-2);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-sm);
}
.PlayerBalance-module__btn:hover,
.LangSwitcher-module__btn:hover { border-color: var(--dr-cyan); color: var(--dr-cyan); }
.LangSwitcher-module__list {
    background: var(--dr-navy-1);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-sm);
}
.LangSwitcher-module__lang:hover,
.LangSwitcher-module__lang.LangSwitcher-module__active { color: var(--dr-orange); }

/* мобильное меню */
.PlayerMenuMobile-module__line { background: var(--dr-orange) !important; }
.PlayerMenuMobile-module__menuWrapper { background: rgba(3, 7, 13, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.PlayerMenuMobile-module__menu { background: var(--dr-navy-1); border-left: 1px solid var(--dr-line); }
.PlayerMenuMobile-module__nav .HeaderNav-module__link { display: block; border-bottom: 1px solid var(--dr-line-soft); }
.CrosseCloseBtn-module__line { background: var(--dr-white) !important; }

/* ---------- 6. Магазин: категории, поиск ---------------------------- */
.Shop-module__wrapper .boxBody { background: rgba(7, 16, 28, .72); }

.Categories-module__categories { gap: 8px; margin: 0; justify-content: flex-start; }
.Categories-module__category {
    margin: 0;
    font-family: var(--dr-font-pixel);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .03em;
    color: var(--font-color-800);
    background: var(--dr-navy-2);
    border: 1px solid var(--dr-line-soft);
    border-radius: var(--dr-radius-sm);
    padding: 9px 16px;
    /* «пиксельные» срезанные углы */
    clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
    transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.Categories-module__category:hover {
    color: var(--dr-white);
    background: var(--dr-navy-3);
    border-color: rgba(245, 122, 0, .5);
    transform: translateY(-1px);
}
.Categories-module__category.Categories-module__active,
.Categories-module__category.Categories-module__enableFocus:focus {
    color: #160800;
    background: linear-gradient(180deg, var(--dr-orange-hot), var(--dr-orange));
    border-color: #ffb35c;
    box-shadow: inset 0 -3px 0 var(--dr-orange-deep);
}

.Search-module__wrapper {
    height: 44px;
    margin-top: 16px;
    background: var(--dr-navy-0);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.Search-module__wrapper:focus-within { border-color: var(--dr-orange); box-shadow: 0 0 0 3px rgba(245, 122, 0, .18); }
.Search-module__iconWrapper { background: transparent; padding: 0 12px 0 14px; }
.Search-module__icon path { stroke: var(--dr-orange); }
.Search-module__input { color: var(--dr-white); font-family: var(--dr-font-body); background: transparent; }
.Search-module__input::placeholder { color: var(--font-color-900); }

/* ---------- 7. Карточки товаров ------------------------------------ */
.Products-module__wrapper { gap: 14px; margin-top: 16px; }

.Product-module__wrapper {
    padding: 14px;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(108, 36, 120, .28), transparent 60%),
        linear-gradient(180deg, var(--dr-navy-3) 0%, var(--dr-navy-1) 100%);
    border: 1px solid var(--dr-line-soft);
    border-radius: var(--dr-radius);
    box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .9);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    isolation: isolate;
}
.Product-module__wrapper::after {      /* тонкая полоса «опасности» снизу при наведении */
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--dr-hazard);
    background-size: 28px 28px;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 7;
}
.Product-module__wrapper:hover,
.Product-module__wrapper:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(245, 122, 0, .7);
    box-shadow: var(--dr-glow);
    outline: none;
}
.Product-module__wrapper:hover::after,
.Product-module__wrapper:focus-visible::after { opacity: 1; }

.Product-module__img {
    position: relative; z-index: 1;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55));
    transition: transform .25s ease;
}
.Product-module__wrapper:hover .Product-module__img { transform: scale(1.07); }

.Product-module__price {
    top: 8px; left: 8px; z-index: 6;
    font-family: var(--dr-font-pixel);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: var(--dr-white);
    background: rgba(3, 7, 13, .78);
    border: 1px solid rgba(245, 122, 0, .45);
    border-radius: var(--dr-radius-sm);
    padding: 6px 8px;
    gap: 2px;
}
.Product-module__price > span:last-child { color: var(--dr-orange-hot); }
.Product-module__oldPrice { color: var(--font-color-900); font-size: 13px; }
.Product-module__oldPrice:after { background-color: var(--dr-rust); height: 2px; }

.Product-module__discount {
    top: 8px; right: 8px; z-index: 6;
    font-family: var(--dr-font-pixel);
    font-weight: 700;
    font-size: 14px;
    color: #0b1400;
    background: var(--dr-green);
    border-radius: var(--dr-radius-sm);
    padding: 5px 7px;
    box-shadow: 0 0 14px rgba(108, 204, 24, .45);
}
.Product-module__favoriteWithDiscount { top: 34px; }

.Product-module__name {
    font-family: var(--dr-font-pixel);
    font-weight: 600;
    font-size: 15px;
    color: var(--dr-white);
    text-align: center;
    padding: 18px 10px 12px;
    background: linear-gradient(180deg, transparent, rgba(3, 7, 13, .95) 55%);
}
.Product-module__count {
    z-index: 6;
    right: 10px; bottom: 9px;
    font-family: var(--dr-font-pixel);
    font-weight: 700;
    font-size: 14px;
    color: var(--dr-cyan);
    text-shadow: 0 1px 0 #000, 0 0 8px rgba(12, 180, 228, .5);
}

/* ---------- 8. Кнопки ----------------------------------------------- */
.Button-module__btn {
    font-family: var(--dr-font-pixel);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: var(--dr-radius-sm);
    padding: 10px 18px;
}
.Button-module__btn.Button-module__accent {
    color: #160800;
    background: linear-gradient(180deg, var(--dr-orange-hot), var(--dr-orange));
    border-color: #ffb35c;
    box-shadow: 0 4px 0 var(--dr-orange-deep), 0 10px 24px -8px rgba(245, 122, 0, .75);
}
.Button-module__btn.Button-module__accent:hover,
.Button-module__btn.Button-module__accent:focus {
    background: linear-gradient(180deg, #ffb040, var(--dr-orange-hot));
    border-color: #ffc27a;
    transform: translateY(-1px);
}
.Button-module__btn.Button-module__accent:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--dr-orange-deep); }
.Button-module__btn.Button-module__gray {
    color: var(--font-color-800);
    background: transparent;
    border-color: rgba(125, 138, 160, .35);
}
.Button-module__btn.Button-module__gray:hover,
.Button-module__btn.Button-module__gray:focus { color: var(--dr-white); border-color: var(--dr-cyan); background: rgba(12, 180, 228, .08); }

/* ---------- 9. Виджеты (левая колонка) ------------------------------ */
.Widgets-module__widgetWrapper + .Widgets-module__widgetWrapper { margin-top: 14px; }

.MonitoringServer-module__wrapper {
    padding: 12px;
    background: var(--dr-navy-0);
    border: 1px solid var(--dr-line-soft);
    border-radius: var(--dr-radius-sm);
}
.MonitoringServer-module__wrapper + .MonitoringServer-module__wrapper { margin-top: 10px; }
.MonitoringServer-module__name { font-family: var(--dr-font-pixel); font-weight: 600; font-size: 15px; color: var(--dr-white); }
.MonitoringServer-module__progressBarWrapper {
    height: 14px;
    background: var(--dr-navy-2);
    border: 1px solid var(--dr-line-soft);
    border-radius: 3px;
}
.MonitoringServer-module__progressBar { border-radius: 2px; }
.MonitoringServer-module__progressInfo { background: var(--dr-navy-2); border: 1px solid var(--dr-line); }
.MonitoringServer-module__progressInfo:before { border-color: var(--dr-navy-2) transparent transparent transparent; }
.MonitoringServer-module__btn { color: var(--font-color-900); transition: color .15s ease; }
.MonitoringServer-module__btn:hover { color: var(--dr-orange); }

/* ---------- 10. Модальные окна (товар, баланс, вход, корзина) -------- */
.ModalLayout-module__wrapper {
    background-color: rgba(3, 7, 13, .78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.ModalLayout-module__positionWrapper { align-items: center; }
.ModalLayout-module__modal {
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--dr-cyan-deep), 0 0 0 4px rgba(12, 180, 228, .12), 0 30px 80px -20px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(245, 122, 0, .45);
}
.ModalLayout-module__modal .boxHeader {
    border-color: transparent;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, rgba(108, 36, 120, .55), rgba(245, 122, 0, .25)), var(--dr-navy-2);
}
.ModalLayout-module__modal .boxBody { border-color: transparent; background: var(--dr-navy-1); }
.ModalLayout-module__modal .boxFooter { border-color: transparent; border-radius: 0 0 12px 12px; background: var(--dr-navy-2); gap: 10px; }

.productModalImg {
    border-radius: var(--dr-radius);
    background: radial-gradient(60% 60% at 50% 45%, rgba(245, 122, 0, .18), transparent 70%);
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6));
}
.productModalDescription { color: var(--font-color-800); line-height: 1.55; }
.productModalGiveText { color: var(--dr-yellow); font-weight: 600; }

/* поля ввода в модалках */
.TotalSum-module__label,
.CountSelector-module__label,
.ItemContent-module__label,
.SelectContent-module__label,
.KitContent-module__label,
.PlayerBalanceModal-module__label {
    font-family: var(--dr-font-pixel);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .04em;
    color: var(--font-color-900);
    text-transform: uppercase;
}
.TotalSum-module__inputWrapper,
.CountSelector-module__inputWrapper,
.PlayerBalanceModal-module__inputWrapper,
.ProfileContent-module__inputWrapper,
.Selector-module__dropDownCurrentItem {
    background: var(--dr-navy-0) !important;
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-sm);
    overflow: hidden;
}
.TotalSum-module__currency,
.PlayerBalanceModal-module__currency {
    font-family: var(--dr-font-pixel);
    font-weight: 700;
    color: #160800;
    background: var(--dr-orange);
}
.TotalSum-module__input,
.CountSelector-module__input,
.PlayerBalanceModal-module__input,
.ProfileContent-module__input {
    color: var(--dr-white);
    background: transparent;
    font-family: var(--dr-font-pixel);
    font-weight: 600;
    font-size: 16px;
}
.CountSelector-module__changeCountBtn { background: var(--dr-navy-3); color: var(--dr-white); transition: background .15s ease; }
.CountSelector-module__changeCountBtn:hover,
.CountSelector-module__changeCountBtn:focus { background: var(--dr-orange); color: #160800; }
.Selector-module__dropDownList {
    background: var(--dr-navy-1);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-sm);
}
.Selector-module__dropDownItem:hover,
.Selector-module__dropDownItem.Selector-module__active { background: rgba(245, 122, 0, .14); color: var(--dr-white); }

.ProductItemSelector-module__item {
    background: var(--dr-navy-2);
    border: 1px solid var(--dr-line-soft);
    border-radius: var(--dr-radius-sm);
    transition: border-color .15s ease, background .15s ease;
}
.ProductItemSelector-module__item:hover,
.ProductItemSelector-module__item.ProductItemSelector-module__active {
    border-color: var(--dr-orange);
    background: rgba(245, 122, 0, .12);
}
.KitContent-module__containsItem,
.productModalContainsItem {
    background: var(--dr-navy-2);
    border: 1px solid var(--dr-line-soft);
    border-radius: var(--dr-radius-sm);
}
.KitContent-module__itemCount,
.productModalItemCount { color: var(--dr-cyan); font-family: var(--dr-font-pixel); font-weight: 700; }

/* рулетка */
.RouletteContent-module__rouletteItem { background: var(--dr-navy-2); border: 1px solid var(--dr-line-soft); border-radius: var(--dr-radius-sm); }
.RouletteContent-module__line { background: var(--dr-orange); box-shadow: 0 0 12px var(--dr-orange); }

/* ---------- 11. Профиль, корзина, история --------------------------- */
.ProfileNav-module__navItem {
    font-family: var(--dr-font-pixel);
    font-weight: 600;
    background: var(--dr-navy-2);
    border: 1px solid var(--dr-line-soft);
    border-radius: var(--dr-radius-sm);
    transition: border-color .15s ease, color .15s ease;
}
.ProfileNav-module__navItem:hover { border-color: rgba(245, 122, 0, .5); color: var(--dr-white); }
.ProfileNav-module__navItem.ProfileNav-module__active { border-color: var(--dr-orange); color: var(--dr-orange); background: rgba(245, 122, 0, .08); }
.ProfileNav-module__img { border-radius: var(--dr-radius-sm); border: 2px solid var(--dr-orange); }
.ProfileNav-module__name { font-family: var(--dr-font-pixel); font-weight: 700; color: var(--dr-white); }
.ProfileContent-module__box {
    background: var(--dr-navy-2);
    border: 1px solid var(--dr-line-soft);
    border-radius: var(--dr-radius-sm);
}
.ProfileContent-module__infoLineValue { color: var(--dr-orange-hot); font-weight: 700; }

.BasketTable-module__tableHeader,
.HistoryTable-module__tableHeader {
    font-family: var(--dr-font-pixel);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--font-color-900);
    background: var(--dr-navy-2);
    border-radius: var(--dr-radius-sm);
}
.BasketTable-module__tableLine,
.HistoryTable-module__tableLine {
    background: var(--dr-navy-1);
    border: 1px solid var(--dr-line-soft);
    border-radius: var(--dr-radius-sm);
    transition: border-color .15s ease;
}
.BasketTable-module__tableLine:hover,
.HistoryTable-module__tableLine:hover { border-color: rgba(245, 122, 0, .45); }
.BasketTable-module__inlineBtn { color: var(--dr-orange); }
.BasketSearch-module__wrapper,
.HistorySearch-module__wrapper { background: var(--dr-navy-0); border: 1px solid var(--dr-line); border-radius: var(--dr-radius-sm); }
.BasketSearch-module__iconWrapper,
.HistorySearch-module__iconWrapper { background: transparent; }
.BasketSearch-module__icon path,
.HistorySearch-module__icon path { stroke: var(--dr-orange); }

.Pagination-module__page,
.Pagination-module__navPageBtn {
    font-family: var(--dr-font-pixel);
    background: var(--dr-navy-2);
    border: 1px solid var(--dr-line-soft);
    border-radius: var(--dr-radius-sm);
}
.Pagination-module__page.Pagination-module__active,
.Pagination-module__page:hover { background: var(--dr-orange); color: #160800; border-color: var(--dr-orange); }

/* ---------- 12. Уведомления, cookie, футер -------------------------- */
.Toast-module__toast {
    background: var(--dr-navy-1);
    border: 1px solid var(--dr-line);
    border-left: 4px solid var(--dr-cyan);
    border-radius: var(--dr-radius-sm);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .9);
}
.Toast-module__toast.Toast-module__success { border-left-color: var(--dr-green); }
.Toast-module__toast.Toast-module__error { border-left-color: var(--dr-rust); }
.Toast-module__title { font-family: var(--dr-font-pixel); font-weight: 700; color: var(--dr-white); }

.Cookie-module__wrapper {
    background: rgba(7, 16, 28, .95);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .9);
}
.Cookie-module__icon { fill: var(--dr-orange); }

.Shop-module__wrapper > .boxFooter {
    text-align: center;
    background: var(--dr-navy-1);
    position: relative;
}
.Shop-module__wrapper > .boxFooter::before {
    content: "";
    position: absolute; left: 0; right: 0; top: -1px; height: 3px;
    background: var(--dr-hazard);
    background-size: 28px 28px;
    opacity: .55;
}
.ShopFooter-module__text { color: var(--font-color-900); font-size: 12px; line-height: 1.6; }
.ShopFooter-module__links { gap: 6px 18px; }
.ShopFooter-module__link { color: var(--font-color-800); transition: color .15s ease; }
.ShopFooter-module__link:hover { color: var(--dr-orange); }

/* ВАЖНО: копирайт GameStores оставлен полностью читаемым —
   правила платформы запрещают его скрывать/делать нечитаемым. */
.DesktopCopyright-module__wrapper,
.MobileCopyright-module__wrapper {
    background-color: var(--dr-navy-1) !important;
    color: var(--dr-white);
    border: 1px solid var(--dr-line);
}
.DesktopCopyright-module__link,
.MobileCopyright-module__link { color: var(--dr-orange); }

/* ---------- 13. Пользовательские виджеты и описания (классы dr-*) ---- */
.dr-plaque {
    position: relative;
    padding: 18px 16px 16px;
    text-align: center;
    background: linear-gradient(180deg, #06111f, #030912);
    border: 2px solid var(--dr-cyan-deep);
    border-radius: var(--dr-radius);
    box-shadow: inset 0 0 0 2px #02060c, inset 0 0 24px rgba(12, 180, 228, .12), 0 10px 30px -14px rgba(0, 0, 0, .9);
    font-family: var(--dr-font-pixel);
}
.dr-plaque::before,
.dr-plaque::after {           /* оранжевые «заклёпки» как на логотипе */
    content: "";
    position: absolute; top: 50%; width: 8px; height: 4px; margin-top: -2px;
    background: var(--dr-orange); box-shadow: 0 0 8px var(--dr-orange);
}
.dr-plaque::before { left: 6px; }
.dr-plaque::after { right: 6px; }
.dr-plaque__line { display: block; font-family: var(--dr-font-pixel); font-weight: 400; font-weight: 700; font-size: 18px; line-height: 1.35; letter-spacing: .05em; text-transform: uppercase; }
.dr-plaque__line--white { color: var(--dr-white); }
.dr-plaque__line--white b { color: var(--dr-orange); }
.dr-plaque__line--green { color: var(--dr-green); }
.dr-plaque__line--cyan { color: var(--dr-cyan); }
.dr-plaque__ip {
    display: inline-block; margin-top: 12px; padding: 6px 10px;
    font-family: var(--dr-font-body); font-size: 12px; font-weight: 600;
    color: var(--font-color-800);
    background: var(--dr-navy-2); border: 1px dashed rgba(241, 238, 232, .2); border-radius: var(--dr-radius-sm);
    user-select: all;
}

.dr-links { display: grid; gap: 8px; }
.dr-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    color: var(--dr-white);
    text-decoration: none;
    background: var(--dr-navy-2);
    border: 1px solid var(--dr-line-soft);
    border-radius: var(--dr-radius-sm);
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.dr-link:hover { border-color: var(--dr-orange); transform: translateX(3px); background: rgba(245, 122, 0, .08); }
.dr-link__icon {
    flex: 0 0 34px; height: 34px;
    display: grid; place-items: center;
    font-family: var(--dr-font-8bit); font-size: 11px; color: #160800;
    border-radius: 6px;
}
.dr-link--ds .dr-link__icon { background: #5865f2; color: #fff; }
.dr-link--tg .dr-link__icon { background: #27a7e7; color: #fff; }
.dr-link--vk .dr-link__icon { background: #0077ff; color: #fff; }
.dr-link__title { display: block; font-family: var(--dr-font-pixel); font-weight: 700; font-size: 15px; }
.dr-link__sub { display: block; font-size: 12px; color: var(--font-color-900); }

/* шаблон описания привилегии (вставляется в «Описание» товара) */
.dr-desc { text-align: left; display: grid; gap: 8px; }
.dr-desc__title { font-family: var(--dr-font-pixel); font-weight: 700; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: var(--dr-orange); text-align: center; margin: 4px 0; }
.dr-desc__row {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--dr-navy-2); border: 1px solid var(--dr-line-soft); border-radius: var(--dr-radius-sm);
}
.dr-desc__name { color: var(--dr-white); font-weight: 600; }
.dr-desc__hint { display: block; color: var(--font-color-900); font-size: 12px; }
.dr-desc__val {
    flex: 0 0 auto;
    font-family: var(--dr-font-pixel); font-weight: 700;
    color: #160800; background: var(--dr-orange);
    padding: 4px 8px; border-radius: 4px;
}
.dr-desc__val--cyan { background: var(--dr-cyan); }
.dr-desc__val--green { background: var(--dr-green); }

/* ---------- 14. Адаптив --------------------------------------------- */
@media screen and (max-width: 980px) {
    .Header-module__wrapper { min-height: 58px; }
    .Header-module__logo { font-size: 20px; }
    .Banner-module__img { width: min(680px, 100%); margin-bottom: -60px; }
}
@media screen and (max-width: 600px) {
    .container.bannerContainer { padding-top: 8px; }
    .container.bannerContainer { padding-left: 0; padding-right: 0; }
    .Banner-module__img { width: 100%; margin-bottom: -30px;
        animation: drEmerge .9s cubic-bezier(.2, 1.25, .35, 1) both; }   /* на телефоне без «парения» */
    .Header-module__wrapper { margin-bottom: 14px; padding: 0 12px; }
    .boxHeader { font-size: 16px; padding: 12px 14px 12px 24px; }
    .Shop-module__wrapper .boxBody { padding: 12px; }
    .Categories-module__categories { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
    .Categories-module__categories::-webkit-scrollbar { display: none; }
    .Categories-module__category { flex: 0 0 auto; font-size: 14px; padding: 8px 13px; }
    .Products-module__wrapper { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .Product-module__wrapper { padding: 10px; }
    .Product-module__price { font-size: 14px; padding: 5px 6px; }
    .Product-module__discount { font-size: 12px; }
    .Product-module__name { font-size: 13px; transform: translateY(0); }   /* на телефоне названия видны всегда */
    .Product-module__count { bottom: 40px; }
    .dr-plaque__line { font-size: 16px; }
}


/* =====================================================================
   15. АНИМАЦИИ (только transform / opacity — дёшево для GPU)
   ===================================================================== */

/* 15.1 Живой закат: два мягких световых пятна медленно «дышат» и дрейфуют */
body::after {
    content: "";
    position: fixed; inset: -20% -10% auto -10%; height: 90vh;
    z-index: -1; pointer-events: none;
    background:
        radial-gradient(40% 45% at 30% 35%, rgba(245, 122, 0, .34), transparent 70%),
        radial-gradient(35% 40% at 72% 30%, rgba(150, 60, 160, .36), transparent 70%);
    will-change: transform, opacity;
    animation: drSunset 18s ease-in-out infinite alternate;
}
@keyframes drSunset {
    0%   { transform: translate3d(-3%, 0, 0) scale(1);    opacity: .75; }
    50%  { transform: translate3d(2%, 2%, 0) scale(1.08); opacity: 1; }
    100% { transform: translate3d(4%, -1%, 0) scale(1.02); opacity: .8; }
}

/* 15.2 Летящие угольки (CSS-версия; если подключён custom.js — заменяется canvas-частицами) */
html::before,
html::after {
    content: "";
    position: fixed; left: 0; top: 100vh;
    width: 3px; height: 3px; border-radius: 0;
    z-index: -1; pointer-events: none;
    background: transparent;
    will-change: transform, opacity;
}
html::before {
    box-shadow:
        6vw 0 0 0 #ff9a1f, 14vw 18vh 0 0 #f57a00, 23vw 6vh 0 0 #f2be00, 31vw 32vh 0 0 #ff9a1f,
        39vw 12vh 0 0 #c24a00, 47vw 40vh 0 0 #f57a00, 55vw 4vh 0 0 #ff9a1f, 63vw 26vh 0 0 #f2be00,
        71vw 14vh 0 0 #f57a00, 79vw 36vh 0 0 #ff9a1f, 87vw 8vh 0 0 #c24a00, 95vw 22vh 0 0 #f57a00;
    animation: drEmbers 22s linear infinite;
}
html::after {
    width: 2px; height: 2px;
    box-shadow:
        3vw 30vh 0 0 #f57a00, 11vw 2vh 0 0 #f2be00, 19vw 44vh 0 0 #ff9a1f, 27vw 16vh 0 0 #c24a00,
        35vw 52vh 0 0 #f57a00, 43vw 24vh 0 0 #ff9a1f, 51vw 60vh 0 0 #f2be00, 59vw 10vh 0 0 #f57a00,
        67vw 48vh 0 0 #ff9a1f, 75vw 20vh 0 0 #c24a00, 83vw 56vh 0 0 #f57a00, 91vw 34vh 0 0 #f2be00;
    animation: drEmbers 31s linear -12s infinite;
}
@keyframes drEmbers {
    0%   { transform: translate3d(0, 0, 0);        opacity: 0; }
    10%  { opacity: .9; }
    70%  { opacity: .55; }
    100% { transform: translate3d(3vw, -170vh, 0); opacity: 0; }
}

/* 15.3 Появление карточек каскадом (повторяется при смене категории — React перерисовывает список) */
.Product-module__wrapper {
    animation: drRise .55s cubic-bezier(.2, .8, .2, 1) backwards;
}
@keyframes drRise {
    from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.Product-module__wrapper:nth-child(1)  { animation-delay: .02s; }
.Product-module__wrapper:nth-child(2)  { animation-delay: .06s; }
.Product-module__wrapper:nth-child(3)  { animation-delay: .10s; }
.Product-module__wrapper:nth-child(4)  { animation-delay: .14s; }
.Product-module__wrapper:nth-child(5)  { animation-delay: .18s; }
.Product-module__wrapper:nth-child(6)  { animation-delay: .22s; }
.Product-module__wrapper:nth-child(7)  { animation-delay: .26s; }
.Product-module__wrapper:nth-child(8)  { animation-delay: .30s; }
.Product-module__wrapper:nth-child(9)  { animation-delay: .34s; }
.Product-module__wrapper:nth-child(10) { animation-delay: .38s; }
.Product-module__wrapper:nth-child(11) { animation-delay: .42s; }
.Product-module__wrapper:nth-child(12) { animation-delay: .46s; }
.Product-module__wrapper:nth-child(n+13) { animation-delay: .50s; }

/* виджеты и шапка тоже мягко въезжают */
.headerContainer { animation: drFade .6s ease-out backwards; }
.Widgets-module__widgetWrapper { animation: drSlideIn .6s cubic-bezier(.2, .8, .2, 1) backwards; }
.Widgets-module__widgetWrapper:nth-child(2) { animation-delay: .08s; }
.Widgets-module__widgetWrapper:nth-child(3) { animation-delay: .16s; }
.Widgets-module__widgetWrapper:nth-child(n+4) { animation-delay: .24s; }
.Shop-module__wrapper { animation: drFade .5s ease-out .05s backwards; }
@keyframes drDrop    { from { opacity: 0; transform: translate3d(0, -14px, 0); } to { opacity: 1; transform: none; } }
@keyframes drSlideIn { from { opacity: 0; transform: translate3d(-16px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes drFade    { from { opacity: 0; } to { opacity: 1; } }

/* 15.4 Блик, пробегающий по карточке при наведении */
.Product-module__wrapper::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    z-index: 5; pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .0) 30%, rgba(255, 210, 150, .32) 50%, transparent 70%);
    transform: translate3d(0, 0, 0) skewX(-12deg);
    opacity: 0;
}
.Product-module__wrapper:hover::before,
.Product-module__wrapper:focus-visible::before {
    opacity: 1;
    transform: translate3d(420%, 0, 0) skewX(-12deg);
    transition: transform .75s cubic-bezier(.2, .7, .2, 1), opacity .2s ease;
}
.Product-module__wrapper:hover .Product-module__price { transform: translate3d(0, -1px, 0); }
.Product-module__price, .Product-module__discount { transition: transform .2s ease; }

/* 15.5 Блик на кнопках (акцентных и «Войти») */
.Button-module__btn.Button-module__accent,
.PlayerMenu-module__loginLink,
.PlayerMenu-module__profileLink { position: relative; overflow: hidden; isolation: isolate; }
.Button-module__btn.Button-module__accent::after,
.PlayerMenu-module__loginLink::after,
.PlayerMenu-module__profileLink::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
    z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translate3d(0, 0, 0) skewX(-18deg);
}
.Button-module__btn.Button-module__accent:hover::after,
.PlayerMenu-module__loginLink:hover::after,
.PlayerMenu-module__profileLink:hover::after {
    transform: translate3d(520%, 0, 0) skewX(-18deg);
    transition: transform .6s ease;
}

/* 15.6 Пульсирующее свечение CTA «Войти» и логотипа */
.PlayerMenu-module__loginLink::before {
    content: "";
    position: absolute; inset: 0; z-index: -2; pointer-events: none;
    border-radius: inherit;
    box-shadow: 0 0 22px 4px rgba(245, 122, 0, .65);
    animation: drPulse 2.8s ease-in-out infinite;
}
@keyframes drPulse { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
.Header-module__logo { position: relative; }
.Header-module__logo::after {
    content: "";
    position: absolute; inset: -6px -10px; z-index: -1; pointer-events: none;
    background: radial-gradient(50% 60% at 50% 50%, rgba(245, 122, 0, .35), transparent 70%);
    animation: drPulse 4s ease-in-out infinite;
}
/* мерцание полосы «опасности» под шапкой — бегущие полосы */
.Header-module__wrapper::after {
    background-size: 28.28px 28.28px;
    animation: drHazard 1.6s linear infinite;
}
@keyframes drHazard { from { background-position: 0 0; } to { background-position: 28.28px 0; } }

/* 15.7 Категории: плавное «нажатие» и вспышка активной вкладки */
.Categories-module__category:active { transform: translate3d(0, 1px, 0) scale(.97); }
.Categories-module__category.Categories-module__active { animation: drTabIn .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes drTabIn { from { transform: scale(.92); opacity: .6; } to { transform: none; opacity: 1; } }

/* 15.8 Модалки: фон проявляется, окно — scale + fade */
.ModalLayout-module__wrapper { animation: drFade .25s ease-out; }
.ModalLayout-module__modal { animation: drModalIn .32s cubic-bezier(.2, .9, .25, 1.1); }
@keyframes drModalIn { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.94); } to { opacity: 1; transform: none; } }
.PlayerMenuMobile-module__menu { transition: transform .38s cubic-bezier(.2, .8, .2, 1); box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .9); }
.PlayerMenuMobile-module__menuWrapper { transition: opacity .3s ease, visibility .3s step-end; }

/* 15.9 Корзина / история: строки въезжают каскадом */
.BasketTable-module__tableLine,
.HistoryTable-module__tableLine { animation: drRise .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.BasketTable-module__tableLine:nth-child(2), .HistoryTable-module__tableLine:nth-child(2) { animation-delay: .05s; }
.BasketTable-module__tableLine:nth-child(3), .HistoryTable-module__tableLine:nth-child(3) { animation-delay: .10s; }
.BasketTable-module__tableLine:nth-child(4), .HistoryTable-module__tableLine:nth-child(4) { animation-delay: .15s; }
.BasketTable-module__tableLine:nth-child(n+5), .HistoryTable-module__tableLine:nth-child(n+5) { animation-delay: .20s; }

/* 15.10 Уведомления выезжают справа */
.Toast-module__toast { animation: drToast .35s cubic-bezier(.2, .9, .25, 1.1); }
@keyframes drToast { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } }

/* 15.11 Виджет-табличка: «заклёпки» мигают как на логотипе */
.dr-plaque::before, .dr-plaque::after { animation: drPulse 2.4s ease-in-out infinite; }
.dr-plaque::after { animation-delay: 1.2s; }

/* 15.12 Режим JS-появления при прокрутке (включается только из custom.js) */
html.dr-js .dr-reveal { opacity: 0; transform: translate3d(0, 22px, 0); animation: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
html.dr-js .dr-reveal.dr-in { opacity: 1; transform: none; }
html.dr-js .dr-reveal.dr-in:hover { transform: translate3d(0, -4px, 0); }
html.dr-particles::before, html.dr-particles::after { display: none; }
#dr-embers { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* на телефонах — облегчённый фон */
@media screen and (max-width: 600px) {
    html::after { display: none; }
    body::after { animation-duration: 26s; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
    html::before, html::after, body::after, #dr-embers { display: none !important; }
    html.dr-js .dr-reveal { opacity: 1 !important; transform: none !important; }
    .Banner-module__img { opacity: 1 !important; transform: none !important; }
}

/* ---------- 16. Экран загрузки GameStores ------------------------- */
.gs-loader { background-color: var(--dr-navy-0) !important; }
.gs-loader__spinner {
    border-color: var(--dr-orange) !important;
    border-bottom-color: var(--dr-navy-3) !important;
    border-radius: 0 !important;                 /* квадратный «пиксельный» спиннер */
    box-shadow: 0 0 24px rgba(245, 122, 0, .45);
}
/* ошибка мониторинга («Нет серверов») */
.MonitoringWidget-module__body .errorMessage { color: var(--font-color-900); font-family: var(--dr-font-pixel); letter-spacing: .04em; }

/* =====================================================================
   17. ЖИВОЙ ФОН (#dr-bg создаёт custom.js): закат, дым, силуэт, вуаль
   ===================================================================== */
#dr-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
html.dr-bg-on body::after { display: none; }          /* CSS-закат заменён на JS-слои */
.dr-bg__sky { position: absolute; inset: -10%; will-change: opacity, transform; }
.dr-bg__sky--a {
    background:
        radial-gradient(60% 50% at 25% 30%, rgba(108, 36, 120, .70), transparent 70%),
        radial-gradient(55% 45% at 75% 38%, rgba(245, 122, 0, .45), transparent 70%),
        linear-gradient(180deg, #1c0b2a 0%, #2a0f2e 30%, #120a1c 62%, var(--dr-navy-0) 100%);
    animation: drSkyA 24s ease-in-out infinite alternate;
}
.dr-bg__sky--b {
    background:
        radial-gradient(60% 50% at 70% 26%, rgba(150, 50, 170, .55), transparent 70%),
        radial-gradient(70% 45% at 30% 46%, rgba(255, 120, 20, .55), transparent 70%),
        linear-gradient(180deg, #2b0d22 0%, #3b1418 34%, #140a16 64%, var(--dr-navy-0) 100%);
    opacity: 0;
    animation: drSkyB 24s ease-in-out infinite alternate;
}
@keyframes drSkyA { 0% { transform: translate3d(-2%, 0, 0) scale(1); } 100% { transform: translate3d(2%, 1%, 0) scale(1.06); } }
@keyframes drSkyB { 0% { opacity: 0; transform: translate3d(2%, 0, 0) scale(1.04); } 100% { opacity: 1; transform: translate3d(-2%, -1%, 0) scale(1); } }
.dr-bg__smoke {
    position: absolute; left: -50%; width: 200%; height: 45vh;
    background:
        radial-gradient(18% 40% at 12% 50%, rgba(170, 150, 170, .16), transparent 70%),
        radial-gradient(14% 35% at 38% 40%, rgba(140, 120, 150, .13), transparent 70%),
        radial-gradient(20% 45% at 63% 55%, rgba(170, 150, 170, .15), transparent 70%),
        radial-gradient(15% 38% at 88% 45%, rgba(140, 120, 150, .12), transparent 70%);
    filter: blur(6px);
    translate: var(--dr-mx, 0) var(--dr-my, 0);
    will-change: transform;
}
.dr-bg__smoke--1 { top: 12vh; animation: drSmoke 70s linear infinite; }
.dr-bg__smoke--2 { top: 34vh; opacity: .8; animation: drSmoke 110s linear infinite reverse; }
@keyframes drSmoke { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(25%, 0, 0); } }
.dr-bg__ridge { position: absolute; left: -2%; width: 104%; bottom: 0; fill: #05080f; translate: var(--dr-mx, 0) 0; will-change: transform; }
.dr-bg__ridge--far  { height: 30vh; bottom: 6vh; fill: #120c1c; opacity: .85; }
.dr-bg__ridge--near { height: 24vh; fill: #060a12; opacity: .95; }
.dr-bg__veil {                                         /* затемнение под контентом — читаемость */
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, transparent 0, rgba(3, 7, 13, .45) calc(50% - 640px), rgba(3, 7, 13, .45) calc(50% + 640px), transparent 100%),
        linear-gradient(180deg, transparent 0, rgba(3, 7, 13, .25) 40%, rgba(3, 7, 13, .55) 100%);
}
@media screen and (max-width: 600px) {
    .dr-bg__smoke { filter: none; }
    .dr-bg__smoke--2 { display: none; }
    .dr-bg__ridge--far { height: 20vh; }
    .dr-bg__ridge--near { height: 16vh; }
}
.container.bannerContainer { transform-origin: 50% 60%; will-change: transform; }

/* =====================================================================
   18. ВЕРХНИЙ БЛОК: приветствие, подключение, преимущества
   ===================================================================== */
.dr-hero { margin-bottom: 22px; }
.dr-hero__row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; }
.dr-panel {
    position: relative; overflow: hidden;
    padding: 20px 22px;
    background: linear-gradient(160deg, rgba(17, 34, 54, .82), rgba(7, 16, 28, .88));
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.dr-panel::after {                                      /* hazard-полоса снизу */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--dr-hazard); background-size: 28px 28px; opacity: .75;
    animation: drHazard 1.6s linear infinite;
}
.dr-panel__tag { display: block; margin-bottom: 8px; font-family: var(--dr-font-pixel); font-size: 13px; letter-spacing: .12em; color: var(--dr-cyan); }
.dr-welcome__title { margin: 0 0 6px; font-family: var(--dr-font-pixel); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--dr-white); text-transform: uppercase; letter-spacing: .03em; }
.dr-welcome__title b { font-weight: 400; color: var(--dr-orange); text-shadow: 0 0 18px rgba(245, 122, 0, .5); }
.dr-welcome__wipe { margin: 0 0 14px; color: #b9c2cf; font-size: 15px; }
.dr-timer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dr-timer__label { font-family: var(--dr-font-pixel); font-size: 14px; color: var(--dr-yellow); text-transform: uppercase; letter-spacing: .08em; }
.dr-timer__grid { display: flex; gap: 8px; }
.dr-timer__cell {
    display: grid; justify-items: center; min-width: 58px; padding: 8px 6px 6px;
    background: var(--dr-navy-0); border: 1px solid rgba(245, 122, 0, .35); border-radius: 6px;
    box-shadow: inset 0 -3px 0 rgba(245, 122, 0, .25);
}
.dr-timer__cell b { display: block; font-family: var(--dr-font-pixel); font-weight: 400; font-size: 26px; line-height: 1; color: var(--dr-orange-hot); text-shadow: 0 0 12px rgba(245, 122, 0, .55); }
.dr-timer__cell i { font-style: normal; font-size: 11px; color: #8d97a6; text-transform: uppercase; margin-top: 3px; }
.dr-timer__cell b.dr-tick { animation: drTick .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes drTick { from { transform: translateY(-35%); opacity: .2; } to { transform: none; opacity: 1; } }
.dr-wipe-soon .dr-timer__cell { border-color: var(--dr-rust); box-shadow: inset 0 -3px 0 var(--dr-rust), 0 0 16px rgba(204, 72, 36, .5); }

.dr-connect__row { display: flex; gap: 8px; margin-bottom: 12px; }
.dr-connect__cmd {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
    padding: 10px 12px; font-family: var(--dr-font-pixel); font-size: 16px; letter-spacing: .04em;
    color: var(--dr-green); background: var(--dr-navy-0); border: 1px dashed rgba(108, 204, 24, .4); border-radius: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all;
}
.dr-btn {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 6px; cursor: pointer; text-decoration: none;
    font-family: var(--dr-font-pixel); text-transform: uppercase; letter-spacing: .06em;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.dr-btn--ghost { flex: 0 0 auto; padding: 0 14px; font-size: 14px; color: var(--dr-white); background: var(--dr-navy-3); border: 1px solid var(--dr-line); }
.dr-btn--ghost:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--dr-cyan), 0 6px 18px -6px rgba(12, 180, 228, .6); }
.dr-btn.dr-copied { color: #0b1200; background: var(--dr-green); animation: drCopied .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes drCopied { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.dr-btn--play {
    width: 100%; padding: 16px; font-size: 30px; color: #1a0900;
    background: linear-gradient(180deg, var(--dr-orange-hot), var(--dr-orange) 55%, var(--dr-orange-deep));
    box-shadow: 0 5px 0 #6e2800, 0 0 0 1px rgba(255, 190, 90, .5), 0 0 34px rgba(245, 122, 0, .55);
    text-shadow: 0 1px 0 rgba(255, 220, 160, .6);
}
.dr-btn--play::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 0%, rgba(255, 236, 190, .55), transparent 70%); opacity: 0; animation: drPlayGlow 2.4s ease-in-out infinite; }
.dr-btn--play::before {                                 /* блик */
    content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 245, 220, .55), transparent);
    transform: skewX(-20deg) translateX(0); animation: drPlayShine 3.2s ease-in-out infinite;
}
.dr-btn--play span { position: relative; z-index: 1; }
.dr-btn--play:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #6e2800, 0 0 0 1px rgba(255, 210, 120, .8), 0 0 52px rgba(255, 140, 20, .75); }
.dr-btn--play:active { transform: translateY(3px); box-shadow: 0 2px 0 #6e2800, 0 0 24px rgba(245, 122, 0, .5); }
@keyframes drPlayGlow { 0%,100% { opacity: .1; } 50% { opacity: .8; } }
@keyframes drPlayShine { 0%, 55% { transform: skewX(-20deg) translateX(0); } 100% { transform: skewX(-20deg) translateX(560%); } }
.dr-connect__hint { margin: 10px 0 12px; font-size: 12.5px; color: #8d97a6; }

/* Discord */
.dr-discord {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    color: #fff; background: #5865f2; border-radius: 8px; text-decoration: none;
    transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s ease, background-color .2s ease;
}
.dr-discord svg { width: 22px; height: 22px; display: block; }
.dr-discord:hover { color: #fff; background: #6874ff; transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(160, 168, 255, .7), 0 8px 26px -4px rgba(88, 101, 242, .8); }
.dr-discord--wide { width: 100%; padding: 11px; font-family: var(--dr-font-pixel); font-size: 16px; letter-spacing: .05em; text-transform: uppercase; }
.dr-discord--header { width: 40px; height: 40px; flex: 0 0 auto; margin-right: 10px; box-shadow: 0 0 18px -4px rgba(88, 101, 242, .7); }

/* Преимущества */
.dr-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.dr-feature {
    position: relative; padding: 20px 22px 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)), rgba(10, 16, 26, .62);
    border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--dr-radius);
    transition: transform .25s cubic-bezier(.2, .9, .3, 1.2), border-color .25s ease, box-shadow .25s ease;
}
.dr-feature:hover { transform: translateY(-4px); border-color: rgba(245, 122, 0, .6); box-shadow: 0 0 0 1px rgba(245, 122, 0, .25), 0 14px 34px -12px rgba(245, 122, 0, .45); }
.dr-feature__icon { width: 30px; height: 30px; margin-bottom: 12px; fill: var(--dr-orange); filter: drop-shadow(0 0 8px rgba(245, 122, 0, .55)); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.dr-feature__icon .dr-feature__cut { fill: none; stroke: var(--dr-navy-0); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dr-feature__icon .dr-feature__core { fill: var(--dr-yellow); }
.dr-feature:hover .dr-feature__icon { transform: scale(1.15) rotate(-6deg); }
.dr-feature__title { margin: 0 0 8px; font-family: var(--dr-font-body); font-weight: 800; font-size: 18px; color: var(--dr-yellow); }
.dr-feature__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: #a7adb8; }
.dr-feature__text b { color: var(--dr-white); }
html:not(.dr-js) .dr-feature { animation: drRise .55s cubic-bezier(.2, .8, .2, 1) backwards; }
html:not(.dr-js) .dr-feature:nth-child(2) { animation-delay: .1s; }
html:not(.dr-js) .dr-feature:nth-child(3) { animation-delay: .2s; }

@media screen and (max-width: 980px) {
    .dr-hero__row { grid-template-columns: 1fr; }
}
@media screen and (max-width: 600px) {
    .dr-hero { margin-bottom: 14px; }
    .dr-panel { padding: 16px; }
    .dr-welcome__title { font-size: 22px; }
    .dr-timer__cell { min-width: 52px; }
    .dr-timer__cell b { font-size: 22px; }
    .dr-btn--play { font-size: 24px; padding: 14px; }
    .dr-features { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
    .dr-discord--header { width: 36px; height: 36px; margin-right: 6px; }
    .dr-discord--header svg { width: 19px; height: 19px; }
}

/* =====================================================================
   19. Статическая страница «Правила» (/page/rules)
   ===================================================================== */
.dr-rules { color: #c4cad4; font-size: 15px; line-height: 1.55; }
.dr-rules__lead { margin: 0 0 18px; padding: 12px 16px; font-family: var(--dr-font-pixel); font-size: 18px; letter-spacing: .03em; color: var(--dr-white); background: linear-gradient(90deg, rgba(245, 122, 0, .16), transparent); border-left: 3px solid var(--dr-orange); border-radius: 6px; }
.dr-rules__lead b { font-family: inherit; font-weight: 400; color: var(--dr-orange); text-shadow: 0 0 14px rgba(245, 122, 0, .5); }
.dr-rules__block {
    margin: 0 0 14px; padding: 16px 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), rgba(3, 7, 13, .6);
    border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--dr-radius);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.dr-rules__block:hover { border-color: rgba(245, 122, 0, .45); box-shadow: 0 12px 30px -16px rgba(245, 122, 0, .45); }
.dr-rules__h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--dr-font-pixel); font-weight: 400; font-size: 20px; color: var(--dr-white); letter-spacing: .03em; }
.dr-rules__h > span { padding: 2px 7px; font-family: inherit; font-size: 14px; color: #160800; background: var(--dr-orange); border-radius: 4px; }
.dr-rules__icon { flex: 0 0 auto; width: 26px; height: 26px; fill: var(--dr-orange); filter: drop-shadow(0 0 7px rgba(245, 122, 0, .55)); }
.dr-rules__cut { fill: none; stroke: var(--dr-navy-0); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dr-rules__list { margin: 0; padding: 0; list-style: none; }
.dr-rules__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.dr-rules__list li:first-child { border-top: 0; }
.dr-rules__num { flex: 0 0 auto; min-width: 30px; font-style: normal; font-family: var(--dr-font-pixel); color: var(--dr-cyan); }
.dr-rules__txt { flex: 1 1 280px; font-family: inherit; }
.dr-rules__tags { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; margin-left: auto; font-family: inherit; }
.dr-rules__tags i { font-style: normal; color: #5d6675; }
.dr-tag { display: inline-block; padding: 2px 8px; font-family: var(--dr-font-pixel) !important; font-size: 13px; line-height: 1.4; letter-spacing: .05em; border-radius: 4px; border: 1px solid; white-space: nowrap; }
.dr-tag--perm { color: #ff6b6b; background: rgba(220, 38, 38, .16); border-color: rgba(239, 68, 68, .6); box-shadow: 0 0 12px -2px rgba(239, 68, 68, .5); }
.dr-tag--ban  { color: var(--dr-orange-hot); background: rgba(245, 122, 0, .14); border-color: rgba(245, 122, 0, .6); }
.dr-tag--warn { color: var(--dr-yellow); background: rgba(242, 190, 0, .12); border-color: rgba(242, 190, 0, .55); }
.dr-tag--misc { color: #b9c2cf; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .2); }
.dr-rules__block--alert { border-color: rgba(239, 68, 68, .45); background: linear-gradient(160deg, rgba(220, 38, 38, .12), rgba(3, 7, 13, .6)); }
.dr-rules__check { display: flex; gap: 12px; align-items: flex-start; margin: 0; color: var(--dr-white); }
.dr-rules__check > span { font-family: inherit; }
.dr-rules__block--alert .dr-rules__icon { fill: #ef4444; filter: drop-shadow(0 0 8px rgba(239, 68, 68, .6)); }
.dr-rules__bye { margin: 22px 0 6px; text-align: center; font-family: var(--dr-font-pixel); font-size: 28px; letter-spacing: .08em; color: var(--dr-orange); text-shadow: 0 0 20px rgba(245, 122, 0, .55); }
html:not(.dr-js) .dr-rules__block { animation: drRise .55s cubic-bezier(.2, .8, .2, 1) backwards; }
@media screen and (max-width: 600px) {
    .dr-rules__h { font-size: 17px; }
    .dr-rules__block { padding: 14px 12px; }
    .dr-rules__list li { flex-wrap: wrap; }
    .dr-rules__txt { flex: 1 1 0; min-width: 0; }
    .dr-rules__tags { flex-basis: 100%; margin-left: 40px; }
    .dr-rules__bye { font-size: 22px; }
}

/* чип «Лимит команды» в приветствии */
.dr-welcome { display: flex; flex-direction: column; }
.dr-chip {
    order: 5; align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; font-family: var(--dr-font-pixel) !important; font-size: 15px; letter-spacing: .04em; color: var(--dr-white);
    background: rgba(108, 204, 24, .1); border: 1px solid rgba(108, 204, 24, .45); border-radius: 999px;
}
.dr-welcome .dr-timer { margin-bottom: 16px; }
.dr-chip svg { width: 18px; height: 18px; fill: var(--dr-green); }
.dr-chip b { font-family: inherit !important; font-weight: 400; color: var(--dr-green); }

@media (prefers-reduced-motion: reduce) {
    #dr-bg { display: none !important; }
    .container.bannerContainer { transform: none !important; }
}

/* шаблон задаёт шрифт на span/b — внутри наших блоков наследуем от родителя */
.dr-hero span, .dr-hero b, .dr-hero i, .dr-hero code, .dr-rules span, .dr-rules b { font-family: inherit; }
.dr-connect__cmd { font-family: var(--dr-font-pixel) !important; }
.dr-hero .dr-timer__cell b, .dr-hero .dr-welcome__title b { font-family: var(--dr-font-pixel); }
@media screen and (max-width: 600px) {
    .dr-connect__row { flex-direction: column; }
    .dr-connect__cmd { justify-content: center; font-size: 15px; }
    .dr-btn--ghost { padding: 10px 14px; }
}

/* ---------- fix: кнопка баланса при наведении ---------- */
.PlayerBalance-module__btn,
.PlayerBalance-module__btn:focus {
    background: var(--dr-navy-2) !important;
    color: var(--dr-white) !important;
    border: 1px solid var(--dr-line) !important;
    transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}
.PlayerBalance-module__btn:hover,
.PlayerBalance-module__btn:focus-visible {
    background: linear-gradient(180deg, rgba(245,122,0,.14), rgba(245,122,0,.06)), var(--dr-navy-2) !important;
    color: var(--dr-orange-hot) !important;
    border-color: var(--dr-orange) !important;
    box-shadow: 0 0 0 1px rgba(245,122,0,.25), 0 6px 18px -6px rgba(245,122,0,.55);
    transform: translateY(-1px);
}
.PlayerBalance-module__btn * { color: inherit !important; }

/* =====================================================================
   20. КОМПАКТНЫЙ КАТАЛОГ: шире витрина, мелкие карточки с подписью,
       липкие категории + поиск в одну строку, плотнее верхний блок
   ===================================================================== */
/* 20.1 Шире контейнер на больших экранах, колонка мониторинга уже */
@media screen and (min-width: 1360px) {
    .container { width: 1320px; }
}
@media screen and (min-width: 971px) {
    .Widgets-module__wrapper { min-width: 208px; max-width: 208px; margin-right: 14px; }
    .Widgets-module__wrapper.Widgets-module__rightSide { margin-right: 0; margin-left: 14px; }
}

/* 20.2 Категории слева, поиск справа; обе — «липкие» при прокрутке */
.Shop-module__wrapper > .boxBody { padding: 14px 16px 16px; }
@media screen and (min-width: 971px) {
    .Shop-module__wrapper > .boxBody {
        display: grid; grid-template-columns: minmax(0, 1fr) 230px;
        align-items: start; column-gap: 12px;
    }
    .Shop-module__wrapper > .boxBody > * { grid-column: 1 / -1; }
    .Shop-module__wrapper > .boxBody > .Categories-module__categories { grid-column: 1; }
    .Shop-module__wrapper > .boxBody > .Search-module__wrapper { grid-column: 2; grid-row: 1; margin-top: 0; }
}
.Categories-module__categories,
.Search-module__wrapper {
    position: sticky; top: 0; z-index: 30;
}
.Categories-module__categories {
    gap: 6px; padding: 8px 0;
    background: linear-gradient(180deg, rgba(7, 16, 28, .97) 75%, rgba(7, 16, 28, 0));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.Search-module__wrapper { height: 36px; margin-top: 8px; top: 8px; }
.Categories-module__category { font-size: 13px; padding: 6px 11px; letter-spacing: .02em; }

/* 20.3 Сетка: ~6 карточек в ряд на ПК, 4–5 на планшете, 3 — на телефоне */
.Products-module__wrapper,
.Products-module__wrapper[class*="Products-module__grid"] {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 10px; margin-top: 10px;
}

/* 20.4 Карточка: картинка + всегда видимая подпись снизу */
.Product-module__wrapper {
    display: flex; flex-direction: column;
    padding: 0; border-radius: 8px;
}
.Product-module__img {
    order: 1; width: 100%; padding: 26px 14px 6px; box-sizing: border-box;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55));
}
.Product-module__name,
.Product-module__wrapper:hover .Product-module__name {
    order: 2; position: relative; inset: auto; transform: none; z-index: 2;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    width: auto; align-self: stretch; height: 2.4em; padding: 0 8px; margin: 0 0 10px; box-sizing: content-box;
    font-family: var(--dr-font-body); font-weight: 700; font-size: 13px; line-height: 1.2;
    color: #d8dde5; text-align: center; background: none;
    overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto;
    transition: color .2s ease;
}
.Product-module__wrapper:hover .Product-module__name { color: var(--dr-white); }
.Product-module__price { top: 8px; left: 8px; font-size: 14px; padding: 4px 7px; border-radius: 5px; }
.Product-module__oldPrice { font-size: 12px; }
.Product-module__discount { top: 8px; right: 8px; font-size: 12.5px; padding: 4px 6px; border-radius: 5px; }
.Product-module__favorite { padding: 5px; }
.Product-module__favorite svg { width: 17px; height: 17px; }
.Product-module__favoriteWithDiscount { top: 32px; }
.Product-module__count,
.Product-module__wrapper:hover .Product-module__count { opacity: 1; }
.Product-module__count { right: 9px; bottom: 46px; font-size: 13px; }
.Product-module__wrapper:hover,
.Product-module__wrapper:focus-visible,
html.dr-js .dr-reveal.Product-module__wrapper.dr-in:hover { transform: translate3d(0, -3px, 0); }
.Product-module__wrapper:hover .Product-module__img { transform: scale(1.08); }
html.dr-js .dr-reveal.Product-module__wrapper { transform: translate3d(0, 12px, 0); transition-duration: .45s; }
html.dr-js .dr-reveal.Product-module__wrapper.dr-in { transform: none; }

/* 20.5 «Показать ещё» (кнопку добавляет custom.js; без JS показываются все товары) */
.dr-more { display: flex; justify-content: center; margin-top: 12px; }
.dr-more[hidden] { display: none; }
.dr-more { position: relative; z-index: 5; }
.dr-more__btn { position: relative; z-index: 5; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dr-more__btn * { pointer-events: none; }
.dr-more__btn {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 22px; cursor: pointer;
    font-family: var(--dr-font-pixel); font-size: 15px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--dr-white); background: var(--dr-navy-2);
    border: 1px solid rgba(245, 122, 0, .55); border-radius: var(--dr-radius-sm);
    clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dr-more__btn b { font-family: inherit; font-weight: 400; color: var(--dr-orange-hot); }
.dr-more__btn svg { width: 14px; height: 14px; fill: currentColor; transition: transform .25s ease; }
.dr-more__btn:hover { color: #160800; background: linear-gradient(180deg, var(--dr-orange-hot), var(--dr-orange)); transform: translateY(-2px); box-shadow: var(--dr-glow); }
.dr-more__btn:hover b { color: #160800; }
.dr-more__btn:hover svg { transform: translateY(2px); }
.dr-more__btn--less svg { transform: rotate(180deg); }
.dr-more__btn--less:hover svg { transform: rotate(180deg) translateY(2px); }

/* 20.6 Верхний блок плотнее (всё содержимое на месте) */
.dr-hero { margin-bottom: 14px; }
.dr-hero__row { gap: 12px; }
.dr-panel { padding: 14px 18px 16px; }
.dr-panel__tag { margin-bottom: 4px; font-size: 12px; }
.dr-welcome__title { font-size: 24px; margin-bottom: 4px; }
.dr-welcome__wipe { margin-bottom: 10px; font-size: 14px; }
.dr-welcome .dr-timer { margin-bottom: 10px; }
.dr-timer__cell { min-width: 50px; padding: 6px 5px 5px; }
.dr-timer__cell b { font-size: 22px; }
.dr-timer__cell i { font-size: 10px; margin-top: 2px; }
.dr-chip { padding: 5px 11px; font-size: 14px; }
.dr-connect__row { margin-bottom: 10px; }
.dr-connect__cmd { padding: 8px 12px; font-size: 15px; }
.dr-btn--play { padding: 11px; font-size: 26px; }
.dr-connect__hint { margin: 8px 0 10px; font-size: 12px; line-height: 1.4; }
.dr-discord--wide { padding: 8px; font-size: 15px; }
.dr-features { gap: 12px; margin-top: 12px; }
.dr-feature {
    display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: center;
    padding: 12px 16px;
}
.dr-feature__icon { grid-row: 1 / span 2; width: 28px; height: 28px; margin: 0; }
.dr-feature__title { margin: 0 0 2px; font-size: 15.5px; }
.dr-feature__text { font-size: 13px; line-height: 1.4; }

/* 20.7 Телефон: 3 товара в ряд, преимущества — лента с прокруткой вбок */
@media screen and (max-width: 600px) {
    .Shop-module__wrapper > .boxBody { padding: 8px 10px 12px; }
    .Categories-module__categories { padding: 6px 0; }
    .Categories-module__category { font-size: 13px; padding: 6px 11px; }
    .Search-module__wrapper { position: relative; top: auto; margin-top: 4px; height: 36px; }
    .Products-module__wrapper,
    .Products-module__wrapper[class*="Products-module__grid"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px;
    }
    .Product-module__wrapper { padding: 0; }
    .Product-module__img { padding: 22px 6px 3px; }
    .Product-module__name { font-size: 11.5px; padding: 0 4px; margin-bottom: 7px; }
    .Product-module__price { top: 5px; left: 5px; font-size: 12px; padding: 3px 5px; }
    .Product-module__discount { top: 5px; right: 5px; font-size: 11px; padding: 3px 5px; }
    .Product-module__count { right: 6px; bottom: 37px; font-size: 11.5px; }

    .dr-hero { margin-bottom: 10px; }
    .dr-hero__row { gap: 10px; }
    .dr-panel { padding: 12px 14px 14px; }
    .dr-welcome__title { font-size: 20px; }
    .dr-welcome__wipe { font-size: 13px; margin-bottom: 8px; }
    .dr-timer { gap: 10px; }
    .dr-timer__cell { min-width: 46px; }
    .dr-timer__cell b { font-size: 19px; }
    .dr-connect__row { flex-direction: row; }
    .dr-connect__cmd { font-size: 13px; padding: 8px 10px; justify-content: flex-start; }
    .dr-btn--ghost { padding: 8px 10px; }
    .dr-btn--play { font-size: 22px; padding: 10px; }
    .dr-connect__hint { margin: 6px 0 8px; font-size: 11.5px; }
    .dr-features {
        display: flex; gap: 8px; margin: 10px -12px 0; padding: 2px 12px 4px;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 12px; scrollbar-width: none;
    }
    .dr-features::-webkit-scrollbar { display: none; }
    .dr-feature { flex: 0 0 78%; scroll-snap-align: start; padding: 10px 12px; }
    .dr-feature:hover { transform: none; }
    .dr-feature__title { font-size: 14px; }
    .dr-feature__text { font-size: 12px; }
}

/* 21. Наборы — тонкая золотая рамка (атрибут data-dr-kit ставит custom.js по категории «Наборы»;
       data-productid — запасной вариант для известных наборов, если JS не загрузился) */
.Product-module__wrapper[data-dr-kit],
.Product-module__wrapper[data-productid="10311295"],
.Product-module__wrapper[data-productid="10311298"] {
    --dr-gold: #e8b64a;
    border-color: rgba(232, 182, 74, .9);
    box-shadow:
        0 0 0 .75px rgba(232, 182, 74, .55),
        0 0 14px -3px rgba(242, 190, 0, .38),
        inset 0 0 14px -6px rgba(242, 190, 0, .35),
        0 10px 24px -16px rgba(0, 0, 0, .9);
}
.Product-module__wrapper[data-dr-kit]:hover,
.Product-module__wrapper[data-dr-kit]:focus-visible,
.Product-module__wrapper[data-productid="10311295"]:hover,
.Product-module__wrapper[data-productid="10311298"]:hover {
    border-color: #f5cd6a;
    box-shadow:
        0 0 0 1px rgba(245, 205, 106, .85),
        0 0 22px -2px rgba(242, 190, 0, .55),
        inset 0 0 18px -6px rgba(242, 190, 0, .45),
        0 14px 28px -14px rgba(0, 0, 0, .9);
}

/* =====================================================================
   A5. Календарь вайпов (под «Мониторингом»)
   ===================================================================== */
.dr-wipecal { margin-top: 16px; }
.dr-wipecal .drc-body { padding: 10px 10px 12px; font-family: Manrope, Roboto, system-ui, sans-serif; }
.dr-wipecal .drc-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dr-wipecal .drc-month { font-size: 13px; font-weight: 700; color: #f1eee8; letter-spacing: .3px; }
.dr-wipecal .drc-arr { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(255,122,26,.35); background: rgba(255,122,26,.08); color: #ff8a2a; font-size: 18px; line-height: 20px; cursor: pointer; transition: background .2s, transform .2s; padding: 0; }
.dr-wipecal .drc-arr:hover { background: rgba(255,122,26,.25); transform: scale(1.08); }
.dr-wipecal .drc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dr-wipecal .drc-wd { font-size: 10px; color: rgba(241,238,232,.45); padding: 2px 0; text-transform: uppercase; }
.dr-wipecal .drc-wd.drc-we { color: rgba(255,138,42,.7); }
.dr-wipecal .drc-d { position: relative; font-size: 12px; line-height: 22px; height: 22px; border-radius: 5px; color: rgba(241,238,232,.8); }
.dr-wipecal .drc-d.drc-w { background: rgba(255,122,26,.22); color: #ffb070; font-weight: 700; cursor: help; }
.dr-wipecal .drc-d.drc-g { background: linear-gradient(135deg,#ff5a1f,#e8b64a); color: #1a0d03; font-weight: 800; cursor: help; box-shadow: 0 0 8px rgba(255,110,30,.55); animation: drcPulse 2.4s ease-in-out infinite; }
.dr-wipecal .drc-d.drc-t { outline: 2px solid #f1eee8; outline-offset: -2px; }
@keyframes drcPulse { 50% { box-shadow: 0 0 14px rgba(255,140,40,.85); } }
.dr-wipecal .drc-d[data-tip]:hover::after { content: attr(data-tip); position: absolute; z-index: 30; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 150px; padding: 6px 8px; border-radius: 6px; background: #0d131c; border: 1px solid rgba(255,122,26,.5); color: #f1eee8; font-size: 11px; font-weight: 500; line-height: 1.35; white-space: normal; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.dr-wipecal .drc-grid > :nth-child(7n+1)[data-tip]:hover::after, .dr-wipecal .drc-grid > :nth-child(7n+2)[data-tip]:hover::after { left: 0; transform: none; }
.dr-wipecal .drc-grid > :nth-child(7n)[data-tip]:hover::after, .dr-wipecal .drc-grid > :nth-child(7n+6)[data-tip]:hover::after { left: auto; right: 0; transform: none; }
.dr-wipecal .drc-leg { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 10px; color: rgba(241,238,232,.65); }
.dr-wipecal .drc-leg span { display: inline-flex; align-items: center; gap: 4px; }
.dr-wipecal .drc-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.dr-wipecal .drc-leg i.drc-w { background: rgba(255,122,26,.45); }
.dr-wipecal .drc-leg i.drc-g { background: linear-gradient(135deg,#ff5a1f,#e8b64a); }
.dr-wipecal .drc-leg i.drc-t { outline: 2px solid #f1eee8; outline-offset: -2px; }
.dr-wipecal .drc-next { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07); font-size: 11px; line-height: 1.4; color: rgba(241,238,232,.8); }
.dr-wipecal .drc-gl { color: #ffb84a; }
.dr-wipecal .drc-cd { display: block; margin-top: 3px; font-family: "Tiny5","Press Start 2P",monospace; font-size: 14px; color: #ff8a2a; letter-spacing: 1px; }
@media (max-width: 768px) { .dr-wipecal .drc-d { line-height: 30px; height: 30px; font-size: 14px; } .dr-wipecal .drc-body { padding: 12px; } }
.dr-wipecal .boxHeader { font-size: 14px; white-space: nowrap; }

/* ===== 24. Сетка предметов набора в окне товара (custom.js A7) ===== */
.dr-kitgrid { margin: 4px 0 14px; padding: 14px 14px 12px; border-radius: 10px; background: #2b2b2d; border: 1px solid rgba(255,255,255,.06); }
.dr-kitgrid__title { text-align: center; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; font-size: 18px; color: #e9e9e9; margin-bottom: 12px; }
.dr-kitgrid__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dr-kitgrid__cell { position: relative; box-sizing: border-box; flex: 0 0 calc((100% - 32px) / 5); aspect-ratio: 1 / 1; background: #3a3a3c; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: default; transition: background .15s, box-shadow .15s; }
.dr-kitgrid__cell:hover { background: #444447; box-shadow: inset 0 0 0 1px var(--dr-yellow, #e8b84a); }
.dr-kitgrid__cell img { width: 78%; height: 78%; object-fit: contain; pointer-events: none; }
.dr-kitgrid__qty { position: absolute; right: 5px; bottom: 3px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.dr-kitgrid__cell[data-dr-tip]:hover::after, .dr-kitgrid__cell[data-dr-tip]:focus::after { content: attr(data-dr-tip); position: absolute; left: 3px; right: 3px; top: 3px; z-index: 5; padding: 3px 4px; border-radius: 4px; background: rgba(10,10,12,.88); color: #fff; font-size: 11px; line-height: 1.25; text-align: center; white-space: normal; pointer-events: none; }
.dr-kitgrid__warn { margin: 12px 0 4px; font-size: 13px; line-height: 1.45; color: var(--font-color-800, #cfcfcf); }
.dr-kitgrid__how { margin: 6px 0 0; text-align: center; font-weight: 600; color: var(--dr-yellow, #e8b84a); }
.productModalDescription [data-dr-kitline] { display: none; }
.productModalGiveText[data-dr-kitgive] { display: none; }
@media (max-width: 600px) {
  .dr-kitgrid { padding: 10px 8px; }
  .dr-kitgrid__grid { gap: 6px; }
  .dr-kitgrid__cell { flex-basis: calc((100% - 18px) / 4); }
  .dr-kitgrid__title { font-size: 15px; }
  .dr-kitgrid__qty { font-size: 11px; }
}

/* ===== 25. Описание предмета в окне товара (custom.js A8) ===== */
.dr-desc { margin: 4px 0 14px; padding: 12px 14px; border-radius: 10px; background: #2b2b2d; border: 1px solid rgba(255,255,255,.06); border-left: 3px solid var(--dr-yellow, #e8b84a); }
.dr-desc p { margin: 0; }
.dr-desc__text { font-size: 14px; line-height: 1.5; color: var(--font-color-800, #e2e2e2); }
.dr-desc__prot { margin-top: 8px !important; font-size: 12px; line-height: 1.45; font-weight: 600; color: var(--dr-yellow, #e8b84a); }
.dr-desc__pack { margin-top: 6px !important; display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: rgba(232,184,74,.12); color: var(--dr-yellow, #e8b84a); }
@media (max-width: 600px) { .dr-desc { padding: 10px; } .dr-desc__text { font-size: 13px; } }

/* 26. WipeBlock — вкладка с предметами в вайпблоке (разметку создаёт custom.js, блок A9) */
.dr-wb-link { position: relative; }
.dr-wb-link::after { content: ""; position: absolute; top: 2px; right: -8px; width: 6px; height: 6px; border-radius: 50%; background: var(--dr-orange, #f57a00); box-shadow: 0 0 6px var(--dr-orange, #f57a00); }
html.dr-wb-lock { overflow: hidden; }
.dr-wb { position: fixed; inset: 0; z-index: 9999; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px; background: rgba(5, 6, 8, .82); backdrop-filter: blur(4px); }
.dr-wb.is-on { display: flex; }
.dr-wb__box { position: relative; width: 100%; max-width: 1100px; padding: 28px 28px 24px; border-radius: var(--dr-radius, 10px); background: linear-gradient(180deg, #17140f, #0e0d0b); border: 1px solid rgba(232, 182, 74, .35); box-shadow: 0 20px 60px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(232,182,74,.08) inset; color: var(--dr-white, #f1eee8); animation: drWbIn .25s ease; }
@keyframes drWbIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.dr-wb__close { position: absolute; top: 10px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.dr-wb__close:hover { background: rgba(232,182,74,.2); }
.dr-wb__title { margin: 0 0 10px; font-size: 28px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--dr-gold, #e8b64a); }
.dr-wb__lead { margin: 0 0 14px; max-width: 820px; font-size: 15px; line-height: 1.5; color: rgba(241,238,232,.85); }
.dr-wb__lead b { color: var(--dr-gold, #e8b64a); }
.dr-wb__wipe { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.dr-wb__wipe span { padding: 7px 12px; border-radius: 8px; background: rgba(232,182,74,.1); border: 1px solid rgba(232,182,74,.3); font-size: 14px; font-weight: 600; }
.dr-wb__note { margin: 8px 0 4px; font-size: 12px; color: rgba(241,238,232,.5); }
.dr-wb__grp { margin-top: 22px; }
.dr-wb__ghead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid rgba(232,182,74,.25); }
.dr-wb__gname { font-size: 19px; font-weight: 800; color: var(--dr-gold, #e8b64a); text-transform: uppercase; letter-spacing: .03em; }
.dr-wb__gtime { font-size: 14px; font-weight: 600; color: var(--dr-orange, #f57a00); }
.dr-wb__grp.is-open .dr-wb__gtime { color: var(--dr-green, #6ccc18); }
.dr-wb__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.dr-wb__tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 9px; border-radius: 9px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); color: inherit; text-decoration: none; text-align: center; transition: border-color .2s, transform .2s, box-shadow .2s; }
.dr-wb__tile:hover { border-color: rgba(232,182,74,.6); transform: translateY(-2px); box-shadow: 0 8px 22px -8px rgba(232,182,74,.45); }
.dr-wb__img { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.dr-wb__img img { max-width: 100%; max-height: 100%; filter: grayscale(.55) brightness(.8); transition: filter .2s; }
.dr-wb__grp.is-open .dr-wb__img img, .dr-wb__tile:hover .dr-wb__img img { filter: none; }
.dr-wb__name { font-size: 13px; font-weight: 600; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; }
.dr-wb__amt { position: absolute; top: 6px; right: 8px; font-size: 12px; font-weight: 700; color: var(--dr-gold, #e8b64a); }
.dr-wb__st { font-size: 11.5px; line-height: 1.3; color: var(--dr-orange, #f57a00); }
.dr-wb__grp.is-open .dr-wb__st { color: var(--dr-green, #6ccc18); font-weight: 700; }
@media (max-width: 600px) {
  .dr-wb { padding: 0; }
  .dr-wb__box { min-height: 100%; border-radius: 0; padding: 20px 12px 24px; }
  .dr-wb__title { font-size: 22px; padding-right: 40px; }
  .dr-wb__lead { font-size: 14px; }
  .dr-wb__grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .dr-wb__img { width: 54px; height: 54px; }
  .dr-wb__name { font-size: 11.5px; }
  .dr-wb__st { font-size: 10.5px; }
  .dr-wb-link::after { right: auto; left: -10px; top: 50%; margin-top: -3px; }
}

/* 27. WipeBlock: наборы в сетке WB + предупреждение в окне набора */
.dr-wb__gnote { font-size: 13px; color: rgba(241,238,232,.6); }
.dr-wb__tile--kit .dr-wb__img img { border-radius: 8px; object-fit: cover; width: 72px; height: 72px; }
.dr-wb__tile--kit { border-color: rgba(232,182,74,.35); }
.dr-wb__tile--kit.is-open .dr-wb__img img { filter: none; }
.dr-wb__tile--kit.is-open .dr-wb__st { color: var(--dr-green, #6ccc18); font-weight: 700; }
.dr-kitgrid__wb { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: rgba(245,122,0,.1); border: 1px solid rgba(245,122,0,.4); color: var(--dr-orange, #f57a00); font-size: 13px; font-weight: 600; line-height: 1.4; }
@media (max-width: 600px) { .dr-wb__tile--kit .dr-wb__img img { width: 54px; height: 54px; } }