/* =====================================================================
   CS2 Simulator — две темы: тёмная (по умолчанию) и светлая.
   Тема — атрибут <html data-theme="dark|light">. Его ставит инлайн-скрипт
   в <head> каждой страницы ДО этого файла (без вспышки другой темы):
   светлая — только если игрок сам выбрал её кнопкой в навбаре
   (localStorage 'theme'), иначе тёмная; prefers-color-scheme не учитывается.
   Кнопка переключает без перезагрузки (public/js/nav.js, setTheme).

   :root — токены ТЁМНОЙ темы: по мотивам прежнего тёмного дизайна v4
   (git-тег design-v4): почти чёрная основа, hairline-линии и верхний блик
   вместо теней, циан со свечением, острые углы.
   :root[data-theme="light"] — токены СВЕТЛОЙ темы (дизайн v5): холодная
   светлая основа, белые карточки с мягкой тенью, синий акцент.
   Компоненты ниже общие и берут цвета, тени и скругления только из токенов;
   то, что токеном не выразить, — отдельными правилами под селектором темы.
   Арт предметов и кейсов нарисован под тёмный фон и в обеих темах лежит на
   тёмной "сцене" (--stage). Цвет редкости — полосы, рамки и форма карточки.
   Имена классов прежние: от них зависят страницы и скрипты.

   Контраст (WCAG AA) — в комментариях у токенов каждой темы.
   ===================================================================== */

/* ---------- тёмная тема (по умолчанию) ---------- */
:root {
  color-scheme: dark;       /* нативные select, скроллбары, чекбоксы — в тёмной теме */

  /* Наклон картинок скинов (класс .skin-img, itemImg в api.js). Везде — без наклона; наклон только в ленте
     рулетки при открытии кейса (.roulette-track .slot, .reel-slot — ниже). Положительный угол — по часовой стрелке */
  --skin-tilt: 0deg;
  --skin-tilt-scale: 1;

  /* Основа (светлее с 2026-10-19: фон #1B1D27, поверхности на шаг светлее).
     Текст на --bg / --surface / --surface-2: --text 15.4 / 13.8 / 12.6,
     --text-dim 8.4 / 7.5 / 6.8, --text-faint 6.3 / 5.6 / 5.1 */
  --bg: #1b1d27;
  --surface: #232633;
  --surface-2: #2a2d3b;
  --surface-hi: #363a4b;    /* блик мерцающих заглушек */
  --line: #343849;          /* hairline-линии карточек и списков (декор) */
  --line-strong: #4b5068;
  --field-border: #81849f;  /* поля, степпер, пресеты, фильтры, вторичные кнопки: 4.0 / 3.6 / 4.5 на surface / surface-2 / bg (>= 3:1) */
  --track: #14161e;         /* пустая дорожка прогресса; контур — --field-border */
  --text: #f4f5fb;
  --text-dim: #b4b6c9;
  --text-faint: #9b9db3;
  --scrollbar: #4b5068;

  /* Акцент: циан (текстом 11.6 на --surface); лазурь и фиолетовый — партнёры в градиентах и режим "Мистери".
     Тёмный текст на кнопке (--on-accent) — не ниже 6.6 даже на лазурном краю градиента */
  --accent: #22e5ff;
  --accent-soft: rgba(34, 229, 255, 0.15);
  --accent-strong: #8af0ff;                 /* hover акцентного текста */
  --accent-glow: rgba(34, 229, 255, 0.50);
  --accent-2: #3d9bff;
  --violet: #a877ff;
  --violet-ink: #c9a8ff;                    /* фиолетовый текстом: 8.9:1 */
  --grad-accent: linear-gradient(135deg, #45f0ff 0%, #18d6ff 48%, #3d9bff 100%);
  --grad-accent-hover: linear-gradient(135deg, #8af6ff 0%, #45e4ff 48%, #62b0ff 100%);
  --grad-violet: linear-gradient(135deg, #8a4dff 0%, #6f4dff 55%, #5a3df0 100%); /* белый текст 4.6–6.3 */
  --glow-accent: 0 0 20px -2px var(--accent-glow);
  --glow-accent-sm: 0 0 12px -3px var(--accent-glow);
  --glow-text: 0 0 14px var(--accent-glow); /* свечение активного пункта меню, вкладки, пресета */
  --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 12px -3px var(--accent-glow);
  --on-accent: #041318;
  --on-success: #041318;

  --success: #34f094;
  --danger: #ff6b82;
  --warning: #ffbf3a;
  --success-fill: #34f094;
  --success-glow: rgba(52, 240, 148, 0.42);
  --danger-glow: rgba(255, 84, 112, 0.42);

  /* Редкость: яркие тона. Текстом на --surface / --surface-2 / плашке полосы редкости:
     ширпотреб 10.8 / 9.9 / 8.8, промышленное 6.8 / 6.2 / 5.9, армейское 5.4 / 5.0 / 4.7,
     запрещённое 5.5 / 5.0 / 4.8, засекреченное 5.4 / 5.0 / 4.9, тайное 5.6 / 5.1 / 5.0, золото 12.7.
     Армейское темнее промышленного по светлоте — "Необычное" и "Редкое" различимы и при дальтонизме */
  --r-consumer: #b8cbe6;   --r-consumer-fill: #b8cbe6;   --r-consumer-soft: rgba(184, 203, 230, 0.14);  --r-consumer-glow: rgba(184, 203, 230, 0.42);
  --r-industrial: #6aaef5; --r-industrial-fill: #5aa4f2; --r-industrial-soft: rgba(90, 164, 242, 0.17); --r-industrial-glow: rgba(90, 164, 242, 0.52);
  --r-milspec: #8196ff;    --r-milspec-fill: #6b84ff;    --r-milspec-soft: rgba(107, 132, 255, 0.18);   --r-milspec-glow: rgba(107, 132, 255, 0.58);
  --r-restricted: #b383ff; --r-restricted-fill: #a970ff; --r-restricted-soft: rgba(169, 112, 255, 0.19); --r-restricted-glow: rgba(169, 112, 255, 0.58);
  --r-classified: #ea5ff8; --r-classified-fill: #e541f5; --r-classified-soft: rgba(229, 65, 245, 0.19); --r-classified-glow: rgba(229, 65, 245, 0.58);
  --r-covert: #ff6a6a;     --r-covert-fill: #ff5252;     --r-covert-soft: rgba(255, 82, 82, 0.19);      --r-covert-glow: rgba(255, 82, 82, 0.62);
  --r-gold: #ffd700;       --r-gold-fill: #ffd700;       --r-gold-soft: rgba(255, 215, 0, 0.17);        --r-gold-glow: rgba(255, 215, 0, 0.56);
  --gold-fill: linear-gradient(135deg, #ffe45c, #ffd700 55%, #e6b800);
  --gold-chip: #2b2611;     /* плашка "Особое": золотой текст на ней 10.5:1 */
  --gold-ink: #ffd700;
  --gold-dot: #ffd700;
  --consumer-chip: #2c3443; /* плашка "Обычное": 8.7:1 */
  --consumer-ink: #b8cbe6;

  /* Сцена под артом: нейтральная тёмная, чуть светлее у верхнего края */
  --stage: #171922;
  --stage-2: #262938;
  --stage-glow: rgba(61, 155, 255, 0.16);
  --stage-grid: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 16px 16px,
                linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 16px 16px;
  --stage-bg: radial-gradient(ellipse 60% 70% at 50% 58%, var(--stage-glow), transparent 72%),
              linear-gradient(180deg, var(--stage-2), var(--stage));
  --plate: rgba(9, 10, 16, 0.9);            /* тёмная плашка имени на сцене: цвет редкости >= 4.7:1 */
  --reel-glow: rgba(34, 229, 255, 0.10);    /* подсветка центра рулетки и лент */
  --pointer: var(--accent);
  --pointer-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 12px var(--accent-glow);
  /* Сцена героя главной: спокойная, почти цвета страницы — без свечений и сетки, не спорит с заголовком */
  --hero-bg: linear-gradient(180deg, #212431, var(--bg));
  --hero-border: var(--line);

  /* Оболочка */
  --page-glow: radial-gradient(ellipse 65% 50% at 8% -8%, rgba(34, 229, 255, 0.13), transparent 70%),
               radial-gradient(ellipse 60% 48% at 94% -6%, rgba(154, 92, 255, 0.14), transparent 70%),
               radial-gradient(ellipse 80% 45% at 50% 112%, rgba(61, 155, 255, 0.05), transparent 70%);
  --nav-bg: rgba(27, 29, 39, 0.86);
  --footer-bg: transparent;
  --ticker-bg: linear-gradient(180deg, rgba(34, 229, 255, 0.04), rgba(154, 92, 255, 0.03)), #20232f;
  --backdrop: rgba(10, 11, 16, 0.72);
  --tip-bg: var(--surface-2);
  --tip-fg: var(--text);
  --tip-border: color-mix(in srgb, var(--accent) 35%, var(--line-strong));

  /* Тени: верхний блик и свечение акцента вместо мягких теней */
  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  --shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 24px -8px var(--accent-glow);
  --shadow-pop: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 64px rgba(0, 0, 0, 0.6);

  /* Кнопки и элементы управления */
  --btn-border: rgba(138, 240, 255, 0.55);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px -10px var(--accent-glow);
  --btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--glow-accent);
  --btn2-bg: rgba(255, 255, 255, 0.03);     /* вторичная кнопка */
  --btn2-shadow: none;
  --btn2-hover-bg: var(--accent-soft);
  --btn2-hover-fg: var(--text);
  --field-bg: var(--bg);
  --control-bg: rgba(255, 255, 255, 0.025); /* пресеты, иконки */
  --preset-active-bg: linear-gradient(180deg, rgba(34, 229, 255, 0.22), rgba(34, 229, 255, 0.07));
  --preset-active-fg: var(--accent-strong); /* 8.0:1 */
  --preset-active-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm);

  /* Карточка предмета: обводка цветом редкости (доли — в color-mix), свечение вместо тени */
  --card-filter: drop-shadow(0 0 0 transparent);
  --card-hover-base: drop-shadow(0 0 0 transparent);
  --card-hover-y: 0px;
  --card-hover-blur: 14px;
  --card-selected-filter: drop-shadow(0 0 10px var(--accent-glow)) drop-shadow(0 0 2px rgba(34, 229, 255, 0.5));
  --card-selected-ring: linear-gradient(160deg, var(--accent-strong), var(--accent) 45%, var(--accent-2));
  --card-tint: 100%;        /* подкраска верха карточки цветом редкости */
  --shape-a: 55%; --shape-b: 0%; --shape-stop: 45%;
  --shape-hover-a: 100%; --shape-hover-b: 30%; --shape-hover-stop: 60%;
  --check-ring: #1b1d27;
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.3' fill='none' stroke='%23041318' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Мистери */
  --myst-back-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(154, 92, 255, 0.22), transparent 70%),
                  linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 14px 14px,
                  linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 14px 14px, var(--surface);
  --myst-back-border: color-mix(in srgb, var(--violet) 50%, var(--line-strong));
  --myst-back-shadow: 0 0 24px -10px rgba(154, 92, 255, 0.6);
  --myst-q: #c9a8ff;
  --myst-q-shadow: 0 0 18px rgba(154, 92, 255, 0.55);
  --myst-active-bg: rgba(154, 92, 255, 0.16);
  --myst-active-fg: #d9c4ff;                /* 9.4:1 */
  --myst-active-shadow: 0 0 16px -4px rgba(154, 92, 255, 0.65);
  --myst-glyph-fg: #07070a;                 /* 5.1:1 на фиолетовом */
  --myst-glyph-active-bg: var(--violet);
  --myst-glyph-active-fg: #07070a;
  --violet-shadow: 0 6px 18px -10px rgba(154, 92, 255, 0.8);
  --violet-shadow-hover: 0 0 20px -2px rgba(154, 92, 255, 0.6);

  /* Скругления: острые углы. --round — множитель "крупных" скруглений (12px × 0.17 = 2px) */
  --round: 0.17;
  --radius-pill: 2px;
  --radius-ui: 2px;
  --radius-panel: 2px;
  --radius-card: 2px;

  /* Циферблат апгрейдера (upgrader.html читает --arc-stops и --dial-face-* сам): тёмное лицо, яркая дуга.
     Число шанса (>= 38px) на лице: 5.3 / 8.1 / 11.8 / 11.4 */
  --dial-face-1: #262836;
  --dial-face-2: #13141b;
  --dial-shadow: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
  --dial-track: #2b2d3a;
  --dial-inner: rgba(255, 255, 255, 0.05);
  --tick-o: 0.16;
  --tick-major-o: 0.3;
  --needle-fill: #f4f5fb;
  --needle-stroke: #0b0b10;
  --needle-shadow: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.7)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
  --arc-glow: drop-shadow(0 0 5px rgba(255, 210, 63, 0.28));
  --arc-stops: 0 #ff3b55, 0.12 #ff5a3d, 0.3 #ff9b2f, 0.5 #ffd23f, 0.72 #b4ee42, 1 #2ee88a;
  --lvl-low: #ff6676;
  --lvl-warm: #ff9b2f;
  --lvl-mid: #ffd23f;
  --lvl-high: #34f094;
  --win-glow: #34f094;

  /* Графики админки (server/views/admin.html: --st-c1..c8): на тёмной поверхности >= 3:1 */
  --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500;
  --chart-5: #d55181; --chart-6: #008300; --chart-7: #9085e9; --chart-8: #e66767;
  --chart-neutral: #8a8ca3; --chart-other: #55576b;

  /* Шрифты (раздаются локально, см. fonts.css) */
  --font-display: 'Tektur', 'Chakra Petch', system-ui, sans-serif;
  --font-num: 'Chakra Petch', 'Tektur', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --gutter: 24px;
  --max: 1280px;
  --nav-h: 72px; /* высота липкого навбара: отступ якорей (scroll-margin-top) и уведомлений под ним */
}

/* ---------- светлая тема (выбор игрока) ----------
   Контраст: текст на белом / на --bg / на --surface-2 — --text 16.9 / 15.6, --text-dim 7.7 / 7.1 / 6.7,
   --text-faint 5.7 / 5.2 / 4.9; акцент текстом 5.8 / 5.3 / 5.0; белый текст на градиенте кнопки 5.8–6.2.
   Границы полей, пресетов и вторичных кнопок (--field-border) 3.6 / 3.3 / 3.1.
   Редкость текстом на белом: ширпотреб 5.4, промышленное 5.4, армейское 6.3, запрещённое 6.2,
   засекреченное 5.6, тайное 5.4, золото 5.5 */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f3f5fb;
  --surface: #ffffff;
  --surface-2: #eceff7;
  --surface-hi: #f7f8fc;
  --line: #e1e5ef;
  --line-strong: #c9d0e0;
  --field-border: #7d86a3;
  --track: #e6e9f2;
  --text: #141a3a;
  --text-dim: #4a5270;
  --text-faint: #5e6683;
  --scrollbar: #c3cadb;

  /* Акцент: электрический синий; фиолетовый — только партнёр в градиенте и режим "Мистери" */
  --accent: #3b4bff;
  --accent-soft: rgba(59, 75, 255, 0.10);
  --accent-strong: #2433e6;
  --accent-glow: rgba(59, 75, 255, 0.40);
  --accent-2: #6d28ff;
  --violet: #7b3cff;
  --violet-ink: #5b21c9;                    /* фиолетовый текстом: 8.4:1 */
  --grad-accent: linear-gradient(120deg, #3b4bff 0%, #4f3dff 55%, #6d28ff 100%);
  --grad-accent-hover: linear-gradient(120deg, #4757ff 0%, #5b48ff 55%, #7834ff 100%);
  --grad-violet: linear-gradient(135deg, #7b3cff 0%, #6a35f0 55%, #5a2be0 100%); /* белый текст >= 4.5 */
  --glow-accent: 0 12px 26px -12px var(--accent-glow);
  --glow-accent-sm: 0 6px 16px -8px var(--accent-glow);
  --glow-text: none;
  --focus-ring: 0 0 0 3px rgba(59, 75, 255, 0.20);
  --on-accent: #ffffff;
  --on-success: #ffffff;

  --success: #077a44;
  --danger: #d01a35;
  --warning: #8f5f00;
  --success-fill: #10b562;
  --success-glow: rgba(16, 185, 105, 0.35);
  --danger-glow: rgba(224, 36, 64, 0.30);

  /* Редкость: --r-* — насыщенные "чернильные" тона (текст на белом >= 4.5:1),
     --r-*-fill — заливка полос (у золота и ширпотреба ярче текстового тона),
     -soft / -glow — подсветка из ярких тонов */
  --r-consumer: #5c6b82;   --r-consumer-fill: #9eadc4;   --r-consumer-soft: rgba(150, 170, 200, 0.16);  --r-consumer-glow: rgba(160, 180, 215, 0.50);
  --r-industrial: #1a68c8; --r-industrial-fill: #1a68c8; --r-industrial-soft: rgba(64, 150, 245, 0.13); --r-industrial-glow: rgba(64, 150, 245, 0.55);
  --r-milspec: #3048f0;    --r-milspec-fill: #3048f0;    --r-milspec-soft: rgba(80, 110, 255, 0.13);    --r-milspec-glow: rgba(80, 110, 255, 0.60);
  --r-restricted: #7a2fe6; --r-restricted-fill: #7a2fe6; --r-restricted-soft: rgba(150, 90, 255, 0.13); --r-restricted-glow: rgba(150, 90, 255, 0.60);
  --r-classified: #b01cbc; --r-classified-fill: #b01cbc; --r-classified-soft: rgba(225, 70, 240, 0.12); --r-classified-glow: rgba(225, 70, 240, 0.58);
  --r-covert: #d01a2f;     --r-covert-fill: #d01a2f;     --r-covert-soft: rgba(255, 70, 80, 0.12);      --r-covert-glow: rgba(255, 70, 80, 0.60);
  --r-gold: #8f5f00;       --r-gold-fill: #f5b000;       --r-gold-soft: rgba(255, 200, 40, 0.18);       --r-gold-glow: rgba(255, 196, 30, 0.65);
  --gold-fill: linear-gradient(135deg, #ffd84d, #f5b000 55%, #ffcf3a);
  --gold-chip: #ffd84d;     /* плашка золота: золото узнаётся по заливке, текст на ней — --gold-ink (9.9:1) */
  --gold-ink: #3d2a00;
  --gold-dot: #c98a00;
  --consumer-chip: #e3e8f0; /* плашка ширпотреба (сланцевая), текст на ней — --consumer-ink (5.3:1) */
  --consumer-ink: #505e76;

  /* Тёмно-индиговая сцена под артом */
  --stage: #13183a;
  --stage-2: #222a66;
  --stage-glow: rgba(90, 110, 255, 0.30);
  --plate: rgba(10, 13, 36, 0.88);
  --reel-glow: rgba(59, 75, 255, 0.28);
  --pointer: #fff;
  --pointer-shadow: 0 0 0 1px rgba(19, 24, 58, 0.45), 0 0 14px rgba(140, 152, 255, 0.9);
  /* Сцена героя: приглушённый тёмный сланец без свечений — так же спокойно, как в тёмной теме */
  --hero-bg: linear-gradient(180deg, #1d2134, #161927);

  /* Оболочка: мягкая синяя и фиолетовая подсветка у верхнего края, матовый белый навбар */
  --page-glow: radial-gradient(ellipse 60% 42% at 0% -6%, rgba(59, 75, 255, 0.11), transparent 70%),
               radial-gradient(ellipse 50% 40% at 100% -4%, rgba(109, 40, 255, 0.09), transparent 70%);
  --nav-bg: rgba(255, 255, 255, 0.86);
  --footer-bg: var(--surface);
  --ticker-bg: var(--surface);
  --backdrop: rgba(15, 19, 36, 0.42);
  --tip-bg: var(--text);
  --tip-fg: #fff;
  --tip-border: transparent;

  /* Тени и скругления */
  --shadow-1: 0 1px 2px rgba(18, 26, 64, 0.05), 0 6px 16px -8px rgba(18, 26, 64, 0.12);
  --shadow-2: 0 2px 4px rgba(18, 26, 64, 0.05), 0 18px 40px -16px rgba(18, 26, 64, 0.24);
  --shadow-hover: var(--shadow-2);
  --shadow-pop: 0 30px 80px -24px rgba(18, 26, 64, 0.4);

  --btn-border: transparent;
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px -10px rgba(59, 75, 255, 0.75);
  --btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 14px 28px -12px rgba(59, 75, 255, 0.85);
  --btn2-bg: var(--surface);
  --btn2-shadow: 0 1px 2px rgba(18, 26, 64, 0.05);
  --btn2-hover-bg: var(--surface);
  --btn2-hover-fg: var(--accent);
  --field-bg: var(--surface);
  --control-bg: var(--surface);
  --preset-active-bg: var(--accent);
  --preset-active-fg: var(--on-accent);
  --preset-active-shadow: 0 8px 18px -8px rgba(59, 75, 255, 0.7);

  --card-filter: drop-shadow(0 1px 1px rgba(18, 26, 64, 0.06)) drop-shadow(0 6px 10px rgba(18, 26, 64, 0.08));
  --card-hover-base: drop-shadow(0 1px 1px rgba(18, 26, 64, 0.06));
  --card-hover-y: 12px;
  --card-hover-blur: 18px;
  --card-selected-filter: drop-shadow(0 10px 18px rgba(59, 75, 255, 0.40));
  --card-selected-ring: var(--accent);
  --card-tint: 0%;
  --shape-a: 100%; --shape-b: 20%; --shape-stop: 55%;
  --shape-hover-a: 100%; --shape-hover-b: 50%; --shape-hover-stop: 75%;
  --check-ring: #fff;
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.3' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --myst-back-bg: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 255, 255, 0.20), transparent 70%), linear-gradient(150deg, #7b3cff, #4b2bd6);
  --myst-back-border: transparent;
  --myst-back-shadow: 0 12px 24px -12px rgba(91, 33, 201, 0.6);
  --myst-q: #fff;
  --myst-q-shadow: 0 2px 12px rgba(20, 0, 60, 0.35);
  --myst-active-bg: var(--violet);
  --myst-active-fg: #fff;
  --myst-active-shadow: 0 8px 18px -8px rgba(123, 60, 255, 0.7);
  --myst-glyph-fg: #fff;
  --myst-glyph-active-bg: #fff;
  --myst-glyph-active-fg: var(--violet);
  --violet-shadow: 0 8px 20px -10px rgba(123, 60, 255, 0.8);
  --violet-shadow-hover: 0 14px 28px -12px rgba(123, 60, 255, 0.9);

  --round: 1;
  --radius-pill: 999px;
  --radius-ui: 8px;
  --radius-panel: 14px;
  --radius-card: 16px;

  /* Циферблат: светлое лицо и тона дуги, различимые на белом (>= 3:1); число шанса — 4.2–5.5:1 */
  --dial-face-1: #ffffff;
  --dial-face-2: #e9edf8;
  --dial-shadow: drop-shadow(0 16px 30px rgba(30, 40, 110, 0.16)) drop-shadow(0 2px 4px rgba(30, 40, 110, 0.08));
  --dial-track: #e3e7f2;
  --dial-inner: rgba(20, 26, 58, 0.08);
  --tick-o: 0.3;
  --tick-major-o: 0.45;
  --needle-fill: #fff;
  --needle-stroke: var(--text);
  --needle-shadow: drop-shadow(0 1px 1.5px rgba(20, 26, 58, 0.35)) drop-shadow(0 2px 5px rgba(20, 26, 58, 0.18));
  --arc-glow: drop-shadow(0 2px 6px rgba(226, 88, 12, 0.22));
  --arc-stops: 0 #e11d48, 0.12 #e3361f, 0.3 #e2580c, 0.5 #c27c00, 0.72 #4d9a0f, 1 #08905f;
  --lvl-low: #e11d48;
  --lvl-warm: #d4520c;
  --lvl-mid: #b06a00;
  --lvl-high: #047857;
  --win-glow: #19c26b;

  /* Графики админки: те же оттенки, темнее — на белом >= 3:1 */
  --chart-1: #3480e2; --chart-2: #d4561f; --chart-3: #13936a; --chart-4: #b37600;
  --chart-5: #cf4a7c; --chart-6: #007d00; --chart-7: #7f72e2; --chart-8: #dc5656;
  --chart-neutral: #7d86a3; --chart-other: #4a5270;
}

/* Светлая тема: тёмные сцены (герой, рулетка, ленты, баннер профиля, окна арта Steam) остаются тёмными —
   внутри токены редкости переключаются на яркие тона, текст — светлый. Инлайновые style="--rc: var(--r-covert)"
   разрешаются здесь же. Цвет редкости текстом на сцене не ниже 4.5:1: на плашках героя и на тёмной плашке
   имени выигрыша в рулетке. В тёмной теме токены и так "сценные" — правило не нужно */
:root[data-theme="light"] :is(.roulette-wrap, .multi-reels, .profile-banner, .bg-swatch, .sv-img) {
  --r-consumer: #b8cbe6; --r-industrial: #5aa4f2; --r-milspec: #6a7cff; --r-restricted: #b085ff;
  --r-classified: #e85cf5; --r-covert: #ff6b6b; --r-gold: #ffd23a;
  --r-consumer-fill: #b8cbe6; --r-industrial-fill: #5aa4f2; --r-milspec-fill: #6a7cff; --r-restricted-fill: #b085ff;
  --r-classified-fill: #e85cf5; --r-covert-fill: #ff6b6b; --r-gold-fill: #ffd23a;
  --text: #f2f4ff; --text-dim: #aab2d0; --text-faint: #9aa3c4;
  --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16);
  --surface: #1b2246; --surface-2: #232b58;
  --field-bg: var(--surface); --control-bg: var(--surface); --btn2-bg: var(--surface); --btn2-hover-bg: var(--surface);
  color: var(--text);
}

/* Смена темы кнопкой: на два кадра без переходов — иначе фон, рамки и тени "перетекают" с разной скоростью */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

/* ---------- база ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--scrollbar) var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a.link {
  color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
  transition: color 150ms, text-decoration-color 150ms;
}
a.link:hover, a.link:focus-visible { color: var(--accent-strong); text-decoration-color: currentColor; }
::selection { background: color-mix(in srgb, var(--accent) 20%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; margin: 0; letter-spacing: 0.01em; }
h1 { font-size: 47px; font-weight: 600; letter-spacing: -0.005em; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
/* якоря и прокрутка к элементу (scrollIntoView) — не под липким навбаром */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
p { margin: 0; }

.num { font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.mono { font-family: var(--font-mono); font-size: 12px; word-break: break-all; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.lede { color: var(--text-dim); font-size: 17px; max-width: 52ch; }
.small { font-size: 13px; }
.pos { color: var(--success); }
.neg { color: var(--danger); }

/* ---------- оболочка ---------- */
body { display: flex; flex-direction: column; min-height: 100vh; }
/* фон: мягкая подсветка у верхнего края (--page-glow; fixed-слой, при скролле не перерисовывается) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--page-glow);
}

/* навбар: липкий, матовый (белый / почти чёрный), сверху тонкая полоса фирменного градиента;
   при прокрутке (nav.js: .is-scrolled) — тень под ним. z-index выше выпадающих списков контента, ниже модалок (100).
   Липкий — контейнер #nav-root: у самого .navbar внутри него (той же высоты) sticky не сработал бы */
#nav-root { position: sticky; top: 0; z-index: 50; }
.navbar {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 0 var(--gutter);
  min-height: var(--nav-h);
  border-bottom: 1px solid var(--line);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
          backdrop-filter: saturate(1.4) blur(12px);
  position: relative;
  transition: box-shadow 200ms, border-color 200ms;
}
.navbar.is-scrolled { box-shadow: var(--shadow-2); border-bottom-color: var(--line-strong); }
.navbar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: var(--grad-accent);
}
.navbar .logo { display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; line-height: 0; }
.navbar .logo .bc-logo { height: 34px; width: auto; }
.navbar .links { display: flex; gap: 24px; flex-wrap: nowrap; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.navbar .links::-webkit-scrollbar { display: none; }
.navbar .links a {
  color: var(--text-dim); font-size: 16px; font-weight: 500; padding: 25px 0 22px; white-space: nowrap;
  transition: color 150ms, box-shadow 200ms, background 150ms;
}
.navbar .links a:hover:not(.active), .navbar .links a:focus-visible:not(.active) { color: var(--text); box-shadow: inset 0 -2px 0 var(--line-strong); }
.navbar .links a.active { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); text-shadow: var(--glow-text); }
.navbar .right { display: flex; align-items: center; gap: 16px; font-size: 15px; flex-shrink: 0; }
.nav-burger { display: none; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; width: 40px; height: 40px; }
/* до 1200px меню — своей строкой под логотипом (в одну строку с правой группой оно уже не помещается целиком) */
@media (max-width: 1200px) {
  :root { --nav-h: 113px; } /* две строки: логотип с правой группой и меню */
  .navbar { row-gap: 0; min-height: 0; }
  .navbar .logo { flex: 1; padding: 16px 0; }
  .navbar .links { order: 3; flex-basis: 100%; border-top: 1px solid var(--line); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .navbar .links a { padding: 12px 0 11px; }
}
/* узкий экран: меню листается вбок — активный пункт залитой "таблеткой" */
@media (max-width: 760px) {
  .navbar .links { gap: 2px; }
  .navbar .links a { padding: 6px 12px; margin: 6px 0; border-radius: var(--radius-pill); }
  .navbar .links a:first-child { margin-left: -12px; }
  .navbar .links a:hover:not(.active) { box-shadow: none; background: var(--surface-2); }
  .navbar .links a.active { color: var(--on-accent); background: var(--accent); box-shadow: none; text-shadow: none; }
  /* одна строка до 64px: логотип, баланс (или "Войти") и кнопка меню; меню, звук, тема и аккаунт — панелью под ней */
  :root { --nav-h: 60px; }
  .navbar { min-height: var(--nav-h); gap: 0 10px; }
  /* логотип сжимается под свободное место строки (баланс, "Войти", меню), без переноса хедера */
  .navbar .logo { flex: 1 1 0; min-width: 0; max-width: 200px; margin-right: auto; } /* базис 0: не переносит строку, растёт до 200px */
  .navbar .logo .bc-logo { width: 100%; height: auto; }
  .navbar .logo { padding: 0; height: calc(var(--nav-h) - 1px); display: flex; align-items: center; } /* строка логотипа — всегда полной высоты, и с открытой панелью */
  .navbar .right { display: contents; }
  .navbar .right > * { order: 4; }
  .navbar .right > .balance-group, .navbar .right > #login-btn { order: 1; }
  .nav-burger { display: inline-flex; order: 2; }
  .navbar:not(.menu-open) .links,
  .navbar:not(.menu-open) .right > :not(.balance-group):not(#login-btn) { display: none; }
  .navbar.menu-open { padding-bottom: 10px; }
  .navbar.menu-open .right > :not(.balance-group):not(#login-btn) { margin-top: 10px; }
}

/* баланс + "+" (квесты и награды) */
.balance-group { display: inline-flex; align-items: center; gap: 6px; }
.balance-pill {
  display: inline-block; height: 34px; padding: 0 12px; line-height: 34px; /* inline-block: работает "bump" (transform) */
  border-radius: var(--radius-ui); background: var(--accent-soft); color: var(--text);
  font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 17px;
}
.balance-pill::after { content: ' ¤'; color: var(--text-dim); font-weight: 500; }
.balance-pill.bump { animation: bump 500ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes bump { 30% { transform: scale(1.18); color: var(--accent); } }
.balance-plus {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: var(--radius-ui); color: var(--on-accent); background: var(--grad-accent);
  font: 600 18px/1 var(--font-num); box-shadow: var(--glow-accent-sm);
  transition: background 150ms, box-shadow 200ms;
}
.balance-plus .plus-glyph { display: inline-block; transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.balance-plus:hover, .balance-plus:focus-visible { background: var(--grad-accent-hover); box-shadow: var(--glow-accent); }
.balance-plus:hover .plus-glyph, .balance-plus:focus-visible .plus-glyph { transform: rotate(90deg); }
.balance-plus.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
/* длинный ник (до 32 символов) обрезается: меню в одну строку не должно уезжать под правую группу */
.nav-user { display: inline-block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
  color: var(--text-dim); transition: color 150ms; }
.nav-user:hover { color: var(--text); }
.nav-inv { font-size: 13px; color: var(--accent); white-space: nowrap; }
.nav-inv:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }

.container { max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 80px; }
body > .container { flex: 1; width: 100%; animation: page-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* футер */
.site-footer { border-top: 1px solid var(--line); margin-top: 40px; background: var(--footer-bg); }
.footer-inner {
  max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap;
}
.footer-brand .logo { display: inline-flex; line-height: 0; }
.footer-brand .logo .bc-logo { height: 26px; width: auto; }
.footer-note { color: var(--text-faint); font-size: 12px; margin-top: 8px; max-width: 460px; }
.footer-credit { color: var(--text-faint); font-size: 12px; margin-top: 10px; opacity: 0.7; letter-spacing: 0.02em; } /* подпись автора — приглушённо */
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; }
.footer-links a { color: var(--text-dim); transition: color 150ms; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--accent-strong); }
/* языки: "RU · EN · PL" — просто текст, текущий акцентом */
.footer-lang { display: flex; align-items: center; font-size: 13px; }
.footer-lang button {
  padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: 600 13px/1 var(--font-num); letter-spacing: 0.04em; color: var(--text-faint); transition: color 150ms;
}
.footer-lang button + button::before { content: '·'; margin: 0 8px; color: var(--text-faint); font-weight: 400; }
.footer-lang button:hover:not(:disabled), .footer-lang button:focus-visible { color: var(--text); }
.footer-lang button[aria-pressed="true"] { color: var(--accent); cursor: default; }
.footer-lang button:disabled:not([aria-pressed="true"]) { cursor: progress; }

/* Наклон скинов. Отдельные свойства rotate/scale, а не transform: анимации на transform (выигрыш в рулетке)
   складываются с наклоном, а не затирают его */
.skin-img { rotate: var(--skin-tilt); scale: var(--skin-tilt-scale); }
/* картинка ещё грузится — под ней заглушка редкости (public/js/api.js itemImg), карточка не пустая */
img.skin-img.is-loading { background: var(--ph) center / 60% no-repeat; }
/* лента рулетки (одиночное открытие и ленты пачки): наклон и небольшое уменьшение, чтобы оружие не упиралось в края */
.roulette-track .slot, .reel-slot { --skin-tilt: 12deg; --skin-tilt-scale: 0.88; }
.roulette-track .slot { --skin-tilt-scale: 0.96; } /* слот шире — скин крупнее: ~85% ширины слота */

/* ---------- сетки ---------- */
.split { display: grid; gap: 40px; align-items: start; }
.split-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.split-6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cards.dense { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
@media (max-width: 960px) {
  .split-7-5, .split-5-7, .split-8-4, .split-6-6 { grid-template-columns: minmax(0, 1fr); } /* minmax: широкая таблица листается внутри .table-scroll, а не растягивает страницу */
  h1 { font-size: 36px; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .nav-user { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .balance-pill { white-space: nowrap; }
  .cards, .cards.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ---------- заголовок страницы: слева, короткая градиентная черта под h1 ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 32px; }
.page-head h1::after {
  content: ''; display: block; width: 56px; height: 4px; margin-top: 16px; border-radius: 4px; background: var(--grad-accent);
}
.page-head .lede { margin-top: 14px; }
.crumbs { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; }
.crumbs a:hover { color: var(--accent-strong); }
.crumbs .sep { color: var(--text-faint); margin: 0 8px; }

/* ---------- панели и линии ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 20px;
  box-shadow: var(--shadow-1);
}
.panel + .panel { margin-top: 12px; }
.panel h2 { margin-bottom: 14px; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.section-title h2 { margin: 0; }

.stat-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-dim); padding: 7px 0; border-top: 1px solid var(--line); }
.stat-row:first-child { border-top: 0; }
.stat-row b { color: var(--text); font-weight: 500; }

.tag {
  display: inline-block; font-size: 12px; font-weight: 500; line-height: 1; padding: 5px 9px;
  border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-dim);
}
.tag-demo {
  display: inline-block; font-size: 10px; font-weight: 500; line-height: 1; padding: 3px 6px; vertical-align: 1px;
  border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-dim);
}
.badge-done { color: var(--success); font-size: 13px; font-weight: 600; }

/* ---------- кнопки ---------- */
/* основная — градиент акцента: в светлой теме белый текст (5.8–6.2:1), в тёмной — тёмный на циане (>= 6.6:1) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--font-body);
  padding: 11px 18px;
  border-radius: var(--radius-ui);
  border: 1px solid var(--btn-border);
  background: var(--grad-accent);
  color: var(--on-accent);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms, box-shadow 200ms, transform 120ms;
}
.btn:hover:not(:disabled), .btn:focus-visible {
  background: var(--grad-accent-hover);
  box-shadow: var(--btn-shadow-hover);
}
.btn:active:not(:disabled) { transform: scale(0.97); }
/* вторичная — с заметной рамкой, на hover — акцент */
.btn.secondary { background: var(--btn2-bg); color: var(--text); border-color: var(--field-border); box-shadow: var(--btn2-shadow); }
.btn.secondary:hover:not(:disabled), .btn.secondary:focus-visible {
  background: var(--btn2-hover-bg); color: var(--btn2-hover-fg); border-color: var(--accent); box-shadow: var(--glow-accent-sm);
}
.btn.ghost, .btn.ghost:hover:not(:disabled), .btn.ghost:focus-visible {
  background: transparent; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0;
}
.btn.ghost { color: var(--text-dim); }
.btn.ghost:hover:not(:disabled), .btn.ghost:focus-visible { color: var(--accent); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-lg { padding: 15px 26px; font-size: 15px; }

.icon-btn {
  background: var(--control-bg); border: 1px solid var(--field-border); color: var(--text-dim); border-radius: var(--radius-ui);
  width: 32px; height: 32px; cursor: pointer; font-size: 14px;
  transition: color 150ms, border-color 150ms, background 150ms;
}
.icon-btn:hover, .icon-btn:focus-visible { color: var(--accent); border-color: var(--accent); }

/* ---------- поля ---------- */
input, select, textarea {
  font: 400 14px var(--font-body); color: var(--text);
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-ui);
  padding: 9px 10px;
  transition: border-color 150ms, box-shadow 150ms;
}
input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--text-dim);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* системный список <select>: явные фон и цвет у пунктов И у групп — иначе Chromium в Windows рисует подпись
   <optgroup> белой полосой со светлым (тёмная тема) текстом. Схема цвета — color-scheme у :root каждой темы.
   Часть браузеров эти правила игнорирует; список валют утилит — свой (ui.js enhanceSelect) */
select option, select optgroup { background-color: var(--surface); color: var(--text); }
select optgroup { color: var(--text-dim); font-weight: 600; font-style: normal; }
select option:checked { background-color: var(--accent-soft); color: var(--text); }
select option:disabled { color: var(--text-faint); }
/* без правила браузер берёт свой #757575 — на тёмном поле это 4.4:1; --text-faint: 6.1 (тёмная) / 5.7 (светлая) */
input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; }

/* ---------- пресеты и фильтры: "таблетки" (в тёмной теме — острые), активная — акцент ---------- */
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.preset {
  background: var(--control-bg); border: 1px solid var(--field-border); color: var(--text); padding: 10px 16px; cursor: pointer;
  border-radius: var(--radius-pill); font: 600 14px/1.15 var(--font-body);
  transition: border-color 150ms, background 150ms, color 150ms, box-shadow 200ms, transform 120ms;
}
.preset:hover { border-color: var(--accent); color: var(--accent); }
.preset.active { background: var(--preset-active-bg); border-color: var(--accent); color: var(--preset-active-fg); box-shadow: var(--preset-active-shadow); text-shadow: var(--glow-text); }
.preset:active { transform: scale(0.96); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filters .btn { border-radius: var(--radius-pill); }
.filters .btn:not(.secondary):not(.ghost) { background: var(--accent); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent) 70%, transparent); }

/* ---------- модульный список (утилиты) ---------- */
.modules { display: grid; gap: 10px; }
.module {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-1); transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.module:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.module .idx { font-family: var(--font-num); font-weight: 600; color: var(--accent); font-size: 14px; }
.module h3 { font-size: 20px; }
.module p { color: var(--text-dim); font-size: 14px; margin-top: 4px; }
.module .meta { font-family: var(--font-num); color: var(--text-dim); font-size: 14px; white-space: nowrap; }
@media (max-width: 560px) { .module { grid-template-columns: 36px minmax(0, 1fr); padding: 16px; } .module .meta { grid-column: 2; } }

/* =====================================================================
   Карточка предмета. Форма = индикатор редкости:
   consumer/industrial — скругление, milspec — почти острый угол,
   restricted — острый, classified — срез угла, covert/gold — два среза.
   Структура: .icard (тень) > .icard-shape (обводка цветом редкости) > .icard-body
   Карточка цвета поверхности, тёмное окно арта, под ним полоса редкости 3px.
   Обводка: доля цвета редкости в градиенте — токены --shape-* темы.
   Кнопки в карточке нейтральные: цвет карточке задаёт только редкость.
   ===================================================================== */
.icard {
  --rc: var(--text-faint); --rc-fill: var(--rc); --rc-soft: transparent; --rc-glow: transparent;
  --radius: 0px; --cut: 0px;
  position: relative;
  filter: var(--card-filter);
  transition: filter 200ms, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.icard-shape {
  height: 100%;
  padding: 1px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) var(--shape-a), var(--line)),
    color-mix(in srgb, var(--rc) var(--shape-b), var(--line)) var(--shape-stop));
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut2, 0px) 100%, 0 calc(100% - var(--cut2, 0px)));
}
.icard-body {
  height: 100%;
  display: flex; flex-direction: column;
  border-radius: calc(var(--radius) - 1px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc-soft) var(--card-tint), transparent), transparent 55%), var(--surface);
  clip-path: inherit;
}
.icard:hover { filter: var(--card-hover-base) drop-shadow(0 var(--card-hover-y) var(--card-hover-blur) var(--rc-glow)); }
.icard:hover:not(.disabled) { transform: translateY(-3px); }
.icard:hover .icard-shape { background: linear-gradient(160deg, color-mix(in srgb, var(--rc) var(--shape-hover-a), var(--line)),
  color-mix(in srgb, var(--rc) var(--shape-hover-b), var(--line)) var(--shape-hover-stop)); }

.icard .art {
  position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-bottom: 3px solid var(--rc-fill);
  background: radial-gradient(ellipse 62% 72% at 50% 58%, var(--rc-glow), transparent 72%), var(--stage-grid),
    linear-gradient(180deg, var(--stage-2), var(--stage));
}
.icard .art::after { /* тонкая рамка вокруг картинки */
  content: ''; position: absolute; inset: 6px; border: 1px solid rgba(255, 255, 255, 0.07); pointer-events: none;
}
.icard .art img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)); transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.icard:hover .art img { transform: scale(1.05); }
.icard .tier { font-family: var(--font-num); font-weight: 600; font-size: 11px; color: var(--rc); letter-spacing: 0.04em; margin-bottom: 2px; }
.icard .info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.icard .name { font-family: var(--font-num); font-weight: 600; font-size: 15px; line-height: 1.25; }
.icard .sub { font-size: 12px; color: var(--text-dim); }
.icard .foot { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-top: auto; padding-top: 8px; }
.icard .price { font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; }
.icard .price::after { content: ' ¤'; color: var(--text-dim); font-weight: 500; }
.icard .chance { font-family: var(--font-num); font-weight: 600; font-size: 13px; color: var(--rc); }
.icard .actions { padding: 0 12px 12px; }
.icard .actions .btn { width: 100%; padding: 8px 10px; }
.icard .actions .btn:not(.ghost) { background: var(--btn2-bg); color: var(--text); border-color: var(--field-border); box-shadow: none; }
.icard .actions .btn:not(.ghost):hover:not(:disabled), .icard .actions .btn:not(.ghost):focus-visible {
  color: var(--btn2-hover-fg); border-color: var(--accent); background: var(--btn2-hover-bg); box-shadow: none;
}

