/* ==========================================================================
   Темы в духе Liquid Glass из Telegram для iOS (просьбы владельца 28.10.2026):
   прозрачные элементы, под которыми размыт фон, и мягкий блик по краю — свет
   будто преломляется в стекле. При нажатии элемент на миг «надувается», как
   капля стекла.

   * `data-theme="dark"`  — тёмно-синяя, как ночная тема Telegram ;
   * `data-theme="glass"` — «Сталь»: серо-голубой градиент (образец владельца);
   * `data-theme="lime"`  — «Лайм»: жёлто-зелёный градиент (образец владельца), по умолчанию;
   * `data-theme="sea"`   — «Море»: мятно-голубой градиент, значки белые;
   * без атрибута         — «Изумрудное сукно».

   Стол с сукном не меняется: там своя палитра, её задают скины стола.
   ========================================================================== */

/* ------------------------------------------------- сталь и лайм: светлое стекло */

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"]) {
  --bg: #8c98a6;
  --bg-secondary: #8c98a6;
  --text: #13171d;
  --on-bg: #13171d;
  --on-bg-hint: rgba(19, 23, 29, 0.58);
  --line-on-bg: rgba(19, 23, 29, 0.14);
  --hint: #565d68;
  --separator: rgba(19, 23, 29, 0.1);
  --pill: rgba(255, 255, 255, 0.4);
  --pill-text: #13171d;

  --glass-fill: rgba(255, 255, 255, 0.42);
  --glass-fill-strong: rgba(244, 246, 249, 0.82);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --glass-sheen: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0) 62%,
    rgba(255, 255, 255, 0.25) 100%
  );
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    0 12px 28px -16px rgba(20, 26, 36, 0.55);
  --glass-backdrop: linear-gradient(180deg, #97a3b1 0%, #747e8c 100%);
  --glass-grid: transparent;
}

:root[data-theme="lime"] {
  --bg: #9cc571;
  --bg-secondary: #9cc571;
  --text: #13240f;
  --on-bg: #13240f;
  --on-bg-hint: rgba(19, 36, 15, 0.62);
  --line-on-bg: rgba(19, 36, 15, 0.14);
  --hint: #3f5a37;
  --glass-backdrop: linear-gradient(180deg, #c3cb6e 0%, #6dbd77 100%);
}

/* ------------------------------------------------- тёмная, как в Telegram */

:root[data-theme="dark"] {
  --bg: #17212b;
  --bg-secondary: #17212b;
  --text: #ffffff;
  --on-bg: #ffffff;
  --on-bg-hint: rgba(255, 255, 255, 0.6);
  --line-on-bg: rgba(255, 255, 255, 0.09);
  --hint: #8d9aa8;
  --separator: rgba(255, 255, 255, 0.08);
  --pill: rgba(255, 255, 255, 0.08);
  --pill-text: #ffffff;
  --section-bg: #1f2b38;
  --surface-strong: rgba(255, 255, 255, 0.08);

  --glass-fill: rgba(36, 48, 62, 0.62);
  --glass-fill-strong: rgba(30, 41, 54, 0.9);
  --glass-edge: rgba(255, 255, 255, 0.1);
  --glass-sheen: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0) 70%,
    rgba(255, 255, 255, 0.05) 100%
  );
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px -16px rgba(0, 0, 0, 0.7);
  --glass-backdrop:
    radial-gradient(80% 50% at 15% 0%, rgba(42, 120, 196, 0.22), transparent 70%),
    radial-gradient(70% 50% at 100% 100%, rgba(60, 90, 160, 0.18), transparent 70%),
    linear-gradient(180deg, #1a2532 0%, #121a23 100%);
  --glass-grid: transparent;
}

