/* ==========================================================================
   EBASH — тема «Liquid Glass»
   Включается атрибутом <html data-theme="glass"> (переключатель в подвале, ?theme=glass или настройки профиля).
   Слои стекла: полупрозрачная заливка + backdrop-filter blur/saturate + тонкая
   кромка + внутренний блик (inset box-shadow) + мягкая внешняя тень.
   Преломление (SVG feDisplacementMap) включается классом lg-refract только в Chromium.
   ========================================================================== */

html:is([data-theme="glass"], [data-theme="glassdark"]) {
  --bg: #070816;
  --bg-2: rgba(255, 255, 255, .06);
  --panel: rgba(255, 255, 255, .075);
  --panel-2: rgba(255, 255, 255, .10);
  --panel-3: rgba(255, 255, 255, .16);
  --line: rgba(255, 255, 255, .14);
  --line-2: rgba(255, 255, 255, .24);
  --text: #f6f7fb;
  --text-2: rgba(246, 247, 251, .82);
  --muted: rgba(246, 247, 251, .58);
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 18px 50px rgba(2, 3, 14, .55);

  --glass-blur: blur(22px) saturate(180%);
  --glass-edge: inset 0 1px 1px rgba(255, 255, 255, .42), inset 0 -1px 1px rgba(255, 255, 255, .08), inset 0 0 22px rgba(255, 255, 255, .035);
  --glass-drop: 0 10px 34px rgba(2, 3, 14, .35);

  --glass-pop: rgba(22, 24, 50, .70);
  --glass-solid: #181a30;
  --glass-veil: rgba(4, 5, 16, .55);
  --glass-hi: rgba(255, 255, 255, .42);

  color-scheme: dark;
  background: var(--bg);
}

/* ---------- Светлый вариант (основной): яркие пастельные капли, белое стекло, тёмный текст ---------- */
html[data-theme="glass"] {
  --bg: #e4ebfb;
  --bg-2: rgba(255, 255, 255, .38);
  --panel: rgba(255, 255, 255, .46);
  --panel-2: rgba(255, 255, 255, .58);
  --panel-3: rgba(255, 255, 255, .78);
  --line: rgba(40, 55, 110, .13);
  --line-2: rgba(40, 55, 110, .24);
  --text: #131a33;
  --text-2: rgba(19, 26, 51, .84);
  --muted: rgba(19, 26, 51, .58);
  --hi: #080d22;
  --orange: #f2590f; --orange-2: #ff7a2e; --accent-rgb: 242, 89, 15;
  --green: #1f9d45; --green-2: #23a94c; --red: #e0384a; --blue: #1f63d1;
  --good: #1f9d45; --mid: #d98a00; --bad: #e0384a; --lime: #5f9e00; --price: #2c8a00; --disc-bg: #23a94c; --disc-fg: #fff;
  --good-rgb: 31, 157, 69; --bad-rgb: 224, 56, 74; --warn-rgb: 217, 138, 0; --info-rgb: 31, 99, 209;
  --panel-rgb: 255, 255, 255; --bg-rgb: 228, 235, 251; --ink-rgb: 19, 26, 51;
  --link: #1f5fd1; --link-hi: #123f96;
  --shadow: 0 18px 50px rgba(50, 70, 140, .22);
  --glass-edge: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .5), inset 0 0 22px rgba(255, 255, 255, .25);
  --glass-drop: 0 10px 30px rgba(60, 80, 150, .18);
  --glass-pop: rgba(255, 255, 255, .74);
  --glass-solid: #f4f7ff;
  --glass-veil: rgba(70, 90, 150, .32);
  --sb-thumb: rgba(60, 80, 140, .35); --sb-thumb-hover: rgba(60, 80, 140, .55);
  color-scheme: light;
}
html[data-theme="glass"] body::before {
  background:
    radial-gradient(38% 34% at 14% 18%, rgba(255, 150, 80, .70), transparent 70%),
    radial-gradient(34% 40% at 86% 12%, rgba(150, 130, 255, .65), transparent 70%),
    radial-gradient(40% 38% at 72% 88%, rgba(60, 200, 230, .60), transparent 70%),
    radial-gradient(32% 34% at 8% 88%, rgba(255, 120, 180, .50), transparent 70%),
    radial-gradient(30% 30% at 48% 52%, rgba(120, 150, 255, .35), transparent 70%);
}

