/*
 * Тема «Liquid Glass» — по мотивам оформления Apple (iOS 26).
 * Правила: полупрозрачные стеклянные слои с размытием фона, световая кромка сверху, крупные скругления и капсулы,
 * системный шрифт, системные цвета Apple для тёмного режима. Контент важнее хрома: цветной фон виден сквозь панели.
 *
 * Всё здесь работает только при <html data-theme="glass">. Классическая тема (app.css) не изменена:
 * чтобы откатиться, достаточно переключить тему в настройках или поставить DEFAULT_THEME = 'classic' в index.html.
 */

html[data-theme='glass'] {
  /* слои: чем выше слой, тем он светлее и плотнее */
  --bg: rgb(0 0 0 / 26%);
  --s1: rgb(40 42 62 / 52%);
  --s2: rgb(255 255 255 / 11%);
  --s3: rgb(255 255 255 / 18%);
  --s4: rgb(255 255 255 / 30%);
  /* системные цвета Apple, тёмный режим */
  --text: #fff;
  --muted: rgb(235 235 245 / 62%);
  --green: #30d158;
  --red: #ff453a;
  --yellow: #ffd60a;
  --orange: #ff9f0a;
  --purple: #bf5af2;
  --blue: #0a84ff;
  --r: 16px;
  --grid: rgb(255 255 255 / 14%);
  /* стекло */
  --glass-line: rgb(255 255 255 / 15%);
  --glass-shine: inset 0 1px 0 rgb(255 255 255 / 30%), inset 0 -1px 0 rgb(255 255 255 / 5%);
  --glass-drop: 0 10px 34px rgb(0 0 0 / 32%);
  --glass-blur: blur(26px) saturate(180%);
  background: #05060b;
}

html[data-theme='glass'] body {
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Inter, Roboto, Arial, sans-serif;
  letter-spacing: -.005em;
}

/* Цветной фон, который просвечивает сквозь стекло */
html[data-theme='glass'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* графит: почти чёрный фон и один тусклый синий свет сверху */
  background:
    radial-gradient(60% 50% at 15% 0%, rgb(10 132 255 / 16%), transparent 70%),
    radial-gradient(55% 45% at 95% 55%, rgb(120 70 230 / 14%), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgb(255 120 60 / 8%), transparent 70%),
    #05060b;
}