/* ------------------------------------------------------- общее для стекла */

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) {
  --header-bg: transparent;
  --accent: #3e9bf0;
  --link: #3e9bf0;
  --button: #2a8bf2;
  --button-text: #ffffff;
  --card-line: var(--glass-edge);
  --hub-icon: #ffffff;
  --glass-blur: blur(22px) saturate(170%);
  --shadow-ui: var(--glass-shadow);
  /* «Надувание» при нажатии: пружина с лёгким перелётом, как капля стекла */
  --glass-press: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Фон приложения и заставки: градиент темы, у серой — ещё и сетка */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) body,
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .boot {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--glass-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--glass-grid) 1px, transparent 1px),
    var(--glass-backdrop);
  /* Размер у каждого слоя свой: сетка — клетками, градиенты — во весь экран */
  background-size:
    32px 32px,
    32px 32px,
    100% 100%,
    100% 100%,
    100% 100%;
  background-attachment: fixed;
}

/* Поверхности — стекло: всё, что раньше было белой карточкой */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"])
  :is(
    .section,
    .good,
    .profile-head,
    .profile-card,
    .quest-card,
    .quest-bot,
    .private-card,
    .rules__item,
    .ach-all,
    .first-bonus,
    .wallet,
    .filters-btn,
    .pcard__totals,
    .rating-block,
    .chips,
    .seg,
    .period-switch,
    .topbar__back,
    .app-tabbar,
    .create-private,
    .hub-head,
    .theme-dots,
    .fbar,
    .ach-total,
    .friends-invite,
    .friends-search
  ) {
  background-color: var(--glass-fill);
  background-image: var(--glass-sheen);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  color: var(--text);
}

/* Окна и шторки — то же стекло, но плотнее: текст поверх экрана должен читаться */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) :is(.modal, .sheet, .popover) {
  background-color: var(--glass-fill-strong);
  background-image: var(--glass-sheen);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-edge);
  color: var(--text);
}

:root[data-theme="dark"] :is(.modal, .sheet, .popover) .player-card__cell,
:root[data-theme="dark"] :is(.modal, .sheet, .popover) .player-card__skeleton {
  background: rgba(255, 255, 255, 0.06);
}

/* Таб-бар — плавающая стеклянная пилюля, как в Telegram для iOS */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .app-tabbar {
  border-radius: 32px;
}

/* Выбранный сегмент — капля стекла поярче */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .has-pill::before {
  background-color: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 12px -6px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] .has-pill::before {
  background-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

:root[data-theme="dark"] :is(.period-switch__item, .chip) {
  color: var(--hint);
}

:root[data-theme="dark"] :is(.period-switch__item, .chip):is([aria-selected="true"], [aria-pressed="true"]) {
  color: #ffffff;
}

/* Главные кнопки — синие Telegram с бликом сверху */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) :is(.btn--primary, .good .btn, .screen--create .create-go) {
  background-color: var(--button);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 55%);
  color: var(--button-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 18px -10px rgba(36, 129, 204, 0.8);
}

/* ------------------------------------------------------------- главная */