.icard.selectable { cursor: pointer; }
.icard.selected .icard-shape { background: var(--card-selected-ring); padding: 2px; }
.icard.selected { filter: var(--card-selected-filter); }
/* галочка: выбор виден не только по цвету рамки (у "Редкого" рамка тоже синяя) */
.icard.selected::after {
  content: ''; position: absolute; top: 9px; left: 9px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; pointer-events: none;
  background: var(--accent) var(--check-icon) center / 14px no-repeat; /* галочка — цвета текста на акценте */
  box-shadow: 0 0 0 2px var(--check-ring), 0 2px 6px rgba(18, 26, 64, 0.35);
}
.icard.disabled { opacity: 0.38; cursor: not-allowed; filter: none; }
.icard[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.icard[aria-disabled="true"] { cursor: default; }

.r-consumer   { --rc: var(--r-consumer);   --rc-fill: var(--r-consumer-fill);   --rc-soft: var(--r-consumer-soft);   --rc-glow: var(--r-consumer-glow);   --radius: 12px; }
.r-industrial { --rc: var(--r-industrial); --rc-fill: var(--r-industrial-fill); --rc-soft: var(--r-industrial-soft); --rc-glow: var(--r-industrial-glow); --radius: 8px; }
.r-milspec    { --rc: var(--r-milspec);    --rc-fill: var(--r-milspec-fill);    --rc-soft: var(--r-milspec-soft);    --rc-glow: var(--r-milspec-glow);    --radius: 4px; }
.r-restricted { --rc: var(--r-restricted); --rc-fill: var(--r-restricted-fill); --rc-soft: var(--r-restricted-soft); --rc-glow: var(--r-restricted-glow); --radius: 0px; }
.r-classified { --rc: var(--r-classified); --rc-fill: var(--r-classified-fill); --rc-soft: var(--r-classified-soft); --rc-glow: var(--r-classified-glow); --cut: 14px; }
.r-covert     { --rc: var(--r-covert);     --rc-fill: var(--r-covert-fill);     --rc-soft: var(--r-covert-soft);     --rc-glow: var(--r-covert-glow);     --cut: 16px; --cut2: 16px; }
.r-gold       { --rc: var(--r-gold);       --rc-fill: var(--r-gold-fill);       --rc-soft: var(--r-gold-soft);       --rc-glow: var(--r-gold-glow);       --cut: 18px; --cut2: 18px; }
.r-gold .icard-shape, .r-gold:hover .icard-shape { background: var(--gold-fill); }
.r-gold .icard-body { background: linear-gradient(160deg, rgba(255, 200, 40, 0.16), transparent 45%), var(--surface); }
.r-gold.selected .icard-shape { background: var(--card-selected-ring); }

/* цвет текста по редкости */
.t-consumer { color: var(--r-consumer); } .t-industrial { color: var(--r-industrial); } .t-milspec { color: var(--r-milspec); }
.t-restricted { color: var(--r-restricted); } .t-classified { color: var(--r-classified); } .t-covert { color: var(--r-covert); } .t-gold { color: var(--r-gold); }

/* ---------- полоса шансов по редкостям (заливка — --r-*-fill, см. oddsBar в ui.js) ---------- */
.odds-bar { display: flex; height: 6px; gap: 2px; min-width: 120px; }
.odds-bar span { display: block; min-width: 2px; height: 100%; border-radius: 3px; }
.odds-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.odds-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 0; border-radius: 2px; }
.odds-legend .num { font-weight: 500; color: var(--text); }

/* ---------- маленькие окна арта: всегда на тёмной сцене ---------- */
.feed-row img, table.rank .item-cell img, .tradeup-slot img,
.result-art img, .ticker-item img, img.thumb,
.result-art svg, .feed-row > svg, .ticker-item > svg {
  background: var(--stage-bg);
  border-radius: var(--radius-ui);
}

/* ---------- каталог кейсов: сетка карточек ---------- */
/* Цвет свечения кейса (карточки каталога и сцена на странице кейса) — здесь, по имени кейса (data-case — имя в нижнем регистре через дефис).
   Кейс без строки здесь берёт цвет из арта (--case-c с сервера), иначе — акцент сайта. */
[data-case="tide-case"]           { --case-glow: #19d3c5; } /* бирюзовый */
[data-case="starter-case"]        { --case-glow: #ff7a1a; } /* оранжевый */
[data-case="neon-case"]           { --case-glow: #ff2fd2; } /* маджента */
[data-case="prime-case"]          { --case-glow: #f5c542; } /* золотой */
[data-case="frontier-elite-case"] { --case-glow: #ff9f1c; } /* янтарный */

.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1024px) { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .case-grid { grid-template-columns: minmax(0, 1fr); } }

.case-card {
  /* цвет кейса: акцент из каталога (cases.accent), иначе таблица data-case, иначе акцент сайта */
  --case: var(--case-c, var(--case-glow, var(--accent)));
  position: relative; display: flex; flex-direction: column; cursor: pointer; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.case-card:hover, .case-card:focus-within {
  transform: translateY(-4px); box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--case) 45%, var(--line));
}
.case-card-art {
  position: relative; height: 240px; padding: 20px; display: flex; align-items: center; justify-content: center;
  background: var(--stage-grid), linear-gradient(180deg, var(--stage-2), var(--stage));
}
.case-card-art::before { /* мягкое радиальное свечение за кейсом; при наведении ярче и шире */
  /* шире кейса и ровное "плато" цвета до его краёв: центр всё равно закрыт картинкой, виден ореол вокруг */
  content: ''; position: absolute; left: 50%; top: 56%; width: 118%; aspect-ratio: 1.75; pointer-events: none;
  border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--case) 75%, transparent) 0, color-mix(in srgb, var(--case) 55%, transparent) 55%,
    color-mix(in srgb, var(--case) 20%, transparent) 78%, transparent);
  filter: blur(12px); opacity: 0.6; scale: 0.92; transition: opacity 200ms ease, scale 200ms ease;
}
.case-card:hover .case-card-art::before, .case-card:focus-within .case-card-art::before { opacity: 1; scale: 1.08; }
.case-card-art img {
  position: relative; display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55)); transition: transform 200ms ease;
}
.case-card:hover .case-card-art img, .case-card:focus-within .case-card-art img { transform: scale(1.05); }

.case-card-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; flex: 1; }
.case-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case-card h3 { font-size: 22px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-card-link { color: inherit; text-decoration: none; }
.case-card-link:focus-visible { outline: none; }
.case-card:has(.case-card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.case-card-price {
  flex-shrink: 0; padding: 5px 10px; border-radius: var(--radius-ui);
  font-family: var(--font-num); font-weight: 600; font-size: 15px; white-space: nowrap;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--line-strong);
}
.case-card-odds .odds-bar { height: 6px; }
.case-card-odds:not(.open) .odds-legend { display: none; }
.case-card-odds .odds-legend { margin-top: 10px; }
.case-card-odds-toggle {
  align-self: flex-start; margin-top: -4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 13px var(--font-body); color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px;
}
.case-card-odds-toggle::after { content: ' ▾'; text-decoration: none; display: inline-block; margin-left: 4px; transition: transform 200ms ease; }
.case-card-odds-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.case-card-odds-toggle:hover, .case-card-odds-toggle:focus-visible { color: var(--accent); }
.case-card-open { margin-top: auto; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .case-card, .case-card-art::before, .case-card-art img, .case-card-odds-toggle::after { transition: none; }
  .case-card:hover .case-card-art::before, .case-card:focus-within .case-card-art::before { scale: 0.92; }
  .case-card:hover, .case-card:focus-within, .case-card:hover .case-card-art img, .case-card:focus-within .case-card-art img { transform: none; }
}

/* ---------- страница кейса: ссылка назад, сцена, управление, содержимое ---------- */
.case-topbar { margin-bottom: 14px; }
.back-link { font-size: 14px; font-weight: 500; color: var(--text-dim); text-decoration: none; }
.back-link:hover, .back-link:focus-visible { color: var(--accent-strong); }

/* Сцена без рамки и сетки. Фон (слой ::before) — файл (--stage-img, класс .has-bg; размыт, края затемнены) или
   CSS-свечение цвета кейса. Низ фона растворяется в странице маской — без жёсткой границы */
.case-stage {
  --case: var(--case-glow, var(--case-c, var(--accent)));
  position: relative; isolation: isolate;
  min-height: 440px; display: flex; align-items: center; justify-content: center;
}
.case-stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 40% 58% at 50% 48%, color-mix(in srgb, var(--case) 40%, transparent), transparent 72%),
    radial-gradient(ellipse 70% 80% at 50% 50%, color-mix(in srgb, var(--case) 10%, transparent), transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
}
.case-stage.has-bg::before {
  inset: -12px; /* размытие у краёв не просвечивает */
  background: radial-gradient(ellipse 72% 78% at 50% 46%, transparent 40%, rgba(0, 0, 0, 0.55) 72%, rgba(0, 0, 0, 0.92) 100%),
    var(--stage-img) center / cover no-repeat;
  filter: blur(6px);
  /* картинка — прямоугольник: растворяем не только низ, но и бока с верхом */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 62%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 62%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
}
.case-stage-hero {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 300ms ease, visibility 0s linear 0s;
}
/* низ картинки — по низу её блока (object-position), поэтому тень ложится прямо под кейс */
.case-stage-hero img {
  position: relative; z-index: 1;
  width: 460px; max-width: 86%; height: 330px; object-fit: contain; object-position: center bottom; display: block;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.45));
  animation: case-hover 4s ease-in-out infinite;
}
.case-stage-floor { /* тень: мягкий тёмный эллипс без цвета; ширину (= ширине кейса) ставит cases.html; в такт парению сужается и бледнеет */
  width: 340px; max-width: 90%; height: 34px; margin-top: -18px; border-radius: 50%; opacity: 0.55;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), transparent 70%);
  filter: blur(8px);
  animation: case-floor 4s ease-in-out infinite;
}
/* Появление кейса (cases.html, dropCase): падение, удар, вспышка и пыль — Web Animations; CSS-«парение» на это время выключено */
.case-stage.drop-wait .case-stage-hero img, .case-stage.drop-wait .case-stage-floor { opacity: 0; }
.case-stage.is-dropping .case-stage-hero { overflow: hidden; } /* падает из-за верхнего края сцены */
.case-stage.is-dropping .case-stage-hero img, .case-stage.is-dropping .case-stage-floor { animation: none; }
.case-stage.is-dropping .case-stage-hero img { transform-origin: 50% 100%; }
.case-stage-flash {
  position: absolute; left: 50%; top: 50%; width: 520px; max-width: 90%; height: 340px; transform: translate(-50%, -46%);
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--case) 70%, transparent), transparent 68%);
}
.case-dust { /* пыль от углов кейса: мягкие размытые серые кружки с лёгким оттенком цвета кейса */
  position: absolute; left: 50%; z-index: 2; border-radius: 50%; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--case) 18%, #8d8f99); filter: blur(4px);
}
@keyframes case-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes case-floor { 0%, 100% { transform: scaleX(1); opacity: 0.55; } 50% { transform: scaleX(0.92); opacity: 0.45; } }