/* ---------- Фон: цветные «капли», сквозь которые видно стекло ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]) body { background: transparent; }
html:is([data-theme="glass"], [data-theme="glassdark"]) body::before {
  content: ""; position: fixed; z-index: -1; inset: -15%; pointer-events: none;
  background:
    radial-gradient(38% 34% at 14% 18%, rgba(255, 107, 26, .62), transparent 70%),
    radial-gradient(34% 40% at 86% 12%, rgba(124, 108, 255, .60), transparent 70%),
    radial-gradient(40% 38% at 72% 88%, rgba(26, 176, 205, .50), transparent 70%),
    radial-gradient(32% 34% at 8% 88%, rgba(255, 58, 140, .40), transparent 70%),
    radial-gradient(30% 30% at 48% 52%, rgba(70, 90, 255, .28), transparent 70%);
  animation: lg-drift 36s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes lg-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
html:is([data-theme="glass"], [data-theme="glassdark"]) ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-color: transparent; }

/* ---------- Общая «стеклянная» поверхность ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]) :is(.header, .sidebar, .card, .genre, .filters, .spec, .req > div, .community, .detail-card, .swatch, .search__drop, .modal__box, .toast, .mnav, .hero__thumb) {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-drop);
}

/* ---------- Шапка и сайдбар — плавающие стеклянные плашки ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]) .header {
  inset: 10px 12px auto 12px; height: calc(var(--header-h) - 12px); padding-right: 14px;
  border: 1px solid var(--line); border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06));
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .sidebar {
  top: calc(var(--header-h) + 6px); bottom: 12px; left: 12px; width: calc(var(--sidebar-w) - 12px);
  border: 1px solid var(--line); border-radius: 26px; background: var(--bg-2); padding: 12px 0 18px;
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-nav a { margin: 2px 10px; padding: 0 14px; height: 42px; border-radius: 14px; gap: 14px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-nav a:hover { background: rgba(255, 255, 255, .09); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-nav a.active {
  color: var(--hi); background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .09));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 0 4px 16px rgba(255, 107, 26, .25);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-nav a.active::before { display: none; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-title { margin-left: 24px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-genres a { margin: 0 10px; padding: 0 14px; border-radius: 10px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-genres a:hover { background: rgba(255, 255, 255, .07); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-extra { border-radius: 18px; background: linear-gradient(135deg, rgba(255, 107, 26, .28), rgba(124, 108, 255, .24)); box-shadow: var(--glass-edge); }

/* ---------- Поиск, вход ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]) .search__box {
  background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); border-radius: 999px; padding-left: 18px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), inset 0 -1px 1px rgba(255, 255, 255, .12);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .search__box:focus-within { border-color: rgba(255, 255, 255, .55); box-shadow: 0 0 0 3px rgba(255, 138, 61, .25), inset 0 1px 2px rgba(0, 0, 0, .25); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .search__drop { background: var(--glass-pop); border-radius: 22px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .search__item { border-radius: 14px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .login,{
  background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .26); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .login:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }

/* ---------- Кнопки ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]) .btn { border-radius: 999px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .btn--primary {
  background: linear-gradient(180deg, rgba(255, 150, 80, .92), rgba(255, 98, 20, .78));
  border-color: rgba(255, 220, 190, .55);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -2px 6px rgba(160, 50, 0, .35), 0 8px 26px rgba(255, 107, 26, .42);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .btn--ghost, html:is([data-theme="glass"], [data-theme="glassdark"]) .btn--dark {
  background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .28); color: var(--hi);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .42), 0 6px 20px rgba(2, 3, 14, .25);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .btn--ghost:hover, html:is([data-theme="glass"], [data-theme="glassdark"]) .btn--dark:hover { background: rgba(255, 255, 255, .19); border-color: rgba(255, 255, 255, .55); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .game-actions .btn--icon.on { background: linear-gradient(180deg, rgba(255, 150, 80, .92), rgba(255, 98, 20, .78)); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .dl {
  border-radius: 50%; background: linear-gradient(180deg, rgba(80, 224, 120, .92), rgba(40, 175, 80, .8));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -2px 5px rgba(0, 90, 30, .35), 0 6px 18px rgba(47, 191, 85, .35);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .chip { border-radius: 999px; background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .20); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .badge { border-radius: 999px; background: rgba(255, 107, 26, .88); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .badge--sale { background: rgba(47, 191, 85, .88); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .kbd { border-radius: 8px; border-color: rgba(255, 255, 255, .22); }

/* ---------- Hero ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]) .hero {
  margin: 12px 20px 0 26px; border-radius: 32px; background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -1px 1px rgba(255, 255, 255, .1), 0 24px 60px rgba(2, 3, 14, .5);
  outline: 1px solid rgba(255, 255, 255, .18); outline-offset: -1px;
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__bg::after {
  background: linear-gradient(90deg, rgba(7, 8, 22, .82) 0%, rgba(7, 8, 22, .38) 40%, rgba(7, 8, 22, 0) 68%),
              linear-gradient(0deg, rgba(7, 8, 22, .55) 0%, rgba(7, 8, 22, 0) 30%);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__thumbs { right: 22px; top: 70px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__thumb { border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; background: rgba(255, 255, 255, .09); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__thumb:hover { background: rgba(255, 255, 255, .17); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__thumb.active::before { left: -9px; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .8); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__thumb .t-img { border-radius: 11px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__dots { padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__dots button.active { background: #fff; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__arrow { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ---------- Секции, вкладки ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]) .section__title .ic { color: #ffb27a; filter: drop-shadow(0 0 8px rgba(255, 138, 61, .6)); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .tabs {
  display: inline-flex; max-width: 100%; padding: 5px; gap: 4px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .tabs button { padding: 8px 16px; border-radius: 999px; transition: background .15s, color .15s; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .tabs button:hover { background: rgba(255, 255, 255, .08); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .tabs button.active { background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .12)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), 0 3px 12px rgba(2, 3, 14, .3); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .tabs button.active::after { display: none; }

/* ---------- Карточки ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]) .card { padding: 6px; border-color: rgba(255, 255, 255, .16); border-radius: 24px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card__media { border-radius: 18px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card__media::after { background: linear-gradient(0deg, rgba(7, 8, 22, .88) 0%, rgba(7, 8, 22, .42) 28%, rgba(7, 8, 22, 0) 55%); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card:hover, html:is([data-theme="glass"], [data-theme="glassdark"]) .card.is-hover {
  border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12);
  box-shadow: var(--glass-edge), 0 18px 44px rgba(2, 3, 14, .5), 0 0 34px rgba(255, 138, 61, .22);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .card.is-selected { border-color: rgba(255, 255, 255, .7); box-shadow: var(--glass-edge), 0 0 0 2px rgba(255, 138, 61, .8), 0 0 30px var(--orange-glow); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card__body { padding: 8px 8px 8px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card__fav { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card__fav:hover { background: rgba(255, 255, 255, .3); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card.is-fav .card__fav { background: rgba(255, 107, 26, .9); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card__progress .bar { background: rgba(255, 255, 255, .16); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card.is-downloading .state-btn, html:is([data-theme="glass"], [data-theme="glassdark"]) .card.is-paused .state-btn, html:is([data-theme="glass"], [data-theme="glassdark"]) .card.is-installed .state-btn { border-radius: 50%; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }

/* ---------- Жанры, подборки, сообщество ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]) .genre { border-radius: 22px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .genre:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); box-shadow: var(--glass-edge), 0 12px 30px color-mix(in srgb, var(--g, #ff6b1a) 30%, transparent); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .collection { border-radius: 22px; border-color: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), var(--glass-drop); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .community { background: linear-gradient(120deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .05)); border-radius: 28px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .community__stat .sq { border-radius: 14px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .community__stat .sq.alt { background: rgba(255, 255, 255, .16); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .community__ic { border-color: rgba(120, 175, 255, .9); color: #9cc4ff; box-shadow: inset 0 0 14px rgba(58, 139, 255, .3), 0 0 16px rgba(58, 139, 255, .3); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .footer { border-top-color: var(--line); }

/* ---------- Каталог ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]) .filters { border-radius: 26px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .select select, html:is([data-theme="glass"], [data-theme="glassdark"]) .check {
  border-radius: 999px; background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .select select { padding-left: 16px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .select select option { background: var(--glass-solid); color: var(--text); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .select select:focus { border-color: rgba(255, 255, 255, .55); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .check { padding: 0 16px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .empty { border-radius: 26px; background: rgba(255, 255, 255, .05); border-color: var(--line-2); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .pagination a, html:is([data-theme="glass"], [data-theme="glassdark"]) .pagination span { border-radius: 50%; background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .22); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .pagination span { background: none; box-shadow: none; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .pagination a.active { background: linear-gradient(180deg, rgba(255, 150, 80, .92), rgba(255, 98, 20, .78)); border-color: rgba(255, 220, 190, .55); color: #fff; }

/* ---------- Страница игры ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]) .game-hero__bg { opacity: .55; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .game-hero__bg::after { background: linear-gradient(0deg, rgba(7, 8, 22, .35) 0%, rgba(7, 8, 22, .55) 60%, rgba(7, 8, 22, .45)); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .game-cover { border-radius: 30px; border-color: rgba(255, 255, 255, .3); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), var(--shadow); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .game-cover .play { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 10px 30px rgba(2, 3, 14, .4); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .game-cover .play:hover { background: rgba(255, 107, 26, .85); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .rating { background: rgba(47, 191, 85, .22); border-radius: 999px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .spec { border-radius: 20px; background: rgba(255, 255, 255, .08); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .shot { border-radius: 20px; border-color: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .req > div { border-radius: 26px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .files td { border-bottom-color: var(--line); }

/* ---------- Модалка, тост, мобильное меню ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]) .modal { background: var(--glass-veil); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .modal__box { background: var(--glass-pop); border-radius: 30px; border-color: rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(34px) saturate(190%); backdrop-filter: blur(34px) saturate(190%); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .field input { border-radius: 999px; background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); padding: 0 18px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .field input:focus { border-color: rgba(255, 255, 255, .6); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .toast { background: var(--glass-pop); border-radius: 999px; border-color: rgba(255, 255, 255, .26); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .lightbox { background: rgba(4, 5, 16, .86); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .lightbox__in { border-radius: 26px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .overlay { background: var(--glass-veil); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ==========================================================================
   Классы живого сайта EBASH
   ========================================================================== */