/* Шапка — один стеклянный пузырь на всю ширину (образец владельца 28.10.2026):
   слева аватар, имя и рейтинг, справа валюты овалами с «+» внутри */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .hub-head {
  /* Две строки валют: скругление меньше половины высоты и отступ справа,
     иначе овалы валют упираются в изгиб края */
  padding: 8px 12px 8px 8px;
  border-radius: 30px;
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .hub-head__me {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .hub-head__wallet {
  gap: 4px;
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .hub-head__row {
  gap: 0;
  padding: 3px 3px 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-edge);
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"]) .hub-head__row {
  background: rgba(255, 255, 255, 0.35);
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .hub-head__row .hub-head__balance {
  min-width: 78px;
  padding: 0 6px 0 0;
  border: 0;
  background: none;
  box-shadow: none;
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .hub-head__plus {
  width: 24px;
  height: 24px;
}

/* Плитки — без карточек, разделены тонкими линиями, как раньше */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .hub-tile {
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .hub-tile__icon {
  border: 0;
  background: linear-gradient(180deg, #5cb8ff 0%, #2a85ec 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 14px -8px rgba(36, 129, 204, 0.9);
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .hub-quick__icon .glyph {
  color: #3e9bf0;
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .hub-tile__alert {
  box-shadow: 0 0 0 2px var(--bg);
}

/* ------------------------------------------------------ создание игры */

/* Невыбранные варианты — цветом текста темы, выбранные — красным, как было */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"])
  :is(.screen--create, .filters-page, .screen--leaders)
  :is(.seg__item, .mode-tile, .pick):not([aria-pressed="true"]) {
  color: var(--text);
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"]) :is(.screen--create, .filters-page) :is(.mode-tile, .pick) {
  background-color: rgba(255, 255, 255, 0.3);
}

:root[data-theme="dark"] :is(.screen--create, .filters-page) :is(.mode-tile, .pick) {
  background-color: rgba(255, 255, 255, 0.06);
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"])
  :is(.screen--create, .filters-page)
  :is(.mode-tile, .pick)[aria-pressed="true"] {
  background-color: #ffffff;
  color: #d4232a;
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .screen--create :is(h3, .bet-slider__title, .bet-slider__marks) {
  color: var(--on-bg);
}

/* --------------------------------------------- лобби: тексты и фильтры */

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) :is(.screen--lobby, .lobby) :is(h2, h3, .empty__title) {
  color: var(--on-bg);
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) :is(.empty__text, .muted) {
  color: var(--on-bg-hint);
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) :is(.filters-btn, .fbar) {
  color: var(--on-bg);
}

/* Полоса фильтров в две строки: скругление как у карточки, а не у пилюли —
   иначе значки выпирают за края */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .fbar {
  border-radius: 24px;
  padding: 10px 14px;
}

/* --------------------------------------------- переключатель темы */

/* Кружки цвета тем — в шапке профиля справа */
.theme-dots {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: var(--pill);
}

.theme-dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition:
    transform 220ms var(--glass-press, cubic-bezier(0.34, 1.56, 0.64, 1)),
    border-color 160ms ease;
}

.theme-dot[aria-pressed="true"] {
  border-color: #3e9bf0;
}

.theme-dot--dark {
  background: linear-gradient(180deg, #2b3a4b, #17212b);
}

.theme-dot--glass {
  background: linear-gradient(180deg, #97a3b1, #747e8c);
}

.theme-dot--sea {
  background: linear-gradient(180deg, #82d8b0, #6aa8d4);
}

.theme-dot--lime {
  background: linear-gradient(180deg, #c3cb6e, #6dbd77);
}

.theme-dot--felt {
  background: linear-gradient(180deg, #1d6b52, #0f3b2e);
}

/* ------------------------------------------- нажатие: Liquid Glass */

/* Под пальцем элемент — прозрачная капля: чуть больше, светлее, с ярким
   ободком (components/press.js ставит .is-pressed). Отпускание — «желе» */
[data-theme] :is(
    .btn,
    .hub-tile__icon,
    .hub-quick,
    .hub-head__me,
    .hub-head__plus,
    .good__preview,
    .topbar__back,
    .seg__item,
    .period-switch__item,
    .chip,
    .mode-tile,
    .pick,
    .quest-step,
    .create-private,
    .theme-dot,
    .theme-choice,
    .app-tab,
    .fbar,
    .deck-showcase__suit,
    .deck-showcase__arrow
  ) {
  transition:
    transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 200ms ease,
    box-shadow 200ms ease,
    background-color 200ms ease,
    color 200ms ease;
}

[data-theme] .is-pressed:is(
    .btn,
    .hub-quick,
    .hub-head__me,
    .hub-head__plus,
    .good__preview,
    .topbar__back,
    .mode-tile,
    .pick,
    .quest-step,
    .create-private,
    .theme-dot,
    .theme-choice,
    .fbar,
    .deck-showcase__arrow
  ) {
  transform: scale(1.07);
  filter: brightness(1.12) saturate(1.15);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.75),
    inset 0 1px 6px rgba(255, 255, 255, 0.5),
    0 14px 28px -12px rgba(0, 0, 0, 0.45);
  transition-duration: 140ms;
}

/* Плитка нажимается целиком, а надувается её значок */
[data-theme] .hub-tile.is-pressed .hub-tile__icon {
  transform: scale(1.12);
  filter: brightness(1.15);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.8),
    0 14px 26px -10px rgba(0, 0, 0, 0.45);
  transition-duration: 140ms;
}

[data-theme] .row-item.is-pressed {
  background: rgba(255, 255, 255, 0.14);
}

/* Внутри переключателя кнопка не растёт сама — растёт линза под ней */
[data-theme] .is-pressed:is(.seg__item, .period-switch__item, .chip, .app-tab, .deck-showcase__suit) {
  transform: scale(1.06);
  transition-duration: 140ms;
}

/* Пилюля-линза, как в видео-образце: пока палец на переключателе, выбранная
   пилюля едет под палец (press.js) и становится выпуклым светлым стеклом —
   чуть больше, с ярким ободком и бликом. Текст под ней виден: стекло светлое,
   а не серое. Без размытия под линзой — на телефоне оно подтормаживало */
[data-theme] .has-pill::before,
[data-theme] .seg__thumb,
[data-theme] .app-tabbar__pill {
  transition:
    transform 320ms cubic-bezier(0.32, 1.25, 0.5, 1),
    width 320ms cubic-bezier(0.32, 1.25, 0.5, 1),
    background-color 200ms ease,
    box-shadow 200ms ease,
    scale 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* У переключателей «Создать игру» своя плашка .seg__thumb — линзой
   становится она, а вторая пилюля не рисуется */
[data-theme] .has-pill:has(> .seg__thumb)::before {
  display: none;
}

[data-theme] .is-lensing.has-pill::before,
[data-theme] .is-lensing > .seg__thumb {
  scale: 1.08 1.18;
  background-color: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.95),
    inset 0 3px 6px rgba(255, 255, 255, 0.7),
    inset 0 -3px 6px rgba(0, 0, 0, 0.1),
    0 8px 20px -8px rgba(0, 0, 0, 0.45);
}

/* В тёмных темах невыбранный текст белый — линза там прозрачнее */
:root:is([data-theme="dark"], [data-theme="felt"]) .is-lensing.has-pill:not(:has(> .seg__thumb))::before {
  background-color: rgba(255, 255, 255, 0.28);
}

/* В таб-баре линза не выходит за полосу: растёт внутри неё */
[data-theme] .app-tabbar.is-lensing .app-tabbar__pill {
  scale: 1.04 1.08;
  background-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.7),
    inset 0 3px 6px rgba(255, 255, 255, 0.35),
    0 6px 16px -8px rgba(0, 0, 0, 0.4);
}

/* Сам переключатель под пальцем тоже чуть подаётся */
[data-theme] :is(.seg, .period-switch, .chips, .app-tabbar) {
  transition: scale 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme] :is(.seg, .period-switch, .chips).is-lensing {
  scale: 1.015;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme] .is-pressed,
  [data-theme] .hub-tile.is-pressed .hub-tile__icon {
    transform: none;
  }

  [data-theme] .is-lensing.has-pill::before,
  [data-theme] .is-lensing > .seg__thumb,
  [data-theme] .app-tabbar.is-lensing .app-tabbar__pill,
  [data-theme] .is-lensing {
    scale: none;
  }
}

/* Внутри стола — прежние светлые надписи на сукне */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .screen--table {
  --on-bg: #ffffff;
  --on-bg-hint: rgba(255, 255, 255, 0.72);
  --line-on-bg: rgba(255, 255, 255, 0.2);
  --text: #1c2630;
}


/* Кто попросил меньше прозрачности — плотные карточки без размытия */
@media (prefers-reduced-transparency: reduce) {
  :root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"]) {
    --glass-fill: rgba(240, 242, 245, 0.96);
  }

  :root[data-theme="dark"] {
    --glass-fill: #1f2b38;
  }

  :root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) {
    --glass-blur: none;
  }
}

/* «Приватная игра» — кружок внутри капсулы, а не на её краю */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .screen--create .create-private {
  padding: 0 var(--gap-4) 0 12px;
  color: var(--on-bg);
}

/* Итог достижений: синий акцент Telegram вместо золота сукна */
:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .ach-total__medal {
  background: linear-gradient(180deg, #5cb8ff 0%, #2a85ec 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 14px -8px rgba(36, 129, 204, 0.9);
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .ach-total__percent {
  color: var(--accent);
}

:root[data-theme="lime"] .ach-total__percent {
  color: #1f6fc0;
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .ach-total__track {
  background: rgba(255, 255, 255, 0.3);
}

:root[data-theme="dark"] .ach-total__track {
  background: rgba(255, 255, 255, 0.1);
}

:root:is([data-theme="glass"], [data-theme="lime"], [data-theme="sea"], [data-theme="dark"], [data-theme="felt"]) .ach-total__bar {
  background: linear-gradient(90deg, #2a85ec, #5cb8ff);
}

/* --------------------------------------------------------------- море */

:root[data-theme="sea"] {
  --bg: #76bfc4;
  --bg-secondary: #76bfc4;
  --text: #0d2430;
  --on-bg: #0d2430;
  --on-bg-hint: rgba(13, 36, 48, 0.62);
  --line-on-bg: rgba(255, 255, 255, 0.35);
  --hint: #345868;
  --glass-backdrop: linear-gradient(180deg, #82d8b0 0%, #6aa8d4 100%);
}

/* Значки главного меню — белые на полупрозрачных каплях (просьба владельца) */
:root[data-theme="sea"] .hub-tile__icon {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 6px 14px -8px rgba(20, 60, 90, 0.55);
}

:root[data-theme="sea"] .hub-tile__icon .glyph {
  filter: drop-shadow(0 1px 1px rgba(13, 36, 48, 0.3));
}

:root[data-theme="sea"] .hub-quick__icon .glyph {
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(13, 36, 48, 0.35));
}

/* Выбор темы под профилем: кружок цвета и подпись под ним */
.theme-picker {
  padding: 12px 8px;
}

:root .theme-dots.theme-dots--labeled {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root:is([data-theme]) .theme-dots.theme-dots--labeled {
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.theme-choice {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: transform 260ms var(--glass-press, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.theme-choice .theme-dot {
  width: 42px;
  height: 42px;
  border-width: 3px;
}

.theme-choice[aria-pressed="true"] .theme-choice__name {
  color: var(--accent);
}

/* Значки главного меню — свой цвет у каждой темы (просьба владельца 28.10.2026):
   капля значка (--tile-from → --tile-to) и треугольник «Быстрой игры» */
:root[data-theme="dark"] {
  --tile-from: #5cb8ff;
  --tile-to: #2a85ec;
  --tile-glow: rgba(36, 129, 204, 0.9);
  --quick-icon: #3e9bf0;
}

:root[data-theme="glass"] {
  --tile-from: #5d6878;
  --tile-to: #39424f;
  --tile-glow: rgba(30, 38, 50, 0.7);
  --quick-icon: #39424f;
}

:root[data-theme="lime"] {
  --tile-from: #5aa35a;
  --tile-to: #2f7a3c;
  --tile-glow: rgba(30, 90, 40, 0.7);
  --quick-icon: #2f7a3c;
}

:root:is([data-theme="dark"], [data-theme="glass"], [data-theme="lime"]) .hub-tile__icon {
  background: linear-gradient(180deg, var(--tile-from) 0%, var(--tile-to) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 14px -8px var(--tile-glow);
}

:root:is([data-theme="dark"], [data-theme="glass"], [data-theme="lime"]) .hub-quick__icon .glyph {
  color: var(--quick-icon);
}

/* Кнопки и акцент — в тон значкам: в «Стали» графит, в «Лайме» зелень */
:root[data-theme="glass"] {
  --button: #3f4a59;
  --accent: #3f4a59;
}

:root[data-theme="lime"] {
  --button: #2f8a43;
  --accent: #2f7a3c;
}

:root[data-theme="lime"] .ach-total__percent {
  color: var(--accent);
}

:root:is([data-theme="glass"], [data-theme="lime"]) .ach-total__medal {
  background: linear-gradient(180deg, var(--tile-from), var(--tile-to));
}

:root:is([data-theme="glass"], [data-theme="lime"]) .ach-total__bar {
  background: linear-gradient(90deg, var(--tile-to), var(--tile-from));
}

/* Синий блик у кнопок — только в тёмной и «Море»; у остальных тень цвета кнопки */
:root:is([data-theme="glass"], [data-theme="lime"])
  :is(.btn--primary, .good .btn, .screen--create .create-go, .hub-head__plus) {
  background-color: var(--button);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 18px -10px var(--tile-glow);
}

/* ------------------------------------------- сукно в стиле Liquid Glass */

/* Изумрудное сукно тоже стеклянное (просьба владельца 28.10.2026): тёмное
   зелёное стекло, золотые значки — прежний характер темы */
:root[data-theme="felt"] {
  --text: #ffffff;
  --on-bg: #ffffff;
  --on-bg-hint: rgba(240, 230, 200, 0.75);
  --line-on-bg: rgba(232, 214, 160, 0.2);
  --hint: rgba(230, 235, 225, 0.65);
  --separator: rgba(255, 255, 255, 0.08);
  --pill: rgba(255, 255, 255, 0.08);
  --pill-text: #ffffff;
  --section-bg: #134636;
  --surface-strong: rgba(255, 255, 255, 0.08);
  --accent: #d2b16e;
  --button: #9a7a3c;
  --glass-fill: rgba(20, 70, 54, 0.6);
  --glass-fill-strong: rgba(16, 58, 45, 0.92);
  --glass-edge: rgba(232, 214, 160, 0.18);
  --glass-sheen: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0) 70%,
    rgba(255, 255, 255, 0.05) 100%
  );
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px -16px rgba(0, 0, 0, 0.7);
  --glass-backdrop:
    radial-gradient(80% 50% at 15% 0%, rgba(80, 170, 120, 0.22), transparent 70%),
    linear-gradient(180deg, #11433a 0%, #0a2a21 100%);
  --glass-grid: transparent;
  /* Матовое приглушённое золото (просьба владельца 28.10.2026) */
  --tile-from: #b99a5c;
  --tile-to: #937437;
  --tile-glow: rgba(0, 0, 0, 0.45);
  --quick-icon: #c9a865;
}

:root[data-theme="felt"] .hub-tile__icon {
  /* Матовое: без блика сверху, мягкая тень вместо свечения */
  background: linear-gradient(180deg, var(--tile-from) 0%, var(--tile-to) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 4px 10px -6px var(--tile-glow);
}

:root[data-theme="felt"] .hub-quick__icon .glyph {
  color: var(--quick-icon);
}

:root[data-theme="felt"] :is(.btn--primary, .good .btn, .screen--create .create-go, .hub-head__plus) {
  background-color: var(--button);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 18px -10px var(--tile-glow);
}

:root[data-theme="felt"] .has-pill::before {
  background-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

:root[data-theme="felt"] :is(.period-switch__item, .chip) {
  color: var(--hint);
}

:root[data-theme="felt"] :is(.period-switch__item, .chip):is([aria-selected="true"], [aria-pressed="true"]) {
  color: #ffffff;
}

:root[data-theme="felt"] :is(.screen--create, .filters-page) :is(.mode-tile, .pick) {
  background-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="felt"] .ach-total__medal {
  background: linear-gradient(180deg, var(--tile-from), var(--tile-to));
}

:root[data-theme="felt"] .ach-total__bar {
  background: linear-gradient(90deg, var(--tile-to), var(--tile-from));
}

:root[data-theme="felt"] .ach-total__track {
  background: rgba(255, 255, 255, 0.1);
}

/* Кружок темы в строке списка настроек */
.theme-dot--row {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
}

/* ================================================================== стол */

/* Сукно по теме — пока не надет купленный стол: его переменные стоят прямо
   на <html> и перекрывают эти */
:root[data-theme="dark"] {
  --table-felt: #1e3044;
  --table-felt-edge: #101a26;
  --bar-text: #ffffff;
  --bar-fill: rgba(22, 32, 44, 0.62);
}

:root[data-theme="sea"] {
  --table-felt: #2c7c84;
  --table-felt-edge: #174850;
  --bar-text: #0d2430;
  --bar-fill: rgba(255, 255, 255, 0.45);
}

:root[data-theme="glass"] {
  --table-felt: #4d5866;
  --table-felt-edge: #2a313b;
  --bar-text: #13171d;
  --bar-fill: rgba(255, 255, 255, 0.45);
}

:root[data-theme="lime"] {
  --table-felt: #3f7338;
  --table-felt-edge: #22421f;
  --bar-text: #13240f;
  --bar-fill: rgba(255, 255, 255, 0.45);
}

:root[data-theme="felt"] {
  --bar-text: #ffffff;
  --bar-fill: rgba(16, 58, 45, 0.62);
}

/* Нижняя панель: стеклянная, на всю ширину, как таб-бар Telegram */
[data-theme] .table-tabbar {
  margin: 0 8px calc(var(--safe-bottom) + 8px);
  padding: var(--gap-2) var(--gap-3);
  border-radius: 30px;
  background-color: var(--bar-fill);
  background-image: var(--glass-sheen);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  color: var(--bar-text);
}

[data-theme] .table-tabbar :is(.table-me__name, .table-tab) {
  color: var(--bar-text);
}

/* Бустеры — стеклянные карточки */
[data-theme] .table-tabbar .booster {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 6px 14px -8px rgba(0, 0, 0, 0.5);
}

/* «Беру», «Бито», «Пас» — капли светлого стекла, текст прежний красный */
[data-theme] .table-tabbar .table-actions .btn-3d {
  background-color: rgba(255, 255, 255, 0.72);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 60%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 8px 18px -10px rgba(0, 0, 0, 0.55);
}

/* «Сдаться», выход и число карт в колоде — стеклянные кружки и пилюли */
[data-theme] :is(.table-leave, .table-mid .deck__count) {
  background-color: rgba(255, 255, 255, 0.16);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 18px -10px rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

[data-theme] .is-pressed.table-leave {
  transform: scale(1.08);
  filter: brightness(1.15);
}

:root[data-theme] .table-tabbar .table-wallet,
:root[data-theme] .table-tabbar .table-wallet * {
  color: var(--bar-text);
}

[data-theme] .table-tabbar .booster {
  opacity: 1;
}

:root[data-theme="dark"] .table-tabbar .booster,
:root[data-theme="felt"] .table-tabbar .booster {
  background-color: rgba(255, 255, 255, 0.85);
}

/* Цена бустера над картой («вернуть карту», «раскрыть») стоит на тёмной
   панели: на тёмных темах она белая, иначе цифр не видно. Не хватает
   изумрудов — по-прежнему красная */
:root[data-theme="dark"] .table-tabbar .booster__price,
:root[data-theme="felt"] .table-tabbar .booster__price {
  color: #ffffff;
}

:root[data-theme="dark"] .table-tabbar .booster--poor .booster__price,
:root[data-theme="felt"] .table-tabbar .booster--poor .booster__price {
  color: #ff6b6b;
}

/* Кнопки хода на столе: текст всегда красный, «Не готов» — тёмно-серый
   (общее правило синих кнопок сюда не относится) */
:root[data-theme] .table-tabbar .table-actions .btn-3d {
  background-color: #ffffff;
  color: #d4232a;
}

:root[data-theme] .table-tabbar .table-actions .btn-3d.btn--quiet {
  color: #4a4f58;
}

/* Текст под светлой линзой — красный, как у выбранной кнопки: белый на
   светлом стекле пропадал */
:root[data-theme] .is-lensing > .seg__thumb ~ .seg__item.is-pressed {
  color: #d4232a;
}

/* Надпись заставки на светлом лайме — тёмно-зелёная, иначе золото тонет */
:root[data-theme="lime"] .boot__club {
  color: #1f4a1c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Таб-бар: пузырь не выходит за полосу ни у крайних вкладок, ни при «желе» */
:root[data-theme] .app-tabbar {
  overflow: hidden;
}

:root[data-theme] .app-tabbar.is-lensing .app-tabbar__pill {
  scale: 1 1;
}

:root[data-theme] .app-tab.is-pressed {
  transform: scale(1.03);
}

/* Переключатели: линза и «надувание» остаются внутри полосы — у крайних
   кнопок («6», «52», «Создать игру») пузырь не вылезает за край (28.10.2026) */
:root[data-theme] :is(.seg, .period-switch, .chips) {
  overflow: hidden;
}

:root[data-theme] .is-lensing.has-pill::before,
:root[data-theme] .is-lensing > .seg__thumb {
  scale: 1 1;
}

:root[data-theme] :is(.seg, .period-switch, .chips).is-lensing {
  scale: 1;
}

:root[data-theme] .is-pressed:is(.seg__item, .period-switch__item, .chip) {
  transform: scale(1.03);
}

/* Градиент кружка темы — на весь кружок вместе с рамкой: иначе снизу
   повторялся светлый край градиента («серп») */
.theme-dot {
  background-origin: border-box;
}

/* Пузырь в таб-баре вернули (просьба владельца 28.10.2026): линза выпуклая и
   приподнята над полосой, но вширь почти не растёт — у крайних вкладок не
   выходит за край (запас — внутренний отступ полосы) */
:root[data-theme] .app-tabbar {
  overflow: visible;
}

:root[data-theme] .app-tabbar.is-lensing .app-tabbar__pill {
  scale: 1.04 1.16;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
    inset 0 3px 8px rgba(255, 255, 255, 0.5),
    inset 0 -3px 6px rgba(0, 0, 0, 0.08),
    0 10px 22px -8px rgba(0, 0, 0, 0.4);
}

:root[data-theme] .app-tabbar.is-lensing .app-tabbar__pill {
  scale: 1 1.16;
}

/* Создание игры и фильтры: выбранный вариант — всегда белая плашка с красным
   текстом, и когда выбран один (пилюля), и когда несколько — во всех темах */
:root[data-theme] :is(.screen--create, .filters-page, .screen--leaders) .has-pill::before {
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

:root[data-theme] :is(.screen--create, .filters-page, .screen--leaders) .is-lensing.has-pill::before {
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 0 0 1.5px #ffffff,
    inset 0 3px 6px rgba(255, 255, 255, 0.7),
    0 8px 20px -8px rgba(0, 0, 0, 0.45);
}

/* Выбранная пилюля везде — белая, без прозрачности (просьба владельца
   28.10.2026), текст на ней тёмный: и в светлых, и в тёмных темах */
:root[data-theme] .has-pill::before {
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

:root[data-theme] .is-lensing.has-pill::before {
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 0 0 1.5px #ffffff,
    inset 0 3px 6px rgba(255, 255, 255, 0.7),
    0 8px 20px -8px rgba(0, 0, 0, 0.45);
}

:root[data-theme] :is(.period-switch, .chips).has-pill > :is([aria-selected="true"], [aria-pressed="true"]),
:root[data-theme] :is(.period-switch, .chips).is-lensing > .is-pressed {
  color: #1c2630;
}

/* Пузырь таб-бара после отпускания сдувается плавно (просьба владельца
   28.10.2026): переезд — пружиной, а исчезновение линзы — мягким ease-out */
:root[data-theme] .app-tabbar__pill {
  transition:
    transform 340ms cubic-bezier(0.32, 1.25, 0.5, 1),
    scale 520ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 520ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Надувается быстро — палец видит отклик сразу */
:root[data-theme] .app-tabbar.is-lensing .app-tabbar__pill {
  transition:
    transform 340ms cubic-bezier(0.32, 1.25, 0.5, 1),
    scale 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 180ms ease,
    box-shadow 180ms ease;
}