/* Открытие: кейс гаснет, на его месте — рулетка (или ленты пачки) и результат */
.case-stage-spin { display: none; position: relative; z-index: 2; width: 100%; padding: 24px; }
.case-stage.is-open .case-stage-hero { opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
.case-stage.is-open .case-stage-spin { display: block; animation: stage-in 300ms ease both; }
@keyframes stage-in { from { opacity: 0; } to { opacity: 1; } }
.case-stage .roulette-wrap { box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.06); }
.case-stage .result-line { border-bottom: 0; padding: 16px 0 0; min-height: 0; justify-content: center; }
.case-stage .result-line > .dim { color: var(--text-dim); }
.case-stage .result-card { background: var(--surface); }

/* Под сценой: название, шансы (видны всегда), управление */
.case-info { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 28px auto 0; max-width: 860px; }
.case-info h1 { font-size: 40px; }
.case-info-odds { width: 100%; max-width: 640px; margin-top: 14px; }
.case-info-odds .odds-legend { justify-content: center; }
.case-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 22px; }
.case-controls .count-picker { margin-top: 0; justify-content: center; }
.case-open-btn { min-width: 240px; }
.case-info .count-hint { text-align: center; }

/* Содержимое кейса: квадратные карточки одной сеткой, от редких к обычным */
.case-contents-title { font-size: 22px; margin: 48px 0 16px; }
.case-contents { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1280px) { .case-contents { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .case-contents { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 800px) { .case-contents { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .case-contents { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
.ccard { --rc: var(--text-faint); min-width: 0; }
.ccard-art {
  position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 10px;
  border-radius: var(--radius-ui); box-shadow: inset 0 -3px 0 var(--rc);
  background: radial-gradient(ellipse 60% 55% at 50% 50%, color-mix(in srgb, var(--rc) 26%, transparent), transparent 72%),
    linear-gradient(180deg, var(--stage-2), var(--stage));
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.ccard-art::before { /* свечение редкости при наведении — отдельным слоем: градиент фона не анимируется */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 150ms ease;
  background: radial-gradient(ellipse 65% 60% at 50% 50%, color-mix(in srgb, var(--rc) 42%, transparent), transparent 75%);
}
.ccard:hover .ccard-art {
  transform: scale(1.05);
  box-shadow: inset 0 0 0 1px var(--rc), inset 0 -3px 0 var(--rc), 0 0 22px -2px color-mix(in srgb, var(--rc) 55%, transparent);
}
.ccard:hover .ccard-art::before { opacity: 1; }
.ccard-art img, .ccard-art svg { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
@media (prefers-reduced-motion: reduce) {
  .ccard-art, .ccard-art::before { transition: none; }
  .ccard:hover .ccard-art { transform: none; }
}
.ccard-name { margin-top: 8px; font-family: var(--font-num); font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard-sub { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 560px) {
  .case-stage { min-height: 300px; }
  .case-stage-hero img { width: 300px; height: 200px; }
  .case-stage-floor { width: 220px; height: 22px; margin-top: -12px; }
  .case-stage-spin { padding: 14px 10px; }
  .case-info h1 { font-size: 30px; }
  .case-open-btn { width: 100%; min-width: 0; }
  .case-contents-title { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-stage-hero img, .case-stage-floor, .case-stage.is-open .case-stage-spin { animation: none !important; }
  .case-stage-hero, .case-stage.is-open .case-stage-hero { transition: none; }
}

/* Рулетка — единственный анимационный момент страницы кейса: тёмная сцена со скруглением */
.roulette-wrap {
  position: relative; overflow: hidden; height: 216px; border-radius: var(--radius-card);
  background: radial-gradient(ellipse 30% 90% at 50% 50%, var(--reel-glow), transparent 70%),
    linear-gradient(180deg, var(--stage-2), var(--stage));
  box-shadow: var(--shadow-2);
}
.roulette-wrap::before, .reel::before { /* затемнение к краям — вместо маски */
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, var(--stage) 0, transparent 14%, transparent 86%, var(--stage) 100%);
}
.roulette-wrap::before { background: linear-gradient(90deg, color-mix(in srgb, var(--stage) 85%, transparent) 0, transparent 9%, transparent 91%, color-mix(in srgb, var(--stage) 85%, transparent) 100%); }
.roulette-track { display: flex; position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.roulette-track .slot {
  --rc: var(--text-faint);
  width: 190px; height: 100%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 12px 12px; border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(0deg, color-mix(in srgb, var(--rc) 24%, transparent), transparent 55%);
  box-shadow: inset 0 -3px 0 var(--rc);
  transition: opacity 400ms, transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 400ms;
}
.roulette-track .slot img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; display: block; }
.roulette-track .slot .name { font-family: var(--font-num); font-weight: 600; font-size: 13px; color: var(--rc); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* слот под указателем во время прокрутки (класс ставит spinRoulette каждый кадр) — подсветка цветом редкости */
.roulette-track .slot.is-center {
  background: linear-gradient(0deg, color-mix(in srgb, var(--rc) 42%, transparent), color-mix(in srgb, var(--rc) 12%, transparent) 75%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 80%, transparent), inset 0 -3px 0 var(--rc);
  transition: none;
}
@media (max-width: 560px) { .roulette-track .slot { width: 150px; } .roulette-wrap { height: 190px; } }
/* указатель: линия 2px с треугольниками сверху и снизу (белый / циан) — виден и на подсвеченном выигрыше */
.roulette-pointer, .reel-pointer {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 5; background: var(--pointer);
  box-shadow: var(--pointer-shadow);
}
.roulette-pointer::before, .roulette-pointer::after, .reel-pointer::before, .reel-pointer::after {
  content: ''; position: absolute; left: -6px; border: 7px solid transparent;
}
.roulette-pointer::before, .reel-pointer::before { top: 0; border-top-color: var(--pointer); }
.roulette-pointer::after, .reel-pointer::after { bottom: 0; border-bottom-color: var(--pointer); }
.reel-pointer::before, .reel-pointer::after { left: -4px; border-width: 5px; }
.roulette-wrap.done .slot:not(.is-win) { opacity: 0.55; }
/* выигрыш: прозрачный свет цвета редкости — ярче соседей */
.roulette-wrap.done .slot.is-win, .reel.done .reel-slot.is-win {
  background: linear-gradient(0deg, color-mix(in srgb, var(--rc) 40%, transparent), color-mix(in srgb, var(--rc) 10%, transparent) 75%);
  box-shadow: inset 0 0 0 1px var(--rc), inset 0 -3px 0 var(--rc), 0 0 36px color-mix(in srgb, var(--rc) 45%, transparent);
}
.roulette-wrap.done .slot.is-win { transform: scale(1.08); z-index: 2; position: relative; }
/* имя выигрыша — на тёмной плашке: поверх подсветки слота цвет редкости иначе ниже 4.5:1 */
.roulette-wrap.done .slot.is-win .name {
  align-self: flex-start; max-width: calc(100% + 12px); margin-left: -6px; padding: 0 6px; border-radius: calc(6px * var(--round));
  background: var(--plate);
}

.result-line { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid var(--line); min-height: 58px; }
.result-line .num { font-size: 20px; }
.result-card {
  --rc: var(--text-faint);
  display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 24px; align-items: center; width: 100%;
  padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--rc) 45%, var(--line)); border-radius: var(--radius-panel);
  background: radial-gradient(ellipse 40% 120% at 0% 50%, color-mix(in srgb, var(--rc) 12%, transparent), transparent 70%), var(--surface);
  box-shadow: var(--shadow-1);
}
.result-art img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; display: block; padding: 4px; }
.result-name { font-size: 24px; margin: 2px 0 4px; }
.result-info .tier { font-family: var(--font-num); font-weight: 600; font-size: 12px; color: var(--rc); }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) { .result-card { grid-template-columns: 1fr; } }

.fair { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 160px 1fr; gap: 8px 24px; font-size: 13px; color: var(--text-dim); }
.fair .mono { color: var(--text); }
@media (max-width: 560px) { .fair { grid-template-columns: 1fr; gap: 2px; } .fair > :nth-child(even) { margin-bottom: 8px; } }

.quick-toggle { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-dim); cursor: pointer; user-select: none; }

/* ---------- кейсы: открытие пачкой (1..10: степпер + быстрый выбор), ленты, результат ---------- */
.count-picker { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.count-picker .preset { min-width: 46px; padding: 9px 10px; font-family: var(--font-num); font-weight: 600; }
.count-picker .preset:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
/* степпер "− N +": число — spinbutton (клавиатура), кнопки — для мыши и касаний */
.count-stepper {
  display: inline-flex; align-items: stretch; height: 40px; overflow: hidden;
  border: 1px solid var(--field-border); border-radius: var(--radius-pill); background: var(--field-bg);
  transition: border-color 150ms, box-shadow 200ms;
}
.count-stepper:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.count-step {
  width: 38px; padding: 0; border: 0; background: transparent; color: var(--text);
  font: 600 20px/1 var(--font-num); cursor: pointer; transition: color 150ms, background 150ms;
}
.count-step:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
.count-step:active:not(:disabled) { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.count-step:disabled { color: var(--text-faint); opacity: 0.45; cursor: not-allowed; }
.count-value {
  min-width: 46px; display: flex; align-items: center; justify-content: center; padding: 0 8px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  font: 600 20px/1 var(--font-num); color: var(--text); cursor: default; user-select: none;
  transition: color 150ms;
}
.count-value:focus { outline: none; }
.count-value:focus-visible { color: var(--accent); }
.count-value.over { color: var(--text-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.count-value[aria-disabled="true"] { opacity: 0.6; }
.count-hint { min-height: 20px; margin-top: 6px; }

/* Ленты пачки — всегда одной колонкой (решение владельца); .many — лент больше 5, каждая ниже */
.multi-reels { display: grid; gap: 8px; }
.multi-reels[hidden], .roulette-wrap[hidden] { display: none; }
.multi-reels.many .reel { height: 66px; }
.multi-reels.many .reel-slot { padding: 6px 10px; }
@media (max-width: 560px) { .multi-reels.many .reel { height: 58px; } }
.reel {
  position: relative; overflow: hidden; height: 84px; border-radius: calc(12px * var(--round));
  background: radial-gradient(ellipse 30% 90% at 50% 50%, var(--reel-glow), transparent 70%),
    linear-gradient(180deg, var(--stage-2), var(--stage));
  box-shadow: var(--shadow-1);
}
.reel-track { display: flex; position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.reel-slot {
  --rc: var(--text-faint);
  width: 96px; height: 100%; flex-shrink: 0; display: flex; align-items: center; padding: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(0deg, color-mix(in srgb, var(--rc) 24%, transparent), transparent 55%);
  box-shadow: inset 0 -3px 0 var(--rc);
  transition: opacity 400ms, box-shadow 400ms, background 400ms;
}
.reel-slot img, .reel-slot svg { width: 100%; height: auto; display: block; }
.reel-slot img { aspect-ratio: 2 / 1; object-fit: contain; }
.reel.done .reel-slot:not(.is-win) { opacity: 0.28; }

.batch-summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; }
.batch-total { font-size: 26px; margin-top: 2px; }
.batch-cards { margin-top: 16px; }
/* аккуратная сетка итогов: ряды поровну (до 5 в ряд: 6 → 3+3, 7 → 4+3, 10 → 5+5), --batch-cols ставит cases.html */
@media (min-width: 961px) {
  .batch-cards[style*="--batch-cols"] {
    grid-template-columns: repeat(var(--batch-cols), minmax(0, 1fr));
    max-width: calc(var(--batch-cols) * 250px);
  }
}
.batch-cards .reveal { animation-fill-mode: both; }
.batch-cards .icard .actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fair-link { display: inline-block; margin-top: 6px; font-size: 12px; }

/* ---------- апгрейдер ---------- */
.upgrader-dial { display: flex; justify-content: center; padding: 20px 0 8px; }
.chance-circle { position: relative; width: 220px; height: 220px; }
.chance-circle svg { transform: rotate(-90deg); display: block; }
.chance-circle .label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.chance-circle .label .num { font-size: 40px; }
.chance-circle .label .dim { font-size: 12px; }

.upg-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 32px; align-items: center; }
.upg-side {
  --rc: var(--line);
  padding: 16px; min-height: 250px; display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--rc) 45%, var(--line)); border-radius: var(--radius-card);
  /* мягкое радиальное свечение цвета редкости за предметом (без предмета --rc — цвет линии, почти незаметно) */
  background: radial-gradient(ellipse 62% 52% at 50% 46%, color-mix(in srgb, var(--rc) 30%, transparent), color-mix(in srgb, var(--rc) 8%, transparent) 60%, transparent 78%), var(--surface);
  box-shadow: var(--shadow-1);
  transition: border-color 300ms, background 300ms;
}
#target-side { text-align: right; }
.upg-slot { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 4px; padding: 8px 0; }
/* предмет "Ставки" и "Цели": без подложки, ~80% ширины карточки, без наклона, мягкая тень под ним */
.upg-art { position: relative; width: 86%; margin: 4px auto 6px; } /* 86% содержимого ≈ 80% ширины карточки (у неё отступы 16px) */
.upg-art::after {
  content: ''; position: absolute; left: 14%; right: 14%; bottom: -4px; height: 14%; z-index: 0; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), transparent); filter: blur(6px);
}
.upg-art img, .upg-art svg {
  position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain;
  --skin-tilt: 0deg; --skin-tilt-scale: 1; rotate: none; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.35));
}
:root[data-theme="light"] .upg-art::after { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.22), transparent); }
.upg-name { font-size: 16px; }
.upg-sum { font-size: 22px; }
.upg-sum .num { font-size: 16px; margin-left: 6px; }
/* у .cards и .upg-slot свой display — без этого атрибут hidden их не прячет */
.upg-slot[hidden], #targets-grid[hidden], #myst-candidates-grid[hidden] { display: none; }

/* шкала: круглый циферблат (цвета лица — --dial-face-1/-2 темы), дуга растёт из низа, цвет — по высоте (--arc-stops) */
.upg-dial { position: relative; width: min(300px, 100%); height: auto; aspect-ratio: 1; }
.upg-dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.dial-face { filter: var(--dial-shadow); }
.dial-track { stroke: var(--dial-track); }
.dial-inner { stroke: var(--dial-inner); }
.dial-origin { stroke: var(--text-faint); }
#ticks .tick { stroke-width: 1.5; stroke-linecap: round; opacity: var(--tick-o); transition: opacity 300ms; }
#ticks .tick.major { stroke-width: 2; opacity: var(--tick-major-o); }
#ticks .tick.on { opacity: 1; }
#arc {
  filter: var(--arc-glow);
  transition: stroke-dasharray 500ms cubic-bezier(0.2, 0.8, 0.2, 1), stroke-dashoffset 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 200ms, filter 300ms;
}
#myst-ring { stroke: var(--violet); stroke-dasharray: 0.6 1.9; opacity: 0; transition: opacity 300ms; }
#needle { transition: filter 300ms; }

.upg-label {
  position: absolute; inset: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; pointer-events: none;
}
.upg-label .num { font-size: 44px; transition: color 300ms; }
/* число шанса — крупный текст (не меньше 38px): цвета уровней (--lvl-*) не ниже 3:1 на лице циферблата */
.upg-dial .upg-label .upg-pct {
  font: 600 clamp(38px, 12vw, 54px)/1 var(--font-num); letter-spacing: 0.01em; color: var(--text-faint);
  transition: color 300ms;
}
.upg-cap { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.upg-dial[data-level="low"] .upg-pct { color: var(--lvl-low); }
.upg-dial[data-level="warm"] .upg-pct { color: var(--lvl-warm); }
.upg-dial[data-level="mid"] .upg-pct { color: var(--lvl-mid); }
.upg-dial[data-level="high"] .upg-pct { color: var(--lvl-high); }

/* итог: мягкое свечение бегунка на остановке */
.upg-dial.win { --glow: var(--win-glow); }
.upg-dial.lose { --glow: #ff5470; }
.upg-dial.win #needle, .upg-dial.lose #needle { filter: drop-shadow(0 0 4px var(--glow)) drop-shadow(0 0 10px var(--glow)); }
.upg-dial.win #arc { filter: drop-shadow(0 0 8px rgba(25, 194, 107, 0.6)); }
.upg-dial.win .upg-label .upg-pct { color: var(--lvl-high); }
.upg-dial.lose .upg-label .upg-pct { color: var(--danger); }
.upg-dial.win .upg-cap { color: var(--success); }
.upg-dial.lose .upg-cap { color: var(--danger); }

/* режим мистери: дуги нет, пунктирное фиолетовое кольцо и "?" */
.upg-dial.is-mystery #myst-ring { opacity: 0.75; }
.upg-dial.is-mystery #ticks .tick { stroke: var(--violet) !important; opacity: 0.3; }
.upg-dial.is-mystery .upg-label .upg-pct { color: var(--violet-ink); }
.upg-dial.is-mystery.spinning .upg-pct { animation: upg-q-pulse 700ms ease-in-out infinite alternate; }
@keyframes upg-q-pulse { to { opacity: 0.55; transform: scale(0.94); } }

/* пресеты, "Быстро" и кнопка апгрейда — в одной панели */
.upg-controls {
  display: flex; justify-content: space-between; align-items: center; gap: 16px 20px; flex-wrap: wrap;
  margin-top: 28px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-1);
}
.upg-result { min-height: 32px; padding: 14px 0 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.upg-result .num { font-size: 20px; }
.upg-result .link { align-self: center; }
.upg-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.upg-tools [hidden] { display: none; }
.upg-sort { padding: 6px 8px; font-size: 13px; }
.upg-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* пресеты 75…5% и кнопка "Мистери" того же вида: пунктирный фиолетовый контур и знак "?" */
.presets .preset:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
.presets .preset.pending { border-color: var(--accent); opacity: 0.7; }
.presets .preset .num { font-family: var(--font-num); font-size: 15px; }
.preset-myst {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 4px;
  border-style: dashed; border-color: var(--violet); color: var(--violet-ink);
}
.preset-myst .preset-glyph {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font: 600 12px/1 var(--font-num); color: var(--myst-glyph-fg); background: var(--violet);
}
.preset-myst:hover { border-color: var(--violet); color: var(--violet-ink); background: color-mix(in srgb, var(--violet) 7%, transparent); }
.preset-myst.active { border-style: solid; background: var(--myst-active-bg); border-color: var(--violet); color: var(--myst-active-fg); box-shadow: var(--myst-active-shadow); text-shadow: none; }
.preset-myst.active .preset-glyph { background: var(--myst-glyph-active-bg); color: var(--myst-glyph-active-fg); }
#main-btn.is-mystery:not(:disabled) {
  /* белый текст >= 4.5:1 (AA) по всей ширине */
  background: var(--grad-violet); border-color: transparent; color: #fff;
  box-shadow: var(--violet-shadow);
}
#main-btn.is-mystery:not(:disabled):hover,
#main-btn.is-mystery:not(:disabled):focus-visible { box-shadow: var(--violet-shadow-hover); }

/* мистери: карта "?" в слоте результата — перетасовка, затем переворот на выпавший предмет */
.myst-slot { gap: 12px; }
/* карта во всю ширину слота, как предмет "Ставки": рубашка "?" — небольшая карта по центру, лицо — без своей рамки и фона
   (свечение редкости даёт сама панель .upg-side), иначе выходил "квадрат в квадрате" и мелкий скин */
.myst-card { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 260px; perspective: 900px; }
.myst-card .myst-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 10px; text-align: center; border: 1px solid var(--line-strong); border-radius: calc(12px * var(--round));
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform var(--flip-ms, 520ms) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.myst-card .myst-back {
  inset: 0; width: min(200px, 100%); height: min(150px, 100%); margin: auto;
  background: var(--myst-back-bg);
  border-color: var(--myst-back-border) !important; box-shadow: var(--myst-back-shadow);
}
.myst-back span { font: 600 54px/1 var(--font-num); color: var(--myst-q); text-shadow: var(--myst-q-shadow); }
.myst-card .myst-front { transform: rotateY(180deg); padding: 0; border: 0; background: none; box-shadow: none; }
.myst-card.revealed .myst-back { transform: rotateY(-180deg); }
.myst-card.revealed .myst-front { transform: rotateY(0deg); }
.myst-card.shuffling { animation: myst-wobble 260ms ease-in-out infinite alternate; }
@keyframes myst-wobble { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(3deg) translateY(-6px); } }
.myst-front .upg-art { margin: 0 auto 6px; }
.myst-fname { line-height: 1.2; }
.myst-range { min-height: 40px; text-align: center; }
.myst-range .num { font-size: 18px; }

@media (max-width: 960px) {
  .upg-stage { grid-template-columns: 1fr; justify-items: center; }
  .upg-side { width: 100%; min-height: 0; }
  #target-side { text-align: left; }
  .upg-dial { width: min(300px, 100%); }
}
@media (max-width: 480px) {
  .upg-controls { gap: 14px; padding: 12px; }
  .presets { gap: 5px; }
  .presets .preset { padding: 9px 11px; }
  .upg-actions, .upg-actions #main-btn { width: 100%; }
  .upg-actions { justify-content: space-between; }
}

/* ---------- контракты ---------- */
.tradeup-slots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-bottom: 40px; }
.tradeup-slot {
  --rc: var(--line-strong);
  aspect-ratio: 2 / 1.3; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--font-num); color: var(--text-faint); font-size: 13px;
  border: 1px dashed var(--line-strong); border-radius: calc(10px * var(--round)); background: var(--surface);
}
.tradeup-slot.filled {
  cursor: pointer; border: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 55%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 75%),
    linear-gradient(180deg, var(--stage-2), var(--stage));
  box-shadow: inset 0 -3px 0 var(--rc);
}
.tradeup-slot img { width: 100%; height: 100%; object-fit: contain; display: block; background: none; }
@media (max-width: 760px) { .tradeup-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.outcomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }

/* Появление результата — единственный анимационный момент страницы контрактов */
@keyframes reveal { from { transform: translateY(8px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
.reveal { animation: reveal 480ms cubic-bezier(0.2, 0.9, 0.3, 1); }

/* Подписание контракта (tradeup.html playForge): сцена поверх страницы — скины слотов летят по дуге в центр,
   сливаются в сгусток цвета редкости результата (--fc), вспышка, искры, переворот карточки; у кованого —
   один проход перелива по рамке и появление номера. Движение — Web Animations из скрипта страницы,
   здесь только оформление и фазы перелива/номера. --fd — длительность всей сцены (мс, 3500 или 800 быстро). */
.forge-stage {
  --fc: var(--accent);
  position: fixed; inset: 0; z-index: 900; overflow: hidden; cursor: pointer;
  background: radial-gradient(ellipse 60% 55% at 50% 48%, color-mix(in srgb, var(--fc) 16%, transparent), transparent 70%), rgba(5, 6, 10, 0.72);
  animation: forge-stage-in 220ms ease-out both;
}
:root[data-theme="light"] .forge-stage { background: radial-gradient(ellipse 60% 55% at 50% 48%, color-mix(in srgb, var(--fc) 18%, transparent), transparent 70%), rgba(18, 22, 34, 0.55); }
.forge-stage.is-leaving { animation: forge-stage-out 180ms ease-in both; }
@keyframes forge-stage-in { from { opacity: 0; } }
@keyframes forge-stage-out { to { opacity: 0; } }
.forge-shard, .forge-orb, .forge-spark, .forge-card { position: absolute; left: 50%; top: 48%; pointer-events: none; }
.forge-shard {
  display: grid; place-items: center; border-radius: calc(8px * var(--round));
  background: linear-gradient(180deg, var(--stage-2), var(--stage)); box-shadow: inset 0 -3px 0 var(--sc, var(--line-strong)), 0 6px 18px rgba(0, 0, 0, 0.45);
  will-change: transform, opacity, filter;
}
.forge-shard img { width: 100%; height: 100%; object-fit: contain; display: block; background: none; }
.forge-orb {
  width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0 14%, color-mix(in srgb, var(--fc) 70%, #fff) 30%, var(--fc) 52%, transparent 72%);
  box-shadow: 0 0 40px 12px color-mix(in srgb, var(--fc) 70%, transparent), 0 0 120px 40px color-mix(in srgb, var(--fc) 35%, transparent);
  will-change: transform, opacity;
}
.forge-flash {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 48%, #fff 0 6%, color-mix(in srgb, var(--fc) 75%, #fff) 18%, color-mix(in srgb, var(--fc) 40%, transparent) 42%, transparent 70%);
}
.forge-spark {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: color-mix(in srgb, var(--fc) 45%, #fff); box-shadow: 0 0 8px 2px var(--fc);
}
.forge-spark.is-streak { width: 14px; height: 3px; margin: -1.5px 0 0 -7px; border-radius: 3px; }
.forge-card { width: min(250px, 64vw); perspective: 1100px; transform: translate(-50%, -50%); }
.forge-flip { position: relative; transform-style: preserve-3d; opacity: 0; will-change: transform; }
.forge-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.forge-face .icard { margin: 0; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), 0 0 50px color-mix(in srgb, var(--fc) 45%, transparent); }
.forge-back {
  position: absolute; inset: 0; transform: rotateY(180deg); display: grid; place-items: center;
  border-radius: calc(12px * var(--round)); border: 2px solid color-mix(in srgb, var(--fc) 70%, #fff);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--fc) 55%, #fff), var(--fc) 35%, color-mix(in srgb, var(--fc) 40%, #10121a) 80%);
  color: #fff;
}
.forge-back .forge-ico { width: 56px; height: 56px; opacity: 0.85; }
.forge-hint { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.55); pointer-events: none; }
/* кованый: до вспышки перелив рамки стоит за краем, номер и плашка скрыты; потом — один проход и появление */
.forge-stage .icard.is-forged .icard-shape::before { animation: none; background-position: 100% 0; }
.forge-stage .icard.is-forged.sheen-go .icard-shape::before { animation: forge-sheen calc(var(--fd) * 0.2ms) cubic-bezier(0.4, 0, 0.3, 1) 1 both; }
.forge-stage .icard.is-forged .forge-serial, .forge-stage .icard.is-forged .forge-badge { opacity: 0; transform: scale(0.4); }
.forge-stage .icard.is-forged.serial-go .forge-serial, .forge-stage .icard.is-forged.serial-go .forge-badge {
  animation: forge-pop calc(var(--fd) * 0.08ms + 120ms) cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
@keyframes forge-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
.tradeup-quick { display: flex; justify-content: flex-end; margin-top: 10px; }

/* ---------- live-лента (вертикальная) ---------- */
.feed-list { border-top: 1px solid var(--line); }
.feed-row {
  --rc: var(--text-faint);
  display: grid; grid-template-columns: 3px 64px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.feed-row::before { content: ''; height: 100%; min-height: 32px; border-radius: 2px; background: var(--rc); }
.feed-row img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; display: block; }
.feed-row .what { font-family: var(--font-num); font-weight: 600; color: var(--rc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row .who { color: var(--text-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row .val { font-family: var(--font-num); font-weight: 600; }
@keyframes feed-in { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
.feed-row.fresh { animation: feed-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1); }

/* ---------- прогресс: дорожка с контуром (пустая "0/1" тоже видна, >= 3:1) ---------- */
.progress-bar {
  height: 6px; margin: 10px 0 6px; border-radius: var(--radius-pill); overflow: hidden;
  background: var(--track); box-shadow: inset 0 0 0 1px var(--field-border);
}
.progress-bar > div { height: 100%; border-radius: inherit; background: var(--grad-accent); }
.quest-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.quest-row:first-child { border-top: 1px solid var(--line); }
.quest-row .title { font-weight: 500; }
.quest-row .desc { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.quest-row .meta { font-family: var(--font-num); font-size: 12px; color: var(--text-faint); }
.quest-row .streak { margin: 10px 0 6px; }

.ach-row { --rc: var(--text-faint); display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ach-row:first-child { border-top: 1px solid var(--line); }
.ach-row .progress-bar { margin: 0; }
.ach-row .progress-bar > div { background: var(--rc); }
.ach-row[style*="--r-gold"] .progress-bar > div { background: var(--gold-fill); }
@media (max-width: 640px) { .ach-row { grid-template-columns: 1fr auto; } .ach-row .progress-bar { grid-column: 1 / -1; } }

/* хаб заработка и квесты */
.earn-daily { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 28px;
  background: radial-gradient(ellipse 50% 140% at 0% 50%, var(--accent-soft), transparent 70%), var(--surface); }
.earn-reward { font-size: 44px; margin: 6px 0 4px; }
.streak { display: flex; gap: 4px; margin-top: 14px; }
.streak span { width: 22px; height: 6px; border-radius: 3px; background: var(--track); box-shadow: inset 0 0 0 1px var(--field-border); }
.streak span.on { background: var(--accent); box-shadow: none; }
.quests-aside .earn-ad { margin-top: 0; padding: 20px; }
.quests-aside .earn-ad .earn-reward { font-size: 28px; }

/* реклама за валюту */
.earn-ad { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 12px; padding: 22px 28px; }
.earn-ad .earn-reward { font-size: 32px; }
.ad-modal { max-width: 560px; padding: 0; overflow: hidden; }
.ad-slot {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
  padding: 0 20px; text-align: center; /* длинные подписи (en/pl) переносятся по центру */
  background: linear-gradient(120deg, var(--surface-2), var(--surface-hi), var(--surface-2)); background-size: 300% 300%; animation: gold-shift 6s ease-in-out infinite;
  border-bottom: 1px solid var(--line);
}
.ad-foot { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.ad-timer { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--track); overflow: hidden; }
.ad-bar { height: 100%; width: 0; background: var(--grad-accent); }

/* ---------- таблицы ---------- */
/* position: relative — скрытые подписи (.sa-sr, position: absolute) в шапке остаются внутри прокрутки, а не расширяют страницу */
.table-scroll { overflow-x: auto; position: relative; }
table.rank { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rank th { text-align: left; font-weight: 500; font-size: 12px; color: var(--text-faint); padding: 0 10px 10px; border-bottom: 1px solid var(--line-strong); }
table.rank td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.rank td.num, table.rank th.num { text-align: right; }
table.rank tr.me td { background: var(--accent-soft); }
table.rank .item-cell { display: flex; align-items: center; gap: 10px; }
table.rank .item-cell img { width: 64px; aspect-ratio: 2 / 1; object-fit: contain; display: block; border-radius: calc(6px * var(--round)); }
table.rank .place { font-family: var(--font-num); color: var(--text-faint); width: 36px; }

/* ===== РЕЙТИНГИ (public/pages/leaderboard.html): вкладки категорий, период, подиум, строки — начало блока =====
   Карточки подиума и строки лежат на --surface: цветной ник проверен на контраст только на фонах темы
   (server/cosmetics.js NAMEPLATE_BACKGROUNDS), поэтому медальный цвет — полосы, корона, цифры пьедестала, не фон.
   "Ты" в строках — --accent-soft поверх --surface (тоже из того списка). Медали текстом: тёмная тема на --surface —
   золото 12.7, серебро 11.6, бронза 7.8; светлая на белом — 5.5 / 5.9 / 6.0 (и >= 3:1 на подкрашенном пьедестале). */
.lb-page { --lb-gold: #ffd700; --lb-silver: #c9d1de; --lb-bronze: #e39b62; --lb-glow: rgba(255, 215, 0, 0.42); }
:root[data-theme="light"] .lb-page { --lb-gold: #8f5f00; --lb-silver: #5d6475; --lb-bronze: #9a4f1c; --lb-glow: rgba(245, 176, 0, 0.38); }
.lb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.lb-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 26px; }
.lb-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid var(--field-border);
  border-radius: var(--radius-ui); background: var(--control-bg); color: var(--text-dim); font: 500 14px var(--font-body);
  cursor: pointer; transition: color 150ms, border-color 150ms, background 150ms, box-shadow 150ms;
}
.lb-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.lb-tab:hover { color: var(--text); border-color: var(--accent); }
.lb-tab[aria-selected="true"] { background: var(--preset-active-bg); border-color: var(--accent); color: var(--preset-active-fg); box-shadow: var(--preset-active-shadow); }
.lb-period { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--field-border); border-radius: var(--radius-ui); background: var(--control-bg); }
.lb-period[hidden] { display: none; }
.lb-period button {
  min-height: 34px; padding: 6px 14px; border: 0; border-radius: var(--radius-ui); background: transparent; color: var(--text-dim);
  font: 500 13px var(--font-body); cursor: pointer; transition: color 150ms, background 150ms;
}
.lb-period button:hover { color: var(--text); }
.lb-period button[aria-pressed="true"] { background: var(--preset-active-bg); color: var(--preset-active-fg); box-shadow: var(--preset-active-shadow); }

.lb-head { margin-bottom: 16px; }
.lb-head h2 { margin: 0 0 6px; }
.lb-desc { margin: 0; color: var(--text-dim); font-size: 14px; max-width: 70ch; }
.lb-status { margin: 0 0 16px; color: var(--text-dim); font-size: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lb-status:empty { display: none; }
.lb-board[aria-busy="true"] .lb-podium, .lb-board[aria-busy="true"] .lb-rest { opacity: 0.5; transition: opacity 150ms; }

/* подиум: в разметке 1, 2, 3; на широком экране 2 — 1 — 3, первое место выше (карточки — блок "карточки со скином" в конце файла) */
.lb-podium {
  list-style: none; margin: 0 auto 20px; padding: 14px 0 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px;
}
.lb-step { display: flex; flex-direction: column; min-width: 0; animation: lb-rise 420ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.lb-p1 { order: 2; --medal: var(--lb-gold); --lift: 16px; animation-delay: 40ms; }
.lb-p2 { order: 1; --medal: var(--lb-silver); --lift: 0px; animation-delay: 120ms; }
.lb-p3 { order: 3; --medal: var(--lb-bronze); --lift: 0px; animation-delay: 200ms; }
@keyframes lb-rise { from { opacity: 0; transform: translateY(12px); } }

/* изменение места за период */
.lb-chg { display: inline-flex; align-items: center; gap: 1px; font: 600 12px/1 var(--font-num); white-space: nowrap; cursor: default; }
.lb-chg.is-up { color: var(--success); }
.lb-chg.is-down { color: var(--danger); }
.lb-chg.is-same { color: var(--text-faint); }
.lb-chg.is-new { padding: 2px 6px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font: 500 11px/1.2 var(--font-body); }

/* аватар в рамке профиля: .avatar-frame (112 / 64 px) уменьшается целиком — рамки с вырезами сохраняют пропорции */
.lb-av { position: relative; display: block; flex-shrink: 0; width: var(--av); height: var(--av); }
.lb-av > .avatar-frame { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.lb-av-sm { --av: 36px; } .lb-av-sm > .avatar-frame { transform: scale(0.5625); }
.lb-av-anon { display: grid; place-items: center; border: 1px dashed var(--field-border); border-radius: 50%; background: var(--surface-2); color: var(--text-faint); }
.lb-av-anon svg { width: 56%; height: 56%; }

.lb-link { color: inherit; text-decoration: none; }
.lb-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.lb-hidden { color: var(--text-dim); font-style: italic; font-weight: 500; }
.lb-you { display: inline-block; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font: 500 11px/1.3 var(--font-body); vertical-align: 2px; }
.lb-dtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-iname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.lb-dsub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-dim); }
.lb-acts { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.lb-act { padding: 3px 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.lb-act.is-zero { color: var(--text-faint); }

/* таблица мест 4–100 */
.lb-rest { padding: 0; overflow: hidden; }
.lb-rest[hidden] { display: none; }
.lb-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lb-table th {
  padding: 11px 12px; border-bottom: 1px solid var(--line-strong); text-align: left;
  font: 500 12px var(--font-body); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-table td { padding: 9px 12px; vertical-align: middle; }
.lb-table tbody tr + tr td { border-top: 1px solid var(--line); }
.lb-table th.lb-rank, .lb-table td.lb-rank { width: 52px; padding-left: 18px; }
.lb-table .lb-change { width: 58px; }
.lb-table .lb-player { width: 30%; }
.lb-table .lb-val { width: 15%; text-align: right; }
.lb-table .lb-detail { width: auto; }
.lb-table .lb-date { width: 96px; padding-right: 18px; text-align: right; color: var(--text-dim); font-size: 13px; white-space: nowrap; }
.lb-table td.lb-rank { font: 500 15px var(--font-num); color: var(--text-faint); }
.lb-table td.lb-val { font: 600 16px var(--font-num); }
.lb-pl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lb-dwrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-row.is-me td { background: var(--accent-soft); }
.lb-row.is-flash td { animation: lb-flash 1.6s ease-out 1; }
@keyframes lb-flash { 0%, 30% { background: color-mix(in srgb, var(--accent) 30%, transparent); } }

/* страницы */
.lb-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.lb-pager[hidden] { display: none; }
.lb-pg {
  min-width: 40px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--field-border); border-radius: var(--radius-ui);
  background: var(--control-bg); color: var(--text-dim); font: 500 13px var(--font-num); cursor: pointer; transition: color 150ms, border-color 150ms;
}
.lb-pg:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.lb-pg[aria-current="page"] { background: var(--preset-active-bg); border-color: var(--accent); color: var(--preset-active-fg); box-shadow: var(--preset-active-shadow); }
.lb-pg:disabled { opacity: 0.4; cursor: default; }
.lb-pg-arrow { font-size: 18px; line-height: 1; }

/* "Твоё место" — закреплено внизу экрана */
.lb-me {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent); border-top: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: lb-me-in 260ms ease-out both;
}
.lb-me[hidden] { display: none; }
@keyframes lb-me-in { from { transform: translateY(100%); } }
.lb-me-in { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; font-size: 14px; }
.lb-me-rank { font: 600 15px var(--font-num); }
.lb-me-name { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lb-me-val { margin-left: auto; color: var(--text-dim); }
.lb-me-val b { color: var(--text); font: 600 15px var(--font-num); }
.lb-me-go { min-height: 34px; padding: 6px 14px; }
.lb-me-hint { font-size: 12px; color: var(--text-faint); }
body.lb-has-me { padding-bottom: 68px; }

@media (max-width: 900px) {
  .lb-table .lb-date { display: none; }
  .lb-table .lb-player { width: 34%; }
}
/* телефон: таблица — список карточек (подиум — в блоке "карточки со скином") */
@media (max-width: 560px) {
  .lb-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .lb-tab { padding: 8px 10px; font-size: 13px; }
  .lb-tab span { min-width: 0; }
  .lb-period { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .lb-period button { padding: 6px 4px; }
  .lb-rest { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .lb-table, .lb-table tbody { display: block; }
  .lb-table thead { display: none; }
  .lb-table tbody { display: grid; gap: 8px; }
  .lb-table tr.lb-row {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "rank player val" "rank detail change" "rank detail date";
    align-items: center; gap: 4px 10px; padding: 10px 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  }
  .lb-table tbody tr + tr td { border-top: 0; }
  .lb-table td { display: block; width: auto !important; padding: 0 !important; background: none !important; }
  .lb-row.is-me { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .lb-table td.lb-rank { grid-area: rank; align-self: center; text-align: center; font-size: 17px; }
  .lb-table td.lb-player { grid-area: player; }
  .lb-table td.lb-val { grid-area: val; }
  .lb-table td.lb-change { grid-area: change; justify-self: end; }
  .lb-table td.lb-detail { grid-area: detail; min-width: 0; }
  .lb-table td.lb-date { grid-area: date; display: block; justify-self: end; font-size: 12px; }
  .lb-table td.lb-change:empty { display: none; }
  .lb-me-in { font-size: 13px; gap: 6px 10px; }
  .lb-me-in .lb-av, .lb-me-name { display: none; }
  .lb-me-hint { flex-basis: 100%; }
  body.lb-has-me { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-step, .lb-me, .lb-row.is-flash td { animation: none; }
  .lb-tab, .lb-period button, .lb-pg, .lb-board .lb-podium, .lb-board .lb-rest { transition: none; }
}
@media (forced-colors: active) {
  .lb-tab[aria-selected="true"], .lb-period button[aria-pressed="true"], .lb-pg[aria-current="page"] { outline: 2px solid Highlight; outline-offset: 1px; }
  .lb-card { border-top-color: CanvasText; }
}
/* ===== РЕЙТИНГИ — конец блока ===== */

/* ---------- утилиты ---------- */
.tool-note { color: var(--text-dim); font-size: 14px; border-left: 3px solid var(--accent); border-radius: 2px; padding: 2px 0 2px 14px; margin-bottom: 28px; max-width: 80ch; }
table.edit { width: 100%; border-collapse: collapse; font-size: 13px; }
table.edit th { text-align: left; color: var(--text-faint); font-weight: 500; font-size: 12px; padding: 0 4px 8px; }
table.edit td { padding: 3px 4px; }
table.edit input, table.edit select, .field input, .field select { width: 100%; }
.field input[type="checkbox"] { width: 16px; flex: none; } /* чекбокс в поле — своего размера, рядом с подписью */
table.edit td.num { width: 110px; }
table.edit td.act { width: 1%; white-space: nowrap; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
@media (max-width: 760px) { .fields { grid-template-columns: 1fr !important; } }
.result-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 20px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-1);
}
.result-grid > div { padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.result-grid > p { grid-column: 1 / -1; padding: 14px 16px; } /* "Пока пусто." в трекере */
.result-grid .k { font-size: 12px; color: var(--text-dim); }
.result-grid .v { font-family: var(--font-num); font-weight: 600; font-size: 22px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.msg-list { font-size: 13px; margin: 8px 0 16px; }
.msg-list .err { color: var(--danger); }
.msg-list .warn { color: var(--warning); }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; }

/* ---------- прочее ---------- */
.empty-state { color: var(--text-dim); padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* тосты: карточка с цветной кромкой */
.toast {
  position: fixed; bottom: 20px; right: 20px; max-width: 380px; z-index: 50;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  padding: 12px 16px; font-size: 14px; border-radius: calc(12px * var(--round)); box-shadow: var(--shadow-2);
  animation: toast-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.toast.success { background: linear-gradient(90deg, color-mix(in srgb, var(--success-fill) 9%, transparent), transparent 45%), var(--surface); border-left-color: var(--success-fill); }
.toast.error { background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 9%, transparent), transparent 45%), var(--surface); border-left-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* модальное окно */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--backdrop); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 180ms ease-out;
}
.modal {
  position: relative; width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line);
  padding: 28px; border-radius: calc(18px * var(--round)); box-shadow: var(--shadow-pop);
  animation: modal-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.modal h2 { margin-bottom: 16px; }
.modal-close { position: absolute; top: 14px; right: 14px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs button {
  background: none; border: 0; padding: 0 0 10px; color: var(--text-dim); font: 500 14px var(--font-body);
  margin-bottom: -1px; cursor: pointer; transition: color 150ms, box-shadow 150ms;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-dim); }
.auth-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-faint); font-size: 12px; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; border-top: 1px solid var(--line); }

/* всплывающая подсказка: data-tip="текст" (дублирует aria-label, на тач-экранах не показывается) */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 10px); left: 50%; z-index: 45;
  transform: translate(-50%, -4px); opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 7px 10px; border-radius: var(--radius-ui); font: 500 12px/1 var(--font-body); letter-spacing: 0;
  color: var(--tip-fg); background: var(--tip-bg); border: 1px solid var(--tip-border); box-shadow: var(--shadow-2);
  transition: opacity 150ms, transform 150ms;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { [data-tip]::after { display: none; } }

/* звук и тема в навбаре: кнопки-иконки без рамки, пока не наведены; звук — "Без звука" + стрелка с панелью громкости (nav.js) */
.sfx-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.navbar .sfx-toggle:not(:hover):not(:focus-visible), .navbar .theme-toggle:not(:hover):not(:focus-visible) { border-color: transparent; background: transparent; }
.sfx-toggle[aria-pressed="true"] { color: var(--text-faint); }
.sfx-ctl { position: relative; display: inline-flex; align-items: center; }
.sfx-more { width: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.navbar .sfx-more:not(:hover):not(:focus-visible):not([aria-expanded="true"]) { border-color: transparent; background: transparent; }
.sfx-more svg { transition: transform 150ms; }
.sfx-more[aria-expanded="true"] { color: var(--accent); }
.sfx-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.sfx-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 45; width: 250px;
  display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(12px * var(--round)); box-shadow: var(--shadow-2);
  animation: pop-in 160ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.sfx-pop[hidden] { display: none; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
.sfx-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-dim); }
.sfx-row output { color: var(--text); font-size: 14px; }
.sfx-pop input[type="range"] {
  width: 100%; height: 20px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
  accent-color: var(--accent); cursor: pointer;
}
.sfx-pop input[type="range"]:focus { box-shadow: none; }
.sfx-pop input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sfx-hover-opt { align-items: flex-start; font-size: 12px; line-height: 1.35; padding-top: 10px; border-top: 1px solid var(--line); }
.sfx-hover-opt input { flex-shrink: 0; margin: 0; }
@media (max-width: 560px) { .sfx-pop { right: auto; left: 0; } }
.sfx-pop.flip { right: auto; left: 0; }

/* настройки в навбаре (#nav-prefs из nav.js): тема рядом со звуком; язык — только в профиле (раздел "Язык") */
.nav-prefs { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* тема: солнце (сейчас тёмная) / луна (сейчас светлая); aria-pressed="true" — светлая включена */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.theme-toggle svg { transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.theme-toggle:hover svg, .theme-toggle:focus-visible svg { transform: rotate(-20deg); }

/* микро-взаимодействия */
.module .idx, .feature .idx { transition: color 200ms; }

/* появление карточек в сетке — лёгкая волна */
.cards > .icard, .showcase > * { animation: rise-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cards > .icard:nth-child(2), .showcase > *:nth-child(2) { animation-delay: 30ms; }
.cards > .icard:nth-child(3), .showcase > *:nth-child(3) { animation-delay: 60ms; }
.cards > .icard:nth-child(4), .showcase > *:nth-child(4) { animation-delay: 90ms; }
.cards > .icard:nth-child(5), .showcase > *:nth-child(5) { animation-delay: 120ms; }
.cards > .icard:nth-child(n+6), .showcase > *:nth-child(n+6) { animation-delay: 150ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }

/* =====================================================================
   Главная: витрина продукта — герой (заголовок + кейс с картами редких предметов), цифры,
   тикер, кейсы, "Как это работает", "Самые редкие"
   ===================================================================== */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; min-height: 500px; }
.hero h1 { font-size: 53px; line-height: 1.08; max-width: 24ch; text-wrap: balance; }
.hero h1 .accent { color: var(--accent); }
.hero .lede { margin-top: 20px; font-size: 18px; max-width: 52ch; }
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

/* витрина без рамки: самый дорогой кейс со свечением его цвета (таблица [data-case] — в разделе каталога) */
.hero-visual { --case: var(--case-glow, var(--case-c, var(--accent))); position: relative; height: 480px; }
.hero-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hero-stage::before {
  content: ''; position: absolute; inset: 6% 4%; pointer-events: none; filter: blur(18px);
  background: radial-gradient(ellipse 46% 44% at 50% 52%, color-mix(in srgb, var(--case) 48%, transparent), transparent 72%);
}
.hero-case-img {
  position: relative; width: 320px; max-width: 70%; height: auto; object-fit: contain; display: block;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.55));
  animation: float 6s ease-in-out infinite;
}
/* три самых редких предмета кейса веером по углам: стекло (blur), имя цветом редкости, лёгкое покачивание */
.hero-fan { display: contents; }
.fan-card {
  --rc: var(--r-covert); --tilt: 0deg;
  position: absolute; z-index: 2; width: 150px; padding: 8px 10px 10px;
  border-radius: var(--radius-panel); border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  background: color-mix(in srgb, var(--surface) 52%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--shadow-2);
  animation: fan-sway 7s ease-in-out infinite;
}
.fan-card img, .fan-card > svg { width: 100%; display: block; aspect-ratio: 2 / 1; object-fit: contain; }
.fan-card .name { font-family: var(--font-num); font-weight: 600; font-size: 13px; color: var(--rc); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fan-card .val { font-size: 13px; color: var(--text); }
.fan-card.f1 { left: 0; top: 10px; --tilt: -6deg; animation-delay: -1s; }
.fan-card.f2 { right: 0; top: 0; --tilt: 5deg; animation-delay: -3.5s; }
.fan-card.f3 { right: 18px; bottom: 14px; --tilt: -3deg; animation-delay: -2s; }
@keyframes fan-sway {
  0%, 100% { transform: rotate(var(--tilt)) translateY(0); }
  50% { transform: rotate(calc(var(--tilt) + 2deg)) translateY(-8px); }
}
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 12px; }
  .hero h1 { font-size: 42px; }
  /* на телефоне и планшете витрина под текстом, карточки — рядом под кейсом */
  .hero-visual { height: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .hero-stage { position: relative; width: 100%; height: 300px; }
  .hero-fan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 520px; }
  .fan-card { position: static; width: auto; --tilt: 0deg; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: 34px; }
  .hero .lede { font-size: 16px; }
  .hero-stage { height: 230px; }
  .hero-case-img { width: 240px; }
  .fan-card { padding: 6px 7px 8px; }
  .fan-card .name, .fan-card .val { font-size: 11px; }
}

/* полоса цифр под первым экраном */
.home-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 16px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.home-stats[hidden] { display: none; }
.home-stat { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; border-left: 1px solid var(--line); }
.home-stat:first-child { border-left: 0; padding-left: 0; }
.home-stat .num { font-size: 34px; line-height: 1; color: var(--text); }
.home-stat:first-child .num { color: var(--accent); }
.home-stat .label { font-size: 13px; color: var(--text-dim); }
@media (max-width: 760px) {
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-stat { padding: 16px 0 16px 16px; }
  .home-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .home-stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .home-stat .num { font-size: 28px; }
}

/* тикер последних дропов */
.ticker-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ticker-bg); padding: 14px 0 16px; }
.ticker-head { max-width: var(--max); margin: 0 auto 10px; padding: 0 var(--gutter); display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.ticker-title { font-family: var(--font-display); font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.ticker-note { font-size: 12px; color: var(--text-faint); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-fill) 18%, transparent); animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.45; } }
.ticker { display: flex; gap: 8px; overflow: hidden; padding: 0 var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.ticker-item {
  --rc: var(--text-faint);
  flex: 0 0 150px; width: 150px; overflow: hidden; padding: 6px 6px 9px; background: var(--surface);
  border: 1px solid var(--line); border-bottom: 3px solid var(--rc); border-radius: calc(10px * var(--round));
}
.ticker-item img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; display: block; border-radius: calc(6px * var(--round)); }
.ticker-item .what { font-family: var(--font-num); font-weight: 600; font-size: 13px; color: var(--rc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; padding: 0 4px; }
.ticker-item .where { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.ticker-item .val { font-family: var(--font-num); font-size: 12px; margin-top: 2px; padding: 0 4px; }
.ticker-item.fresh { animation: ticker-in 650ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes ticker-in {
  0% { flex-basis: 0; width: 0; padding-left: 0; padding-right: 0; opacity: 0; }
  60% { flex-basis: 150px; width: 150px; padding-left: 6px; padding-right: 6px; opacity: 0.6; }
  100% { opacity: 1; }
}

/* разделы главной */
.home-section { margin-top: 64px; }

/* "Как это работает": три шага, каждый ведёт на свою страницу */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.how-steps li { position: relative; display: flex; }
.how-steps li:not(:last-child)::after { /* стрелка к следующему шагу */
  content: '→'; position: absolute; right: -16px; top: 50%; transform: translate(50%, -50%);
  font-family: var(--font-num); font-size: 20px; color: var(--text-faint); pointer-events: none;
}
.how-step {
  flex: 1; display: block; padding: 22px; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.how-step:hover, .how-step:focus-visible { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.how-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.how-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.how-num { display: block; margin-top: 14px; font-weight: 600; font-size: 13px; color: var(--accent); }
.how-step h3 { font-size: 19px; margin: 4px 0 6px; }
.how-step p { color: var(--text-dim); font-size: 14px; margin: 0; }
@media (max-width: 760px) {
  .how-steps { grid-template-columns: 1fr; gap: 12px; }
  .how-steps li:not(:last-child)::after { display: none; }
  .how-step { padding: 18px; }
}

/* "Самые редкие": горизонтальный ряд, на телефоне листается свайпом */
.rare-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px 2px 12px;
  scrollbar-width: thin;
}
.rare-row > .icard { scroll-snap-align: start; }
@media (max-width: 560px) { .rare-row { grid-auto-columns: 168px; } }

/* ---------- профиль: баннер — тёмная сцена (фоны bg-* нарисованы тёмными) ---------- */
.profile-banner {
  position: relative; min-height: 240px; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  border-radius: calc(20px * var(--round)); overflow: hidden; box-shadow: var(--shadow-2); transition: background 400ms;
}
.profile-id { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; }
.profile-id h1 { font-size: 36px; }
.profile-bio { color: var(--text-dim); max-width: 60ch; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.badge-chip { --bc: var(--accent); display: inline-flex; align-items: center; gap: 7px; font-size: 12px; padding: 5px 10px; border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--bc) 55%, var(--line)); background: color-mix(in srgb, var(--bc) 12%, transparent); }
.badge-chip i { width: 8px; height: 8px; background: var(--bc); transform: rotate(45deg); }

.avatar-frame { position: relative; width: 112px; height: 112px; padding: 3px; flex-shrink: 0; }
.avatar-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.avatar-frame.small { width: 64px; height: 64px; }
.frame-none { padding: 0; }
.frame-line { background: var(--line-strong); }
.frame-accent { background: var(--grad-accent); }
.frame-classified { background: var(--r-classified); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.frame-classified img { clip-path: inherit; }
.frame-covert { background: var(--r-covert); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.frame-covert img { clip-path: inherit; }
.frame-gold { background: linear-gradient(135deg, #b88a00, #ffd84d, #fff6b0, #ffd84d, #b88a00); background-size: 300% 300%;
  animation: gold-shift 5s ease-in-out infinite; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.frame-gold img { clip-path: inherit; }
@keyframes gold-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.bg-grid { background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 24px 24px, var(--surface); }
.bg-night { background: radial-gradient(ellipse 80% 120% at 80% 0%, rgba(61, 120, 255, 0.30), transparent 60%), radial-gradient(ellipse 60% 90% at 10% 100%, rgba(109, 40, 255, 0.28), transparent 60%), var(--surface); }
.bg-ashfall { background: radial-gradient(ellipse 70% 120% at 85% 100%, rgba(255, 90, 31, 0.32), transparent 60%), linear-gradient(160deg, #1a1210, #131316 60%); }
.bg-deepwater { background: radial-gradient(ellipse 80% 120% at 20% 0%, rgba(31, 122, 140, 0.4), transparent 60%), linear-gradient(200deg, #061a26, #131316 70%); }
.bg-neon { background: radial-gradient(ellipse 60% 110% at 90% 10%, rgba(255, 43, 214, 0.3), transparent 60%), radial-gradient(ellipse 60% 110% at 10% 100%, rgba(0, 229, 255, 0.24), transparent 60%), #0e0a18; }
.bg-frontier { background: radial-gradient(ellipse 80% 120% at 70% 0%, rgba(212, 160, 23, 0.34), transparent 60%), linear-gradient(180deg, #1c160c, #131316 70%); }

.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cos-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(12px * var(--round)); padding: 12px; cursor: pointer; text-align: left; color: var(--text);
  font: inherit; box-shadow: var(--shadow-1); transition: border-color 150ms, transform 150ms, box-shadow 150ms;
}
.cos-tile:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-2px); }
.cos-tile.chosen { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.cos-tile.locked { opacity: 0.5; cursor: not-allowed; }
.cos-preview { height: 72px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.cos-preview > img { height: 72px; width: 72px; object-fit: cover; }
.bg-swatch { width: 100%; height: 64px; border-radius: calc(8px * var(--round)); }
.cos-name { font-size: 13px; }
.cos-lock { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

/* ---------- магазин оформления (profile.html, server/cosmetics.js): только внешний вид ----------
   Рамки и фоны магазина — фиксированные цвета: баннер профиля — тёмная сцена в обеих темах. */
.frame-steel { background: linear-gradient(135deg, #5d6475, #c9d1de 45%, #6c7486 55%, #aab3c2); }
.frame-mint, .frame-mint img { border-radius: calc(18px * var(--round)); }
.frame-mint { background: linear-gradient(135deg, #1fbf91, #9ff5d8 55%, #2bd4a4); }
.frame-ember { background: linear-gradient(160deg, #ff3d00, #ffb347 50%, #ff5e3a);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.frame-ember img { clip-path: inherit; }
.frame-circuit { padding: 4px; background: repeating-linear-gradient(45deg, #22e5ff 0 6px, #0b1a2a 6px 12px); }
.frame-prism, .frame-prism img { border-radius: 50%; }
.frame-prism { background: conic-gradient(from 0deg, #ff4d6d, #ffd166, #06d6a0, #4cc9f0, #9b5de5, #ff4d6d); }
.frame-aurora, .frame-aurora img { border-radius: calc(24px * var(--round)); }
.frame-aurora { padding: 4px; background: linear-gradient(120deg, #00f5a0, #00d9f5, #7b61ff, #00f5a0); background-size: 300% 300%;
  animation: gold-shift 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .frame-aurora { animation: none; } }

.bg-dusk { background: radial-gradient(ellipse 90% 120% at 85% 0%, rgba(255, 122, 89, 0.30), transparent 60%), linear-gradient(180deg, #2a1838, #121220 75%); }
.bg-forest { background: radial-gradient(ellipse 80% 100% at 20% 0%, rgba(80, 200, 120, 0.22), transparent 60%), linear-gradient(170deg, #0f2219, #0d1412 70%); }
.bg-carbon { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 4px, transparent 4px 8px),
  repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.035) 0 4px, transparent 4px 8px), linear-gradient(180deg, #1c1d22, #0e0f12); }
.bg-synthwave { background: radial-gradient(circle at 82% 28%, rgba(255, 94, 160, 0.42) 0 56px, transparent 57px),
  repeating-linear-gradient(90deg, rgba(255, 43, 214, 0.16) 0 1px, transparent 1px 40px) bottom / 100% 38% no-repeat,
  linear-gradient(180deg, #1a0b2e, #0d0718); }
.bg-galaxy { background: radial-gradient(1.5px 1.5px at 18% 28%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 64% 18%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 86% 62%, #cfe3ff 50%, transparent 51%), radial-gradient(1px 1px at 40% 70%, #fff 50%, transparent 51%),
  radial-gradient(ellipse 70% 90% at 75% 20%, rgba(155, 93, 229, 0.35), transparent 60%), radial-gradient(ellipse 60% 80% at 15% 90%, rgba(76, 201, 240, 0.16), transparent 60%), #0a0818; }
.bg-harvest { background: radial-gradient(circle at 85% 25%, rgba(255, 166, 43, 0.40) 0 44px, transparent 45px),
  radial-gradient(ellipse 90% 70% at 50% 115%, rgba(255, 120, 30, 0.20), transparent 60%), linear-gradient(180deg, #1d1230, #120c14 70%); }

/* Цветной ник: цвета приходят из данных (art.dark / art.light, #rrggbb) CSS-переменными.
   Тёмная тема и тёмная сцена баннера — --np-d*, светлая тема — --np-l*; каждый цвет текстом >= 4.5:1 (test/cosmetics.test.js). */
.np { color: var(--np-d1); }
.np-grad { background-image: linear-gradient(90deg, var(--np-d1), var(--np-d2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:root[data-theme="light"] .np { color: var(--np-l1); }
:root[data-theme="light"] .np-grad { background-image: linear-gradient(90deg, var(--np-l1), var(--np-l2)); }
:root[data-theme="light"] .profile-banner .np { color: var(--np-d1); }
:root[data-theme="light"] .profile-banner .np-grad { background-image: linear-gradient(90deg, var(--np-d1), var(--np-d2)); }
@media (forced-colors: active) { .np, .np-grad { color: CanvasText; -webkit-text-fill-color: currentColor; background: none; } }

.shop-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.shop-balance { font-size: 14px; color: var(--text-dim); }
.shop-balance b { font-family: var(--font-num); color: var(--text); font-weight: 600; }
#editor .tabs { overflow-x: auto; scrollbar-width: none; }
#editor .tabs button { white-space: nowrap; }
.shop-grid .cos-tile { cursor: default; display: flex; flex-direction: column; gap: 6px; }
.shop-grid .cos-tile:hover { transform: none; }
.shop-grid .cos-tile.chosen { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.shop-grid .cos-tile.locked { opacity: 1; }
.shop-grid .cos-tile.locked .cos-preview { opacity: 0.55; }
.shop-grid .cos-preview { margin-bottom: 4px; position: relative; }
.cos-preview .cos-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cos-preview .np-sample { font-weight: 600; font-size: 17px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tier-chip, .ltd-chip { font-size: 11px; line-height: 1.3; padding: 2px 7px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); }
.tier-chip { color: var(--tc, var(--text-dim)); border-color: color-mix(in srgb, var(--tc, var(--line-strong)) 45%, var(--line)); }
.tier-common { --tc: var(--r-consumer); }
.tier-rare { --tc: var(--r-milspec); }
.tier-epic { --tc: var(--r-classified); }
.tier-legendary { --tc: var(--r-gold); }
.ltd-chip { color: var(--text-dim); }
.cos-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.cos-price { font-family: var(--font-num); font-weight: 600; font-size: 14px; }
.cos-state { font-size: 12px; color: var(--text-dim); }
.cos-foot .btn { padding: 7px 12px; font-size: 13px; }
.shop-confirm p { margin: 0 0 8px; }
.shop-confirm .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }


/* ---------- стоимость инвентаря Steam ----------
   --c — цвет редкости из Steam (светлые тона под тёмный фон): только полоса снизу, точка чипа и
   подсветка тёмного окна картинки; название — обычным текстом */
.sv-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: end; padding-bottom: 32px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
@media (max-width: 960px) { .sv-hero { grid-template-columns: 1fr; } }
.sv-form { display: flex; flex-direction: column; gap: 10px; }
.sv-input {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 90px auto; align-items: center; gap: 0; overflow: hidden;
  border: 1px solid var(--field-border); border-radius: calc(12px * var(--round)); background: var(--field-bg); box-shadow: var(--shadow-1);
  transition: border-color 150ms, box-shadow 150ms;
}
.sv-input:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.sv-input-icon { color: var(--text-faint); padding: 0 6px 0 14px; display: flex; }
.sv-input input { border: 0; border-radius: 0; background: transparent; padding: 16px 10px; font-size: 15px; outline: none; }
.sv-input select { border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; height: 100%; }
.sv-input input:focus, .sv-input select:focus { box-shadow: none; } /* рамку рисует сама .sv-input */
.sv-input .btn { border-radius: 0; height: 100%; box-shadow: none; }
@media (max-width: 640px) { .sv-input { grid-template-columns: auto minmax(0, 1fr); } .sv-input select, .sv-input .btn { grid-column: 1 / -1; } .sv-input select { border-left: 0; border-top: 1px solid var(--line); padding: 10px; } }
.sv-quick { display: flex; gap: 8px; flex-wrap: wrap; }

.sk { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hi) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: calc(10px * var(--round)); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-total { height: 64px; width: 320px; max-width: 80%; margin-bottom: 18px; }
.sk-bar { height: 8px; margin-bottom: 24px; }
.sk-card { height: 190px; }
.sv-error { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

.sv-section { margin-top: 32px; }
.sv-summary { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.sv-big { font-size: 56px; line-height: 1.05; margin-top: 4px; }
.sv-kpis { display: flex; gap: 28px; flex-wrap: wrap; }
.sv-kpis .num { font-size: 20px; margin-top: 2px; }
.sv-rarity-bar { display: flex; gap: 2px; height: 8px; margin-bottom: 14px; }
.sv-rarity-bar span { display: block; min-width: 3px; border-radius: 3px; }
.sv-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sv-chip {
  --c: #7d86a3;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--surface); color: var(--text);
  border: 1px solid var(--field-border); border-radius: var(--radius-pill); font: 13px var(--font-body); cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms;
}
.sv-chip i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent); }
.sv-chip:hover { border-color: var(--accent); }
.sv-chip.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sv-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.sv-item {
  --c: #7d86a3;
  display: flex; flex-direction: column; gap: 3px; padding: 8px 8px 12px; background: var(--surface);
  border: 1px solid var(--line); border-bottom: 3px solid var(--c); border-radius: calc(12px * var(--round)); box-shadow: var(--shadow-1);
  transition: transform 200ms, box-shadow 200ms;
  animation: rise-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.sv-item > :not(.sv-img) { padding: 0 4px; }
.sv-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.sv-img {
  position: relative; height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; border-radius: calc(8px * var(--round));
  background: radial-gradient(ellipse 60% 70% at 50% 60%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%),
    linear-gradient(180deg, var(--stage-2), var(--stage));
}
.sv-img img { max-height: 90px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.sv-noimg { width: 60px; height: 30px; border: 1px dashed var(--line-strong); border-radius: 4px; }
.sv-qty { position: absolute; top: 6px; right: 8px; font-size: 12px; color: var(--text-dim); }
.sv-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-price { display: flex; gap: 6px; align-items: baseline; margin-top: 4px; }
.sv-account {
  padding: 28px; border: 1px solid var(--line); border-radius: calc(18px * var(--round)); box-shadow: var(--shadow-1);
  background: radial-gradient(ellipse 60% 120% at 0% 0%, var(--accent-soft), transparent 70%), var(--surface);
}
.sv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.sv-part { padding: 14px 16px; border: 1px solid var(--line); border-radius: calc(12px * var(--round)); background: var(--bg); }
.sv-part-v { font-size: 26px; margin: 4px 0; }
.warn-note { color: var(--warning); margin-top: 6px; }

/* ---------- автодополнение и сравнение цен ---------- */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 4px 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(12px * var(--round)); max-height: 360px; overflow-y: auto;
  box-shadow: var(--shadow-2); animation: fade-in 120ms ease-out;
}
.ac-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; cursor: pointer; font-size: 14px; }
.ac-list li b { color: var(--accent); font-weight: 600; }
.ac-list li.active, .ac-list li:hover { background: var(--accent-soft); }
.ac-list li.active { box-shadow: inset 3px 0 0 var(--accent); }
.ac-empty { cursor: default !important; }
/* ---------- [compare] Сравнение цен (/pages/tools/compare.html): площадки, таблица цен, лучшие цены ----------
   Только токены темы (тёмная и светлая). Недоступная площадка — пунктир без заливки (текст сохраняет контраст AA),
   лучшая покупка — зелёная полоса и цена, лучшая продажа — акцентом. До 760px таблица — карточки
   (подпись столбца из data-label), без горизонтальной прокрутки на 375px. */
.cmpx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cmpx-sources { margin: -8px 0 24px; }
.cmpx-sub { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 10px; }
.cmpx-chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cmpx-chip {
  --st: var(--success);
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; max-width: 100%; padding: 6px 12px; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface);
}
.cmpx-chip b { font-weight: 600; color: var(--text); }
.cmpx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st); flex: none; }
.cmpx-chip-state, .cmpx-chip-fee { color: var(--text-dim); }
.cmpx-chip-fee::before { content: '·'; margin-right: 7px; }
.cmpx-chip.is-needs_key, .cmpx-chip.is-cooldown { --st: var(--warning); border-style: dashed; }
.cmpx-chip.is-disabled { --st: var(--text-faint); border-style: dashed; background: transparent; }
.cmpx-title { font-size: 28px; margin: 6px 0 18px; overflow-wrap: anywhere; }
.cmpx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cmpx-kpi {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-1);
}
.cmpx-kpi b { font-size: 26px; line-height: 1.15; }
.cmpx-kpi .small { overflow-wrap: anywhere; }
.cmpx-kpi.is-buy { border-color: color-mix(in srgb, var(--success) 50%, var(--line)); }
.cmpx-kpi.is-buy b { color: var(--success); }
.cmpx-kpi.is-net { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.cmpx-kpi.is-net b { color: var(--accent); }
.cmpx-empty { margin-bottom: 16px; }
.cmpx-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.cmpx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmpx-table thead th {
  padding: 12px 14px; text-align: left; white-space: nowrap; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.cmpx-table td, .cmpx-table tbody th { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.cmpx-table tbody tr:first-child > * { border-top: 0; }
.cmpx-table small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.cmpx-market { font-weight: 400; min-width: 180px; }
.cmpx-name { display: block; font-weight: 600; color: var(--text); }
.cmpx-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.cmpx-meta.warn-note { color: var(--warning); }
.cmpx-buy b, .cmpx-net b { font-size: 16px; }
.cmpx-row.is-best-buy > :first-child { box-shadow: inset 3px 0 0 var(--success); }
.cmpx-row.is-best-buy .cmpx-buy b { color: var(--success); }
.cmpx-row.is-best-net .cmpx-net b { color: var(--accent); }
.cmpx-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; vertical-align: 2px; white-space: nowrap; }
.cmpx-tag.is-buy { color: var(--success); background: color-mix(in srgb, var(--success-fill) 14%, transparent); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); }
.cmpx-tag.is-net { color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.cmpx-row.is-off .cmpx-name { color: var(--text-dim); }
.cmpx-why { color: var(--text-dim); font-size: 13px; }
.cmpx-row.is-error .cmpx-why { color: var(--warning); }
.cmpx-vol { color: var(--text-dim); white-space: nowrap; }
.cmpx-link { text-align: right; white-space: nowrap; }
.cmpx-open {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 12px; font-size: 13px; font-weight: 600;
  color: var(--text); text-decoration: none; border: 1px solid var(--field-border); border-radius: calc(10px * var(--round));
  transition: border-color 150ms, color 150ms;
}
.cmpx-open:hover, .cmpx-open:focus-visible { border-color: var(--accent); color: var(--accent); }
.cmpx-open:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cmpx-retry { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.cmpx-note { margin-top: 10px; }
.cmpx-sk { height: 320px; }
@media (max-width: 760px) {
  .cmpx-table-wrap { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .cmpx-table, .cmpx-table tbody { display: block; }
  .cmpx-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmpx-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 14px; margin-bottom: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-1);
  }
  .cmpx-table tr > * { border-top: 0 !important; padding: 0; min-width: 0; }
  .cmpx-table tbody th, .cmpx-why, .cmpx-link { grid-column: 1 / -1; }
  .cmpx-market { min-width: 0; }
  .cmpx-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim);
  }
  .cmpx-row.is-best-buy { box-shadow: inset 3px 0 0 var(--success), var(--shadow-1); }
  .cmpx-row.is-best-buy > :first-child { box-shadow: none; }
  .cmpx-row.is-off { border-style: dashed; background: transparent; box-shadow: none; }
  .cmpx-tag { margin: 4px 0 0; }
  .cmpx-vol { white-space: normal; }
  .cmpx-link { text-align: left; }
  .cmpx-open { width: 100%; }
}
/* ---------- [/compare] ---------- */

/* ---------- инвентарь: фильтр по редкости слева, компактная сортировка справа (sortSelectHtml из ui.js) ---------- */
.inv-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.inv-toolbar .filters { margin-bottom: 0; flex: 1 1 320px; min-width: 0; }
.inv-sort[hidden] { display: none; }
.item-sort { padding: 7px 8px; font-size: 13px; cursor: pointer; }
@media (max-width: 560px) { .inv-sort, .inv-sort .item-sort { width: 100%; } }

/* ---------- инвентарь: копии одного предмета — одна карточка "стопкой" (inventory.html, groupCopies) ----------
   .inv-stack — край второй карточки под низом (цвет обводки — от редкости), .inv-count — счётчик ×N над артом
   (для скринридера — текст .inv-sr), .inv-actions — "Продать за …" и "Продать все (×N)" с суммой второй строкой.
   Только токены темы: одинаково читается в тёмной и светлой; без анимаций. */
.icard.inv-stack::before {
  content: ''; position: absolute; z-index: -1; left: 8px; right: 8px; bottom: -5px; height: 24px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--rc) 40%, var(--line)); border-top: 0; border-radius: 0 0 8px 8px;
  background: var(--surface-2);
}
.inv-count {
  position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 8px; border-radius: var(--radius-pill);
  font: 600 12px/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--rc) 50%, var(--line)); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}
.inv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.inv-actions { display: flex; flex-direction: column; gap: 6px; }
.icard .actions .inv-sell-all { flex-direction: column; gap: 3px; line-height: 1.15; }
.inv-sell-total { font-size: 11px; font-weight: 500; color: var(--text-dim); }
/* контракты: сортировка в ряду фильтров (tradeup.html); у гостя слот пустой и не занимает место */
.tradeup-sort-slot { display: contents; }

/* ---------- страница "Проверить честность" ---------- */
.fv-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--text-dim); font-size: 14px; }
.fv-steps b { color: var(--text); font-weight: 500; }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; font-size: 13px; color: var(--text-dim); }
.kv .mono, .kv .num { color: var(--text); }
.fv-form { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.fv-form label { font-size: 12px; color: var(--text-dim); }
.fv-inline { display: flex; gap: 8px; }
.fv-inline input { flex: 1; min-width: 0; }
.fv-cards { margin-top: 14px; }
.fv-rule { margin-top: 12px; }
.draw-list { border-top: 1px solid var(--line); }
.draw-row {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center;
  padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 14px; transition: background 150ms;
}
.draw-row:hover, .draw-row:focus-visible { background: var(--accent-soft); }
.draw-row .tag { text-align: center; }
.draw-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .draw-row { grid-template-columns: 88px minmax(0, 1fr); }
  .draw-row > :nth-child(n+3) { grid-column: 2; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv > :nth-child(even) { margin-bottom: 8px; }
}
.check-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.check-row:first-of-type { border-top: 0; }
.check-ok, .check-bad { font: 600 18px/1.2 var(--font-num); }
.check-ok { color: var(--success); }
.check-bad { color: var(--danger); }
.fv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- утилита: стоимость аккаунта (tools/steam-account.html) ---------- */
/* Цвета частей аккаунта (--pc): игры, CS2, Dota 2, Rust, TF2, прочее — только полосы, точки и рамки */
.sa-c-games { --pc: var(--accent); }
.sa-c-cs2 { --pc: var(--r-gold-fill); }
.sa-c-570 { --pc: var(--r-covert); }
.sa-c-252490 { --pc: #e8590c; }
.sa-c-440 { --pc: var(--r-restricted); }
.sa-c-apps { --pc: var(--r-milspec); }
.sa-hero { align-items: start; }
.sa-key-note[hidden] { display: none; }
.sa-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sa-opts { display: grid; gap: 10px; min-width: 0; margin: 4px 0 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-1); }
.sa-opts legend { padding: 0 6px; }
/* Переключатель: настоящий checkbox (role=switch) поверх дорожки — клавиатура и скринридер работают как обычно */
.sa-switch { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; cursor: pointer; }
.sa-switch input { position: absolute; left: 0; top: 50%; width: 40px; height: 22px; margin: -11px 0 0; opacity: 0; cursor: pointer; }
.sa-track { position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--track); border: 1px solid var(--field-border); transition: background 160ms, border-color 160ms; }
.sa-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-faint); transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background 160ms;
}
.sa-switch input:checked + .sa-track { background: var(--accent); border-color: var(--accent); }
.sa-switch input:checked + .sa-track::after { transform: translateX(18px); background: var(--on-accent); } /* на акценте: белый / тёмный */
.sa-switch input:focus-visible + .sa-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.sa-switch input:disabled ~ * { opacity: 0.45; }
.sa-switch-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sa-switch-text b { font-weight: 500; font-size: 14px; }
.sa-switch-sm { grid-template-columns: 34px minmax(0, 1fr); font-size: 13px; color: var(--text-dim); }
.sa-switch-sm input, .sa-switch-sm .sa-track { width: 34px; height: 18px; }
.sa-switch-sm input { margin-top: -9px; }
.sa-switch-sm .sa-track::after { width: 10px; height: 10px; }
.sa-switch-sm input:checked + .sa-track::after { transform: translateX(16px); }

.sa-apps, .sa-games-opts { display: flex; flex-wrap: wrap; gap: 6px 8px; padding-left: 52px; transition: opacity 160ms; }
.sa-apps.off, .sa-games-opts.off { opacity: 0.45; }
.sa-app { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--field-border); border-radius: var(--radius-pill); background: var(--control-bg); font-size: 13px; cursor: pointer; }
.sa-app:has(input:checked) { border-color: var(--pc, var(--accent)); box-shadow: inset 0 0 0 1px var(--pc, var(--accent)); }
.sa-app input { accent-color: var(--accent); }
.sa-games-opts { flex-direction: column; gap: 8px; }
.sa-seg { display: inline-flex; flex-wrap: wrap; width: fit-content; max-width: 100%; border: 1px solid var(--field-border); border-radius: calc(10px * var(--round)); overflow: hidden; }
.sa-seg label { position: relative; display: flex; cursor: pointer; }
.sa-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sa-seg label > span { padding: 7px 12px; font-size: 13px; color: var(--text-dim); transition: background 150ms, color 150ms; }
.sa-seg input:checked + span { background: var(--accent); color: var(--on-accent); }
.sa-seg input:checked + span .dim { color: color-mix(in srgb, var(--on-accent) 88%, var(--accent)); } /* пояснение в выбранном сегменте: >= 4.9:1 на акценте */
.sa-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
/* регион из профиля Steam: откуда взят регион цен игр (валюта отображения — отдельный выбор) */
.sa-region-why { margin-top: 6px; color: var(--text-dim); }
.sa-approx { color: var(--text-dim); font-size: 0.72em; font-weight: 400; white-space: nowrap; }
.sa-table .sa-approx { display: block; font-size: 12px; }
.sa-notsold { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: calc(10px * var(--round)); color: var(--text-dim); overflow-wrap: anywhere; }
.sa-notsold b { color: var(--text); font-weight: 500; }
.sa-key-note { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line)); border-radius: calc(10px * var(--round)); background: color-mix(in srgb, var(--warning) 9%, var(--surface)); color: var(--text-dim); }
.sa-key-note b { color: var(--warning); font-weight: 600; }
.sa-key-note code { font-family: var(--font-mono); color: var(--text); }

/* результат: кто, итог, доли частей */
.sa-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* причины "почему не посчитано": заголовок, к чему относится (через разделитель) и пояснение — каждое отдельно */
.sa-issues { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.sa-issue { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface-2); }
.sa-issue-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.sa-issue-parts { color: var(--text-dim); }
.sa-issue-parts::before { content: '·'; margin-right: 8px; color: var(--text-faint); }
.sa-issue-text, .sa-issue .sa-howto { margin: 6px 0 0; color: var(--text-dim); }
.sa-issue .sa-howto b { color: var(--text); font-weight: 600; }
/* откуда регион цен игр и пустые инвентари, которые Steam не отдал */
.sa-notes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; color: var(--text-dim); }
.sa-region { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sa-region .lp, .sa-region select { min-width: 220px; }
.sa-avatar { width: 56px; height: 56px; flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: calc(10px * var(--round)); object-fit: cover; }
.sa-avatar-empty { background: linear-gradient(135deg, var(--surface-2), var(--bg)); }
.sa-who-text { min-width: 0; }
.sa-name { font: 600 20px/1.2 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-share { display: flex; gap: 2px; height: 10px; margin: 18px 0 4px; }
.sa-share span { display: block; min-width: 4px; border-radius: 3px; background: var(--pc); }
.sa-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 16px; }
.sa-part {
  min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-top: 3px solid var(--pc, var(--line-strong)); border-radius: calc(12px * var(--round));
  background: var(--surface);
  animation: rise-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.sa-part.is-err { border-top-color: var(--line-strong); }
.sa-part.is-err .sv-part-v { color: var(--text-faint); }
.sa-part-head { display: flex; align-items: center; gap: 8px; }
.sa-part-head i { width: 9px; height: 9px; flex-shrink: 0; border-radius: 2px; background: var(--pc); }
.sa-pct { margin-left: auto; color: var(--text-dim); }
.sa-part-bar { height: 4px; margin: 2px 0 8px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-2); }
.sa-part-bar span { display: block; height: 100%; background: var(--pc); transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.sa-part-err { margin-top: 4px; color: var(--text-dim); }

/* игры: таблица + "больше всего часов" */
.sa-games-grid { display: grid; gap: 20px; }
.sa-games-grid.with-played { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .sa-games-grid.with-played { grid-template-columns: 1fr; } }
.sa-table-wrap { overflow-x: auto; position: relative; }
.sa-table td:nth-child(2) { width: 100%; max-width: 0; } /* длинные названия обрезаются, цена не уезжает */
.sa-table td.num, .sa-table th.num { white-space: nowrap; }
.sa-game { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sa-game img, .sa-game-noicon { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--line); border-radius: calc(6px * var(--round)); }
.sa-game-noicon { display: block; background: var(--surface-2); }
.sa-game-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-game-name:hover { color: var(--accent-strong); }
.sa-disc { margin-right: 4px; padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--on-success); background: var(--success); }
.sa-played { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-1); }
.sa-played-list { list-style: none; margin: 0; padding: 0; }
.sa-played-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.sa-played-list li:first-child { border-top: 0; }
.sa-played-list .dim { grid-column: 1 / -1; }
.sa-played-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-inv .section-title h2 { display: flex; align-items: center; gap: 10px; }
.sa-inv .section-title h2::before { content: ''; width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; background: var(--pc); }

.sa-sk-part { height: 120px; }
.sa-sk-table { height: 260px; margin-top: 24px; }

/* Отчёт об аккаунте: уровень/значки, сравнение, самый дорогой предмет, библиотека, разбивка инвентаря.
   Только токены темы — одинаково работает в тёмной и светлой */
.sa-info { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 16px 0 0; }
.sa-info > div { min-width: 0; }
.sa-info dd { margin: 2px 0 0; font-size: 17px; }
.sa-card { min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-1); }
.sa-card-title { margin: 0 0 10px; font: 600 13px/1.3 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
.sa-highlights { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; margin-top: 16px; }
.sa-highlights.single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .sa-highlights { grid-template-columns: minmax(0, 1fr); } }
.sa-compare-big { font: 600 22px/1.3 var(--font-display); margin-bottom: 4px; }
.sa-compare-big b { color: var(--accent); font-weight: 700; }
.sa-compare p { margin: 12px 0 0; }
.sa-pbar { height: 8px; margin-top: 12px; border-radius: var(--radius-pill); background: var(--track); overflow: hidden; }
.sa-pbar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.sa-badge-cond { display: inline-block; vertical-align: middle; margin-right: 6px; padding: 2px 8px; border: 1px dashed var(--field-border); border-radius: var(--radius-pill); font: 500 12px/1.4 var(--font-body); color: var(--text-dim); }
.sa-tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 12px 0 0; padding: 0; }
.sa-tiers li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border-top: 4px solid var(--line-strong); border-radius: 4px; background: var(--surface-2); font-size: 13px; }
.sa-tiers li span { color: var(--text-dim); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sa-tiers li.on { border-top-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 900px) {
  .sa-tiers { grid-template-columns: minmax(0, 1fr); }
  .sa-tiers li { flex-direction: row; justify-content: space-between; gap: 10px; border-top: 0; border-left: 4px solid var(--line-strong); }
  .sa-tiers li.on { border-left-color: var(--accent); }
}
.sa-best { border-top: 3px solid var(--c, var(--line-strong)); }
.sa-best-body { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; }
.sa-best-img { display: grid; place-items: center; height: 112px; border-radius: calc(10px * var(--round)); background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c, #55555f) 24%, transparent), transparent 70%), var(--surface-2); }
.sa-best-img img { max-width: 100%; max-height: 104px; object-fit: contain; }
.sa-best-name { font-weight: 600; overflow-wrap: anywhere; }
.sa-best-price { font-size: 26px; margin: 6px 0 2px; }
.sa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 24px; }
.sa-kpi { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: calc(12px * var(--round)); background: var(--surface); }
.sa-kpi-v { font-size: 22px; margin: 2px 0; }
.sa-kpi-name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-subtitle h3, .sa-bd-title { margin: 0; font-size: 16px; font-weight: 600; }
.sa-bd-title { margin: 0 0 10px; }
.sa-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px 28px; margin: 6px 0 24px; }
.sa-bars { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sa-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: baseline; font-size: 14px; }
.sa-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-bar-v { white-space: nowrap; }
.sa-bar { grid-column: 1 / -1; height: 6px; border-radius: var(--radius-pill); background: var(--track); overflow: hidden; }
.sa-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--pc, var(--accent))); }
.sa-sk-card { height: 190px; }
.sa-sk-kpi { height: 84px; }
.sa-skeleton .sa-kpis { margin: 16px 0 0; }
/* =====================================================================
   "Стоимость Steam-аккаунта" — дашборд (steam-account.html): шапка с итогом и плашками, ряд показателей,
   сетка графиков (Chart.js), таблица всех игр, сравнение и "Как считается". Только токены темы.
   ===================================================================== */
.dsh { display: grid; gap: 16px; margin-top: 24px; min-width: 0; }
.dsh-card {
  min-width: 0; padding: 18px 20px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-1);
}
.dsh-title { margin: 0; font-size: 17px; line-height: 1.3; }
.dsh-desc { margin: 4px 0 14px; color: var(--text-dim); font-size: 13px; }

/* шапка */
.dsh-who { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.dsh-avatar { width: 64px; height: 64px; }
.dsh-who-text { display: grid; gap: 4px; min-width: 0; flex: 1 1 220px; }
.dsh-name-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dsh-level {
  flex-shrink: 0; padding: 2px 9px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--text); font: 600 12px/1.5 var(--font-num); white-space: nowrap;
}
.dsh-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.dsh-total { margin-top: 18px; }
.dsh-total .sa-total-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dsh-plaques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.dsh-plaque {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--pc, var(--accent)); border-radius: var(--radius-ui);
}
.dsh-plaque.on { border-color: color-mix(in srgb, var(--pc, var(--accent)) 50%, var(--line)); border-left-color: var(--pc, var(--accent)); }
.dsh-plaque-k { color: var(--text-dim); }
.dsh-plaque-v { font-size: 20px; }
.dsh-plaque-v b { font-weight: 600; }

/* поделиться */
.dsh-share { position: relative; margin-left: auto; align-self: flex-start; }
.dsh-share > summary { list-style: none; cursor: pointer; }
.dsh-share > summary::-webkit-details-marker { display: none; }
.dsh-share-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 210px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-ui); box-shadow: var(--shadow-2);
}
.dsh-share-menu .btn { justify-content: flex-start; padding: 9px 10px; }

/* ряд показателей */
.dsh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.dsh-stat {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-1);
}
.dsh-stat-k { color: var(--text-dim); }
.dsh-stat-v { font-size: 24px; line-height: 1.15; color: var(--text); overflow-wrap: anywhere; }
.dsh-stat-sub { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-backlog .dsh-stat-v { color: var(--warning); }

/* сетка графиков */
.dsh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dsh-wide { grid-column: 1 / -1; }
.dsh-chart { position: relative; height: 260px; }
.dsh-chart.tall { height: 320px; }
.dsh-nohours { margin: 0; }
.dsh-best { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.dsh-best ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; color: var(--text-dim); }

/* топ-10 по цене: обложка + полоса */
.dsh-cover-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dsh-cover-bars li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; }
.dsh-cover { width: 92px; height: 43px; object-fit: cover; border-radius: 4px; background: var(--surface-2); }
.dsh-cover-body { display: grid; gap: 6px; min-width: 0; }
.dsh-cover-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.dsh-cover-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 14px; }
.dsh-cover-name:hover { color: var(--accent-strong); }
.dsh-cover-v { flex-shrink: 0; font-size: 14px; }
.dsh-bar { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--track); overflow: hidden; }
.dsh-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* CS2: самые дорогие предметы */
.dsh-items { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dsh-item {
  display: grid; gap: 3px; min-width: 0; padding: 10px; cursor: default;
  background: var(--surface-2); border: 1px solid var(--line); border-bottom: 2px solid var(--c); border-radius: var(--radius-ui);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
/* наведение / фокус / тап: чуть крупнее, подъём, рамка и свечение цветом редкости */
.dsh-item:hover, .dsh-item:focus-visible, .dsh-item.is-hot {
  transform: translateY(-3px) scale(1.05);
  border-color: color-mix(in srgb, var(--c) 75%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 8px 22px -6px color-mix(in srgb, var(--c) 70%, transparent);
  outline: none; position: relative; z-index: 1;
}
.dsh-item:hover .dsh-item-img img, .dsh-item.is-hot .dsh-item-img img { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 60%, transparent)); }
.dsh-item-img { display: grid; place-items: center; height: 76px; }
.dsh-item-img img { max-width: 100%; max-height: 72px; object-fit: contain; }
.dsh-item-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-item-sub { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-item-v { font-size: 15px; }

/* таблица всех игр */
.dsh-table-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dsh-more[hidden] { display: none; }
.dsh-search {
  flex: 1 1 240px; max-width: 360px; height: 38px; padding: 0 12px;
  border: 1px solid var(--field-border); border-radius: var(--radius-ui); background: var(--field-bg); color: var(--text); font: inherit;
}
.dsh-search:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.dsh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-ui); }
.dsh-table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 13px; }
.dsh-table th, .dsh-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.dsh-table tbody tr:last-child td { border-bottom: 0; }
.dsh-table tbody tr:hover { background: var(--surface-2); }
.dsh-table .num, .dsh-table .num-col { text-align: right; font-family: var(--font-num); }
.dsh-table th { position: sticky; top: 0; background: var(--surface); font-weight: 500; color: var(--text-dim); }
.dsh-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.dsh-sort:hover, .dsh-sort:focus-visible { color: var(--text); }
th[aria-sort="ascending"] .dsh-sort-mark::after { content: '▲'; font-size: 9px; }
th[aria-sort="descending"] .dsh-sort-mark::after { content: '▼'; font-size: 9px; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--text); }
.dsh-col-cover { width: 76px; }
.dsh-col-cover img { display: block; width: 64px; height: 24px; object-fit: cover; border-radius: 3px; background: var(--surface-2); }
.dsh-td-name { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.dsh-td-name a { color: var(--text); }
.dsh-td-name a:hover { color: var(--accent-strong); }
.dsh-td-empty { text-align: center; padding: 20px; }
.dsh-more { margin-top: 12px; }

/* строка "Регион цен · курс" под суммой: значок "i" с подсказкой и ссылка "изменить" */
.dsh-regionline { margin: 6px 0 0; color: var(--text-dim); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.dsh-tip {
  position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--text-dim); font: 600 10px/1 var(--font-num); cursor: help;
}
.dsh-tip::after {
  content: attr(data-tip); position: absolute; left: 50%; top: auto; bottom: calc(100% + 8px); height: auto; transform: translateX(-50%);
  z-index: 40; width: max-content; max-width: 260px; padding: 7px 10px; border-radius: var(--radius-ui);
  background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2);
  color: var(--text); font: 400 12px/1.4 var(--font-body); white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity 120ms; pointer-events: none;
}
.dsh-tip:hover::after, .dsh-tip:focus-visible::after { opacity: 1; visibility: visible; }
.dsh-tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dsh-change { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) { .dsh-tip::after { left: auto; right: -40px; transform: none; } }

/* "Нет данных: …" вместо графика; скрытое время в играх */
.dsh-empty { margin: 0; padding: 18px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-ui); color: var(--text-dim); text-align: center; }
.dsh-stat-hidden .dsh-stat-v { color: var(--text-dim); }
.dsh-stat-hidden .dsh-stat-sub { white-space: normal; }

/* категории и редкость инвентаря: переключатель игр */
.dsh-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dsh-tab {
  padding: 6px 12px; border: 1px solid var(--field-border); border-radius: var(--radius-pill); background: var(--control-bg);
  color: var(--text-dim); font: 500 13px/1.3 var(--font-body); cursor: pointer;
}
.dsh-tab:hover { color: var(--text); }
.dsh-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dsh-inv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.dsh-inv-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1200px) { .dsh-inv-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dsh-subtitle { margin: 0 0 8px; font-size: 14px; color: var(--text-dim); font-weight: 500; }
.dsh-inv-pending { grid-column: 1 / -1; color: var(--warning); }
@media (max-width: 900px) { .dsh-inv-grid, .dsh-inv-grid.three { grid-template-columns: minmax(0, 1fr); } }

/* инвентари по играм */
.dsh-inv { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dsh-inv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: var(--radius-ui); background: var(--surface-2); }
.dsh-inv-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-inv-name i { width: 9px; height: 9px; flex-shrink: 0; border-radius: 2px; background: var(--pc, var(--accent)); }

/* сравнение: уровень крупно, шкала из сегментов одного цвета разной насыщенности, флажок пользователя */
.dsh-cmp-level { margin-top: 6px; font: 600 30px/1.15 var(--font-display); color: var(--accent); }
.dsh-tiers-wrap { position: relative; margin-top: 46px; }
.dsh-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.dsh-tier { display: grid; gap: 3px; min-width: 0; }
.dsh-tier-bar { height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--accent) calc(var(--lvl) * 85%), var(--track)); }
.dsh-tier.on .dsh-tier-bar { box-shadow: 0 0 0 2px var(--accent), 0 0 14px -2px var(--accent-glow); }
.dsh-tier-name { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-tier.on .dsh-tier-name { color: var(--text); font-weight: 600; }
.dsh-tier-range { color: var(--text-faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-flag { position: absolute; top: -38px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 1; }
.dsh-flag-v {
  padding: 2px 8px; border-radius: var(--radius-ui); background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; white-space: nowrap;
  pointer-events: auto; cursor: default; transition: box-shadow 180ms ease;
}
.dsh-flag-v:hover, .dsh-flag-v:focus-visible, .dsh-flag-v.is-hot { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); animation: dsh-flag-pulse 1.2s ease-in-out infinite; }
@keyframes dsh-flag-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--accent-glow); } 50% { box-shadow: 0 0 0 6px transparent, 0 0 16px 2px var(--accent-glow); } }
/* сегменты шкалы: наведённый (или нажатый) — ярче и толще, остальные приглушены */
.dsh-tier { cursor: default; border-radius: 4px; transition: opacity 180ms ease; }
.dsh-tier:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dsh-tier-bar { transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; transform-origin: center; }
.dsh-tiers.has-hot .dsh-tier:not(.is-hot) { opacity: 0.4; }
.dsh-tier.is-hot .dsh-tier-bar { transform: scaleY(1.6); filter: brightness(1.2); box-shadow: 0 0 12px -2px var(--accent-glow); }
.dsh-tier.is-hot .dsh-tier-name { color: var(--text); }
.dsh-flag-pin { width: 2px; height: 14px; background: var(--accent); }
.dsh-cmp .faint { margin: 14px 0 0; }

/* "Как считается" — свёрнут по умолчанию */
.dsh-how { padding-top: 14px; padding-bottom: 14px; }
.dsh-how-summary { cursor: pointer; font: 600 15px/1.3 var(--font-display); list-style: none; display: flex; align-items: center; gap: 8px; }
.dsh-how-summary::-webkit-details-marker { display: none; }
.dsh-how-summary::before { content: '▸'; color: var(--text-dim); transition: transform 150ms; }
.dsh-how[open] .dsh-how-summary::before { transform: rotate(90deg); }
.dsh-how-list { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-dim); }

/* заглушка загрузки */
.dsh-sk-plaque { height: 66px; }
.dsh-sk-stat { height: 86px; }
.dsh-sk-chart { height: 300px; }

@media (max-width: 900px) {
  .dsh-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .dsh-card { padding: 14px 14px 16px; }
  .dsh-plaques { grid-template-columns: minmax(0, 1fr); }
  .dsh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dsh-stat { padding: 12px; }
  .dsh-stat-v { font-size: 20px; }
  .dsh-chart { height: 240px; }
  .dsh-chart.tall { height: 300px; }
  .dsh-share { margin-left: 0; }
  .dsh-share-menu { left: 0; right: auto; }
  .dsh-cover-bars li { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
  .dsh-cover { width: 70px; height: 33px; }
  .dsh-tiers { gap: 3px; }
  .dsh-tier-range { font-size: 10px; white-space: normal; }
  .dsh-cmp-level { font-size: 24px; }
}

/* Пересчёт по курсу и ссылка на источник курсов (условие ExchangeRate-API) */
.fx-note { margin-top: 8px; padding: 6px 10px; border-left: 3px solid var(--accent); border-radius: 4px; background: var(--accent-soft); color: var(--text-dim); }
.sv-summary + .fx-note { margin: -8px 0 16px; }
.fx-attrib { margin-top: 10px; }
.sv-games { margin: 2px 0 0; }
.sv-pending { margin: 8px 0 0; color: var(--warning); }

@media (max-width: 480px) {
  .sa-opts { padding: 12px; }
  .sa-apps, .sa-games-opts { padding-left: 0; }
  .sa-seg { width: 100%; }
  .sa-seg label { flex: 1 1 100%; }
  .sa-seg label > span { flex: 1; } /* заливка выбранного сегмента — на всю строку */
  .sa-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sa-part { padding: 12px; }
  .sa-part.sa-c-games { grid-column: 1 / -1; }
  /* последняя карточка без пары — тоже на всю строку (длинные подписи на en/pl не переносятся) */
  .sa-part.sa-c-games ~ .sa-part:last-child:nth-child(even),
  .sa-parts:not(:has(> .sa-c-games)) > .sa-part:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sa-part .sv-part-v { font-size: 20px; }
  /* узкая колонка названий (pl: длинные цены и заголовок "Godziny") — до двух строк вместо обрезки в одну */
  .sa-game-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
  .sa-account { padding: 18px; }
  .sa-account .sv-big { font-size: 40px; }
  .sa-table .sa-game img, .sa-table .sa-game-noicon { display: none; }
  .sa-card { padding: 14px; }
  .sa-best-body { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .sa-best-img { height: 88px; }
  .sa-best-img img { max-height: 80px; }
  .sa-kpi-v { font-size: 19px; }
}

/* =====================================================================
   Движение: только короткие переходы и появления; без мигания.
   prefers-reduced-motion: анимации и переходы почти мгновенные, а
   бесконечные (парение кейса, пульс точки, мерцание заглушек) — выключены
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important;
  }
  .hero-case-img, .fan-card, .live-dot, .sk, .frame-gold, .ad-slot,
  .myst-card.shuffling, .upg-dial.is-mystery.spinning .upg-pct { animation: none !important; }
  .myst-card .myst-face, #arc, #ticks .tick, .sa-track, .sa-track::after, .sa-part-bar span { transition: none !important; }
  .sa-part { animation: none !important; }
  .icard:hover:not(.disabled), .how-step:hover, .module:hover, .sv-item:hover, .cos-tile:hover:not(:disabled) { transform: none; }
}

/* =====================================================================
   Выпадающий список вместо системного <select> (ui.js enhanceSelect; сейчас — валюты утилит,
   initCurrencySelect в api.js). <select> остаётся в DOM (select.lp-native — визуально скрыт),
   рядом кнопка .lp > .lp-btn; сам список .lp-pop лежит в <body> с position: fixed — его не
   обрезает overflow: hidden у .sv-input. Цвета — только токены, читается в обеих темах.
   Контраст (тёмная / светлая): код выбранного пункта --accent-strong на --accent-soft 9.7 / 6.7,
   название на нём --text-dim 6.0 / 6.6; название на --surface-2 (наведение, активный) 7.6 / 6.7;
   подпись группы --text-faint на --surface 5.4 / 5.7; знак выбранного --on-accent на --accent
   12.3 / 5.8; рамка активного пункта и галочка (--accent) не ниже 3:1
   ===================================================================== */
select.lp-native {
  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important;
  padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none;
}
.lp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* кнопка: как поле ввода; знак — плашкой, код — цифровым шрифтом, название — тусклее */
.lp { position: relative; width: 100%; min-width: 0; container-type: inline-size; }
.lp-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 4px 10px; text-align: left;
  font: 400 14px/1.2 var(--font-body); color: var(--text); cursor: pointer;
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-ui);
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
}
.lp-btn:hover:not(:disabled) { border-color: var(--text-dim); }
.lp-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.lp-btn[aria-expanded="true"] { border-color: var(--accent); }
.lp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lp-btn-text { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.lp-btn .lp-text { flex-shrink: 0; font: 600 14px/1.15 var(--font-num); letter-spacing: 0.04em; }
.lp-btn .lp-sub { min-width: 0; font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-btn .lp-mark:empty { display: none; }
.lp-chev { flex-shrink: 0; margin-left: auto; color: var(--text-dim); transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 150ms; }
.lp-btn:hover .lp-chev, .lp-btn[aria-expanded="true"] .lp-chev { color: var(--accent); }
.lp-btn[aria-expanded="true"] .lp-chev { transform: rotate(180deg); }
/* узкая колонка (сравнение цен): только знак и код, название — в подсказке и в списке */
@container (max-width: 135px) {
  .lp-btn { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .lp-btn .lp-sub { display: none; }
}
@container (max-width: 100px) { .lp-btn .lp-mark { display: none; } }

.lp-mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 28px; height: 22px; padding: 0 5px;
  border-radius: calc(6px * var(--round)); background: var(--surface-2); color: var(--text-dim);
  font: 600 12px/1 var(--font-num); white-space: nowrap;
}

/* поле "Профиль + валюта + Оценить" (.sv-input): кнопка — сегмент поля, шире прежнего <select> — помещается название */
.sv-input:has(> .lp) { grid-template-columns: auto minmax(0, 1fr) 196px auto; }
.sv-input .lp { align-self: stretch; }
.sv-input .lp-btn {
  height: 100%; min-height: 0; padding: 0 12px; border: 0; border-left: 1px solid var(--line); border-radius: 0;
  background: transparent; box-shadow: none;
}
.sv-input .lp-btn-text { flex-direction: column; align-items: flex-start; gap: 3px; }
.sv-input .lp-btn .lp-sub { max-width: 100%; font-size: 12px; }
.sv-input .lp-btn:focus-visible, .sv-input .lp-btn[aria-expanded="true"] { background: var(--accent-soft); box-shadow: none; }
@media (max-width: 640px) {
  .sv-input:has(> .lp) { grid-template-columns: auto minmax(0, 1fr); }
  .sv-input .lp { grid-column: 1 / -1; }
  .sv-input .lp-btn { min-height: 48px; padding: 6px 14px; border-left: 0; border-top: 1px solid var(--line); }
  .sv-input .lp-btn-text { flex-direction: row; align-items: baseline; gap: 8px; }
}

/* список */
.lp-pop {
  position: fixed; z-index: 60; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: calc(12px * var(--round));
  box-shadow: var(--shadow-pop); animation: lp-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lp-pop[hidden] { display: none; }
.lp-pop.up { animation-name: lp-in-up; }
@keyframes lp-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes lp-in-up { from { opacity: 0; transform: translateY(4px); } }

.lp-search { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 4px 12px; border-bottom: 1px solid var(--line); color: var(--text-faint); transition: color 150ms, box-shadow 150ms; }
.lp-search[hidden] { display: none; }
.lp-search svg { flex-shrink: 0; }
.lp-search input { flex: 1; min-width: 0; padding: 9px 0; border: 0; border-radius: 0; background: transparent; }
.lp-search input:focus { box-shadow: none; }
.lp-search:focus-within { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

.lp-list { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; outline: none; scrollbar-width: thin; }
.lp-group + .lp-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.lp-group-label {
  position: sticky; top: -4px; z-index: 1; margin: 0 -4px; padding: 10px 14px 6px;
  background: var(--surface); color: var(--text-faint);
  font: 600 11px/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
}
.lp-opt {
  display: grid; grid-template-columns: auto 3.2em minmax(0, 1fr) 16px; align-items: center; gap: 10px;
  min-height: 40px; padding: 6px 10px; border-radius: var(--radius-ui); color: var(--text); cursor: pointer;
  transition: background 120ms;
}
.lp-opt .lp-text { font: 600 14px/1 var(--font-num); letter-spacing: 0.04em; }
.lp-opt .lp-sub { font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-opt .lp-mark:empty { visibility: hidden; }
.lp-check { color: var(--accent); visibility: hidden; }
.lp-opt.is-active { background: var(--surface-2); }
.lp-pop[data-kbd] .lp-opt.is-active { box-shadow: inset 0 0 0 2px var(--accent); }
.lp-opt[aria-selected="true"] { background: var(--accent-soft); }
.lp-opt[aria-selected="true"] .lp-text { color: var(--accent-strong); }
.lp-opt[aria-selected="true"] .lp-mark { background: var(--accent); color: var(--on-accent); }
.lp-opt[aria-selected="true"] .lp-check { visibility: visible; }
.lp-opt[aria-selected="true"].is-active { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.lp-opt[aria-selected="true"].is-active .lp-sub { color: var(--text); }
.lp-empty { padding: 18px 14px; color: var(--text-dim); font-size: 14px; text-align: center; }
.lp-empty[hidden] { display: none; }
/* режим высокой контрастности Windows: фоны пропадают — выбранный и активный пункты обводкой */
@media (forced-colors: active) {
  .lp-opt[aria-selected="true"] { outline: 1px solid CanvasText; }
  .lp-opt.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .lp-check { forced-color-adjust: auto; }
}

/* Картинки скинов: воздух вокруг оружия, мягкая тень и свечение редкости,
   чтобы сгенерированные рендеры (обрезаны впритык к оружию) не прилипали к краям карточки
   и не выглядели вклеенными. Только оформление, данные и логика не затронуты. */
img.skin-img {
  box-sizing: border-box;
  padding: 7% 8%;
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.55)) brightness(0.95) saturate(1.06);
}
.ticker-item img.skin-img,
.feed-row img.skin-img {
  background: radial-gradient(ellipse 60% 55% at 50% 55%, color-mix(in srgb, var(--rc, #888) 26%, transparent), transparent 72%);
}

/* =====================================================================
   «Кованый» — скины только из контрактов (items.tradeup_only; ui.js forgeBadge / itemCard, feed.js, server/forge.js).
   Только оформление. Цвет редкости остаётся основным: рамка .icard-shape красится им как обычно,
   а перелив металла — слой .icard-shape::before под телом карточки, виден лишь в рамке (2px) и проходит
   по ней раз в 4 секунды. prefers-reduced-motion — без анимации, статичный металлический отблеск.
   .forge-badge — плашка в левом верхнем углу (подсказка — ::after по наведению и фокусу с клавиатуры),
   .forge-serial — номер экземпляра «№ 0042» в углу арта, .forge-name-ico — значок рядом с названием.
   Плашка и номер — на своей подложке: читаются и на тёмной, и на светлой сцене арта.
   ===================================================================== */
:root {
  --forge-plate: linear-gradient(180deg, #4a505f, #1b1e26);
  --forge-ink: #eef1f7;
  --forge-edge: rgba(214, 222, 236, 0.45);
  --forge-ico: #c6cedb;
  --forge-hi: rgba(255, 255, 255, 0.95);
  --forge-lo: rgba(190, 204, 224, 0.55);
  --forge-sheen: linear-gradient(115deg, transparent 0 36%, var(--forge-lo) 44%, var(--forge-hi) 50%, var(--forge-lo) 56%, transparent 64% 100%);
}
:root[data-theme="light"] {
  --forge-plate: linear-gradient(180deg, #ffffff, #d6dbe6);
  --forge-ink: #1d2436;
  --forge-edge: #8f99ad;
  --forge-ico: #525d72;
  --forge-hi: #ffffff;
  --forge-lo: rgba(112, 124, 150, 0.8);
}
@keyframes forge-sheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.icard.is-forged .icard-shape { position: relative; padding: 2px; }
.icard.is-forged .icard-shape::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--forge-sheen) 100% 0 / 300% 100% no-repeat;
  animation: forge-sheen 4s linear infinite;
}
.icard.is-forged .icard-body { position: relative; z-index: 1; }
/* подсказка плашки не прячется под соседними карточками */
.icard.is-forged:hover, .icard.is-forged:focus-within { z-index: 4; }
/* галочка выбора (контракты) — в правом углу, левый занят плашкой */
.icard.is-forged.selected::after { left: auto; right: 9px; }

.forge-badge {
  position: absolute; top: 9px; left: 9px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px 4px 5px;
  font: 600 10px/1 var(--font-num); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--forge-ink); background: var(--forge-plate); border: 1px solid var(--forge-edge);
  border-radius: var(--radius-pill); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); cursor: help;
}
.forge-badge .forge-ico { width: 12px; height: 12px; flex: none; }
.forge-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.forge-badge::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
  width: max-content; max-width: 220px; padding: 8px 10px; white-space: normal;
  font: 500 12px/1.4 var(--font-body); letter-spacing: 0; text-transform: none;
  color: var(--text); background: var(--surface); border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--radius-ui, 6px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(-2px); pointer-events: none;
  transition: opacity 150ms, transform 150ms, visibility 150ms;
}
.forge-badge:hover::after, .forge-badge:focus-visible::after { opacity: 1; visibility: visible; transform: none; }

.forge-serial {
  position: absolute; right: 9px; bottom: 7px; z-index: 1; padding: 3px 6px;
  font: 600 11px/1 var(--font-num); letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
  color: var(--forge-ink); background: var(--forge-plate); border: 1px solid var(--forge-edge); border-radius: var(--radius-pill);
}
.forge-name-ico { display: inline-flex; vertical-align: -1px; margin-right: 5px; color: var(--forge-ico); }
.forge-name-ico .forge-ico { width: 13px; height: 13px; }

/* фильтр «Кованые» (инвентарь) и вкладка «Кованые» (контракты) */
.forge-filter .forge-ico, .forge-tab-ico .forge-ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; }
.forge-filter[aria-pressed="true"] .dim { color: inherit; opacity: 0.75; } /* счётчик читается и на кнопке акцента */
.tradeup-tabs { margin-bottom: 20px; }
.tradeup-tabs button { display: inline-flex; align-items: center; }
.forge-lede { margin: 0 0 6px; max-width: 760px; }
.forge-summary { margin-bottom: 14px; }
.forge-made { font: 600 12px/1 var(--font-num); color: var(--text-dim); white-space: nowrap; }
.forge-made.is-zero { color: var(--text-faint); }

/* лента дропов: кованый скин — особая карточка (рамка с переливом, плашка с номером поверх арта) */
.ticker-item.is-forged {
  position: relative; border-color: transparent; border-width: 2px 2px 3px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, var(--surface)), var(--surface) 62%) padding-box,
    var(--forge-sheen) border-box,
    linear-gradient(160deg, var(--rc), color-mix(in srgb, var(--rc) 40%, var(--line))) border-box;
  background-size: 100% 100%, 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: forge-ticker 4s linear infinite;
}
.ticker-item.is-forged.fresh { animation: ticker-in 650ms cubic-bezier(0.2, 0.8, 0.2, 1), forge-ticker 4s linear infinite; }
@keyframes forge-ticker {
  from { background-position: 0 0, 100% 0, 0 0; }
  to { background-position: 0 0, 0% 0, 0 0; }
}
.ticker-forge {
  position: absolute; top: 9px; left: 9px; right: 9px; z-index: 1;
  display: flex; align-items: center; gap: 4px; pointer-events: none;
  font: 600 9px/1 var(--font-num); letter-spacing: 0.07em; text-transform: uppercase; color: var(--forge-ink);
}
.ticker-forge > span, .ticker-forge b {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 5px 3px 4px;
  background: var(--forge-plate); border: 1px solid var(--forge-edge); border-radius: var(--radius-pill);
}
.ticker-forge .forge-ico { width: 11px; height: 11px; flex: none; }
.ticker-forge b { margin-left: auto; font-weight: 600; letter-spacing: 0.05em; }

/* рейтинги: миниатюра кованого скина */
.lb-thumb.is-forged { position: relative; box-shadow: inset 0 0 0 1px var(--forge-edge); }
.lb-thumb .lb-forge {
  position: absolute; top: 2px; left: 2px; display: grid; place-items: center; width: 14px; height: 14px;
  color: var(--forge-ink); background: var(--forge-plate); border: 1px solid var(--forge-edge); border-radius: 3px;
}
.lb-thumb .lb-forge svg { width: 10px; height: 10px; }

@media (prefers-reduced-motion: reduce) {
  .icard.is-forged .icard-shape::before { animation: none !important; background-position: 50% 0; }
  .ticker-item.is-forged, .ticker-item.is-forged.fresh { animation: none !important; background-position: 0 0, 50% 0, 0 0; }
  .forge-badge::after { transition: none; }
}

/* ===== "Стоимость Steam-аккаунта": интерактивные графики, профиль Steam, история "Ваш Steam в цифрах" ===== */
/* холсты Chart.js: явная высота контейнера (maintainAspectRatio: false) — иначе график схлопывается в ноль */
.dsh-chart { height: 280px; }
.dsh-chart.tall { height: 320px; }
@media (max-width: 640px) { .dsh-chart { height: 240px; } .dsh-chart.tall { height: 280px; } }

/* подсказка графика — тёмная плашка сайта */
.dsh-tooltip {
  position: absolute; left: 0; top: 0; z-index: 5; max-width: 240px; padding: 9px 11px; pointer-events: none;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-ui);
  box-shadow: var(--shadow-2); font-size: 13px; line-height: 1.35; opacity: 0; transition: opacity 120ms ease, transform 120ms ease;
}
.dsh-tooltip.on { opacity: 1; }
/* размер обложки задан заранее: ширина плашки известна до загрузки картинки — подсказка не вылезает за край */
.dsh-tip-img { display: block; width: 216px; height: 101px; object-fit: cover; margin-bottom: 7px; border-radius: 4px; background: var(--surface); }
.dsh-tooltip:has(.dsh-tip-img) { width: 240px; }
.dsh-tip-title { font-weight: 600; margin-bottom: 2px; overflow-wrap: anywhere; }
.dsh-tip-line { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* HTML-списки с обложками (топ по цене, недавние): наведённая строка — ярче, остальные приглушены */
.dsh-cover-bars li[data-appid] { cursor: pointer; transition: opacity 150ms ease; }
.dsh-cover-bars:hover li[data-appid]:not(:hover) { opacity: 0.35; }
.dsh-cover-bars li[data-appid]:hover .dsh-bar i { filter: brightness(1.25); }
/* переход к строке в таблице / к блоку: подсветка на 2 секунды */
.dsh-flash { animation: dsh-flash 2s ease-out 1; }
tr.dsh-flash td { animation: dsh-flash 2s ease-out 1; }
@keyframes dsh-flash { 0%, 35% { background: color-mix(in srgb, var(--accent) 24%, transparent); box-shadow: 0 0 0 1px var(--accent); } 100% { background: transparent; } }
.dsh-loading-note { margin: 10px 0 0; }
.dsh-card .dsh-sk-chart { height: 180px; }
.dsh-link-btn { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-link-btn:hover { color: var(--accent-strong); }
.dsh-big { font: 700 40px/1.05 var(--font-num); color: var(--text); }

/* кнопка истории над дашбордом */
.dsh-story-cta {
  display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--radius-card);
  background: linear-gradient(110deg, color-mix(in srgb, #8e2de2 30%, var(--surface)), color-mix(in srgb, #ff512f 22%, var(--surface)));
  border: 1px solid var(--line);
}
.dsh-story-btn { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; padding-inline: 22px; }

/* уровень и значки */
.dsh-lv { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; }
.dsh-lv-num {
  display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid var(--accent); font: 700 24px var(--font-num); color: var(--text); box-shadow: 0 0 22px -6px var(--accent);
}
.dsh-lv-text { display: grid; gap: 6px; flex: 1; min-width: 0; }
.dsh-lv-pct { margin: 6px 0 0; font-weight: 600; color: var(--accent-strong); }
.dsh-badges-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0 8px; flex-wrap: wrap; }
.dsh-years { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.dsh-years img { width: 24px; height: 24px; }
.dsh-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.dsh-badge {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 8px 6px; min-width: 0;
  border-radius: var(--radius-ui); background: var(--surface-2); text-align: center; cursor: help;
}
.dsh-badge.foil { box-shadow: inset 0 0 0 1px var(--r-gold-fill); }
.dsh-badge-img { display: grid; place-items: center; width: 56px; height: 56px; }
.dsh-badge-img.game { width: 80px; height: 30px; margin: 13px 0; }
.dsh-badge-img img { max-width: 100%; max-height: 100%; border-radius: 4px; object-fit: cover; }
/* картинки нет — аккуратный знак-медаль вместо пустой плитки (название — ниже) */
.dsh-badge-img.noimg::before {
  content: ''; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 70%, #fff 30%) 0 22%, transparent 24%),
    conic-gradient(from 0deg, var(--accent), color-mix(in srgb, var(--accent) 35%, var(--surface-2)), var(--accent));
  box-shadow: inset 0 0 0 3px var(--surface-2), 0 0 12px -4px var(--accent);
}
.dsh-badge-name { max-width: 100%; font-size: 12px; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dsh-badge-lv { font-size: 11px; color: var(--text-dim); }
/* подсказка значка — одна плавающая плашка поверх страницы (steam-account.html, floatTip) */
.dsh-floattip {
  position: fixed; left: 0; top: 0; z-index: 900; max-width: 240px; padding: 7px 10px; pointer-events: none;
  border-radius: var(--radius-ui); background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2); font-size: 12px; line-height: 1.45; white-space: pre-line; opacity: 0; transition: opacity 150ms ease;
}
.dsh-floattip.on { opacity: 1; }
.dsh-floattip b { display: block; font-size: 13px; }

/* карточка "Профиль": возраст аккаунта, друзья, блокировки — компактно, не тянется по высоте соседней */
.dsh-grid[data-grid="profile"] > [data-card="account"] { align-self: start; }
.dsh-acc { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.dsh-acc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 10px; border-radius: var(--radius-ui); background: var(--surface-2); font-size: 14px; }
.dsh-acc-row b { display: grid; justify-items: end; text-align: right; font-weight: 600; }
.dsh-acc-row.on { background: color-mix(in srgb, var(--danger) 16%, var(--surface-2)); }
.dsh-acc-row.on b { color: var(--danger); }
.dsh-acc-bans { margin-bottom: 6px; }
/* блокировки */
.dsh-clean { display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--success); }
.dsh-clean .dim { color: var(--text-dim); }
.dsh-clean-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--success) 18%, transparent); font-size: 24px; }
.dsh-bans { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.dsh-ban { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--radius-ui); background: var(--surface-2); font-size: 14px; }
.dsh-ban.on { background: color-mix(in srgb, var(--danger) 16%, var(--surface-2)); color: var(--text); }
.dsh-ban.on b { color: var(--danger); }

.dsh-recent-total { margin: 0 0 10px; }
.dsh-recent-total b { font-size: 22px; }

/* достижения */
.dsh-ach-sum { display: flex; gap: 20px 32px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.dsh-perfect { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--r-gold-fill) 16%, var(--surface-2)); }
.dsh-perfect-mark, .dsh-perfect-chip { padding: 2px 7px; border-radius: var(--radius-pill); background: var(--r-gold-fill); color: #241a00; font: 700 11px var(--font-num); }
.dsh-ach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dsh-ach-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dsh-ach-games li.done .dsh-bar i { background: var(--r-gold-fill); }
.dsh-rare { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dsh-rare li { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: var(--radius-ui); background: var(--surface-2); min-width: 0; }
.dsh-rare li > div { min-width: 0; }
.dsh-rare-img { flex-shrink: 0; width: 48px; height: 48px; border-radius: 6px; background: var(--track); overflow: hidden; }
.dsh-rare-img img { width: 100%; height: 100%; object-fit: cover; }
.dsh-rare-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-rare-pct { color: var(--accent-strong); }
@media (max-width: 900px) { .dsh-ach-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .dsh-rare { grid-template-columns: minmax(0, 1fr); } }

/* титулы */
.dsh-titles { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dsh-title-chip {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); cursor: help;
}
.dsh-title-ico { display: inline-grid; color: var(--r-gold-fill); }
.dsh-title-chip::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 6; width: max-content; max-width: 240px;
  padding: 7px 10px; border-radius: var(--radius-ui); background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2); font-size: 12px; font-weight: 400; line-height: 1.35; white-space: normal; opacity: 0; pointer-events: none;
  translate: -50% 4px; transition: opacity 150ms ease, translate 150ms ease;
}
.dsh-title-chip:hover::after, .dsh-title-chip:focus-visible::after { opacity: 1; translate: -50% 0; }
.dsh-titles-next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dsh-title-next { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--radius-ui); background: var(--surface-2); color: var(--text-dim); filter: grayscale(1); }
.dsh-title-next .dsh-bar i { background: var(--text-faint); }
@media (max-width: 760px) { .dsh-titles-next { grid-template-columns: minmax(0, 1fr); } }

/* ---------- история "Ваш Steam в цифрах": полноэкранные карточки, scroll-snap ---------- */
html.story-open, html.story-open body { overflow: hidden; }
.story { position: fixed; inset: 0; z-index: 1000; background: #07070a; color: #fff; }
.story-track { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.story-track::-webkit-scrollbar { display: none; }
.story-card {
  position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 72px 24px; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always; isolation: isolate;
  background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--a) 90%, #fff 10%), transparent 60%), linear-gradient(150deg, var(--a), var(--b));
}
.story-bg-img { position: absolute; inset: -40px; z-index: -2; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(22px) saturate(1.2); opacity: 0.55; }
.story-bg-img.full { filter: blur(6px) saturate(1.15); opacity: 0.7; }
.story-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55)); }
.story-inner { width: min(760px, 100%); text-align: center; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.story-kicker { font: 600 15px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; margin-bottom: 10px; }
.story-num { font: 800 clamp(64px, 14vw, 156px)/1 var(--font-num); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.story-word { font: 800 clamp(44px, 9vw, 96px)/1.05 var(--font-display); }
.story-unit { margin-top: 6px; font: 600 clamp(20px, 3vw, 28px) var(--font-body); opacity: 0.92; }
.story-caption { margin: 22px auto 0; max-width: 34ch; font: 600 clamp(22px, 3.4vw, 34px)/1.25 var(--font-body); }
.story-sub { margin: 12px auto 0; max-width: 46ch; font-size: clamp(16px, 2.2vw, 20px); opacity: 0.88; }
.story-game { margin-top: 18px; font: 700 clamp(20px, 3vw, 28px) var(--font-display); }
.story-hint { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; font-size: 13px; opacity: 0.7; letter-spacing: 0.06em; animation: story-bob 1.8s ease-in-out infinite; }
@keyframes story-bob { 50% { translate: -50% 6px; } }
.story-ring { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.story-ring svg { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35)); }
.story-ring ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; font-size: 15px; }
.story-ring li { display: flex; align-items: center; gap: 8px; }
.story-ring li i { width: 12px; height: 12px; border-radius: 3px; }
.story-ring li span { opacity: 0.75; }
.story-list { list-style: none; margin: 22px auto 0; padding: 0; display: grid; gap: 8px; max-width: 420px; text-align: left; }
.story-list li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.story-rare { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 16px; border-radius: 16px; background: rgba(0, 0, 0, 0.28); text-align: left; }
.story-rare img { border-radius: 8px; }
.story-rare div { display: grid; gap: 2px; }
.story-rare span { opacity: 0.8; font-size: 14px; }
.story-rare em { font-style: normal; font-weight: 700; color: #ffd166; }
.story-chips { list-style: none; margin: 22px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.story-chips li { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); font-weight: 600; }
.story-final { display: grid; gap: 24px; justify-items: center; }
/* заголовок финала — крупно, отступы сверху и снизу ровные (gap сетки финала) */
.story-final-title { margin: 0 0 24px; font: 800 clamp(30px, 5.4vw, 52px)/1.1 var(--font-display); letter-spacing: -0.01em; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35); }
.story-who { display: flex; align-items: center; gap: 14px; font: 700 26px var(--font-display); }
.story-who img { border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); }
/* плитки одинаковой ширины: 5 колонок на десктопе, 3 + 2 на телефоне, неполный ряд — по центру */
.story-stats { --cols: 5; --gap: 12px; list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.story-stats li {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; box-sizing: border-box;
  display: grid; gap: 4px; justify-items: center; padding: 16px 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.28); cursor: help;
}
/* число — в одну строку; шрифт уменьшает скрипт (fitNumbers), пока число не влезет в плитку */
.story-stats b { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; font-size: 30px; line-height: 1.15; }
.story-stats span { opacity: 0.8; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .story-stats { --cols: 3; --gap: 10px; } .story-stats b { font-size: 26px; } .story-final-title { margin-bottom: 16px; } }
.story-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.story-close {
  position: absolute; top: 14px; right: 16px; z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}
.story-close:hover { background: rgba(0, 0, 0, 0.55); }
.story-dots { position: absolute; right: 18px; top: 50%; translate: 0 -50%; z-index: 3; display: grid; gap: 10px; }
.story-dots button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: background 150ms, transform 150ms; }
.story-dots button[aria-current="true"] { background: #fff; transform: scale(1.35); }
.story-progress { display: none; }
/* появление содержимого карточки */
.story-card .story-inner > * { opacity: 0; translate: 0 18px; transition: opacity 500ms ease, translate 500ms ease; }
.story-card.active .story-inner > * { opacity: 1; translate: 0 0; }
.story-card.active .story-inner > *:nth-child(2) { transition-delay: 80ms; }
.story-card.active .story-inner > *:nth-child(3) { transition-delay: 160ms; }
.story-card.active .story-inner > *:nth-child(n + 4) { transition-delay: 260ms; }
/* телефон — как сторис: полоски сверху, точки не нужны */
@media (max-width: 640px), (pointer: coarse) {
  .story-dots { display: none; }
  .story-progress { position: absolute; top: 10px; left: 12px; right: 64px; z-index: 3; display: flex; gap: 4px; }
  .story-progress span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
  .story-progress span i { display: block; height: 100%; width: 0; background: #fff; }
  .story-progress span.done i { width: 100%; }
  .story-progress span.on i { width: 100%; transition: width 600ms ease; }
  .story-card { padding: 64px 18px 56px; }
  .story-close { top: 22px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-card .story-inner > *, .story-card.active .story-inner > * { transition: none; opacity: 1; translate: none; }
  .story-hint { animation: none; }
  .story-progress span.on i, .dsh-tooltip, .dsh-cover-bars li[data-appid], .dsh-title-chip::after, .dsh-floattip { transition: none; }
  .dsh-flash, tr.dsh-flash td { animation: none; outline: 2px solid var(--accent); }
  /* предметы и шкала: только подсветка, без масштаба, подъёма и пульса */
  .dsh-item, .dsh-tier, .dsh-tier-bar, .dsh-flag-v { transition: none; }
  .dsh-item:hover, .dsh-item:focus-visible, .dsh-item.is-hot { transform: none; }
  .dsh-tier.is-hot .dsh-tier-bar { transform: none; }
  .dsh-flag-v:hover, .dsh-flag-v.is-hot { animation: none; }
}

/* =====================================================================
   Уведомление о квесте / достижении (api.js showProgressToasts): карточка справа сверху,
   под навбаром, по одной за раз (очередь). Таймер-полоска снизу; на паузе — пока наведена мышь или фокус.
   ===================================================================== */
.progress-toasts {
  position: fixed; top: calc(var(--nav-h) + 16px); right: 20px; z-index: 60; width: min(360px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.progress-toast {
  --pt: var(--accent);
  position: relative; overflow: hidden; pointer-events: auto;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 12px 14px 14px; color: var(--text); text-decoration: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pt) 12%, transparent), transparent 55%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--pt) 35%, var(--line)); border-radius: calc(12px * var(--round));
  box-shadow: var(--shadow-2);
  animation: progress-toast-in 320ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.progress-toast.achievement { --pt: var(--r-gold); }
.progress-toast:hover, .progress-toast:focus-visible { border-color: var(--pt); }
.progress-toast:focus-visible { outline: 2px solid var(--pt); outline-offset: 2px; }
.progress-toast.leaving { animation: progress-toast-out 220ms ease-in both; }
.progress-toast-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: var(--pt); background: color-mix(in srgb, var(--pt) 14%, transparent);
}
.progress-toast-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.progress-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.progress-toast-kicker { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pt); }
.progress-toast-title { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-toast-reward { font-size: 13px; color: var(--text-dim); }
.progress-toast-timer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pt); opacity: 0.7;
  transform-origin: left; animation: progress-toast-timer 5000ms linear both;
}
.progress-toast.paused .progress-toast-timer { animation-play-state: paused; }
@keyframes progress-toast-in { from { opacity: 0; transform: translateX(calc(100% + 24px)); } }
@keyframes progress-toast-out { to { opacity: 0; transform: translateX(calc(100% + 24px)); } }
@keyframes progress-toast-timer { to { transform: scaleX(0); } }
/* узкий экран: навбар не липкий и уезжает при прокрутке — карточка у самого верха, поля 16px */
@media (max-width: 600px) {
  .progress-toasts { top: max(16px, env(safe-area-inset-top)); right: 16px; }
}
/* «уменьшение движения»: без выезда — карточка просто появляется и исчезает; полоску-таймер не показываем */
@media (prefers-reduced-motion: reduce) {
  .progress-toast, .progress-toast.leaving { animation: none !important; }
  .progress-toast.leaving { opacity: 0; }
  .progress-toast-timer { display: none; }
}

/* =====================================================================
   Коллекция кейса (quests.html): раскрывающийся список «Не хватает: N» под прогрессом
   ===================================================================== */
.ach-row .ach-missing { grid-column: 1 / -1; margin-top: -8px; }
.ach-missing > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--accent); padding: 4px 0;
}
.ach-missing > summary::-webkit-details-marker { display: none; }
.ach-missing > summary::before {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 160ms ease;
}
.ach-missing[open] > summary::before { transform: rotate(45deg); }
.ach-missing > summary:hover { color: var(--accent-strong); }
.ach-missing > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ach-items-head { font-size: 12px; color: var(--text-dim); margin: 14px 0 8px; letter-spacing: 0.04em; }
.ach-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ach-item {
  --rc: var(--text-faint);
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; align-items: center;
  padding: 6px 8px; background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--rc); border-radius: calc(8px * var(--round));
}
.ach-item img { width: 48px; height: 36px; object-fit: contain; }
.ach-item-name { font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ach-item-meta { font-size: 11px; display: flex; flex-direction: column; }
.ach-item-meta .dim { white-space: nowrap; }
.ach-item.owned { opacity: 0.5; }
.ach-item.owned img { filter: grayscale(0.7); }
.ach-item-check {
  position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; background: var(--success-fill); color: var(--bg, #000);
}
.ach-item-check svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ach-items-status { font-size: 13px; color: var(--text-dim); padding: 8px 0; }
@media (max-width: 600px) {
  .ach-items { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ach-missing > summary::before { transition: none; }
}

/* ===== Апгрейдер, режим "Мистери": тёмная сцена с фиолетовым свечением, полоса исходов, анимация перебора ===== */
/* тёмная сцена в обеих темах — свои токены текста и поверхностей внутри блока */
.upg-stage.is-mystery {
  --text: #f3f0ff; --text-dim: #b8b0d8; --text-faint: #8a82aa; --surface: rgba(22, 17, 40, 0.86); --surface-2: rgba(40, 32, 70, 0.7);
  --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16);
  color: var(--text); padding: 22px; border-radius: var(--radius-card);
  background: radial-gradient(ellipse 45% 70% at 50% 50%, rgba(154, 92, 255, 0.34), rgba(154, 92, 255, 0.08) 55%, transparent 75%),
    linear-gradient(180deg, #151026, #08060f);
  box-shadow: inset 0 0 0 1px rgba(154, 92, 255, 0.22), 0 18px 40px -20px rgba(91, 33, 201, 0.6);
}
/* рамки "Ставка" и "Результат" светятся цветом редкости своего предмета */
.upg-stage.is-mystery .upg-side {
  border-color: color-mix(in srgb, var(--rc) 75%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 45%, transparent), 0 0 30px -6px color-mix(in srgb, var(--rc) 60%, transparent);
  background: radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 72%), var(--surface);
}
.upg-dial.is-mystery #needle { opacity: 0; }

/* полоса исходов: красная "дешевле", зелёная "дороже", по краям — минимум и максимум диапазона */
.myst-odds { margin-top: 12px; display: grid; gap: 6px; }
.myst-odds[hidden] { display: none; }
.myst-odds-bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-2); }
.myst-odds-bar .lo { background: linear-gradient(90deg, #ff3b5c, #ff6b81); }
.myst-odds-bar .eq { background: #8a82aa; }
.myst-odds-bar .hi { background: linear-gradient(90deg, #2bd97c, #34f094); }
.myst-odds-labels, .myst-odds-ends { display: flex; justify-content: space-between; gap: 10px; }
.myst-odds-labels .neg { color: #ff6b81; font-weight: 600; }
.myst-odds-labels .pos { color: #34f094; font-weight: 600; }
.myst-odds-ends { color: var(--text-dim); }

/* заполнение кольца светом */
#myst-fill { stroke: #c9a8ff; opacity: 0; transform: rotate(-90deg); transform-origin: 150px 150px; filter: drop-shadow(0 0 6px rgba(201, 168, 255, 0.9)); }
.upg-dial.myst-run #myst-fill { opacity: 1; }
.upg-dial.myst-final #myst-fill { stroke: var(--rc); filter: drop-shadow(0 0 8px var(--rc)); }
/* 1. кольцо разгорается, "?" пульсирует и исчезает */
.upg-dial.myst-ignite #myst-ring { opacity: 1; stroke-width: 4; filter: drop-shadow(0 0 10px rgba(154, 92, 255, 0.95)); transition: stroke-width 300ms, filter 300ms, opacity 300ms; }
.upg-dial.myst-ignite .upg-label { animation: myst-q-out 500ms ease-in forwards; }
@keyframes myst-q-out { 0% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(0.4); opacity: 0; } }
/* 2. перебор: карточка предмета в центре кольца, короткое размытие на каждой смене */
.myst-reel { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; perspective: 900px; z-index: 2; }
.myst-reel-card {
  display: grid; place-items: center; width: 150px; height: 104px; border-radius: 14px;
  background: radial-gradient(ellipse 70% 65% at 50% 50%, color-mix(in srgb, var(--rc) 35%, transparent), transparent 75%);
}
.myst-reel-card img, .myst-reel-card svg { width: 132px; height: auto; aspect-ratio: 2 / 1; object-fit: contain; --skin-tilt: 0deg; --skin-tilt-scale: 1; rotate: none; background: none; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)); }
.myst-reel.blink .myst-reel-card { animation: myst-blink 110ms ease-out; }
@keyframes myst-blink { from { filter: blur(6px); transform: scale(0.92); opacity: 0.6; } to { filter: none; transform: none; opacity: 1; } }
.upg-dial.myst-shuffle .upg-label { opacity: 0; animation: none; }
/* 3. вспышка в цвете редкости */
.upg-dial::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 3; background: radial-gradient(circle, #fff 0, var(--rc, #c9a8ff) 30%, transparent 68%); }
.upg-dial.myst-flash::after { animation: myst-flash 520ms ease-out forwards; }
@keyframes myst-flash { 0% { opacity: 0; transform: scale(0.6); } 25% { opacity: 0.95; } 100% { opacity: 0; transform: scale(1.35); } }
/* 4. разница в цене — крупно */
.myst-delta { min-height: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.myst-delta:empty { display: none; }
.myst-delta b { font: 700 34px/1.05 var(--font-num); }
.myst-delta span { font-size: 15px; opacity: 0.85; }
.myst-delta.pos b, .myst-delta.pos span { color: #34f094; text-shadow: 0 0 18px rgba(52, 240, 148, 0.35); }
.myst-delta.neg b, .myst-delta.neg span { color: #ff6b81; text-shadow: 0 0 18px rgba(255, 84, 112, 0.35); }
@media (max-width: 960px) { .myst-delta { justify-content: flex-start; } .upg-stage.is-mystery { padding: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .upg-dial.myst-ignite .upg-label, .myst-reel.blink .myst-reel-card, .upg-dial.myst-flash::after { animation: none; }
  .upg-dial.myst-ignite #myst-ring { transition: none; }
}

/* ===== Апгрейдер: сохранённый шанс (кнопка "Сбросить шанс", подсказка "шанс недоступен") ===== */
.upg-controls [hidden], .upg-chance-hint[hidden] { display: none; }
.upg-controls #chance-reset { margin-right: auto; }
.upg-chance-hint {
  margin-top: 10px; padding: 8px 12px; border-radius: 10px;
  border: 1px dashed var(--accent); color: var(--text, inherit); background: var(--surface);
}
/* выбранный шанс недоступен для текущей ставки: кнопка подсвечена, но приглушена (клик — сброс) */
.presets .preset.active:disabled, .presets .preset.active.unavailable { opacity: 0.6; cursor: pointer; }

/* ===== Апгрейдер: ставка из нескольких предметов (до 10) — плитка миниатюр в слоте "Ставка" ===== */
.upg-multi {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
  width: 100%; max-width: 320px; margin: 0 auto;
}
.upg-multi[data-count="2"], .upg-multi[data-count="3"], .upg-multi[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 240px; }
.upg-multi-tile {
  display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--rc, var(--line)) 55%, transparent);
  background: radial-gradient(ellipse 70% 65% at 50% 50%, color-mix(in srgb, var(--rc, transparent) 22%, transparent), transparent 75%);
}
.upg-multi-tile img, .upg-multi-tile svg { width: 90%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }

/* ===== Стоимость Steam-аккаунта: пересчёт после смены региона ===== */
.sa-recalc { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--text-dim); }

/* =====================================================================
   Главная: вторичный блок "Сколько стоит твой Steam?" под кнопками первого экрана
   (ведёт на утилиту оценки аккаунта). Тише главного CTA: поверхность карточки, без заливки акцентом
   ===================================================================== */
.home-steam {
  display: flex; align-items: center; gap: 14px; margin-top: 24px; max-width: 560px; padding: 14px 16px;
  color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.home-steam:hover, .home-steam:focus-visible { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.home-steam-icon {
  flex-shrink: 0; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.home-steam-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-steam-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-steam-title { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.2; }
.home-steam-text { color: var(--text-dim); font-size: 13px; }
.home-steam-cta { flex-shrink: 0; color: var(--accent); font-weight: 600; font-size: 14px; white-space: nowrap; }
.home-steam:hover .home-steam-cta, .home-steam:focus-visible .home-steam-cta { color: var(--accent-strong); }
@media (max-width: 560px) {
  .home-steam { flex-wrap: wrap; }
  .home-steam-cta { flex-basis: 100%; padding-left: 58px; }
}
@media (prefers-reduced-motion: reduce) { .home-steam:hover, .home-steam:focus-visible { transform: none; } }

/* =====================================================================
   Бренд Burger Case: логотип (public/js/brand.js) и загрузчик-бургер
   ===================================================================== */
:root { --bc-case: #ffffff; }
:root[data-theme="light"] { --bc-case: #14151C; }
.bc-logo { overflow: visible; } /* приподнятая при наведении булка выходит за viewBox */
.bc-logo .bc-case { fill: var(--bc-case); }
/* наведение на логотип-ссылку: верхняя булка приподнимается, свечение щели ярче */
.bc-logo .bc-bun, .bc-mark .bc-bun { transform-box: fill-box; transform-origin: 0% 100%; transition: transform 200ms ease; }
.bc-logo .bc-glow, .bc-mark .bc-glow { transition: opacity 200ms ease; }
a.logo:hover .bc-bun, a.logo:focus-visible .bc-bun { transform: translateY(-9%) rotate(-5deg); }
a.logo:hover .bc-glow, a.logo:focus-visible .bc-glow { opacity: 1; filter: brightness(1.35) saturate(1.2); }
a.logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
/* загрузчик: булка приоткрывается и закрывается по кругу */
.bc-loader { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.bc-loader .bc-mark { width: 100%; height: 100%; overflow: visible; }
.bc-loader .bc-bun { animation: bc-bun-open 1.1s ease-in-out infinite; }
.bc-loader .bc-glow { animation: bc-glow-pulse 1.1s ease-in-out infinite; }
@keyframes bc-bun-open { 0%, 100% { transform: none; } 45%, 60% { transform: translateY(-22%) rotate(-12deg); } }
@keyframes bc-glow-pulse { 0%, 100% { opacity: 0.5; } 45%, 60% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bc-logo .bc-bun, .bc-logo .bc-glow, .bc-mark .bc-bun, .bc-mark .bc-glow { transition: none; }
  a.logo:hover .bc-bun, a.logo:focus-visible .bc-bun { transform: none; } /* только ярче свечение */
  .bc-loader .bc-bun { animation: none; }
  .bc-loader .bc-glow { animation: bc-glow-pulse 1.6s ease-in-out infinite; } /* без движения: только мерцание щели */
}

/* профиль служебного аккаунта: знак бренда вместо аватарки, без рамки игрока */
.avatar-frame.is-brand img { object-fit: contain; padding: 14%; background: #14151C; }

/* =====================================================================
   Фон: размытые силуэты бургера (nav.js mountBackdrop). Размытие — внутри SVG (растеризуется один раз),
   слой fixed под контентом и без событий; двигается только transform (композитор), 20–30 с на цикл.
   ===================================================================== */
.bc-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bc-bg i { position: absolute; display: block; aspect-ratio: 1; background-position: center; background-size: contain; background-repeat: no-repeat; will-change: transform; }
.bc-bg-a { width: max(56vw, 380px); left: -18vw; top: -14vw; background-image: url(/brand/bg-burger-mustard.svg); opacity: 0.11; animation: bc-bob-a 26s ease-in-out infinite; }
.bc-bg-b { width: max(50vw, 340px); right: -16vw; bottom: -16vw; background-image: url(/brand/bg-burger-cyan.svg); opacity: 0.10; animation: bc-bob-b 30s ease-in-out infinite; }
.bc-bg-c { width: max(40vw, 260px); right: -20vw; top: 22vh; background-image: url(/brand/bg-burger-mustard.svg); opacity: 0.06; animation: bc-bob-a 34s ease-in-out infinite reverse; }
@keyframes bc-bob-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); } 50% { transform: translate3d(1.6vw, 1.2vw, 0) rotate(-2deg); } }
@keyframes bc-bob-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(10deg); } 50% { transform: translate3d(-1.4vw, -1.2vw, 0) rotate(4deg); } }
/* светлая тема: ещё тише */
:root[data-theme="light"] .bc-bg { opacity: 0.6; }
/* кейсы и рулетка: свой фон кейса — силуэты почти не видны */
body:has(#case-stage-spin) .bc-bg { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { .bc-bg i { animation: none; } }

/* Апгрейдер: стрелка-клин над кольцом (#needle в upgrader.html). Белая заливка, тонкая тёмная обводка и мягкая тень —
   читается на любом цвете дуги в обеих темах. Язычок #needle-flap качает скрипт на границах шанса (WAAPI);
   вспышка на остановке — data-flash="win|lose" */
.needle-wedge { fill: var(--needle-fill); stroke: var(--needle-stroke); filter: var(--needle-shadow); transform-origin: 150px 16px; }
#needle[data-flash="win"] { --flash: var(--win-glow); }
#needle[data-flash="lose"] { --flash: #ff5470; }
#needle[data-flash] .needle-wedge { animation: needle-flash 900ms ease-out; }
@keyframes needle-flash {
  0% { fill: var(--needle-fill); transform: scale(1); }
  12%, 50% { fill: var(--flash); transform: scale(1.18); filter: var(--needle-shadow) drop-shadow(0 0 6px var(--flash)); }
  100% { fill: var(--needle-fill); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  /* без движения: только цвет */
  @keyframes needle-flash {
    0% { fill: var(--needle-fill); }
    12%, 50% { fill: var(--flash); filter: var(--needle-shadow) drop-shadow(0 0 6px var(--flash)); }
    100% { fill: var(--needle-fill); }
  }
}

/* ---------- переключатель «Быстро»: кнопка-молния (quickToggle в ui.js) ---------- */
.quick-switch {
  --qt-on: #F2B630;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px 6px 9px; min-height: 34px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-dim);
  font: 600 13px/1 var(--font-body); cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.quick-switch:hover { color: var(--text); border-color: var(--field-border); }
.quick-switch:focus-visible { outline: 2px solid #22E5F0; outline-offset: 2px; }
.quick-bolt { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .75; transition: fill .15s, stroke .15s, opacity .15s, filter .15s; }
.quick-switch[aria-checked="true"] {
  color: var(--text);
  border-color: color-mix(in srgb, var(--qt-on) 55%, transparent);
  background: color-mix(in srgb, var(--qt-on) 13%, transparent);
}
.quick-switch[aria-checked="true"] .quick-bolt {
  fill: var(--qt-on); stroke: var(--qt-on); opacity: 1;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--qt-on) 70%, transparent));
}
/* светлая тема: контур молнии темнее — горчичный на белом иначе теряется */
:root[data-theme="light"] .quick-switch[aria-checked="true"] { border-color: #d39a17; background: color-mix(in srgb, var(--qt-on) 18%, transparent); }
:root[data-theme="light"] .quick-switch[aria-checked="true"] .quick-bolt { stroke: #b07c06; filter: drop-shadow(0 0 3px rgba(242, 182, 48, .55)); }
.quick-switch.flash .quick-bolt { animation: quick-flash .2s ease-out; }
@keyframes quick-flash { 50% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
  .quick-switch.flash .quick-bolt { animation: quick-flash-calm .2s ease-out; }
  @keyframes quick-flash-calm { 50% { opacity: .6; } }
}

/* ===== РЕЙТИНГИ: карточки со скином (public/pages/leaderboard.html) — начало блока =====
   Главное в карточке подиума — скин: картинка без фона (prepared/*.webp) на радиальном свечении цвета редкости
   (--rc ставит разметка: var(--r-<редкость>)). Над скином — игрок компактной строкой, под ним — название, редкость
   и источник, сумма. 1-е место выше и шире, золотая рамка и корона; 2-е — серебро, 3-е — бронза. Наведение:
   скин чуть крупнее, рамка цветом редкости, тултип (.lb-tip). Строки таблицы — миниатюра 64×48 на том же свечении. */
.lb-podium { max-width: 1000px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr) minmax(0, 1fr); gap: 16px; padding-top: 22px; }
.lb-p1 { --lift: 22px; --stage-h: 156px; }
.lb-p2, .lb-p3 { --stage-h: 122px; }
.lb-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  padding: 14px 14px 14px; margin-bottom: var(--lift); text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 8%, var(--surface)), var(--surface) 45%);
  border: 1.5px solid color-mix(in srgb, var(--medal) 55%, var(--line)); border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  transition: border-color 160ms, box-shadow 160ms;
}
.lb-p1 .lb-card { padding: 18px 18px 16px; border: 2px solid var(--medal); box-shadow: var(--shadow-1), 0 0 44px -14px var(--lb-glow); }
.lb-step.is-me .lb-card { box-shadow: 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.lb-step:not(.is-empty) .lb-card:hover {
  border-color: var(--rc); box-shadow: var(--shadow-1), 0 0 0 1px var(--rc), 0 10px 36px -16px var(--rc);
}
.lb-medal {
  position: absolute; top: 10px; left: 10px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--medal); background: var(--surface); color: var(--medal); font: 700 14px/1 var(--font-num);
}
.lb-crown { position: absolute; top: -20px; left: 50%; z-index: 1; width: 34px; height: 34px; transform: translateX(-50%); color: var(--medal); filter: drop-shadow(0 3px 8px var(--lb-glow)); }
.lb-crown svg { display: block; width: 100%; height: 100%; }
.lb-corner { position: absolute; top: 12px; right: 12px; z-index: 1; }

/* игрок — компактная строка над скином */
.lb-by { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: calc(100% - 64px); min-width: 0; min-height: 36px; }
.lb-by .lb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px var(--font-body); }

/* скин — главный элемент */
.lb-stage {
  position: relative; display: grid; place-items: center; width: 100%; height: var(--stage-h); margin: 2px 0 4px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 34%, transparent), color-mix(in srgb, var(--rc) 10%, transparent) 62%, transparent);
}
.lb-stage > img, .lb-stage > svg { display: block; width: 78%; height: 100%; object-fit: contain; transition: transform 200ms ease-out; }
.lb-stage > img { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35)); }
.lb-card:hover .lb-stage > img, .lb-card:hover .lb-stage > svg { transform: scale(1.05); }
.lb-stage.is-forged { border-radius: calc(10px * var(--round)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r-gold) 45%, transparent); }
.lb-stage-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.lb-stage-ico svg { width: 34px; height: 34px; }
.lb-step.no-item .lb-stage { background: none; }

.lb-ititle { max-width: 100%; min-width: 0; }
.lb-card .lb-iname { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.25 var(--font-body); }
.lb-p1 .lb-card .lb-iname { font-size: 19px; }
.lb-card .lb-dsub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-dim); }
.lb-noitem { color: var(--text-dim); }
.lb-acts-line { max-width: 100%; font-size: 12px; color: var(--text-faint); }
.lb-card .lb-value { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 6px; }
.lb-cap { font-size: 12px; color: var(--text-faint); }
.lb-num { font: 700 22px/1.15 var(--font-num); color: var(--text); white-space: nowrap; }
.lb-p1 .lb-num { font-size: 28px; color: var(--medal); }
.lb-cur { font-weight: 600; opacity: 0.75; }
.lb-note { font-size: 12px; color: var(--text-faint); }

