/*
  Liquid glass для игр — как меню (menu.css). Всё включается только классом <body class="lg-game">,
  остальные игры не затронуты.

  Подключение (в <head> после своих <style>, чтобы перекрывать стили игры):
    <link rel="stylesheet" href="/static/glass.css?v=1" />
  В конце <body> (порядок между ними не важен):
    <script src="/static/coins.js?v=6"></script>
    <script src="/static/exit.js?v=N"></script>
    <script src="/static/holo.js?v=6"></script>      (holo сам выключается на lg-game)
    <script src="/static/glass.js?v=1"></script>

  Разметка:
    <body class="lg-game">          фон (фото bg1..8 без повтора подряд, вуаль, пятна) добавляет glass.js;
                                    шапку (выход · заголовок · «?») строит exit.js из первого <h1>.
    .lg-card                        стеклянная панель под поле/доску (radius 26, padding 14).
    .lg-glass                       просто стеклянная поверхность (без отступов) для своих блоков.
    .lg-pill                        небольшой стеклянный ярлык/строка (история ходов, подсказки).
    .lg-input                       стеклянное поле ввода / клетка.
    .lg-btn-wide                    широкая стеклянная кнопка с текстом (в карточках/диалогах); .lg-accent — розовая.

  Нижний док (fixed, учитывает safe-area, body получает отступ снизу автоматически):
    <nav class="lg-dock" aria-label="controls">
      <div class="lg-dock-above">                    необязательно: строка над доком,
        <span class="lg-note">attempts <b>10</b></span>  .lg-note прижимается влево, .lg-note.r — вправо
      </div>
      <button class="lg-btn" aria-label="check"></button>          кнопка-иконка; подпись = aria-label
      <div class="lg-stat" data-cap="streak" data-ico="streak"><b id="streak">0</b></div>   стат-чип
      <button class="lg-btn" aria-label="restart"></button>
      <button class="lg-btn" aria-label="mode" data-modes="#levels"></button>               режимы
    </nav>
    - .lg-btn: внутрь можно положить свой <svg>; если пусто, а aria-label есть в ICONS / LG_ICONS
      exit.js (restart, check, erase, flags, undo, pause, resume, add, start, new deal, mode, streak,
      hint, shuffle, hammer, play, best, score, level, eraser, flag, new game) — иконка подставится сама.
      Подпись: aria-label или data-cap. Состояния: .ready (пульс), .on / aria-pressed="true" (вкл), :disabled.
    - .lg-stat: значение — любой элемент внутри (обычно <b>), подпись из data-cap, иконка из data-ico
      (имя файла из /static/icons без расширения; .svg/.png — укажи с расширением). Может быть <button>.
    - data-modes="<селектор>": существующий контейнер с кнопками режимов (или <select>) переезжает
      в поповер над кнопкой. Обработчики игры остаются как были; выбранный — .on / .active / .selected /
      aria-pressed|selected|checked="true". Кнопки остаются кликабельными для exit.js GROUPS (Random).
      Для <select> строятся кнопки-пилюли, выбор ставит value и шлёт change.
      Поповер: тап снаружи / Esc / выбор — закрывает. JS: YeuwixGlass.closeModes(), YeuwixGlass.refresh().
  Диалоги: coins.js (проигрыш), правила exit.js, тосты — стилизуются автоматически.
  Свой оверлей: .lg-overlay(.show) > .lg-dialog (h2, p, .lg-row > .lg-btn-wide).
*/
/*
  Стандартная сетка всех игр (одинаковая на всех экранах, ничего не двигается после загрузки):
    колонка      --lg-w = min(408px, 100vw − 32px) — шапка, блоки игры и док одной ширины, по центру;
    сверху       12px + safe-area → шапка 44px (кнопки 44×44 по краям колонки) → отступ 12px;
    снизу        док 77px в 12px + safe-area от края, над ним строка заметок 30px + 10px → отступ 12px;
    между ними   игровая область --lg-stage-h. Блок .lg-main занимает её целиком, остальные прямые
                 дети .wrap — свою высоту, .lg-main получает остаток. Высота берётся из стабильной высоты
                 окна Telegram (--tg-viewport-stable-height), поэтому не меняется, пока окно разворачивают.
    Отступ между блоками — 12px, у карточки radius 26 и padding 14.
*/
body.lg-game {
  --lg-w: min(408px, calc(100vw - 32px));
  --lg-vh: var(--tg-viewport-stable-height, 100dvh);
  --lg-top: calc(12px + env(safe-area-inset-top));
  --lg-head-h: 44px;
  --lg-gap: 12px;
  --lg-dock-h: 77px;
  --lg-dock-bottom: calc(12px + env(safe-area-inset-bottom));
  --lg-dock-space: calc(var(--lg-dock-h) + var(--lg-dock-bottom) + 40px);
  --lg-body-h: calc(var(--lg-vh) - var(--lg-top) - var(--lg-dock-space) - var(--lg-gap));
  --lg-stage-h: max(240px, calc(var(--lg-body-h) - var(--lg-head-h) - var(--lg-gap)));
  --lg-ink: #fff;
  --lg-dim: rgba(232, 230, 245, 0.6);
  --lg-accent: #ff8fb3;
  --lg-accent-deep: #ff5f9e;
  --lg-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
  --lg-ring: linear-gradient(140deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.12) 26%, rgba(255, 255, 255, 0) 48%,
    rgba(255, 255, 255, 0.08) 70%, rgba(255, 255, 255, 0.42));
  --lg-glass: linear-gradient(155deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.055) 40%,
    rgba(255, 255, 255, 0.025) 62%, rgba(255, 255, 255, 0.075) 100%);
  --lg-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.26), inset 0 -1px 1px rgba(255, 255, 255, 0.05),
    inset 0 0 22px rgba(255, 255, 255, 0.03), 0 16px 34px -16px rgba(0, 0, 0, 0.8);
  --lg-press-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 24px -4px rgba(255, 143, 179, 0.7);
  margin: 0;
  min-height: 100vh; min-height: 100dvh;
  box-sizing: border-box;
  padding: var(--lg-top) 0 calc(var(--lg-dock-space) + var(--lg-gap)) !important;
  background: transparent !important;
  color: var(--lg-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
/* фон тела прозрачный, иначе он перекроет слой .lg-bg (z-index: -1); тёмная база — на <html> */
html:has(> body.lg-game) { background: #07060d !important; }

/* ---------- фон (как в меню) ---------- */
.lg-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(140% 90% at 50% -10%, #1d1338 0%, #0c0918 46%, #06050b 100%);
}
.lg-bg i { position: absolute; border-radius: 50%; will-change: transform; }
.lg-bg .lg-b1 { width: 110vmax; height: 110vmax; left: -60vmax; top: -55vmax;
  background: radial-gradient(closest-side, rgba(255, 95, 158, 0.5), rgba(255, 95, 158, 0)); animation: lg-drift1 24s ease-in-out infinite alternate; }
.lg-bg .lg-b2 { width: 100vmax; height: 100vmax; right: -60vmax; top: 2vh;
  background: radial-gradient(closest-side, rgba(112, 80, 255, 0.5), rgba(112, 80, 255, 0)); animation: lg-drift2 28s ease-in-out infinite alternate; }
.lg-bg .lg-b3 { width: 95vmax; height: 95vmax; left: -40vmax; bottom: -62vmax;
  background: radial-gradient(closest-side, rgba(40, 190, 255, 0.36), rgba(40, 190, 255, 0)); animation: lg-drift3 32s ease-in-out infinite alternate; }
.lg-bg .lg-b4 { width: 60vmax; height: 60vmax; right: -25vmax; bottom: -10vmax;
  background: radial-gradient(closest-side, rgba(255, 143, 179, 0.28), rgba(255, 143, 179, 0)); animation: lg-drift2 36s ease-in-out infinite alternate-reverse; }
@keyframes lg-drift1 { to { transform: translate(16vw, 12vh) scale(1.08); } }
@keyframes lg-drift2 { to { transform: translate(-14vw, -9vh) scale(0.92); } }
@keyframes lg-drift3 { to { transform: translate(12vw, -12vh) scale(1.06); } }
.lg-bg .lg-ph {
  inset: -6%; border-radius: 0; background: center / cover no-repeat;
  filter: saturate(1.25) brightness(1.25); transform: scale(1.04);
  animation: lg-phDrift 40s ease-in-out var(--dd, 0s) infinite alternate;
}
/* смена обоев между страницами: новые растворяются поверх прошлых (.lg-prev), без тёмного провала */
.lg-bg .lg-ph.dissolve { animation: lg-dissolve 0.35s ease both, lg-phDrift 40s ease-in-out var(--dd, 0s) infinite alternate; }
@keyframes lg-dissolve { from { opacity: 0; } }
/* дрейф пятен тоже по общим часам — между страницами ничего не скачет */
.lg-bg .lg-b1, .lg-bg .lg-b2, .lg-bg .lg-b3, .lg-bg .lg-b4 { animation-delay: var(--dd, 0s) !important; }

/* появление страницы: поля и блоки чуть-чуть всплывают со своих мест, очень быстро */
@keyframes yx-pop { from { opacity: 0; scale: 0.965; } }
body.lg-game .exit-head, body.lg-game .wrap > :not(.exit-head), body.lg-game .lg-dock {
  animation: yx-pop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  body.lg-game .exit-head, body.lg-game .wrap > :not(.exit-head), body.lg-game .lg-dock { animation: none; }
}
.lg-bg .lg-ph ~ i:not(.lg-veil):not(.lg-ph) { opacity: 0.18; }
.lg-bg .lg-veil {
  inset: 0; border-radius: 0; will-change: auto;
  background: radial-gradient(130% 90% at 50% 45%, rgba(6, 5, 11, 0) 0%, rgba(6, 5, 11, 0.2) 65%, rgba(6, 5, 11, 0.55) 100%),
    linear-gradient(180deg, rgba(6, 5, 11, 0.3), rgba(6, 5, 11, 0) 22%, rgba(6, 5, 11, 0) 75%, rgba(6, 5, 11, 0.4));
}
@keyframes lg-phIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lg-phDrift { to { transform: scale(1.12) translate(-2%, 1.5%); } }
@media (prefers-reduced-motion: reduce) { .lg-bg i { animation: none; } }

/* ---------- стеклянные поверхности ---------- */
.lg-game .lg-glass, .lg-game .lg-card, .lg-game .lg-pill, .lg-game .lg-btn-wide, .lg-game .lg-note {
  position: relative; isolation: isolate;
  background: var(--lg-glass);
  box-shadow: var(--lg-shadow);
  border: 0;
}
.lg-game .lg-glass::before, .lg-game .lg-card::before, .lg-game .lg-pill::before, .lg-game .lg-btn-wide::before,
.lg-game .lg-note::before, .lg-game .exit-btn::before, .lg-dock::before, .lg-dock .lg-btn::after, .lg-dock .lg-stat::after,
.lg-game .lg-pop > *::before, .lg-game .yx-lose .yx-box::before, .lg-game .lg-dialog::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--lg-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.lg-game .lg-card { border-radius: 26px; padding: 14px; margin-bottom: 12px; }
.lg-game .lg-pill { border-radius: 16px; padding: 10px 14px; }
.lg-game .lg-input {
  border: 0; border-radius: 14px; color: #fff; outline: none;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 -8px 16px rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.lg-game .lg-input:focus {
  background: rgba(255, 143, 179, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1.5px rgba(255, 143, 179, 0.8), 0 0 18px -4px rgba(255, 143, 179, 0.7);
}
.lg-game .lg-btn-wide {
  min-height: 46px; padding: 0 20px; border-radius: 23px; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 650 0.9rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  transition: transform 0.28s var(--lg-spring), background-color 0.2s ease, box-shadow 0.25s ease;
}
.lg-game .lg-btn-wide.lg-accent {
  background-color: rgba(255, 95, 158, 0.32);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -8px 18px rgba(255, 95, 158, 0.22), 0 16px 34px -14px rgba(255, 95, 158, 0.8);
}
.lg-game .lg-btn-wide:active, .lg-game .lg-btn-wide.lg-tap {
  transform: scale(0.95); background-color: rgba(255, 143, 179, 0.3); box-shadow: var(--lg-press-shadow);
}
.lg-game .lg-btn-wide:disabled { opacity: 0.5; }

/* ---------- колонка и игровая область ---------- */
body.lg-game .wrap {
  box-sizing: border-box; width: var(--lg-w) !important; max-width: none !important;
  margin: 0 auto !important; padding: 0 !important;
  display: flex !important; flex-direction: column !important; gap: var(--lg-gap) !important;
  height: var(--lg-body-h); min-height: calc(var(--lg-head-h) + var(--lg-gap) + 240px);
}
body.lg-game .wrap > * { flex: none; margin-top: 0 !important; margin-bottom: 0 !important; max-width: 100%; }
body.lg-game .wrap > .lg-main {
  flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important;
  box-sizing: border-box; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden;
}
/* главный блок-обёртка без своей рамки (секция экрана): карточка внутри растягивается на остаток */
body.lg-game .wrap > .lg-main:not(.lg-card):not(.lg-glass) {
  display: flex !important; flex-direction: column; gap: var(--lg-gap);
}
body.lg-game .wrap > .lg-main:not(.lg-card):not(.lg-glass) > * { flex: none; margin-top: 0 !important; margin-bottom: 0 !important; }
body.lg-game .wrap > .lg-main:not(.lg-card):not(.lg-glass) > .lg-card {
  flex: 1 1 0; min-height: 0; box-sizing: border-box; overflow: hidden;
}
/* .lg-scroll — область стандартного размера для инструментов: блоки меняются по режимам, лишнее прокручивается
   внутри области, а не всей страницей */
body.lg-game .wrap > .lg-main.lg-scroll {
  overflow-x: hidden; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: none;
  border-radius: 26px;
}
body.lg-game .wrap > .lg-main.lg-scroll::-webkit-scrollbar { display: none; }
body.lg-game .wrap > .lg-main.lg-scroll > [hidden] { display: none !important; }
/* .lg-center — содержимое рамки по центру по вертикали (для досок постоянного размера) */
body.lg-game .lg-center { display: flex !important; flex-direction: column; justify-content: center; }

/* ---------- шапка (в HTML от сервера, обработчики — exit.js) ---------- */
body.lg-game .exit-head {
  position: relative; box-sizing: border-box; flex: none;
  width: var(--lg-w) !important; max-width: none !important; height: var(--lg-head-h) !important;
  margin: 0 auto !important; padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
}
body.lg-game .wrap > .exit-head { width: 100% !important; }
body.lg-game .exit-head > h1 {
  flex: 1 1 auto; min-width: 0; height: auto; margin: 0 !important;
  font: 650 1.02rem/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: 0.34em; text-transform: uppercase; text-align: center; color: #fff;
  padding: 0 52px 0 calc(52px + 0.34em) !important;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
}
body.lg-game .exit-btn {
  position: absolute; left: 0; z-index: 2; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  top: 0; transform: none; width: 44px; height: 44px; border: 0; border-radius: 16px; color: #fff;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.075));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.26), 0 16px 34px -16px rgba(0, 0, 0, 0.8);
  isolation: isolate;
  transition: transform 0.28s var(--lg-spring), background-color 0.2s ease;
}
body.lg-game .exit-btn::after { content: ""; position: absolute; inset: -6px -4px; }
body.lg-game .exit-btn.rules-btn { left: auto; right: 0; }
body.lg-game .exit-btn.head-act { left: auto; right: 52px; }
.lg-game .exit-btn .yx-ico { display: block; width: 22px; height: 22px; }
.lg-game .yx-ico {
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.lg-game .exit-btn:active, .lg-game .exit-btn.yx-hold, .lg-game .yx-tap:not(:disabled) {
  background: rgba(255, 143, 179, 0.32) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 24px -4px rgba(255, 143, 179, 0.7) !important;
}

/* ---------- нижний док ---------- */
.lg-dock {
  position: fixed; z-index: 40; left: 50%; bottom: var(--lg-dock-bottom);
  transform: translateX(-50%); width: var(--lg-w); box-sizing: border-box; height: var(--lg-dock-h);
  display: flex; align-items: flex-start; gap: 6px; padding: 8px 8px 7px; border-radius: 30px; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 40%), rgba(12, 10, 20, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 44px -10px rgba(0, 0, 0, 0.85);
}
.lg-dock::before { opacity: 0.7; }
.lg-dock > * { flex: 1 1 0; min-width: 0; }
.lg-dock-above {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); height: 30px;
  display: flex; align-items: flex-end; gap: 8px; pointer-events: none;
}
.lg-dock-above > * { pointer-events: auto; }
.lg-dock-above > .r { margin-left: auto; }
.lg-game .lg-note {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 15px;
  font-size: 0.64rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lg-dim);
  background-color: rgba(12, 10, 20, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  white-space: nowrap;
}
.lg-game .lg-note b { color: #fff; font-size: 0.86rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.lg-game .lg-note:empty { display: none; }

body.lg-game .lg-dock .lg-btn, body.lg-game .lg-dock .lg-stat {
  position: relative; isolation: isolate; height: 62px; min-width: 0; margin: 0; padding: 0 3px !important;
  display: flex; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  gap: 7px !important; border: 0; border-radius: 19px; background: none; color: #fff; cursor: pointer;
  font: inherit; aspect-ratio: auto; width: auto; -webkit-tap-highlight-color: transparent;
}
.lg-dock .lg-btn::before, .lg-dock .lg-stat::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 19px;
  background: var(--lg-glass); box-shadow: var(--lg-shadow);
  transition: transform 0.3s var(--lg-spring), background-color 0.2s ease, box-shadow 0.25s ease;
}
.lg-dock .lg-btn::after, .lg-dock .lg-stat::after { inset: 0; height: auto; border-radius: 19px; }
body.lg-game .lg-dock .lg-btn > svg {
  width: 24px !important; height: 24px !important; max-height: none; margin: 0 !important; flex: none;
  transition: transform 0.3s var(--lg-spring); filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}
.lg-dock .yx-cap, .lg-dock .lg-cap {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.55rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  padding-left: 0.14em; color: rgba(255, 255, 255, 0.72); white-space: nowrap; pointer-events: none;
}
.lg-dock .lg-btn:active::before, .lg-dock .lg-btn.lg-tap::before, .lg-dock button.lg-stat:active::before {
  transform: scale(0.93); background-color: rgba(255, 143, 179, 0.3); box-shadow: var(--lg-press-shadow);
}
.lg-dock .lg-btn:active > svg, .lg-dock .lg-btn.lg-tap > svg { transform: scale(0.9); }
.lg-dock .lg-btn.on::before, .lg-dock .lg-btn[aria-pressed="true"]::before, .lg-pop-anchor.open > .lg-btn::before {
  background-color: rgba(255, 143, 179, 0.24);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 143, 179, 0.5), 0 0 20px -6px rgba(255, 143, 179, 0.8);
}
.lg-dock .lg-btn:disabled { opacity: 0.42; cursor: default; }
.lg-dock .lg-btn.ready:not(:disabled)::before { animation: lg-pulse 1.1s ease-in-out infinite; }
@keyframes lg-pulse {
  0%, 100% { background-color: rgba(255, 143, 179, 0.08); box-shadow: var(--lg-shadow), 0 0 0 0 rgba(255, 143, 179, 0); }
  50% { background-color: rgba(255, 143, 179, 0.34); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 0 22px 2px rgba(255, 143, 179, 0.75); }
}
.lg-dock .lg-val {
  height: 24px; display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%;
}
.lg-dock .lg-val > b, .lg-dock .lg-val > span {
  font-size: 1.12rem; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}
.lg-dock .lg-val > .lg-ico { width: 16px; height: 16px; flex: none; opacity: 0.9; }
.lg-game .lg-ico {
  display: block; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.lg-dock .lg-stat.bump .lg-val { animation: lg-bump 0.5s var(--lg-spring); }
@keyframes lg-bump { 40% { transform: scale(1.3); } }

/* ---------- поповер режимов (поднимается из кнопки) ---------- */
.lg-pop-anchor { position: relative; display: flex; flex-direction: column; }
.lg-pop-anchor > .lg-btn { width: 100%; }
body.lg-game .lg-pop {
  position: absolute; z-index: 5; bottom: calc(100% + 14px); left: 50%; right: auto; top: auto;
  display: flex !important; flex-direction: column !important; align-items: stretch; gap: 8px !important;
  width: max-content; min-width: 150px; max-width: calc(100vw - 24px); margin: 0 !important; padding: 0 !important;
  grid-template-columns: none !important; background: none !important; border: 0 !important; box-shadow: none !important;
  transform: translateX(-50%); visibility: hidden; pointer-events: none;
  transition: visibility 0s linear 0.35s;
}
body.lg-game .lg-pop[data-side="l"] { left: 0; transform: none; }
body.lg-game .lg-pop[data-side="r"] { left: auto; right: 0; transform: none; }
.lg-pop-anchor.open > .lg-pop { visibility: visible; pointer-events: auto; transition: none; }
body.lg-game .lg-pop > * {
  position: relative; isolation: isolate; flex: none; width: auto !important; height: 44px !important; min-height: 0;
  margin: 0 !important; padding: 0 22px !important; border: 0 !important; border-radius: 22px !important;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff !important; cursor: pointer; white-space: nowrap; aspect-ratio: auto;
  font: 700 0.78rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: 0.16em !important; text-transform: uppercase;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 45%), rgba(22, 17, 36, 0.94) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 14px 30px -12px rgba(0, 0, 0, 0.9) !important;
  opacity: 0; transform: translateY(calc(26px + var(--k, 0) * 16px)) scale(0.55);
  transition: transform 0.22s ease, opacity 0.16s ease;
}
.lg-pop-anchor.open > .lg-pop > * {
  opacity: 1; transform: none;
  transition: transform 0.55s var(--lg-spring) calc(var(--k, 0) * 45ms), opacity 0.25s ease calc(var(--k, 0) * 45ms),
    background-color 0.2s ease;
}
body.lg-game .lg-pop > :is(.on, .active, .selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) {
  color: #fff !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 45%), linear-gradient(rgba(255, 95, 158, 0.42), rgba(255, 95, 158, 0.42)), rgba(22, 17, 36, 0.94) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 143, 179, 0.7),
    0 0 22px -4px rgba(255, 143, 179, 0.85), 0 14px 30px -12px rgba(0, 0, 0, 0.9) !important;
}
body.lg-game .lg-pop > :is(.on, .active, .selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"])::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; order: -1;
}
body.lg-game .lg-pop > :active, body.lg-game .lg-pop > .lg-tap {
  background: linear-gradient(rgba(255, 143, 179, 0.42), rgba(255, 143, 179, 0.42)), rgba(22, 17, 36, 0.94) !important;
}
body.lg-game .lg-pop > :disabled { opacity: 0.4; }
.lg-pop-src { display: none !important; }

/* ---------- диалоги: правила (exit.js), проигрыш (coins.js), свои .lg-overlay ---------- */
.lg-game .yx-rules, .lg-game .yx-rate, .lg-game .yx-lose, .lg-game .lg-overlay {
  background: rgba(4, 3, 10, 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lg-game .lg-overlay {
  position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px;
}
.lg-game .lg-overlay.show { display: flex; }
.lg-game .yx-rules .yx-rbox, .lg-game .yx-rate .yx-rtbox, .lg-game .yx-lose .yx-box, .lg-game .lg-dialog {
  position: relative; isolation: isolate; border: 0; border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 40%), rgba(18, 14, 30, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -20px rgba(0, 0, 0, 0.85);
}
.lg-game .lg-dialog { width: min(340px, 100%); padding: 22px 14px; text-align: center; animation: lg-pop-in 0.45s var(--lg-spring); }
.lg-game .yx-lose.show .yx-box { animation: lg-pop-in 0.45s var(--lg-spring); }
@keyframes lg-pop-in { from { opacity: 0; transform: translateY(18px) scale(0.92); } }
.lg-game .yx-lose h2, .lg-game .lg-dialog h2 {
  font-weight: 700; letter-spacing: 0.18em; font-size: 1.15rem; text-transform: uppercase; margin: 0 0 10px;
}
.lg-game .yx-rules p, .lg-game .yx-lose p, .lg-game .lg-dialog p { color: rgba(232, 230, 245, 0.75); }
.lg-game .lg-dialog p { margin: 0 0 16px; line-height: 1.4; }
.lg-game .lg-row { display: flex; justify-content: center; gap: 8px; }
.lg-game .yx-rules .yx-rbtns button, .lg-game .yx-rules .yx-rlangs button, .lg-game .yx-rate .yx-rtbtns button,
.lg-game .yx-lose .yx-row button {
  border: 0; border-radius: 22px; color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.lg-game .yx-lose .yx-row button.yx-again:active { background: rgba(255, 143, 179, 0.4); color: #fff; }
.lg-game .yx-lose .yx-row button.yx-save { background: rgba(255, 213, 74, 0.1); box-shadow: inset 0 0 0 1.5px rgba(255, 213, 74, 0.8); }
.lg-game .yx-lose .yx-row button.yx-save:active { background: rgba(255, 213, 74, 0.85); color: #1a1400; }
.lg-game .yx-rules .yx-rlangs button.on { color: var(--lg-accent); box-shadow: inset 0 0 0 1.5px var(--lg-accent); }
.lg-game .yx-toast {
  top: calc(14px + env(safe-area-inset-top)); border: 0; border-radius: 22px;
  background: rgba(30, 24, 46, 0.7);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 213, 74, 0.45), 0 14px 30px -10px rgba(0, 0, 0, 0.8);
}