html:is([data-theme="glass"], [data-theme="glassdark"]) :is(.panel, .wl-item, .admin-card, .minireview, .usermenu__drop, .cookiebar, .faq__item, .reqs__pane, .fitbox, .gallery__nav) {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-drop);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) :is(.panel, .wl-item, .admin-card, .minireview, .faq__item, .reqs__pane, .fitbox) { border-radius: 24px; border-color: var(--line); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .panel__title .ic { color: #ffb27a; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .usermenu__btn { border-radius: 999px; background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .26); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .usermenu__drop { background: var(--glass-pop); border-radius: 22px; border-color: rgba(255, 255, 255, .22); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .usermenu__drop a, html:is([data-theme="glass"], [data-theme="glassdark"]) .usermenu__drop button { border-radius: 14px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .usermenu__drop a:hover, html:is([data-theme="glass"], [data-theme="glassdark"]) .usermenu__drop button:hover { background: rgba(255, 255, 255, .12); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .pc-chip { border-radius: 999px; background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .logo__mark { border-radius: 12px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 6px 18px rgba(255, 107, 26, .45); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .cookiebar { background: var(--glass-pop); border-radius: 26px; border-color: rgba(255, 255, 255, .26); padding-left: 22px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .toast { background: var(--glass-pop); border-radius: 22px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-more summary { margin: 0 10px; border-radius: 12px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-more summary:hover { background: rgba(255, 255, 255, .07); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-nav__ic { border-radius: 12px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .nav-badge { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-extra { margin-left: 12px; margin-right: 12px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .score, html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__score, html:is([data-theme="glass"], [data-theme="glassdark"]) .steambig, html:is([data-theme="glass"], [data-theme="glassdark"]) .card__steam {
  border-radius: 14px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .quick__btn { border-radius: 999px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .gallery__item { border-radius: 20px; border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35); overflow: hidden; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .gallery__nav, html:is([data-theme="glass"], [data-theme="glassdark"]) .gallery__play { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card__img, html:is([data-theme="glass"], [data-theme="glassdark"]) .t-img { border-radius: inherit; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__scores { border-radius: 14px; }

/* переключатель оформления в подвале */
html:is([data-theme="glass"], [data-theme="glassdark"]) .themepick__opt { border-radius: 12px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .themepick__sw { border-radius: 10px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35); }

/* ==========================================================================
   Исправления: поп-апы, селекты, аккордеон, требования
   ========================================================================== */
/* поверхности поверх контента — плотнее, чтобы текст и картинки под ними не мешали */
html:is([data-theme="glass"], [data-theme="glassdark"]) :is(.pop, .cs-pop) {
  background: var(--glass-pop); border-color: var(--line-2); border-radius: 22px;
  -webkit-backdrop-filter: blur(32px) saturate(190%); backdrop-filter: blur(32px) saturate(190%);
  box-shadow: var(--glass-edge), 0 24px 60px rgba(20, 30, 80, .35);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .pop__shots { background: transparent; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .pop__shots img { background: var(--panel-3); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .pop__body { padding: 14px 16px 16px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .cs-btn { border-radius: 999px; padding-left: 16px; background: var(--panel-2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .cs-btn:hover { background: var(--panel-3); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .cs-pop { padding: 8px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .cs-search { border-radius: 999px; background: var(--panel-2); padding: 0 14px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .cs-list { padding: 2px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .cs-opt { border-radius: 14px; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .cs-opt.active { background: var(--panel-3); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .cs-group { padding-left: 12px; }

/* аккордеон «Частые вопросы» и требования — плоские вставки внутри панели, без вложенного стекла */
html:is([data-theme="glass"], [data-theme="glassdark"]) :is(.faq__item, .reqs__pane) {
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .faq__item { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 12px 16px; margin-top: 8px; transition: background .2s, border-color .2s; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .faq__item:first-of-type { margin-top: 0; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .faq__item[open] { background: var(--panel-2); border-color: var(--line-2); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .faq__item summary { list-style-position: inside; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .reqs__pane { border: 0; border-radius: 0; background: none; padding: 0; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .fitbox { border-radius: 24px; }

/* ==========================================================================
   Светлый вариант: уточнения
   ========================================================================== */
html[data-theme="glass"] .header { background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .46)); }
html[data-theme="glass"] .search__box, html[data-theme="glass"] .login, html[data-theme="glass"] .usermenu__btn, html[data-theme="glass"] .pc-chip { background: rgba(255, 255, 255, .6); border-color: rgba(40, 55, 110, .16); color: var(--text); }
html[data-theme="glass"] .search__box { box-shadow: inset 0 1px 2px rgba(60, 80, 150, .15), inset 0 -1px 1px rgba(255, 255, 255, .9); }
html[data-theme="glass"] :is(.chip, .tabs, .select select, .check, .field input, .cs-btn) { background: rgba(255, 255, 255, .6); border-color: rgba(40, 55, 110, .16); }
html[data-theme="glass"] .chip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); color: var(--text-2); }
html[data-theme="glass"] .tabs button.active { background: #fff; box-shadow: 0 3px 12px rgba(60, 80, 150, .22); color: var(--hi); }
html[data-theme="glass"] .side-nav a.active { background: #fff; box-shadow: 0 4px 16px rgba(242, 89, 15, .2), inset 0 1px 1px #fff; }
html[data-theme="glass"] .btn--ghost, html[data-theme="glass"] .btn--dark { background: rgba(255, 255, 255, .6); border-color: rgba(40, 55, 110, .2); box-shadow: inset 0 1px 1px #fff, 0 6px 20px rgba(60, 80, 150, .15); }
html[data-theme="glass"] :is(.hero, .game-cover) .btn--ghost { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
html[data-theme="glass"] .card { border-color: rgba(255, 255, 255, .8); }
html[data-theme="glass"] .card:hover, html[data-theme="glass"] .card.is-hover { background: rgba(255, 255, 255, .72); border-color: #fff; box-shadow: var(--glass-edge), 0 18px 44px rgba(60, 80, 150, .28), 0 0 34px rgba(255, 138, 61, .25); }
html[data-theme="glass"] .mnav { background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5)); border-color: rgba(255, 255, 255, .9); }
html[data-theme="glass"] .mnav a.active { background: #fff; }
html[data-theme="glass"] .cookiebar, html[data-theme="glass"] .toast { border-color: rgba(255, 255, 255, .9); }
html[data-theme="glass"] .hero { outline-color: rgba(255, 255, 255, .8); }
html[data-theme="glass"] .hero__dots { background: rgba(255, 255, 255, .22); }
html[data-theme="glass"] .section__title .ic, html[data-theme="glass"] .panel__title .ic { color: var(--orange); filter: none; }
html[data-theme="glass"] .logo__text, html[data-theme="glass"] .logo__main { color: var(--hi); }
html[data-theme="glass"] .genre:hover { background: rgba(255, 255, 255, .8); }
html[data-theme="glass"] .community { background: linear-gradient(120deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .34)); }
html[data-theme="glass"] .side-extra { background: linear-gradient(135deg, rgba(255, 138, 61, .3), rgba(150, 130, 255, .26)); }
html[data-theme="glass"] .faq__item { background: rgba(255, 255, 255, .5); }
html[data-theme="glass"] .faq__item[open] { background: rgba(255, 255, 255, .8); }

/* ==========================================================================
   Анимации «жидкого» стекла: пружинные нажатия, блик за курсором, появление
   ========================================================================== */
html:is([data-theme="glass"], [data-theme="glassdark"]) .card { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), border-color .2s, box-shadow .3s, background-color .25s; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card:hover, html:is([data-theme="glass"], [data-theme="glassdark"]) .card.is-hover { transform: translateY(-5px) scale(1.012); }
html:is([data-theme="glass"], [data-theme="glassdark"]) :is(.card, .panel):hover {
  background-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .24), transparent 62%);
}
html:is([data-theme="glass"], [data-theme="glassdark"]) .btn { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), filter .15s, background .15s, border-color .15s, box-shadow .2s; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .btn:hover { transform: translateY(-1px) scale(1.03); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .btn:active { transform: scale(.94); }
html:is([data-theme="glass"], [data-theme="glassdark"]) :is(.dl, .quick__btn, .header__icon, .hero__thumb, .tabs button, .side-nav a, .themepick__opt) { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .2s, border-color .2s, box-shadow .2s, color .2s; }
html:is([data-theme="glass"], [data-theme="glassdark"]) :is(.dl, .quick__btn):hover { transform: scale(1.1); }
html:is([data-theme="glass"], [data-theme="glassdark"]) :is(.dl, .quick__btn):active { transform: scale(.9); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .themepick__opt:hover { transform: scale(1.12); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .side-nav a:hover { transform: translateX(3px); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .usermenu__drop, html:is([data-theme="glass"], [data-theme="glassdark"]) .cs-pop.open, html:is([data-theme="glass"], [data-theme="glassdark"]) .search.open .search__drop { animation: lg-pop .35s cubic-bezier(.34, 1.4, .64, 1); transform-origin: top right; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .pop { animation: lg-pop .3s cubic-bezier(.34, 1.4, .64, 1); }
html:is([data-theme="glass"], [data-theme="glassdark"]) :is(.toast, .cookiebar) { animation: lg-pop .5s cubic-bezier(.34, 1.4, .64, 1); }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card { animation: lg-in .6s cubic-bezier(.22, 1, .36, 1) backwards; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card:nth-child(2) { animation-delay: .04s; } html:is([data-theme="glass"], [data-theme="glassdark"]) .card:nth-child(3) { animation-delay: .08s; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card:nth-child(4) { animation-delay: .12s; } html:is([data-theme="glass"], [data-theme="glassdark"]) .card:nth-child(5) { animation-delay: .16s; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .card:nth-child(n+6) { animation-delay: .2s; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__slide.active .hero__content { animation: lg-in .8s cubic-bezier(.22, 1, .36, 1) backwards; }
html:is([data-theme="glass"], [data-theme="glassdark"]) .faq__item[open] p { animation: lg-in .35s ease-out; }
@keyframes lg-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes lg-pop {
  from { opacity: 0; transform: scale(.9) translateY(-6px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  html:is([data-theme="glass"], [data-theme="glassdark"]) *, html:is([data-theme="glass"], [data-theme="glassdark"]) *::before, html:is([data-theme="glass"], [data-theme="glassdark"]) *::after { animation: none !important; transition: none !important; }
}

/* ---------- Преломление края (только Chromium, класс ставит JS) ---------- */
html:is([data-theme="glass"], [data-theme="glassdark"]).lg-refract :is(.toast, .modal__box, .hero__thumb, .search__drop) {
  -webkit-backdrop-filter: url(#lg-refract) blur(14px) saturate(180%);
  backdrop-filter: url(#lg-refract) blur(14px) saturate(180%);
}
html:is([data-theme="glass"], [data-theme="glassdark"]).lg-refract :is(.header, .mnav, .btn--ghost, .card__fav, .login, .hero__dots, .hero__arrow) {
  -webkit-backdrop-filter: url(#lg-refract-s) blur(8px) saturate(180%);
  backdrop-filter: url(#lg-refract-s) blur(8px) saturate(180%);
}

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width: 960px) {
  html:is([data-theme="glass"], [data-theme="glassdark"]) .header { inset: 8px 8px auto 8px; height: calc(var(--header-h) - 10px); border-radius: 22px; gap: 8px; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .sidebar { top: 8px; bottom: 8px; left: 8px; width: 270px; transform: translateX(calc(-100% - 16px)); }
  html:is([data-theme="glass"], [data-theme="glassdark"]) body.menu-open .sidebar { transform: none; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .hero { margin: 10px 12px 0; border-radius: 26px; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .mnav {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 62px; padding-bottom: 0;
    border: 1px solid var(--line-2); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .07));
  }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .mnav a { border-radius: 22px; margin: 5px 2px; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .mnav a.active { color: var(--hi); background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45); }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .toast { bottom: 88px; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) body::before { animation: none; }
}
@media (max-width: 640px) {
  html:is([data-theme="glass"], [data-theme="glassdark"]) .hero { margin: 8px 8px 0; border-radius: 24px; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__content { padding-left: 20px; padding-right: 20px; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .tabs { margin: 0 -16px; padding: 5px 10px; border-radius: 0; border-left: 0; border-right: 0; display: flex; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .card { border-radius: 20px; padding: 5px; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .card__media { border-radius: 15px; }
  /* на телефоне слабое железо: меньше размытие */
  html:is([data-theme="glass"], [data-theme="glassdark"]) { --glass-blur: blur(14px) saturate(160%); }
}
/* узкие экраны: кнопки героя не обрезаются, а переносятся */
@media (max-width: 640px) {
  html:is([data-theme="glass"], [data-theme="glassdark"]) .hero { margin: 8px 8px 0; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__content { padding-left: 16px; padding-right: 16px; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__actions { flex-wrap: nowrap; gap: 8px; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__actions .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; gap: 5px; font-size: 11px; letter-spacing: .2px; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .hero__actions .btn .ic:last-child:not(:first-child) { display: none; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .tabs::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:is([data-theme="glass"], [data-theme="glassdark"]) body::before { animation: none; }
}
/* Без поддержки backdrop-filter — делаем панели плотнее, чтобы текст читался */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:is([data-theme="glass"], [data-theme="glassdark"]) { --panel: rgba(30, 32, 60, .88); --panel-2: rgba(40, 43, 76, .9); --bg-2: rgba(22, 24, 48, .92); }
  html:is([data-theme="glass"], [data-theme="glassdark"]) .header, html:is([data-theme="glass"], [data-theme="glassdark"]) .mnav, html:is([data-theme="glass"], [data-theme="glassdark"]) .modal__box, html:is([data-theme="glass"], [data-theme="glassdark"]) .search__drop { background: var(--glass-solid); }
}