/* пустое место: ниже, приглушённое, пунктирный силуэт скина */
.lb-step.is-empty .lb-card { --stage-h: 76px; border-style: dashed; border-width: 1.5px; border-color: var(--field-border); background: var(--surface); box-shadow: none; opacity: 0.75; padding-top: 34px; }
.lb-stage.is-ghost { background: none; color: var(--text-faint); }
.lb-stage.is-ghost > svg { width: 62%; }
.lb-free { color: var(--text-faint); font-size: 14px; font-weight: 500; }

/* таблица: миниатюра 64×48 на свечении редкости */
.lb-thumb {
  position: relative; display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 48px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rc) 35%, var(--line)); border-radius: calc(8px * var(--round));
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 36%, transparent), color-mix(in srgb, var(--rc) 8%, var(--surface-2)));
  transition: border-color 160ms, box-shadow 160ms;
}
.lb-thumb img, .lb-thumb svg { display: block; width: 88%; height: 88%; object-fit: contain; transition: transform 200ms ease-out; }
.lb-thumb.is-none { color: var(--text-faint); background: var(--surface-2); border-color: var(--line); }
.lb-thumb.is-none svg { width: 22px; height: 22px; }
.lb-table td.lb-val { white-space: nowrap; }
.lb-row { transition: background 160ms; }
.lb-row:hover td { background: color-mix(in srgb, var(--rc) 6%, transparent); }
.lb-row:hover .lb-thumb { border-color: var(--rc); box-shadow: 0 0 0 1px var(--rc), 0 4px 16px -6px var(--rc); }
.lb-row:hover .lb-thumb img { transform: scale(1.05); }