/* ---------- Стеклянные поверхности ---------- */
html[data-theme='glass'] :is(.box, .notice, .feed, .stats, .game-main, .game-footer, .modal, .toast, .triple, .hilo-trail, .dk-invited, .crash-note) {
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shine), var(--glass-drop);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
html[data-theme='glass'] :is(.box, .feed, .stats, .notice) { border-radius: 26px; }
/* Liquid Glass: мягкий блик по верхнему краю и тонкая светлая кромка, как у панелей Fort */
html[data-theme='glass'] :is(.box, .feed, .stats, .notice, .page-tabs) {
  background-image: linear-gradient(160deg, rgb(255 255 255 / 11%) 0%, rgb(255 255 255 / 2%) 38%, rgb(255 255 255 / 0%) 60%, rgb(150 130 255 / 5%) 100%);
  border-color: rgb(255 255 255 / 16%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 34%), inset 0 0 0 1px rgb(255 255 255 / 3%), 0 14px 38px rgb(0 0 0 / 35%);
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
}
html[data-theme='glass'] .box .box, html[data-theme='glass'] .modal .fair-block { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

html[data-theme='glass'] .brand { letter-spacing: -.03em; }
html[data-theme='glass'] .brand i { border-radius: 9px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%); }
html[data-theme='glass'] .balance { border-radius: 999px; box-shadow: var(--glass-shine); }
html[data-theme='glass'] .avatar i { color: #04130a; }

/* ---------- Типографика ---------- */
html[data-theme='glass'] .big-mult { letter-spacing: -.04em; }

/* ---------- Кнопки: капсулы из стекла ---------- */
html[data-theme='glass'] :is(.btn, .fair-btn, .chip, .seg) { transition: background .15s, transform .1s, box-shadow .15s; }
html[data-theme='glass'] :is(.btn, .fair-btn) { border-radius: 999px; box-shadow: var(--glass-shine); }
html[data-theme='glass'] .btn:active:not(:disabled) { transform: scale(.96); }
html[data-theme='glass'] .btn-bet {
  border-radius: 999px;
  color: #04130a;
  background: linear-gradient(180deg, #5ee486 0%, #30d158 52%, #27b84b 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%), inset 0 -1px 0 rgb(0 0 0 / 14%), 0 8px 24px rgb(48 209 88 / 34%);
}
html[data-theme='glass'] .btn-bet:hover:not(:disabled) { background: linear-gradient(180deg, #74ec98 0%, #3ddc65 52%, #2bc451 100%); }
html[data-theme='glass'] .btn-bet:disabled { box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%); }
html[data-theme='glass'] .btn-bet[data-kind='stop'] {
  color: #fff;
  background: linear-gradient(180deg, #ff6a61 0%, #ff453a 55%, #e0352b 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 8px 24px rgb(255 69 58 / 32%);
}
html[data-theme='glass'] :is(.btn.dk-all, .quest .btn.dk-all, .dk-status .dk-all) { color: #04130a; background: var(--green); }
html[data-theme='glass'] :is(.dk-status .dk-foul, .dk-accuse:not(:disabled)) { background: var(--red); }

/* Переключатели-сегменты */
html[data-theme='glass'] .chips { padding: 3px; border: 1px solid var(--glass-line); }
html[data-theme='glass'] .chip.on { background: rgb(255 255 255 / 22%); box-shadow: var(--glass-shine), 0 2px 8px rgb(0 0 0 / 22%); }
html[data-theme='glass'] .page-tabs { background: var(--s1); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }

/* ---------- Поля ввода ---------- */
html[data-theme='glass'] .input { border-width: 1px; border-color: var(--glass-line); border-radius: 14px; }
html[data-theme='glass'] .input:is(:hover, :focus) { border-color: rgb(255 255 255 / 34%); }
html[data-theme='glass'] .input:focus { box-shadow: 0 0 0 3px rgb(10 132 255 / 30%); }
html[data-theme='glass'] .input.readonly { border-color: transparent; }
html[data-theme='glass'] .input-group { border-radius: 14px; }
html[data-theme='glass'] .input-group > .input-wrap .input, html[data-theme='glass'] .input-group > .input { border-radius: 14px 0 0 14px; }
html[data-theme='glass'] .seg { border-left-color: rgb(0 0 0 / 30%); }
html[data-theme='glass'] .seg:last-child { border-radius: 0 14px 14px 0; }
html[data-theme='glass'] .input-group > .btn { border-radius: 0 14px 14px 0; }
html[data-theme='glass'] .input-group > .btn.wide { border-radius: 999px; }
html[data-theme='glass'] :is(.set-row input[type='checkbox'], .dk-private input, .seg.check input, .vol) { accent-color: var(--green); }

/* ---------- Карточки игр ---------- */
html[data-theme='glass'] :is(.game-card, .prov-card) {
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 22%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%), inset 0 -1px 0 rgb(0 0 0 / 14%), 0 10px 26px rgb(0 0 0 / 30%);
}
html[data-theme='glass'] .game-card b { letter-spacing: -.01em; }

/* ---------- Экран игры ---------- */
html[data-theme='glass'] .game-main { border-radius: 26px 26px 0 0; border-bottom: 0; background: rgb(255 255 255 / 4%); }
html[data-theme='glass'] .panel { background: rgb(255 255 255 / 6%); }
html[data-theme='glass'] .stage { border-color: transparent; background: rgb(0 0 0 / 22%); }
html[data-theme='glass'] .game-footer { border-radius: 0 0 26px 26px; border-top-width: 1px; }
html[data-theme='glass'] .pill { box-shadow: var(--glass-shine); }
html[data-theme='glass'] .pill.good { color: #04130a; }
html[data-theme='glass'] .stat, html[data-theme='glass'] .spark { border-radius: 14px; }

/* клетки Mines и Keno — стеклянные плитки */
html[data-theme='glass'] :is(.tile, .keno-tile) { border-radius: 14px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), inset 0 -3px 0 rgb(0 0 0 / 16%); }
html[data-theme='glass'] :is(.tile.gem, .tile.mine, .tile.dim, .keno-tile.miss) { background: rgb(0 0 0 / 38%); box-shadow: inset 0 1px 6px rgb(0 0 0 / 35%); }
html[data-theme='glass'] .tile.boom { background: rgb(255 69 58 / 32%); }
html[data-theme='glass'] :is(.tile.picked, .keno-tile.picked) { background: var(--purple); box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), inset 0 -3px 0 rgb(0 0 0 / 22%); }
html[data-theme='glass'] .tile.picked:not(:disabled):hover { background: #cf7df6; }
html[data-theme='glass'] .keno-tile.picked.hit { background: rgb(0 0 0 / 38%); box-shadow: inset 0 0 0 3px var(--green); }
html[data-theme='glass'] .keno-cell, html[data-theme='glass'] .wheel-cell { border-radius: 12px; }
html[data-theme='glass'] .keno-cell.on { color: #04130a; }

/* Slots */
html[data-theme='glass'] .slot-window { border-radius: 22px; background: rgb(255 255 255 / 7%); box-shadow: var(--glass-shine); }
html[data-theme='glass'] .slot-window.free { box-shadow: var(--glass-shine), inset 0 0 0 2px var(--purple), 0 0 30px rgb(191 90 242 / 40%); }
html[data-theme='glass'] .slot-reel { border-radius: 14px; background: rgb(0 0 0 / 34%); box-shadow: inset 0 1px 6px rgb(0 0 0 / 35%); }
html[data-theme='glass'] .slot-banner { border-radius: 22px; background: rgb(10 12 20 / 78%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
html[data-theme='glass'] .slot-hold { background: rgb(10 12 20 / 86%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
html[data-theme='glass'] .hold-cell { border-radius: 14px; background: rgb(255 255 255 / 7%); }
html[data-theme='glass'] .slot-big { border-radius: 22px; }
html[data-theme='glass'] .bz-window { border-radius: 22px; }
html[data-theme='glass'] .bz-col:first-child { border-radius: 17px 0 0 17px; }

/* Нижняя панель приложения — парящая стеклянная капсула */
/* у нижней панели слои прежние, прозрачные */
html[data-theme='glass'] .tabbar { --s1: rgb(255 255 255 / 7%); --s2: rgb(255 255 255 / 10%); --s3: rgb(255 255 255 / 16%); --s4: rgb(255 255 255 / 27%); }
html[data-theme='glass'] .tabbar {
  left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) * .5);
  padding: 6px;
  border: 0; border-radius: 999px;
  background: rgb(18 20 30 / 84%);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shine), 0 12px 32px rgb(0 0 0 / 50%);
}
html[data-theme='glass'] .tab { border-radius: 999px; padding: 7px 0 5px; }
/* на широком экране панель не растягивается на всю ширину */
@media (min-width: 720px) { html[data-theme='glass'] .tabbar { left: 50%; right: auto; width: 480px; margin-left: -240px; } }
html[data-theme='glass'] .tab { z-index: 1; }
html[data-theme='glass'] .tab.on { color: #fff; }
html[data-theme='glass'] .tab.press { color: #fff; }
html[data-theme='glass'] .tab.press svg { transform: scale(1.1); }
html[data-theme='glass'] .tab svg { transition: transform .2s; }
.tab-lens { display: none; }
html[data-theme='glass'] .tab-lens {
  display: block; position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; pointer-events: none;
  background: rgb(255 255 255 / 14%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%);
  transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), width .3s, height .3s, background .2s, box-shadow .2s;
}
html[data-theme='glass'] .tab-lens.hold { background: rgb(255 255 255 / 22%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%); }
html[data-theme='glass'] .holding .tab:not(.press) { color: var(--muted); }
html[data-theme='glass'] .holding .tab:not(.press) svg { color: inherit; }
html[data-theme='glass'] .tab.on svg { color: var(--green); }
html[data-theme='glass'] .tab.dot span::after { box-shadow: 0 0 0 2px #171922; }
html[data-theme='glass'].has-tabbar .view { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
html[data-theme='glass'].has-tabbar .toasts { top: calc(8px + env(safe-area-inset-top)); }
html[data-theme='glass'] .crumbs .balance { background: rgb(255 255 255 / 9%); }
html[data-theme='glass'] .sticky-chest { border-radius: 14px; background: #241a0c; }
html[data-theme='glass'] .hold-cell.on { background: rgb(255 214 10 / 12%); }
html[data-theme='glass'] :is(.slot-table span, .slot-linemap div) { border-radius: 10px; }
html[data-theme='glass'] .slot-total.good { color: #04130a; }

/* Dice, Roulette, Plinko */
html[data-theme='glass'] .triple .field-label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme='glass'] .dice-bar { box-shadow: var(--glass-shine); }
html[data-theme='glass'] .dice-range::-webkit-slider-thumb { border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / 40%); }
html[data-theme='glass'] .dice-range::-moz-range-thumb { border-radius: 50%; background: #fff; }
html[data-theme='glass'] .rl-cell { border-radius: 8px; }
html[data-theme='glass'] .rl-cell.red { background: var(--red); }
html[data-theme='glass'] .rl-cell.green { background: var(--green); color: #04130a; }
html[data-theme='glass'] .rl-center.red { background: var(--red); }
html[data-theme='glass'] .rl-center.green { background: var(--green); }
html[data-theme='glass'] .pill.c-red { background: var(--red); }
html[data-theme='glass'] .pill.c-green { background: var(--green); color: #04130a; }
html[data-theme='glass'] .bucket { border-radius: 6px; }

/* Дурак */
html[data-theme='glass'] .bj-hand, html[data-theme='glass'] .dk-seat, html[data-theme='glass'] .quest { border-radius: 16px; }
html[data-theme='glass'] .crash-note { background: rgb(0 0 0 / 34%); }

/* ---------- Списки ---------- */
html[data-theme='glass'] :is(.feed-row, .row) { border-radius: 12px; }
html[data-theme='glass'] .row.rank.me { box-shadow: inset 0 0 0 2px var(--green); }
html[data-theme='glass'] .kpi, html[data-theme='glass'] .award { border-radius: 16px; }
html[data-theme='glass'] .award i { color: #04130a; }
html[data-theme='glass'] .ticker-item { border: 1px solid var(--glass-line); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }

/* ---------- Окна и сообщения ---------- */
html[data-theme='glass'] .modal-wrap { background: rgb(0 0 0 / 38%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-theme='glass'] .modal { border-radius: 28px; background: rgb(28 28 34 / 62%); }
html[data-theme='glass'] .modal-head { background: transparent; border-bottom: 1px solid var(--glass-line); }
html[data-theme='glass'] .toasts { top: calc(80px + env(safe-area-inset-top)); }
html[data-theme='glass'] .toast { border-radius: 999px; border-left-width: 1px; padding: 10px 18px; background: rgb(40 40 48 / 62%); }
html[data-theme='glass'] .toast::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--red); vertical-align: middle; }
html[data-theme='glass'] .toast.ok::before { background: var(--green); }

/* ---------- Главная страница сайта ---------- */

@media (max-width: 820px) {
  html[data-theme='glass'] .modal { border-radius: 28px 28px 0 0; }
}

/* Где нет поддержки размытия фона, стекло заменяется плотной подложкой, чтобы текст оставался читаемым */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
}

/* карточки игр: скругление и зазоры как в app.css (общие переменные), стекло сохраняется */
html[data-theme='glass'] :is(.game-card, .prov-card) { border-radius: var(--card-r); }
html[data-theme='glass'] :is(.game-card, .prov-card) { border-width: 1px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 4px 10px rgb(0 0 0 / 28%); }

/* уведомление и переключатель вкладок лобби: скругление поменьше */
html[data-theme='glass'] .notice { border-radius: 14px; }
html[data-theme='glass'] :is(.lobby-tab, .prov-sub) { border-radius: 12px; }
html[data-theme='glass'] :is(.game-card, .prov-card) { border-radius: var(--card-r); }
html[data-theme='glass'] .is-lobby :is(.lobby-tab, .prov-sub) { border-radius: 12px; }
html[data-theme='glass'] .page :is(.box, .box.daily, .box.pf-head) { border-radius: 14px; }
html[data-theme='glass'] .page :is(.chips.page-tabs, .page-tabs) { border-radius: 12px; }
html[data-theme='glass'] .page .chips .chip { border-radius: 9px; }
html[data-theme='glass'] .page :is(.btn, .btn-bet) { border-radius: 10px; }
html[data-theme='glass'] .page :is(.kpi, .quest, .award) { border-radius: 10px; } html[data-theme='glass'] .page .row { border-radius: 8px; }

/* ---------- Облегчённое стекло: меньше размытия, без усиления цвета, в играх и на плашках — без размытия ---------- */
html[data-theme='glass'] { --glass-blur: blur(18px); }
html[data-theme='glass'] :is(.box, .feed, .notice, .page-tabs) { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
html[data-theme='glass'] .ticker-item { background: rgb(255 255 255 / 9%); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* внутри игр блоки не размываются: на экране идёт анимация, и размытие под ней пересчитывается каждый кадр */
html[data-theme='glass'] :is(.game-main, .game-footer, .stats, .triple, .hilo-trail, .crash-note, .dk-invited) {
  background-color: rgb(20 22 32 / 78%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}