/* тултип скина */
.lb-tip {
  position: absolute; z-index: 60; display: flex; flex-direction: column; gap: 2px; max-width: 280px; padding: 9px 12px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--rc) 60%, var(--line)); border-radius: var(--radius-ui);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.55); pointer-events: none; font-size: 13px;
}
.lb-tip[hidden] { display: none; }
.lb-tip .lb-iname { white-space: normal; font-size: 14px; font-weight: 700; }
.lb-tip-sub { color: var(--text-dim); }
.lb-tip-date { color: var(--text-faint); font-size: 12px; }

/* планшет: три колонки, скины поменьше */
@media (max-width: 900px) {
  .lb-podium { gap: 10px; }
  .lb-p1 { --stage-h: 136px; }
  .lb-p2, .lb-p3 { --stage-h: 108px; }
  .lb-card, .lb-p1 .lb-card { padding: 14px 10px 12px; }
  .lb-card .lb-iname { font-size: 15px; }
  .lb-p1 .lb-card .lb-iname { font-size: 16px; }
  .lb-num { font-size: 18px; }
  .lb-p1 .lb-num { font-size: 22px; }
  .lb-by { max-width: calc(100% - 56px); }
}
/* телефон: подиум в одну колонку 1, 2, 3; карточка — скин слева, текст справа */
@media (max-width: 560px) {
  .lb-podium { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 10px; }
  .lb-step { order: 0; }
  .lb-p1 { --stage-h: 128px; }
  .lb-p2, .lb-p3 { --stage-h: 100px; }
  .lb-card, .lb-p1 .lb-card {
    display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-content: center; align-items: center;
    grid-template-areas: "stage by" "stage title" "stage sub" "stage acts" "stage value";
    gap: 2px 12px; margin-bottom: 0; padding: 12px; text-align: left; justify-items: start;
  }
  .lb-card > .lb-stage { grid-area: stage; margin: 0; }
  .lb-card > .lb-by { grid-area: by; max-width: 100%; justify-content: flex-start; min-height: 30px; }
  .lb-card > .lb-ititle { grid-area: title; justify-self: stretch; }
  .lb-card > .lb-dsub { grid-area: sub; justify-self: stretch; white-space: normal; }
  .lb-card > .lb-acts-line { grid-area: acts; }
  .lb-card > .lb-value { grid-area: value; align-items: flex-start; margin-top: 4px; }
  .lb-card > .lb-note { display: none; }
  .lb-stage > img, .lb-stage > svg { width: 92%; }
  .lb-corner { top: auto; bottom: 10px; right: 10px; }
  .lb-crown { top: -10px; left: 8px; width: 26px; height: 26px; transform: rotate(-14deg); }
  .lb-p1 .lb-medal { top: 14px; }
  .lb-step.is-empty .lb-card { --stage-h: 64px; grid-template-areas: "stage title"; padding-top: 12px; }
  .lb-step.is-empty .lb-free { grid-area: title; }
  .lb-card .lb-iname, .lb-p1 .lb-card .lb-iname { white-space: normal; font-size: 15px; }
  .lb-num { font-size: 18px; }
  .lb-p1 .lb-num { font-size: 22px; }
  .lb-tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-card:hover .lb-stage > img, .lb-card:hover .lb-stage > svg, .lb-row:hover .lb-thumb img { transform: none; }
  .lb-card, .lb-stage > img, .lb-stage > svg, .lb-thumb, .lb-thumb img, .lb-row { transition: none; }
}
@media (forced-colors: active) {
  .lb-card, .lb-p1 .lb-card { border-color: CanvasText; }
  .lb-step:not(.is-empty) .lb-card:hover { border-color: Highlight; }
}
/* ===== РЕЙТИНГИ: карточки со скином — конец блока ===== */

/* =====================================================================
   Вход: окно (nav.js openAuthModal), страницы приветствия и нового пароля, способы входа в профиле
   ===================================================================== */
.auth-modal { max-width: 420px; }
/* Steam и Google — одинаковые кнопки в два столбца (узкий экран — друг под другом), монохромные иконки */
.auth-providers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.auth-provider { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; text-decoration: none; text-align: center; line-height: 1.25; }
.auth-provider svg { flex: none; }
.auth-provider:disabled { opacity: .5; cursor: not-allowed; }
.auth-consent { margin: 18px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-faint); text-align: center; }
.auth-consent a { color: var(--text-dim); text-decoration: underline; }
.auth-consent a:hover { color: var(--accent); }
.auth-link { background: none; border: 0; padding: 0; align-self: flex-start; color: var(--accent); cursor: pointer; font: inherit; }
.auth-link:hover { text-decoration: underline; }
.auth-dev { margin-top: 14px; display: grid; gap: 8px; }
.auth-page { max-width: 440px; margin: 48px auto; }
.auth-page h1 { margin-bottom: 8px; }
.auth-avatar img { width: 64px; height: 64px; border-radius: 50%; display: block; }
.login-methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.login-method {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ui);
}
.login-method-name { font-weight: 600; min-width: 130px; }
.login-method-state { flex: 1; min-width: 0; color: var(--text-dim); overflow-wrap: anywhere; }
.login-method-state.on { color: var(--success); }
.login-method form { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.login-method form input { flex: 1 1 160px; }

/* «Мой Steam» — сегмент поля профиля (.sv-input) утилит Steam (ui.js mountMySteam) */
.sv-input:has(> .my-steam) { grid-template-columns: auto minmax(0, 1fr) auto 90px auto; }
.sv-input:has(> .my-steam):has(> .lp) { grid-template-columns: auto minmax(0, 1fr) auto 196px auto; }
.my-steam {
  display: inline-flex; align-items: center; gap: 6px; align-self: stretch; padding: 0 12px; margin: 0;
  border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--accent);
  font: 600 13px/1 var(--font-body); white-space: nowrap; cursor: pointer; text-decoration: none;
}
.my-steam:hover, .my-steam:focus-visible { background: var(--accent-soft); outline: none; }
.my-steam:disabled { opacity: 0.5; cursor: default; }
.my-steam-link { color: var(--text-dim); font-weight: 500; }
@media (max-width: 640px) {
  .sv-input:has(> .my-steam), .sv-input:has(> .my-steam):has(> .lp) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .my-steam span { display: none; } /* на телефоне — только иконка (подпись — в title и aria-label) */
}

/* Футер: блок «Поддержка» — почта и Telegram (контакты — public/js/site-config.js) */
.footer-support { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.footer-support-title { margin: 0 0 2px; font: 600 12px/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.footer-contact { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); transition: color 150ms; }
.footer-contact svg { flex: none; color: var(--accent); }
.footer-contact:hover, .footer-contact:focus-visible { color: var(--accent-strong); }

/* =====================================================================
   /privacy и /terms: документ — читаемая ширина строки, разделы с заголовками
   ===================================================================== */
.legal { max-width: 72ch; color: var(--text-dim); line-height: 1.65; padding-bottom: 32px; }
.legal-sec + .legal-sec { margin-top: 26px; }
.legal h2 { font-size: 18px; color: var(--text); margin: 0 0 8px; }
.legal p { margin: 0; }
.legal ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legal a { color: var(--accent); }
.legal-foot { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; display: grid; gap: 4px; }
.legal-updated { color: var(--text-faint); }